Создание документа html: Как создать файл html в блокноте (сделать)

Содержание

Как создать HTML документ — Программирование с нуля

Файл HTML — это простой текстовый файл, сохраненный с расширением .html или .htm (второй вариант уже практически не используется).

Из этой статьи вы узнаете, как легко создать HTML-документ (то есть веб-страницу). Чтобы начать создавать HTML-страницы, вам понадобятся только две вещи: простой текстовый редактор и веб-браузер.

Создание вашего первого HTML-документа

В конце урока вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1. Создание файла HTML

Откройте простой текстовый редактор или редактор кода и создайте новый файл.

Шаг 2. Введите код HTML

В окне редактора введите следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML document</title>
</head>
<body>
  <p>Hello World!<p>
</body>
</html>

Шаг 3. Сохраните HTML документ

блок 1

Сохраните данный файл как index.html на жестком диске. Важно указать расширение .html — некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как .txt. Если это произошло — переименуйте файл, удалите расширение .txt.

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

Разбор HTML кода

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

Объявление DOCTYPE — строка определяет тип документа HTML5.
Раздел декларативного заголовка (заключенный в элемент HEAD) — предоставляет информацию о документе, включая его заголовок, информацию о стиле и сценарии.
Тело документа (заключено в элемент BODY). Содержит фактическое содержимое документа, которое отображается в веб-браузере и отображается для пользователя.

Вы узнаете о различных элементах HTML-документа в наших следующих статьях.

HTML-теги и элементы

HTML код написан с использованием HTML-элементов, состоящих из тегов разметки. Эти теги разметки являются фундаментальной особенностью HTML. Каждый тег состоит из ключевого слова, заключенного в угловые скобки, например <html>, <head>, <body>, <title> и т.д.

HTML-теги обычно идут парами, такими как <html> и </html>. Первый тег в паре часто называют открывающим тегом (или начальным тегом), а второй тег называют закрывающим тегом (или конечным тегом).

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

<p>Это параграф текста.</p>

блок 3

Создание html-страницы | Nejalko.ru — информационные технологии, web-разработка и самообразование

Здравствуйте, уважаемые читатели Nejalko.ru!

Сегодня у нас важное дело: создание html-страницы в блокноте своими руками! Дело не хитрое, но ответственное, можно сказать, начало карьеры сайтостроителя, а это уже серьезно.

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

В любом удобном для Вас месте на жестком диске создаем папку с названием, например, «site«, внутри нее создаем еще одну папку с названием «www«. Можно заранее сделать отдельную папку, назвать ее «Сайтостроение» и в ней размещать все файлы, получаемые за время изучения html учебника. Папка «www» нужна нам для привыкания к правильной работе с сайтами. Дело в том, что на любом хостинге (там, где готовые сайты располагаются в интернете) Ваш сайт будет находится в папке именно с таким названием, поэтому доводим до автоматизма сразу, чтобы в будущем было проще.

Внутри папки «www» создаем текстовый документ с названием «index.html«, чтобы сделать расширение «.html» нужно у нового документа во время присвоения ему названия стереть расширение .txt и дописать .html, причем после «.html» не должно оставаться ни одного символа.

Если документ уже создан в виде index.txt, то его нужно, опять же, переименовать и дописать .html, удалив все остальное, что идет через точку или открыть файл, написать в нем код и выбрать в меню «Файл-Сохранить как» затем в нижнем выпадающем списке «Тип файла» выбрать пункт «Все файлы (*.*)«

И в поле «Имя файла» стереть «txt», а дописать вместо него «html»

Если Вам где-то встретится файл с расширением «htm» (что такое расширение файла), то этот файл создан также с использованием языка html, можете сами попробовать менять расширение файлов с «html» на «htm» и разницы в работе документа не увидите.

Открывать только что созданный файл можно через «Блокнот», а если Вы работаете в Total Commander, то выбирайте мышкой документ и нажимайте «F4», на мой взгляд еще удобнее блокнота.

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

1. Указываем декларацию	<!DOCTYPE html>
2. Открываем тег начала html-документа	<html>
3. Открываем головной тег	<head>
4. Указываем заголовок странички	<title>Первая страница сайта</title>
5. Закрываем головной тег	</head>
6. Открываем тег тела документа	<body>
7. Наполняем документ контентом (тем, что хотим поместить на страницу), например таким	Это первая страница сайта, на ней я буду пробовать свои силы в изучении HTML!
8. Закрываем тег тела документа	</body>
9. Не забываем тег окончания html-документа	</html>
10. Сохраняем нашу страничку комбинацией клавиш Ctrl+S
11. Кликаем двойным кликом по нашей страничке index.html и смотрим что у нас получилось

А получиться должно следующее:

Так выглядит код этой страницы:

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

Как мы видим, на странице выводится только то, что указано между тегами <body></body> и это единственный правильный вариант.

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

Давайте заключим наш текст в теги параграфа, то есть добавим тег ПЕРЕД словом «Это», а затем поставим тег ПОСЛЕ слова «HTML!» в коде страницы, сохраним и посмотрим, что из этого получится (сохранять можно комбинацией Ctrl+S).

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

Сохраните этот код, обновите Вашу html-страничку и увидите… именно, мешанину текста, потому что без тегов параграфов браузер не понимает, в каком место ему нужно что разделить или объединить.

У меня, первое время, в связи с данной особенностью языка HTML, возникал когнитивный диссонанс, как же так, в Word’ e нажимаешь «Enter» и создается новый абзац, а в html нажимаешь тот же «Enter», предложение в коде перескакивает как и нужно, но после сохранения на странице никаких изменений. Так вот, чтобы в html создать новый абзац, необходимо текст этого абзаца заключить в уже знакомые нам теги перед параграфом и в конце параграфа. Давайте прямо сейчас это и сделаем, каждое предложение заключим в теги параграфа, вот так:

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

Вот что у нас получилось после сохранения кода и обновления нашей маленькой html-странички «index.html»:

Согласитесь, так гораздо приятнее, читать уже можно и глаза «на лоб не лезут».

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

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

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

Напомню еще раз, теги , <img> — одиночные, то есть не требуют закрытия, а теги , <title></title>, <html></html>, <head></head> обязательно должны закрываться с помощью слеша «/» перед второй частью тега.

Надеюсь, все запомнили, насколько просто сделать страничку сайта на html? Замечательно, тогда двигаемся далее. В следующей статье поработаем с текстом в html.

Хорошего настроения, друзья!

Поделиться, если понравилось

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

Описание языка HTML :

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

Определение свойств WEB-страниц

Форматирование Web-страниц :

Создание абзацев

Создание заголовков

Стиль форматирования

Атрибуты шрифта

Гиперссылки

Вставка графических изображений

Создание карт-изображений

Задание бегущей строки

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

Создание таблиц

Создание фреймов

размещение web-страниц на сервере

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

HTML-документ,по сути,представляет собой обычный текстовый файл.Редактировать Web-страницы, опубликованные в сети Internet, может лишь тот, кто их создал, а не любой пользователь, поскольку каждая страница имеет свой уникальный адрес (URL) и существование двух разных страниц с одинаковым адресом исключено.
Чтобы получить простую Web-страницу необходимо создать HTML-документ.
Пример HTML-кода

&lt html&gt
&lt head&gt
&lt title&gt Простая Web-страница &lt/title&gt
&lt head&gt
&lt body&gt
Это простая Web-страница.
&lt/body&gt
&lt/html&gt
(если вы редактируете в блокноте то сохраняйте файл с расширением html или htm)
Исходный код любой Web-страницы можно получить в меню ВИД в броузере. HTML-страница содержит как обычный текст, так и специальные команды теги, заключенные в угловые скобки(&lt и &gt). Большинство тегов в языке HTML требуют соответствующую команду с символом &lt/…&gt для её закрытия. Комбинация из открывающегося и закрывающегося тега называется контейнером тегов Теги не чувсвительны к регистру.Это означает,что HTML-тег например &lt HTML&gt будет воспринят броузером так же как тег &l thtml&gt или &lt HtmL&gt.Кроме тегов в языке HTML используется специальный символ &-асперсант.Этот символ предназначен для вывода специальных символов и символов из расширенной кодовой таблицы.Например для вывода угловых скобок используется последовательность &amplt (для «&lt») и &ampgt(для «&gt»).

!!!Внимание если броузер не понимает тег то он его игнорирует(не исправляет и не выдает ошибку)

Структура документа и веб-сайта — Изучение веб-разработки

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

Необходимые знания:	Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача:	Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.

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

Заголовок (колонтитул): Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
Навигационное меню: Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
Основное содержимое: Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!
Боковая панель: Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
Нижний колонтитул (футер): Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.

«Типичный веб-сайт» может быть структурирован примерно так:

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы.

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

В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их

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

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.

Боковая панель: <aside>, обычно располагается внутри <main>.
Нижний колонтитул: <footer>.

Активное обучение: исследование кода для нашего примера

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Заголовок моей страницы</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    
    
  </head>

  <body>
    

    <header>
      <h2>Заголовок</h2>
    </header>

    <nav>
      <ul>
        <li><a href="#">Домашняя страница</a></li>
        <li><a href="#">Наша команда</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>

       

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    
    <main>

      
      <article>
        <h3>Заголовок статьи</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h4>Подраздел</h4>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h4>Ещё один подраздел</h4>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      
      <aside>
        <h3>Связанные темы</h3>

        <ul>
          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
          <li><a href="#">Даже на севере Англии</a></li>
          <li><a href="#">Здесь не перестаёт дождь</a></li>
          <li><a href="#">Лаааадно...</a></li>
        </ul>
      </aside>

    </main>

    

    <footer>
      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
    </footer>

  </body>
</html>

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

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

<main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице и размещайте прямо внутри <body>. В идеале он не должен быть вложен в другие элементы.
<article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
<section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или, наоборот, <section> на несколько <article>.
<aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
<header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
<nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
<footer> представляет собой группу конечного контента для страницы.

Несемантические обёртки

Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы <div> и . Вам следует использовать их с подходящим значением атрибута class или id, чтобы можно было легко получить к ним доступ.

 — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

<p>Пьяный Король возвратился в свою комнату в 01:00
и всё никак не мог войти в дверь: хмель мешал <span>[Примечание редактора: В этот момент
свет на сцене должен быть приглушён]</span>.</p>

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

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

<div>
  <h3>Корзина</h3>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Итого: $237.89</p>
</div>

Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

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

Перенос строки и горизонтальный разделитель

Два элемента, которые вы будете периодически использовать или захотите узнать о них:   и <hr>:

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

<p>Жила-была девчушка Нелл,<br>
Любившая писать HTML:<br>
Её семантика ужасна была — <br>
Она и сама прочитать ничего не могла.</p>

Без элемента   абзац разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

Жила-была девчушка Нелл,
Любившая писать HTML:
Её семантика ужасна была —
Она и сама прочитать ничего не могла.

<hr> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
<hr>
<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>

Будет выглядеть примерно так:

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

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: «Думаю, самое время вернуться к работе».

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

Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц.
Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?
Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting.
Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.

Самостоятельная работа: создайте свою собственную карту сайта

Применить наш метод к своему сайту. О чем он будет?

Примечание: Сохраните свой код, он вам ещё понадобится.

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

Using HTML sections and outlines: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.

Начало работы с HTML — Изучение веб-разработки

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

