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

Всем привет!

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

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

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

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

1

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

strana

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

2

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

3

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

4

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

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

5

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

6

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

7

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

8

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

9

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

10

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

11

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

12

13

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

14

15

16

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

17

18

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

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

19

20

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

21

22

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

23

24

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

25

sait-vizitka

 

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

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

 

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

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

5 + 14 =