Основы HTML | Учимся работать с кодом сайта
Всем-всем привет!
Коли начали мы изучать SEO продвижение, значит нужно знать основы HTML и CSS, которые помогут сделать наши сайты лучше и привлекательнее для поисковых систем. Всю эту неделю я буду рассказать Вам о работе с кодом сайта и вот, что Вас ждет:
Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.
Погнали!
Основы HTML
HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.
Задача HTML — показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.
Язык разметки состоит из специальных тегов, которые помогают браузеру определить:
- Структуру документа;
- Место нахождения того или иного элемента;
- Предназначение элемента;
- Подключаемые сторонние файлы;
- И много-много другого.
Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.
Структура HTML
Любой HTML-документ имеет начальную структуру, которая должна соблюдаться в обязательно порядке. Выглядит она так:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Заголовок страницы</title> <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую"> <meta name="description" content="Описание контента страницы, 1-2 предложения."> </head> <body> Контент страницы </body> </html
Разберем каждый элемент подробнее:
<!DOCTYPE html>
Начало любого HTML-документа задается этим элементом. Так как язык разметки HTML постоянно развивается и имеет несколько версий, данный элемент помогает браузеру понять какая именно версия используется в документе и его тип;
<html> - открывающий тег; </html> - закрывающий тег
Данный тег является контейнером, в который входит все содержимое страницы. Необязателен к заполнению, но все же принято его использовать в каждом документе. Имеет закрывающий тег;
<head> - открывающий тег; </head> - закрывающий тег
В пределах тегов <head></head> указывается заголовок окна страницы (Title), мета теги Description и Keywords, а также другая техническая информация. К использованию допускаются такие теги, как:
<link>
Подключение внешних файлов, например, файл стилей style.css;
<meta>
Используется для хранения информации для браузера и поисковых систем;
<style>
Указывается для определения стилей элементов документа;
<script>
Применяется для описания скриптов, использующихся на странице, а также можно указать ссылку на внешний файл со скриптом, программой;
<title>
Задает заголовок окна страницы.
<body> - открывающий тег; </body> - закрывающий тег
Хранит основное содержание страницы, которое отображается в окне браузера. Вся основная работа происходит именно в пределах данного тега.
Вот мы и разобрались со стандартной структурой HTML-документа. Думаю, Вам все понятно. Теперь же поговорим о базовых тегах, знание которых поможет нам хоть немного разбираться в коде сайта.
Я сам обладаю исключительно базовыми знаниями, однако этого вполне хватает, чтобы с легкостью ориентироваться в коде, находить ошибки и исправлять их.
Базовые теги HTML
Всего существует больше сотни, а то и двух, тегов, знать их все попросту не нужно даже сайтостроителю, ведь большинство из них он все равно не будет использовать в практике. А таким людям, как я и Вы, и вовсе нужен только десяток HTML-тегов.
Для Вашего удобства оформлю все в таблице:
<div> </div> | Блочный элемент. Выделяет определенный фрагмент HTML-документа в блок. Содержимое блока можно с легкостью редактировать с помощью стилей. Атрбуты:
|
<a href="URL-документа"></a> <a name="Идентификатор якоря"></a> | Используется для проставления ссылок на тот или иной файл сайта, на сторонний ресурс. Атрибуты:
Якорь — это закладка, находящаяся внутри HTML — документа. |
<img src="Ссылка на картинку"> <img src="Ссылка на картинку" alt="Альтернативный текст"> | Используется для отображения в документе изображений формата GIF, JPEG, PNG. Атрибуты:
|
<ol> <li>1-й пункт</li> <li>2-й пункт</li> <li>3-й пункт</li> </ol> | Вывод нумерованного списка. Каждая новая строка списка (элемент) обязательно должна начинаться с тега <li>. |
<ul> <li>1-й пункт</li> <li>2-й пункт</li> <li>3-й пункт</li> </ul> | Вывод маркированного списка. Каждая новая строка списка должна начинаться с тега <li>. |
<p>Текстовый абзац</p> | Используется для определения текстового абзаца. Всегда начинается с новой строки в коде. Атрибут:
|
<h2></h2>,...,<h6></h6> | Заголовки документа. Всего существует шесть уровней заголовков, в соответствии с важностью элемента. Так, заголовок первого уровня (h2) является наиболее значимым, используется, как правило, для заголовка страницы. Последующие уровни идут по убыванию относительной важности. |
<p>Текстовый <span>абзац</span></p> | Применяется для выделения подстроки в строке, то есть, с помощью данного тега можно выделить какую-то часть текста. Возможно использование стилевого класса или идентификатора, чтобы задать элементу определенное стилевое оформление. |
<iframe src="http://site1.ru"></iframe> | Позволяет загрузить HTML-документ внешнего ресурса в Вашей странице. |
<strong><strong> <em></em> | С помощью данных тегов можно выделить какую-то фразу в тексте жирным и курсивом соответственно. |
В своей работе я использую только эти теги, да и то не все. Если Вы хотите более подробно ознакомиться с темой HTML-верстки, то рекомендую изучить такой сервис, как HTMLbook.ru. В одно время он мне очень помог.
Завтра мы с Вами разберем основы стилевого оформления CSS. Ну а сегодня переварите эту информацию.
До завтра!
Предыдущая статьяУрок 108. Как написать гарантийное письмо для Яндекс Директ? Следующая статья
Урок 110. Основы CSS | Учимся управлять внешним видом сайта
context-up.ru
Основы html
Язык HTML (от англ. HyperText Markup Language – «язык разметки гипертекста») служит для создания веб-страниц. Большинство сайтов созданы именно с помощью HTML.
Синтаксис HTML HTML-документы представляют собой файлы с текстом и дополнительными инструкциями языка HTML, называемыми тегами. Теги позволяют задавать
форматирование текста, а также размещать в документе мультимедийные файлы (изображения, звук, Flash-анимацию), гипертекстовые ссылки на другие документы, табличные данные, формы ввода данных. HTML-документы имеют расширение имени файла htm или html. Редактирование HTML кода производят в текстовом редакторе (например, в обычном блокноте), а просмотр – в браузере.
Структура тега:
<имя тега атрибут1 атрибут2=»значение2″ …>
Тег состоит из имени тега, за которым может следовать список атрибутов, помещаемых между открывающей и закрывающей угловыми скобками (< и >). Атрибуты позволяют управлять поведением тега. Они могут иметь конкретные значения, задаваемые после знака равенства. Значения атрибутов заключаются в одиночные или двойные кавычки («). Атрибуты отделяются друг от друга пробелом, порядок следования атрибутов значения не имеет. Имена тэгов и атрибутов нечувствительны к регистру.
Пример: <FONT color
=»red» face=»Arial«>Тег FONTпредназначен для управления внешним видом текста. В примере он задает начертание текста шрифтом Arial, красным цветом. Теги подразделяются на парные и непарные. Парные теги имеют закрывающий тег, непарные – не имеют. Закрывающий тег содержит косую черту перед именем и не имеет атрибутов. Между открывающим и закрывающим тегами помещается текст и другие теги. Атрибуты указываются только в открывающем теге.
Для выделения текста жирным используется тег <b>. Пример:
HTML-код: текст <b>жирный текст</b> текст
В браузере: текст жирный тексттекст
Примером непарного тега является тег <br>– перевод строки. Обычный перевод строки клавишей {Enter} браузер игнорирует (как и несколько поставленных подряд пробелов или знаков табуляции).
английском языке:
Стандартные цвета HTML
Название в HTML | Название на русском | Код в RGB |
blue | синий | #0000ff |
green | зеленый | #008000 |
navy | темно-синий | #000080 |
red | красный | #ff0000 |
white | белый | #ffffff |
olive | оливковый | #808000 |
silver | серебряный | #c0c0c0 |
yellow | желтый | #ffff00 |
fuchsia | фуксия | #ff00ff |
lime | ярко-зеленый | #00ff00 |
aqua | морская волна | #00ffff |
purple | пурпурный | #800080 |
teal | бирюзовый | #00808 |
grey | серый | #808080 |
maroon | темно-бордовый | #800000 |
black | черный | #000000 |
Основные теги, работа с текстом, списки
Теги структуры документа
Эти теги предназначены для определения структуры HTML документа и не влияют на его отображение в браузере. Тем не менее, правильно сформированный документ обязательно должен их содержать.
<html>…</html>– включает в себя все содержимое веб-страницы, в том числе теги <head> и <body>
<head>…</head>– содержит теги со служебной информацией о странице, например название в теге <title>.
<title>…</title>– задает название документа. Это название обычно отображается в заголовке окна браузера.
<body>…</body> – хранит содержимое документа.
Атрибуты:
bgcolor=»цвет» – назначает цвет фона документа text=»цвет» – указывает цвет обычного текста в документе.
Для включения изображения в качестве фона необходимо добавить в тэг <body>
атрибут background, задав в качестве его значения путь файла, содержащего требуемое изображение: <body background=”gif/back.gif”>.
простейший HTML-документ
<html>
<head>
<title>Заголовок</title>
</head>
<body>
Мой первый <i>HTML-документ!</i><br>
(это пример)
</body>
</html>
Теги для работы с текстом
HTML позволяет управлять отображением текста на странице.
<b>…</b>– выделение текста жирным
<i>…</i>– выделение текста курсивом
<u>…</u>– подчеркивание текста
<sub>…</sub>– форматировать текст как подстрочный индекс
<sup>…</sup>– форматировать текст как надстрочный индекс
<center>…</center>– выравнивание текста по центру
<font>…</font>– устанавливает размер, цвет и гарнитуру текста
Атрибуты:
color=»цвет» – задает цвет текста
face=»шрифт» – определяет гарнитуру текста; значением атрибута может быть список шрифтов, перечисленных через запятую – в этом случае выбирается первый доступный шрифт.
<p>…</p>– задает начало и конец параграфа
Атрибут:
align=»…» – определяет режим выравнивания текста
left – по левому краю (по умолчанию)
center – по центру
right – по правому краю
justify – по ширине
<hN>…</hN>– вложенный текст, является заголовком документа уровня N, N принимает значения от 1 до 6. Наибольшим заголовком является <h2>, наименьшим <h6>.
<br>– перенос строки
<hr>– выводит горизонтальную разделительную линию
Атрибуты:
align=»…» – определяет режим выравнивания линии
left – по левому краю
center – по центру (по умолчанию)
right – по правому краю
noshade – использовать сплошную линию вместо объемной
size=»N» – толщина линии в пикселах
width=»N» – ширина линии в пикселах или процентах по отношению к ширине экрана.
studfiles.net
Часть 1. Приступая к работе
Основы HTML5
Грейс Уолкер
Опубликовано 16.05.2012
Серия контента:
Этот контент является частью # из серии # статей: Основы HTML5
http://www.ibm.com/developerworks/ru/opensource/library/?series_title_by=html5+Основы
Следите за выходом новых статей этой серии.
Этот контент является частью серии:Основы HTML5
Следите за выходом новых статей этой серии.
HTML5 — это инструмент для упорядочивания Web-контента. Он предназначен для упрощения Web-проектирования и Web-разработки за счет языка разметки, обеспечивающего стандартизированный и интуитивно понятный пользовательский интерфейс. HTML5 предоставляет разработчику средства для секционирования и структуризации Web-страниц, а также позволяет создавать обособленные компоненты, которые не только обеспечивают логическую организацию Web-сайта, но и предоставляют ему возможности синдикации. Язык HTML5 реализует подход к проектированию Web-сайтов, основанный на отображении информации, поскольку он воплощает саму суть отображения информации — разделение и маркирование информации для упрощения ее использования и понимания. Именно в этом состоит огромная семантическая и эстетическая ценность HTML5. HTML5 предоставляет дизайнерам и разработчикам всех уровней возможности для предоставления в публичный доступ буквально любого контента – от простых текстов до мультимедийно насыщенных интерактивных материалов.
Часто используемые сокращения
- API: Application programming interface(Интерфейс прикладного программирования, API-интерфейс)
- CSS3: Cascading style sheet version 3 (Каскадная таблица стилей), версия 3
- GUI: Graphical user interface (Графический интерфейс пользователя)
- HTML: Hypertext Markup Language (Язык гипертекстовой разметки, язык HTML)
- HTML5: HTML, версия 5
- SQL: Structured Query Language (Язык структурированных запросов)
- UI: User interface (Интерфейс пользователя)
HTML5 предоставляет эффективные инструменты для управления данными, для рисования, для воспроизведения видео- и аудиоконтента. HTML5 облегчает разработку кросс-браузерных Web-приложений, а также приложений для мобильных устройств. HTML5 относится к числу технологий, которые стимулируют развитие мобильных сервисов на основе облачных вычислений. Кроме того, HTML5 способствует повышению гибкости – благодаря возможности создания впечатляющих и интерактивных Web-сайтов. И, наконец, HTML5 предлагает новые теги и усовершенствования, в числе которых следующие: элегантная структура, органы управления формами, API-интерфейсы, мультимедийные функции, поддержка баз данных, существенно увеличенная скорость обработки.
Новые теги HTML5 обладают «говорящими» названиями, которые раскрывают назначение и характер использования этих элементов. В предыдущих версиях HTML использовались весьма неопределенные названия тегов. В спецификации HTML5, напротив, используются весьма описательные, интуитивно понятные названия. HTML5 предоставляет информационно-насыщенные названия, которые однозначно идентифицируют соответствующий контент. Например, широко применявшийся до настоящего времени тег <div> был дополнен тегами <section> и <article>.
Кроме того, были добавлены теги <video>, <audio>, <canvas> и <figure>,
которые обеспечивают более точное описание определенных типов контента.
HTML5 предоставляет следующие возможности.
- Теги с описательными названиями, которые точно указывают, для содержания какого контента предназначены эти теги.
- Усовершенствованные сетевые коммуникации.
- Существенно улучшенное хранение данных
- Средства Web Worker для исполнения фоновых процессов.
- Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером.
- Улучшенное извлечение хранящихся данных.
- Повышенная скорость сохранения и загрузки страниц
- Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.
- Улучшенная обработка форм в браузере.
- API-интерфейс баз данных на основе SQL, позволяющий применять локальное хранилище на стороне клиента.
- Теги canvas и video, позволяющие добавлять графические и видеоматериалы без установки сторонних подключаемых модулей.
- Спецификация API-интерфейса Geolocation, использующая геолокационные возможности смартфонов в интересах задействования облачных сервисов и приложений для мобильных устройств.
- Усовершенствованные формы, ослабляющие потребность в загрузке кода JavaScript, что обеспечивает более эффективную связь между мобильными устройствами и серверами cloud-среды.
HTML5 позволяет предоставить пользователю более впечатляющие возможности: страницы, спроектированные с использованием спецификации HTML5, способны предоставлять такие же возможности, как приложения для настольных систем. Кроме того, HTML5 существенно улучшает разработку для нескольких платформ благодаря сочетанию возможностей API-интерфейсов с повсеместностью браузера. HTML5 позволяет разработчикам предоставлять возможности современных приложений, беспрепятственно охватывающие несколько платформ.
Фактически HTML5 является синонимом непрерывных инноваций: новые теги, новые методики и общая инфраструктура разработки, базирующаяся на взаимодействии технологии HTML5 с родственными технологиями CSS3 и JavaScript. Это создает основу для функционирования приложений, ориентированных на клиентов. Помимо широкого распространения средств и методик технологии HTML5 на настольных системах, она может быть реализована в функционально насыщенных Web-браузерах для мобильных телефонов. Это растущий рынок, характерными представителями которого являются популярные и вездесущие платформы Apple iPhone, Google Android и Palm webOS.
Важнейшим аспектом мощных возможностей HTML5 является препарирование информации — или разделение контента на блоки, которое делает процесс гораздо понятнее. Высокая эффективность этого инструмента при проектировании и разработке подтверждается его усиливающимся доминированием в сфере Web-обработки.
HTML5 знаменует приход более эффективного семантического процесса на текстовом уровне и преобладание контролируемости над конструированием и использованием форм. Все эти и многие другие инновационные аспекты HTML5 обуславливают усиливающееся доминирование этой новой парадигмы. Этот нарастающий эффект до той или иной степени повлиял на многие организации (причем не только на коммерческие), в том числе на многие организации, у которых обработка информации и коммуницирование лишь недавно вошли в число основных видов деятельности.
Технология HTML5 — это не волшебная лампа с джинном внутри. Тем не менее технические и методические активы этой технологии уже сделали ее вторым по значимости способом решения проблем (первый способ — потереть волшебную лампу).
Планирование страницы
Мы собираемся создать простую Web-страницу. В ходе этого процесса рассмотрим несколько новых тегов, впервые появившихся в спецификации HTML5. Для создания эффективной и рациональной Web-страницы необходимо разработать план, охватывающий все создаваемые компоненты.
Создаваемая нами страница будет иметь высокоуровневый дизайн, показанный на рисунке 1. Страница состоит из области Header, области Navigation, области Article, содержащей три раздела, области Aside и, наконец, области Footer. Эта страница предназначена для работы в браузере Google Chrome, что исключает возможный визуальный беспорядок, порождаемый стремлением к браузерной совместимости, который мог бы затруднить понимание базовой структуры. Наша цель состоит в создании страницы, которая наглядно демонстрировала бы новые теги HTML5 и показывала возможности их использования для создания хорошо оформленного кода и элегантного дизайна страницы.
Рисунок 1. План Web-страницы Acme United
В процессе создания этой страницы я коснусь технологии CSS3, которая требуется для надлежащего отображения HTML5-страниц. Технология CSS3 необходима для придания определенного стиля HTML5-странице, для навигации по этой странице и для создания общего впечатления об этой странице. Группы свойств, описываемые в разделе CSS3 Reference на Web-сайте W3Schools.com (см. раздел Ресурсы), охватывают такие полезные теги, как фон, шрифт, выделенные области и анимация.
Однако прежде чем приступать к конструированию страницы, необходимо изучить несколько новых элементов HTML5.
В рассматриваемом примере область Header содержит заголовок страницы и подзаголовок. Тег <header> используется с целью создания контента для области Header данной страницы. Тег <header> может содержать открывающую информацию о теге <section> и о теге <article> в дополнение к самой Web-странице. Создаваемая нами Web-страница имеет область Header, показанную на высокоуровневом представлении ее дизайна, а также область Header внутри области Article и области Section. В листинге 1 показан пример разметки тега <header>.
Листинг 1. Пример тега <header>
<header>
<h2>Heading Text</h2>
<p> Text or images can be included here</p>
<p> Logos are frequently placed here too</p>
</header>Тег <header> также может содержать тег <hgroup> (листинг 2). Тег <hgroup> группирует заголовки вместе, используя показанные уровни заголовков с <h2> по <h6> с главным заголовком и подзаголовком.
Листинг 2. Пример тега <hgroup>
<header>
<hgroup>
<h2>Main Heading</h2>
<h3>Sub-heading </h3>
</hgroup>
<p> Text or images can be included here</p>
</header>Область Navigation на данной странице создается с помощью тега <nav>. Тег <nav> специфицирует область, специально предназначенную для навигации. Тег <nav> следует использовать для навигации по основному сайту, а не для хранения ссылок на другие области данной страницы. Область Navigation может содержать код, подобный показанному в листинге 3.
Листинг 3. Пример тега <nav>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>Области Article и Section
Проектируемая нами страница имеет одну область Article, которая содержит реальный контент данной страницы. Для создания этой области мы используем тег <article>, определяющий контент, который может быть использован независимо от остального контента этой данной страницы. Например, если вы хотите создать RSS-поток, то сможете использовать тег <article> для уникальной идентификации соответствующего контента. Тег <article> идентифицирует контент, который при перемещении в другой контекст может стать совершенно недоступным для понимания.
Область Article в плане страницы Acme United содержит три области Section. Мы создаем эти области с помощью тега <section>. Тег <section> содержит релевантные области компонентов Web-контента. Тег <section>— как и тег <article>— способен содержать заголовки, нижние колонтитулы или любые другие компоненты, необходимые для формирования данного раздела. Тег <section> предназначен для группировки контента. Контент для тега <section> и для тега <article> обычно начинается с тега <header> и заканчивается тегом <footer>, между которыми находится сам контент соответствующего тега.
Тег <section> также способен содержать теги <article>, а тег <article> способен содержать тег <section>. Тег <section> следует использовать для группировки сходной информации, а тег <article> следует использовать для такой информации, как статья или блог, которая может быть перемещена в новый контекст без искажения смысла контента. Тег <article>, как и следует из его названия («статья»), предоставляет полный пакет информации. Тег <section>, напротив, содержит связанную информацию, однако эта информация не может быть помещена в другой контекст сама по себе, поскольку в этом случае ее смысл будет потерян.
В листинге 4 показан пример применения тега <article> и тега <section>.
Листинг 4. Пример тегов <article> и <section>
<article>
<section>
Content
</section>
<section>
Content
</section>
</article>
<section>
<article>
Content
</article>
<article>
Content
</article>
</section>Изобразительные теги
Теги <section> и <article>, как и теги <header> и <footer>,
способны содержать тег <figure>. Этот тег используется для включения изображений, диаграмм и фотографий.
Тег <figure> может содержать тег <figcaption>, который, в свою очередь, содержит подпись для иллюстрации, содержащейся в теге <figure>. Это позволяет ввести описание, которое будет теснее связывать эту иллюстрацию с контентом. В листинге 5 показан пример структуры с тегом <figure> и тегом <figcaption>.
Листинг 5. Пример тега <figure> и тега <figcaption>
<figure>
<img src="/figure.jpg" alt="Picture">
<figcaption>Caption for the figure</figcaption>
</figure>Медиа-теги
Теги <section> и <article> также способны содержать различный медиаконтент. HTML5 предоставляет теги, которые обеспечивают быстрое понимание содержащегося в них контента. До недавнего времени такие медийные компоненты, как музыка и видео, поддерживались только встраиваемыми средствами. HTML5 поддерживает их собственными средствами.
Тег <audio> способен содержать аудиоконтент, например, музыкальные или любые другие звуковые потоки. Тег <audio> имеет атрибуты, которые определяют, какой аудиоматериал, когда и как будет воспроизводиться. К числу этих атрибутов относятся следующие: src, preload, control, loop, autoplay. В примере, показанном в листинге 6, аудио начинает воспроизводиться немедленно после загрузки страницы и воспроизводится непрерывно. Пользователю предоставляются органы управления, с помощью которых он может остановить или перезапустить воспроизведение аудио.
Листинг 6. Пример тега <audio>
<audio src="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio tag.
</audio>Тег <video> позволяет транслировать видеоклипы или потоковые визуальные материалы. Он имеет все атрибуты тега <audio>, а также три других атрибута: poster, width и height. Тег poster позволяет указать изображение, которое должно отображаться на протяжении загрузки видео, или в ситуации, когда видео вообще не способно загрузиться.
В листинге 7 показан пример структуры тега <video>.
Листинг 7. Пример тега <video>
<video src="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
</video>Теги <video> и <audio> способны содержать тег <Source>, который описывает мультимедийные ресурсы для тегов <video> и <audio>. Этот тег позволяет разработчику указать альтернативные видео- и аудиофайлы, из которых браузер сможет затем выбирать в зависимости от типа поддерживаемого медиаформата или кодека. В листинге 8 представлено два варианта выбора. Если используемый браузер не способен воспроизвести WMA-версию файла, попытайтесь использовать версию в формате MP3. В противном случае отобразите соответствующее сообщение, чтобы пользователь понимал, что данный аудиофайл недоступен.
Листинг 8. Пример тега <source>
<audio>
<source src="/music/good_enough.wma" type="audio/x-ms-wma">
<source src="/music/good_enough.mp3" type="audio/mpeg">
<p>Your browser does not support the HTML 'audio' element.</p>
</audio>Тег <embed> описывает встроенный контент, который может быть отображен на странице, например, файлы Adobe Flash в формате SWF. Листинг 9 содержит атрибут type, который идентифицирует встроенный источник как Flash-файл.
Листинг 9. Пример тега <embed>
<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />
В дополнение к атрибутам src и type тег <embed> имеет атрибут height и атрибут width.
Область Aside
Мы создаем область Aside в плане страницы Acme United с помощью тега <aside>. Этот тег предназначен для вспомогательного контента, не являющегося частью основного материала статьи, которую он дополняет. Например, в журналах теги типа aside часто используются для выделения выводов, сделанных в самой статье. Тег <aside> содержит контент, который может быть удален без ущерба для информации, излагаемой в статье, секции или странице, содержащей этот тег.
В листинге 10 показан пример применения тега <aside>.
Листинг 10. Пример тега <aside>
<p>My family and I visited Euro Disney last year.</p>
<aside>
<h5>Disney in France</h5>
<p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>Тег <footer> содержит информацию о странице, о статье или о разделе, например, сведения об авторе или дату написания. В качестве нижнего колонтитула он может содержать информацию об авторских правах и другую важную юридическую информацию (листинг 11).
Листинг 11. Пример тега <footer>
<footer>
<p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>Конструирование страницы
Теперь, когда вы познакомились с базовыми тегами, необходимыми для создания HTML5-страницы, приступим к конструированию своей страницы. Мы собираемся сконструировать Web-страницу для компании Acme United. Полностью эта страница показана на рисунке 2. Вы можете загрузить ее для последующего использования (см. раздел Загрузка).
Рисунок 2. Web-страница Acme United
SИтак, приступим к формированию страницы. Сначала следует тег <!doctype>. В спецификации HTML5 тег <!doctype> был упрощен: вам достаточно запомнить его атрибут —html. Это не только облегчает ввод этого тега, но и улучшает его защиту от ошибок. Обратите внимание, что атрибут имеет вид html, а не html5. Вне зависимости от количества версий HTML, тег <!doctype> всегда сможет иметь атрибут html.
Тег <html> содержит все остальные HTML-теги за исключением тега <!doctype>. Каждый из остальных тегов должен быть размещен между тегом <html> и тегом </html> (листинг 12).
Листинг 12. Пример тега <!doctype>
<!doctype html> <html lang="en">
После указания атрибута html и английского языка следует тег <head>, который может содержать скрипты, информацию о поддерживаемых браузерах, ссылки на таблицу стилей, метаинформацию и другие инициализационные функции. В разделе head можно использовать следующие теги.
<base><link><meta><script><style><title>
Тег <title> содержит фактический заголовок документа и является обязательным тегом раздела <head>. Этот заголовок можно увидеть в верхней части браузера при просмотре страницы. Тег <link> в листинге 13 указывает CSS3-таблицу стилей, которая будет использоваться для отображения данной HTML5-страницы. Эта таблица стилей имеет имя main-stylesheet.css.
Листинг 13. Пример тега <head>
<head>
<title>HTML5 Fundamentals Example</title>
<link rel="stylesheet" href="main-stylesheet.css" />
</head>Затем мы используем тег <body>, за которым следуют теги <header> и <hgroup>,
описанные ранее. Область <h2> в данном примере содержит название вымышленной компании (Acme United), а область <h3> содержит подзаголовок «A Simple HTML5 Example» (простой пример на HTML5). Соответствующая разметка показана в листинге 14.
Листинг 14. Пример тегов <body> и <header>
<body >
<header>
<hgroup>
<h2>Acme United</h2>
<h3>A Simple HTML5 Example</h3>
</hgroup>
</header>Технология CSS3 используется для формирования облика страницы, как показано в листинге 15. Сначала для страницы задается шрифт, а затем детали для тела страницы. После этого задаются размеры тела, а затем проектируется структура параграфа заголовка для тегов заголовков первого и второго уровней. Именно эти заголовки мы будем использовать для данной страницы.
Листинг 15. Первый пример CSS3
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 800px;
margin: 0em auto;
}
header h2 {
font-size: 50px;
margin: 0px;
color: #006;
}
header h3 {
font-size: 15px;
margin: 0px;
color: #99f;
font-style: italic;
}В листинге 16 показан тег <nav>, предназначенный для осуществления навигации по главному сайту.
Листинг 16. Пример тега <nav>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>В HTML5 также имеется тег <menu>, который вызывает затруднения у некоторых дизайнеров и разработчиков. Это объясняется тем фактом, что под навигацией часто понимается «навигационное меню». Тег <menu>, который был исключен в версии HTML 4.01, а затем снова появился в HTML5, предназначен для улучшения интерактивности. Этот тег не следует использовать для основной навигации. Единственный тег, который следует использовать для основной навигации — это тег <nav>. Мы используем тег <menu> в нашем примере позднее.
Форматирование навигации осуществляется посредством CSS3. Каждое определение тега <nav> в листинге 17 отражает определенное состояние тегов <ul> и <li> внутри тега <nav>.
Листинг 17. Второй пример CSS3
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #99f;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #006;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}Далее следует область Article. Эта область, определяемая тегом <article>, содержит свой собственный тег <header>. Тег <section> внутри тега <article> также содержит свой собственный тег <header> (листинг 18).
Листинг 18. Пример тегов <article> и <section>
<article>
<header>
<h2>
<a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
</h2>
</header>
<p> Primum non nocere ad vitam Paramus . . . </p>
<section>
<header>
<h2>This is the first section heading</h2>
</header>
<p>Scientia potentia est qua nocent docentp . . .</p>
</section>В листинге 19 показана CSS3-разметка, обеспечивающая визуализацию этого формата. Обратите внимание, что области paragraph, header и section определяются тегом <article>, внутри которого они содержатся. Заданный здесь тег <h2> не совпадает по формату с тегом <h2>, заданным для уровня страницы.
Листинг 19. Третий пример CSS3
article > header h2 {
font-size: 40px;
float: left;
margin-left: 14px;
}
article > header h2 a {
color: #000090;
text-decoration: none;
}
article > section header h2 {
font-size: 20px;
margin-left: 25px;
}
article p {
clear: both;
margin-top: 0px;
margin-left: 50px;
}Второй тег <section> в теге <article> содержит ту же базовую информацию, что и первый тег <section>, однако на этот раз мы собираемся использовать теги <aside>, <figure>, <menu>,
и <mark> (листинг 20).
Тег <aside> используется здесь для представления информации, которая не является частью окружающего ее потока. Тег <figure> содержит изображение Стоунхенджа. Данный тег <section> также содержит тег <menu>, который мы используем для создания кнопок с именами четырех Муз. При нажатии на какую-либо из этих кнопок этот тег предоставляет информацию о соответствующей Музе. Тег <mark> внутри тега <p> используется для подсвечивания слов veni, vidi, vici.
Листинг 20. Пример тегов <article> и <section>
<section>
<header>
<h2>Second section with mark, aside, menu & figure</h2>
</header>
<p> . . . <mark>veni, vidi, vici</mark>. Mater . . .</p>
<aside>
<p>This is an aside that has multiple lines. . . .</p>
</aside>
<menu label="File">
<button type="button">Clio</button>
<button type="button">Thalia</button>
<button type="button">Urania</button>
<button type="button">Calliope</button>
</menu>
<figure><img src="stonehenge.jpg" alt="Stonehenge"/>
<figcaption>Figure 1. Stonehenge</figcaption>
</figure>
</section>CSS3-разметка для данного раздела содержит новое определение тега <p>,
который имеет уменьшенную ширину по сравнению с заданной нами шириной страницы. Это изменение позволяет боковой панели (aside) смещаться вправо без перекрытия текста. Соответствующая разметка показана в листинге 21.
Листинг 21. Четвертый пример CSS3
article p.next-to-aside {
width: 500px;
}
article > section figure {
margin-left: 180px;
margin-bottom: 30px;
}
article > section > menu {
margin-left: 120px;
}
aside p {
position:relative;
left:0px;
top: -100px;
z-index: 1;
width: 200px;
float: right;
font-style: italic;
color: #99f;
}Теги раздела Video
Заключительным компонентом тега <article> является раздел video. В данном примере (листинг 22) видео представляет собой видеофайл в формате ogg, который автоматически начинает воспроизводиться при загрузке страницы и воспроизводиться в бесконечном цикле. Пользователю предоставляются органы управления для приостановки и возобновления воспроизведения. Во многих современных реализациях видеофайлы в формате ogg имеют расширение ogv («v» означает видео). Тег <audio> функционирует аналогичным образом.
Листинг 22. Пример тегов <article> и <section>
<section>
<header>
<h2>This is a video section</h2>
</header>
<p><video src="//people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv"
controls autoplay loop>
<div><p>This video will work in
Mozilla Firefox or Google Chrome only. </p>
</div>
</video></p>
</section>
</article>В листинге 23 приведены CSS3-определения для раздела video.
Листинг 23. Пятый пример CSS3
article > section video {
height: 200px;
margin-left: 180px;
}
article > section div.no-html5-video{
height: 20px;
text-align: center;
color: #000090;
font-size: 13px;
font-style: italic;
font-weight: bold ;
background-color: #99f;
}В листинге 24 показан нижний колонтитул и завершающая часть страницы.
Листинг 24. Пример тега <footer>
<footer>
<p>Copyright: 2011 Acme United. All rights reserved.</p>
</footer>
</body>
</html>В листинге 25 показан CSS3-код для нижнего колонтитула.
Листинг 25. Пятый пример CSS3
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}Заключение
Итак, мы создали нашу Web-страницу. На этом завершается первая статья в данной серии из четырех частей. Цель этой статьи состояла в том, чтобы представить новый режим работы HTML5. HTML5 — это не просто модернизация HTML4, — это новый способ цифрового коммуницирования. Благодаря функциональности технологий CSS3 и JavaScript, спецификация HTML5 вплотную приблизилась к тому, чтобы предоставить разработчику все возможности в одном пакете. Если вы усвоите все необходимое из обширного массива имеющейся в открытом доступе информации по HTML5, то сможете присоединиться к растущему сообществу Web-дизайнеров и Web-разработчиков, компетентных в мультимедийных аспектах HTML5. В следующей части данной серии мы рассмотрим, как писать код для HTML5-форм и как структурировать эти формы.
Ресурсы для скачивания
Похожие темы
Подпишите меня на уведомления к комментариям
www.ibm.com
HTML Основы
В данной категории Вы сможете познакомиться с множеством тегов HTML. Вы убедитесь, что HTML — это просто!
В ниже приведённых статьях имеется вся информация, которая нужна по этому языку разметки.
Ознакомившись с данными материалы, Вы сможете сразу начать создавать свой сайт и начать зарабатывать на нём!
Прочитав статьи по основам HTML, Вы узнаете:
1) О структуре HTML-документа.
2) Как добавлять ссылки на HTML-страницы.
3) Как добавлять изображения на HTML-страницы.
4) О способах изменения внешнего вида текста в HTML.
5) Как добавлять списки на HTML-страницы.
6) О способах выравнивания элементов в HTML.
7) Как создавать формы в HTML.
8) Как создавать таблицы в HTML.
9) Как выбрать цвет в HTML.
10) Как установить Favicon на сайт.
11) Как вставить дополнительные пробелы в HTML.
12) Как установить страницу 404.
13) Как сделать редирект на HTML.
14) Как вывести спецсимволы в HTML.
15) Зачем нужен DOCTYPE.
16) Какая разница между HTML и XHTML.
17) Как добавить видео на сайт.
18) О проверке сайта в разных браузерах.
19) О значение валидного HTML-кода.
20) Как проверить статус ICQ через HTML.
21) Что такое мета-теги в HTML.
22) Какие имеются мета-теги для страницы в HTML.
23) Какие имеются мета-теги для браузера в HTML.
24) Какие имеются мета-теги для поисковых систем в HTML.
25) Что такое кодировка.
26) Что лучше: блочная вёрстка или табличная.
27) Что делать, если HTML-файл открывается как TXT.
28) Как вставить аудио на сайт.
29) Почему Dreamweaver — это плохо.
30) Как сделать дизайн для сайта.
31) Что такое вёрстка.
32) Что такое сайт под ключ.
33) Как поставить горячую клавишу на ссылку.
34) Как сделать кпопку «Наверх».
35) Об использовании тега optgroup в HTML.
36) Почему не отображается картинка на сайте.
37) Почему фреймы — это плохо.
38) Стоит ли использовать Flash при создании сайта?
39) Какова структура блочной вёрстки?
40) Как открыть ссылку в новом окне с валидным кодом?
41) Как запретить посетителю сохранять картинки?
42) Как запретить посетителю копировать текст?
43) Стоит ли делать вёрстку под старые браузеры.
44) Как сделать мобильную версию сайта.
45) Как поменять кодировку на сайте.
46) Как сделать автообновление страницы.
47) Как сделать комментирование на HTML-сайте.
48) Как проверить сайт в разных версиях IE.
49) Как установить радио на сайт.
50) Какая структура у двухколоночного сайта.
51) Что такое SVG? Основы.
52) Что такое SVG? Стилизуем объекты.
53) Что такое SVG? Пишем текст.
54) Что такое SVG? Анимируем SVG объекты.
55) Что такое SVG? Поддержка старых браузеров.
56) Зачем нужен тег ruby в html.
57) Язык разметки Markdown.
58) Как быстро создать шаблоны электронной почты на HTML.
59) Как сделать красивые страницы ошибок.
60) Зачем нужен HTML тег code?.
61) Как сделать видео фон на сайте.
62) Красивое оформление HTML/CSS кода.
63) Верстка email писем.
Все материалы по основам HTML
myrusakov.ru
Основы HTML5 или учимся верстать на HTML5
Приветствую Вас, дороги читатели блога. Сегодня мы не много узнаем о основах новой разметке веб страниц HTML5. А так же узнаем как наш уже существующий сайт перевести в этот новый HTML язык.
Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.
Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.
Верстка div (старая)
Друзья, сначала я начну с примеров, так как на примерах всегда понятнее. Как Вы уже догадались, что я перевёл свой блог на HTML5, и по этому возьмём его как пример, рассмотрим старую вёрстку с помощью DIV и посмотри как выглядит новая на HTML5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU"> <head profile="http://gmpg.org/xfn/11"> <!-- ......... --> </head> <body> <!-- Шапка сайта --> <div> <!-- Навигация --> <div> <!-- ......... --> </div> <!-- Конец навигации --> </div><!-- Конец шапки сайта --> <div><!-- основной блок --> <div><!-- блок там где отображаются посты --> <!-- Начало поста --> <div> <!-- ......... --> </div> <!-- Начало поста --> <div> <!-- блок боковой колонки --> <!-- ......... --> </div> </div> </div> <div><!-- Футер сайта --> <!-- ......... --> </div> </body> </html>
Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.
Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.
А вот сейчас нам нужно данный код перевести в HTML5, но как оказывается что этот новый стандарт принёс с собой не мало новых тегов, о которых нужно знать перед тем как перевести наш код.
Теги HTML5
Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:
<header> — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.
<section> — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.
<article> — обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.
<aside> — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.
<footer> — в этот тег должен входить низ Вашего сайта (Футер)
<hgroup> — в данный тег входят групы заголовков сайтов, например <h3>.
<nav> — данный тег включает в себя всю навигацию на сайте (меню).
Хочу сказать, что эти все теги обязательно должны закрываться, например если это тег <article> он должен иметь закрывающий тег </article> и так далее.
Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:
<audio> — данный тег выводит аудио на сайте.
<canvas> — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.
<menu> — в этот тег должны входить список меню, например ul li.
<time> — сюда входят время и дата на сайте. Например на блогах дата размещения поста.
<video> — вставляет видео на страницу.
<wbr> — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу <br>.
Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
А вот как он выглядит по новому:
<!doctype html>
Ну как Вам разница? 🙂 По моему существенная. Так же ещё проще стал тег <html>. Он был такой:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
А стал такой:
<html lang=ru>
Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.
Верстка (новая)
Перед тем как приступить к вёрстке нам между тегами <head> и </head> нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:
footer, nav, header, section, aside {
display: block
}Всё, первый шаг готов. Теперь давайте посмотри на готовый уже HTML5 код, который у меня получился, а также подробно разберём его:
<!DOCTYPE html> <html lang="ru"> <head> <!-- ......... --> </head> <body> <!-- Шапка сайта --> <header> <!-- Навигация --> <nav> <!-- ......... --> </nav> <!-- Конец навигации --> </header><!-- Конец шапки сайта --> <section><!-- основной блок --> <aside><!-- блок там где отображаются посты --> <!-- Начало поста --> <article> <!-- ......... --> </article> <!-- Начало поста --> <aside> <!-- блок боковой колонки --> <!-- ......... --> </aside> </div> </section> <footer><!-- Футер сайта --> <!-- ......... --> </footer> </body> </html>
Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.
Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner — <div id=»headerInner»>. Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 (<header>) можем смело его использовать вместо div только с таким же классом. Таким образом у нас получилось следующее:
<header>
И не забываем поставить закрывающий тег </header>, а также удалить закрывающий div.
Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом <section>. В старой вёрстке этот главный блок выглядел так <div id=»wrapper»>, а в HTML5 будет выглядеть вот так <section id=»wrapper»>. И опять же не забудьте поставить закрывающий тег и удалить старый div.
Придерживайтесь такого же принципа и в других тегах на сайте. Таким образом я перевёл свой блог в HTML5. И был приятно удивлён тем, что это совсем не сложно.
Вывод
Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.
Опять рекомендую Вам переходить Вам на новую технологию.
Вот и всё что хотелось сказать по этому поводу. Друзья, если у Вас что то не будет получаться, спрашивайте в комментариях, и я обязательно помогу 🙂 До скорых встреч.
beloweb.ru
Основы HTML для начинающих вебмастеров и SEO специалистов
Всем привет! Сегодня провел утро в объяснениях «на пальцах», как ручками прописывать текстовые ссылки и ссылки изображения. Думаю, что начальные знания HTML никому не помешают, поэтому кратенько изложу основную суть HTML. Чтобы, так сказать, начинающие SEO оптимизаторы и блогеры имели представление об этом языке и о том, как построены страницы.
Что такое HTML?
HTML расшифровывается, как язык гипертекстовой разметки. Это компьютерный язык, используемый для создания документов в интернете. Эти документы представляют собой текстовые файлы, содержащие ваш контент (текст, изображения, видео и т.д.) и HTML теги, используемые для структурирования этого содержимого. Браузеры читают страницу, а HTML и HTML-теги говорят им, что и как показать. HTML-теги не отображаются в браузере. Все теги начинаются с левой стороны значком меньше «<» и заканчиваются значком больше «>» . Чтобы построить базовую HTML страницу вам потребуется текстовый редактор Notepad++ (на мой взгляд лучший) либо любой простой текстовый редактор на выбор TextEdit, TextWrangler, SimpleText, TextPad или даже Блокнот. Так же существуют специализированные программы, которые упрощают жизнь вебмастерам, такие как Adobe Dreamweaver, но это не обязательно. Не используйте Microsoft Word! HTML не чувствительны к регистру.
Подробнее о HTML-тегах
Есть два вида тегов: контейнерные и пустые.
- Контейнерный тег «оборачивает» текст или изображение и должен состоять из открывающего и закрывающего тега, такие как
<html>…</ html>. Закрывающий тег имеет косую черту/говоря браузеру, что тег закончился. - Пустой тег стоит особняком, такой как
<br>для разрыва строки или<hr>для горизонтальной линии. Пустые теги не требуют закрывающего тега, поскольку они ничего не «оборачивают».
Как создать страницу HTML
Чтобы с чего-нибудь начать, предлагаю взглянуть на очень простой шаблон HTML.
<html><head><title> Название сайта либо страницы </ title> </ head> <body>Основной контент страницы </ body> </ html>
Обратите внимание на то, что когда мы открываем тег, мы должны обязательно закрыть его. HTML документы делятся на две основные части — голова (head) и тело (body). <html> тег сообщает браузеру, что это HTML документ. <head> тег включает в себя информацию о документе, такую как:
- заголовок страницы — тег <title> , который появляется в браузерах, в названии вкладки
- тег автора — <author>
- тег ключевых слов — <keywords>
- тег описания — <description>и т.д.
Здесь же подключаются файлы стилей (CSS)? но это уже для более продвинутых товарищей. Наконец, тег <body>, который содержит весь контент страницы сайта: текст, изображения, графики, и т.д.
Создание первой HTML страницы
Откройте текстовый редактор и вставьте следующий код в новый документ:
<html> <head> <title> Моя первая веб страница </ title> </ head> <body> Обучение HTML
Здравствуйте!
Это моя первая веб-страница.
Я учусь основам HTML и тегам заголовков
HTML ОСНОВЫ</ body> </ html>
Должно выглядеть вот таким образом:
Сохраните файл как example.html на рабочий стол. Откройте файл в веб-браузере, чтобы увидеть, как он преобразует теги. Это будет выглядеть довольно скучно, на данном этапе, но это только начало.
Можно немного и приукрасить :).
Форматирование текста
Мы можем добавлять теги к тексту, чтобы добавить ему больше структуры. На первом этапе выделим заголовки, абзацы, разрывы строк и горизонтальную линию, но обо всем по порядку.
Рубрики
Есть 6 уровней заголовков в HTML, они определяют уровень важности. Например на блоге, ваше название статьи может быть h2 тегом, в то время, как названия абзацев вашего поста могут быть h3 или h4 тегами. Например:
<h2> Заголовок h2 </h2><h3> Заголовок h3 </h3><h4> Заголовок h4 </h4>
Пункты
Для отдельных участков текста можно использовать <p> тег для добавления пробела между параграфами.
<p> Параграф </p>
Разрыв строк
Чтобы добавить один разрыв строки используем пустой тег <br>, то есть его не надо закрывать /. Это создает пустую строку и отправляет следующий код на следующую строку.
Горизонтальная линия
Чтобы создать горизонтальную линию поперек вашей странице мы используем тег <hr>.
Как добавить форматирование текста на страницу?
Откройте example.html в текстовом редакторе снова и добавляйте форматирование текста следующим образом:
В результате этих телодвижений получаем следующее:
Уже приятнее глазу.
Вот абсолютные основы HTML и, вероятно, самая скучная часть! Я планирую в будущих постах немного развить данную тему, т.к. любому SEO специалисту в конце-концов приходится сталкиваться с основами HTML.
promotiger.ru
Основы HTML
Содержание:
- Основные понятия
- История
- Общая структура
Основные понятия
HTML (HyperText Markup Language) — язык разметки гипертекста — предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-браузер на компьютере пользователя Интернета.
HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языкахJavascript и Visual Basic Script и программы-апплеты на языке Java.
Даже, если вы не собираетесь в дальнейшем редактировать «вручную» текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и «читаемым» при просмотре браузерами разных фирм.
Основными компонентами HTML являются:
- Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу типа создания абзаца или вставки изображения.
- Атрибут (или аргумент). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.
- Значение. Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.
Теги представляют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше).
Закрытие тега отличается от открытия только наличием символа ‘/’.
Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом
www.sites.google.com