Содержание

Как создать HTML страницу Урок HTML | Урок 1. Как создать HTML страницу. Web-страница с изображениями и текстом | Уроки MODx Evo

Как создать свой сайт? Уроки HTML и CSS

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

После изучения этого урока Вы уже научитесь создавать первую web-страничку, как на рисунке 1.

Рисунок 1

1. Структура html-документа

Файлы html имеют расширение .htm или .html.

Содержат один тип управляющих конструкций – теги (tags) – дескрипторы. Все теги  заключены в угловые скобки < >.

Обычно теги парные: начальный и конечный теги. Начальный – <>, конечный </>, например <h2> и </h2>

Парный тег называют еще контейнерный.

Некоторые теги не имеют обязательного парного тега, такой тег называют

одиночный. Закрывается такой тег написанием правого слеша перед закрывающей угловой скобкой, например <br />

Структура html-документа выглядит следующим образом (рисунок 2).

Рисунок 2

Пояснения к листингу на рисунке 2

В первой строке конструкция DOCTYPE означает один из стандартов верстки web-страницы.

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

Между тегами <head> и </head> содержится заголовочная часть. В нее входит конструкция <title>

и </title>. Это название при загрузке документа появляется в строке заголовка браузера (рисунок 3).

Рисунок 3

 Запись   <meta content=»charset=windows-1251″ /> означает кодировку кириллицы, чтобы буквы корректно отображались в браузере. Если кодировку не прописывать, шрифты иногда могут отображаться следующим образом (рисунок 4)

Рисунок 4

Та же страничка после вставки кодировки (рисунок 5)

Рисунок 5

Примечание: вместо кодировки charset=»windows-1251″

можно использовать кодировку charset=»utf-8″, которая позволяет создавать мультиязычные сайты, так как все существующие в мире символы в ней присутствуют. В этом случае в Notepad++ необходимо до верстки и сохранения html-файла выбрать из верхнего меню Кодировки – Кодировать в UTF-8 без BOM (UTF-8 without BOM)

Для создания первого документа этой информации достаточно.

 Практическое задание 1

1. Создайте папку, назовите ее myhouse. Имена всех папок и файлов необходимо создавать латинскими строчными буквами,

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

Код web-страницы будем писать в Блокноте. Лучше пользоваться не тем Блокнотом, который идет в поставке Windows, а более «продвинутым», например Notepad++. Дистрибутив Notepad++ есть в папке CD/distr.

2. Откройте Notepad++. Убедитесь, что установлена кодировка ANSI, для этого в меню в пункте Кодировки, установите позицию Кодировать в ANSI. 

3. Наберите в Notepad++ код из листинга на рисунке 2.

Код в листинге на рисунке 2 в дальнейшем будет служить нам шаблоном, чтобы каждый раз не набирать структуру html-документа. Конструкцию DOCTYPE скопируйте отсюда (запоминать и заучивать ее не надо). 

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

4. Сохраните файл под именем shablon.html в папке myhouse, при этом в поле Тип файла установите All types (рисунок 6), иначе Ваша web-страничка потом не откроется в браузере.

Рисунок 6

5. После сохранения запустите shablon.html двойным щелчком. В результате Ваш файл будет выглядеть следующим образом (рисунок 7).

Рисунок 7

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

6. Внутри папки myhouse создайте папку public_html. Таким именем обычно называется папка, в которой хранится сайт при размещении на настоящем хостинге (также эта папка может называться www).

7. Сохраните файл shablon.html в папке public_html под новым именем main.html.

8. Из папки CD/html_css_1

откройте файл text_main.txt в Notepad++, а также откройте файл, сохраненный под именем main.html

9. Скопируйте весь текст из файла text_main.txt и вставьте в файл main.html вместо фразы «Содержимое web-страницы». В теге <title> напишите слово «Главная». Вот так <title>Главная</title>.

10. Сохраните изменения и просмотрите файл main.html в браузере. Вы увидите неотформатированный текст. Даже переносы строк, которые есть в исходном тексте, браузер не делает (рисунок 8).

Рисунок 8 

2. Форматирование web-страницы тегами HTML

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

Теги предназначены для форматирования текста web-страницы. Список тегов более подробно можно посмотреть в папке CD/Справочник HTML в справочнике html401_ru.chm (в верхнем меню пункт элементы).

Рассмотрим некоторые из тегов.

Элементы h1, h2, h3, h4, h5, h6

Структурирование тела документа выполняется внутри элемента

