Как сделать визитку html

В первом столбце у нас будет стоять картинка – фотография, поэтому мы должны объединить три строки в одну. Делается это с помощью атрибута rowspan для тега . В нашем случае значение атрибута будет «3» (две строки лишних строки мы убираем).

Вставляем фотографию. На этот раз мы используем одиночный тег и атрибуты для него: align= «left» и src в котором мы задаем путь к картинке.

Вот что у нас получилось.

Первую строку второго столбца объединяем с первой строкой третьего столбца с помощью атрибута colspan со значением «2» и пишем в нее имя и фамилию. Чтобы эта надпись находилась по середине ячейки присоединяем еще и атрибут align= «center».

Как видите, надпись совершенно не видно, поэтому мы заключаем ее в тег с атрибутами: size = «60» color= «669933». Цвет вы можете выбрать сами. Ниже я приведу рисунок с кодами для любого цвета.

Займемся второй строчкой. В первой паре тегов мы пишем слово: «Специализация» и заключаем его в тег с теми же атрибутами, но меняем цвет.

Во вторую пару тегов мы собственно и вписываем свою или чью-то специализацию. При этом в мы не ставим атрибут size.

Ну вот мы и дошли до последней строки. В первую пару тегов пишем: «Контактная информация.». Все теги и атрибуты остаются такими же, как и в прошлый раз.

В последний столбик вписываем всю ту информацию, какую вы посчитаете нужной. У меня это телефон, почта и адрес.

Теперь убираем атрибут border в теге и, вуаля, наша страничка готова.

Надеюсь, моя статья была вам полезна.

Источник

Создание сайта визитки (Часть 1)

На этом уроке мы рассмотрим процесс создания сайта, состоящего из одной страницы, на HTML 5 с применением классов и компонентов Bootstrap 3.

Создание сайта визитки

Сайт визитка – это простой сайт, который состоит из небольшого количества страниц, и содержащий основную информацию о фирме, компании, предприятии или частном лице. Стоимость сайта визитки зависит от дизайна и количества страниц, и составляет от 4000 рублей. А стоят ли несколько страниц таких денег? Нет! С помощью этого урока вы научитесь, как разработать свой сайт с использованием технологии Twitter Bootstrap 3 и поместить его в интернете.

Создание файла HTML и подключение к нему стилей и скриптов Bootstrap 3

Перед тем, как приступить к созданию сайта давайте рассмотрим что же нам дает платформа Bootstrap 3. Во первых она предлагает поддержку различных браузеров, что уже хорошо. Во вторых адаптивный дизайн, т.е. наш сайт будет отлично выглядеть на устройствах с различными диагоналями экранов. В третьих высокая скорость разработки, т.е. нет необходимости тратить много часов на разработку различных элементов веб-страниц. В итоге получается, что разработчик лишь применяет готовые компоненты, классы и скрипты Bootstrap, а остальное делает уже сама платформа.

В качестве примера рассмотрим процесс создания сайта фирмы Business, которая будет содержать информацию о компании, услугах, портфолио, а также контактную информацию.

Создание сайта начнём со скачивания архива, который состоит из файлов платформы Bootstrap 3 и иконок Font Awesome.

После скачивания и распаковки архива, создаём HTML файл с именем index.html, к которому подключим стили и скрипты платформы Bootstrap 3 и стили для использования иконок Font Awesome.

Содержимое файла index.html с пояснениями ( )

Создание макета

На изображении показано, что веб-страница состоит из 2 основных частей: основного контейнера (container) и подвала (footer). Основной контейнер (container) выровнен в горизонтальном направлении по центру и содержит следующие части: шапку страницы (header); горизонтальное навигационное меню (nav); нижнюю часть шапки (header-bottom); блок об услугах компании (main), состоящий из 3 колонок; блок об основных методах (method) применяемых в компании; блок, содержащий портфолио (work) компании.

Источник

Как сделать сайт-визитку на HTML?

Сегодня уже все знают о пользе интернета, и каждый сознательный бизнесмен понимает актуальность и важность персонального сайта-визитки для компании. Теперь создать сайт для презентации своей компании — это наиболее эффективный бизнес инструмент, который играет важную роль в маркетинговом, информационном и имиджевом продвижении компании.

Но, обо всем по порядку. Начнем с того, что сайт-визитка представляет собой многостраничный веб-ресурс с достаточно простой структурой, который используется как «визитная карточка» в интернете, представляя интересы и деятельность компании. Кроме того, сегодня компания без сайта рискует не только потерять «львиную долю» потенциальных партнеров и клиентов, но и утратить доверие целевой аудитории. Компания без сайта не воспринимается серьезно, доверие к ней намного меньше, чем к фирмам у которых в сети крутится крутой и красивый веб-ресурс.

И, если вы решили создать сайт визитку, давайте рассмотрим варианты его реализации.

Первый способ создания сайта — это заказать его разработку в веб-студи. Здесь есть и свои плюсы — вы получите уникальный и полностью разработанный под вашу деятельность ресурс. И свои минусы — разработка будет стоить достаточно дорого и может занять не один месяц. Да и найти качественную студию, сегодня может быть достаточно сложно, ведь конкуренция высока, а сфера достаточно прибыльная и перспективная. Такой способ реализации сайта, может себе позволить далеко не каждый, а для начинающей собственную деятельность компании, это может «влететь в копеечку».

Поэтому давайте рассмотрим более бюджетные варианты реализации сайтов, а именно различные готовые шаблоны, которых в сети сегодня можно найти очень много. Например, готовые шаблоны сайтов на HTML, которые в широком ассортименте представлены здесь. Давайте рассмотрим некоторые варианты дизайна из них.

Как видите, HTML шаблон — это практически готовый сайт, который остается только наполнить контентом и залить на хостинг. А разнообразные и оригинальные дизайны, смогут удовлетворить интересы любого человека. Здесь есть и грамотно продуманный и реализованный функционал, и крутая графика и дизайнерские решения, который в тренде в этом году. Также вы сможете самостоятельно вносить изменения в структуру и оформление, добавлять новые функции, отдельно докупив и установив шаблон в административную панель. А если у вас достаточно знаний в работе с HTML, вы сможете самостоятельно работать с исходным кодом выбранного вами шаблона.

Источник

Страница виде визитной карточки 3D на CSS