Электронные учебно методические комплексы Основы HTML Общее

Электронные учебно методические комплексы Основы HTML

Общее представление Основным форматом представления документов в сети Интернет является язык гипертекстовой разметки HTML – это определенная совокупность правил (тегов), по которым оформляется документ. Теги показывают Интернет-браузеру, как следует отображать текст на Web-страничке. Теги всегда используются в паре: открывающий и закрывающий. Структура тега (пары тегов) всегда такова: <название тега> … </название тега> Теги могут содержать атрибуты, характеризующие отображение информации внутри тега.

Текстовый файл, в котором хранятся теги, обязательно должен иметь расширение html (или htm)

Работа с HTML-документом Операция Используемые ПС Пример Создание / Редактирование Любой текстовый редактор Блокнот, Word и т. п. Просмотр Интернет-браузер Internet Explorer, Netscape, Opera и др.

Структура HTML-документа Начало HTML документа Начало заголовка <HTML> <HEAD> <TITLE> Название документа Конец заголовка </TITLE> </HEAD> <BODY> Тело документа </BODY> Конец HTML документа </HTML>

Теги для работы со структурой документа

Границы документа Основным тегом языка HTML является тег (пара тэгов) <html> … </html> Они обозначают, что находящиеся между ними строки представляют единый HTML-документ. Это важно, так как сам по себе документ является обыкновенным текстовым файлом в формате ASCII. Без этих тегов ни один Интернет-браузер не в состоянии идентифицировать формат документа и правильное его интерпретировать. Примечание: обязательно указывать открывающий, но и закрывающий теги. не только

Заголовок документа Следующим тегом, который относится к разметке структуры документа, является тег заголовка документа <head> … </head> Задача заголовка документа – предоставление необходимой информации для программы, интерпретирующей документ. Элементы находящиеся внутри заголовка (кроме <title>) не отображаются на экране во время просмотра документа.

Название документа Раздел <title> … </title> является единственным обязательным элементом заголовка и служит для того, чтобы дать документу название, которое будет отображаться в заголовке окна браузера. Название документа представляет собой обычную текстовую строку, которая характеризует содержание документа в целом. Примечание: не стоит путать между собой название документа и название файла документа, эти элементы не зависят друг от друга.

Пример Название документа, указывается с помощью пары тегов <title> </title>

Примечание: если тег <head></head> не содержит иных параметров, кроме <title></title>, то его указывать не обязательно.

Тело документа Тег <body> … </body> содержит тело документа, браузером на экране. которое отображается

Задание 1. 2. Создать HTML-документ Сохранить его в папке “HTML” под названием proba. html

Порядок создания документа 1. Запустите программу Блокнот Пуск -> Программы ->Стандартные -> Блокнот

Порядок создания документа 2. Наберите в окне программы Блокнот следующий текст: <html> <title>Мой первый документ</title> <body> Привет </body> </html>

Порядок создания документа 3. Сохраните файл документа в личной папке. Для этого следует воспользоваться меню программы Блокнот: Файл -> Сохранить Название документа: proba. html

Порядок создания документа 4. Для просмотра HTML-документа запустите программу Internet Explorer, которая вызывается двойным щелчком мыши на значке файла proba. html в папке.

Цвет фона HTML-документа Тег <body> … </body> имеет несколько параметров. Некоторые из них: bgcolor – цвет фона документа background – указывает путь к графическому файлу, который будет использован в качестве фона документа.

Пример <body bgcolor=‘yellow’ background=‘fon. jpg’> Примечания: 1) если параметры цвета фона у данного тега не указаны, то фон документа будет белым; 2) если указаны оба параметра (и цвет, и рисунок), преимущество имеет рисунок. Только если рисунок, указанный в качестве фона не будет найден, будет отображен цвет фона документа.

Фон документа - рисунок

Фон документа - цвет

RGB цвета В HTML цвета можно задавать непосредственно названиями, а можно в шестнадцатеричной форме. Цветовая схема базируется на трех основных цветах RGB. Для каждого направления задается шестнадцатеричное значение от 00 до FF. Затем эти числа объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Изменяя значения шестнадцатеричного числа, можно подобрать требуемый цвет.

Теги для форматирования текста

Абзац HTML предполагает, что автор документа ничего не знает о компьютере пользователя. Пользователь вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Для разбиения текста на абзацы используется тег … Для начала абзаца следует разместить тег в начало строки абзаца. Данный тег имеет большое значение при стилевом оформлении документа.

