Теги для html сайта в блокноте: Основные теги для создания сайта

Содержание

Язык HTML и его теги. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов.

Язык HTML и его теги

Изучать HTML лучше всего на примере. Так что давайте сразу же создадим нашу первую Web-страничку. Благо Windows уже содержит необходимый для этого инструмент — Блокнот.

НА ЗАМЕТКУ

Вообще, для создания Web-страниц существует множество специальных программ — Web-редакторов. Они позволяют работать с Web-страницами, даже не зная HTML, — как с документами Microsoft Word, просто набирая текст и форматируя его. Также они следят за правильностью расстановки тегов, помогут быстро создать сложный элемент Web-страницы и даже опубликовать готовый Web-сайт в Сети. К таким программам принадлежит, в частности, известный Web-редактор Adobe Dreamweaver. Однако мы пока что будем пользоваться простейшим текстовым редактором Блокнот. Это позволит нам лучше познакомиться с HTML.

Откроем Блокнот и наберем в нем текст (или, как говорят бывалые программисты, код), приведенный в листинге 1.1.

Листинг 1.1

<!DOCTYPE html>

<HTML>

<HEAD>

<META HTTP-EQUIV=»Content-Type» CONTENT=»text/html; charset=utf-8″>

<TITLE>Пример Web-страницы</TITLE>

</HEAD>

<BODY>

<h2>Справочник по HTML</h2>

<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке

<STRONG>HTML</STRONG>.</P>

</BODY>

</HTML>

Проверим набранный код на ошибки и сохраним в файл с именем 1.1.htm. Только сделаем при этом две важные вещи.

1. Сохраним HTML-код в кодировке UTF-8. Для этого в диалоговом окне сохранения файла Блокнота найдем раскрывающийся список Кодировка и выберем в нем пункт UTF-8.

2. Заключим имя файла в кавычки. Иначе Блокнот добавит к нему расширение txt, и наш файл получит имя 1.1.htm.txt.

Все, наша первая Web-страница готова! Теперь осталось открыть ее в Web-обозревателе и посмотреть на результат.

Мы можем использовать стандартно поставляемый в составе Windows Web- обозреватель Microsoft Internet Explorer. Но Internet Explorer на данный момент не поддерживает HTML 5; его поддержку обещают только в версии 9, которая пока находится в разработке. HTML 5 поддерживают последние версии Mozilla Firefox, Opera, Apple Safari и Google Chrome, поэтому предпочтительнее какая-либо из этих программ.

Откроем же Web-страницу в выбранном Web-обозревателе (автор выбрал Firefox) и посмотрим на нее (рис. 1.3).

Рис. 1.3. Наша первая Web-страница

Видите? Мы создали Web-страницу, содержащую большой «кричащий» заголовок,

абзац текста, который автоматически разбивается на строки и содержит фрагмент текста, выделенный полужирным шрифтом (аббревиатура «HTML»). И все это — в «голом» тексте, набранном в Блокноте!

Теперь посмотрим, что же мы такое написали в файле 1.1.htm. Пока что ограни- чимся небольшим фрагментом HTML-кода (листинг 1.2).

Листинг 1.2

<h2>Справочник по HTML</h2>

<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.</P>

Здесь мы видим текст заголовка и абзаца. И еще странные слова, взятые в угловые скобки — символы < и >. Что это такое?

Это и есть теги HTML, о которых упоминалось ранее. Они превращают тот или иной фрагмент HTML-кода в определенный элемент Web-страницы: абзац, заголовок или текст, выделенный полужирным шрифтом.

Начнем с тегов <h2> и </h2>, поскольку они идут первыми. Эти теги превращают фрагмент текста, находящийся между ними, в заголовок. Тег <h2> помечает начало фрагмента, на который распространяется действие тега, и называется

открывающим. А тег </h2> устанавливает конец «охватываемого» фрагмента и называется закрывающим. Что касается самого фрагмента, заключенного между открывающим и закрывающим тегами, то он называется содержимым тега. Именно к содержимому применяется действие тега.

Все теги HTML представляют собой символы < и >, внутри которых находится имя тега, определяющее назначение тега. Закрывающий тег должен иметь то же имя, что и открывающий; единственное отличие закрывающего тега — символ /, который ставится между символом < и именем тега.

Рассмотренные нами теги <h2> и </h2> в HTML фактически считаются одним тегом <h2>. Такой тег называется парным.

Поехали дальше. Парный тег <P> создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)

Парный тег <STRONG> выводит свое содержимое полужирным шрифтом. Как мы видим, тег <STRONG> вложен внутрь содержимого тега <P>. Это значит, что содержи- мое тега <STRONG> будет отображаться как часть абзаца (тега <P>).

Давайте ради интереса выделим слова «Web-дизайном» курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег <EM>:

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM>Web-дизайном</EM>! Здесь вы сможете найти информацию обо всех

.

Сохраним исправленную Web-страницу и обновим содержимое окна Web-обозревателя, нажав клавишу <F5>. Получилось! Да мы уже стали Web-дизайнерами!

Осталось рассмотреть важнейшие правила, согласно которым пишется HTML-код.

— Имена тегов можно писать как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена тегов пишут прописными буквами.

— Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.

— В обычном тексте, не являющемся тегом, не должны присутствовать символы < и >. (Эти символы называют недопустимыми.) В противном случае Web- обозреватель сочтет фрагмент текста, где встречается один из этих символов, тегом и отобразит Web-страницу некорректно.

На этом пока закончим. Впоследствии, изучив другие языковые элементы HTML, мы пополним список этих правил.

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Как создать html страницу? Что такое атрибут и теги html?

Как запустить видеоурок:
  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Создание папки сайта.

  • Открываем нужную нам  директорию (папку, каталог), то есть ту директорию, где будет располагаться папка нашего сайта. В моем случае — это рабочий стол.
  • Для того что бы создать папку нажимаем правой клавишей мыши. Нажимаем в выпадающем меню «Создать», и нажимаем «Папка».
  • Папка создана. Вводим ей название, допустим «Site». Жмем «Enter».

Как создать html страницу?

  • Для этого переходим в блокнот или в программу Notepad++ .
  • Для того чтобы создать html документ, жмем в верхнем левом углу вкладку «Файл»,  далее «Новый». Либо Ctrl+N.
  • Теперь я введу структуру данной html страницы, а вы повторяйте за мной.
<html>
<head>
<title>Главная страница </title>
</head>
<body>
<p align="center"> Добро пожаловать на мой сайт </p>
<p><h3><font></font></h3></p>
<br>
<h2> Рад вас видеть. </h2>
</body>
</html>
  • После того как мы переписали структуру этого документа, давайте сохраним его. Нажимаем «Файл», далее «Сохранить как…». Либо Ctrl+Alt+S.
  • Выходит окно сохранения, и выбираем нужную нам папку, ту, куда будем сохранять. В нашем случае это папка «Site».
  • Вводим имя файла, «index.html», не забываем вводить расширение файла, сейчас расширение «html», иначе файл сохранится в текстовом формате. Жмем «Сохранить».
    Теперь перейдем в папку нашего сайта, откроем нашу страницу в браузере, и проверяем. Видим, что все работает.

Что такое атрибут и теги html?

Что такое теги html?

Грубо говоря, тег это все, что находится между открывающей и закрывающей треугольными скобками — < и >. В данном случае, это тег 

html. Тег <html> является обязательным тегом, а так же для него требуется закрывающий тег </html>.

Большинство тегов имеют закрывающие теги, но есть и исключения. Как, например тег <br> — что означает перенос на следующую строку. Теги будем разбирать по ходу курса пока что их вам не нужно запоминать. Например тег <p> означает параграф. Перейдем в наш код:

  • Тег <br> означает перенос на следующую строку. Можем перейти в браузер и посмотреть (скрины находятся в галерее, внизу статьи). Переходим обратно в код.
  • Тег <h2> отвечает за заголовки. Чем меньше число в теге, тем больше заголовок. Как видно в браузере заголовок «Рад вас видеть» самый большой.

Что такое атрибут html?

Атрибут (лат. attribuo — придаю, наделяю) наделяют дополнительными свойствами наши теги. Атрибут «align» имеет значение «center». Это значит, что текст, находящийся между открывающимся тегом 

<p> и закрывающимся </p> будет находиться по центру. Если изменим значение атрибута «align»  и вместо «center» поставим «right», жмем кнопку «Сохранить», и открываем браузер. Нажимаем кнопку обновить. Как видите текст «Добро пожаловать на мой сайт» располагается справа. Как вы уже поняли, атрибут «align» отвечает за расположение текста на нашей html странице.

Тег html. Структура тега html

А сейчас мы разберем структуру html документа (тега <html>). Думаю, вы знаете, что у всех, почти у всех людей есть голова :). У головы есть глаза, рот, нос, уши. Также у всех людей есть тело. Из тела исходят руки, ноги. Так же как и у html документа. Голова, в нашем случае, это тег <head> и закрывающий тег </head>, также в свою очередь туда входит тег <title> и другие. Эти теги можно принимать за нос, уши, глаза то есть то, что находится на голове. У html документа, как говорилось, есть тело. Тело документа находится между тегами 

<body> и закрывающим тегом </body>. У него тоже есть свои теги: <p>, <br>, <font>, <h2>, <h3> и другие, их очень много. В html документе тело и голова заключены в обязательный тег <html> и </html>

Забыл сказать,  что тег <title> отвечает за название нашей страницы. Это можно посмотреть в одном из браузеров, которые мы разбирали в прошлом видеоуроке.
Переходим в html код и рассмотрим последний пункт – порядок расположения тегов. Сейчас вы видите на экране теги и закрывающие теги <p><h3><font></font></h3></p>. Нужно соблюдать порядок тегов, например, если мы переместим <p><h3><font></h3></font></p>, то страница будет отображаться некорректно. Поэтому, нужно соблюдать чтобы одни теги были внутри других, и не менять этот порядок.

На этом, мы заканчиваем урок, подводя итог тому, чему научились:

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

До встречи в следующем видеоуроке, в котором мы разберем элемент DOCTYPE и раздел HEAD! 🙂

Как создать html страницу — пожалуй, первый вопрос будущих веб-мастеров. Что такое атрибут и теги html — второй вопрос. Заходите к нам и мы ответим Вам!

Работа с языком в HTML (руководство)

Работа с языком в HTML (руководство)

Целевая аудитория: XHTML/HTML и CSS кодеры, веб-разработчики (PHP, JSP, и т. д.), а также все, кому необходимо руководство по объявлению и использованию языковой информации в HTML. Предполагается, что вы имеете базовое знакомство с HTML и CSS.

Данное руководство объединяет и организует ссылки на статьи, которые, все вместе, помогут вам понять основные аспекты работы с языковой информацией при создании HTML и CSS.

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

Если это XHTML 1.x или HTML5 Polyglot документ, используемый, как XML, вам следует также использовать xml:lang атрибут (с тем же значением). Если ваша страница используется только, как XML, то просто используйте xml:lang атрибут.

Не используйте meta элемент с http-equiv, установленным в значение Content-Language.

Выбирайте тэги из списка IANA Subtag Registry и следуйте правилам синтаксиса BCP 47 при использовании структур более сложных, чем просто языковой тэг. Держите свои языковые теги как можно более короткими.

Используйте :lang свойство в CSS, чтобы применять стили, зависящие от языка вашего контента.

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

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

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

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

Объявление языка в HTML предоставляет итоговую информацию о том, как объявлять язык, используя атрибуты.

HTTP заголовки, мета элементы и информация о языке описывает, как языковые метаданные отличаются от действительного языка текста, а также Content-Language, используемый в HTTP заголовках и мета элементах.

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

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

Языковые тэги в HTML и XML описывает синтаксис языковых тэгов, использующих спецификацию BCP 47.

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

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

Установка языковых настроек в браузере

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

Стилизация с использованием языковых атрибутов

  • Приступаете к работе? Язык в Сети

  • Ссылки по теме, Разработка HTML и CSS

HTML-команды для создания сайтов

Аббревиатура HTML расшифровывается как HyperText Markup Language. HTML — это не язык программирования, это язык разметки сайта.

Все браузеры умеют преобразовывать эту разметку в удобный вид для пользователя.

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

Основные команды HTML

Список HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать «Блокнот». Рекомендуется использовать Notepad++. Он выглядит вот так.

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

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

На рисунке видно два тега <html> и </html>. Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только «/». Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.

Тег <html> обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.

Есть и другие основные теги: head и body.

Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.

Название тегов соответствует смыслу. Head — голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body — тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.

В служебном разделе указывается:

  • заголовок документа;
  • файлы стилей;
  • файлы скриптов;
  • мета-теги;
  • указания для поисковых систем;
  • указания для роботов;
  • любая другая информация, которая может использоваться программистами, но не пользователям.

Файл стилей подключается вот так:

<link rel = “stylesheet” href = “style.css” type = “text/css”>

Файл скриптов следующим образом:

<script type=»text/javascript» src=’main.js’></script>

У текста обязательно должен быть заголовок. Его указываем вот так:

<title>Заголовок страницы</title>

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

Теги для оформления текста

Текст нужно размещать в теге абзаца. Он обозначается как <p>Текст</p>. Для текста также можно использовать <span>Строка</span>.

Оформлять текст можно, как и в «Ворде»:

  • <i>курсив</i>
  • <strong>жирный текст</strong>
  • <s>перечеркнутый текст</s>
  • <u>подчеркнутый текст</u>

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

Использование заголовков

Есть и другие важные HTML-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега <h2>Заголовок первого уровня</h2>. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.

Пример на рисунке.

Имейте в виду, что рекомендуется использовать только один заголовок h2. При этом он должен совпадать с тегом <title>. Разумеется, вы можете указать 200 заголовков h2, но тогда к вам будут применены санкции со стороны поисковых систем.

Использование изображений

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

Как видите, на примере детально показано, что и как называется.

Использование ссылок

Если вы учите HTML-команды, то знать тег-ссылки вы просто обязаны. Это один из главнейших элементов, который составляет Всемирную паутину.

Ссылка обозначается тегом <a>. Но его обязательно нужно закрывать. Кроме этого, у этого элемента есть обязательный атрибут href, в котором и указывается адрес ссылки.

В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.

Ссылки можно также форматировать при помощи классов стилей или обычных тегов (курсив, жирный, подчеркивание и перечеркивание).

Использование таблиц

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

Таблица создается следующим образом:

<table border=»1″>

<tr>

<td>Текст ячейки</td>

<td>Текст ячейки</td>

</tr>

<tr>

<td>Текст ячейки</td>

<td>Текст ячейки</td>

</tr>

</table>

Атрибут width указывает ширину таблицы. Она может быть в процентах или пикселях. Border указывает толщину рамки.

Структура указывается следующим образом. Тег tr является строкой. Тег td ячейкой. А всё вместе — это таблица.

Таблицу можно выравнивать. Для этого используется атрибут align, который может принимать три значения: Left, Center, Right. Пример использования указан ниже.

Эти HTML-команды (ширина и выравнивание) подходят и для других элементов. Толщина рамки также указывается у изображений.

Использование списков

Используя HTML-команды, можно создать различные виды списков. Практически точно так же, как и в редакторе Word.

В языке Html существуют упорядоченные и неупорядоченные списки (маркированные). Пример такого списка.

<ul>

<li>Первое</li>

<li>Второе</li>

<li>Третье</li>

</ul>

Результат будет такой:

  • Первое
  • Второе
  • Третье

Тип списка

Код в языке HTML

В виде круга

<ul type=»disc»>
<li>…</li>
</ul>

В виде окружности

<ul type=»circle»>
<li>…</li>
</ul>

С квадратными маркерами

<ul type=»square»>
<li>…</li>
</ul>

Упорядоченные списки создаются точно так же, но только вместо <ul>, используем тег <ol>.

Здесь также можно задать тип вывода списка:

  • «1» – арабские числа 1, 2, 3 …
  • «A» – заглавные буквы A, B, C …
  • «a» – строчные буквы a, b, c …
  • «I» – большие римские числа I, II, III …
  • «i» – маленькие римские числа i, ii, iii …

Стандартно выводятся арабские цифры.

Поскольку это нумерованные списки, у них есть атрибут start, в котором указывается начальное значение списка. Например, можно выводить список начиная с 10-го или 20-го числа.

Использование стилей

HTML-команды для сайта весьма разнообразны, но все они подчиняются стилям. Стили можно указывать в виде файла в разделе head: <link rel = “stylesheet” href = “style.css” type = “text/css”> или прописать сразу готовый стиль.

Обратите внимание, что между этими определениями стилей есть разница. Файл стилей можно указывать во всех страницах сайта. Как только вы внесете в него изменения, то это обновление коснется всего сайта в целом. Если вы укажете стили на конкретной странице, то изменения и использование этих классов будет только внутри этого файла. За пределы него ваши настройки не выйдут.

Представьте, что у вас 20 страниц HTML и вы решили сделать заголовок на 2 пикселя больше. Если у вас всё в файле стилей, то правку внести нужно только там. Если везде индивидуально, то обновлять придется все 20 страниц.

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