HTML (HyperText Markup Language — язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

Мой кот очень сердитый

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» (), например:

<p>Мой кот очень сердитый</p>

Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег <title> может быть записан как <title>, <TITLE>, <Title>, <TiTlE>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.

Давайте рассмотрим элемент «параграф» чуть подробнее:

Основными частями элемента являются:

Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
Закрывающий тег: выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
Содержимое: Как видно, в нашем случае содержимым является простой текст.
Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML элемента

Отредактируйте строку текста ниже в поле Ввод, обернув её тегами  и  (вставьте  перед строкой, чтобы указать начало элемента, и  после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

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

Вложенные элементы

Nesting_elements

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент  , который означает, что это слово крайне важно в данном контексте:

<p>Мой кот <strong>очень</strong>  сердитый.</p>

Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong, затем мы закрываем элемент strong первым, затем p. Следующее писать неправильно:

<p>Мой кот <strong>очень сердитый.</p></strong>

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

Блочные и строчные элементы

Block versus inline elements

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

Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент <a> (ссылка) или акцентирующие элементы вроде  или .

Посмотрите на следующий пример:

<em>Первый</em><em>второй</em><em>третий</em>

<p>четвёртый</p><p>пятый</p><p>шестой</p>

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

Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Пустые элементы

Empty elements

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

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементами.

У элементов также могут быть атрибуты, которые выглядят так:

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

Атрибут должен иметь:

Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
Имя атрибута и следующий за ним знак равенства.
Значение атрибута, заключённое в кавычки.

Активное изучение: Добавление атрибутов в элемент

Active learning: Adding attributes to an element

Возьмём для примера элемент <a> — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:

href: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href="https://www.mozilla.org/".
title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title="The Mozilla homepage". Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.
target: Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <a>затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

Булевые атрибуты

Boolean attributes

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

<input type="text" disabled="disabled">

Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

<input type="text" disabled>

<input type="text">

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

Omitting quotes around attribute values

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

<a href=https://www.mozilla.org/>любимый веб-сайт</a>

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!

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

Одинарные или двойные кавычки?

Single or double quotes?

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

<a href="http://www.example.com">Ссылка к моему примеру.</a>

<a href='http://www.example.com'>Ссылка к моему примеру.</a>

Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

<a href="http://www.example.com'>Ссылка к моему примеру.</a>

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

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>

Поэтому вам нужно сделать так:

<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>

Ниже дан пример оборачивания основных, самостоятельных HTML элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

Вот что мы имеем:

<!DOCTYPE html>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <!DOCTYPE html> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
<html></html>: Элемент <html> содержит в себе всё содержимое на всей странице, и иногда его называют «корневой элемент».
<head></head>: Элемент <head>. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
<meta charset="utf-8">: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
<title></title>: Элемент <title>. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
<body></body>: Элемент <body>. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

Активное изучение: Добавление элементов в ваш HTML-документ

Active learning: Adding some features to an HTML document

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

Скопировать пример HTML-страницы, расположенный выше.
Создать новый файл в текстовом редакторе.
Вставить код в ваш новый текстовый файл.
Сохранить файл как index.html.

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

Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента <body>. Попробуйте сделать следующее:

Добавьте заголовок страницы сразу за открывающим тегом <body>. Текст должен находиться между открывающим тегом <h2> и закрывающим </h2> .
Напишите в параграфе о чём-нибудь, что кажется вам интересным.
Выделите важные слова, обернув их в открывающий тег  и закрывающий 
Добавьте ссылку на свой абзац так, как объяснено ранее в статье.
Добавьте изображение в свой документ под абзацем, как объяснено ранее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!

Если вы запутались, всегда можно запустить пример сначала кнопкой Сбросить. Сдаётесь — посмотрите ответ, нажав на Показать решение.

Пробелы в HTML

Whitespace in HTML

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

<p>Собаки глупы.</p>

<p>Собаки
         глупы.</p>

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

В HTML символы <, >, ", ' и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.

Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).

Буквенный символ	Символьный эквивалент
<	<
>	>
«	"
‘	'
&	&

В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:

<p>В HTML вы определяете параграф элементом <p>.</p>

<p>В HTML вы определяете параграф элементом &lt;p&gt;.</p>

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

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

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры , например:

<p> Меня нет в комментариях( </p>

Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.

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

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.

Создание простой HTML-страницы — Уроки HTML, CSS

Создание простой HTML-страницы

Создать несложную HTML-страницу можно в обычном блокноте (Пуск > Все программмы > Стандартные > Блокнот).

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

1) HTML-документ, как правило, должен заключаться в тег <html>. Закрывающий тег </html> обязателен:

<html>
<!-- Сам документ -->
</html>

2) HTML-документ делится на две части: голову документа <head> и тело <body>. Для них также обязательны закрывающие теги: </head> и </body> соответственно.

Начнем с <head>. Он записывается сразу после тега <html> и в нем заключена важная информация о нашем HTML-документе: название страницы, мета-теги, и т.д. Сразу за <head> следует тег <body>, в котором будет само содержание сайта и страницы: текст, ссылки, картинки и т.д.

<html>
<head>
<!-- Информация о HTML-документе -->
</head>

<body>
<!-- Содержание страницы -->
</body>
</html>

3) Для начала необходимо указать всю важную информацию о странице, прежде чем приступать к ее наполнениюhttps://nanoclinic.com.ua імплантація зубів ціна якісна імплантація зубів. . Во-первых, укажем название сайта с помощью тега <title>. Закрывающий тег </title> обязателен:

<html>
	<head>
<title>Название сайта</title>
	</head>

<body>
<!-- Содержание страницы -->
</body>
</html>

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

<html>
	<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	</head>

<body>
<!-- Содержание страницы -->
</body>
</html>

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

<html>
	<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="/tutorials/style.css" type="text/css" media="screen">
	</head>

<body>
<!-- Содержание страницы -->
</body>
</html>

В случае, если вы используете не отдельный файл /tutorials/style.css, а хотите указать CSS прямо в HTML-коде, то можно использовать тег <style>. Выглядеть код будет следующим образом:

<html>
	<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css>
/* Здесь будет ваш стиль CSS */
</style>
	</head>

<body>
<!-- Содержание страницы -->
</body>
</html>

Основную часть информации между тегами мы уже указали http://technology.kh.ua/ формат а0 в харькове — печать чертежей формата в харькове. . Вы можете дополнительно добавить другие мета-теги (вроде описание сайта, ключевых слов и т.д.)

4) Теперь можно приступить к наполнению. Разместим на странице текст, изображение и превью фотографии.
Пишем код для изображения:

<html>
	<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="/tutorials/style.css" type="text/css" media="screen">
	</head>

	<body>
<img src="" align="left">
	</body>
</html>

photo — это название изображения. .jpg — тип изображения.
align=»left» означает, что текст будет обтекать изображение по левому краю.

5) Добавим текст. Он будет располагаться между тегами и , которые определяют абзацы.

<html>
	<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="/tutorials/style.css" type="text/css" media="screen">
	</head>

	<body>
<img src="" align="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur quis elit a ante commodo volutpat.
Pellentesque nisl lacus, tincidunt sit amet adipiscing id, suscipit vel dui.
Duis sit amet justo in mi scelerisque aliquet.
Fusce posuere tincidunt ultrices.<p>
	</body>
</html>

6) Следующий шаг — добавление превью:

<html>
	<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="/tutorials/style.css" type="text/css" media="screen">
	</head>

	<body>
<img src="" align="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur quis elit a ante commodo volutpat.
Pellentesque nisl lacus, tincidunt sit amet adipiscing id, suscipit vel dui.
Duis sit amet justo in mi scelerisque aliquet.
Fusce posuere tincidunt ultrices.<p>
<a href=""><img src=""></a>
	</body>
</html>

7) Сохраните файл под именем index.html. Вы можете дать другое название этому файлу, главное чтобы оно было с разрешением .html. Это важный момент.

8) После того, как вы заполнили страницу содержанием, можно приступить к её оформлению — созданию стиля CSS. Создайте новый файл (в том же блокноте). Пишем код:

body {
	background-color: #FFFFFF; /* Цвет фона */
	font-family: Arial, Sans-Serif; /* Тип шрифта */
	color: #333333; /* Цвет текста */
	font-size: 11px; /* Размер текста в пикселях */
}

Сохраните этот файл под именем /tutorials/style.css. Теперь откройте файл index.html в своем браузере и посмотрите результат.

Всё вышеописанное является лишь грубым примером построения простой веб-страницы и уж точно не является пределом возможностей HTML.

Автор урока: Thea
Перепечатка разрешена только с указанием ссылки на источник.

3. Создание html — документов ,Web-страницы

Создание своей собственной Web-страницы сводится к созданию файла в формате языка гипертекстовой разметки (HTML), который предназначен для форматирования текста, графики и других объектов с помощью специальных команд — тегов (tags).

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

HTML-тэги могут быть условно разделены на две категории:

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

Основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-браузерах различных типов и на различных платформах.

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

3.1. Классификация html-редакторов.

Все имеющиеся на рынке программного обеспечения HTML-редакторы можно разделить на две большие группы:

программы, имеющие в своем составе визуальные редакторы(design-basededitor) — средства, которые автоматически формируют необходимыйHTML-код, позволяя разрабатывать Web-страницы в режиме WYSIWYG (WhatYouSeeIsWhatYouGet — что вижу, то и получаю). В разных источниках их называют визуальными конструкторами или просто конструкторами, а также WYSIWYG-редакторами.

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

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

текстовые программы-редакторы (code-basededitors), которые предоставляют редактор и вспомогательные средства для автоматизации написания кода.

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

Есть и компромиссные решения: большинство мощных редакторов, обладающих визуальными конструкторами (MicrosoftFrontPage, MacromediaDreamveaWer, AdobeGolive), имеют не только визуальные средства, но и весьма развитые редакторы кода. Например, в последней версии FrontPage 2003 реализован даже сдвоенный режим, в котором пользователь может наблюдать, как действия визуального редактора приводят к изменению кода.

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

Создание и редактирование HTML-документа с помощью Microsoft Word 2002

В ЭТОЙ ЗАДАЧЕ

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

Создайте свой HTML-документ

Используйте один из следующих двух методов для создания нового HTML-документа.

Метод 1

Запустите Microsoft Word.
В области задач «Новый документ» щелкните «Пустая веб-страница» в разделе «Создать».
В меню «Файл» выберите «Сохранить».
ПРИМЕЧАНИЕ. В поле Сохранить как тип по умолчанию используется веб-страница (*.htm; * .html).
В поле «Имя файла» введите имя файла для документа и нажмите «Сохранить».

Метод 2

Запустите Microsoft Word.
Создайте новый пустой документ.
В меню «Файл» выберите «Сохранить как веб-страницу».
В поле «Имя файла» введите имя файла для документа и нажмите «Сохранить».

Добавьте текст и гиперссылки в свой HTML-документ

Откройте HTML-документ, который вы создали ранее в этой статье. Для этого выполните следующие действия:
1. В меню «Файл» нажмите «Открыть».
2. Перейдите в папку, в которую вы сохранили свою статью, в разделе «Создание HTML-документа» этой статьи.
3. Выберите файл и нажмите «Открыть».
Введите в документ следующий текст:
Вы можете использовать Microsoft Word для создания HTML-документов так же легко, как и обычные Word-документы.
Чтобы создать гиперссылку, выберите в набранном тексте слова «Microsoft Word».
В меню «Вставка» щелкните «Гиперссылка».
В диалоговом окне «Вставить гиперссылку» введите http://www.microsoft.com/word в поле «Адрес» и нажмите кнопку «ОК».
Сохраните изменения в документе.

Добавить изображение в HTML-документ

Поместите точку вставки в то место, где вы хотите разместить изображение в документе.
В меню «Вставка» наведите указатель на «Рисунок» и затем нажмите «Клипарт».
На панели задач «Вставить клипArt» щелкните «Поиск».
ПРИМЕЧАНИЕ. Если вы нажмете «Поиск», не вводя ничего в поле «Текст поиска», в результате поиска будут отображены все изображения, доступные в настоящее время в вашей системе.
В разделе «Результаты» выберите изображение, которое вы хотите вставить на страницу.
Сохраните изменения и закройте документ.

Открыть HTML-документ в Word

Выполните одно из следующих действий.

Если панель задач «Новый документ» по-прежнему отображается:

В области задач «Новый документ» выберите документ в группе . Откройте документ . Это открывает документ напрямую.

-или-

Если панель задач «Новый документ» не отображается:

В меню «Файл» нажмите «Открыть».
В диалоговом окне «Открыть» найдите созданный ранее документ HTML и выберите его.
Щелкните «Открыть».

ССЫЛКИ

Для получения дополнительных сведений о поддержке HTML в Word 2002 выполните следующие действия:

