Основы html. Форматирование текста. Стили.
реклама
1. Основные понятия и определения. HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство вебстраниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Браузер (интернет-обозреватель) – программа, которая применяется для поиска и просмотра документов в сети Internet. Браузер интерпретирует html- код и отображает html – документ в его форматированном виде. Н: Internet Explorer, Mozilla Firefox, Opera, Google Chrome. HTML-реда́ктор — компьютерная программа, позволяющая создавать и изменять HTML-страницы. Несмотря на то, что HTML-код может быть написан в простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности. По своей функциональности они делятся (часто весьма условно) на две категории: Редактор показывает только исходный код. Редактор показывает готовую страницу в режиме WYSIWYG (что видишь, то и получишь). Например: Adobe Dreamweaver, Microsoft FrontPage Express, Macromedia HomeSite. Тэг – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте веб-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. Атрибут – переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами. Программный код – аналог понятия «текст программы». Элемент - это конструкция языка HTML, содержащая какие-то данные, например: < BODY >текст</ BODY > - это элемент, в котором можно выделить три части: < BODY > - открывающий тег (англ. tag); текст - содержимое элемента (в данном примере, текст); </ BODY > - закрывающий тег; Почти все теги в хтмл парные, т.е. имеют открывающий тег и закрывающий тег. Теги начинаются символом "<" и заканчиваются символом ">", а закрывающий тег отличается от открывающего наличием символа "/".Для некоторых элементов закрывающий тег не обязателен, а некоторые вообще не имеют закрывающего тега. Пара тегов <BODY></BODY> называется контейнером. Теги могут содержать какие-то параметры, называемые атрибутами, которые содержатся в открывающем теге, например: <BODY color="blue"> В этом примере: color –атрибут (параметр), blue – значение атрибута (параметра). Синтаксис построения элементов в html. < ТЕГ ПАРАМЕТР_1=«знач_параметра_1» ПАРАМЕТР_2=«знач_параметра_2» > 2. Структура веб-документа. Любой веб-документ состоит из контейнера < HTML > </ HTML > , внутри которого располагаютя еще два контейнера < HEAD ></ HEAD > и <BODY></BODY>. < HTML > </ HTML > указывает браузеру на то, что документ разработан с помощью языка html. < HEAD ></ HEAD > - «головной контейнер», содержит внутренние сведения о странице (название, автор, ключевые слова…) В «головной контейнер» входят: Тег <title> - определяет название документа. Тег <meta> - содержит служебную информацию о внутренний свойствах документа. В качестве основных можно выделить следующие мета – теги: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> (обязательный тег) показывает, что текст написан с использованием языка разметки html и что в документе применена кодировка utf-8; <meta name=”keyword”> - вместо keyword указываются ключевые слова документа, на основании которых производится поиск в интернет; <meta name=”author”> содержит информацию об авторах документа. <BODY>></BODY> указывает на начало собственно "тела" Веб-страницы. В этом разделе размещается весь материал (текст, графика, таблицы и другие элементы содержимого страницы), который увидят пользователи, обратившиеся к Веб- странице. Простейшая структура Веб- страницы: <html> <head> <title>Название страницы</title> </head> <body> Текст страницы </body> </html> Для корректного отображения браузером веб-страниц, необходимо: в html -коде первой строкой прописывать тег <!DOCTYPE>, в котором содержится информация о версии html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> в теге <html> указать параметр xmlns: <html xmlns="http://www.w3.org/1999/xhtml"> в контейнере <head></head> прописать мета-тег: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">. Таким образом, структура Веб-документа, должна иметь вид: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Название страницы</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> Текст страницы </body> </html> Задание 1. В Блокноте наберите приведенный выше программный код. Сохраните документ под именем Shablon.html. Откройте документ с помощью браузера и посмотрите на результат. 3. Форматирование текста. Ниже перечислены основные теги, используемые при форматировании текста, и их свойства. Теги <p></p> <br> <nobr></nobr> Описание тегов Параметры тегов Задает абзац (параграф) align Описание параметров Значения параметров сenter, justify, left, right style title Выравнивание абзаца Задание стиля Задание имени face Тип шрифта Verdana, Times New Roman, Обеспечивает принудительный переход на новую строку Обеспечивает запись текста на одной строке <b></b> Отображает <strong></strong> текст жирным <i></i> <em></em> <cite></cite> <u></u> <ins></ins> <s></s> <strike></strike> <del></del> <sup></sup> <sub></sub> <font></font> Выделяет текст курсивом Отображает текст подчеркнутым Отображает текст зачеркнутым Переводит текст в нижний регистр Переводит текст в верхний регистр Определяет тип, размер и цвет шрифта <h1></h1> <h2></h2> … <h6></h6> <small></small> <big></big> <span></span> <pre></pre> <blockquote> </blockquote> <div></div> <body></body> Задает заголовки 1-го, 2-го,…,6-го уровня Уменьшает размер шрифта Увеличивает размер шрифта Служит для выделения части текста и присвоения ей свойств Отображает часть текста так, как она отформатирована (с любым количеством пробелов) Задает блок с отступами Универсальный блочный контейнер Определяет весь документ size Размер шрифта color Цвет шрифта align style title Выравнивание абзаца Задание стиля Задание имени style title Задание стиля Задание имени style title Задание стиля Задание имени style title align Задание стиля Задание имени Выравнивание абзаца Задание стиля Задание имени Задание цвета текста во всем документе Задание фона документа цветом Задание фона документа рисунком Задание стиля Задание имени style title text bgcolor background style title Arial,… +1,…+6; -1,…-6; Название (англ.), #RBG сenter, justify, left, right сenter, justify, left, right Название (англ.), #RBG Название (англ.), #RBG Название файла Примечание: Атрибут STYLE имеет, в свою очередь, множество своих параметров, которые устанавливают стиль того объекта, к которому STYLE применяется. Часто используемые параметры STYLE приведены в таблице ниже. Основные свойства параметра STYLE Атрибуты параметра STYLE background border color font line-height margin text-align text-indent Описание атрибутов Устанавливает фон объекта Устанавливает внешнюю границу объекта Задает цвет текста Задает стиль шрифта Регулирует межстрочный интервал Устанавливает внешние отступы от объекта Задает выравнивание текста Устанавливает отступ красной строки background-color (цвет фона) : (название или кодировка цвета) background-image (фоновый рисунок) : url(Ris.JPG) (адрес рисунка) background-repeat (повторение фонового рисунка) : border-color (граница) : (название или кодировка цвета) пунктирная линия двойная нет границы border-style (тип линии) : color (цвет текста) : font-family (гарнитура шрифта) : не повторять повторить повторить по горизонтали повторить по вертикали сплошная (название или кодировка цвета) кол-во пикселей font-size (размер шрифта) : крупный крупнее основного средний мелкий мельче основного очень крупный очень мелкий font-style (стиль шрифта) : курсив без курсива курсив полужирный font-weight (толщина шрифта) : line-height (межстрочный интервал) : normal (единичный интервал) 1.5 (полуторный интервал) 2 (двойной интервал) margin (внешние отступы) : 0px (нет отступов) 10px (отступы в 10 пикселей) 25px (отступы в 25 пикселей) margin-bottom (отступ снизу): (кол-во пикселей) margin-left (отступ слева) : (кол-во пикселей) margin-right (отступ справа) : (кол-во пикселей) margin-top (отступ сверху) : (кол-во пикселей) по центру text-align (выравнивание текста) : по ширине страницы по левому краю по правому краю мерцающий text-decoration (оформление текста) : text-indent (отступ красной строки) : (кол-во пикселей) зачеркнутый нет оформления надчеркнутый подчеркнутый Более полное описание свойств STYLE можно найти в интернет-справочниках http://css.manual.ru/, http://htmlbook.ru/css. Задание 2. Записать формулу в формате html. Задание 3. Представить текст, приведенный ниже, в формате html.
