Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации , HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2, 4.0 и т.д.
Для освоения HTML по этому Руководству Вам понадобятся две вещи:
Любой браузер , т.е., программа, пригодная для просмотра HTML-файлов (Internet Explorer);
Любой редактор текстовых файлов, поддерживающий русский язык в выбранной кодировке. Если на компьютере установлен Windows , вполне подойдет Word .
Нужно использовать текстовый редактор для подготовки HTML-файлов, а браузер – как инструмент контроля за сделанным.
HTML-документ – это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).
Для удобства чтения введите дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах.
Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, ) называется меткой (по-английски – tag, читается "тэг").
Большинство
HTML-меток – парные, т.е. на каждую
открывающую метку вида
Метки можно вводить как большими, так и маленькими буквами. Например, метки
, и будут восприняты браузером одинаково.2.2 Обязательные метки ...
Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.
...
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа, в этот раздел может включаться множество служебной информации.
Все, что находится между метками
...
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
< H 1> ... H 1> - < H 6> ... H 6>
Метки вида
(где i
– цифра от 1 до 6) описывают заголовки
шести различных уровней. Заголовок
первого уровня – самый крупный, шестого
уровня, естественно, – самый мелкий.
Такая пара меток описывает абзац. Все, что заключено между , воспринимается как один абзац.
Метки
и Могут содержать дополнительный атрибут
ALIGN
(читается "элайн", от английского
"выравнивать"), например: Выравнивание заголовка
по центру
Образец абзаца с выравниванием
Приветствую вас на своем блоге о веб-технологиях. Сегодня я хотел бы написать статью для тех, кто является новичками в сфере сайтостроения. В частности, о языке html . Что это такое и для чего оно нужно? Я попытаюсь объяснить вам максимально подробно.
Содержание статьи
Я считаю, что лучше Википедии сформулировать определение не смогу, поэтому:
Цитата
HTML (от англ. HyperText Markup Language - «язык гипертекстовой разметки») - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML).
А теперь я попытаюсь вам это издалека объяснить. Все в нашей жизни из чего-то состоит. Дом из строительных материалов, воздух – из таких элементов, как азот, кислород, углекислый газ и другие. А у нас, значится, веб-страницы (например, сейчас вы находитесь на такой странице). И они тоже из чего-то должны состоять, не так ли? Так вот, это что-то и является языком html. Правда, не он один формирует страницу, но об этом уже далее по ходу статьи.
Итак, html – это специальный язык, с помощью которого создаются веб-странички, из которых собственно состоит весь интернет. Он является строительным материалом для страниц. На английском аббревиатуре расшифровывается так: HyperText Markup Language .
Почему гипертекст? Все просто, он отличается от обычного текста тем, что по ходу чтения информации в интернете вы можете спокойно нажать на другие ссылки и перейти на другие страницы, а при обычном чтении книги или текстового документа вы так сделать не можете.
Ну и еще надо разобраться со словом разметка, чтобы стало еще понятней. Наверняка вы в своей жизни не раз играли в какую-нибудь спортивную игру, вроде волейбола или футбола. Тогда вы прекрасно должны знать, что площадка для игры имеет свою разметку.
Например, в футболе есть боковые и лицевые линии, штрафная и вратарская зоны, центральный круг, угловые флажки и т.д. Так вот, html отвечает за разметку веб-странички, за ее структуру. Это можно сравнить со скелетом человека или каркасом здания.
Итак, документы, содержащие команды на языке html, имеют одноименный формат. Это статические странички, на которых можно разместить какую-то информацию. Если в них добавляют язык php, то расширение документа изменяется на php , но при этом в нем по-прежнему могут находиться html-теги.
Открываются такие файлы с помощью любого текстового редакторе. Лучше при этом использовать специальный софт, в котором будет поддержка синтаксисов языков, подсветка символов и т.д.
Статический файл также можно легко открыть в любом веб-обозревателе, но если он содержит расширение php, то только на виртуальном или локальном сервере.
Синтаксисом, как правило, называют правила написания кода на различных языках. Html полностью состоит из тегов и их атрибутов, а также непосредственного содержимого. Таким образом, изучение языка заключается в изучении роли основных тегов и атрибутов.
Как вообще, по вашему формируется информация на веб-странице? Например, хотите вы написать статью и выделить какие-то слова как заголовок? Как браузер поймет это? С помощью html тегов, конечно же, потому что он умеет их распознавать и понимать.
Тег пишется так: его имя заключается в угловые скобки, а зависимости от ситуации ему дописываются атрибуты и содержимое. Примеры:
Содержимое тега
Теги бывают парными и одинарными. В данном случае я как раз привел вам пример как парного, так и одинарного. Суть в том, что одинарный не имеет закрывающей части (), а еще в нем не нужно писать содержимое.
Например, тег img отвечает за вставку картинки на веб-страницу. Согласитесь, в изображение не нужно вписывать дополнительно никакую информацию, все необходимое задается в атрибутах. В нашем случае атрибут src задает путь к изображению.
Ну а первый пример – это парный тег p . Он отвечает за вывод абзаца (paragraph ). Тут мы видим закрывающую часть, она показывает, что в этом месте абзац нужно закончить. Также есть содержимое, что логично. Не может же абзац быть пустым, без текста? Весь нужный текст записывается между открывающей и закрывающей частями.
Вот таким вот образом работают в html все теги. Конечно, все я описывать не буду, ведь их несколько десятков (самых основных). Например, за вывод крупного заголовка отвечает тег h1 , за создание таблицы – table , нумерованного списка – ol . ().
Все их описывать ни к чему, вы сможете самостоятельно их выучить, если возникнет желание получше разобраться.
Атрибуты, это дополнительные команды, которые применяются к тегам. Все они пишутся только в открывающей части тега и записываются по такому принципу:
<тег имя атрибута="значение атрибута">
Таким образом, мало просто знать теги, нужно еще и уметь записывать для них различные атрибуты. Примеры:
В первой строчке кода мы с помощью тега a создали ссылку и для нее прописали такие атрибуты: href – путь, по которому нужно перейти, target – специальная команда, которая определяет, нужно ли открывать ссылку в новом окне, а значение _blank как раз это и делает. Как видите, атрибуты записываются через пробел, а их значения в двойных кавычках.
Второй пример: атрибутом charset определяем кодировку страницы как utf-8 .
Третий: записываем абзацу атрибут class = "two" , который привязывает к нему стилевой класс с указанным именем (имя может быть произвольным) и теперь в каскадных таблицах стилей (css) мы можем обратиться к этому элементу и оформить его.
Целью этой статьи было донести до вас, что собой представляет html, для какой цели он нужен и из каких элементов он состоит. На самом деле это одна из самых простых веб-технологий, с которой можно разобраться буквально за пару недель. Как изучить этот язык я написал в , советую вам почитать, если интересно. На этом я буду заканчивать, а вам рекомендую не бояться начинать изучение, если вы сомневаетесь.
Опять же, может быть, вам это и не нужно. Сегодня в любой системе управления сайтами встроены визуальные редакторы, где вы можете абсолютно без проблем оформить текст так, как нужно. Изучение же html позволит вам лучше разобраться с тем, как это все работает, а также при необходимости самостоятельно вносить правки на свои веб-страницы, изменяя их структуру и внешний вид.
В настоящее время любой веб-программист уверенно ответит на вопрос: HTML - что это за расширение? Но ведь не все являются веб-программистами. Наверняка есть люди, не готовые пока дать правильный ответ на такой вопрос. Поэтому рассмотрим связанные с этим понятия, так сказать, с азов.
HTML (Hypertext Markup Language, язык разметки гипертекста) — это общепринятый язык для разметки интернет-документов (а не язык программирования!). При помощи него формируются практически все веб-страницы. Последние отличаются от обычных документов, содержащих текст, другие элементы (изображения, таблицы), тем, что содержат специальные дескрипторы (тэги), которые необходимы, чтобы текст был понятен любому браузеру. HTML-расширение (или HTM) является признаком того, что файл принадлежит к разряду веб-документов.
Тэги HTML - это специальные инструкции, которые содержат информацию о структуре и форматировании веб-страницы. Каждый тэг включается в текст внутри угловых скобок <>. Почти все тэги являются парными и содержат открывающую и закрывающую части, воздействуя на текст, вставленный внутри этих частей.
Примеры применения дескрипторов HTML можно увидеть, открыв любую веб-страницу в режиме просмотра тегов. Для этого в меню браузера надо выбрать пункт "Вид" - "В виде HTML". Для некоторых браузеров срабатывают и горячие клавиши: Ctrl + U, при нажатии которых в отдельной вкладке браузера открывается та же страница в режиме, позволяющем видеть HTML-коды.
Существуют разные версии HTML. Язык постоянно совершенствуется, поэтому почти ежегодно выходит его новая версия. Разные веб-браузеры (программы для просмотра HTML-страниц) разработаны различными компаниями и различаются по интерпретации отдельных тэгов и их поддержке. В результате один и тот же HTML-код отображается разными браузерами по-своему, а некоторые браузеры вообще не понимают отдельные тэги.
До 1990 года вряд ли кто-нибудь в мире правильно ответил бы на вопрос: HTML - что это? Впервые документация по этому языку опубликована в 1991 году. Автор - физик Тим Бернерс-Ли - придумал его как инструмент, позволяющий превращать набор символов, передаваемый по сети, в заголовки, ссылки и абзацы. Вскоре этот язык стал стандартным для разметки документов в Интернете.
В своем развитии он прошел путь от начальной редакции до HTML 5 и продолжает совершенствоваться. В составе этого языка имеются дескрипторы как структуры, так и форматирования. В дальнейшем приняли стандартную технологию CSS, которая предполагает выделение описания форматирования в отдельный CSS-файл, оставляя для тэгов HTML описание структуры документа. В результате часть дескрипторов перестала использоваться.
Она четко регламентирована и должна содержать несколько обязательных тэгов. К таковым относятся:
Функции общеупотребимых тегов должны быть понятны любому копирайтеру, добавление их в текст возможно в любом текстовом редакторе. Их можно применять при оформлении текста, не имея под рукой специального редактора. Общеупотребимыми, в частности, являются HTML-коды:
Веб-страницу (то есть HTML-файл) можно набрать в любом редакторе текста (например, в Блокноте). Но все тэги придется набирать вручную. Достоинство такого метода - абсолютно минимизированный код. Недостатки - требуется хорошее знание языка гипертекстовой разметки и невозможность сразу посмотреть результаты своего труда. Поэтому такой метод годится только для создания самых простых веб-страниц.
Практически все специалисты пользуются специальными HTML-редакторами. Наибольшей популярностью из них пользуются Macromedia HomeSite и Dreamweaver MX. Они позволяют автоматизированно вводить многие тэги, выделять цветом текст и служебные элементы кода, сразу просматривать в специальном окне получаемый результат. Но эти программы платные.
Для новичка лучше сначала испытать свои силы, пользуясь свободно распространяемыми редакторами. К наиболее популярным из них можно отнести Notepad++, Komodo Edit, Aptana, Alaborn iStyle и KompoZer. Каждая из этих программ обладает своими преимуществами, предоставляет пользователю большие или меньшие функциональные возможности, имеет свой интерфейс. Для выбора подходящей именно вам надо попробовать работать в каждой из них. Это легко осуществимо, поскольку за эти попытки не надо платить.
Кроме указанных программ-редакторов существуют средства визуального проектирования (например, HoTMetal Pro). При создании веб-страниц они позволяют абсолютно исключить необходимость ручного ввода дескрипторов HTML. Однако такие программы выдают в результате слишком избыточный код, объем которого значительно превышает необходимый минимальный размер. Кроме того, часто требуется ручная правка кода для его доводки до желаемого качества.
Ознакомление с материалом этой статьи, надеемся, позволит даже начинающему пользователю не сомневаться в ответе на вопрос: HTML - что это?
Начну, пожалуй, с начала..
HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.
Теперь о командах - их называют дескрипторами, но чаще - тегами.
Вернемся к нашей первой страничке.. итак мы написали:
Привет мир!!!
Так вот то что написано между <…> - называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью.
Так что же мы написали? и как это читает браузер?
Мысли браузера:
- начало документа.. опять работы привалило..Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:
1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий
Хотя есть и исключения как например у нас тег
- он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")
2) Все документы должны иметь вот такой шаблон кода:
- начало документаДанные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..
3) О порядке:
Открывающий и закрывающий тег по типу <…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:
<Тег "большой ящик">Если писать, например, так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
То получится белиберда, которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..
Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..
При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!
При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:
Значительно легче, чем так:
И уж тем более чем вот так:
Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".
И переводится, как «язык разметки гипертекста». Гипертекст – это специальный метод навигации по интернет-страницам, реализованный в виде гипертекстовых ссылок. Нажимая по этим ссылкам, вы можете с легкость перемещаться по структуре сайта. Переходы при этом происходят не линейно, т.е. у вас всегда есть возможность переходить на любую страницу сайта, ссылка на которую видна в данный момент.
Под разметкой понимаются некоторые правила и свойства, которыми наделены элементы страницы. Они реализованы в виде так называемых тегов. Например, чтобы указать, что определенный текст на странице должен располагаться по ее центру, его можно пометить с помощью тега center. Увидеть HTML-код конкретной страницы можно через его контекстное меню. Например, для доступа к этому коду в браузере Firefox необходимо нажать правой кнопкой в пределах страницы и выбрать пункт «Исходный код страницы».