<body> с помощью заголовков, задаваемых элементами h2, h3, h4, h5, h5, h6.

Элементы заголовков являются парными, поэтому должны имеет открывающий <h1> и закрывающий </h1> теги.

HTML располагает шестью уровнями заголовков: h2 (самый верхний), h3, h4, h5, h5 и h6 (самый нижний). Функции элементов заголовков подобны обычным стилям заголовков в текстовых редакторах.

Действие этих шести тегов представлено на рисунках ниже. На одном рисунке исходный код (рисунок 9), на другом – вид в браузере (рисунок 10).

Рисунок 9

Рисунок 10

Разделение текста на абзацы

Тег <p> задает начало абзаца и вставляет сверху абзаца расстояние – отступ для отделения этого абзаца от предыдущего.

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

Тег <br /> позволяет выполнить перенос оставшейся части текста абзаца на следующую строку. Это непарный тег и в отличие от тега абзаца не увеличивает интервал между строками.

Практическое задание 2

1. Отформатируйте заголовок «Каталог архитектурных проектов» с помощью тегов <h2> и </h2>.

2. Отформатируйте заголовок «Проекты для Вашего будущего дома» с помощью тегов <h3> и </h3>.

3. Отформатируйте заголовки «Проекты домов» и «Площади домов» с помощью тегов <h4> и </h4>.

4. Основной текст разделите на абзацы с помощью тега <p>. Внутри первых двух абзацев используйте тег <br /> для переноса строки. В результате Ваш код должен выглядеть следующим образом (рисунок 11).

5. Просмотрите результат в браузере.

Рисунок 11

Маркированные и нумерованные списки

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

Тег <ul>…</ul> формирует маркированный список.

Тег <ol>…</ol> формирует нумерованный список.

Отдельный элемент списка как в  <ul>, так и в <ol> формируется с помощью тега <li>.

Практическое задание 3

1. Создайте нумерованный список под заголовком «Проекты домов».

2. Создайте маркированный список под заголовком «Площади домов». Ваш код будет выглядеть следующим образом (рисунок 12).

Рисунок 12

3. Просмотрите страницу в браузере.

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

Пример вложенного списка приведен на рис. 13

Практическое задание 4

  1. Реализуйте в новом файле код, приведенный на рисунке 13.
  2. Сохраните файл в папке myhouse под именем spisok_vlozh.html. Результат на рис. 13

Рисунок 13. Пример вложенного списка

 

Начертания шрифтов

Тег <b>…</b> – позволяет отобразить текст полужирным шрифтом.

Тег <i>…</i> – позволяет отобразить текст в курсивном начертании.

Тег <u>…</u> – отображает подчеркнутый текст.

Например:

В этом случае текст будет отображен <b><i>жирным курсивом</i></b>, но не подчеркнутым.

А в этом случае текст будет написан <b><i><u>жирным подчеркнутым курсивом</u></i></b>.

Нижние и верхние индексы

Тег <sub> и </sub> позволяет опустить текст на полстроки ниже обычного текста.

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

Практическое задание 5

1. Отформатируйте в первом абзаце название myhouse.ru полужирным шрифтом (рисунок 14).

Рисунок 14

2. Отформатируйте во втором абзаце фразу «Более 95% проектов» подчеркнутым курсивом (рисунок 15).

Рисунок 15 

3. Отформатируйте верхние индексы в тех местах, где используются квадратные метры (рисунок 16).

Рисунок 16 

4. Сохраните файл. Просмотрите через браузер. Web-страница должна выглядеть следующим образом (рисунок 17).

Рисунок 17

3. Вставка изображений

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

Для вставки изображений используется тег <img>. Обязательным для этого тега является атрибут src (от английского SouRCe – источник). Он определяет путь до графического файла, изображение которого должно быть выведено на web-странице.

Для вставки изображения используется команда <img src=»Имя файла» />

Например: <img src=«image1.jpg« alt=»Картинка» />

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

Графические файлы могут быть в формате jpg, gif, png и обязательно в цветовой модели RGB.

Практическое задание 6

1. После списка площадей домов вставьте в web-страницу изображения проектов коттеджей project_1.jpg и project_2.jpg из папки CD/ html_css_1. Для этого сначала скопируйте два этих изображения в ту папку, в которой расположен файл main.html. Код вставки изображений будет выглядеть следующим образом (рисунок 18).

Рисунок 18

2. Просмотрите результат в браузере (рисунок 19).

Рисунок 19

 