Данный способ использовать не рекомендуется.

Основы HTML для начинающих

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Для изучения урока, скачайте архив с необходимыми файлами.

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

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

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

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

На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

  • Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
  • HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
  • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
  • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
  • Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

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

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

Структура документа HTML

Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

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

Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

<!doctype html> 
<html> 
<head> 
	<title>Заголовок</title> 
	<meta charset="UTF-8"> 
	<link rel="icon" href="favicon.ico"> 
	<link rel="stylesheet" href="style.css"> 
	<script src="script.js" type="text/javascript"></script>
</head> 
<body> 
	Тело документа 
</body> 
</html>
Обратите внимание, документы HTML имеют расширение .html.

Итак, по порядку из примера.

<!doctype html> — тип документа (доктайп)
<!doctype html>

Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

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

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

<html> — начало документа
<html>

Первый тег, который мы встречаем после доктайпа, это <html>.

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

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

Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.

Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.

Тег <head>
<head>

Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

<тег> 
	содержание или другие теги
</тег>

Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.

Тег <title> — заголовок документа
<title>Заголовок</title>

Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.

Метатег <meta charset=»UTF-8″ >
<meta charset="UTF-8" >

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

Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.

Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

Фавиконка (favicon)
<link rel="icon" href="favicon.ico" >

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

CSS стили документа
<link rel="stylesheet" href="style.css">

Подключает к документу CSS файл со стилями оформления HTML.

CSSкаскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.

Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.

Тег <script>
<script src="script.js" type="text/javascript"></script>

Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.

В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.

Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.

</head>

Закрываем тег <head> и шагаем дальше.

Тело aka body
<body>

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

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

Тег
Описание
<a>
Тег для создания ссылок в документе.
Пример:
<a href="http://webdesign-master.ru">текст ссылки</a>
Атрибут href указывает документ, на который будет вести данная ссылка.
<em>,
<strong>
Делает текст курсивом или жирным (акцентируемым).
Пример:
<em>текст курсивом</em>
<strong>жирный (акцентируемый) текст</strong>
<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>
Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h2 до h5. В документе должен быть только один заголовок, выделенный тегом h2, как главный заголовок документа.
Примеры:
<h2>Заголовок первого уровня</h2> 
<h3>Заголовок второго уровня</h3> 
<h4>Заголовок третьего уровня</h4> 
... и т. д.
<ol>,
<ul>
Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li>
Примеры:
<ul> 
	<li>Элемент маркированного списка 1</li>
	<li>Элемент маркированного списка 2</li>
</ul> 

<ol> 
	<li>Элемент нумерованного списка 1</li>
	<li>Элемент нумерованного списка 2</li>
</ol> 
<p>
Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.
Пример:
<p>Внешний вид HTML разметки во многом 
определяется CSS стилями.</p> 

<p>Тем не менее, некоторые веб-мастера 
предпочитают не использовать стили на первых 
этапах проекта.</p>
<img>
Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст — атрибут «alt». Данный тег «самозакрывающийся».
Пример:
<img src="путь_до_картинки.jpg" alt="Текст">
<form> 
+ <input> 
+ <textarea>
Формы и элементы ввода.
Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер.
Пример — простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст:

<form action="ссылка_на_скрипт_обработки_формы"> 
	<input type="text" name="name">
	<input type="text" name="email">
	<textarea name="text">
		Текст сообщения
	</textarea>
	<input type="submit" value="Написать">
</form>
<span>
Определяет подстроку в строке.
Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.
Пример:
Изучение HTML, в большинстве случаев, не вызывает
<span>ни каких сложностей</span> у новичков.
<video>,
<audio>
Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.
Примеры:
<video src="rolik_chuma.mp4" controls></video> 
<audio src="muzichka.mp3" controls></audio>
Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
<div>
Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>.
Пример:
<div> 
	<div> 
		Текст во вложенном блоке 
	</div> 
</div>
Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>.
<iframe>
Данный тег загружает внешнюю страницу в документ.
Пример:
<iframe src="http://rtfm.org.ru"></iframe>

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

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

Например, не:

<video src="ролик чума.mp4" controls></video>

а:

<video src="rolik_chuma.mp4" controls></video>

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

Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному — а именно, печенькам.

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.

  1. Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
  2. Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
  3. Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

Премиум уроки от WebDesign Master

Другие уроки по теме «HTML и CSS»

Иллюстрированный самоучитель по созданию сайтов › Как создают веб-страницы › Простейшие средства создания веб-страниц [страница — 10] | Самоучители по работе в Internet

Простейшие средства создания веб-страниц

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

Как уже говорилось выше, веб-страницы кодируются на языке гипертекстовой разметки – HTML. Вообще говоря, чтобы написать HTML-файл, достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант – это редактор Notepad (Блокнот), входящий в стандартную поставку Windows (рис. 1.7). Собственно говоря, это именно то, что нужно, – простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit – для MS-DOS, vi или jed – для Linux, Kedit – для Linux/KDE и т. д.)


Рис. 1.7. Код HTML в текстовом редакторе Блокнот

Однако в очень простых текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть работы автоматизировать. Учитывая это желание, разработчики создали специализированные средства, призванные облегчить труд веб-программиста (как иногда называют тех, кто пишет код HTML, в отличие от веб-дизайнеров, которые придумывают внешний вид и иногда даже пытаются воплотить его, используя программы работы с графикой). Давайте сначала кратко опишем несколько простых программ, а потом остановимся на лучших из них.

Веб-редактор TextPad

Итак, начнем. Тем, кто предпочитает набирать код HTML вручную, но кому не хватает функциональности Блокнота и подобных ему программ, можно посоветовать программу под названием TextPad, которую можно загрузить, обратившись по адресу www.textpad.com. Эта программа по сути весьма похожа на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML – документа все теги автоматически подсвечиваются синим цветом, их атрибуты – темно-синим, а значения атрибутов – зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). Это очень удобно. К примеру, если автор случайно ошибется в имени тега или атрибута, то оно останется черным, и он сразу поймет, что здесь что-то не то. Правда, проверка не является “ интеллектуальной”: программа может спокойно “разрешить” приписать тегу какое-либо свойство, которого у него в принципе быть не может (спокойно подсвечивает абракадабру типа <BR ALIGN=»top»> или </BR>).

В отличие от Блокнота, TextPad – редактор многооконный. В нем можно открыть сразу несколько документов и работать, легко переключаясь между ними с помощью списка в левой части окна или вкладок в нижней части.

Веб-редактор TextPad позволяет автоматизировать набор многих тегов. Если не хочется набирать их вручную (многие этого не любят просто из-за того, что приходится переключаться на латинский шрифт), то обратите внимание на левую нижнюю часть окна программы. Там приведен список наиболее распространенных HTML-тегов, которые можно вставлять в свой основной текст двойным щелчком мыши. Правда, в списке указаны не сами теги, а их описание. Например, чтобы вставить тег <BR>, нужно выбрать из списка пункт Block › Break Line. Однако к этому быстро привыкаешь. Почти все пункты списка вставляют теги вместе с закрывающим парным тегом. Например, если выбрать пункт Block › Preformatted, в текст автоматически будут добавлены теги и <PRE> и </PRE>. Некоторые пункты добавляют сразу целые блоки-заготовки. Если, к примеру, выбрать пункт Table (Таблица), в текст будет вставлен такой код:

<TABLE ALIGN="left" BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%">

    <TR ALIGN="left" VALIGN="middle">

        <TH></TH>

        <TH>?</TH>

        <TR ALIGN="left" VALIGN=middle ">

<TD>? </TD>

<TD>? </TD>

</TABLE>

Title компьютер title — создание сайта в блокноте.

Не привычный заголовок для статьи? Речь пойдёт не о компьютерах, речь в статье пойдёт об элементарном HTML-сайте. Рассмотрим то, как с помощью блокнота, встроенного в стандартный пакет программ для Windows, создать простой сайт.

Создание WEB-сайта «Компьютер»

Создадим элементарный сайт на HTML про компьютеры. Пусть это будет WEB-сайт про персональный компьютер, на котором мы хотим рассказать о том, что такое Персональный Компьютер (ПК), создадим соответствующие страницы: главную, страницу о программном обеспечении и о компьютерных терминах. Начнём создавать сайт с самого начала, для этого нажимаем на меню компьютера «Пуск» — «Все программы» — «Стандартные» — «Блокнот», запускаем блокнот и начинаем разбираться с программированием сайта.

Самое первое в создании сайта

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

— это контейнер.

Закрывающий тег от открывающего отличается тем, что перед ним обязательно указывается прямой слэш, то есть знак «/». Все теги могут быть записаны как с помощью прописных, так и с помощью строчных букв.

Весь html-код страницы должен быть помещён внутри контейнера

Без указания этих тегов браузеры не смогут правильно интерпретировать содержимое страницы.

Далее что следует знать — web-страницы делятся на две логические части. Это заголовок и содержимое.

Заголовок страницы и TITLE

Есть такой контейнер

— это заголовок WEB-страницы. Заголовок содержит в себе название документа и некоторую справочную информацию о данной странице. Это может быть информация об используемой кодировке, указание не файл стилей, об используемом программном обеспечении сайта и так далее. Пока что эта информация нам не особо полезна.

Также есть специальный контейнер

— между этим открывающим и закрывающим тегом указывается название веб-страницы. Данное название отображается в строке заголовка браузера. Допусти, указав

<ТIТLE>Компьютер</ТIТLЕ>

<ТIТLE>Компьютер</ТIТLЕ>

мы увидим в заголовке в браузере название «Компьютер».

Итак, заголовок нашей страницы принимает такой вид:

<HEAD> <ТIТLE>Компьютер</ТIТLЕ> </HEAD>

<HEAD>

<ТIТLE>Компьютер</ТIТLЕ>

</HEAD>

Содержимое веб-страницы

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

Чтобы понимать принцип создания сайта с нуля в блокноте, поместит в основной контейнер текст:

<BODY> Компьютер — это электронное вычислительное устройство. </BODY>

<BODY>

Компьютер — это электронное вычислительное устройство.

</BODY>

Основа WEB-страницы

Итак, со структурой мы разобрались. Открываем блокнот и вносим туда следующий текст:

<HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> Компьютер — это электронное вычислительное устройство. </BODY> </HTML>

<HTML>

<HEAD>

<TITLE>Компьютер</TITLE>

</HEAD>

<BODY>

Компьютер — это электронное вычислительное устройство.

</BODY>

</HTML>

Чтобы было удобнее — для размещения сайта создать также отдельную папку, куда можно будет складывать все файлы сайта. Сохраняем в эту папку созданную в блокноте страницу с именем файла index.htm или index.html. Таким названием принято называть титульный файл сайта.

Чтобы увидеть созданную и сохранённую страницу сайта — открываем файл index.htm или index.html с помощью браузера. Создание других страниц и дальнейшую проработку сайта рассмотрим в следующих статьях.

базовых HTML-тегов | Infopeople

Первый тег в любом HTML-файле — это тег . Это сообщает веб-браузерам, что документ является файлом HTML.

