Сайт — HTML визитка

Всем привет!

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

Итак, начнем.

Открываем редактор. Лично я работаю в Notepad++. Создаем файл !ВНИМАНИЕ! в формате HTML.

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

Как видите, все основное у нас написано, а значит можно приступать к сложной работе. Для начала давайте сделаем фоновую картинку. Делается это так: в тег <body> мы вставляем атрибут background, в значении указываем путь к картинке, которую вы хотели бы сделать фоном. Лично у меня картиночка вот такая.

Чтобы написать путь, можно сделать так: открываем свойства картинки и копируем расположение.

В конце не забываем вставить название картинки и обязательно указываем ее формат. Получиться должно примерно вот так:

Я подумала, что всю необходимую информацию разместить будет легче с помощью таблицы, так что теперь сделаем шаблон таблички.

Как видите, шаблончик и вправду очень простой, я бы даже сказала – примитивный. Но уверяю вас: даже этого нам будет предостаточно.

Копируем его и вставляем в наш документ.

Теперь займемся проработкой. В нашей табличке должно быть три столбца, а в каждом столбце по три строчки. Выполняем.

Теперь у нас все как надо. Напишем атрибуты для тега

: в данном случае это — cellpadding= «40» aling= «center» иborder= «3».Borderнужен только на время, чтобы вы могли увидеть свою ошибку, если она вдруг появится.

Вот как это будет выглядеть в браузере:

В первом столбце у нас будет стоять картинка – фотография, поэтому мы должны объединить три строки в одну. Делается это с помощью атрибута rowspan для тега

. В нашем случае значение атрибута будет «3» (две строки лишних строки мы убираем).

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

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

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

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

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

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

! Тег
делает перенос на следующую строку !

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

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

Теперь убираем атрибут border в теге

и, вуаля, наша страничка готова.

 

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

До новых встреч!

 

Сайт — HTML визитка: 1 комментарий

  • 31.05.2018 в 11:54
    Permalink

    Благодарю! Очень полезная информация. Сейчас трудновато найти внятное начальное обучение с ноля.

    Ответ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

один × пять =

Яндекс.Метрика