В основном принцип использования тегов HTML должен быть понятен. Они используются по одному и тому же принципу: если тег контейнерный, то есть открывающий и закрывающий тег. Если тег одиночный, то закрывающего тега нет, в этом случает правый слэш пишется до закрывающей угловой скобки, например <br />. Является ли тег контейнерным или одиночным Вы всегда можете посмотреть в спецификации html401_ru.chm в разделе «элементы».

4. Адресация внутри сайта

В нашем первом уроке «Как создать HTML-страницу» мы разберем понятия адресации в HTML.

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

Существует два вида адресации:

  • абсолютная;
  • относительная.

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

Рисунок 20

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

Пример 1

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

<img src=»pic.jpg» />

Рисунок 21

Практическое задание 7

Реализуйте пример 1 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

 

Пример 2

Изображение pic.jpg находится в папке folder_1. HTML-документ расположен за пределами папки folder_1. Т.е. в файловой системе сайта HTML-документ расположен на один уровень выше, чем изображение (рисунок 22). Необходимо войти в папку folder_1, затем присоединить изображение

<img src=»folder_1/pic.jpg» />

Рисунок 22

Практическое задание 8

Реализуйте пример 2 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

 

Пример 3

Изображение pic.jpg находится в папке folder_1, которая в свою очередь лежит в папке folder_2. HTML-документ расположен за пределами этих папок (рисунок 23). Таким образом, HTML-документ расположен на два уровня выше, чем изображение. Необходимо:

  • войти в папку folder_2,
  • затем войти в папку folder_1,
  • затем присоединить изображение.

<img src=»folder_2/folder_1/pic.jpg» />

 

Рисунок 23

Практическое задание 9

Реализуйте пример 3 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

 

Пример 4

HTML-документ находится в папке folder_1. Изображение находится за пределами папки folder_1. Т.е. HTML-документ расположен на один уровень ниже, чем изображение (рисунок 24). Необходимо выйти из папки folder_1, затем присоединить изображение. Выход из папки обозначается конструкцией ../ (две точки и слэш вправо).

<img src=»../pic.jpg» />

Рисунок 24

Практическое задание 10

Реализуйте пример 4 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

 

Пример 5

HTML-документ находится в папке folder_1, которая в свою очередь находится в папке folder_2. Изображение находится за пределами этих папок. Таким образом, HTML-документ расположен на два уровня ниже, чем изображение (рисунок 25). Необходимо:

  • выйти из папки folder_1,
  • выйти из папки folder_2,
  • присоединить изображение.

Так как надо выйти два раза, то и конструкция ../ повторяется два раза.

<img src=»../../pic.jpg» />

Рисунок 25

Практическое задание 11

Реализуйте пример 5 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

 

Пример 6 (рисунок 26)

Необходимо:

  • выйти из папки folder_1,
  • выйти из папки folder_2,
  • зайти в папку folder_3,
  • зайти в папку folder_4,
  • присоединить изображение pic.jpg

<img src=»../../folder_3/folder_4/pic.jpg» />

Рисунок 26

Практическое задание 12

Реализуйте пример 6 (создайте папки, файл doc.html, возьмите любое изображение). Изображение

должно быть вставлено в web-страницу doc.html.

 

Пример 7 (рисунок 27)

Необходимо:

  • выйти из папки folder_1,
  • выйти из папки folder_2,
  • выйти из папки folder_3,
  • войти в папку folder_4,
  • присоединить изображение pic.jpg.

Так как выйти надо три раза, то и конструкция ../ повторяется три раза.

<img src=»../../../folder_4/pic.jpg» />

Рисунок 27

Практическое задание 13

Реализуйте пример 7 (создайте папки, файл doc.html, возьмите любое изображение). Изображение

должно быть вставлено в web-страницу doc.html.

 

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

 Практическое задание 14

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

<img src=«../../../../../../folder_1/folder_2/folder_3/image.jpg» />

2. Разработайте собственный пример вставки изображения в html-документ, чтобы он содержал и выход из папок, и вход в папки. Пример должен отличаться от всех вышеприведенных примеров.

 

В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:

  • shablon.html
  • main.html
  • spisok_vlozh.html
  • внутри папки myhouse должна быть папка public_html с файлами будущего сайта
  • семь примеров на относительную адресацию и два примера в качестве контрольных из практического задания 14

web-grafika.pro

HTML-изображения

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

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

Вставка изображений в HTML-документ

1. Тег <img>

Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <p> или <div>.

Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению:

<img src="image.png" alt="Пример кода">

