Создаем первую web-страницу

Создаем первую web-страницу

Всем привет. Я думаю, каждый согласится с утверждением:

Не нужно думать, что ты не сможешь или что скажут остальные. Нужно просто садиться и делать!

Так что настало время создать свою первую web страничку. Поехали!

Содержание статьи:

Начало

Я надеюсь, вы определились, в чем будете верстать. Если же не определились, то урок будет не очень сложный, поэтому достаточно notepad++ или блокнота.

Итак, давайте приступим.

Как пример разберем html-страницу с отформатированным текстом. Будет полезно для закрепления тегов форматирования текста и некоторых приемов с ними. Надеюсь вы уже почитали справочник по тегам, чтобы было легче разбираться с кодом. Смотрим листинг:

html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Первая страница</title>
</head>
<body>
<h1>Наша первая страница.</h1>
<p>Вот мы и создали свою первую <b>веб страницу</b> <i>Надеюсь этот урок был полезным.</i></p>
<a href="https://goo.gl/KGtBWK">Лучшие уроки по программированию в рунете!</a>
</body>
</html>

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

screen.jpg

Разберем код

Пусть первая строчка вас не пугает. Это DOCTYPE.

DOCTYPE предназначен для указания типа нашей web-странички, т.е. чтобы браузер понимал, с каким языком он имеет дело.

Доктайп не обязателен, но желателен, поэтому в этом уроке я показал вам, как он выглядит.

Далее в контейнере <head> у нас имеется мета-тег кодировки страницы. В данном случае он имеет значение UTF-8. Эта означает, что ваша страница имеет кодировку символов юникода.

Про тег <title> я думаю все всем понятно, так что идем дальше.

<h1></h1> – это тег заголовка, он имеет свой определенный размер в зависимости какая цифра будет стоять рядом с h (<h1>,<h2>,<h3> и т.д.), чем больше число тем меньше заголовок.

<p></p> – это тег параграфа. Если за ним следует такой же контейнер, то между параграфами будет отступ.

В тег параграфа вложен тег полужирного текста <b> и курсива <i>. Думаю с этим то же все ясно.

И последний тег - это тег гиперссылки <a></a>. Да той самой ссылки перехода, который мы так привыкли пользоваться. Имеет параметр «href», в котором указываем ссылку на отличный ютуб канал по программированию. Между самими тегами указываем текст, который будет подсвечиваться как ссылка.

Рекомендую не копировать текст страницы, а набрать пару разиков самому, чтобы закрепить в голове основные теги и правила написания кода.

Заключение

Теперь, когда вы знаете азы html нужно налегать на теги и экспериментировать с ними. Удачного кодирования, товарищи начинающие веб мастера!