Выравнивание текста Тег абзаца имеет важный параметр align Данный параметр может иметь значения: left – выравнивание текста по левой границе окна браузера; right – выравнивание текста по правой границе; justify - выравнивание по ширине; center - выравнивание текста по центру. По умолчанию действует параметр left.

Шрифты Одной из важных возможностей HTML является полный контроль облика создаваемого документа, в том числе управление шрифтами. На практике тип выводимых шрифтов сильно зависит от программно-аппаратного обеспечения компьютера пользователя. Однако для HTML-документов проблема значительно облегчается тем, что на всех машинах сети должен быть установлен стандартный набор шрифтов. Обычно это Verdana, Arial, Times New Roman. Для работы со шрифтами используется тег …

Размер шрифта Тег font имеет следующие параметры size Служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер «нормального» шрифта соответствует числу 3. Например, Размер шрифта равен 4

Цвет шрифта Параметр color Устанавливает цвет шрифта, который может быть указан как в формате RGB, так и стандартным именем. Например, Цвет шрифта - желтый

Заголовки документа Заголовки имеют важное значение в структурировании HTML-документа и являются одними из самых употребляемых в языке разметки текста. Их назначение – показать структуру документа. HTML располагает шестью уровнями заголовков. <h 1> … </h 1> … <h 6> … </h 6> Самый верхний уровень <h 1>, нижний - <h 6>. Все эти теги также имеют параметр align.

Начертание … - начало-конец оформления фрагмента текста курсивом; … - начало-конец оформления фрагмента текста более жирным начертанием; … - начало-конец оформления фрагмента текста подчеркиванием.

Перевод строки Для того, чтобы перейти на новую строку в любом месте текущей строки, в HTML существует тэг разрыва строки Этот тег заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тэга абзаца, тэг не добавляет пустую строку и не имеет закрывающего тэга.

Разделительные линии Еще одним методом разделения документа является использование разделительных линий. Для проведения такой линии в теле документа используется тег <hr> Тег обладает следующими параметрами: align – выравнивание линии; width – длина линии (может устанавливаться в %); size – ширина линии (в пикселах); color - цвет линии.

Задание. Откройте документ proba. html добавьте произвольный текст (напишите о себе, о своей будущей профессии и т. д. ). Примените к данному документу все стили форматирования изложенные выше. Добавьте в документ разделительную линию. Добавьте фоновый рисунок или заливку цветом. Просмотрите полученный документ.

Списки Очень важный элемент Web-страничек — списки. Различают: нумерованный и маркированный списки, список определений и вложенные списки (сочетающие в себе элементы различных списков). В нумерованном списке (Ordered List) каждому элементу предшествует его порядковый номер. Чтобы программа просмотра правильно расставила номера, нужно использовать тэги разметки: <ol> <li> Первый элемент <li> Второй элемент </ol>

Нумерованный список Тэг <OL> может иметь параметры, Например: <OL TYPE=A|a|I|i|1 START=n>, где: TYPE - определяет вид счетчика: A - большие латинские буквы (A, B, C. . . ) ; a - маленькие латинские буквы (a, b, c. . . ); I - большие римские цифры (I, III. . . ); i - маленькие римские цифры (i, iii. . . ) 1 - обычные цифры (1, 2, 3. . . ) – по умолчанию START=n - число, с которого начинается отсчет

Маркированный список В маркированном списке (Unordered List) каж дому элементу списка предшествует символ bullet (пуля). Для создания маркированного списка исполь зуются следующие тэги: <ul> <li> Первый элемент <li> Второй элемент </ul> Тэг <UL> может иметь параметр, Например: <UL TYPE=disc|circle|square> Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).

Вложенный список (Nested lists) включает элементы различных списков: <оl> <li> Первый элемент нумерованного списка <ul> <li> Первый элемент маркированного списка <li> Второй элемент маркированного списка </ul> <li> Второй элемент нумерованного списка </ol>

Списки определений обеспечивают специальное форматирование, как в словарях, для терминов и связанных с ними описаний. <DL> - идентификатор списка определений. В конце </DL>. <DT> - идентификатор термина в списке определений. <DD> идентификатор значений термина в списке определений. Списки определений имеют вид: <DL> <DT> название термина 1 <DD> определение термина 1 <DD> другое определение термина 1. . . </DL>

Задание Создать 1 нумерованный и 1 маркированный список в документе Proba. Html