Откройте Microsoft Word 2002.
В меню «Справка» щелкните «Справка Microsoft Word».
Щелкните вкладку Мастер ответов.
Введите HTML в Что бы вы хотели сделать? и нажмите кнопку «Поиск».
Будут отображены связанные темы. Щелкните любой элемент, чтобы отобразить информацию.

Сводка

Как создать HTML-страницу

Файл HTML — это просто текстовый файл, сохраненный с расширением.html или .htm расширение.

Начало работы

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

Итак, приступим к созданию вашей первой HTML-страницы.

Создание вашего первого HTML-документа

Давайте рассмотрим следующие шаги. В конце этого руководства вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1. Создание файла HTML

Откройте на своем компьютере текстовый редактор и создайте новый файл.

Совет: Мы предлагаем вам использовать Блокнот (в Windows), TextEdit (в Mac) или какой-нибудь другой простой текстовый редактор для этого; не используйте Word или WordPad! Как только вы поймете основные принципы, вы можете переключиться на более продвинутые инструменты, такие как Adobe Dreamweaver.

Шаг 2. Введите HTML-код

Начните с пустого окна и введите следующий код:

Простой HTML-документ Привет, мир!

Шаг 3: Сохранение файла

Теперь сохраните файл на рабочем столе как «myfirstpage.html «.

Примечание: Важно указать расширение .html — в противном случае некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как .txt .

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

Расшифровка кода

Вы можете подумать, что это за код. Что ж, давайте выясним.