Для тега <img> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <img>
АтрибутОписание, принимаемое значение
altАтрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения".
crossoriginАтрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous".
heightАтрибут height задает высоту изображения. Может указываться в px или %.
Синтаксис: height: 300px.
ismapАтрибутismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент <img> является потомком элемента <a> с действительным атрибутом href.
Синтаксис: ismap.
longdescURL расширенного описания изображения, дополняющее атрибут alt.
Синтаксис: longdesc="http://www.example.com/description.txt".
srcАтрибут src задает путь к изображению.
Синтаксис: src="flower.jpg".
sizesЗадаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, указанных через запятую.
srcsetСоздаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src. Значением атрибута является одна или несколько строк, разделенных запятой.
<img src="flower.jpg"
  srcset="
    img/flower-mobile.jpg 320w,
    img/flower-wide-mobile.jpg 480w,
    img/flower-tablet.jpg 768w,
    img/flower-desktop.jpg 1024w,
    img/flower-hires.jpg 1280w"
 
  alt="Роза в моём саду">
usemapАтрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа #. Значение ассоциируется со значением атрибута name или id тега <map> и создает связь между элементами <img> и <map>. Атрибут нельзя использовать, если элемент <map> является потомком элемента <a> или <button>.
Синтаксис: usemap="#mymap".
widthАтрибут width задает ширину изображения. Может указываться в px или %.
Синтаксис: width: 100%.
1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

1.2. Размеры изображения

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