Второй тег — это тег . Информация между тегами HEAD не отображается в окне браузера, но по-прежнему важна. Это называется мета информации. Самая важная метаинформация в теге HEAD — это тег </strong>. Все HTML-документы должны иметь заголовок.Как правило, заголовок должен отражать содержимое страницы (например, заголовок книги отражает содержимое книги), поэтому вы измените этот заголовок, чтобы лучше описать любой тип создаваемой вами веб-страницы. Заголовок документа появится в строке заголовка (в строке вверху окна браузера). Посмотрите прямо сейчас вверху окна браузера. Там написано «основные теги html». Текст заголовка не отображается в главном окне браузера (там, где находится текст, который вы сейчас читаете). </p> <p> Истинное содержание вашей веб-страницы начинается после тегов <strong> HTML </strong>, <strong> HEAD </strong> и <strong> TITLE </strong>.Он содержится внутри тегов <strong> <BODY> </strong> <strong> </BODY> </strong>. </p> <p> Итак, базовый скелет каждой веб-страницы выглядит следующим образом (теги всегда будут появляться в этом порядке), и у вас будет только по одному из этих тегов на вашей веб-странице): </p> <dl> <dd> <HTML> <br/> </dd> <dd> <HEAD> </dd> <dd> <НАЗВАНИЕ> </dd> <dd>


<ТЕЛО>

Обратите внимание, что вокруг всех тегов есть <>? Эти скобки сообщают браузеру, что текст внутри скобок следует читать как команду HTML.Посмотрите на и . Вы видите разницу? Первый, , не имеет / (косая черта). Это открывающий тег . У второго, , есть / (это называется косой чертой). Это закрывающий тег. Вам нужно быть очень осторожным при закрытии тегов HTML.

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

