Язык разметки гипертекста Hyper Text Markup Language, а проще говоря HTML это основной язык создания веб-страниц. В этой статье проведем самое общее знакомство с языком HTML.
Язык разметки гипертекста Hyper Text Markup Language
HTML–документ строится на основе тегов. Теги создают структуру документа. Основные теги парные. Это значит, что если есть открывающий тег типа <…>, то должен быть и закрывающий тег со слешем …>. Стоит отметить, что бывают и не парные теги.
Весь документ HTML обрамляется двумя тегами … . Как видите они парные. Кроме этого, в HTML документе должен присутствовать одиночный тег валидатор указывающий тип текущего документа.
У HTML 4 три валидатора, у HTML 5 валидатор один. Структура тега HTML 5 , следующая:
Примеры:
- для документов HTML 4.
- единый для всех документов HTML5.
Структура HTML документа
HTML документ состоит из заголовка (header) и тела (body). Заголовок обрамляется тегами
… . Тело документа обрамляется парными тегами … .Пример: Основной каркас HTML 5 документа должен иметь следующую структуру:
Здесь место для заголовка Здесь текст документа
Структура заголовка
Заголовок
… , включает несколько специальных тегов. Основные из них это теги:Тег title
Это заголовок документа, выводится в заглавной части страницы.
Тег meta
Тег мета, а вернее теги мета, потому что в одном документе таких тегов может быть несколько. содержит специальную информацию. Например, обязательно должен быть тег мета с указанием кодировки документа:
Для индексации веб страниц важны мета-теги description и keywords:
Замечу, что современные поисковики перестали «видеть» keywords, но это не отменяет их использования. Внутреннюю перелинковку никто не отменял.
Пример веб-страницы на HTML
Приведу элементарную веб-страниццу на HTML:
Изучая основы HTML, нельзя без изучения и использования специальных текстовых редакторов. Потому-что набирать любой текст страницы HTML нужно только в текстовом редакторе типа: NotePad++, Sublime Text2 и т.п. После набора документа его нужно сохранить с расширением htm или html. Cозданный файл открываем в любом браузере, которым вы пользуетесь.
Структура тела документа
Текст в документе (в тегах
) также разбивается на заголовки и части тегами.Теги заголовка и абзаца
Текст, документа, может обрамляться специальными тегами.
Абзац выделяется тегами
Заголовки разделов текста выделяется тегами
,, , до
Организуются теги заголовков в иерархической форме, а число в теге указывает на степень вложенности заголовка.
Пример применения тегов
Обзац моей любимой веб-страницы
h1 Категория товара
h2 Категория товара
h3 Категория товара
h4 Категория товара
h5 Категория товара
h6 Категория товара
Атрибуты тегов
Один из основных атрибутов тегов это атрибут форматирования, под названием align. Значение атрибута align:
- left – выравнить по левому краю,
- center – выровнять по центру,
- right – выровнять по правому краю,
- justify – симметричное выравнивание по двум краям.
Пример:
Моя любимая веб-страница
h1 Товар
h2 Товар
h3 Товар
Такое форматирование называется физическим и в принципе устарело. Для форматирования лучше и рекомендовано использовать таблицы каскадных стилей (CSS).
Списки
Современный стандарт HTML предусматривает создание трех основных видов списков:
- Списки маркированные (unordered list);
- Списки нумерованные (ordered list);
- Список определений терминов (definition list).
Рассмотрим каждый из видов списков.
Списки маркированные
Маркированные списки задаются тегами (unordered list). Для создания каждого элемента списка применяется теги
Пример:
- Товар 1 из списка товаров
- Товар 2 из списка товаров
- Товар 3 из списка товаров
В список можно помещать теги загловков:
- Товар 1 из списка товаров
- Товар 2из списка товаров
- Товар 3 из списка товаров
Заголовок списка
Маркеры, то есть видимые значки перед элементами списка, могут меняться, а их внешний вид задается атрибутами type. Атрибуты type могут быть: circle (не закрашенный кружок), disk(закрашенный кружок) и square(квадрат закрашенный). По умолчанию используется атрибут disc. Пример использования маркера с атрибутом disk:
- Товар 1 из списка
- Товар 2 из списка
- Товар 3 из списка
Списки нумерованные
Нумерованные или упорядоченные списки (ordered list), каждому элементу списка присваивается номер. Создаются нумерованный списки тегами . Для каждого элемента нумерованного списка, также используются парные теги
В нумерованных списках используются пять атрибутов:
1-Цифры арабские; i- Римские строчные цифры; I- римские прописные цифры; a-Латинские строчные буквы; A-Латинские прописные буквы.
Пример нумерованного списка.
- Товар1 из списка
- Товар2 из списка
- Товар3 из списка
Список Товаров нумерованный
Пример нумерованного списка с маркерами латинских строчных букв:
- Товар1 из списка
- Товар2 из списка
- Товар3 из списка
Списки определений
Для создания списков по типу термин-определение термина, применяются теги
- …
- , а определение (объяснение) термина заключается в парный тег
- .
Пример:
- Термин 1
- Объяснение термина 1
- Термин 2
- Объяснение термина 2
Заголовок
Вложение списков
Любой тип списка, маркированный и нумерованный, можно друг в друга вкладывать. Вложение допустимо произвольное. Главное при создании вложенных списков не запутаться в парных тегах.
Пример вложенных списков:
- Раздел товаров 1
- Раздел товаров 1.1
- Раздел товаров 1.2
- Раздел товаров 2
- Раздел товаров 2.1
- Раздел товаров 2.2
- Раздел товаров 2.3
- Раздел товаров 3
- Раздел товаров 3.1
Вложенные списки
Таблицы в HTML
Для структурирования документов HTML основной структурой являются таблицы. Правда, стоит отметить, что использование таблиц для организации структур страниц устаревает и уже признано не рекомендуемым.
Структура таблицы:
//- парные теги контейнера таблицы;//
//контейнер для создания строки таблицы// //тег создания одной ячейки таблицы. Этот тег должен быть внутри контейнера , который должен быть внутри тега// - Border – рамка шириной 2 px;
- Cellpadding-расстояние между внешними границами ячеек таблицы;
- Cellspacing-расстояние между внешними границами ячеек таблицы.
- Height- высота таблицы;
- Width- ширина таблицы.
- Caption- тег для создания заголовка таблицы, может размещаться только внутри контейнера
.
Пример таблицы:
Простая таблица 1-1 1-2 1-3 2-1 2-2 2-3 Теги colspan и rowspan
предназначены для объединения ячеек: Объединение ячеек в HTML-таблице Ячейки 1.1 и 1.2 Ячейка 1.3 Ячейка 2.1 Ячейка 2.2 Ячейка 2.3 Ячейки 3.1 - 3.3 Гиперссылки
Основной атрибут этого тега href. Этот тег содержит адрес ресурса, на который ведет ссылка. Внутри тега-контейнера пишется текст ссылки.
Якорь
Чтобы сослаться на якорь, в другом документе, имя якоря с решеткой (#), пишется сразу после адреса стороннего документа, без пробела.
Ссылка на Якорь 3 в Документе 009
Рисунки в виде ссылок
Рисунки и фото также можно делать в виде ссылок. Для этого рисунок вставляется в текст с тегом . Атрибута src этого тега имеет значение файла картинки:
На этом все! Конечно, основы HTML не включают все особенности этого языка, но дают представление о формировании HTML документа.
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ
імені Володимира Даля
Кафедра компьютерных наук
По дисциплине
Компьютерній дизайн и мультимедия
СтудентБолдакова И.В.
1. Вступление
3.1 HTML-редакторы
4. Создание сайта при помощи CMS Joomla 1.5.7
Литература
1. Вступление
World Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW.Вся информация в Web-браузере отображается в виде Web-страниц.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.
Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера.
Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера. И я, в данном случае, не являюсь исключением, потому и выбрала такую тему для своей курсовой работы.
В своем реферате я сделала попытку разобраться в том, что необходимо знать и уметь для создания Web-страницы, какое программное обеспечение является инструментарием создания Web-страниц и как его эффективно использовать.
Также в данной работе мною рассмотрены основы языка программирования Web-страниц - HTML, который является общепринятым стандартом WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами ее правильного оформления. А так же при помощи CMS Joomla мы рассмотрим создание сайта.
2. Рассмотрим язык гипертекстовой разметки HTML
Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы.
Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах.
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Opera, Google Chrome, Internet Explorer или другими браузерами.
Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.
HTML был ратифицирован World Wide Web Consortium. Он поддерживается всеми браузерами.
Поскольку HTML-документы записываются в ASCI I-формате, то для ее создания может использован любой текстовый редактор.
Обычно HTML-документ - это файл с расширением.html или. htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.
Все теги начинаются символом "<" и заканчиваются символом ">". Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:
Информация
Здесь стартовым тегом является тег
А завершающим -
. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ "/ " (слэш).Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части:
A) Объявление HTML;
B) Заголовачная часть;
C) Тело документа.
A) Объявление HTML
и . Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег (в самом начале документа), а последним - (в самом конце документа).
B) Заголовочная часть.
и . Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегамии .Моя первая страница C) Тело документа.
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами
и . Первый из них должен стоять сразу после тега , а второй - перед тегом