Лабораторная работа 3 (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. Мы приводим только основные параметры тегов.

Гиперссылки

<A HREF="filename" target="_self">название ссылки</A>

  • Атрибут 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 — задают размеры вертикального и горизонтального пространства вокруг изображения

Пример:

<IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">

Изображение можно сделать ссылкой:

<A HREF=url ><IMG SRC=url></A>

Таблицы

  • 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


Случайные файлы

Файл
177691.rtf
124331.rtf
90769.rtf
2932.rtf
123626.rtf




Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
Это можно сделать совершенно бесплатно. Читайте подробности тут.