Обучение html5 и css3 с нуля. Видеоотзыв о курсе от ученика. А что же нового в CSS3

От автора: с тех пор, как в сети стали появляться статьи, демонстрирующие новые свойства HTML5 и CSS3, у меня родилась идея создания верстки сайта без изображений. Взяв на вооружение улучшения HTML5 и CSS3 (по сравнению с предыдущими почтенными спецификациями), не слишком сложно сверстать достойно выглядящий веб сайт, которому не придется полагаться на изображения в качестве элементов разметки.

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как "Untitled Section" (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как "Navigation" (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Использование nav для создания основной навигации сайта – это нечто вроде данности, но обстоятельства таковы, что на вашем сайте будет больше областей, содержащих ссылки; вопрос в том, которые из них вам следует обернуть тэгом nav. Вот некоторые примеры использования, которые, я считаю, могут подойти:

Связанные посты.

Согласно спецификации, это могут быть подходящие или неподходящие случаи употребления элемента nav. Спецификация не очень четкая, а приводимые примеры не слишком помогают. Так что пока спецификация не окончательная и более конкретная, для выбора правильного метода использования элемента nav можно полагаться только на сообщество разработчиков.

Элемент Article

Следующий элемент, который я хочу вам представить – article. Основная область нашей демо-страницы содержит три цитаты из постов, и каждую из них мы обернем в тэг article.

XHTML

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации ) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

Как я уже говорил, нижний колонтитул footer можно использовать на одной странице столько раз, сколько нужно, и он представляет собой сегмент нижнего колонтитула страницы документа или часть документа.

Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

У нас на демо-странице есть четыре элемента footer: по одному на каждый из трех элементов article и общий нижний колонтитул для всей страницы. Нижний колонтитул в элементе article содержит имя автора поста, тэги и кнопку ссылки на полную версию поста в блоге.

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

Область общего нижнего колонтитула нашей демо-страницы содержит три элемента section. В них мы перечисляем самые популярные посты блога, последние комментарии и короткую биографию своей выдуманной компании.

Элемент section представляет общую область документа или приложения. Секция в данном случае – это тематическое группирование содержимого, обычно при помощи заголовка.

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

Элемент aside представляет секцию страницы, состоящую их контента, поверхностно связанного с содержимым, расположенным вокруг aside, и который может восприниматься отдельно от этого содержимого. Такие секции часто представлены в книгопечатании как боковые колонки.

Как видно из спецификации, один из примеров идеального использования элемента aside – это боковая колонка. Ниже на графике можно увидеть расположение иерархии элемента aside нашей демо-страницы.

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты.

Спасибо за прочтение и не пропустите вторую часть статьи, где мы обсудим свойства CSS3, используемые для декорирования разметки.

Как обычно, я с нетерпением жду любых вопросов и комментариев. Пожалуйста, не бойтесь высказаться и начать обсуждение использования новых элементов, потому что это – лучший способ прояснить их пользу.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …

Как хорошо, что придумали компьютеры. Вы можете создать себе нужную атмосферу, чтобы в спокойной обстановке начать творить. Собственно этим мы сейчас и займёмся.

Для выполнения заданий вам потребуются (будет повод обновиться):

Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5 . Пройдите по ссылке http://html5test.com , там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?

В этом тьюториале, мы:

• создадим с вами страницу по стандарту HTML5
• воспользуемся новыми семантическими элементами,
• немного порисуем,
• проверим как выводится видео на нашей странице,
• проверим работу новых элементов формы.

Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css . В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.

Готовим каркас страницы

Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.

Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег . Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … public … transitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.

Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.

Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.

Всё что мы здесь описали есть в листинге №1:

Листинг 1. Базовая структура документа HTML5

Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу больше ничего не нужно кроме lang . Для метатега достаточно написать charset . Кроме того, для тега link не нужно указывать type .

Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.

Делаем разметку контента

Разместим на каркасе семантические блоки

Теперь давайте поточнее определимся с тем, что у нас будет размещаться на странице. Будем исходить из следующего: нам нужно по максимуму использовать новые семантические элементы HTML5.

Наша страница будет служить для показа полного текста новости о компании, которой посвящён сайт. На неё будет происходить переход либо с главной страницы, где размещаются последние новости, либо из архива новостей.

Разместим блоки в контейнере . Будем придерживаться следующей последовательности этих элементов:

– header
– – hgroup
– nav
– article
– – header
– – “content”
– – section
– – – header
– – – “content”
– footer

В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer , в котором мы разместим дополнительную информацию о контенте наших страниц.

Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами … .

Листинг 2. Размещение семантических блоков HTML5

Теперь страницу можно рассмотреть в браузере. Однако, она пока выглядит невзрачно. Но мы ведь не зря уже позаботились и подключили файл со стилями.

Покрасим фасад

У нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей styles.css Первое, что мы сделаем — это определимся со шрифтом для всего документа. Если кто не знает, то скажем, проводились исследования какой шрифт лучше воспринимается с экрана монитора, выяснилось — тот, у которого нет засечек. Такие шрифты называют sans-serif — без засечек. К ним относятся, например: Arial, Helvetica, Verdana . Идём дальше, будем по порядку определять правила для оформления всех элементов нашей страницы. Для того, чтобы не забегать сильно вперёд, воспользуемся пока несколькими фишками — тенями и закруглёнными краями у блоков.

Большинство из того, что мы здесь накодим было доступно ещё в ранних стандартах CSS. Новенькие фичи мы перечислим.

box-shadow
Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. Первые четыре числа это линейные параметры тени, соответственно указываются либо в пикселах px , либо других линейных единицах (em , pt ), либо без них, в случае нулевого размера. Первое число означает — горизонтальное отбрасывание тени вправо, хотите сделать влево — ставьте отрицательное число. Следующий — вертикальное вниз, чтобы сделать вверх — ставьте отрицательное число. Далее — величина размытия тени, затем — разброс тени. После линейных размеров указывается цвет тени, и если вы хотите внутреннюю тень то ключевое слово inset . Если вам мало одной тени, то реализуйте свои теневые фантазии через запятую.

text-shadow
Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. И вам также никто не мешает фантазировать на счёт количества теней, через запятую.

border-radius (-moz-border-radius, -webkit-border-radius)
Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Указанные в скобке названия параметров, используются в браузерах семейства Mozilla и на движке Webkit (Chrome, Safari). Так что дублируйте в правиле настройки, указанные для border-radius ещё и в эту парочку параметров.

Придуманное и закодированное нами оформление будет выглядеть так, как показано в Листинге №3. Этот код, вам нужно поместить в файл styles.css .

Листинг 3. CSS для новых семантических элементов HTML5

* { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 480px; margin: 0px auto; } header.mainH { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400; padding: 5px; text-align: center; } header h1 { font-size: 36px; margin: 0px; } header h2 { font-size: 18px; margin: 0px; color: #888; font-style: italic; } nav ul { list-style: none; padding: 0px; display: block; clear: right; background-color: #666; padding-left: 4px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } nav ul li { display: inline; padding: 0px 20px 5px 10px; height: 24px; border-right: 1px solid #ccc; } nav ul li a { color: #EFD3D3; text-decoration: none; font-size: 13px; font-weight: bold; } nav ul li a:hover { color: #fff; } article > header time { font-size: 14px; display: block; width: 26px; padding: 2px; text-align: center; background-color: #993333; color: #fff; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; float: left; margin-bottom: 10px; } article > header time span { font-size: 10px; font-weight: normal; text-transform: uppercase; } article > header h1 { font-size: 20px; float: left; margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888; } article > header h1 a { color: #993333; text-decoration: none; } article > section header h1 { font-size: 16px; } article p { clear: both; } footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; } article > section { -moz-border-radius: 6px 0 0 0; -webkit-border-radius:6px 0 0 0; border-radius: 6px 0 0 0; box-shadow: 3px 3px 3px 0 #FFAA88 inset; padding: 5px; color: #665588; margin-top: 40px; }

Если вы откроете свою индексную страничку сейчас, то она уже будет выглядеть, не так уныло, посмотрите на Рисунок 1. По сравнению с предыдущим видом, она будет просто СУПЕР

Рисунок 1. Вид стилизованой страницы

Если страница выглядит по-другому, значит вы открыли её не в том браузере. Под “не в том” я подразумеваю браузер отличный от Mozilla4+, Chrome11.0+, Opera11.10+, они показывают страницу одинаково — проверено.

Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать > в селекторе? Тогда пишите свои вопросы в комментариях.

Веб программирование невозможно представить без языка разметки HTML. Этот язык способен рассказать браузеру что находиться на странице: какие есть элементы, текстовые поля, кнопки и прочие вещи. В этих видео уроках мы с вами изучим язык разметки HTML5.

Видео урок:

Внимательно изучив этот раздел, вы научитесь самостоятельно создавать сайты с нуля, без всяких конструкторов и CMS, а с помощью исключительно HTML 5 и CSS 3. В дальнейшем, когда уже будете делать проекты с использованием популярных CMS, применяя полученные знания, вы сможете вмешаться в исходный код сайта, переделав оформление и структуру под свои нужды.

Курс состоит из 25 уроков. Первая его часть научит понимать и писать код HTML, вторая познакомит с каскадными таблицами стилей (CSS). Именно с этих материалов и рекомендую начать изучать сайтостроение.

• 1 Как создать сайт в Блокноте

  Сделайте свою первую HTML-страницу, не прибегая ни к чему, кроме известного всем простейшего текстового редактора, встроенного в любую Windows - Блокнота. Но не просто сделайте, а поймите, как это работает.

• 2 Adobe Dreamweaver - программа для создания сайта
  

  Вы познакомитесь с одним из самых популярных и многофункциональных средств, призванных упростить рабочие будни верстальщикам и веб-дизайнерам - программой Adobe Dreamweaver.

• 3 Что такое HTML
  

  Основные вопросы, мучающие новичков. Что такое HTML? Зачем он нужен? Что позволяет делать? Что лучше - HTML4 или HTML5? Все ответы - в статье.

• 4 Теги
  

  Теги - основная единица языка HTML. Без них не обходится ни одна веб-страница. Статья познакомит вас с основными контейнерами HTML. Из неё вы узнаете, как правильно записываются теги, научитесь частично понимать HTML-код.

• 5 Атрибуты
  

  У тегов есть не только содержимое, но также атрибуты, которые, в свою очередь, наделены значениями. Обо всём этом и пойдёт речь в статье. Где искать атрибуты? Как правильно записывать? Какие атрибуты можно присвоить любому без исключения тегу? А ещё вы узнаете, как разрешить пользователю редактировать любой элемент страницы, как задать для каждого объекта уникальное контекстное меню и как скрыть содержимое элемента, чтобы оно не отображалось в браузере.

• 6 Форматирование текста в HTML
  

  Всё, что связано с оформлением текста: как сделать заголовки, назначить полужирный шрифт или курсив, уменьшить/увеличить размер текста или что-нибудь процитировать. В статье вас ждёт ещё много интересных секретов форматирования текста средствами HTML. А главное - всё это показано на наглядных примерах.

• 7 Создание списков
  

  Маркированные, нумерованные, вложенные - какие хотите. Также вы узнаете, как нумеровать список большими латинскими буквами или римскими цифрами, да ещё и в обратную сторону, как начинать нумерацию не с единицы и тому подобные вещи. А ещё вас ждёт знакомство с мало кому известным списком определений.

• 8 Создание ссылок
  

  Ссылки - чуть ли не основной элемент Интернета, без которого никакой связности страниц бы и не было. Научитесь создавать ссылки на примерах, узнайте, чем относительные пути отличаются от абсолютных, познакомьтесь с внутренними и графическими ссылками, научитесь ставить их на e-mail и Skype.

• 9 Вставка изображений
  

  Картинки украшают страницу, поэтому уметь добавлять их - навык очень полезный. А если превратить изображение в навигационную карту, то оно становится не только симпатичным, но и очень полезным элементом. Научитесь создавать такие объекты на наглядных примерах, которые есть в статье.

• 10 Вставка таблиц
  

  Внимательно изучив этот раздел, вы научитесь самостоятельно работать с таблиц. На основе таблиц когда-то создавались целые структуры сайтов, но об этом будет идти речь в следующем уроке.

• 11 Табличная вёрстка сайта
  

  Как вообще можно сверстать целый сайт? Способов есть много, один из них - делать его с помощью таблиц. О том, что представляет собой такой метод, вы и узнаете. Наглядные примеры, как всегда, присутствуют, и помогут без труда освоить табличный подход.

• 12 Фреймы
  

  Статья для тех, кто хочет научиться отображать в одном HTML документе совершенно другую страницу. Вы узнаете, что такое фреймы, как они создавались раньше и как создаются сейчас, а также познакомитесь с доступными им атрибутами.

13 Что такое CSS

Какие основные операторы и элементы присутствуют в документе каскадных таблиц стилей, что вообще такое этот CSS, зачем он нужен и чем отличается от HTML, а главное - как связать каскадную таблицу стилей с HTML-элементом.

• 14 CSS текст
  

  На примерах показано, как выровнять текст по горизонтали и вертикали, изменить отступ и междустрочный интервал, добавить подчёркивание или надчёркивание, увеличить расстояние между символами и сменить регистр.

• 15 CSS шрифты
  

  Прочтя статью, вы поймёте принципы группировки шрифтов в CSS, узнаете, какие из них поддерживает любой браузер, научитесь менять их размер и стиль, цвет и насыщенность. Разберётесь с аббревиатурами RGB и HSL, а также узнаете, зачем к ним иногда добавляют букву A.

• 16 CSS ссылки
  

  Читать стоит после того, как освоили ссылки в HTML, потому что эта статья научит их не создавать, а оформлять, причём задать внешний вид вы можете не только для разных ссылок, но и для одной и той же, находящейся в разных состояниях. Пусть если по ней ещё не переходили, она будет синей, если навели указатель - зелёной с подчёркнутым текстом, щёлкнули - жёлтой и полужирной, а перешли - курсивной и фиолетовой.

• 17 CSS таблицы
  

  Всё о правильном оформлении таблиц: ширина и высота, расположение заголовка, удаление двойных границ, определение расстояний, скрытие фона и многое другое, подкреплённое живыми примерами.

• 18 CSS списки
  

  А вы знали, что в качестве маркера списку можно задавать не только круг, но и окружность или даже квадрат? Да хоть произвольную картинку. А знали, что помимо стандартных нумераций можно установить, например, традиционную армянскую? А как превратить маркер из вынесенного в обтекаемый? Нет? Тогда загляните в статью, там ждёт не только теория, но и примеры.

• 19 CSS фон
  

  Всё о фоне. Цвет, на фоне которого пишется текст. Картинка, на фоне которой отображается вся страница: повторяющаяся по горизонтали, по вертикали, по всем направлениям одновременно, позиционированная, масштабируемая и т. д.

• 20

Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том

Из чего состоит структура HTML-документа

Тег сообщает о том, что начинается структура html-документа, — что заканчивается. Между тегами хранится в большей части информация для браузера и поисковых систем. В тегах содержится заголовок нашей страницы. Тег говорит о том, что далее идёт информация предназначенная для пользователя, же естесственно говорит о том, что информация для пользователя заканчивается.

Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:

— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.

Привет всем!
А это мой первый сайт.

Результат можно посмотреть .

• align — Определяет выравнивание линии. Может принимать значение left, center, right.
• color — Задаёт цвет линии.
• noshade — Рисует линию без трехмерных эффектов.
• size — Задаёт толщину линии.
• width — Задаёт ширину линии.

Код с использованием тега

Привет всем!

Визуальный пример находится .

Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:

Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:

Cуществуют и другие одиночные теги (, ,
, , , ,

Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.

Для наглядного примера взглянем на тег , который используется для выделения текста, он устанавливает жирное начертание шрифта. Теги и являются границами, которые определяют область выделения текста. Вот код, где в последней строке забыли закрыть тег :

Привет всем! А это мой первый сайт.
Привет всем! А это мой первый сайт.

Как видите, ничего сложного нет, теперь вы можете создать несколько страниц перелинкованных между собой.

Позволяет обойти эту особенность и отображать текст как требуется разработчику.

 — определяет текстовый абзац. Тег 
Является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
..
..

 — HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег 
 представляет собой наиболее важный заголовок первого уровня, а тег 
 служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги 
,…,
 относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align
, который определяет выравнивание заголовка, может принимать значения left
 — выравнивание заголовка по левому краю, center
 — выравнивание по центру, right
— выравнивание по правому краю, justify
— выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.


 — представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color
 — устанавливает цвет текста, face
 — определяет гарнитуру шрифта, size
 — задает размер шрифта в условных единицах.

 — помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера  курсивом.

 — указывает, что последовательность символов является аббревиатурой. С помощью атрибута title
 дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
По умолчанию, текст заключенный в контейнере  подчеркивается пунктирной линией.
Ниже приведу код, в котором я использовал все эти теги:

 




HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about: 
What is HTML?
HTML is the language for describing the structure of Web pages. HTML gives authors the means to:


 Publish online documents with headings, text, tables, lists, photos, etc.

 Retrieve online information via hypertext links, at the click of a button.

 Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. 

 Include spread-sheets, video clips, sound clips, and other applications directly in their documents. 


 With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
What is XHTML?
XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).
What is CSS?
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation. 
What is WebFonts?
WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").


Лекция подошла к концу, надеюсь приобретённые знания вам пригодятся! В следующей лекции я расскажу вам о том, что в себе хранит тег , научимся выполнять всевозможные манипуляции с изображениями, и познакомимся с таблицами.
При написании данной статьи описание некоторых тегов было взято отсюда