Первая строка — это объявление типа документа. Он сообщает веб-браузеру, что этот документ является документом HTML5. Регистр не учитывается.
Элемент — это контейнер для тегов, который предоставляет информацию о документе, например, тег </code> определяет заголовок документа.</li><li> Элемент <code><body> </code> содержит фактическое содержимое документа (абзацы, ссылки, изображения, таблицы и т. Д.), Которое отображается в веб-браузере и отображается для пользователя.</li></ul> Вы узнаете о различных элементах HTML подробно в следующих главах. А пока просто сосредоточьтесь на базовой структуре HTML-документа. Примечание: Объявление DOCTYPE появляется вверху веб-страницы перед всеми другими элементами; однако само объявление doctype не является тегом HTML.Каждый HTML-документ требует объявления типа документа, чтобы гарантировать правильное отображение ваших страниц. Совет: Теги <code><html> </code>, <code><head> </code> и <code><body> </code> составляют базовый каркас каждой веб-страницы. Содержимое внутри тегов <code><head> </code> и <code></head> </code> невидимо для пользователей за одним исключением: текст между тегами <code><title> </code> и <code> , который отображается как заголовок на вкладке браузера.
Теги и элементы HTML
HTML написан в виде HTML-элементов, состоящих из тегов разметки. Эти теги разметки являются фундаментальной характеристикой HTML. Каждый тег разметки состоит из ключевого слова, заключенного в угловые скобки, например , , , </code>, <code> </code> и т. Д. HTML-теги обычно идут парами, например <code><html> </code> и <code></html> </code>. Первый тег в паре часто называется открывающим тегом (или начальным тегом), а второй тег называется закрывающим тегом (или конечным тегом). Открывающий тег и закрывающий теги идентичны, за исключением косой черты (<code>/</code>) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда была завершена. Между начальным и конечным тегами вы можете разместить соответствующее содержимое.Например, абзац, представленный элементом <code> p </code>, будет записан как:<pre> <code> Это абзац. <! - Абзац с вложенным элементом -> Это еще один абзац. </code> </pre> Вы узнаете о различных элементах HTML в следующей главе.<h2> 1. Создание вашей первой страницы </h2><h3> Глава 1. Создание вашей первой страницы </h3> Каждый веб-сайт представляет собой набор веб-страниц, поэтому неудивительно, что ваше путешествие по созданию полноценного сайта начинается с здесь , с написание одной веб-страницы. Технически веб-страница — это особый тип документа, написанный на компьютерном языке, который называется HTML (это сокращение от HyperText Markup Language).Веб-страницы написаны для веб-браузеров — таких программ, как Internet Explorer, Google Chrome и Safari. У этих браузеров есть простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, чтобы вы могли его прочитать. Эта глава познакомит вас с HTML. Вы увидите, как работает простая веб-страница, и узнаете, как создать свою собственную. На данный момент вы будете работать с веб-страницами, хранящимися на вашем компьютере, которые будут видны только вам. Позже, в главе 9, вы научитесь размещать веб-страницы в Интернете, чтобы их мог видеть любой, у кого есть подключение к Интернету.<h3> HTML: язык Интернета </h3> HTML — самый важный стандарт в веб-дизайне, и единственный, который абсолютно требует , если вы планируете создать веб-страницу. Каждая веб-страница написана в HTML. Неважно, содержит ли ваша страница серию записей в блоге, дюжину изображений вашего домашнего лемура или сильно отформатированный сценарий — скорее всего, если вы просматриваете его в браузере, это HTML-страница. HTML играет ключевую роль на веб-страницах: он сообщает браузерам, как отображать содержимое страницы, используя специальные инструкции, называемые тегами , которые сообщают браузеру, когда начинать абзац, выделять слово курсивом или отображать изображение.Чтобы создавать свои собственные веб-страницы, вам нужно научиться использовать это семейство тегов. HTML — настолько важный стандарт, что вы потратите большую часть этой книги на изучение его функций, излишеств и случайных недостатков. Каждая создаваемая вами веб-страница будет настоящим HTML-документом.<h4> Примечание </h4> Стандарт HTML не имеет ничего общего с тем, как веб-браузер находит страницы в Интернете. Эта задача возложена на другой стандарт, называемый HTTP (протокол передачи гипертекста), который представляет собой коммуникационную технологию, позволяющую двум компьютерам обмениваться данными через Интернет.Если использовать аналогию с телефонным разговором, то телефонные провода представляют собой протокол HTTP, а пикантные сплетни, которыми вы обмениваетесь с тетей Мартой, являются документами HTML.<h4> Взлом Открытие файла HTML </h4> Внутри HTML-страница на самом деле не более чем простой текстовый файл. Это означает, что исходный код каждой создаваемой веб-страницы будет полностью состоять из букв, цифр и нескольких специальных символов (например, пробелов, знаков препинания и всего остального, что вы можете заметить на клавиатуре).На рис. 1.1 представлен анализ обычного (и очень простого) HTML-документа. Вот один из секретов написания веб-страниц: вам не нужен действующий веб-сайт, чтобы начать создавать свои собственные веб-страницы. Это потому, что вы можете легко создавать и тестировать страницы, используя только свой компьютер. Фактически, вам даже не нужно подключение к Интернету. Единственные инструменты, которые вам понадобятся, — это базовый текстовый редактор и стандартный веб-браузер. Текстовый редактор позволяет вам создавать или редактировать HTML-файл (в окне, подобном тому, которое вы видите на Рисунке 1-1 внизу).Даже многие профессиональные веб-дизайнеры придерживаются простых инструментов для редактирования текста. Существует множество более изящных инструментов редактирования, разработанных специально для редактирования веб-сайтов, но на самом деле вам не понадобится ни одного из них. И если вы начнете использовать их слишком рано, вы, скорее всего, в конечном итоге утонете в море дополнительных изысков и функций, прежде чем действительно поймете, как работает HTML. Рисунок 1-1. Каждый документ HTML на самом деле является обычным текстовым файлом. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование.Внизу: но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации внутри угловых скобок <code> <> </code>. Эти HTML-теги передают информацию о структуре и форматировании документа. Тип используемого вами текстового редактора зависит от операционной системы вашего компьютера:<ul><li> Если у вас компьютер Windows, вы используете простой редактор Notepad. Переходим к следующему разделу.</li><li> Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.</li></ul> Поклонникам Mac необходимо настроить способ работы TextEdit, потому что программа имеет «представление HTML», которое скрывает теги в файле HTML и вместо этого показывает отформатированную страницу. Такое поведение направлено на упрощение жизни новичков, но представляет серьезную опасность для всех, кто хочет написать настоящую веб-страницу. Чтобы избежать путаницы и убедиться, что вы пишете настоящий, необработанный HTML, вам необходимо отключить просмотр HTML.Вот как это сделать:<ol type="1"><li> Выберите TextEdit → Настройки . Откроется окно с вкладками для параметров TextEdit (рис. 1-2). Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).</li><li> Щелкните «Новый документ», а затем в разделе «Формат» выберите «Обычный текст». Это указывает TextEdit начать вас с обычного неформатированного текста и отказаться от панели инструментов форматирования и линейки, которые в противном случае появлялись бы на экране, которые не имеют отношения к созданию файлов HTML.</li><li> Нажмите «Открыть и сохранить» и включите первый параметр «Отображать файлы HTML как HTML-код вместо форматированного текста». Это указывает TextEdit, чтобы вы могли видеть (и редактировать) реальную разметку HTML, теги и все остальное, а не отформатированную версию страницы, как она будет отображаться в веб-браузере.</li><li> Закройте окно настроек, а затем закройте TextEdit . Теперь, когда вы в следующий раз запустите TextEdit, вы начнете в режиме обычного текста, который использует каждый уважающий себя веб-разработчик.</li></ol> Как вы, несомненно, знаете, веб-браузер — это программа, которая позволяет вам переходить и отображать веб-страницы. Без браузеров Интернет все еще существовал бы, но вы не смогли бы его увидеть. Работа браузера на удивление проста — на самом деле большая часть его работы состоит из двух задач. Во-первых, он запрашивает веб-страницы, что происходит, когда вы вводите адрес веб-сайта (например, www.google.com) или щелкаете ссылку на веб-странице. Браузер отправляет этот запрос на удаленный компьютер, называемый веб-сервером .Сервер, как правило, намного мощнее домашнего компьютера, поскольку ему необходимо одновременно обрабатывать несколько запросов браузера. Сервер принимает во внимание эти запросы и отправляет обратно содержимое желаемых веб-страниц. Когда браузер получает этот контент, он задействует свой второй навык, и отображает или рисует веб-страницу. Технически это означает, что браузер преобразует простой текст, который он получает от сервера, в отображаемый документ на основе инструкций по форматированию, встроенных в страницу.Конечным результатом является страница с богатой графикой, с разными шрифтами, цветами и ссылками. Рисунок 1-3 иллюстрирует этот процесс. Рисунок 1-3. Веб-браузер предназначен для очень хороших двух вещей: связываться с удаленными компьютерами, чтобы запросить веб-страницы, а затем отображать эти страницы на вашем компьютере. Хотя вы обычно запрашиваете в браузере поиск страниц из Интернета, вы также можете использовать его для просмотра веб-страниц, хранящихся на вашем компьютере, что особенно удобно, когда вы тренируете свои навыки работы с HTML.Фактически, ваш компьютер уже знает, что файлы, заканчивающиеся на .htm или .html , содержат содержимое веб-страниц. Поэтому, если вы дважды щелкните один из этих файлов, ваш компьютер автоматически запустит веб-браузер. (Вы можете получить тот же результат, перетащив файл веб-страницы в уже открытое окно браузера.) Хотя обычным людям нужен только один веб-браузер, это хорошая идея для обучающихся веб-разработчиков (например, себя), чтобы ознакомиться с наиболее распространенными браузерами (см. рис. 1-4).Это потому, что при разработке своего веб-сайта вам необходимо подготовиться к работе с широкой аудиторией людей с разными браузерами. Чтобы ваши красивые страницы не выглядели странными, когда на них смотрели другие люди, вам следует протестировать свой сайт с помощью различных браузеров, различных размеров экрана и операционных систем. В следующем списке описаны самые популярные браузеры на сегодняшний день:<ul><li> Google Chrome — нынешний король веб-браузеров, несмотря на то, что это самый новый ребенок на рынке.Технически подкованным поклонникам Интернета нравятся его функции, такие как закладки, которые можно синхронизировать на разных компьютерах, и его невероятная скорость. Загрузите с Google Chrome на www.google.com/chrome.</li><li> Internet Explorer — это самый долговечный браузер и официальный стандарт во многих корпоративных и правительственных средах. Это также браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными. Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie. Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый из основных браузеров, варьируется в зависимости от того, какие сайты вы просматриваете и как вы подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Текущую статистику использования браузера см. Http: // tinyurl.com / stats-browsers.)</li><li> Firefox зародился как современный ответ Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками , крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление веб-почты и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно обновляет Firefox. Попробуйте Firefox на www.mozilla.org / firefox.</li><li> Safari — это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя его мобильная версия ведет себя немного иначе). Прекрасные люди в Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple. Откройте Safari по адресу www.apple.com/safari.</li><li> Opera — это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от огромных размеров и бессмысленных излишеств Internet Explorer.В течение многих лет Opera сдерживала неприятная деталь: если вы хотели версию без рекламы, вам нужно было заплатить. Сегодня Opera бесплатна и не содержит рекламы, как и другие браузеры из этого списка. У него немного, но преданных последователей, но он занимает пятое место в рейтинге веб-браузеров. Ознакомьтесь с Opera на сайте www.opera.com.</li></ul><h3> Учебное пособие: создание файла HTML </h3> Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1-1.<h4> Совет </h4> Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с названием Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно). Готовы начать? Вот что нужно сделать:<ol type="1"><li> Запустите текстовый редактор . На компьютере с Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот» и щелкните появившийся значок Блокнота. На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit. Когда вы загружаете текстовый редактор, он запускает вас с новым пустым документом, а это именно то, что вам нужно.</li><li> Начните писать свой HTML-код . Эта задача немного сложна, потому что вы еще не знакомы со стандартом HTML. Погодите — до конца этой главы помощь будет готова. На данный момент вы можете использовать следующий очень простой фрагмент HTML.Просто введите его в том виде, в каком он выглядит: текст, косые черты, заостренные скобки и все остальное:<pre> <h2> United Popsicle Workers Union </h2> Мы боремся за ваши права. </pre> Технически, в этом двухстрочном документе отсутствуют некоторые структурные детали, которые должны иметь уважаемые веб-страницы. Однако любой браузер может прочитать этот фрагмент HTML и правильно интерпретировать то, что вы хотите: две строки форматированного текста, показанные на рис. 1-1 вверху.</li><li> Когда вы закончите свою веб-страницу, выберите Файл → Сохранить . При этом открывается окно «Сохранить» или «Сохранить как», в котором вы вводите сведения о своем новом файле (рис. 1-5). Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.</li><li> Выберите место для сохранения файла и дайте ему имя popsicles.htm . Если вы не знаете, где хранить файл, пока можете сохранить его прямо на рабочем столе. При названии файла убедитесь, что вы добавили расширение .htm или .html в конце имени файла. Например, используя имя popsicles.htm или popsicles.html , вы гарантируете, что ваш компьютер распознает ваш документ как файл HTML. Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы — текстовые файлы, содержащие HTML-контент.<h4> Примечание </h4> С технической точки зрения вы можете использовать любое расширение файла, какое захотите.Однако использование .htm или .html избавляет от путаницы (вы сразу понимаете, что файл является веб-страницей) и помогает избежать распространенных проблем. Например, использование расширения файла .htm или .html гарантирует, что когда вы дважды щелкните имя файла, ваш компьютер будет знать, что нужно открыть его в веб-браузере, а не в какой-либо другой программе. Также важно использовать расширение .htm или .html, если вы планируете загружать файлы на веб-сервер; колючие серверы могут отказываться выдавать страницы с нестандартными расширениями файлов.</li><li> При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 . Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в Блокноте вам нужно выбрать UTF-8 в списке «Кодировка» в нижней части окна «Сохранить как». Ваша веб-страница будет работать, даже если вы не сделаете этого шага, но это гарантирует, что вы не столкнетесь с проблемами, если вы используете специальные символы или другой язык на своей странице.</li><li> Нажмите «Сохранить», чтобы сделать его официальным . Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или .html вместо .txt , стандартного текстового файла; нажмите «Использовать .htm». В Блокноте такой шаг не требуется. Однако вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).</li><li> Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) . Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла.Или вы можете перетащить файл веб-страницы в открытое окно браузера. Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если вы видите в адресе «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите просто обычный локальный адрес файла (в середине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).</li><li> По окончании редактирования закройте текстовый редактор . В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.</li></ol><h4> Подсказка </h4> Вот уловка, которая поможет вам открыть HTML-файлы в спешке. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac нажмите, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы открыть новое окно текстового редактора и открыть HTML-файл одним махом. Если вы оставите окно веб-браузера открытым во время редактирования HTML-файла в текстовом редакторе, браузер сохранит старую версию вашего файла. Чтобы увидеть последние изменения, снова сохраните текстовый файл (выберите «Файл» → «Сохранить»), а затем обновите страницу в браузере (обычно это так же просто, как щелкнуть страницу правой кнопкой мыши и выбрать «Обновить» или «Обновить»).<h3> Просмотр HTML действующей веб-страницы </h3> Большинство текстовых редакторов не позволяют открывать веб-страницы в Интернете.Однако веб-браузеры и дают вам возможность заглянуть в необработанный HTML-код, который скрывается за любой веб-страницей. Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После того, как вы перейдете на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы. Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы».<h4> Совет </h4> Firefox имеет удобную функцию, которая позволяет вам сосредоточиться только на части HTML на сложной веб-странице. Просто выделите интересующий вас текст на самой странице, щелкните его правой кнопкой мыши и выберите «Просмотреть источник выделения». Большинство веб-страниц значительно сложнее, чем пример popsicles.htm , показанный на рис. 1-1, поэтому вам нужно пройти через гораздо больше HTML-тегов, когда вы смотрите на разметку веб-страницы. Вы также, вероятно, найдете густую чащу кода JavaScript, набитого в верхней части страницы, лишенного всех интервалов и почти невозможного для чтения. Но даже если разметка выглядит тарабарщиной, не паникуйте. К тому времени, когда вы дочитаете эту книгу, вы сможете просмотреть груду HTML-кода, чтобы найти интересующие вас фрагменты.Фактически, профессиональные веб-разработчики часто используют технику просмотра исходного кода, чтобы проверить работу своих конкурентов. Теперь, когда вы знаете, как просматривать существующие файлы HTML и создавать свои собственные, следующим шагом будет понимание того, что находится внутри среднего файла HTML. Все вращается вокруг одной концепции — тегов . HTML-теги — это инструкции по форматированию, которые сообщают браузеру, как преобразовать обычный текст во что-то визуально привлекательное. Если бы вы убрали все теги из HTML-документа, полученная страница состояла бы только из простого неформатированного текста. Тег можно узнать по угловым скобкам, двум специальным символам, которые выглядят следующим образом: <code> <> </code>. При создании тега вы вводите код HTML в скобках. Этот код предназначен только для обозревателя; веб-посетители никогда его не видят (если только они не используют команду «Просмотр исходного кода» для просмотра HTML-кода). По сути, код — это инструкция, которая передает браузеру информацию о том, как отформатировать следующий текст. Например, один простой тег — это тег <code> </code>, который означает «полужирный» (по соглашению имена тегов обычно пишутся в нижнем регистре).Когда браузер встречает этот тег, он включает полужирное форматирование, которое влияет на весь текст, следующий за тегом. Вот пример:<pre> Этот текст не полужирный. Этот текст выделен жирным шрифтом. </pre> Сам по себе тег <code> </code> недостаточно хорош; он известен как начальный тег , что означает, что он включает некоторый эффект (в данном случае жирный шрифт). Вы соединяете большинство начальных тегов с совпадающим конечным тегом , который отключает эффект . Конечный тег можно легко распознать. Они выглядят так же, как начальные теги, за исключением того, что начинаются с косой черты. Это означает, что они начинаются так <code> </ </code> вместо этого <code> <</code>. Таким образом, конечный тег для полужирного форматирования - <code> </code>. Вот пример:<pre> Не жирный шрифт. Обратите внимание! Теперь мы вернулись к нормальной жизни. </pre> Какой браузер отображает как:<blockquote> Это не жирный шрифт. Обратите внимание! Теперь мы вернулись к нормальной жизни.</blockquote> Этот пример отражает еще один важный принцип браузеров: они всегда обрабатывают теги в том порядке, в котором вы помещаете их в свой HTML. Чтобы получить правильное форматирование полужирным шрифтом, необходимо правильно расположить теги <code> </code> и <code> </code>. Как видите, у браузера довольно простая задача. Он сканирует HTML-документ, ищет теги и включает и выключает различные настройки форматирования. Он берет все остальное (все, что не является тегом) и отображает его в окне браузера.<h4> Примечание </h4> Добавление тегов к обычному тексту известно как разметка документа, а сами теги известны как разметка HTML . Когда вы смотрите на необработанный HTML, вам может быть интересно посмотреть на контент (текст, расположенный между тегами) или разметку (сами теги). Большинство тегов идут парами. Когда вы используете начальный тег (например, <code> </code>), вы должны включать соответствующий конечный тег (<code> </code>). Эта комбинация начального и конечного тегов вместе с текстом между ними составляет HTML элемент . Вот основная идея: пара тегов создает контейнер (см. Рис. 1-7). Вы размещаете контент (например, текст) внутри этого контейнера. Например, когда вы используете теги <code> </code> и <code> </code>, вы создаете контейнер, который применяет полужирное форматирование к тексту внутри контейнера. Создавая веб-страницы, вы будете использовать разные контейнеры для обертывания разных фрагментов текста. Если вы думаете об элементах таким образом, вы никогда не забудете включить конечный тег. Рисунок 1-7.Чтобы получить жирный текст, вам нужно начать с правильного контейнера. Это элемент <code> </code>.<h4> Примечание </h4> Когда кто-то обращается к элементу <code> </code> , он имеет в виду весь шебанг - начальный тег, конечный тег и содержимое между ними. Когда кто-то обращается к тегу <code> </code> , он обычно имеет в виду начальный тег, который запускает эффект. Конечно, без исключения жизнь не была бы такой веселой (и компьютерные книги были бы не такими толстыми).Если подойти к делу, на самом деле существует двух типов элементов :<ul><li> Контейнерные элементы , безусловно, являются наиболее распространенным типом элементов. Они применяют форматирование к содержимому, помещенному между начальным и конечным тегами.</li><li> Автономные элементы не включают и не выключают форматирование. Вместо этого они вставляют что-то, например изображение, на страницу. Одним из примеров является элемент <code> </code>, который вставляет разрыв строки на веб-страницу.Автономные элементы не входят в пары, как элементы-контейнеры, и вы можете услышать, что их называют пустыми элементами , потому что вы не можете поместить в них какой-либо текст.</li></ul> В этой книге все автономные элементы включают символ косой черты перед закрывающим <code>> </code>, что-то вроде открывающего и закрывающего тегов в одном лице. Таким образом, вы увидите разрыв строки, записанный как <code> </code> вместо <code> </code>. Эта форма, называемая синтаксисом пустых элементов , удобна, поскольку четко отличает элементы контейнера от автономных элементов.Так вы никогда не запутаетесь.<h4> Примечание </h4> В недалеком прошлом веб-разработчики были вынуждены использовать синтаксис пустых элементов, то есть теги, заканчивающиеся косой чертой, поскольку это была официальная часть (теперь замененного) языка XHTML. . Сегодня завершающая косая черта является необязательной, поэтому автономные элементы могут использовать тот же синтаксис, что и начальные теги (что означает, что вы можете использовать, например, <code> </code> или <code> </code> для вставки разрыва строки). На рис. 1-8 показаны два типа элементов в перспективе. Рисунок 1-8. Вверху: этот фрагмент HTML показывает как элемент контейнера, так и отдельный элемент. Внизу: браузер показывает получившуюся веб-страницу. В предыдущем примере вы применили простой элемент <code> </code>, чтобы получить полужирное форматирование. Вы помещаете текст между тегами <code> </code> и <code> </code>. Однако текст - не единственное, что можно поместить между начальным и конечным тегами. Вы также можете вложить один элемент внутрь другого. Фактически, вложенных элементов - обычная практика при создании веб-страниц.Он позволяет применять к тексту более подробные инструкции по стилю, объединяя все элементы форматирования в один и тот же набор инструкций. Вы также можете вкладывать элементы для создания более сложных компонентов страницы, таких как маркированные списки (см. Структурирование текста). Чтобы увидеть вложение в действии, вам понадобится другой элемент для работы. В этом примере рассмотрим, что произойдет, если вы хотите выделить текст жирным шрифтом, а - курсивом. HTML не содержит ни одного элемента для этой цели, поэтому вам необходимо объединить знакомый элемент <code> </code> (чтобы выделить текст полужирным шрифтом) с элементом <code> </code> (чтобы выделить его курсивом).Вот пример:<pre> Это word выделено полужирным шрифтом и курсивом. </pre> Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:<blockquote> Это слово выделено полужирным шрифтом и курсивом.</blockquote> Между прочим, не имеет значения, поменяете ли вы порядок тегов <code> </code> и <code> </code> на обратный. Следующий HTML дает точно такой же результат.<pre> Это word выделено курсивом и полужирным шрифтом.</pre> Однако вы всегда должны закрывать теги в порядке , обратном , из которого вы их открывали. Другими словами, если вы применяете курсивное форматирование, а затем полужирное форматирование, вы должны сначала отключить полужирное форматирование, а затем курсивное форматирование. Вот пример, который нарушает это правило:<pre> Это word выделено курсивом и полужирным шрифтом. </pre> Браузеры обычно могут разобраться в этом и сделать хорошее предположение о том, чего вы действительно хотите, но это опасная привычка, которая возникает при написании более сложного HTML. Как вы увидите в следующих главах, HTML предоставляет гораздо больше способов вложения элементов. Например, вы можете вложить один элемент в другой, а затем вложить другой элемент в , а затем и так далее до бесконечности.<h4> Note </h4> Если вы занимаетесь графическим дизайном, вам, вероятно, не терпится заполучить более мощные HTML-теги для изменения выравнивания, интервалов и шрифтов. К сожалению, в мире Интернета вы не всегда можете контролировать все, что хотите. В главе 2 содержится подробное описание, а в главе 3 представлено лучшее решение, которое называется таблиц стилей .<h3> Общие сведения о документах HTML </h3> До сих пор вы рассматривали фрагменты HTML - части полного документа HTML. Это дало вам представление о том, как работает HTML, но вам нужно активизировать свою игру, прежде чем вы сможете покорить Интернет. В этом разделе вы узнаете о структуре, которая отличает фрагмент HTML от официального документа HTML.<h4> Определение типа документа </h4> В первые дни Интернета веб-браузеры были пронизаны причудами.При разработке веб-страниц люди должны были учитывать эти особенности. Например, браузеры могут вычислять поля вокруг плавающих блоков текста несколько по-разному, в результате чего страницы в одном браузере выглядят правильно, а в другом - странно. Спустя годы правила HTML (и CSS, стандарта таблиц стилей, о котором вы узнаете в главе 3) были формализованы. Используя эти новые правила, каждый браузер может отображать одну и ту же страницу одинаково. Но это изменение вызвало серьезную головную боль для старых браузеров, таких как Internet Explorer, которые пережили темные века HTML.Он должен был каким-то образом поддерживать новые стандарты, сохраняя при этом возможность правильно отображать существующие веб-страницы, в том числе те, которые основывались на старых особенностях. Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете на этот факт, добавляя код, называемый определением типа документа (DTD) или doctype , который идет в самом начале вашего HTML-документа (рис. 1-9). Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы. Когда браузер обнаруживает doctype, он переключается в стандартный режим и отображает страницу наиболее согласованным и стандартизированным способом. Конечным результатом является то, что страница выглядит практически идентично во всех современных браузерах. Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим quirks , где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры по-разному ведут себя при просмотре страницы без документа. Скорее всего, вы получите текст разного размера, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания. В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный тип документа HTML5:<pre> <! DOCTYPE html> </pre> Несмотря на то, что этот тип документа был формализован как часть HTML5, каждый браузер поддерживает его - даже старые версии IE, о которых никогда не слышали. HTML5. Это потому, что универсальный тип документа ничего не говорит о том, какую версию HTML вы предпочитаете. Вместо этого он просто указывает, что язык - это HTML. Этот однострочный документ просто отражает истинную философию HTML - поддерживать старые и новые документы. Для сравнения, вот более многословный тип документа для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:<pre> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> </pre> Даже опытным веб-разработчикам приходилось копировать тип документа XHTML 1.0 с существующей веб-страницы, чтобы избежать неправильного ввода. В этой книге во всех примерах используется doctype HTML5 не только потому, что это текущий стандарт, но и потому, что он подготавливает ваши страницы к будущему.Но то, что вы используете этот тип документа, не означает, что вы можете использовать все функции HTML5. Фактически, вам следует пока избегать большинства из них, если вы не уверены, что они хорошо поддерживаются всеми браузерами, которые люди используют сегодня.<h4> Примечание </h4> В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще не очень хорошо поддерживаются браузерами, ознакомьтесь с HTML5: The Missing Manual (O’Reilly). Теперь вы готовы заполнить остальную часть веб-страницы. Чтобы создать настоящий HTML-документ, вы начинаете с трех элементов контейнера: <code><html> </code>, <code><head> </code> и <code><body> </code>. Эти три элемента работают вместе, чтобы описать базовую структуру вашей страницы:<dl><dt> <code><html> </code></dt><dd> Этот элемент обертывает все (кроме документа) на вашей веб-странице.</dd><dt> <code><head> </code></dt><dd> Этот элемент обозначает заголовок часть вашего документа, который включает некоторую информацию о вашей веб-странице.Первая деталь - это заголовок - откройте свою страницу в браузере, и этот заголовок появится как заголовок на вкладке. При желании раздел<head> может также включать ссылки на таблицы стилей (о которых вы узнаете в главе 3) и файлы JavaScript (глава 14).</dd><dt> <code><body> </code></dt><dd> Этот элемент содержит основную часть вашей веб-страницы, включая фактическое содержимое, которое вы хотите показать миру.</dd></dl> Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:<pre> <! DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html> </pre> Каждая веб-страница использует эту базовую структуру. Эллипсы (…) показывают, куда вы вставляете дополнительную информацию. Пробелы между линиями не обязательны - они нужны только для того, чтобы вам было легче увидеть структуру элемента. Когда у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент <code><title> </code>, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе <code><body> </code> страницы. Один универсальный текстовый контейнер - это элемент <code> </code>, который представляет абзац. Вот элементы, которые вам нужно добавить:<dl><dt> <code><title> </code></dt><dd> Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Сначала веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель добавляет вашу страницу в закладки, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы.</dd><dt> <code> </code></dt><dd> Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой промежуток между последовательными абзацами, чтобы они оставались разделенными.</dd></dl> Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом):<pre> <! DOCTYPE html> <html> <head> <code> <title> Все, что я знаю о веб-дизайне

Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 1-10).
Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит.
В его нынешнем виде этот HTML-документ является хорошим шаблоном для будущих страниц. Базовая структура на месте; вам просто нужно изменить заголовок и добавить текст. Это задача, за которую вы возьмётесь дальше.
Учебное пособие: создание полного HTML-документа
В этом руководстве вы научитесь составлять свою первую настоящую веб-страницу.Вы будете создавать онлайн-резюме (перейдите к разделу «10 важнейших элементов (и еще несколько), чтобы увидеть окончательный результат»), но подробности применимы к любой странице, которую вы создаете.
Совет
Как и все учебные пособия в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения.
Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково:
1. Запустите текстовый редактор .
 Это Блокнот или TextEdit.
