lesson3_HTML_rus.pdf
- 1. Проектирование и веб-разработка Тема: Введение в язык разметки HTML Приступим к изучению языка разметки HTML. Основные идеи этого урока: - расшифровка аббревиатуры HTML и возможности использования языка разметки HTML; - отличия между понятием HTML-«тег» и HTML-«элемент»; - атрибуты HTML-элементов; - основная структура HTML-документа; - создание веб-документа с помощью редактора кода; - интерпретирование веб-документа - веб-браузером. Аббревиатура – HTML является производным от HyperText Markup Language – на русском - «Язык Разметки ГиперТекста» и является стандартным языком разметки, используемым для определения документов, предназначенных для отображения в веб-браузере. Почему «язык разметки»? Потому что в его основе лежат специальные «ярлыки» или «теги», которые можно использовать для разметки определенного содержимого. HTML - это не язык программирования! HTML официально появился в 1993 году. Первоначально он использовался для создания простых текстовых файлов, которые, после интерпретировании браузером, генерировали веб-страницы. Сегодняшние веб-страницы сильно изменились по сравнению с веб-страницами прошлого века. Сегодня язык разметки HTML часто используется и для определения веб-интерфейсов сложных веб- приложений.
- 2. Проектирование и веб-разработка Ниже представлен сайт компании Apple (https://www.apple.com/), каким он был в 1994... и какой он стал сегодня, в 2021. Заметил разницу? :) HTML используется для определения структуры веб-страницы. Далее можно добавить стили, чтобы изменить внешний вид страницы. Со временем появилось несколько версий языка HTML. Сегодня мы достигли 5-ой версии. Таким образом, основным компонентом языка HTML является тег. HTML-тег может быть «открывающимся» или «закрывающимся». Теги заключаются в специальные символы «<» (знак меньше) и «>» (знак больше). Например: <p>, </p>, <br />, <a>, </a> - это HTML-теги. Обрати внимание, что закрывающий тег отличается от открывающего, только наличием символа косой черты - «/» или на английском «slash». Однако, если перейти к HTML-элементу, то он содержит открывающийся тег, его содержимое и закрывающий тег. Синтаксис HTML-элемента: <открывающийся_тег> Контент </закрывающийся_тег > Все, что находится между открывающим и закрывающим тегами, зависит от этого элемента и называется содержимым HTML-элемента. В HTML есть элементы, у которых есть содержимое, и есть элементы, у которых нет содержимого. Примеры HTML-элементов: <p> Здесь написан текст </p> - этот элемент имеет содержимое и у него есть закрывающий тег.
- 3. Проектирование и веб-разработка Другой пример... <img src="photo.jpg" alt="Красивое фото" /> - это все еще HTML-элемент, но у него нет содержимого и закрывающего тега. Поскольку были версии HTML, а именно XHTML, в которых все HTML-элементы должны были иметь закрывающий тег, рекомендуется для HTML-элементов без содержимого указывать его «закрытие» непосредственно в открывающем теге. То есть мы будем соблюдать следующий синтаксис <tag… /> ... и вот несколько примеров элементов без контента: <br />, <hr /> и могут быть и другие. Атрибуты элементов HTML-элементы могут иметь атрибуты. Атрибут определяет какое-то дополнительное свойство для HTML-элемента. Атрибут состоит из пары атрибут = значение (атрибут равно значение) и всегда указывается в начальном теге элемента. Начальный тег HTML-элемента может содержать любое количество атрибутов, разделенных пробелом. Элемент HTML может иметь или не иметь атрибутов. Пример HTML-элемента с атрибутами: <img src="photo.jpg" alt="Красивое фото" />, где src - это атрибут, а photo.jpg – это его значение. Обратите внимание, что значение атрибута заключено в кавычки. При указании значений атрибутов HTML-элементов рекомендуется постоянное использование кавычек. Можно использовать двойные или одинарные кавычки, но в случае значений атрибутов, лучше использовать двойные кавычки. В HTML5 многие атрибуты элементов больше не поддерживаются и рекомендуется заменить их свойствами стиля. Но все эти детали мы разберём на других уроках... Интересно еще что в HTML есть несколько специальных атрибутов, называемые «глобальными атрибутами». Глобальные атрибуты - это те атрибуты, которые можно указать в любом HTML-элементе. Вот некоторые примеры глобальных атрибутов: class, id, style, title... Основная структура веб-документа Далее рассмотрим, что такое «веб-документ» и какова его основная «структура».
- 4. Проектирование и веб-разработка Веб-документ или HTML-документ - это текстовый файл, у которого есть имя и расширение, разделенные символом «точка». Примером названии HTML- документа может быть index.html. Расширение файлов, содержащих коды HTML, обычно .html. HTML-документ описывает веб-страницу и содержит HTML-элементы, а также простой текст. Веб-браузер не отображает HTML-элементы, но использует теги из веб-документа для их интерпретации и создания содержимого веб-страницы. Далее веб-страница отображается в понятной для человека форме, в окно браузера. Самый простой веб-документ состоит как минимум из 3-х элементов: элемент HTML – который является контейнером для всех остальных HTML-элементов. Он включает элементы HEAD и BODY. HEAD предназначен для определения заголовка веб-страницы. Содержимое этого элемента не отображается в окно браузера. Его цель - хранить информацию, необходимую веб-браузеру или разным службам из Интернета. BODY предназначен для хранения элементов которые определяют содержимое страницы, того содержимого, которое будет отображаться в окне веб-браузера и которое будет видеть пользователь. Пусть будет следующая последовательность HTML-кода, которую можно рассматривать как простой веб-документ: В последних версиях HTML, в базовой структуре документа HTML перед тегом <HTML> был добавлен оператор/ декларация <!DOCTYPE html>. Эта декларация требуется для правильного отображения веб-страницы в веб-браузерах. Она указывает версию HTML, в которой была определена веб-страница. Заголовок документа Контент/ тело документа
- 5. Проектирование и веб-разработка Запомните - <!DOCTYPE html> не является HTML-элементом! Этот оператор, как и все HTML-теги, не чувствителен к регистру, то есть может быть написан как прописными, так и строчными буквами! ...и вот результат интерпретирования браузером, написанного выше HTML-кода: Но где и как создаются эти веб-документы? Для создания HTML-документов используются редакторы кода, такие как VisualStudioCode, например. Чтобы создать веб-документ, выполним следующие действия: 1. Открывается редактор кода. 2. HTML-документ создается путем записи в нем HTML-кода. 3. Веб-документ сохраняется с указанием его имени и расширения. Также указывается место для сохранения файла - диск, папка и т. д. Я назову созданный файл index.html, и сохраню его в папке, на диске С (Це). 4. Файл закрывается или может быть оставлен открытым в редакторе, для последующих изменений. 5. Теперь открывается файл index.html в браузере, щелкнув на имя файла, правой кнопкой мыши. В появившемся контекстном меню выберем опцию «Открыть с помощью» (на английском Open with), а затем выберем в следующем появившемся меню требуемый нам веб-браузер. Я выбрал GoogleChrome. Теперь в окне веб-браузера можно увидеть результат интерпретации HTML-кода, записанного в сохраненном файле.
- 6. Проектирование и веб-разработка 6. После внесения любых других изменений в веб-документ, необходимо сохранить эти изменения, а затем обновить содержимое страницы в веб- браузере. О правильности создания веб документа Иногда, в процессе разработки веб-контента, можете увидеть такую формулировку: «W3C» рекомендует использовать... W3C - расшифровывается как World Wide Web Consortium и представляет собой международное сообщество, которое разрабатывает рекомендации и стандарты для разработчиков веб-продуктов по правильному использованию веб-технологий, при создании веб-продуктов. W3C также регулирует процесс разработки веб-сайтов, включая использование HTML, для правильного создания веб-страниц. Вы должны также знать, что в Интернете есть онлайн-валидаторы HTML-кодов - вы можете использовать их, чтобы проверить, насколько правильно вы написали HTML- код. Например, один из таких валидаторов который вы можете использовать это https://validator.w3.org/ . Подведем итоги тому, что мы узнали на этом уроке: ● HTML - это язык, основанный на тегах, используемых для определения веб- содержимого;
- 7. Проектирование и веб-разработка ● HTML-элемент состоит из открывающего тега, содержимого и закрывающего тега; ● Веб-документ - это файл с расширением .html, который состоит из специальных HTML-элементов, которые определяют заголовок и содержимое веб-страницы. Страницы создаются веб-браузером на основе созданного веб-документа; ● Рекомендуется всегда проверять правильность написания кода в .html файле. Для этого можно использовать онлайн-валидатор кода.