: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).
Так давайте познакомимся с ним поближе.
Для начала создайте у себя на компьютере файл с любым названием и расширением.html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").
Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем - index.
При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).
Теперь откройте этот файл через блокнот и скопируйте туда такой код.
Это первая web-страница!
Сохраните и откройте через браузер.
Поздравляю, вы только что создали свою первую web-страницу.
Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.
Но у нашей страницы нет загаловка.
Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги и .
Первая страница Это моя первая web-страница!!!
Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.
Самый первый тег это (этот тег парный, т.е. закрывающий тег обязателен) - он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег ( и ) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.
Следующий тег - . Это тоже парный тег ( и ). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительный параметров страницы - описание страницы (используется поисковиками), ключевые слова (используется поисковиками), стили, скрипты, заголовок и прочее.
Тег - парный тег ( и ), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега !
И последний, в нашем коде, тег - . Тоже парный тег ( и ), внутри которого находится вся видимая часть сайта, т.е. тексты, картинки, ссылки, в общем информация которую вы хотите разместить на сайте.
В следующем уроке мы поговорим о видах тегов и правило их написания.
Как HyperText Markup Language. HTML - это не язык программирования, это язык разметки сайта.
Все браузеры умеют преобразовывать эту разметку в удобный вид для пользователя.
В этом языке используются специальные команды, называемые тегами. У каждого тега своя функция. Существует огромное количество тегов. В идеале нужно выучить все. Но для начинающего разработчика базовых знаний вполне достаточно.
Основные команды HTMLСписок HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать "Блокнот". Рекомендуется использовать Notepad++. Он выглядит вот так.
Преимущество в том, что в специальных редакторах теги подсвечиваются определенным цветом, в зависимости от категории. Команды для создания сайта HTML в блокноте или любой другой программе одни и те же. Язык используется везде одинаковый. Среда разработки - это лишь инструмент.
В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке существует понятие вложенности. Каждый объект в коде - это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями.
На рисунке видно два тега и . Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только "/". Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.
Тег обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.
Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.
Название тегов соответствует смыслу. Head - голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body - тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.
В служебном разделе указывается:
Файл стилей подключается вот так:
Файл скриптов следующим образом:
У текста обязательно должен быть заголовок. Его указываем вот так:
Заголовок страницы
Этот текст будет отображаться в названии вкладки браузера. Также этот заголовок выводится в результате выдачи поисковой системы.
Теги для оформления текстаТекст нужно размещать в теге абзаца. Он обозначается как . Для текста также можно использовать Строка.
Оформлять текст можно, как и в "Ворде":
Текст можно оформлять стилями. Их мы рассмотрим в конце, после обзора других элементов.
Использование заголовковЕсть и другие важные HTML-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега Заголовок первого уровня. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.
Пример на рисунке.
Имейте в виду, что рекомендуется использовать только один заголовок h1. При этом он должен совпадать с тегом . Разумеется, вы можете указать 200 заголовков h1, но тогда к вам будут применены санкции со стороны поисковых систем.
Использование изображенийИзображения являются неотъемлемой частью веб-страниц. На примере показано, как можно вставить какую-нибудь фотографию.
Как видите, на примере детально показано, что и как называется.
Использование ссылокЕсли вы учите HTML-команды, то знать тег-ссылки вы просто обязаны. Это один из главнейших элементов, который составляет
В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.
Использование таблицТаблицы используются также очень часто. Изначально они предназначались для представления информации в удобном виде. Но затем верстальщики их использовали для размещения различных элементов страницы.
Таблица создается следующим образом:
Текст ячейки
Текст ячейки
Текст ячейки
Текст ячейки
Атрибут width указывает ширину таблицы. Она может быть в процентах или пикселях. Border указывает толщину рамки.
Структура указывается следующим образом. Тег tr является строкой. Тег td ячейкой. А всё вместе - это таблица.
Таблицу можно выравнивать. Для этого используется атрибут align, который может принимать три значения: Left, Center, Right. Пример использования указан ниже.
Эти HTML-команды (ширина и выравнивание) подходят и для других элементов. Толщина рамки также указывается у изображений.
Использование списковИспользуя HTML-команды, можно создать различные виды списков. Практически точно так же, как и в редакторе Word.
В языке Html существуют упорядоченные и неупорядоченные Пример такого списка.
Результат будет такой:
Тип списка | Код в языке HTML |
В виде круга | |
В виде окружности | |
С квадратными маркерами |
Упорядоченные списки создаются точно так же, но только вместо
Здесь также можно задать тип вывода списка:
Стандартно выводятся арабские цифры.
Поскольку это нумерованные списки, у них есть атрибут start, в котором указывается начальное значение списка. Например, можно выводить список начиная с 10-го или 20-го числа.
Использование стилейHTML-команды для сайта весьма разнообразны, но все они подчиняются стилям. Стили можно указывать в виде файла в разделе head: или прописать сразу готовый стиль.
Обратите внимание, что между этими определениями стилей есть разница. Файл стилей можно указывать во всех страницах сайта. Как только вы внесете в него изменения, то это обновление коснется всего сайта в целом. Если вы укажете стили на конкретной странице, то изменения и использование этих классов будет только внутри этого файла. За пределы него ваши настройки не выйдут.
Представьте, что у вас 20 страниц HTML и вы решили сделать заголовок на 2 пикселя больше. Если у вас всё в файле стилей, то правку внести нужно только там. Если везде индивидуально, то обновлять придется все 20 страниц.
Указывать только для одной страницы можно следующим образом.
Создать сайт в настоящее время не вызовет особых сложностей, так как в интернете достаточно порталов, которые предлагают свои услуги по созданию сайта. Но сайт, созданный по такой услуге, это не свое создание, а подобие выращенного в пробирке клона.
Самостоятельно созданный сайт - будет всегда любимым чадом, выстраданным в радостных муках творчества. Создать сайт можно при помощи языка программирования HTML, так называемый статический сайт.
Для создания сайта используют редактор HTML. Для самостоятельного создания сайта, на основе HTML, необходимы знания языка программирования HTML, отдельные понятия работы Photoshop, некоторые навыки написания статей, немного фантазии и дизайнерского искусства.
Сайт, созданный при использовании языка программирования PHP – динамический сайт. Большинство существующих сайтов в интернете созданы на основе PHP, на движках CMS (система управления контентом). На этом сайтеможно познать, как создать сайт и получить квалифицированную помощь при самостоятельном создании сайта на движках CMS:
- создание сайта на Joomla;
Начинать что – то делать – всегда трудно. Главное здесь задаться определенной целью. Для начала выбрать тематику и образец сайта, какой желаете сделать, составить план его реализации. И двигаться по пути достижения главной цели.
Начнем наш сегодняшний урок с того, что создадим самую простейшую веб-страничку. Для этого сначала заготовим текстовый документ, потом преобразуем его в htm документ, затем вставим в него несколько строк кода и после этого откроем в браузере нашу созданную веб-страничку. После этого познакомимся с понятием теги, обязательными элементами и их разновидностями, которые должны присутствовать на каждой веб-страничке. Разберемся с их различиями и особенностями их применения. После этого выучим основные правила, необходимые при написании кодов. Они касаются обязательных элементов, правил написания тегов и особенностей браузера в восприятии кода.
Базовая HTML структура
Создадим предельно простой HTML документ. Для этого на компьютере создадим папку. Назовите ее как хотите. Заходим в нее, щелкаем правой кнопкой мыши по пустому полю и выбираем пункт «Создать» > «Текстовый документ». Открываем созданный текстовый документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем index.htm. В строке «Кодировка» выбираем UTF-8 и нажимаем «Сохранить». У нас появится файл index, в который мы и будем вписывать все HTML коды.
Теперь копируем код, приведенный ниже, и вставляем в файл index . Важно! Открывать этот файл нужно с помощью специального редактора. Я обычно пользуюсь «Блокнотом.» Для этого щелкаем правой кнопкой мыши по файлу index и выбираем пункт «Открыть с помощью…» > «Блокнот». Есть и другие специальные редакторы с подсветкой разметки. Кому как удобнее. После этого нажатием клавиш Ctrl+S сохраняем наши изменения и уже после этого два раза щелкаем по самому файлу index. В браузере откроется наша первая созданная веб-страничка.
Моя первая веб-страница
Это моя первая веб-страница
Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги. Теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. Парные теги состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный, а в закрывающем используется слэш тег>.
Каждый документ HTML должен начинаться тегом и оканчиваться его двойником, тегом. Помимо них, в данном файле содержатся еще три пары тегов, которые должны присутствовать в любом другом документе HTML. Пара тегов
И применяются для обозначения любой информации о самом документе HTML. Теги и предназначены для добавления заголовка, отображаемого в строке заголовка браузера. Теги и применяются для обозначения любого текста, отображаемого на странице HTML.
Обязательные элементы документа XHTML
В языке XHTML, более новой версии HTML, есть еще один обязательный для создаваемых Web-страниц элемент — тег. Он предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу. Этот тег указывается в верхней части файла и идентифицирует текущий документ HTML как удовлетворяющий требованиям XHTML (или совместимый со спецификацией XHTML). Если вы создаете XHTML-совместимый документ, он может выглядеть приблизительно так:
Moя XHTML страница Это моя первая XHTML страница.
Тег имеет три разновидности: Strict, Transitional и Frameset. В верхней части HTML-документа вы декларируете, какую именно из них хотите использовать.
Strict Применяйте эту разновидность тега лишь в том случае, если точно уверены, что все посетители вашей веб-страницы используют новые веб-браузеры, способные корректно интерпретировать таблицы стилей. Разновидность Strict выглядит следующим образом:
Transitional Применяйте эту разновидность, если не знаете точно, какие именно программные средства будут использоваться для просмотра вашей веб-страницы.
Frameset Применяйте эту разновидность, работая с фреймами.
Обратите внимание еще на одно отличие кодов XHTML от обычных документов HTML: у тега появились три новых атрибута: xmlns, xml:lang и lang. В случае применения HTML вам достаточно было включить тег, чтобы идентифицировать файл как HTML-документ, однако в данном случае требуется добавление атрибута xmlns, подключающего документ к определению W3C языка XHTML, которое по-прежнему продолжает эволюционировать. Пока же запомните о необходимости включения тега и полного тега в коды всех своих веб-страниц.
Корректное написание кодов
Одних лишь тегов не достаточно для создания хорошей веб-страницы. Если при написании кодов HTML еще можно допускать некоторые погрешности, то коды XHTML требуют строгого соблюдения правил. Хотя текущие версии большинства современных браузеров способны правильно интерпретировать ваши коды, даже если они набраны из неверных тегов, последующие версии браузеров такой сообразительностью отличаться не будут. Вы можете уже сейчас подумать о будущем и научиться следовать некоторым базовым принципам написания веб-кодов, удовлетворяющих стандартам XHTML.
Включайте в коды своих веб-страниц все обязательные XHTML-элементы, которые рассматривались в этом уроке. Можете создать для себя шаблон XHTML-документа, в котором изначально будут содержаться все необходимые теги.
Используйте символы нижнего регистра для всех тегов. Для браузера записи
И равнозначны (хотя они не обязательно могут быть таковыми). Применяйте символы нижнего регистра при наборе всех своих команд, и вам не придется корректировать коды своих веб-страниц после возможного изменения стандартов XHTML.
Никогда не используйте пробелов в именах файлов. Старые компьютерные системы испытывают трудности с чтением имен файлов, содержащих пробелы (например, моя первая страница.htm). Вместо пробела набирайте символ подчеркивания (например, моя_первая_страница. htm).
Все значения атрибутов тегов следует указывать в двойных или одинарных кавычках. Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы. Тогда браузер в качестве значения возьмет только первое слово. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.
Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.
Существует определенная иерархия вложенности тегов. Например, тег
Должен находиться внутри контейнера и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно. Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги и, на конечном результате это никак не скажется.
Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуется закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.
Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера1. - эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
... Заголовочные теги ... ... Тело страницы ...2. - между этими тегами заключается весь видимый контент страницы.
4. - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег
Теперь перейдем к тегам, которые находятся в теле html страницы (внутри и ).
5. - эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.
6. - это один из класса тегов заголовочных тегов .. , обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".
Примечаниеэти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.
При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег , а дальше могут идти уже , и т.д. Главное, чтобы не было сначала , потом , потом и т.п. Должна быть строгая иерархия. Заголовков , и т.п. может быть много.
7.
- это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.
8. 
9. - эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.
Примечание: - аналогичный тег.
Есть также свойство CSS font , в котором можно задавать все эти параметры.
10. - выделить жирным. Все, что заключено между и будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является .
Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.
