Создание html-документов. Создать документ html


Создание html-документов.

28

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

Дескрипотор - это простой элемент разметки, который всегда имеет такой вид: <ДЕСКРИПТОР>. Контейнеров называется пара дескрипторов HTML в форме: <ДЕСКРИПТОР></ДЕСКРИПТОР>. Элемент <ДЕСКРИПТОР>служит для включения, а </ДЕСКРИПТОР> для выключения того же объекта. Например, рассмотрим строчку кода HTML:

<I>Это предложение выделено курсивом</I> А это - нет.

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

Это предложение выделено курсивом. А это - нет.

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

Ниже приведен самый простой документ HTML. Весь документ заключен между дескрипторами <HTML> и </HTML>. Первая часть этого документа содержится в контейнере <HEAD> и </HEAD>, в который в свою очередь помещен контейнер <TITLE> и </TITLE>. И наконец, тело этой страницы находится в контейнере <BODY> и </BODY>

Простейший HTML-документ

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

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

Элемент <BODY>.

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

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

Базовый документ HTML

Данный пример начинается с дескриптора <HTML>, который, как вам уже известно, является обязательным во всех документах HTML. За ним следует дескриптор <HEAD>, открывающий заглавную часть документа. В нем имеется обязательный элемент TITLE. Мы озаглавили этот документ "Образец документа". Раздел заголовка заканчивается дескриптором </HEAD>. И наконец, элемент <BODY> - здесь вы должны поместить основную часть материала вашего документа. Не забудьте закрыть элемент тела дескриптором </BODY> и закончить страницу дескриптором </HTML>.

Поскольку HTML - язык разметки, тело вашего документа включается открывающим дескриптором <BODY>. Все, что идет после этого дескриптора, интерпретируется в соответствии со строгим набором правил, которые сообщают броузеру о содержимом. Тело документа оканчивается закрывающим дескриптором </BODY>.

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

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

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

Атрибуты элемента <BODY>

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

Атрибуты элемента BODY и их назначение

Атрибут

Назначение

ALINK

Определяет цвет, которым выделяется активная ссылка

BACKGROUND

Указывает URL изображения, который следует использовать в качестве фона документа

BGCOLOR

Определяет цвет фона документа

BGPROPERTIES

Если этот атрибут имеет значение fixed, то изображение фона не будет прокручиваться

LEFTMARGIN

Определяет ширину левого поля в пикселях

LINK

Определяет цвет ссылки, которая не была посещена

TEXT

Определяет цвет текста

TOPMARGIN

Определяет ширину верхнего поля в пикселях

VLINK

Определяет цвет ссылки, которая была посещена

studfiles.net

HTML5 | Создание документа

Создание документа HTML5

Последнее обновление: 08.04.2016

Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой текстовый файл, а в качестве расширения файла указать *.html

Создадим текстовый файл, назовем его index и изменим его расширение на .html.

Затем откроем этот файл в любом текстовом редакторе, например, в Notepad++. Добавим в файл следующий текст:

<!DOCTYPE html> <html> </html>

Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration сообщает веб-браузеру тип документа. <!DOCTYPE html> указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.

А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа.

Внутри элемента html мы можем разместить два других элемента: head и body. Элемент head содержит метаданные веб-страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они использутся. Элемент body собственно определяет содержимое html-страницы.

Теперь изменим содержимое файла index.html следующим образом:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <div>Содержание документа HTML5</div> </body> </html>

В элементе head определено два элемента:

  • элемент title представляет заголовок страницы

  • элемент meta определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать кодировку. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.

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

Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM:

После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная кодировка установлена.

Сохраним и откроем файл index.html в браузере:

Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе title заголовок "Документ HTML5", то именно такое название будет иметь вкладка браузера.

Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы.

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

metanit.com

Создание HTML документа (файла). Смена расширения файла

HTML документ - это обычный текстовой файл c расширением .html, который содержит HTML-код. HTML документ иначе ещё называют HTML файлом.

Чтобы из обычного текстового файла (с расширением .txt) сделать HTML документ, нужно сменить расширение с .txt на .html.

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

Windows

  1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
  2. Кликнуть по нему ПКМ → навести курсор на открыть с помощью... → выбрать нужный браузер.

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Заголовок</title> </head> <body> <h2>Мой первый заголовок</h2> <p>Мой первый абзац</p> </body> </html>

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

Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью... → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

Смена расширения файла

Windows:

  1. В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмём сохранить. Всё, HTML документ создан.
  2. Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываем Панель управления → выбираем Параметры папок (в Windows 10 данный пункт называется Параметры проводника) → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов.

С этой темой смотрят:

puzzleweb.ru

.:Самоучитель HTML:. | Создание шаблона HTML-документа.

  • Что такое HTML.

    HTML (HyperText Markup Language ) - язык управления программой, предназначенной для просмотра web-документов (браузером).Основным элементом языка HTML является тэг - последовательность символов, заключенная между угловыми скобками. Тэги бывают двух видов - открывающие и закрывающие. Закрывающие тэги отличаются прямым слэшем "/" после первой угловой скобки, например:

    <p> - тэг, открывающий абзац </p> - тэг, закрывающий абзац

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

    Тэги могут вкладываться друг в друга, например:<b><i>текст</i></b>. В этом случае важно соблюдать последовательность открытия и закрытия:<тэг1><тэг2><тэг3>...</закрытие тэга3></закрытие тэга2></закрытие тэга1>

    HTML-документ является обычным текстовым документом, который можно создать, просмотреть и отредактировать в текстовом редакторе.HTML не реагирует на регистр символов, например, тэг открывающий таблицу может быть написан так-<TABLE>, или так-<table>, или скажем так-<tAbLe>. Лишние пробелы и переносы тоже не учитываются.Можно написать

    <P> Красная строка. Следующая строка</P>и все равно браузер выведет это так:

    Красная строка.Следующая строка.

    (Есть единственное исключение- тэг <PRE>, после которого браузер начинает учитывать пробелы и переносы).
  • Создание документа.

    Итак, создадим простейший документ, который потом можно будет использовать как шаблон для разных HTML-документов.

    Первой строкой документа, написанного на языке HTML должна быть строка, начинающаяся декларацией<!DOCTYPE>. В ней браузер почерпнет информацию о том какому стандарту соответствует документ.Например, строка:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">скажет браузеру, что документ соответствует английскому стандарту HTML 4.0 Transitional DTD.Затем идут следующие строки:<HTML> - необязательный элемент<HEAD>-начало заголовка документа.

    В заголовке располагаются метаданные - информация, позволяющая задать кодовую страницу языка для правильного отображения текста браузером, ключевые слова для индексации страницы поисковыми системами, автора документа и другую информацию. Например, следующая строка укажет браузеру, что надо использовать для вывода текста стандартную кодовую страницу для вывода кириллицы - windows-1251.<META http-equiv="Content-Type" content="text/html; charset=windows-1251">Следующие две строки нужны для индексации вашей страницы поисковыми системами.<META NAME="Description" content="краткое описание страницы"><META NAME="Keywords" content=" ключевые слова через запятую ">Следующая строка укажет язык таблицы стилей CSS.<META http-equiv="Content-Style-Type" content="text/css">Затем следуют описание стилей:<STYLE type="text/css">Зададим красный цвет ссылок.A:link {COLOR: red; TEXT-DECORATION: none}Зададим цвет посещенных ссылок.A:visited {COLOR: maroon; TEXT-DECORATION: none}Зададим цвет ссылки, при клике на ней мышьюA:active {COLOR: fuschia TEXT-DECORATION: none}Зададим цвет ссылки, при наведении на нее мышьюA:hover {COLOR: black; TEXT-DECORATION: underline}Зададим цвет фона документа, и параметры шрифта по умолчаниюBODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}</STYLE> -завершаем таблицу стилей.Затем указывает титул документа - надпись, которая будет выводится в заголовке окна браузера.<TITLE>Моя первая страничка</TITLE></HEAD>- завершаем заголовок.После заголовка открываем тело документа<BODY>Здесь будет содержание нашего документа.И наконец, завершаем тело документа и сам документ.</BODY></HTML>

    Ваш шаблон будет выглядить так:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <META NAME="Description" content="краткое описание страницы"> <META NAME="Keywords" content=" ключевые слова через запятую "> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> A:link {COLOR: red; TEXT-DECORATION: none} A:visited {COLOR: maroon; TEXT-DECORATION: none} A:active {COLOR: fuschia; TEXT-DECORATION: none} A:hover {COLOR: black; TEXT-DECORATION: underline} BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt} </STYLE> <TITLE>Моя первая страничка</TITLE> </HEAD> <BODY> </BODY> </HTML>

    Итак, шаблон создан. Теперь введите следующий текст в тело документа (внутри тэгов <BODY></BODY>Например:<P>Мой первый HTML-документ<A HREF="">ссылка</A></P>

    Сохраните документ например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, черными буквами будет выведен наш текст и красными буквами ссылка, цвет которой изменится на черный, при наведении на ней курсором.

  • www.mas-html.narod.ru

    Принципы создания HTML-страниц - Первый документ HTML

    Первый документ HTML

    Определившись с браузерами и редакторами, рассмотрим структуру документа более внимательно. Если у вас установлен LightPad, то щелкните по кнопке Новый и выберите пункт Файл HTML, а если нет, то наберите в любом другом текстовом редакторе, например, в блокноте (notepad) следующий текст:

    Листинг 1.1. Простейший HTML-документ

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>  <title> </title> </head> <body> </body> </html>

    Это - заготовка (или шаблон) для любого HTML-документа. Если вы сохраните этот текст в файл с расширением htm или html, например, hello.html, а затем откроете в браузере, то увидите пустое окно, что не совсем интересно. Поэтому мы немного модифицируем этот файл. Между <title> и </title> введите фразу: "Мой первый документ HTML", а между <body> и </body> напишите "Всем привет!". Если вы сохраните этот файл и откроете его в браузере, то увидите примерно то, что изображено на рис. 1.3.

    ПРИМЕЧАНИЕ Если вы работаете с LightPad, то сохранять файл перед просмотром необязательно. Это делается автоматически, когда вы нажимаете кнопку просмотра. При этом оригинальное содержимое файла (после последнего сохранения) заносится в специальный буфер, что дает возможность, в случае необходимости, отказаться ото всех внесенных изменений.

    Простейший HTML-документ в окне браузера MSIE 6

    Рис. 1.3. Простейший HTML-документ в окне браузера MSIE 6

    Мы видим, что текст, набранный нами между тегами <title> и </title> отобразился в заголовке окна, а то, что написано внутри <body> - в самом окне браузера. Отметим, что элемент TITLE помещен внутри контейнера HEAD, который является заголовком документа. Помимо TITLE, в заголовке могут располагаться и другие элементы, например, META, однако на текущем этапе мы не будем их рассматривать.

    А пока что можно себя поздравить: своими руками мы только что создали свой первый документ HTML. Как видите, это оказалось совсем несложно!

    Правила XHTML

    Поскольку мы уже говорили об отличиях HTML и XHTML, давайте посмотрим на практике, чем они отличаются. Итак, документ XHTML имеет, во-первых, несколько иной заголовок (DOCTYPE), а во-вторых, требует указания пространства имен в теге HTML. В итоге мы получим документ, приведенный в листинге 1.2.

    Листинг 1.2. Документ XHTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> </title> </head> <body> </body> </html>

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

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

    СОВЕТ Если вы работаете с редактором LightPad версии 4.2 SR1 или выше, то для того, чтобы программа при создании файла сразу добавляла все нужные для XHTML заголовки, зайдите в настройки программы (Сервис -> Настройки) и включите опцию "Синтаксис XHTML".

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

    Еще одним отличием документа XHTML от HTML является требование хорошего форматирования. Заключается оно в том, что все элементы должны иметь как открывающий, так и закрывающий теги, а также недопустимо перекрещивание тегов, т.е. вложение одних элементов в другие должно быть произведено правильно. Иначе говоря, прежде чем закрыть какой-либо элемент HTML, содержащий вложенный элемент, убедитесь в том, что вложенный уже закрыт. Ниже приведен пример кода, где закрывающий тег HTML перекрывает закрывающий тег BODY:

    <html> <body> тело документа... </html> </body>

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

    Гиперссылки

    Основа гипертекста - это ссылки, как на отдельные части документа, так и между различными документами. Подобные ссылки называются гиперссылками. В языке HTML предусмотрен элемент A, при помощи которого и создаются гиперссылки. Давайте создадим еще один документ и назовем его index.html. Его содержание приведено в листинге 1.3.

    Листинг 1.3. Документ HTML с гиперссылкой

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Главная страница </title> </head> <body> Приветствую вас на своей страничке! Вот мое <a href="hello.html">приветствие</a>. </body> </html>

    При просмотре его в браузере мы увидим введенный в части body текст, причем являющееся ссылкой слово будет выделено цветом и подчеркнуто (рис. 1.4). Обратите внимание и на то, что перенос строки не воспринят браузером. Дело в том, что весь текст HTML-файла воспринимается программой просмотра фактически как единая строка, при этом все лишние пробелы, символы конца строки и табуляции просто отбрасываются. Если же вам надо оборвать строку, то можно использовать специальный тег - BR. Он заставляет браузер сделать то, чего вы добиваетесь, нажимая на клавиатуре клавишу Enter при редактировании текста в обычном текстовом редакторе.

    Документ с гиперссылкой

    Рис. 1.4. Документ с гиперссылкой

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

    Листинг 1.4. Ссылка на текст внутри документа

    ... <a href="#ANCHOR1"> Ссылка-1 </a> <br> ... часть документа<br> ... <a name="ANCHOR1"></a> Текст, на который ссылается ссылка-1. ...

    Как видите, тоже ничего сложного. Значок # указывает браузеру, что объект ссылки расположен внутри текущего файла. Параметр NAME задает имя метки. Подобные метки называются якорями (Anchors), и могут состоять из произвольной комбинации латинских букв и (или) цифр. Вместо атрибута NAME можно использовать атрибут ID, что дает возможность ссылаться не только через элементы A, но и "помечать" любые другие элементы, например, заголовки и т.д.

    Ссылки внутри файла и на внешний файл можно комбинировать, например:

    <a href="secondfile.html#ANCHOR1"> Ссылка-2 </a>

    создает ссылку на якорь ANCOR1 в файле secondfile.html. Примеры файлов и работу ссылок вы можете посмотреть в файлах из каталога Part_1/simple. Главное правило в использовании якорей - "не злоупотребляй", поскольку увлечение ими может существенно затруднить навигацию по сайту.

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

    <a href="my_file1.zip">Мой любимый файл</a>.

    Во всех предыдущих примерах подразумевалось, что файл, на который указывает ссылка, и файл с самой ссылкой, расположены в одной и той же директории. Если это не так, то создается относительная ссылка, в которой прописывается часть пути между директорией с исходным документом и файлом-назначением. Для создания такой ссылки сделайте следующее: создайте папку hello внутри папки с документом index.html и переместите в нее файл hello.html. Затем модифицируйте index.html следующим образом: поменяйте строку

    Вот мое <a href="hello.html">приветствие</a> на Вот мое <a href="hello/hello.html">приветствие</a>.

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

    <a href="../index.html">вернуться к главной странице</a>

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

    <a href="../../index.html">Вернуться на два каталога вверх</a>.

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

    [протокол][адрес][порт][путь][имя файла]

    Такой адрес называется URI - Universal Resource Identifier. В качестве протокола, как правило, используется HTTP. И типичный URI выглядит примерно так: "http://www.snkey.net/books/index.html". Если используется другой протокол, например FTP (для передачи файлов), то и URI должен быть соответствующим. Например, файл firefox-5.0a2.en-US.win32.installer.exe, находящийся в каталоге pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/ на FTP-сервере Mozilla, будет иметь следующий URI: ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/firefox-5.0a2.en-US.win32.installer.exe. Сама ссылка будет выглядеть так:

    <a href="ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/firefox-5.0a2.en-US.win32.installer.exe">Скачать Firefox 5 alhpa 2</a>

    Параметр "порт", как правило, явно не указывается, т.к. используются значения по умолчанию - 80 для HTTP и 21 - для FTP. Если же порты используются, то адрес будет выглядеть так:

    http://www.anyhost.ru:8080/hiddendir/foo.html

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

    <a href="mailto:[email protected]">пишите письма!</a>

    Здесь "mailto:" указывает браузеру, что далее следует адрес электронной почты, и при щелчке по ссылке необходимо вызвать почтовую программу. Если вы хотите передать еще и тему сообщения, то после адреса электронной почты укажите "subject". Например, чтобы создать сообщение со строкой "Привет" в качестве темы (subject), надо написать так:

    <a href="mailto:[email protected]?subject=Привет!">пишите!</a>

    Подобным образом создаются и ссылки на news-конференции, только вместо "mailto:" пишется "news:", а вместо адреса электронной почты - имя группы новостей. Иные параметры элемента A, в частности, TARGET, который определяет то, где должна "сработать" ссылка, рассматриваются во второй части книги.

    2011-04-30

    « Web-документы и программы для работы с ними | Основы форматирования документа »

    www.snkey.net

    Как создать HTML-файл, который будет правильно отображаться в браузере?

    Программы редактирования HTML-файлов

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

    Для редактирования HTML-файлов можно использовать стандартные программы, идущие в комплекте любой операционной системы: блокнот в Windows, gedit в Linux/Ubuntu и т.п. Мы же настоятельно рекомендуем установить редактор Notepad++. Его можно скачать по адресу https://notepad-plus-plus.org/.

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

    Установка программы и работа с ней очень проста. Мы не будем подробно разбирать данные вопросы. Оставим это вам, как практическое задание.

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

    Создание простого HTML-файла

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

    1. Откройте редактор разметки notepad++. В главном меню выберите закладку «файл» и её пункт «новый». В рабочей области редактора откроется поле нового документа.
    2. В главном меню выберите закладку «синтаксисы». При наведении мыши на её пункт «H», откроются подпункты. Выберите подпункт «HTML».
    3. В главном меню выберите закладку «файл» и его пункт «сохранить как».
    4. В открывшемся контекстном меню выберите ранее созданную папку. Нажмите кнопку «Сохранить».

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

    Теперь перейдем к самому интересному. Мы поместим в файл немного разметки, и откроем его в браузере, словно он был загружен через интернет. Добавьте в ранее созданный HTML-файл пример, приведенный ниже.

    <!DOCTYPE html> <html> <head>         <meta charset="utf-8"> <title>Моя первая страница</title> </head> <body> <h2>Все получилось. Страница отображается!</h2> <img src="https://coder-booster.ru/content/learning/html-beginners/creating-site-html-files/creating-site-html-files.jpg"> </body> </html>

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

    coder-booster.ru

    Основы HTML. Урок №1. Как создать HTML документ?

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

    basic HTML

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

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

    Я бы посоветовал вам обратить свое внимание на редактор Dreamweaver, о котором более подробно написано в статье на нашем сайте раздела Софт.

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

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

     

    <HTML> <HEAD> <TITLE>Заголовок страницы</TITLE> </HEAD> <BODY> <P>Здравствуй, мир!</P> </BODY> </HTML>

     

    Итак, приступим. Объяснять буду на примере стандартного приложения Windows, "Блокноте". У себя на компьютере вы его можете открыть, найдя в меню Пуск, в папке Стандартные.

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

    В результате на экране будет следующая картина:

    bloknot

    После чего на панельке верхнего меню Блокнота находим пункт "Файл" - "Сохранить как..." и нажимаем на нее, откроется окно с параметрами сохранения, выбираем место где сохранить нашу первую страничку. В выпадающем пункте Тип файла, выбираем пункт Все файлы, после чего в пункт Имя файла записываем index.html, ниже находим пункт кодировка и выбираем кодировку UTF-8(о кодировках читайте в нашем FAQ). Примечание! Имя для файла index идет стандартное, по приоритету оно самое главное при открытии сайта, и именно эта страничка будет открываться при вводе домена сайта, приставка ".html" указывает на тип расширения файла, в нашем случае это HTML расширение и указываеться оно так, следите за тем, чтобы после него не было дополнительного расширения типо ".txt" в таком случае у вас создасться обычный текстовый документ.

    Окно с настройками сохранения:

    okno

    После чего нажимаем Сохранить. Теперь при помощи стандартного или любого браузера мы можем открыть нашу страничку и посмотреть результат.

    Результат создания странички:

    result

    www.web.cofp.ru