LAB3 Мясникова О.А. (Лабораторная работа 3)

2015-08-202015-08-20zzyxelСтудИзба

Описание файла

Файл "LAB3 Мясникова О.А." внутри архива находится в папке "Лабораторная работа 3". Документ из архива "Лабораторная работа 3", который расположен в категории "". Всё это находится в предмете "вычислительные машины, системы и сети (вмсис)" из 8 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "вычислительные машины, системы и сети (вмсс)" в общих файлах.

Онлайн просмотр документа "LAB3 Мясникова О.А."

Текст из документа "LAB3 Мясникова О.А."

НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСИЙ ИНСТИТУТ(ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)

Лабораторная работа №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
… — сдвигающийся по экрану текст.
_… — подстрочный текст. Например, H₂O создаст текст H₂O.
^… — надстрочный текст. Например, E=mc² создаст текст E=mc².
параметры> … — задание параметров шрифта. У этого тега есть следующие параметры:
- 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

Описывает взаимосвязь документа с другими объектами

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 из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта - эта информация интересна только индексирующим роботам поисковых систем.

LAB3 Мясникова О.А. (Лабораторная работа 3)

Описание файла

Онлайн просмотр документа "LAB3 Мясникова О.А."

Текст из документа "LAB3 Мясникова О.А."

Гиперссылки

Текстовые блоки

…

…

…

Форматирование текста

Изображения

Таблицы

Символы

С чего начинается работа

Заголовок

HEAD

TITLE

Пример:

Примечания:

STYLE

Атрибуты

Пример:

LINK

Атрибуты

Пример 1

Пример 2

Примечание

META