Теперь мы готовы начать создавать истинное содержимое веб-страницы, помещая информацию между тегами .Как правило, первая строка HTML-страницы представляет собой тег HEADING . Если вы думаете о ЗАГОЛОВКЕ как о части структуры документа, первый тег ЗАГОЛОВОК (

) — это римская цифра, а заголовок второго уровня (

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

< h2 > — заголовок самого большого размера, который вы обычно используете в начале документа.< H6 > является самым маленьким, с < h3 > до < H5 > разных размеров между ними.

Этот текст является примером заголовка h2.

вот HTML для этого:

Этот текст является примером заголовка h2

Этот текст является примером заголовка H6.

вот HTML для этого:

Этот текст является примером заголовка H6

Всегда не забывайте ЗАКРЫТЬ свои HTML-теги!

элементов стиля:

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

Теги форматирования страницы:

Эти теги влияют на расположение текста на странице:

— Абзац. Вставляет пустую строку (это как двойной интервал в текстовом редакторе).

Пробелы между этой строкой и строками сверху и снизу являются примерами тегов абзаца.


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


— разрыв строки. Не вставляет пробел между строками, просто заставляет разрыв между строками текста. СОВЕТ: , если вы хотите создать пустые строки на своей странице, используйте несколько тегов
, а не тег

, поскольку браузер видит только первый тег

и игнорирует другие, но видит и создает разрыв строки. для всех тегов
.
Пробел (или его отсутствие) между этой строкой и строкой над ней является примером разрыва строки. Тег
не требует закрывающего тега.

Теги стиля текста:

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

Два наиболее полезных тега стиля текста:

Bold
Пример полужирного текстового тега.
Курсив
Пример выделенного курсивом текстового тега в работе.

Помните: вы должны ЗАКРЫТЬ теги стиля текста так же, как закрываете теги заголовков.

Теперь приступим к созданию веб-страницы.

Чтобы начать вашу страницу:

  1. Откройте Блокнот (обычно находится с помощью кнопки Пуск в разделе Программы в папке Accessories ).Пользователи Mac: откройте TextEdit или SimpleText.
  2. Создайте свой «шаблон» (базовую страницу), который должен содержать теги, которые мы обсуждали в начале этого раздела, набрав следующие теги HTML, которые составляют структуру каждой веб-страницы.
Библиотека XYZ
<ТЕЛО>

Библиотека XYZ


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

СОВЕТ: Если вам удобно копировать и вставлять, вы можете скопировать и вставить теги в Блокнот. Для копирования и вставки на ПК:

  1. Возьмите мышь и поместите курсор в начало текста, щелкните левой кнопкой мыши, затем наведите указатель мыши на текст.Это выделяет текст.
  2. Отпустите левую кнопку мыши.
  3. Наведите курсор на выделенный текст, щелкните правой кнопкой мыши для выбора параметров и выберите Копировать или используйте сочетание клавиш CTRL + C, чтобы скопировать выделенный текст.
  4. Перейдите в открытое окно Блокнота и убедитесь, что курсор находится в окне Блокнота.
  5. Снова щелкните правой кнопкой мыши и выберите Вставить или используйте сочетание клавиш CTRL + V, чтобы вставить скопированный текст.
  6. Скопированный текст будет вставлен в окно Блокнота.

Для копирования и вставки на Mac:

  1. Возьмите мышь и поместите курсор в начало текста, нажмите и удерживайте кнопку мыши, затем наведите указатель мыши на текст. Это выделяет текст.
  2. Наведите курсор на выделенный текст, нажмите клавишу Control, щелкните и удерживайте указатель мыши на выделенном тексте и выберите Копировать из меню или используйте сочетание клавиш Apple + C, чтобы скопировать выделенный текст.
  3. Перейдите в окно TextEdit или SimpleText и щелкните внутри него, чтобы курсор оказался в нужном месте.
  4. Снова щелкните мышью, удерживая нажатой клавишу Control, и выберите Вставить или используйте сочетание клавиш Apple + V, чтобы вставить скопированный текст.

Примечание по использованию TextEdit (пользователи Mac OS X): Перед тем, как вы начнете создавать HTML-страницу с помощью TextEdit, измените настройки, перейдя в меню TextEdit и выбрав «Настройки». В разделе «Новые атрибуты документа» установите флажок Сделать обычный текст и Перенести текст . В разделе «Сохранение» снимите отметку с кнопки Добавить расширение «.txt» к текстовым файлам. .Затем нажмите красную кнопку в верхнем левом углу окна настроек, чтобы сохранить эти изменения. Если вы этого не сделаете, ваша страница станет RTF (Rich Text Format), что уничтожит все ваше HTML-кодирование.

Примечание о копировании и вставке: теги могут не быть выровнены по левому краю окна Блокнота после их вставки. Хотя это не повлияет на HTML, это может сбивать вас с толку, поэтому не стесняйтесь очистите теги и выровняйте их слева в окне Блокнота.

Далее: Сохранение работы

Работа с документами: MGA

О DoITHTML TutorialJavaScript TutorialXML TutorialPHP Tutorial

Глава 1 — Создание веб-страниц Глава 2 — Базовый макет документа Глава 3 — Основные стили документа Глава 4 — Форматирование текста Глава 5 — Графические изображения Глава 6 — Применение специальных стилей Глава 7 — Использование воспроизведения страниц Глава 8 Мультимедиа Глава 10 — Создание форм Глава 11 — Разработка веб-сайтов Приложение HTML / CSS

История использования и использование веб-страницОбслуживание веб-страниц Теги HTML и стили CSSРабота с документамиСоздание первой веб-страницы

Документы

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

   
   
       
           
           </code> здесь идет заголовок страницы <code>  
       
       
        *
        содержимое страницы идет сюда
        *
       
   
 

Листинг 1-9. Шаблон веб-страницы.

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

DTD

Все HTML-документы должны начинаться со строки пролога, показанной в Листинге 1-10.Эта первая строка — это определение типа документа с указанием стандарта кодирования W3C, используемого для страницы. В данном случае использовался стандарт HTML версии 5.

Листинг 1-10. DTD веб-страницы.

Тег

Тег

Тег контейнера окружает все кодирование HTML в документе. Этот тег указывает, что вложенная информация содержит HTML-код и должен отображаться как таковой в браузере.В соответствии со стандартами HTML открывающий тег включает атрибут lang, который указывает конкретный язык, используемый для содержимого: английский (en).

Листинг 1-11. Тег .

The

Tag

Тег контейнера включает в себя раздел заголовка документа HTML. Заголовок содержит название документа. (см. ниже) вместе с другой информацией, связанной с форматированием и индексированием документа.Для настоящих целей только заголовок появляется в заголовке. Другие теги, которые могут быть включены в раздел заголовка, обсуждаются по мере необходимости.

   
       </code> здесь идет заголовок страницы <code> </ title </code>
 <code> </head> </code>
 </pre>
         <p> <strong> Листинг 1-12. </strong> Тег <head>. </p>
     </blockquote>


  <h4><span class="ez-toc-section" id="The-2"> The </span></h4><code> <title> </code> Tag </h4> 
 <p> Тег контейнера <code> <title> </code> дает название документу.Этот тег содержит строку текста, которая появляется
    в строке заголовка браузера при открытии страницы. Тег <code> <title> </code> обеспечивает удобную идентификацию страницы.
    информация для человека, посещающего различные страницы вашего веб-сайта. Обратите внимание, что разделы <code> <head> </code> и <code> <title> </code>
        необходимы для соответствия стандартам HTML 5. </p>


      <h5><span class="ez-toc-section" id="_1-15"> Рисунок 1-15. </span></h5> 
             <p> Появление тега <code> <title> </code> в строке заголовка браузера.</p>
        

      <h4><span class="ez-toc-section" id="i-21"> Тег </span></h4><code> <body> </code> Тег </h4> 
     <p> Основная часть кода HTML-документа отображается в основном разделе, окруженном
         <code> <body> </code> тег контейнера. В браузере отображается только информация, содержащаяся внутри этого тега.
            окно. В простейшей форме основной раздел содержит простой текст, который отображается в
            стиль шрифта по умолчанию в окне браузера. Браузеры обычно отображают текст с помощью Times
            Новый римский шрифт размером примерно 1 em.</p>
     <p> Все веб-страницы начинаются с этой базовой структуры документа. Затем <code> <body> </code> документа расширяется текстом и другими элементами страницы.
        которые должны отображаться в окне браузера. Различное расположение этих элементов отображения, а также контроль над их
        внешний вид достигается заключением их в дополнительные HTML-теги. </p>

     <p> Для просмотра вашей работы не обязательно быть подключенным к Интернету или быть привязанным к серверу на
        Всемирная сеть.Вы можете делать всю свою работу на месте. Если у вас есть учетная запись у интернет-провайдера
        который предоставляет личные домашние каталоги, затем вы можете копировать документы в свой каталог для просмотра в Интернете.
        Для целей этого руководства вы можете создавать веб-страницы на жестком диске вашего компьютера на съемном большом пальце.
        диск или дискету и просматривайте страницы через браузер. </p>

     <p> Веб-страницы, созданные в этих руководствах, корректно работают в Internet Explorer и других браузерах, которые
        следуйте стандартам W3C.Вам следует загрузить последнюю версию используемого вами браузера. </p>

      <h4><span class="ez-toc-section" id="i-22"> Редактирование текста с помощью Блокнота ++ </span></h4> 
     Документы <p> HTML создаются с помощью текстовых редакторов или специальных редакторов HTML, предназначенных для этой цели. Для этих руководств достаточно
        используйте простой текстовый редактор, например Windows Notepad ++. После открытия этого приложения вы вводите текст и другие элементы страницы, которые вы
        хотите отобразить и окружить их HTML-тегами для макета и стилизации.</p>

    
          <h5><span class="ez-toc-section" id="_1-16"> Рисунок 1-16. </span></h5> 
                 <p> Приложение Notepad ++ с кодированием для простой веб-страницы. </p>
             <p> Текст и кодировка набираются в редакторе в свободном формате. То есть пробелы, табуляции, отступы и другие
        методы редактирования документа можно и нужно использовать, чтобы сделать документ доступным для чтения в редакторе. Это редактирование
        макеты игнорируются браузером, который обращает внимание только на теги HTML для макета страницы и форматирования
        инструкции.Приведенный выше код, например, правильно отобразился бы в браузере, если бы он был введен в
        редактор: </p>

     <blockquote>
         <p> <code> <! DOCTYPE html> <html lang = "en"> <head> <title> Веб-страница     

Отформатируйте эту строку текста.

Листинг 1.16. Последовательные пробелы, возврат строки и табуляция игнорируются.

Однако легче составлять и редактировать документ и понимать макет страницы, размещая его теги и текст в более читаемый формат.Позаботьтесь о выравнивании и отступах кода, чтобы он визуально представлял структуру контента. который отображается в браузере. Неряшливый код неизбежно приводит к ошибкам. Вы должны выбрать моноширинный шрифт, например Courier New для отображение вашего кода в Notepad ++. Моноширинный шрифт поможет вам лучше выровнять строки текста в редакторе.

Кодирование HTML - это требовательное искусство и наука. Точность кодирования имеет первостепенное значение, и вам нужно работать почти со 100% точность.Браузер не знает, что вы «хотите» сделать; он может делать только то, что вы ему прямо говорите. Сначала кодирование будет утомительно и отнимет много времени. По мере практики и приобретения опыта вы должны уметь вводить и редактировать HTML-код. не намного сложнее, чем обычный текст.

Сохранение HTML-документа

После завершения кодирования HTML-документа необходимо сохранить его, чтобы его можно было извлечь и отобразить внутри браузер. Документ можно сохранить на рабочем столе, на съемном носителе или в папке на жестком диске.

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

Рисунок 1-17.

Сохранение HTML-документа в Блокноте ++


Отображение HTML-документа

Сохраненный HTML-документ с расширением.html теперь готово для просмотра в вашем браузере. Вы можете открыть документ прямо в браузере, дважды щелкнув его значок, или вы можете открыть браузер и использовать меню «Файл» для перехода к правильный диск, папка и документ. Когда документ загружается в браузер, адрес появляется в Адресное поле вашего браузера указывает этот путь к документу.

Редактирование и отображение документов

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

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

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

Рисунок 1-18.

Редактор веб-страниц и браузер открываются на рабочем столе.


TOP | ДАЛЕЕ: Создание вашей первой веб-страницы

Как создать веб-страницу с помощью HTML-кодов | Малый бизнес

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

Напишите HTML-код

Откройте Блокнот, расположенный в меню «Пуск» в папке «Стандартные».

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

Нажмите несколько строк возврата и введите "" внизу документа.Если вы сделаете это сейчас, вы не забудете позже закрыть открывающий тег.

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

Введите строку тегов «

.«Между открывающим и закрывающим тегами введите заголовок своей веб-страницы. Например, личная веб-страница Джо Смита может содержать код« Добро пожаловать на домашнюю страницу Джо Смита ».

Введите тег «

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

Щелкните любую пустую строку над закрывающим тегом и введите тег «

», чтобы начать новый текстовый абзац.Щелкните между открывающим и закрывающим тегами

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

, иначе браузер не сможет переместить текст на новую строку.

Измените стиль шрифта вашего абзаца с помощью атрибутов тега «style» и «font-family» внутри тега

, используя формат

, где «name_of_font» - это конкретный шрифт, который должен отображаться в тексте этого абзаца.Например, если Джо Смит хотел изменить шрифт абзаца на Verdana, код выглядел бы как

.

Поместите текст между тегами и , если вы хотите выделить жирным шрифтом или курсивом.

Добавьте изображение на свою страницу с тегом. Это один из немногих HTML-тегов, для которого не требуется закрывающий тег.Внутри тега используйте атрибут «src», чтобы указать расположение файла изображения. Например, если Джо Смит хотел разместить свое изображение на своей веб-странице, он использовал бы этот код. Атрибут «alt» описывает изображение для людей с нарушениями зрения, использующих программы чтения с экрана для просмотра веб-страниц, или в случае, если изображение не загружается в окно браузера.

Добавьте гиперссылку на вашу страницу с тегом.Между тегами введите текст, который посетитель нажимает, чтобы перейти на эту страницу. Внутри открывающего тега используйте атрибут «href», чтобы указать URL-адрес, по которому вы переходите по ссылке при нажатии. Например, если Джо Смит хотел разместить ссылку на своей веб-странице на веб-страницу своей сестры Салли Смит, он использовал бы код Щелкните здесь, чтобы посетить страницу моей сестры Салли.

Сохранить файл в формате HTML

Щелкните меню «Файл» в Блокноте и выберите команду «Сохранить как».В раскрывающемся меню «Тип файла» выберите «Все файлы (. )».

Дайте своему файлу имя из одного слова в поле «Имя файла» и добавьте расширение «.HTM» в конец имени файла.

Нажмите кнопку «Сохранить», чтобы сохранить этот файл Блокнота как файл HTML.

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

Список литературы

Ресурсы

Подсказки

  • Тег

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

    для простого разрыва строки вместо разрыва абзаца.
  • Чтобы применить определенный стиль шрифта ко всей веб-странице вместо абзаца за абзацем, используйте тег
  • Файлы кода HTML требуют формата обычного текста и расширения файла.HTM для браузера, чтобы распознать и выполнить код. При вводе кода вручную важно использовать только текстовый редактор, поэтому Блокнот идеально подходит для этой задачи. Wordpad и Microsoft Word также могут действовать как текстовые редакторы, но вы должны не забыть сохранить файл кода HTML как «Только текст» в диалоговом окне «Сохранить как». Обе программы добавляют к файлу расширение «.TXT», но вы можете изменить расширение имени файла после этого на «.HTM», щелкнув правой кнопкой мыши значок файла в проводнике Windows.

Предупреждения

  • При указании шрифта в теге

    или теге