Это первая часть учебника про HTML, в ней мы расскажем про основы языка гипертекстовой разметки документов HTML, самое главное что нужно знать про него.
Что такое HTML:
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине.
Для работы с ним используются теги, вот как они выглядят.
1 | <название тега>...</название тега> |
Тут мы показали как выглядит закрывающийся тег, то есть, первый это открывающий, второй это закрывающий, также есть теги в которых не нужно использовать их закрывающий аналог.
Что нужно для работы с HTML:
Для работы с HTML вам не чего ни нужно, кроме разве что, браузера, ну и текстового редактора, если вы не знаете какой выбрать, то посмотрите статью Топ 5 лучших текстовых редакторов для программистов, я думаю в ней вы найдёте то что вам нужно.
Что нужно знать перед работай:
Для начала что нужно знать, так это как вообще работает страница со сервером, для этого есть такая схема.
Схема очень простая, сначала клиент отправляет запрос, например, yendex.ru, запрос отправляет на DNS сервер, где он ищет IP-адрес этого домена, находит и отправляет запрос на сам сервер, сервер находит страницу под нужны адресом и отправляет эту Web-страницу в качестве ответа.
Это как работает клиент сервером, и как клиент получает Web-страницу.
Теперь наверное самое главное что нужно знать, это что вообще веб страница представляет собой, что в ней есть, что бы понять это, посмотрите на схему ниже.
Как видите, самом вверху у нас Header или шапка сайта, потом идёт меню, а дальше три блока, первый, это блок в котором может находится меню, реклама, ну ещё может быть что нибудь, второй это главный блок со всем содержимым, третий точно такой же, как и первый, но туда редко вставляют меню, последнее это Footer или подвал сайта, туда обычно вставляют данные о компании, проекте.
Это пожалуй всё что стоит знать перед работай с HTML.
Первая HTML страница:
Наконец теперь перейдём к основам создания сайта на языке HTML, но сделаем только одну совсем простую страницу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Первая страница</title> </head> <body> <header>Шапка страницы</header> <hr> <main>Основной контент</main> <hr> <footer>Подвал сайта</footer> </body> </html> |
Давайте разберём эту страницу, и первое что бросается в глаза новичку, так это зачем нужен DOCTYPE в HTML, он тут для того, что бы объяснить какой тип документа браузеру, так как, подобных языков HTML много, например XHTML, и они все со своим синтаксисом, точнее не много их синтаксис отличается друг от друга.
Дальше идёт тег <html lang="ru">, в нём и пишется весь документ, все данные о нём, также атрибут lang, назначает какой язык используется для странице, это в основном нужно для переводчиков страниц, в нашем случае там стоит значение «ru».
Потом <head>, в нём хранятся различные данные о странице, например, <title>, он хранит заголовок страницы или Meta тег, в нашем случае он имеет атрибут charset, который назначает кодировку для страницы, у нас это «UTF-8».
После <head>, идёт тег <body>, пожалуй самый важный тег, в нём хранится весь контент сайта, всё что выводится на экран, посмотрим какие теги он у себя имеет.
- header — Тег для шапки страницы;
- main — Тег для основного контента;
- footer — Тег для подвала сайта;
- hr — Тег простой полосы;
Наверное надо сказать, зачем нужны эти теги, а нужны для поисковиков, сейчас, если их нет, то поисковики будут игнорировать ваш сайт, вот результат.
На этом первый разбор HTML можно закончить.
Проверить валидацию HTML:
Последнее, что нужно рассказать, это про волидацию, это то как правильно ваш сайт написан на HTML, что бы это проверить зайдите на этот сайт, в нём вы и сможете всё проверить.
Вывод:
В первой части учебника, мы разобрали основы языка гипертекстовой разметки документов HTML, надеюсь для вас это было полезно, если чего то не понятно, то пишите комментарии.
Подписываетесь на соц-сети:
Оценка:
Загрузка...