Как выглядит файл html
Обновлено: 07.07.2024
Файлы с расширением HTM или HTML – это файлы на языке разметки гипертекста ( Hypertext Markup Language ), являющиеся стандартными веб-страницами.
Поскольку HTM-файлы – это текстовые файлы, они содержат только текст, а также текстовые ссылки на другие внешние файлы. Например, на картинки в этой статье.
HTM и HTML-файлы могут содержать ссылки на другие типы файлов – например, видео, CSS или JS-файлы .
Изучаем формат HTML: чем открыть
Любой браузер, как, например, Internet Explorer , Firefox , Chrome , Opera и т.д., будет открывать и корректно отображать HTM и HTML-файлы .
Существует много программ, разработанных для того, чтобы сделать редактирование и создание HTM/HTML-файлов проще. Наиболее популярными редакторами являются Eclipse , Komodo Edit , и Bluefish .
Еще одним популярным редактором с огромным количеством дополнительных возможностей является Adobe Dreamweaver , однако он не доступен для свободного использования.
Также можно использовать простой текстовый редактор, чтобы вносить изменения в HTM или HTML-файл . Notepad++ – возможно, лучший вариант. « Блокнот », входящий в состав операционной системы Windows тоже работает с HTML-файлами . Но он был разработан для решения других задач. Поэтому перед тем, как открыть HTML файл , нужно привыкнуть к его особенностям.
Как конвертировать в HTM и HTML-файлы
Структура HTM-файлов построена особым образом и имеет весьма специфичный синтаксис. Это сделано для того, чтобы код и текст внутри него при открытии в браузере отображались должным образом.
Поэтому конвертация HTM или HTML-файла в другой формат приведет к потере веб-страницы. Но если вы хотите конвертировать HTM или HTML-файл в другой формат для более удобного просмотра, например, в картинку или PDF-файл , то это делается очень просто.
Чтобы конвертировать веб-страницу в PDF в браузере Google Chrome , в меню « Печать » выберите пункт « Сохранить как PDF ».
Также для браузера Google Chrome доступно расширение Full Page Screen Capture . Оно конвертирует открытый в браузере файл в формат PNG . Другие браузеры также имеют похожие инструменты и расширения.
Помимо этого можно использовать специальные сервисы, предназначенные для конвертации HTM/HTML-файлов , – такие как iWeb2Shot , Convert Webpage , или Web-capture .
Примечание : Важно понимать, что нельзя конвертировать HTM/HTML-файл в любой другой формат, отличный от текстового. Например, он не может быть преобразован в аудиофайл формата MP3 .
HTM vs HTML: в чем разница?
Чтобы знать, как открыть файл HTML на компьютере, сначала разберемся в различиях двух форматов веб-страниц.
Помимо буквы « L », разумеется…
Короткий ответ : разницы нет.
Длинный ответ : разницы нет, но будьте внимательны, используя то или иное расширение.
Раньше, во времена MS-DOS , расширения файлов были ограничены тремя буквами. В течение относительно короткого периода времени, когда в мире господствовало и HTM , а HTML не существовало.
На сегодняшний день полностью приемлемы веб-страницы, которые оканчиваются как на HTM , так и на HTML .
Сервер, на котором размещается веб-страница, может потребовать использовать определенного расширения HTML файла. Например, index.html либо index.htm . Если вы не уверены в том, какое расширение применять, обратитесь к своему хостинг-провайдеру.
Дайте знать, что вы думаете по данной теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, подписки, лайки!
Пожалуйста, оставляйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, подписки, отклики!
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Далее разберем отдельные строки нашего кода.
Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE> .
Существует несколько видов <!DOCTYPE> , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега <title> , а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.
В дальнейшем будем применять преимущественно строгий <!DOCTYPE> , кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.
Часто можно встретить код HTML вообще без использования <!DOCTYPE> , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.
Тег <html> определяет начало HTML-файла, внутри него хранится заголовок ( <head> ) и тело документа ( <body> ).
Заголовок документа, как еще называют блок <head> , может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title> .
Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).
Рис. 4.2. Вид заголовка в браузере
Тег <title> является обязательным и должен непременно присутствовать в коде документа.
Обязательно следует добавлять закрывающий тег </head> , чтобы показать, что блок заголовка документа завершен.
Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>. <h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!-- и заканчиваются тегом --> . Все, что находится между этими тегами, отображаться на веб-странице не будет.
Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.
Следует добавить закрывающий тег </body> , чтобы показать, что тело документа завершено.
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.). HTML-документ имеет расширение .html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Элементы, представленные одиночными тегами, не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, элемент <input type="button" value="Кнопка"> создаст кнопку с текстом Кнопка внутри.
HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, <div > . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
Структура веб-страницы
1. Структура HTML-документа
Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие элементы, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
Элементы, находящиеся внутри элемента <html> , образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
1.1. Элемент <html>
Является корневым элементом документа. Все остальные элементы содержатся внутри <html>. </html> . Все, что находится за пределами элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается.
Для элемента доступен атрибут, описанный в таблице ниже, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| manifest | С помощью значения атрибута указывается путь к документу кэша манифеста, например: <html manifest="about_company.appcache"> |
1.2. Элемент <head>
Раздел <head>. </head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. Элемент <title>
Обязательным элементом раздела <head> является <title> . Текст, размещенный внутри элемента <title> , отображается в строке заголовка веб-браузера.
Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. Элемент <meta>
Необязательным элементом раздела <head> является элемент <meta> . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных.
Элемент <head> может содержать несколько элементов <meta> , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью элемента <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:
Индексация разрешена, переход по ссылкам запрещен:
Индексация и переход по ссылкам запрещены:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh :
Для элемента <meta> доступны атрибуты, описанные в таблице ниже, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| charset | Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8"> |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link> , который ссылается на таблицу стилей CSS, или идентификатор элемента <style> , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: <meta http-equiv="refresh" content="30"> Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url : <meta http-equiv="refresh" content="0; url=http://mail.ru/"> |
| name | Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: <meta name="description" content="Описание содержимого страницы"> generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: <meta name="generator" content="WordPress 4.0"> . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: <meta name="keywords" content="Ключевые слова через запятую"> . Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. |
1.2.3. Элемент <style>
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
Элемент может содержать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id ) присвоить элементу соответствующее название:
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент <link>
Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
- через директиву @import url
- с использованием элемента <link> . Данный способ является предпочтительным.
Элемент <link> определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
1.2.5. Элемент <script>
Элемент <script> позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
1.3. Элемент <body>
В разделе <body> располагается все содержимое документа.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
HTMLУчебник о языке разметки HTML
В Википедии имеется статья по теме «HTML»
В данном учебнике мы постараемся расказать об HTML наиболее понятным и простым образом, при этом, не забывая про современные тенденции в верстке сайтов. Поэтому здесь будем рассматривать HTML5, так как на данный момент его рекомендуют и поддерживают многие браузеры, а также, официальный консорциум.
Содержание
Мы ранее сказали, что будем рассказывать об HTML5. Чем отличается стандарт HTML5 от предыдущих HTML? Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет - в данный момент, почти все браузеры придерживаются единого стандарта, который разрабатывает W3C, а именно - HTML5.
Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста - теги показывали только структуру документа, например:
Но потом разработчики браузеров начали добавлять в HTML свои теги, которые им нравились. Например:
Вскоре, количество тегов сильно разрослось.
Также нежелательно было появление в стандарте HTML 3.2 тега <font> (он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.
С HTML4 разделяются форматирование документа и его структура. Теперь в HTML-странице сохраняются только структура страницы (разноуровневые заголовки, абзацы, цитаты, списки), а всё, что относится к форматированию, описывается в CSS. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем, и, кроме того, уменьшает длину кода, который нужно написать.
В HTML5 же, была предпринята попытка стандартизации: многие привычные теги (в том числе и выше названный <font> ) осуждаются, все оформление рекомендуется использовать в отдельном CSS-файле, появились новые семантические теги, функции для которых будут добавлены в будущем.
Первым делом, нам понадобится текстовый редактор. Текстовый редактор есть на каждом компьютере. Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (то есть ни в коем случае нельзя использовать текстовые препроцессоры по типу Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц. Неплохие редакторы Notepad ++, Brackets, Atom, Sublime Text в которых хорошо писать не только HTML, CSS, но и ещё несколько десятков других языков программирования и разметки. У них есть несколько удобных функций,таких как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания, автоматическое дополнение тегов, что позволит сэкономить время на написание кода и многое другое.
Веб-страницы состоят из гипертекста. Гипертекст отличается от обычного текста тем, что содержит гиперссылки. Они обычно обозначены синим цветом, и позволяют сделать переход в другой гипертекст, или любое другое место (якорь), указанное с помощью URL. Гипертекст состоит из тегов.
- Открывающие
- Закрывающие
- Одинарные.
Открывающие и закрывающие теги всегда существуют парами: открывающий <html> и закрывающий </html> . Закрывающий отличается от открывающего тем, что после угловой скобки < стоит знак слэш (знак дроби) «/».
Приведу пример кода веб-страницы:
Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <html> говорит браузеру, что в нём содержится код HTML. Тег <head> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <title> , как уже было сказано, содержит заголовок, который обычно отображается на вкладке. <body> содержит тело, тоесть содержимое страницы.
В HTML существует проблемы с символами сравнения. Чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:
| Название | Код | Вид |
|---|---|---|
| Менее | < | < |
| Более | > | > |
| Амперсанд | & | & |
| Кавычка | " | " |
Здесь я указал только самые-самые нужные. Если вам нужно больше, надо поискать. Можно поискать где-то здесь. То есть то, что мы хотели описать в предыдущем примере, будет выглядеть так:
Одним из обязательных требований для веб-страницы является указывание кодировки. Опять же браузер сам может определить кодировку. Но лучше указывать. Способа есть два:
Оба способа одинаковы. Но второй короче.
Некоторые теги имеют свойства, которые называются атрибутами. Например, почти каждый тег имеет атрибут title. В нём прописывается текст подсказки, которая видна, когда пользователь наводит курсор на элемент тега. Пусть нам нужно написать известное сокращение: HTML. И если пользователи наводят на него курсор, они могут его расшифровать. Это делается просто:
Здесь мы видим, как правильно записывать атрибуты. Название атрибута, затем знак равенства, и значение в двойных кавычках. В стандарте HTML 4.01 нет атрибутов без значений.
Лучше писать все атрибуты и их значения маленькими буквами
Зачем? Ради будущего!
Теперь перейдём к форматированию текста. Форматирование задаёт не так внешний вид, как структуру страницы. Важнейшими тегами форматирования есть абзацы (англ. paragraph) и заголовки (англ. header)
Заголовки бывают шести уровней. Заголовки первого уровня — главные и самые большие, а заголовки шестого уровня даже меньше, чем текст абзацев. Ниже пример использования заголовков:
Эта страница отобразится так:
В этой книге речь пойдет преимущественно о хоббитах, и с ее страниц читатель узнает немало об их . и т. д.
I Долгожданная гостиная
XII Побег к броду
Я здесь пишу и пишу примеры. Не забывайте пробовать что-то сами! Или хотя бы по крайней мере посмотрите как будут выглядеть примеры страниц, которые вам даются, в вашем браузере (а если у вас несколько браузеров, то не забывайте посмотреть как выглядит страница в других!).
К сожалению, браузеры отвергают все символы переноса строки, табуляции, а также лишние пробелы. Поэтому этот стишок отображается в одну или несколько строк (в зависимости от ширины окна). Но есть выход.
Можно каждую строчку стихотворения поместить в отдельный абзац. Правда обычно между абзацами большие белые поля. Поэтому можно использовать одинарный тег <br />. Этот тег обозначает переход на новую строку, то есть обрыв (break) старого.
Это выглядит следующим образом:
It is a long tail, certainly, 'said Alice, looking down with wonder at the Mouse's tail'`But why do you call it sad? ' And she kept on puzzling about it while the Mouse was speaking,
so that her idea of the tale was something like this: -
Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: жирность (bold), курсив (italic) и подчёркивание (underlined). Они меняются с помощью тегов: <b> , <i> и <u> соответственно.
Для того чтобы обходиться без <s> , придумали тег <del> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки <ins> . Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:
А отобразится она так:
Причём текст в теге <ins> будет подчёркнут. (А ребята из W3schools говорили использовать CSS)
Далее опишу все теги в таблице, потому что мне уже надоело здесь о них рассказывать, а вам видимо надоело читать.
— это язык разметки гипертекста
Ну, со структурой гипертекста, думаю, мы разобрались, можно теперь переходить к вещам более глобальным.
Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <a> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:
При обращении к каталогу всегда в конце добавляйте слэш. Если вы не будете добавлять слэш, то сервер будет вынужден выполнять два запроса. Сначала ваш, без слэша. Потом, когда он разберётся, что это запрос к каталогу, он сгенерирует свой запрос, со слэшем, и уже его выполнит.
Кроме гипертекстовых страниц на сайте можно размещать любые другие файлы. Тогда после щелчка по ссылке будет появляться стандартный диалог загрузки.
Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:
Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href ="subdir/2.htm" и href ="../1.htm" соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.
Я правда не понимаю для чего делать закладки с помощью тега <a>, когда атрибут id есть в каждом тезисе. Но всеми способами получается нормально.
Чтобы долго не объяснять снова приведу пример:
Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <a> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.
Этот тег нестандартный и не входит в спецификации. Поддерживается только IE. Вместо него рекомендуется использовать тег <audio> .
Тег <bgsound> указывает на музыкальный файл, который будет проигрываться на веб-странице при её открытии. Звук, время звучания музыки и другие характеристики указываются с помощью параметров тега, а также могут управляться при помощи скриптов. Этот тег должен размещаться только в середине тега <head> .
Чтобы указать файл, который будет проигрываться, нужно написать так:
В HTML5 добавили новый тег <audio> .
Вот как он выглядит:
Обращаем ваше внимание на непонятный тег <source /> .
Дело в том, что браузеры не поддерживают все форматы музыки и порой приходится перекодировать вашу музыку в другие типы аудио, чтобы мелодия корректно отображалась в основных браузерах.
Подробно про атрибуты тега <audio> :
Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.
Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.
Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.
Не стоит забывать о том, что картинки очень долго загружаются при медленном доступе к интернету. И даже когда доступ в интернет достаточно быстрый, некоторые пользователи исключают загрузку картинок в целях экономии. И это замечание актуально даже в 2011 году. Поэтому не пренебрегайте атрибутом alt.
Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:
Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.
Пример я бессовестно «сдул» отсюда. Очень хорошее место, чтобы потренироваться, без лишней мороки.
Форму задают с помощью атрибута coords, который содержит четыре координаты (лево, верх, право, низ) для прямоугольника, три (координаты центра и радиус) для круга, и чётное количество для многоугольника (координаты каждой вершины). Координаты можно узнать морем способов. Можно в Paint’е посмотреть. А если форма сложная, точек много, то можно и специальную программу использовать. Это вроде X-Map. Хотя, если честно, ни этой программой, ни картами я не пользовался. Но если такое есть, то надо дать людям знать. Иначе книжка какая-то не солидная будет.
Списки в HTML бывают трёх видов: упорядоченные (ordered list) <ol>, неупорядоченные (unordered list) <ul> , и списки определений (definition list) <dl> . Элементы двух первых списков задаются тегом <li> (list item). Элементом списка может быть любой текст, картинки, абзацы, а также другие списки. Например, упорядоченный список задают так:
Выглядит это так:
Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>:
| Строка 1 Столбец 1 | Строка 1 Столбец 2 | Строка 1 Столбец 3 |
| Строка 2 Столбец 1 | Строка 2 Столбец 2 | Строка 2 Столбец 3 |
| Строка 3 Столбец 1 | Строка 3 Столбец 2 | Строка 3 Столбец 3 |
По умолчанию таблицы отображаются без границ. То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута border. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.
Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <td> пишут <th>. Выглядит это так:
| Столбец 1 | Столбец 2 | |
|---|---|---|
| Строка 1 | Строка 1 Столбец 1 | Строка 1 Столбец 2 |
| Строка 2 | Строка 2 Столбец 1 | Строка 2 Столбец 2 |
А пишется вот так:
Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <b> или <strong>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.
Некоторые браузеры не отображают пустые ячейки (то есть не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска (Non Breakable SPace). Назвали его несокрушимым оттого, что слова, разделённые таким пропуском, переносятся на следующую строку только вместе.
Даёт такой результат:
| Строка 1 Столбец 1 растягивается на два вправо | Строка 1 Столбец 3 | |
| Строка 2 Столбец 1 | Строка 2 Столбец 2 растягивается на 2 вниз | Строка 2 Столбец 3 |
| Строка 3 Столбец 1 | Строка 3 Столбец 3 | |
Кроме строк таблица может иметь заголовок. Тег <caption> предназначен для создания заголовка к таблице и может размещаться только в середине тега <TABLE>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, который по умолчанию отображается перед таблицей и описывает её.
Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <thead>, основную часть <tbody> и итог <tfoot>.
Читайте также: