УРОК Nº 3
Просто и понятно про взаимодействие веб-страниц друг с другом
На предыдущем уроке были рассмотрены некоторые весьма важные элементы HTML, но мы имели дело только с одной вебстраницей. Принципиальное отличие ссылок и изображений в том, что они имеют дело с внешними ресурсами. Гиперссылки [тж. просто "ссылки"] указывают пользователю на другой HTML-документ, а изображения добавляют на страницу другой файл.
Для использования ссылок и картинок нам также необходимо познакомиться с еще одним компонентом синтаксиса HTML - атрибутами. Атрибуты откроют перед нами целый мир новых возможностей для наших веб-страниц.
На этом уроке мы создадим простой сайт, состоящий из нескольких HTML-документов и файлов изображений*. Хотя урок называется "Ссылки и картинки", на самом деле основная тема - структура файлов и папок. Начав работать с несколькими файлами, вы поймете, насколько организованность важна для веб-разработчика.
* - десь и далее понятия "изображение" и "картинка" - синонимы, означающие одно и то же.
Поскольку этот урок посвящен взаимодействию веб-страниц друг с другом, прежде чем приступить к созданию кода, мы создим несколько новых HTML-файлов. Мы будем работать с тремя отдельными веб-страницами, а также с несколькими файлами изображений различных форматов:
Для начала создайте новую папку links-and-images. Все наши файлы будут храниться в ней. Попробуйте сделать это в Atom, следуя инструкциям из главы Введение.
Затем добавьте в созданную папку новый файл links.html. Напишите внутри него следующий HTML-код. Он вам уже знаком по предыдущему уроку.
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
</body>
</html>
В той же папке создаем еще один файл с именем images.html:
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Images</h1>
</body>
</html>
Наша последняя страница поможет продемонстрировать нам относительные ссылки. Создайте в папке links-and-images новую папку misc. Добавьте в нее новый файл - extras.html:
<!DOCTYPE html>
<html>
<head>
<title>Extras</title>
</head>
<body>
<h1>Extras</h1>
</body>
</html>
Кстати можно создать новую папку прямо в Atom, щелкнув правой кнопкой мыши на панели браузера файлов и выбрав в контекстном меню пункт New Folder. Жизнь прекрасна, когда не нужно выходить из текстового редактора.
Мы будем вставлять изображения в наш файл images.html, поэтому обязательно скачайте эти примеры с картинками моти*. Распакуйте их в папку links-and-images, сохранив родительскую папку images из скачанного ZIP-файла. Теперь ваш проект должен выглядеть так:
* - "моти" или "мочи" (яп. 餅) - японский десерт в виде колобков или брусков из рисовой муки.
Ссылки создаются с помощью элемента <a>, который сокращенно означает "якорь" [anchor]. Этот элемент работает так же, как и все элементы из предыдущей главы: когда вы оборачиваете фрагмент текста тегами <a>, это изменяет смысл его содержимого. Рассмотрим это на примере добавления следующего абзаца в элемент <body> файла links.html:
<p>This example is about links and <a>images</a>.</p>
Если вы загрузите эту страницу в браузере, то заметите, что элемент <a> совсем не похож на ссылку. Увы, к сожалению, элемент <a> сам по себе ничего особенного не умеет.
Подобно тому, как элемент придает смысл содержимому, которое он содержит, HTML-атрибут придает смысл элементу, к которому он присоединен.
Разные элементы могут использовать различные атрибуты, и за подробностями о том, какие элементы принимают те или иные атрибуты, можно обратиться к MDN. В данный момент нас интересует атрибут href, поскольку он определяет, куда переходит пользователь при нажатии на элемент <a>. Обновите свою ссылку, как показано ниже:
<p>This example is about links and <a href='images.html'>images</a>.</p>
Обратите внимание, как атрибуты располагаются внутри открывающего тега. Сначала идет имя атрибута, затем знак равенства, затем "значение" атрибута в одинарных или двойных кавычках. Такой синтаксис отличает атрибуты от содержимого (которое находится между тегами).
Дополнительная информация, предоставляемая атрибутом href, сообщает браузеру, что данный элемент <a> является ссылкой, и он должен отобразить содержимое ссылки в виде синего текста, используемого по умолчанию:
Теперь, когда мы работаем со ссылками, нам необходимо понять, как устроен сайт. В нашем случае сайт - это просто набор HTML-файлов, разложенных по папкам. Чтобы ссылаться на эти файлы изнутри другого файла, в Интернете используются "единые локаторы ресурсов" (URL). В зависимости от того, на что вы ссылаетесь, URL могут принимать различные формы. Ниже выделены три типа URL, с которыми мы будем иметь дело:
Абсолютные, относительные и корневые ссылки зависят от значения атрибута href. Далее вы узнаете, как и когда использовать каждый из них. Но сначала давайте добавим в файл links.html следующее:
<p>This example is about links! There are three kinds of links:</p>
<ul>
<!-- Сюда добавляем элементы <li> -->
</ul>
"Абсолютные" ссылки [absolute links] - это наиболее подробный способ обращения к веб-ресурсу. Они начинаются со "схемы" (обычно http:// или https://), за которой следует доменное имя сайта, а затем путь к целевой веб-странице.
Попробуем, например, создать ссылку на справочник HTML-элементов Mozilla Developer Network:
<li>Absolute links, like to
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML'> Mozilla
Developer Network, which is a very good resource for web
developers.
</li>
Можно использовать абсолютные ссылки для ссылок на страницы собственного сайта, но жесткое кодирование своего доменного имени может привести к возникновению неприятных ситуаций. Поэтому абсолютные ссылки рекомендуется использовать только для перенаправления пользователей на другой сайт.
"Относительные" ссылки [relative links] указывают на другой файл на вашем сайте с перспективы того файла, который вы редактируете. При этом подразумевается, что схема и доменное имя совпадают с текущей страницей. Поэтому единственное, что необходимо указать - это путь.
Вот как можно сослаться на наш файл extras.html из файла links.html:
<li>Relative links, like to our <a href='misc/extras.html'> extras
page</a>.</li>
В данном случае атрибут href представляет собой путь к файлу extras.html из файла links.html*. Поскольку extras.html находится в другой папке, в URL необходимо включить папку misc.
* - обратите внимание, что путь пролегает из одного файла в другой. Причем другой файл extras.html лежит в другой папке, а именно в папке misc.
Каждая папка и файл разделяются слешем (/). Таким образом, если бы мы пытались получить файл, находящийся в двух вложенных друг в дружку папках, потребовался бы URL вот такого вида:
misc/other-folder/extras.html
Как ссылаться на файлы в той же самой папке или во вложенной папке мы разобрались. А вот как ссылаться на файл, помещенный в папку уровнем выше? Давайте в нашем файле extras.html создадим относительные ссылки на links.html и images.html. Для этого дообавим немного кода в файл extras.html:
<p>This page is about miscellaneous HTML things, but you may
also be interested in <a href='links.html'>links</a> or
<a href='images.html'>images</a>.</p>
Однако при щелчке на любую из этих ссылок браузере будет "ругаться" - дескать такая страница не существует. Взглянув на адресную строку, мы обнаружим, что браузер пытается загрузить misc/links.html и misc/images.html. Но ведь он ищет эти файлы не в той папке! Все это объясняется тем, что наши ссылки являются относительными по отношению к расположению файла extras.html, который находится в папке misc.
Чтобы исправить эту ошибку, нам понадобится вот такой синтаксис ".." [две последовательные точки без кавычек]. Именно эти две последовательные точки вставленный в путь к файлу укажут на родительский каталог:
<p>This page is about miscellaneous HTML things, but you may
also be interested in <a href='links.html'>links</a> or
<a href='images.html'>images</a>.</p>
Это все равно, что сказать: "Файл extras.html находится в папке misc. Поднимись в папку и найди там links.html и images.html".
Для перехода вверх по каталогам используйте соответствующее число точек. В нашем случае точек будет две:
../../elsewhere.html
Относительные ссылки удобны тем, что позволяют перемещаться по всему каталогу без необходимости обновлять все href в элементах <a>. Однако возможна и путаница, если все ссылки начинаются с кучи точек. Лучше всего относительные ссылки подходят подходят для привязки к файлам, находящимся в одной папке или в отдельном разделе сайта.
Например, все картинки в нашем учебнике загружаются через относительные ссылки (про картинки поговорим чуть ниже). Благодаря относительным ссылкам мы можем переименовать название любого урока без необходимости обновлять все пути к картинкам.
"Корневые" ссылки [root-relative links] аналогичны вышеупомянутым относительным ссылкам. Но вместо того, чтобы относиться к текущей странице, они относятся к "корню" всего сайта. Например, если ваш сайт: our-site.com, то все URL-адреса, относящиеся к корню, будут относиться к our-site.com.
К сожалению, в нашей дискуссии про корневые ссылки есть одна оговорка: в данном учебнике используются локальные HTML-файлы, а не сайт, размещенный на веб-сервере. Это означает, что мы не сможем экспериментировать с корневыми ссылками. Но если бы у нас был настоящий сервер, то ссылка на нашу домашнюю страницу выглядела бы так:
<!-- Это не будет работать для наших локальных HTML-файлов -->
<li>Root-relative links, like to the <a href='/'>home page</a>
of our website,
but those aren't useful to us right now.</li>
Единственное отличие корневой ссылки от относительной заключается в том, что корневая начинается с прямого слеша*. Cлеш представляет корень нашего сайта. После слеша можно добавлять в указанный путь дополнительные папки и файлы, как и в случае с относительными ссылками. Следующий путь будет работать корректно независимо от того, где находится текущая страница (даже в misc/extras.html):
/images.html
* - слеш (forward slash или просто slash) - косая прямая, выглядит как знак дроби "/".
Корневые ссылки - это один из наиболее полезных видов ссылок. Они достаточно явны, чтобы избежать потенциальной путаницы с относительными ссылками, но не настолько явны, как абсолютные ссылки. Вы будете часто видеть их на протяжении всей своей карьеры веб-разработчика, особенно на больших сайтах, где трудно уследить за относительными ссылками.
Итак, атрибуты изменяют значение HTML-элементов. Но иногда требуется изменить не один, а несколько аспектов элемента. Например, элементы <a> также допускают атрибут target, определяющий место отображения страницы, после того, как пользователь щелкнул на ссылку. По умолчанию большинство браузеров заменяют текущую страницу на новую. Однако мы можем использовать атрибут target. С помощью этого аттрибута мы даем команду браузеру открыть ссылку в новом окне/вкладке.
Попробуйте изменить нашу абсолютную ссылку в файле links.html как указано ниже. Обратите внимание, что второй атрибут выглядит так же, как и первый, но они отделены друг от друга пробелом (или новой строкой):
<li>Absolute links, like to
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML'
target='_blank'>Mozilla Developer Network</a>, which is a very good
resource for web developers.</li>
Атрибут target имеет несколько предопределенных значений, имеющих для браузеров особый смысл. Самым распространенным значением является _blank, который говорит браузеру: "данную ссылку открой в новой вкладке (или в новом окне)*". Об остальных значениях можно прочитать на сайте MDN.
* - так все-таки в новой вкладке или в новом окне? Англоязычная страница MDN поясняет, что пользователь может изменить настройки своего браузера, где открывать ссылок с _target: в новой вкладке либо в новом окне. "_blank: usually a new tab, but users can configure browsers to open a new window instead."
Вы заметили, ни один из наших файлов и папок не содержит пробелов в своем названии? Это не случайно. Пробелы в URL требуют особого обращения, поэтому ни в коем случае не допускайте пробелов. Для лучшего понимания попробуйте создать в нашем проекте links-and-images новый файл под названием "spaces are bad.html". Добавьте в него какой-либо небольшой текст, а затем откройте его в браузере Chrome или Safari (Firefox схитрит и сохранит пробелы).
links-and-images/spaces%20are%20bad.html
В адресной строке вы увидите, что все наши пробелы были заменены на "%20", как показано выше. Пробелы в URL не допускаются, поэтому для их обозначения используется специальная кодировка. Вместо пробела всегда следует использовать дефис, как это сделано во всем этом учебнике. Для единообразия также рекомендуется всегда использовать строчные символы вместо заглавных.
Обратите внимание, что существует прямая связь между именами файлов и папок и URL-адресом веб-страницы, которую они представляют. Названия наших папок и файлов определяют URL-адреса наших веб-страниц. Они видны пользователю, а значит, к наименованию файлов нужно приложить не меньше усилий, чем к созданию содержащегося в них содержимого.
Эти стандарты наименования относятся ко всем файлам сайта, а не только к HTML-файлам. В CSS-файлах, JavaScript-файлах и картинках также следует избегать пробелов и заглавных букв.
В отличие от всех элементов HTML, с которыми мы до сих пор сталкивались, содержимое изображения находится вне веб-страницы, на которой отображается изображение. К счастью, у нас уже есть возможность ссылаться на внешние ресурсы из HTML-документа: с помощью абсолютных, относительных и корневых ссылок.
Картинки добавляются на веб-страницы с помощью тега <img/> и его атрибута src, указывающего на файл отображаемой картинки. Заметьте, что это пустой элемент, как <br/> и <hr/> из предыдущего урока. (Не стоит пока добавлять его в наш проект. Конкретные примеры мы рассмотрим далее).
<img src='some-photo.jpg'/>
Retina-дисплеи и мобильные устройства делают работу с изображениями несколько сложнее, чем старый добрый <img/>. Мы оставим эти сложности для главы Responsive Images. Также не забудьте ознакомиться с элементами <figure> и <figcaption> на уроке Семантика HTML.
А мы пока что сфокусируемся на форматах изображений, используемых в сети.
Существует четыре основных формата изображений, используемых в сети. Все они предназначены для выполнения различных задач. Понимание их предназначения позволяет значительно улучшить качество веб-страниц.
В следующих нескольких секциях мы рассмотрим идеальные варианты использования каждого из этих форматов. Прежде чем двигаться дальше, убедитесь, что ZIP-файл с картинками моти уже скачан, распакован и добавлен в проект links-and-images.
Изображения в формате JPG предназначены для работы с большими цветовыми палитрами без чрезмерного увеличения размера файла. Поэтому они отлично подходят для фотографий и картинок с множеством оттенков. Но JPG не позволяют создавать прозрачные фон, в чем можно убедиться, присмотревшись к картинке ниже. Видите каемку на изображении?
Добавьте mochi.jpg на нашу страницу images.html с помощью следующего кода (он также содержит немного навигации по другим нашим страницам):
<p>This page covers common image formats, but you may also be looking for <a
href='links.html'>links</a> and <a href='misc/extras.html'>useful
extras</a>.</p>
<h2>JPGs</h2>
<p>JPG images are good for photos.</p>
<img src='images/mochi.jpg'/>
GIF-файлы - это оптимальный вариант для простой анимации, но их недостатком является то, что они несколько ограничены в плане цветовой палитры. Поэтому никогда не используйте "гифки" для фотографий. Прозрачные пиксели - это бинарная опция для GIF, т.е. вы не получите полупрозрачных пикселей. Это может затруднить получение высокого уровня детализации на прозрачном фоне. По этой причине лучше использовать PNG-картинки, если вам не требуется анимация.
Добавить этого малыша в наш файл images.html поможет следующий код:
<h2>GIFs</h2>
<p>GIFs are good for animations.</p>
<img src='images/mochi.gif'/>
PNG-файлы отлично подходят для всего, что не является фотографией или анимацией. Для фотографий PNG-файл такого же качества (как воспринимает человеческий глаз), обычно "весит" больше, чем эквивалентный JPG-файл. Однако PNG прекрасно справляются с непрозрачностью и не имеют ограничений по цветовой палитре. Поэтому они отлично подходят для иконок, технических диаграмм, логотипов и т.д.
Давайте добавим и эту PNG-картинку в наш проект:
<h2>PNGs</h2>
<p>GIFs are good for diagrams and icons.</p>
<img src='images/mochi.png'/>
В отличие от описанных выше форматов, основанных на пикселях, SVG - это векторный графический формат. Он может увеличиваться или уменьшаться до любых размеров без потери качества. Это свойство делает SVG-изображения прекрасным инструментом для адаптивного дизайна. SVG подходят практически для всех тех же целей, что и PNG. Используйте SVG при любой возможности.
Обе картинки на скриншоте выше имели первоначальный размер 100×100 пикселей и одинаковую резкость. Затем масштаб увеличили до 300×300 пикселей. Почувствуйте разницу. Четкие, чистые линии на SVG (слева), в то время как PNG (справа) заметно пикселизировано.
Несмотря на то, что SVG является векторным форматом, его можно использовать точно так же, как и его растровый аналог. Добавьте файл mochi.svg на нашу страницу images.html:
<h2>SVGss</h2>
<p>SVGs are <em>amazing</em>. Use them wherever you can.</p>
<img src='images/mochi.svg'/>
Однако у SVG есть одна проблемка: для их корректного отображения в разных браузерах, нужно преобразовать все текстовые поля в контуры. Например с помощью Adobe Illustrator или Sketch). Если ваши картинки содержат много текста (как, например, причудливые скриншоты в этом учебнике), это может сильно повлиять на размер файла. По этой причине мы используем PNG вместо SVG. Но в любом случае SVG - это супер!
По умолчанию элемент <img/> использует унаследованные размеры своего файла изображения. Наши JPG, GIF и PNG на самом деле имеют размер 150×150 пикселей, в то время как размер нашего SVG всего 75×75 пикселей.
Для корректного отображения пиксельные форматов на дисплеях retina [например на дивайсах от Apple] размеры изображений должны быть в два раза больше. Мы обсудим это в разделе Адаптивные картинки. А сейчас атрибут width элемента <img/> поможет нам уменьшить наши пиксельные картинки до нужного размера 75×75. В файле images.html обновите все наши пиксельные изображения, как показано ниже:
<!-- в раздел JPG -->
<img src='images/mochi.jpg' width='75'/>
<!-- в раздел GIF -->
<img src='images/mochi.gif' width='75'/>
<!-- в раздел PNG -->
<img src='images/mochi.png' width='75'/>
Атрибут width ["ширина"] задает четкий размер изображения. Также существует атрибут height ["высота"]. Задание только одного из них приведет к пропорциональному масштабированию изображения, в то время как определение обоих приведет к растяжению изображения. Значения размеров указываются в пикселях. Никогда не добавляйте указание каких-либо единиц измерения (например, width='75px' будет неверным).
Атрибуты width и height полезны, но все же в больштнстве случаев лучше задавать размеры изображения с помощью CSS, чтобы можно было легко изменять их с помощью медиавыражений [media queries]. Мы обсудим это более подробно, когда дойдем до адаптивного дизайна.
Добавление атрибутов alt к элементам <img/> является лучшей практикой. Эти атрибуты определяют "текстовую альтернативу" отображаемому изображению. Это влияет как на поисковые системы, так и на пользователей невизуальных браузеров, использующих только текст (например, для людей с нарушениями зрения, использующих программы для чтения с экрана).
Обновим все наши картинки, включив в них описательные атрибуты alt:
<!-- в раздел JPG -->
<img src='images/mochi.jpg' width='75' alt='A mochi ball in a bubble'/>
<!-- в раздел GIF -->
<img src='images/mochi.gif' width='75' alt='A dancing mochi ball'/>
<!-- в раздел PNG -->
<img src='images/mochi.png' width='75' alt='A mochi ball'/>
<!-- в раздел SVG -->
<img src='images/mochi.png' alt='A mochi ball with Bézier handles'/>
Дополнительные примеры использования атрибута alt приведены в безумно подробной официальной спецификации.
Мы надеемся, что вы достаточно хорошо освоили синтаксис атрибутов HTML. Теперь можно добавить пару завершающих штрихов к HTML-коду нашего проекта. Каждая создаваемая вами веб-страница должна определять язык, на котором она написана, и набор символов.
Язык веб-страницы по умолчанию определяется атрибутом lang в элементе верхнего уровня <html>. Наш документ написан на английском языке*, поэтому в качестве значения атрибута мы будем использовать код страны en. Сделайте это для всех созданных нами страниц:
<html lang='en'>
* - для вебстраниц с html-файлами данного перевода я, естественно, использовал указание на язык текста 'ru', то есть Russian (<html lang='ru'>).
Если интересно узнать какому языку соответствует какой языковой код, загляните на эту страницу в поле Subtag.
"Кодировки символов" [или просто "кодировки"] - это что-то вроде цифрового алфавита для вашего браузера. Он отличается от языка вашего документа тем, что влияет только на отображение самих букв, а не на язык контента. Попробуйте скопировать и вставить несколько слов с необычными символами в наш misc/extras.html. Посмотрим, что получится.
<h2>Кодировки</h2>
<p>UTF-8 можно использовать для записи счета в турецком языке:</p>
<ol>
<li>bir</li>
<li>iki</li>
<li>üç</li>
<li>dört</li>
<li>beş</li>
</ol>
Просматривая эту запись в браузере, Вы увидите какие-то кракозябры вместо международных символов ü, ç, ö и ş:
Это происходит потому, что стандартный набор символов, используемый в большинстве браузеров, не учитывает эти "специальные" символы. Чтобы исправить это, укажите кодировку UTF-8, добавив элемент <meta> с атрибутом charset в <head> нашего файла misc/extras.html:
<meta charset='UTF-8'/>
Теперь все "специальные символы" должны отображаться корректно. В наши дни UTF-8 является чем-то вроде универсального алфавита. Каждая создаваемая вами веб-страница должна содержать эту строку в <head>.
Эта секция не имеет никакого отношения к ссылкам и картинкам. И все же, прежде чем перейти к CSS, необходимо упомянуть еще одну вещь. Речь идет о "сущностях" [HTML entities]. HTML сущность - это специальный символ, который не может быть представлен в виде обычного текста в HTML-документе. Обычно это означает либо то, что этот символ зарезервирован в HTML, либо то, что отсутствует такая клавиша на вашей клавиатуре.
Символы <, > и & называются "зарезервированные (специальные) символы", поскольку их нельзя вставлять в HTML-документ без кодирования. Это происходит потому, что они что-либо означают в синтаксисе HTML: "<" начинает новый тег, ">" заканчивает тег, а знак амперсанта "&" задает в HTML какую-либо сущность.
В файл misc/extras.html добавьте следующее:
<h2>HTML Entities</h2>
<p>There are three reserved characters in HTML: < > and &. You
should always use HTML entities for these three characters.</p>
Сущности всегда начинаются с амперса́нда (&) и заканчиваются точкой с запятой (;). Между ними вы помещаете специальный код, который ваш браузер будет интерпретировать как символ. В данном случае он интерпретирует lt, gt и amp как символы "меньше", "больше" и "амперсанд", соответственно.
Существует бесчисленное множество сущностей HTML. Если интересно, большинство из них найдете на этом сайте.
Изогнутые кавычки* ни в коем случае не являются необходимыми, но если Вы заботитесь о типографике, то они будут одними из наиболее часто используемых вами элементов HTML. Существует четыре различных вида изогнутых кавычек (открывающие и закрывающие одиночные и двойные кавычки):
* - "Изогнутые кавычки" (в оригинале сurly quotes) википедия называет "английские двойные" и "английские одиночные". Используемые компьютером "прямые" кавычки соответствуют ивритским кавычкам (мерхао́т кфуло́т). См. https://ru.wikipedia.org/wiki/Кавычки
Изогнутые кавычки можно использовать их вместо прямых кавычек ' и ". Например, вот так:
<p>If you’re into “web typography,” you’ll also find
yourself using curly quotes quite a bit.</p>
В отличие от прямых кавычек, эти изогнутые кавычки должны обхватывать текст.
В былые времена Интернета в HTML-файлах не разрешалось вставлять специальные символы, что делало сущности гораздо более полезными. Но поскольку сейчас мы используем набор символов UTF-8, мы должны иметь возможность вставлять любые символы непосредственно в HTML-документ. Это делает сущности в основном полезными в качестве зарезервированных символов или для удобства при создании стандартного HTML.
По сути, вебсайт - это просто набор связанных между собой HTML, картинок и CSS-файлов. Темой "CSS" мы займемся уже на следующем уроке. Попробуйте начать думать о сайте как об удобной навигации пользователей по папкам и файлам, которые мы создаем в процессе веб-разработки. С такой точки зрения должно быть понятно, что поддержание хорошо организованной файловой системы является важнейшим аспектом создания вебсайта.
Мы также узнали о важных атрибутах lang и charset, которые дают базовый шаблон. Используйте его в начале каждой создаваемой вами веб-страницы:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
</head>
<body>
<h1>Некая вебстраница</h1>
<!-- Здесь помещается все остальное содержимое -->
</body>
</html>
Все таки еще не хватает одной очень серьезной составляющей: CSS. На следующем уроке мы изучим атрибуты HTML, позволяющие подключать стили CSS к всему нашему сайту. Возможность работать с несколькими файлами и связывать их друг с другом "умным" способом станет еще более значимой, чем это было на сегодняшнем уроке.