Создайте свою первую веб-страницу в HTML
Чтобы создать веб-страницу в HTML всё, что вам нужно сделать, это создать файл с расширением .html.
Для этого сделаем следующее :
- создаем папку с именем Resto_Pelican
- хватаем папку и несём в наш Visual Studio Code, который вы уже загрузили
- в открывшемся Visual Studio Code, создаем файл index.htlm
Используйте базовую структуру HTML-страницы
Чтобы написать свою первую настоящую веб-страницу в HTML, откройте файл index.html в Visual Studio Code, скопируйте и вставьте приведенный ниже код
Вот что это за lang="ru"?
Хорошо видно! Это атрибут. Мы добавили его, чтобы указать язык веб-сайта, который мы собираемся создать: lang="ru". Вообще-то это не обязательно (тег <html> сам по себе не препятствует работе кода), просто если вы кодируете веб-сайт на русском языке, это избавит вас от возможных проблем с отображением. Кроме того, он позволяет вам установить русский язык вашего веб-сайта по умолчанию.
Впрочем, вернемся к теме…
Соответствующие HTML-теги
Язык HTML использует так называемые теги. Они записываются между угловыми скобками < и >:
Как сделать теги на клавиатуре?
И для чего на самом деле используются теги?
Теги указывают характер заключенного в них текста. Они позволяют браузеру понять, что отображать на экране для посетителей веб-сайта.
Если бы они могли говорить, они бы сказали: <title> </title>: «Это заголовок страницы», <img>: «Это изображение», <p> </p>: «Это абзац текста» и т. д.
Эй, а почему некоторые теги дублируются и принимают / в своем синтаксисе?
Теги бывают двух видов:
- Парные теги (открывающий тег и закрывающий тег)
- И одиночные теги (один тег).
Парные теги
Они открываются, содержат текст и закрываются позже. Если взять тег title, соответствующий названию страницы, то вот что он нам дает:
<title>Это заголовок моей страницы</title>
Тег title ограничивает то, что будет заголовком. Для компьютера все, что не находится между этими двумя тегами, не является заголовком.
Одиночные теги
Это теги, которые чаще всего используются для вставки элемента в определенное место (например, изображения). Вам не нужно разграничивать начало и конец изображения, вы просто хотите сказать компьютеру: «Вставьте изображение сюда». Поэтому нет необходимости делать открывающий и закрывающий теги, отсюда и название «одиночный тег».
Одиночный тег записывается так: <img>
До недавнего времени мы ставили / в конце несвязанных тегов, чтобы сказать, что они самозакрывающиеся, например: <img /> .
Этот синтаксис теперь генерирует предупреждение в W3C. Поэтому не рекомендуется ставить косую черту в конце одиночного тега. Если вы всё равно хотите это сделать, не забудьте указать значения атрибутов в кавычках. Например: <img src="…" alt="…" />
Параметрируйте свои теги с помощью атрибутов
В следующих главах мы будем использовать, помимо тегов, атрибуты. Атрибуты похожи на параметры тега. Они дополняют их, предоставляя дополнительную информацию. Например :<img src=”…” alt=”…” />
Атрибут находится в открывающем теге парного тега или непосредственно в одиночном теге, как в случае с тегом <img>:
Да, кстати, в этой базовой структуре важен порядок тегов?
ДА ! Теги открываются, затем закрываются, и они соединяются в определенном порядке.
Синтаксис <html><body></html></body> неверен: теги переплетаются. Синтаксис <html><body></body></html> правильный: тег, который открывается внутри другого тега, также должен быть закрыт внутри этого.
Таким образом, у нас есть так называемые элементы «родители» , которые будут содержать другие так называемые элементы «дети» . Это немного похоже на матрёшку.
Давайте посмотрим, для чего нужны все эти теги.
- Первая строка <!DOCTYPE html> — это обязательный одиночный тег: он указывает, что это страница - страница HTML.
- Пара тегов <html> </html> охватывает все содержимое веб-страницы. Внутри находятся пары тегов <head> </head> и <body> </body>.
- Парные теги <head> </head> содержит два тега, которые предоставляют браузеру информацию: кодировку и заголовок страницы.
- Одиночный тег <meta charset="utf-8"> указывает кодировку, используемую в файле .html. Это определяет способ отображения специальных символов (ударения, китайские и японские иероглифы и т. д.).
- Парные теги <title> </title> сообщает браузеру заголовок веб-страницы. У каждой страницы должен быть заголовок, который описывает, что она содержит, он будет отображаться на вкладке браузера и появляться в результатах поиска, как в Google.
- Парный тег <body> </body> содержит все, что будет отображаться на экране на веб-странице.
Прежде чем мы закончим, давайте обсудим передовую практику, которой должен следовать каждый разработчик: комментирование своего кода.
Комментируйте свой HTML-код
Комментарий в HTML — это текст, который служит просто памяткой. Не отображается, не читается компьютером, не меняет вид страницы.
Это полезно для вас, кто занимается разработкой, и для людей, которые будут читать исходный код вашей страницы. Вы можете использовать комментарии, чтобы оставить индикатор о работе вашей страницы. Это позволит вам вспомнить, как работает ваша страница, если вы вернетесь к исходному коду после долгого отсутствия.
А как написать комментарий?
Комментарий — это тег - HTML особой формы:
<!—Это комментарий -->
Вы можете поместить его в любое место в исходном коде.
Будьте осторожны, каждый может увидеть исходный код-HTML вашей страницы после ее публикации в Интернете с помощью инструмента проверки. Таким образом, ваши комментарии также будут видны, выполнив «Просмотреть код страницы». Поэтому не оставляйте в комментариях конфиденциальную информацию, такую как пароли...
Более того, в Visual Studio Code, чтобы превратить строку (или даже несколько строк) в комментарий:
- выберите нужную строку (или строки):
- используйте сочетание клавиш CTRL + / (или команду ⌘ + / на Mac).
Папку images заполняем рисунками. Можно взять пеликана здесь.
Файл index.htlm открывается в веб-браузере простым двойным щелчком по нему.
Эй, что это за альт?
Это хороший переход к остальной части этой главы!
Добавьте атрибут alt, чтобы дать изображению альтернативное описание. Давать альтернативное описание изображению — хорошая практика!
То есть? Я не понимаю, что такое альтернативное описание.
Альтернативное описание — это краткий текст, который описывает, что содержит изображение.
- пишется вместо изображения, если оно не может быть отображено при загрузке веб-страницы (такое бывает);
- аудио-описание штурманами людей с ограниченными возможностями (слабовидящие, слепые).
Таким образом, это способствует улучшению доступности веб-сайта. Кроме того, это помогает сканерам поисковых систем находить изображения.
Поздравляем! Вы создали свою первую веб-страницу! Вы можете собой гордиться! В следующей главе мы углубимся в детали и узнаем, как организовать текст в HTML. Так что скоро увидимся!
