Знакомство с HTML Структура HTML-документа Разметка текста, ссылки, изображения План 1. Порядок работы в семестре 2.История HTML 3. Последовательность работы Notepad++ 4. Структура HTML документа 5. Теги и атрибуты 6. Валидация
HTML (от англ.HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора. HTML был изобретён ТимомБернерсом-Ли, физиком из исследовательского института ЦЕРН в Швейцарии. Он придумал идею интернет-гипертекстовой системы. Hypertext означает текст, содержащий ссылки на другие тексты, которые зрители могут получить немедленно. Он опубликовал первую версию HTML в 1991 году, состоящую из 18 тегов HTML.
Аббревиатура CSS расшифровывается как CascadingStyleSheets, что в переводе означает «каскадные таблицы стилей». Это язык разметки, используемый для визуального оформления веб-сайтов.
Правила CSS могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих расширение .css. Формат CSS — это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения 1991 – HTML 1994 – W3C (www.w3.org) • HTML 2.0 • Netscape Navigator 1995 – CSS 1997 – HTML 3.2 1997, декабрь– HTML 4.0 1999, декабрь– HTML 4.0.1 2002 – XHTML 1.0 2004 – WHATWG (whatwg.org) 2014, октябрь– HTML 5 Справка: WHATWG (Рабочая группа по вебу, гипертексту, приложениям и технологиям, англ. Web Hypertext Application Technology Working Group) — сообщество специалистов по HTML и API, необходимым для веб-приложений, занимающееся развитием этих технологий и разработкой стандартов для них. WHATWG руководят представители производителей браузеров, которые в реальности занимаются реализацией стандартов в своих продуктах. Чтобы избежать появления двух конкурирующих, взаимно противоречивых стандартов, W3C и WHATWG договорились о новом формате совместной работы. А именно, согласно подписанному обеими организациями в 2019 году меморандуму, ведущая роль в работе над стандартами HTML и DOM принадлежит WHATWG, а W3C приглашает своих членов участвовать в работе WHATWG и утверждает стандарты WHATWG как свои официальные рекомендации.
Текстовые редакторы
Текстовые редакторы Блокнот(штатный) Notepad++ (notepad-plus-plus.org) SublimeText (www.sublimetext.com) Adobe Dreamweaver
Порядок работы.
1. Открыть программу. Написать . 2.Сохранить .Файл назвать index.html 3.В главном меню нажать на ЗАПУСК и показать путь к сохраненному файлу. Для валидации открыть validator.w3.org показать путь к проверяемому файлу валидация — это проверка на соблюдение установленных норм, а в контексте, применяемом вебмастерами — корректности кода страниц: синтаксических ошибок, вложенности тэгов и т. п. Если все делать «правильно», код страницы не должен содержать неверные атрибуты, конструкции и ошибки. Валидация сайта позволяет выявить недостатки, которые следует исправить.
англ. tag — именованная метка, читается /tæg/; более правильное название — дескриптор[2][3][4][5]). В SGML (HTML, WML, AmigaGuide, языках семейства XML) — элемент языка разметки гипертекста. Текст, содержащийся между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге.
Весь текст, заключённый между начальным и конечным тегом, включая и сами эти теги, называется элементом. Сам же текст между тегами — содержанием элемента. Содержание элемента может включать в себя любой текст, в том числе и другие элементы.
Обычно используются парные теги — открывающий, или начальный, и закрывающий, или конечный. Возможно также применение одиночного тега. Например, тег отступа абзаца может оформлять абзац между тегами и , а может в одиночной форме до следующего первого попавшегося тега . Тег с пустым текстом: вставляет разрыв текста без сохранения отступов, можно также использовать специальную форму записи тега — . Набор и рекомендуемые интерпретации тегов определены организацией W3C.
Атрибуты в HTML — это свойства, которые дополняют исходный код с целью предоставления для браузера, на котором открываются страницы сайта, дополнительно информации об открываемом элементе и о том, каким образом его необходимо отображать. например
Описание
Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать . тег позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут charset (HTML тега ) задает кодировку символов для HTML документа. Атрибут charset может быть переопределен в определенном месте с помощью глобального атрибута lang для любого элемента. Стандарт HTML 5 не запрашивает конкретную кодировку, но дает рекомендацию использовать кодировку UTF-8. Не рекомендуется использовать кодировки ASCII, CESU-8, UTF-7, BOCU-1, SCSU и UTF-32 по различным причинам.
комментарии
Блочные элементы:
-используется как контейнер Элемент
является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега
всегда начинается с новой строки. После него также добавляется перенос строки. Синтаксис
...
Тег предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу. Синтаксис Текст
Определяет текстовый абзац. Тег является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента. Синтаксис Текст
Элемент определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег позволяет обойти эту особенность и отображать текст как требуется разработчику.
HTML элемент служит для тематического разделения абзацев. Рисует горизонтальную прямую
,
, … ,
HTML-элементы
–
представляют собой 6 уровней заголовков секций.
это наибольший заголовок и
- наименьший
Cтрочные элементы:
Гиперссылки (или просто "ссылки") определяются тегом (HTML Anchor Element). Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания. Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Синтаксис ТекстЗакрывающий тег Обязателен. , уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1. На размер шрифта влияет не только заданный атрибут size тега , но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили. Синтаксис ТекстВ HTML5 элемент используется для сносок и комментариев, написанных обычно мелким текстом. К ним могут относиться предостережения, информация о лицензии, авторских правах и др. Элемент используется для увеличения размера шрифта на одну условную единицу. Шрифт в HTML измеряют в условных единицах от 1 до 7, размером текста по умолчанию принято считать 3. Синтаксис Содержимое тега пишется между открывающим () и закрывающим тегом (). Тег больше не используется в HTML5. Вместо него используются соответствующие стили CSS.
Тег устанавливает перевод строки, то есть все написанное после него, будет перенесено на новую строку. В отличие от тега , определяющего абзац, перед строкой не добавляется пустой отступ. Тег предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием. Синтаксис Текст Описание Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Синтаксис ТекстТег выделяет важный фрагмент текста, на который стоит обратить внимание пользователям и поисковым машинам. Браузеры отображают текст внутри тега курсивным начертанием. Тег является элементом логической разметки (этот тег просматривается при поисковых запросах) в отличие от тега , который имеет такой же визуальный эффект (курсивное начертание), но при этом не несет смысловую нагрузку.
Тег используется для включения изображений в HTML документ. Само изображение не вставляется напрямую в документ, браузер загружает его из источника, указанного в теге . Для указания источника используется атрибут src. Чтобы сделать HTML изображения интерактивными, вы должны разместить тег внутри тега , который используется для вставки ссылок.. Синтаксис Тег одиночный, закрывающий тег не требуется. Описание Тег предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием. Синтаксис ТекстЗакрывающий тег Обязателен.
- строчный контейнер, нужен, чтобы оформить текст
Тег , также как и тег
является универсальным пустым контейнером, однако в отличие от блочного элемента
, строчный элемент\ определяет отдельные строки, символы или другие строчные элементы для их последующего оформления с помощью CSS стилей, либо для манипулирования ими при помощи скриптов. Тег может быть использован, когда необходимо: выделить какой-либо участок текста цветов, определить для него фон или фоновое изображение изменить шрифт отдельных слов или фраз применить скрипты к определенным участкам текста, например, подсветить синтаксис кода и т.д.
, - верхний/нижний индекс Описание Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера. Синтаксис Текст Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера. Синтаксис Текст
Блочные элементы могут содержать строчные элементы, а строчные элементы НЕ могут содержать блочные элементы.
Форматы графических файлов Формат JPEG(Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами. Формат GIF(Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты. Формат PNG(Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл. Формат APNG(Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность. SVG(Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества. Формат BMP(Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель. Формат ICO(Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.
Анатомия страницы
Темы модуля 1. Понимаем, как мы пишем: [синтаксис HTML] 2. Элементы форматирования текста 3. Понимаем, что мы пишем: семантика элементов 4. Валидация HTML-документа 5. Структурные элементы разметки
Скачать 3.93 Mb.