LAB3 Мясникова О.А. (544715)
Текст из файла
НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ
МОСКОВСКИЙ ЭНЕРГЕТИЧЕСИЙ ИНСТИТУТ(ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
Лабораторная работа №3 по дисциплине ВМСС
Разработка простой web-страницы
Выполнила
студентка группы
А-13-08
Мясникова Ольга
Преподаватель:
Куриленко И.Е.
Москва, 2012
HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.
HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге.
Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML , которая обычно выглядит примерно так:
"http://www.w3.org/TR/html4/strict.dtd">
Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.
Далее обозначается начало и конец документа тегами и соответственно. Внутри этих тегов должны находиться теги заголовка () и тела () документа.
Варианты DOCTYPE для HTML 4.01
-
Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated).
"http://www.w3.org/TR/html4/strict.dtd">
-
Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.
"http://www.w3.org/TR/html4/loose.dtd">
-
С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.
"http://www.w3.org/TR/html4/frameset.dtd">
Варианты DOCTYPE для HTML 5
В HTML 5 используется только один вариант DOCTYPE:
HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году[1]) и находится в стадии разработки по состоянию на ноябрь 2011 года. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.). HTML5 включает в себя HTML 4 и JavaScript.
Основные элементы («теги»)
Теги и их параметры нечувствительны к регистру. То есть и означают одно и то же.
В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.
Гиперссылки
-
Атрибут HREF задает значение адреса документа, на который указывает ссылка.
-
filename — имя файла или адрес Internet, на который необходимо сослаться.
-
название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу.
-
TARGET — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
-
_top — открытие документа в текущем окне;
-
_blank — открытие документа в новом окне;
-
_self — открытие документа в текущем фрейме;
-
_parent — открытие документа в родительском фрейме.
-
Значение по умолчанию: _self.
Текстовые блоки
-
…
,…
, … ,…
— заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый большой, 6 — почти равен обычном тексту по умолчанию). -
— новый абзац. Можно в конце абзаца поставить
, но это не обязательно. -
— новая строка. Этот тег не закрывается (то есть не существует тега ) -
— горизонтальная линия -
… — цитата. Обычно текст сдвигается вправо.
-
…
— режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме , игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе). -
… — блок (обычно используется для применения стилей CSS)
-
… — строка (обычно используется для применения стилей CSS)
Форматирование текста
-
… — логическое ударение (обычно отображается курсивным шрифтом)
-
… — усиленное логическое ударение (обычно отображается жирным шрифтом)
-
… — выделение текста курсивом
-
… — выделение текста жирным шрифтом
-
… — подчёркивание текста
-
…— зачёркивание текста. Вот так: зачёркнутый текст. -
… — то же самое, что
… -
… — увеличение шрифта
-
… — уменьшение шрифта
-
… — мигающий текст. Внимание! Этот тег может не работать в браузере Internet Explorer версий 5 и ниже без применения JavaScript
-
… — сдвигающийся по экрану текст.
-
… — подстрочный текст. Например, H2O создаст текст H2O.
-
… — надстрочный текст. Например, E=mc2 создаст текст E=mc2.
-
параметры> … — задание параметров шрифта. У этого тега есть следующие параметры:
-
COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.
-
FACE=шрифт меняет шрифт
-
SIZE=размер меняет размер шрифта. Размер от 1 до 7, стандартный по умолчанию 3. (Есть много способов изменить стандартный размер для данной страницы.)
-
SIZE=+размер или SIZE=-размер — размер задаётся по сравнению со стандартным. Например, +2 означает размер на 2 больше стандартного.
-
Изображения
-
IMG — вставка изображения. Этот тег не закрывается.
-
SRC — имя или URL
-
ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)
-
TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)
-
WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется»/«сожмется»)
-
ALIGN — задает параметры обтекания текстом (top, middle, bottom, left, right)
-
VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения
-
Пример:
Изображение можно сделать ссылкой:
Таблицы
-
TABLE — создание таблицы. Параметры тега:
-
BORDER — толщина разделительных линий в таблице
-
CELLSPACING — расстояние между клетками
-
CAPTION — заголовок таблицы (этот тег необязателен)
TR — строка таблицы
TH — заголовок столбца таблицы (этот тег необязателен)
TD — ячейка таблицы
height — высота таблицы
width — ширина таблицы
Символы
Чтобы создать символ, необязательно искать его на клавиатуре. Можно просто набрать тег (например, чтобы получить ¢, надо набрать следующее: ¢). Пробел - , ударение - ́ и т. д.
С чего начинается работа
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так:
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2 (это проверенная, но очень старая версия). Как видно из примера, самый короткий html-документ состоит буквально из одной строки.
После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера . Необходимо отметить, что любой HTML-документ открывется тегом и им же закрывается.
Затем, между тегами и следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:
Заголовок документа
Текст документа
Если приведенный выше пример пояснить схематически, получится следующее:
Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.
Заголовок
Создается с помощью элемента HEAD, между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документа.
Элементы, относящиеся к заголовку документа
HEAD
Определяет начало и конец заголовка документа
TITLE
Определяет имя всего документа, которое отображается в заголовке окна браузера
BASE
Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа
STYLE
Используется для вставки в документ таблицы стилей CSS
LINK
Описывает взаимосвязь документа с другими объектами
META
Используется для вставки метаданных
Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия .
Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами и
HEAD
(HTML 1.0) - Head
Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE,BASE,STYLE,LINK,META).
TITLE
(HTML 2.0) - Title
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
Пример:
...
Руководство по эксплуатации
...
Примечания:
-
Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег внутри TITLE не действует.
STYLE
(HTML 3.2) - Style
Используется для вставки в документ таблицы стилей (CSS - Cascade Style Sheet).
Атрибуты
TYPE - обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".
TITLE - определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.
Пример:
Пример использования таблицы стилей
LINK
(HTML 2.0) - Link
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK.
Атрибуты
HREF - определяет URL объекта.
REL - определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:
-
stylesheet - указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу
-
home - указывает на заглавную страницу вашего сайта
-
toc, contents - указывают на файл, содержащий оглавление данного документа.
-
index - указывает на файл, содержащий информацию для индексного поиска по текущему документу.
-
glossary - указывает на файл, содержащий перечень терминов, относящихся к текущему документу.
-
copyright - указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.
-
up, parent - указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).
-
child - указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).
-
next - указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).
-
previous - указывает на предыдущую страницу в последовательности документов. last, end - указывает на последнюю страницу в последовательности документов. first - указывает на первую страницу в последовательности документов. help - указывает на страницу с подсказкой (напр. по навигации по вашему сайту).
TYPE - определяет MIME-тип для объекта, указанного в атрибуте HREF.
Пример 1
Элемент DIV
Пример 2
Примечание
Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта - эта информация интересна только индексирующим роботам поисковых систем.
META
(HTML 2.0) - Meta
Характеристики
Тип файла документ
Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.
Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.
Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