1.3. Форматы графических файлов

Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.

Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.

Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат APNG (Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.

Формат SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.

Формат BMP (Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.

Формат ICO (Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Тег <map>

Тег <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибут name для тега <map> должно соответствовать имени в атрибуте usemap элемента <img>:

<img src="url" usemap="#имя_карты">
<map name="имя_карты">
...
</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.

3. Тег <area>

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

<map name="имя_карты">
<area атрибуты>
</map>
Таблица 2. Атрибуты тега <area>
АтрибутКраткое описание
altЗадает альтернативный текст для активной области карты.
coordsОпределяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
для круга — координаты центра и радиус круга;
для прямоугольника — координаты верхнего левого и правого нижнего углов;
для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
downloadДополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
hrefУказывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
hreflangОпределяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
mediaОпределяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
relДополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
shapeЗадает форму активной области на карте и ее координаты. Может принимать следующие значения:
rect — активная область прямоугольной формы;
circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.
targetУказывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
typeУказывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint.

Рис. 1. Пример разметки изображения для создания карты

2) Задаем имя карты, добавив его в тег <map> с помощью атрибута name. Это же значение присваиваем атрибуту usemap тега <img>.

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

<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg" alt="flowers_foto" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50" href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank"> 
</map>
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием

html5book.ru

Пример самостоятельного создания собственного сайта

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

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

Во первых необходимо создать папку к примеру в «Мои документы» и назвать «htdocs».В эту папку вы должны помещать все документы связанные с созданием сайта.


<html>
<head&gt
<title> </title>
</head>
<body>
</body>
</html>


Для описания страницы применяются теги.В основном они парные,то есть один открывает тег например <html>,а другой закрывает </html>.
Напишем необходимый минимальный набор тегов.Для этого можно использовать любой текстовый редактор,сохраняющий документ в формате HTML,например «Блокнот» — стандартный редактор в Windows.При сохранении в этом редакторе в строке «тип файла» выберите — Все файлы,а в строке «имя файла» — ваше имя файла и формат-html.Примерно вот так — «site.html».


Пишем код таблицы между тегами <body> и </body>.
<html>
<head&gt
<title> </title>
</head>
<body>
<table Border=0>
<tr>
<td></td> <td></td> <td></td>
<tr>
<td></td> <td></td> <td></td>
<tr>
<td></td> <td></td> <td></td>
</tr>
</table>
</body>
</html>

Далее приступим к созданию таблицы.Составим таблицу, что бы разместить наши данные в тех частях страницы в которых мы хотим их видеть.Таблицы для того и служат чтобы представлять данные по всей странице.Сделаем таблицу из 3 строк <tr> и 3 столбцов <td> всего 9 ячеек.

Пишем код таблицы(здесь и далее вставляемые элементы будут выделены красным цветом.)

Контент сайта пишется в ячейке между тегами <td> и </td>


Так таблица будет выглядеть :

<html> <head&gt
<title> </title> </head>
<body>
<table Border=0>
<tr>
<td>1 ячейка</td> <td>2 ячейка</td> <td>3 ячейка</td>
<tr>
<td>4 ячейка</td> <td>5 ячейка</td> <td>6 ячейка</td>
<tr>
<td>7 ячейка</td> <td>8 ячейка</td> <td>9 ячейка</td>
</tr>
</table>
</body> </html>
<html>
<head&gt
<title> </title>
</head>
<body>
<table Border=0>

<tr bgcolor=»#B3FDB2″>
<td></td>
<td> </td>
<td ></td>
</tr>

<tr bgcolor=»#D0D2FF»>
<tdheight=»8%»></td>
<td></td>
<td height=»8%»></td>
</tr>

<tr bgcolor=»#FFF0F0″>
<td ></td>
<td></td>
<td ></td>
</tr>
</table>
</body>
</html>

Теперь приступим к точной разметке таблицы введя теги width и height в тег <table> и <td> таблицы.
Ширину width и высоту height таблицы можно задавать в пикселях или в процентах от размера монитора.

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

В теге <table> установим высоту и ширину=100%. В теге <td> указываем проценты от размера таблицы а также желательно сразу указать цвет строк bgcolor,чтобы таблица была видна.


Посмотрите страницу с таблицей в малом окне.Щелкните по фото ниже.


<html>
<head&gt
<title> </title>
</head>
<body>
<table Border=0>
<tr bgcolor=»#B3FDB2″>
<td></td>
<td> <h3>Мой сайт о дизайне</h3></td>
<td ></td>
</tr>
<tr bgcolor=»#D0D2FF»> <tdheight=»8%»></td>
<td></td>
<td height=»8%»></td>
</tr>
<tr bgcolor=»#FFF0F0″><td></td>
<td> <h4>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h4>
<</td>
<td></td>
</tr>
</table> </body>
</html>

Далее будем наполнять содержимым наш сайт

Напишем во 2 ячейке название страницы,сразу задайте размер шрифта <h3>Мой сайт о дизайне </h3>,
в 5 ячейке <h4> Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h4>


А теперь добавим в наш сайт картинки дизайна.Чтобы вставить картинку или фото на сайт применяется тег <img src=»имя.jpg»>.Когда будете добавлять свои картинки на сайт,замените имя картинки на своё и поместите их в папку сайта.


<html>
<head&gt
<title> </title>
</head>
<body>
<table>
<tr bgcolor=»#B3FDB2″>
<td><img src=»landshaft1.jpg»></td>
<td> Мой сайт о дизайне</td>
<td ><img src=»landshaft2.jpg»></td>
</tr>
<tr bgcolor=»#D0D2FF»> <tdheight=»8%»></td>
<td></td>
<td height=»8%»></td>
</tr>
<tr bgcolor=»#FFF0F0″><td>></td>
<td>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</td>
<td ></td>
</tr>
</table> </body>
</html>

Посмотрите страницу в малом окне.Щелкните по фото ниже.

<html>
<head&gt
<title>Создание сайта самостоятельно </title>
</head>
  <body>
<table>
<tr bgcolor=»#B3FDB2″>
<td><img src=»landshaft1.jpg»></td>
<td> Мой сайт о дизайне</td>
<td ><img src=»landshaft2.jpg»></td></tr>

<tr bgcolor=»#D0D2FF»>
<tdheight=»8%»><a href=»site5.html»&gt Главная</a></td>
<td><a href=»site5.html»&gt Садовый дизайн</a></td>
<td height=»8%»><a href=»site5.html»&gtДизайн интерьера</a></td></tr>

<tr bgcolor=»#FFF0F0″>
<td> </td>
<td>Мы занимаемся дизайном дома и приусадебного участка. Мы можем спроектировать ландшафты загородного дома.</td>
<td> <a href=»site5.html»&gtДизайн для кухни</a></td>
</tr>
</table>
</body>
</html>

Приступим к дальнейшей вставке содержимого в сайт.Придумайте название сайта и впишите его в заголовок между тегами <title> и </title>

Заголовок сайта будет невидим в рабочей области и нужен для поисковых систем Интернета.

Седьмую ячейку отдадим под меню. Заполните ячейки содержимым сайта к примеру ,в 4 ячейке- Главная, в 5 ячейке-Садовый дизайн, в 6 ячейке-Внутренний дизайн, в 9 ячейке-Кухонный дизайн.

На 4,5,6,9 ячейку тоже создаются вторые страницы со ссылками на них

Посмотрите первую страницу в малом окне.Щелкните по фото ниже.

Смотрим первую страницу сайта на полном экране.
Осталось немного,увеличить шрифт и расположить его в середине.
В Мой сайт о дизайне добавьте размер шрифта <h4> и измените шрифт основного текста значением <h3></h3> а также разместите эти надписи по центру <center></center>

<html>
<head&gt
<title>Создание сайта самостоятельно </title>
</head>
< body> <table>

<tr bgcolor=»#B3FDB2″>
<td><img src=»landshaft1.jpg»></td>
<td><center> <h4> Мой сайт о дизайне</h4></center></td>
<td ><img src=»landshaft2.jpg»></td>
</tr>

<tr bgcolor=»#D0D2FF»> <tdheight=»8%»><center><a href=»site1-2.html»&gt Главная</a></center></td>
<td><center><a href=»site5.html»&gtСадовый дизайн</a></center></td>
<td height=»8%»><center><a href=»site5.html»&gtДизайн интерьера</a></center></td>
</tr>

<tr bgcolor=»#FFF0F0″><td> </td><td><center><h3>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h3></center></td>

<td> <center><a href=»site5.html»&gtДизайн для кухни</center></a></center></td>
</tr>
</table>
</body>
</html>

Посмотрите первую(главную) страницу


Вот теперь вы можете посмотреть первую(главную) страницу

Создайте вторую страницу сайта.Скопируйте минимальный набор тегов которые мы писали в самом начале создания сайта и вставьте в текстовый редактор. Сохраните его под именем site2.html в папке для файлов сайта,которую вы создали в самом начале урока.Это и будет вторая страница сайта на которую мы будем делать ссылку из первой(главной) страницы.Откройте site2.html в текстовом редакторе и напишите <h4> Я покажу вам свои фотографии </h4> а также задайте цвет <font color=»#FF0000″> </font> и размер <h3></h3>

<html>
<head&gt
<title> </title>
</head>
  <body font color=»#FF0000″><h3>Я покажу вам свои фотографии</h3></font>
</body>
</html>

Вставьте на страницу фотографии

<img src=»land1.jpg»>
<img src=»land2.jpg»>
Вы можете вставить свои фото,только укажите их размер в пикселях: <img src=»имя.jpg»>, а также поместите эти фото в папку с сайтом.

Это полный код вашей второй страницы
<html>
<head&gt
<title> </title>
</head>
  <body><h3>Я покажу вам свои фотографии</h3>
<img src=»land1.jpg»>
<img src=»land2.jpg»>
</body>
</html>

Посмотрите вторую страницу

Смотрим вторую страницу в большом окне.

Сделаем ссылку на эту страницу в первой(главной) странице.
Ссылки создаются тегом <a href=»имя страницы.html»>Ссылка</a>
Откройте первую страницу в текстовом редакторе и напишите в 7 ячейке таблицы ссылку <a href=»site2.html»>Мои фото</a>

Посмотрите полный код вашей главной страницы

<html>
<head&gt
<title> </title>
</head>
<body>
<table>
<tr bgcolor=»#B3FDB2″>
<td ><img src=»landshaft1.jpg»></td>
<td><center><h4>Мой сайт о дизайне</h4></center></td>
<td><img src=»landshaft2.jpg»></td>
</tr>

<tr bgcolor=»#D0D2FF»>
<tdheight=»8%»><center><a href=»site1-2.html» >Главная</a></center></td>
<td><center><a href=»site5.html» >Садовый дизайн</a> </center></td>
<tdwidth=»20%»height=»8%»><center><a href=»site5.html» >Дизайн интерьера</a></center>
</td> </tr>

<tr bgcolor=»#FFF0F0″>
<td> <a href=»site2.html» >Мои фото<a></td>
<td><center><h3>Мы занимаемся дизайном дома и приусадебного участка.
Мы можем спроектировать ландшафты загородного дома.</h3></center></td>

<td><a href=»site5.html»&gtДизайн для кухни</a></center>
</td>
</tr>
</table>
</body>
</html>

Для страниц со ссылок:
Садовый дизайн (site5.html)
Дизайн интерьера (site7.html)
Дизайн для кухни (site8.html)
создаются отдельные страницы.

Вот мы и сделали сайт и вы его можете посмотреть здесь

В папке htdocs которую вы создали в начале урока должны быть файлы
tab1.html
tab3.html
landshaft1.jpg
landshaft2.jpg
site1-1.html
site1-2.html
site1-3.html
site2.html
site5.html
site7.html
site8.html
land1.jpg
land2.jpg

Важные советы

Когда будете делать свой сайт, главную или первую страницу сайта (у нас она называется site1-3.html) всегда сохраняйте под именем index.html При загрузке с сервера она будет загружаться первой, и возьмите себе за правило сразу ее так и называть, в дальнейшем вы не будете путаться при создании ссылок.

Папка, в которой будете хранить файлы для сайта должна называться htdocs. Имена папок и файлов сохраняйте с английскими буквами. Создавая сайт в одном браузере обязательно просмотрите его в других,потому что сайт созданный к примеру в OPERA может совсем по другому выглядеть к примеру в INTERNET EXPLORER

Мы рассмотрели создание самого простого сайта.Я надеюсь что вы поняли основы создания WEB-страниц.Для того что бы сделать хороший сайт,который пользовался бы успехом в Интернете, надо знать намного больше .К примеру вам надо изучить языки JavaScript,PHP,MySQL и другие ,каскадные таблицы CSS,в общем все это придет вам со временем.

Удачи!

sitesaid.ru

Как создать WEB-страницу или знакомство с HTML : WEBCodius

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

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

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

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

Браузер — это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам. Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы. С помощью команд — тегов, HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например <p>, <h2>, <table>.

Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционалом и оптимизацией под поисковые системы.

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

Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.

Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad) (вообще в дальнейшем для редактирования html-кода я советую использовать бесплатный текстовый редактор Notepead++). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку  об автомобилях. Итак, откроем Блокнот и наберем в нем текст:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Пример Web-страницы</title>
</head>
<body>
<h2 align=»center»>Сайт об автомобилях.</h2>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об <strong>автомобилях</strong>. На сайте есть описания многих импортных и отечественных автомобилей.</p>
</body>
</html>

Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:

Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:

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

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

Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент: <h2 align=»center»>Сайт об автомобилях</h2>. Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги <h2> и </h2>. Что же такое тег в html языке?

Тег HTML —  это обычные слова и символы, заключенные в угловые скобки, например <h2>, <p>, <body>. Так тег <h2> является открывающим тегом, тег </h2> закрывающим тегом, а текст между ними называется содержимым тега. Также тег <h2> и тег </h2> называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще  элементы состоящие из одного открывающего тега:

Так парный тег <h2> определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы <h2> — <h6>.

Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент <h2> является блочным элементом.

Далее идет парный тег <p>, который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент <p> также является блочным элементом и как мы видим он начинается с новой строки и между заголовком <h2> и абзацем есть отступ.

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

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

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

Вы могли заметить, что открывающий тег <h2> кроме названия содержит еще какой-то текст: align=»center». Это атрибут тега, который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение взятое в кавычки:

В наше конкретном случае, атрибут align тега <h2> задает выравнивание текста. Так значение center указывает браузеру, что содержимое тега <h2> необходимо выровнять по центру.

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

Структура WEB — страницы. Основные html теги.

Для корректного отображения страницы в браузере, в html-коде обязательно наличие следующих парных тегов: <html>, <head> и <body>.

Во-первых весь ваш html-код должен быть заключен в теги <html> и </html>. Они сообщают браузеру, что страница содержит html-код.

Кроме этого в коде страницы должны быть разделы заголовка и тела документа. Раздел заголовка, или его еще называют шапка, состоит из парного тега <head> и его содержимого. В этом разделе помещают сведения о параметрах страницы, не отображаемые на экране и нужные только браузеру. В нашем примере раздел заголовка такой:

<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Пример Web-страницы</title>
</head>

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

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

<html>
<head>
…служебная информация…
</head>
<body>
…содержимое WEB-страницы…
</body>
</html>

Метаданные html страницы

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

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

и

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

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

Следующий метатег <meta> сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута content тега <meta>. Очень важно задавать кодировку, чтобы браузер корректно отображал содержимое нашей страницы. Если вы заметили, то тег <meta> не имеет закрывающего тега. Это так называемый одиночный тег, или элемент состоящий из одного открывающего тега.  Вообще с помощью тега <meta> можно задавать множество параметров важных как для браузера, так и для поисковиков.

Тип HTML документа (doctype)

Осталось рассмотреть один тег нашей первой WEB-страницы, который находится в самом начале html-кода: <!doctype html>. Данный тег задает версию языка HTML, на котором написана страница, и его версию. Он необходим, чтобы браузер понимал согласно какому стандарту отображать веб-страницу. Метатегов <doctype> существует несколько видов, и они различаются в зависимости от версии языка, на котором написан html-код. Так, наш тег <!doctype html> указывает на версию языка HTML5.

Итак, подведем итоги:

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

2. HTML — это язык, который используется для создания web-страниц. HTML — это аббревиатура HyperText Markup Language (язык гипертекстовой разметки).

3. WEB-страницы состоят из html-тегов и их содержимого. Теги состоят из символов <, > и имени внутри них. Имена тегов можно писать как прописными(большими), так и строчными(маленькими) буквами. Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк. Теги бывают парные и одиночные, а также теги могут быть вложенными друг в друга.

4. Открывающий тег + содержимое + закрывающий тег образуют элемент. Бывают также элементы состоящие из одного открывающего тега. В HTML есть блочные элементы и строчные. Блочные элементы всегда выводятся с новой строки и имеют отступ сверху и снизу от соседних элементов. Строчные элементы осуществляют логическое форматирование текста.

5. Открывающие HTML-теги могут содержать атрибуты, которые помещаются между именем тега и символом > и отделяются от имени тега пробелом. Если в теге несколько атрибутов, то они отделяются друг от друга пробелами. Атрибуты бывают обязательные и необязательные.

6. Любая WEB-страница должна содержать в себе две секции: секция заголовков <head> и секция тела <body>. Эти секции должны находиться внутри тега <html>. Это основные теги html, без которых не обходится ни одна html-страница.

7. Вначале HTML-кода должен идти метатег <doctype>, указывающий версию языка.

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

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

На этом у меня все!!! До встречи в следующих постах!

webcodius.ru

Создание простой 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) Для начала необходимо указать всю важную информацию о странице, прежде чем приступать к ее наполнению. Во-первых, укажем название сайта с помощью тега <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>
Основную часть информации между тегами мы уже указали. Вы можете дополнительно добавить другие мета-теги (вроде описание сайта, ключевых слов и т.д.)

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) Добавим текст. Он будет располагаться между тегами <p> и </p>, которые определяют абзацы. 


<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
Перепечатка разрешена только с указанием ссылки на источник.

monsterart.ru

Структура HTML-кода | htmlbook.ru

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

Пример 4.1. Исходный код веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h2>Заголовок</h2>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD
DOCTYPEОписание
HTML 4.01
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>В этой версии HTML только один доктайп.
XHTML 1.0
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.

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

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.

 <html>

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

 <head>

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

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

 <title>Пример веб-страницы</title>

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере

Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.

<body>

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

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

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

 <!-- Комментарий -->

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

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

 <p>Первый абзац.</p>

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

 <p>Второй абзац.</p>

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

Последним элементом в коде всегда идет закрывающий тег </html>.

htmlbook.ru

Как вставить картинку в HTML — добавление изображений в веб-страницу

За вставку картинок в HTML-документ отвечает тег <img> и его атрибуты, главным из которых можно считать src, задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.

Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):

<img src=”image.png”>

Раньше у тега <img> был ещё один обязательный атрибут — alt, но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.

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

Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:

<img src="image.png" alt="Просто картинка">

Навигационная карта

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

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

  • <map> — контейнер, внутри которого описывается карта изображения.
  • <area> — тег внутри <map>, описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов <area> и придётся поставить. Связка <map>—<area> работает точно так же, как связки <ol>—<li> и <ul>—<li>, создающие списки.
  • shape — атрибут тега <area>, задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
  • cords — определяющий координаты области атрибут. Также принадлежит тегу <area>. Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника — координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
  • usemap — атрибут тега img, который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере <map> описана карта именно этого рисунка.

Пример карты изображения

Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.

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

<img src="map.jpg" alt="Простейшая карта" usemap="#social">

2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).

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

4. С помощью тегов area определяем активные области:

<area shape="rect" coords="0,0,384,114" href="http://ok.ru" alt="Одноклассники" target="_blank">
<area shape="rect" coords="0,114,384,228" href="http://vk.com" alt="ВКонтакте" target="_blank">

5. Закрываем карту:

Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:

<!DOCTYPE html>
<html>
<head>
    <title>Навигационная карта</title>
</head>
<body>
<img src="map.jpg" alt="Простейшая карта" usemap="#social">
<map name="social">
<area shape="rect" coords="0,0,384,114" href="http://ok.ru" alt="Одноклассники" target="_blank">
<area shape="rect" coords="0,114,384,228" href="http://vk.com" alt="ВКонтакте" target="_blank">
</body>
</html>

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

Полезные ссылки:

www.seostop.ru

No related posts.