2. Введите скелет HTML в новый файл .
 Это doctype, корневой элемент и два основных раздела каждой веб-страницы: и .Выглядит это так:
```
 





 
```
 Чтобы сэкономить время в будущем, сохраняйте эту страницу, а затем копируйте и вставляйте этот скелет HTML каждый раз при создании нового файла. Папка с учебником включает файл с именем skeleton.htm , который поможет вам в этом - он содержит doctype и три стандартных элемента HTML-страницы, но не содержит содержимого.
3. Добавьте заголовок в раздел .
 Добавьте элемент </code> в новую строку между открывающим тегом <code><head> </code> и закрывающим тегом <code></head> </code>:<pre> <code> <title> Hire Me!
4. Добавьте свой контент в раздел .
 Например, предположим, вы хотите написать простую страницу резюме. Вот очень простой пример:
```
 


 Найми меня! 


 Меня зовут Ли Пак.Нанять меня в свою компанию, потому что моя работа 
 с легкостью . 
 

 
```
 В этом примере выделены ( жирным шрифтом, ) изменения, внесенные в базовый скелет HTML - измененный заголовок и одну строку текста. В этом примере используется единственный элемент внутри абзаца, чтобы немного украсить страницу.
5. Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере .
 Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало.
Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать.
Используя методы HTML, описанные в следующих разделах, вы можете опираться на этот пример и дать Ли лучшее резюме.Каждый раз, когда вы вносите изменения в документ в текстовом редакторе, обновляйте страницу в веб-браузере, чтобы проверить, все ли идет по пути.
Когда вы начнете создавать более подробные веб-страницы, вы быстро обнаружите, что создание страницы не так просто, как, скажем, создание страницы в Microsoft Word. Например, вы можете улучшить страницу резюме, создав список навыков. Вот разумная первая попытка:
```
 


 Наймите меня! 


 Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов
шепот .
 Мои навыки включают: 
 * Быстрый набор текста (почти 12 слов в минуту). 
 * Невероятная заточка карандашей. 
 * Придумывание оправданий изобретательности. 
 * Ведение переговоров с мирными офицерами. 
 

 
```
Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12).
Рисунок 1-12. HTML игнорирует разрывы строк и последовательные пробелы, поэтому то, что выглядит как аккуратно организованный текст в вашем HTML-файле, может превратиться в беспорядочный текст, когда вы отображаете его в браузере.
Проблема в том, что HTML игнорирует лишние пробелы. Сюда входят табуляции, разрывы строк и лишние пробелы (более одного пробела подряд). В первый раз, когда это произойдет, вы, вероятно, ошеломленно уставитесь на свой экран и удивитесь, почему веб-браузеры устроены именно так. Но на самом деле это имеет смысл, если учесть, что HTML должен работать как универсальный стандарт .
Допустим, вы настраиваете свою гипотетическую веб-страницу с идеальным интервалом, отступом и шириной линии для монитора вашего компьютера . Загвоздка в том, что эта страница может не так хорошо выглядеть на чужом мониторе. Например, часть текста может прокручиваться с правой стороны страницы, что затрудняет чтение. А разные мониторы - это только часть проблемы. Современные веб-страницы должны работать на различных типах устройств . Будущий босс Ли Пака может просмотреть резюме Ли на чем угодно, от новейшего широкоэкранного ноутбука до планшетного компьютера или смартфона.
Чтобы иметь дело с этим диапазоном опций отображения, HTML использует элементы для определения структуры вашего документа. Вместо того, чтобы сообщать браузеру: «Здесь вы переходите к следующей строке, а здесь вы добавляете четыре дополнительных пробела», HTML сообщает браузеру: «Вот два абзаца и маркированный список». Браузер должен отображать страницу, используя инструкции, которые вы включаете в свой HTML.
Чтобы исправить пример резюме, вам нужно использовать больше элементов абзаца и два новых элемента контейнера:
Указывает начало маркированного списка, называемого неупорядоченным списком на жаргоне HTML.Список - идеальный способ подробно описать навыки Ли.
Обозначает отдельный элемент маркированного списка. Ваш браузер делает отступ для каждого элемента списка, а для предложений, выходящих за пределы одной строки, правильно делает отступ для последующих строк, чтобы они совпадали с первой. Кроме того, перед каждым элементом ставится маркер (•). Вы можете использовать элемент списка только внутри такого элемента списка, как
Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом:
```
 


 Наймите меня! 


 Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов
шепот . 
 
 Мои навыки включают: 
 
 
 Быстрый набор текста (почти 12 слов в минуту). 
 
 Невероятная заточка карандашей. 
 
 Придумывание оправданий изобретательности. 
 
 Ведение переговоров с мирными офицерами. 
 
 
 

 
```
Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать.
Вы можете превратить привычку браузера игнорировать перенос строки в свою пользу. Чтобы сделать ваши HTML-документы более удобочитаемыми, добавляйте разрывы строк и пробелы в любом месте. Веб-специалисты часто используют отступы, чтобы упростить понимание структуры вложенных элементов. В примере резюме вы можете увидеть этот стиль на практике. Обратите внимание, как элементы списка (строки, начинающиеся с элемента

) имеют отступ. Это не влияет на браузер, но упрощает просмотр структуры HTML-документа и оценку того, как браузер будет отображать его.
Рисунок 1-14 анализирует документ HTML с помощью модели дерева . Древовидная модель - это удобный способ познакомиться с анатомией веб-страницы, поскольку она сразу показывает общую структуру страницы. Однако по мере того, как ваши веб-страницы станут более сложными, они, вероятно, станут слишком сложными для использования древовидной модели.
Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня содержит элементы и .Внутри элемента находится элемент </code>, а внутри элемента <code><body> </code> находятся два абзаца и маркированный список с четырьмя элементами. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами-контейнерами». Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу:<pre> <! DOCTYPE html> <html> <head> <title> Hire Me!
я Ли Парк.Наймите меня в свою компанию, потому что моя работа без шума .
Мои навыки: Быстрый набор текста (почти 12 слов в минуту). Невероятная заточка карандашей. Изобретательность поиск оправданий. Ведение переговоров с мирными офицерами. Конечно, человеку почти невозможно написать такой HTML, не допустив ошибки. Где все картинки? Будь то биржевой график, логотип вашей подземной гаражной группы или подделанная фотография вашей любимой знаменитости, Интернет был бы довольно унылым без изображений. До сих пор вы видели, как поместить текст в документ HTML, но что происходит, когда вам нужно изображение? Хотя это может показаться удивительным, вы не можете сохранить изображение в файле HTML. Есть много веских причин, по которым вы все равно не захотите - ваши файлы веб-страниц станут действительно большими, будет сложно изменять ваши изображения или делать с ними что-то еще, и вам будет дьявольски весело редактировать свои страницы. в текстовом редакторе, потому что данные изображения могут создать беспорядок.Решение состоит в том, чтобы сохранить ваши изображения в виде отдельных файлов, а затем связать с ними ваш HTML-документ. Таким образом, ваш браузер вытягивает изображения и размещает их именно там, где вы хотите, на своей странице. Инструмент связывания, который вставляет изображения, - это элемент (сокращение от «изображение»). Он указывает на файл изображения, который браузер извлекает и вставляет на страницу. Вы можете поместить файл изображения в ту же папку, что и ваша веб-страница (что является самым простым вариантом), или вы можете разместить его на совершенно другом веб-сайте. Хотя в главе 4 вы узнаете все, что когда-либо хотели знать о веб-графике, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаемые типы файлов изображений - это JPEG, GIF и PNG.) Если у вас нет изображения под рукой, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg : Как и обсуждавшийся ранее элемент , является автономным элементом без содержимого. По этой причине имеет смысл использовать синтаксис пустого элемента. и добавьте косую черту перед закрывающей угловой скобкой. Однако есть очевидная разница между элементом и элементом . Хотя является отдельным элементом, это не т самодостаточный.Чтобы элемент имел какое-либо значение, вам необходимо предоставить еще две части информации: имя файла изображения и некоторый альтернативный текст, который используется в тех случаях, когда браузер не может загрузить или отобразить изображение (см. Альтернативный текст ). Чтобы включить эту дополнительную информацию в элемент изображения, HTML использует атрибутов , дополнительные части информации, которые появляются после имени элемента, но перед закрывающим символом>. Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (части информации, которую вы предоставляете). Имя первого атрибута - src , что является сокращением от слова «источник»; он сообщает браузеру, где взять желаемое изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла с изображением Ли Пака. Имя второго атрибута - alt , что является сокращением для «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait». Как только вы разберетесь с элементом изображения, вы будете готовы использовать его в HTML-документе. Просто разместите его там, где это имеет смысл, внутри или после существующего абзаца: Наймите меня! Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: Быстрый набор текста (почти 12 слов в минуту). Невероятная заточка карандашей. Изобретательное придумывание оправданий. Ведение переговоров с мирными офицерами. На рис. 1-15 показано, где именно заканчивается изображение. Рисунок 1-15.Вот веб-страница, на которой встроено изображение благодаря связывающей способности элемента изображения. Чтобы отобразить этот документ, веб-браузер выполняет отдельный запрос на получение файла изображения. В результате ваш браузер может отображать текст веб-страницы перед загрузкой изображения, в зависимости от того, сколько времени занимает загрузка (обычно это доли секунды). Note В главе 4 вы узнаете о многих других приемах веб-графики, в том числе о том, как изменять их размер и обтекать их текстом. 10 самых важных элементов (и еще несколько) Теперь вы достигли точки, когда вы можете создать базовый документ HTML, и у вас уже есть несколько элементов за плечами. Вы знаете основы - все, что вам осталось, - это расширить свои знания, научившись использовать больше элементов. HTML имеет относительно небольшой набор элементов. Скорее всего, вы будете использовать менее 25 на регулярной основе. Это ключевая часть успеха HTML, потому что он делает HTML простым языком общего доступа, понятным каждому. Примечание Вы не можете определять свои собственные элементы и использовать их в документе HTML, потому что веб-браузеры не знают, как их интерпретировать. Некоторые элементы, такие как элемент , форматирующий абзац, важны для определения общей структуры страницы. Они называются блочными элементами . Блочные элементы получают дополнительное пространство - когда вы добавляете один на страницу, браузер начинает новую строку (отделяя этот блочный элемент от предыдущей). Браузер также добавляет новую строку в конец элемента блока, отделяя его от следующего элемента. Вы можете размещать блочные элементы непосредственно внутри раздела вашей веб-страницы или внутри другого блочного элемента. В Таблице 1-1 представлен краткий обзор некоторых из наиболее фундаментальных блочных элементов, некоторые из которых вы уже видели. Он также указывает, какие из них являются элементами контейнера, а какие - отдельными элементами. (Как вы узнали из статьи «Понимание элементов», для элементов-контейнеров требуются начальный и конечный теги, но для автономных элементов достаточно одного тега.) Вы более подробно изучите все эти элементы в главе 2. Таблица 1-1. Базовые блочные элементы. 00 ЭЛЕМЕНТ НАИМЕНОВАНИЕ ТИП ЭЛЕМЕНТА ОПИСАНИЕ 00 9135 00 Контейнер Как, вероятно, сказал вам учитель английского в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка. , , , , , Заголовок Контейнер Элементы заголовка - хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими жирными буквами. Чем меньше число, тем крупнее текст, поэтому дает самый большой заголовок. К тому времени, когда вы дойдете до , заголовок уменьшится до того же размера, что и обычный текст, и , хотя и полужирный, на самом деле меньше обычного текста. Горизонтальная линия (или горизонтальная линия на языке HTML) Автономный Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.) , Неупорядоченный список, элемент списка Контейнер Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить на , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»). Другие элементы предназначены для работы с более мелкими структурными деталями, например фрагментами текста, выделенного жирным или курсивом, разрывами строк, ссылками, ведущими на другие веб-страницы, и изображениями. Эти элементы называются встроенными элементами . Вы можете поместить встроенный элемент в блочный элемент, но никогда не должны помещать блочный элемент внутри встроенного элемента.В таблице 1-2 перечислены наиболее полезные встроенные элементы. Таблица 1-2. Основные встроенные элементы. ЭЛЕМЕНТ НАИМЕНОВАНИЕ ТИП ОПИСАНИЕ ОПИСАНИЕ 2000 2 Полужирный и курсив Контейнер Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически означает «текст другим голосом», а означает «стилистически смещенный текст», и есть способы изменить применяемое форматирование, как вы увидите в главе 3. Но в реальном мире почти все веб-разработчики ожидают, что означает курсив, а означает жирный шрифт.) разрыв строки Автономный Иногда все, что вам нужно, - это текст, разделенный простыми переносами строки, а не отдельными абзацами.Благодаря этому последующие строки текста будут ближе друг к другу, чем при использовании абзаца. Изображение Автономный Для отображения изображения внутри веб-страницы используйте этот элемент. Убедитесь, что вы указали атрибут src , чтобы указать имя файла изображения, которое вы хотите отобразить в браузере. Якорь Контейнер Элемент привязки является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 6. Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы. Рисунок 1-16. Этот HTML-документ, содержащий больше заголовков, списков и горизонтальную линию, добавляет немного больше стиля резюме. Вот обновленный HTML с новыми заголовками и горизонтальной линией, выделенными жирным шрифтом: Наймите меня! Наймите меня! Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Как доказательство моих потрясающих компьютерных навыков и монументальной работы этика, пожалуйста, оцените это электронное резюме. Незаменимые навыки Мои навыки включают: Быстрый набор текста (почти 12 слов в минуту). Невероятная заточка карандашей. Изобретательное придумывание оправданий. Ведение переговоров с мирными офицерами. А еще я знаю HTML! Предыдущий опыт работы У меня долгая и блестящая карьера в самых разных профессиях. Вот некоторые основные моменты: 2008-2009 - работал машинисткой в Flying Fingers 2010-2013 - Выполнение передовых веб-дизайнеров в Riverdale Ферма 2014–2015 гг. - отмечен в главе 1 книги Создание веб-сайта: The Отсутствует руководство Не беспокойтесь, если в этом примере слишком много разметки, чтобы вы могли сразу ее усвоить.В следующей главе вы получите больше практики по превращению обычного текста в структурированный HTML. Проверка страниц на наличие ошибок Даже веб-дизайнер с лучшими намерениями может написать плохую разметку и нарушить правила HTML. Хотя браузеры действительно должны отлавливать эти ошибки, практически ни одна из них не справляется. Вместо этого они изо всех сил стараются игнорировать ошибки и отображать некорректные документы. На первый взгляд это кажется отличным дизайном - в конце концов, он сглаживает любые незначительные промахи, которые вы могли допустить.Но у терпимости к ошибкам есть и обратная сторона. В частности, такое поведение упрощает то, что серьезные ошибки остаются незамеченными на ваших веб-страницах. Что за серьезная ошибка? Проблема, которая безвредна, когда вы просматриваете страницу в своем любимом браузере, но выглядит неловко, когда кто-то просматривает страницу в другом браузере; ошибка, которая остается незамеченной до тех пор, пока вы не отредактируете код, что непреднамеренно обнаруживает проблему в следующий раз, когда ваш браузер отображает страницу; или ошибка, которая не влияет на отображение страницы, но не позволяет автоматическому инструменту (например, поисковой системе) прочитать страницу. К счастью, есть способ решить подобные проблемы. Вы можете использовать инструмент проверки , который читает вашу веб-страницу и проверяет ее разметку. Если вы используете профессиональный инструмент веб-дизайна, такой как Dreamweaver, вы можете использовать его встроенное средство проверки ошибок (подробности описаны в главе 5). Если вы создаете страницы вручную в текстовом редакторе, вы можете использовать бесплатный инструмент онлайн-проверки (см. Ниже). Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:
Отсутствуют обязательные элементы (например, элемент).</li><li> Начальный тег контейнера без соответствующего конечного тега.</li><li> Неправильно вложенные теги.</li><li> Теги с отсутствующими атрибутами (например, элемент <code> <img> </code> без атрибута <code> src </code>).</li><li> Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел <code><head> </code>).</li></ul> В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставляемый организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла resume.htm , который вы создали во втором учебнике (Учебник: Создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла popsicles.htm , который вы создали в первом учебнике (Учебник: Создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как требуемые элементы <code><html> </code>, <code><head> </code> и <code><body> </code>. После того, как вы решите, что вы хотите проверить, выполните следующие действия:<ol type="1"><li> Убедитесь, что ваш документ имеет тип документа (Общие сведения о документах HTML). Тип документа сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 («Базовый скелет»).</li><li> В веб-браузере перейдите по адресу http://validator.w3.org (рис. 1-17). Валидатор W3C предоставляет вам три варианта, представленные тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить по загрузке файла (для страницы, которая хранится на вашем компьютере) и Подтвердить с помощью прямого ввода (для разметки). вы вводите прямо в предоставленное поле). Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить свой собственный файл (показанный здесь) или ввести разметку напрямую.</li><li> Щелкните нужную вкладку и введите содержимое HTML . Проверить по URI позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле «Адрес» (например, www.MySloppySite.com/FlawedPage.html). Подтвердить загрузкой файла позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей resume.htm , которую вы создали ранее. Проверка прямым вводом позволяет проверять любую разметку - вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию - скопировать разметку из текстового редактора и вставить ее в поле. Перед тем, как продолжить, вы можете щелкнуть «Дополнительные параметры» в любом из окон с вкладками, чтобы установить другие параметры, но вы, вероятно, этого не сделаете. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте для параметра «Кодировка символов» значение «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникнут проблемы с определением правильного набора символов.</li><li> Нажмите кнопку «Проверить» . После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18). Валидатор также может предложить несколько безобидных предупреждений для совершенно допустимого HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной незаконченной функцией.</li></ol> Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, связанных с двумя ошибками. Во-первых, на странице отсутствует обязательный элемент <code><title> </code>. Во-вторых, он закрывает элемент <code><li> </code> перед закрытием элемента <code> </code>, вложенного внутрь. (Чтобы решить эту проблему, вы должны заменить <code></li> </code> на <code> </li> </code>.) Между прочим, этот файл все еще достаточно близок, чтобы исправить, что браузеры могут отображать его правильно.<h2> Создание HTML-документа </h2> HTML-документ - это контейнер для форматирования, отображения и распространения одного или нескольких отчетов в рамках проекта. Вы можете изменить внешний вид HTML-документа, включив в него текст, изображения, гиперссылки, таблицы и один или несколько объектов отчета. Поскольку один документ HTML может включать в себя несколько отчетов в формате сетки или графика, документы HTML предоставляют отличное средство для отображения и распространения нескольких связанных отчетов.Кроме того, поскольку эти документы основаны на HTML, вы можете воспользоваться всеми преимуществами HTML, XML и XSL для создания хорошо продуманных презентаций профессионального качества. Каталог документов по умолчанию должен быть указан в редакторе конфигурации проекта. Дополнительные сведения см. В разделе «Редактор конфигурации проекта: категория« Определение проекта », Дополнительно».<h3> Для создания HTML-документа </h3> Процесс создания HTML-документа является итеративным, и вы должны продумать и продумать макет, дизайн и внешний вид HTML-документа так же, как и любую создаваемую вами веб-страницу.<ol><li value="1"> В MicroStrategy Developer перейдите к папке в списке папок, в которой вы хотите создать HTML-документ, например «Мои объекты».</li><li value="2"> На правой панели, где отображается содержимое папки, щелкните правой кнопкой мыши и укажите на «Создать», затем на «HTMLDocument».Откроется редактор HTML-документа. Каталог документов по умолчанию должен быть указан в редакторе конфигурации проекта. Если это не так, появляется сообщение об ошибке. Дополнительные сведения см. В разделе «Редактор конфигурации проекта: категория« Определение проекта », Дополнительно».</li><li value="3"> См. Следующие ссылки для получения инструкций по вставке типов объектов в документ HTML:</li><li value="4"> Чтобы добавить текст в документ HTML, на панели «Макет» поместите курсор в то место, куда вы хотите вставить текст, а затем введите текст.</li><li value="5"> Вы можете форматировать HTML-документ и его объекты. Инструкции см. В разделе Форматирование содержимого HTML-документа.</li><li value="6"> Сохраните документ HTML. Для получения дополнительной информации о сохранении HTML-документа см. Сохранение HTML-документа. При именовании объекта MicroStrategy вы должны следовать правилам соглашения об именах для вашей конкретной платформы базы данных. Использование слова, зарезервированного вашей платформой базы данных, может привести к ошибке. Обратитесь к документации вашей базы данных за списком этих зарезервированных для базы данных слов.</li></ol><h3> Связанные темы </h3><h2> 1.Создание вашего первого HTML-документа </h2> 1. Создание вашего первого HTML-документа<h5></h5> Написание HTML | О нас | FAQ | Выпускники | Ссылки | Теги | Уроки | предыдущая | следующий |</h5> Вы собираетесь отправиться в путешествие, которое превратит вас из всего Интернет-серфингиста Интернета для Интернет-автора мультимедиа! <h3> Цели </h3> После этого урока вы сможете:<ul><li> Определите значение и назначение тегов HTML.</li><li> Откройте рабочее пространство для создания новых HTML-документов.</li><li> Используйте текстовый редактор, чтобы создать базовую структуру HTML для любой веб-страницы.</li><li> Вставляйте неотображаемые комментарии в файлы HTML.</li><li> Откройте документ в веб-браузере, чтобы увидеть, как он отображается.</li></ul><hr/><h3> Урок </h3> Теперь, когда вы знаете, что такое HTML, давайте начнем его использовать.<blockquote> (Быстрая викторина - что означают эти буквы? Если вы прочитаете предыдущий урок, то узнаете!).</blockquote><h4> Что такое HTML-теги? </h4> Когда веб-браузер отображает страницу, подобную той, которую вы сейчас читаете, он читает из обычного текстового файла и ищет специальные коды или «теги», которые отмечены знаками <и>.Общий формат HTML тег:<pre> <tag_name> строка текста </tag_name> </pre>Например, в заголовке этого раздела используется тег заголовка:<pre> <h4> Что такое HTML-теги? </h4> </pre>Этот тег указывает веб-браузеру отображать текст What are HTML теги? в стиле заголовка 3-го уровня (подробнее об этих тегах мы узнаем позже). HTML-теги могут указывать веб-браузер, чтобы выделить текст жирным шрифтом, выделить его курсивом, превратить в заголовок или сделать это гипертекстовая ссылка на другую веб-страницу.Важно отметить, что конечный тег,<pre> </tag_name> </pre>содержит косую черту "/". Эта косая черта «/» указывает веб-браузеру прекратить помечать текст тегами. Многие HTML теги соединяются таким образом. Если вы забыли косую черту, веб-браузер продолжит использование тега для остального текста в вашем документе, создавая нежелательные результаты (в качестве эксперимента вы можете попробовать это позже).<blockquote> ПРИМЕЧАНИЕ. Веб-браузер не заботится о том, используете ли вы верхний или нижний регистр. Например,<h4>... </h4> ничем не отличается от<h4> ... </h4> </blockquote> В отличие от компьютерного программирования, если вы сделаете опечатку в HTML, вы не получить «бомбу» или «разбить» систему; ваша веб-страница будет просто выглядеть, ну ... неправильный. Быстро и легко зайти внутрь HTML и внести изменения. В вашем браузере небольшой, но открытый словарный запас! Интересным аспектом HTML является то, что если браузер не знает, что делать с данным тегом, он его проигнорирует! Например, в этом документе, который вы просматриваете, тег заголовка для этого раздела на самом деле выглядит так:<pre> <wiggle> <h4> Что такое HTML-теги? </h4> </wiggle> </pre>но поскольку ваш браузер, вероятно, не поддерживает тег <wiggle> (я его придумал, возможно, в будущем он может заставить текст перемещаться по экрану?), он продолжает то, что умеет делать.Если бы я программировал новый веб-браузер, я мог бы решить добавить в свое программное обеспечение функции тега <wiggle>.<h4> Открытие рабочего пространства </h4> Чтобы завершить уроки в этом руководстве, вы должны создать второе веб-окно (это позволяет вам оставить это окно с инструкциями по уроку и одно окно в качестве «рабочего пространства»), а также открыть текстовый редактор. приложение в третьем окне.<blockquote> ПРИМЕЧАНИЕ. Это хорошее место, чтобы напомнить вам, что мы предоставим несколько общих направлений, так как названия меню и имена файлов могут различаться в зависимости от того, какой веб-браузер вы используете.</blockquote> Таким образом, вам будет удобно переключаться между разными приложениями и окнами. на твоем компьютере. Другой вариант - распечатайте инструкции урока (но мы действительно не хотим пропагандировать резню деревьев). Вот шаги по настройке вашего рабочего пространства:<ol><li> В меню File вашего веб-браузера выберите New Window или New Web Browser . Должно появиться второе веб-окно. Думайте о первом окне как о своем "учебник" и второе окно клонирования в качестве "рабочего пространства" для завершение уроков HTML.<blockquote> ПРИМЕЧАНИЕ: Единственная причина, по которой здесь есть два окна, - это то, что вы можете читать инструкции к урокам, а также просматривать свой рабочий документ. Вы также можете добавить эту веб-страницу в закладки и вернуться к ней через меню Go или History . </blockquote></li><li> Затем вам нужно выйти из веб-браузера и открыть программу текстового редактора.<blockquote> ПРИМЕЧАНИЕ. Вам нужно будет перемещаться между разные окна для выполнения этих уроков. Это может быть проблемой в зависимости от от размера вашего монитора.Вы можете изменить размер трех окна так, чтобы все они умещались на экране или слои ваших окон, чтобы вы можете нажать на любой из них, чтобы вывести его на передний план. Если вы используете текстовый редактор для создания HTML-кода, обязательно сохраните в формате обычного текста (или ASCII).</blockquote></li></ol> Если вы только начинаете, мы НАСТОЯТЕЛЬНО рекомендуем вам используйте самый простой текстовый редактор - SimpleText или TeachText для Macintosh или Windows NotePad .Почему бы не использовать эти изящные редакторы HTML? Это разумный учебный план, когда вы сначала изучаете концепции, а ЗАТЕМ ищите ярлыки или помощников, которые сделают работу менее утомительной. Кроме того, это поможет вам, если вы сначала создадите новый каталог / папку на своем компьютере, которая будет вашей рабочей областью. Вы можете называть это workarea или myspace или как хотите; просто убедитесь, что вы храните все файлы, которые вы создаете, в этой единственной области. Это сделает вашу жизнь проще ... ну, по крайней мере, пока вы работаете над этим уроком!<h4> Создание HTML-документа </h4> Документ HTML состоит из двух отдельных частей: головы и тела.В Заголовок содержит информацию о документе, который не отображается на экране. Тело затем содержит все остальное, что отображается как часть веб-страницы. Таким образом, основная структура любой HTML-страницы:<pre> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 3.2 // EN"> <html> <head> <! - информация заголовка, которая содержит дополнительную информацию о этот документ, не отображаемый на странице -> </head> <body> <! - весь HTML для отображения -> :: :: :: </body> </html> </pre>Самая первая строка:<pre> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 3.2 // EN "> </pre>технически не требуется, но представляет собой код, сообщает браузеру, для какой версии HTML написана текущая страница. Для получения дополнительной информации см. Справочную спецификацию W3C. Заключите всю работу HTML в теги<html> ...</html>. Внутри сначала ваш<head> ...</head>, а затем<body> ...</body>. Ваши веб-страницы могут нормально отображаться на большинстве компьютеров без каких-либо из этих тегов. тем не мение используя их, ваши веб-страницы будут полностью соответствовать международным стандартам. Стандарты HTML и обеспечение совместимости с будущими веб-браузерами. Это хорошая привычка, как чистить зубы. Также обратите внимание на теги comment , заключенные в <! - blah blah blah ->. Текст между тегами НЕ отображается на веб-странице, но предназначен для размещения информации, которая может быть полезна вам или кому-либо еще, кто может просмотреть HTML-код за веб-страницей. Когда ваши веб-страницы станут сложными (как вы увидите, когда мы перейдем к таблицам, фреймам и другим забавным вещам примерно через 20 уроков!), Комментарии будут очень полезны, когда вам нужно обновить страницу, которую вы, возможно, создали давно. . Вот шаги для создания вашего первого HTML-файла. Вы готовы?<ol><li> Если он еще не открыт, запустите текстовый редактор.</li><li> Перейти в окно текстового редактора.</li><li> Введите следующий текст (вам не нужно нажимать RETURN в конец каждой строки; веб-браузер будет переносить весь текст по словам):<pre> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 3.2 // EN"> <html> <head> <title> Сеть вулканов На этом уроке вы будете использовать Интернет для исследования информацию о вулканах, а затем написать отчет о ваши результаты.
ПРИМЕЧАНИЕ. Посмотрите, где расположен тег .... Он находится в части ... и поэтому не будет видно на экране. Что оно делает? Тег используется для уникальной идентификации каждого документа, а также отображается в строке заголовка окно браузера. В уроке 3 вы научитесь добавьте заголовок, который будет отображаться прямо на вашей веб-странице. Также обратите внимание, что мы вставили тег комментария, в котором указано имя автора и дата создания документа.Вы можете написать что угодно между тегами комментариев, но это будет видно только при просмотре исходного HTML-кода веб-страницы.</blockquote></li><li> Сохраните документ как файл с именем «Volc.html» и сохраните его в папка / каталог «рабочей области», которую вы создали для этого руководства. Кроме того, если вы используете текстовый редактор для создания HTML-кода, обязательно сохраните его в текстовом (или ASCII) формате.<blockquote> ПРИМЕЧАНИЕ. Для пользователей Windows 3.1 вы должны сохранить все свои HTML-файлы с именами, заканчивающимися на.HTM, поэтому в этом случае ваш файл должен быть VOLC.HTM. Не волнуйся! Ваш веб-браузер достаточно умен, чтобы знать, что файл с именем, оканчивающимся на .HTM, является файлом HTML. Вы можете создавать файлы с такими именами, как VOLC.HTML, если вы используете Windows95 или Windows NT.</blockquote> Используя это расширение имени файла, веб-браузер будет знать, что нужно читать этот текст. файлы в формате HTML и правильно отображать веб-страницу.</li></ol><h4> Отображение документа в веб-браузере </h4><ol><li> Вернитесь в окно веб-браузера, которое вы используете для своего рабочего места.(Если у вас еще не открыто второе окно браузера, выберите Новое окно или Новый браузер из окна Файл .)</li><li> Выберите Открыть файл ... в меню Файл .</li><li> Используйте диалоговое окно, чтобы найти и открыть созданный файл, "Volc.html"</li><li> Теперь вы должны увидеть в строке заголовка окна рабочей области текст «Volcano Web» и на веб-странице ниже одно предложение текста<body>, которое вы написали: «В этом уроке... "</li></ol><hr/><h3> Проверьте свою работу </h3> Сравните ваш документ с образцом о том, как этот документ должен выглядеть. После просмотра образца используйте назад кнопку в веб-браузере, чтобы вернуться на эту страницу. Если ваш документ отличался от образца, просмотрите текст, введенный вами в текстовом редакторе. Самая частая ошибка - «Я не вижу заголовок!» Вы не должны! Текст в теге<title> ... - НЕ отображается на веб-странице; вы должны увидеть его в заголовке окна веб-браузера. Темы обзоров Что такое HTML-теги? Где отображается текст тега заголовка? Какие шаги необходимы для создания простого HTML-документа? Как создать тег комментария? Как вы можете отобразить свой HTML-документ в веб-браузере? Независимая практика Придумайте тему для своей веб-страницы. Теперь создайте свой собственный HTML текстовый файл, содержащий тег и несколько вводных предложения.Сохраните HTML-файл и перезагрузите его в своем веб-браузере. Возможно, вы захотите создать другую папку / каталог для этого файла, чтобы не путать его со всеми страницами вулканов, которые вы создадите для этого урока. Держи это файл под рукой, так как вы добавите к нему в последующих уроках.<hr/><h3> Далее .... </h3> Ваша первая веб-страница готова! Но, честно говоря, он довольно короткий и не очень захватывающий! На следующем уроке вы измените и обновите свой HTML документ.<h5> ПЕРЕЙТИ К.... | Указатель уроков | назад: «Стандартно говорящий» | следующий: «Изменение HTML» | </h5><hr/> Написание HTML Урок 1: Создание вашего первого HTML-документа <address> © 1995, 1996, 1997 Центр обучения и преподавания Марикопы (MCLI) Общинные колледжи Марикопы, Аризона Интернет-соединение в MCLI есть Алан Левин -} Комментарии к levine@maricopa.edu </address> URL: http://www.mcli.dist.maricopa.edu/tut/tut1.html<h2> ДОМ Внедрение.createHTMLDocument () - веб-API | MDN </h2> <code> DOMImplementation.createHTMLDocument () </code> метод создает новый HTML <code> Документ </code>.<pre> <code> const newDoc = document.implementation.createHTMLDocument (title) </code> </pre><h4> Параметры </h4><dl><dt> <code> <var> title </var> </code> Необязательно (кроме IE)</dt><dd> <code> DOMString </code>, содержащая заголовок для нового HTML-документа.</dd></dl> В этом примере создается новый документ HTML и вставляется его в <code> <iframe> </code> текущего документа. Вот HTML-код этого примера:<pre> <code> <body> Щелкните <a href="javascript:makeDocument()"> здесь </a>, чтобы создать новый документ и вставить его ниже. <iframe src = "about: blank" /> </body> </code> </pre> Реализация <code> makeDocument () </code> в JavaScript:<pre> <code> function makeDocument () { let frame = document.getElementById ("theFrame"); let doc = document.implementation.createHTMLDocument («Новый документ»); пусть p = doc.createElement ("p"); p.textContent = "Это новый абзац."; пытаться { doc.body.appendChild (p); } catch (e) { console.log (e); } пусть destDocument = frame.contentDocument; пусть srcNode = doc.documentElement; let newNode = destDocument.importNode (srcNode, true); destDocument.replaceChild (newNode, destDocument.documentElement); } </code> </pre> Код в строках 4–12 обрабатывает создание нового HTML-документа и вставку некоторого содержимого. внутрь. В строке 4 используется <code> createHTMLDocument () </code> для создания нового HTML-документа. чей <code><title> </code> - это <code> «Новый документ» </code>.Строки 5 и 6 создают новый элемент абзаца с простым содержанием, а затем строки 8–12 обрабатывают вставку новый абзац в новый документ. Строка 16 извлекает <code> contentDocument </code> фрейма; это документ в в который мы будем внедрять новый контент. Следующие две строки обрабатывают импорт содержимое нашего нового документа в контекст нового документа. Наконец, строка 20 на самом деле заменяет содержимое фрейма содержимым нового документа. Посмотреть живые примеры Возвращенный документ предварительно сконструирован со следующим HTML:<pre> <code> <! Doctype html> <html> <head> <title> название
Таблицы BCD загружаются только в браузере
Document.createElement () - Веб-API | MDN
В HTML-документе метод document.createElement () создает элемент HTML, указанный параметром tagName , или HTMLUnknownElement , если tagName не распознается.
let element = document.createElement (tagName [, параметры]);
Параметры
tagName
Строка, определяющая тип создаваемого элемента. nodeName созданного элемента инициализируется значением tagName . Не используйте полные имена (например, «html: a») с этим методом. При вызове HTML-документа createElement () преобразует tagName в нижний регистр перед созданием элемента.В Firefox, Opera и Chrome createElement (null) работает как createElement ("null") .
опций опционально
Необязательный объект ElementCreationOptions , содержащий единственное свойство с именем - , значение которого является именем тега настраиваемого элемента, ранее определенного с помощью customElements.define () . См. Подробности в примере веб-компонента.
Возвращаемое значение
Базовый пример
Это создает новый
и вставляет его перед элементом с идентификатором « div1 ».
HTML
|| Работа с элементами || Текст выше был создан динамически.
JavaScript
document.body.onload = addElement; function addElement () { const newDiv = document.createElement ("div"); const newContent = document.createTextNode («Привет и привет!»); newDiv.appendChild (новоеКонтент); const currentDiv = document.getElementById ("div1"); document.body.insertBefore (newDiv, currentDiv); }
Пример веб-компонента
Следующий фрагмент кода взят из нашего примера расширения-списка-веб-компонента (см. Его также вживую). В этом случае наш настраиваемый элемент расширяет HTMLUListElement , который представляет элемент
.
class ExpandingList расширяет HTMLUListElement { constructor () { супер(); ... } } customElements.define ('расширяющийся список', ExpandingList, {extends: "ul"});
Если бы мы хотели создать экземпляр этого элемента программно, мы бы использовали вызов в следующих строках:

пусть expandingList = document.

ЭЛЕМЕНТ	НАИМЕНОВАНИЕ	ТИП ЭЛЕМЕНТА	ОПИСАНИЕ 00 9135
		00	Контейнер	Как, вероятно, сказал вам учитель английского в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка.
, , , , ,	Заголовок	Контейнер	Элементы заголовка - хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими жирными буквами. Чем меньше число, тем крупнее текст, поэтому дает самый большой заголовок. К тому времени, когда вы дойдете до , заголовок уменьшится до того же размера, что и обычный текст, и , хотя и полужирный, на самом деле меньше обычного текста.
	Горизонтальная линия (или горизонтальная линия на языке HTML)	Автономный	Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.)
,	Неупорядоченный список, элемент списка	Контейнер	Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить на , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

ЭЛЕМЕНТ	НАИМЕНОВАНИЕ	ТИП	ОПИСАНИЕ
ОПИСАНИЕ
2000
2 Полужирный и курсив	Контейнер	Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически означает «текст другим голосом», а означает «стилистически смещенный текст», и есть способы изменить применяемое форматирование, как вы увидите в главе 3. Но в реальном мире почти все веб-разработчики ожидают, что означает курсив, а означает жирный шрифт.)
	разрыв строки	Автономный	Иногда все, что вам нужно, - это текст, разделенный простыми переносами строки, а не отдельными абзацами.Благодаря этому последующие строки текста будут ближе друг к другу, чем при использовании абзаца.
	Изображение	Автономный	Для отображения изображения внутри веб-страницы используйте этот элемент. Убедитесь, что вы указали атрибут `src` , чтобы указать имя файла изображения, которое вы хотите отобразить в браузере.
	Якорь	Контейнер	Элемент привязки является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 6.

Как создать HTML документ — Программирование с нуля

Создание вашего первого HTML-документа

Шаг 1. Создание файла HTML

Шаг 2. Введите код HTML

Шаг 3. Сохраните HTML документ

Разбор HTML кода

HTML-теги и элементы

Создание html-страницы | Nejalko.ru — информационные технологии, web-разработка и самообразование

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

Структура документа и веб-сайта — Изучение веб-разработки

Активное обучение: исследование кода для нашего примера

Несемантические обёртки

Перенос строки и горизонтальный разделитель

Самостоятельная работа: создайте свою собственную карту сайта

Начало работы с HTML — Изучение веб-разработки

Активное изучение: создание вашего первого HTML элемента

Вложенные элементы

Nesting_elements

Блочные и строчные элементы

Block versus inline elements

Пустые элементы

Empty elements

Активное изучение: Добавление атрибутов в элемент

Active learning: Adding attributes to an element

Булевые атрибуты

Boolean attributes

Опускание кавычек вокруг значений атрибутов

Omitting quotes around attribute values

Одинарные или двойные кавычки?

Single or double quotes?

Активное изучение: Добавление элементов в ваш HTML-документ

Active learning: Adding some features to an HTML document

Пробелы в HTML

Whitespace in HTML

Создание простой HTML-страницы — Уроки HTML, CSS

3. Создание html — документов ,Web-страницы

3.1. Классификация html-редакторов.

Создание и редактирование HTML-документа с помощью Microsoft Word 2002

В ЭТОЙ ЗАДАЧЕ

Метод 1

Метод 2

Сводка

Как создать HTML-страницу

Начало работы

Создание вашего первого HTML-документа

Шаг 1. Создание файла HTML

Шаг 2. Введите HTML-код

Шаг 3: Сохранение файла

Расшифровка кода

Теги и элементы HTML

Учебное пособие: создание полного HTML-документа

Совет

Где все картинки?

Note

10 самых важных элементов (и еще несколько)

Примечание

Наймите меня!

Незаменимые навыки

Предыдущий опыт работы

Проверка страниц на наличие ошибок

Темы обзоров

Независимая практика

Document.createElement () - Веб-API | MDN

Параметры

Возвращаемое значение

Базовый пример

HTML

JavaScript

Пример веб-компонента

Добавить комментарий Отменить ответ

Рубрики

`Добавить комментарий Отменить ответ`