Embed Size (px)
Citation preview
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> Задает абзац (параграф)
align
style title
Выравнивание абзаца
Задание стиля Задание имени
сenter, justify, left, right
<br> Обеспечивает принудительный переход на новую строку
<nobr></nobr> Обеспечивает запись текста на одной строке
<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> Определяет тип, размер и цвет шрифта
face
size
color
Тип шрифта
Размер шрифта
Цвет шрифта
Verdana, Times New Roman, Arial,…+1,…+6;-1,…-6;Название (англ.), #RBG
<h1></h1><h2></h2>…<h6></h6>
Задает заголовки 1-го, 2-го,…,6-го уровня
align
style
Выравнивание абзаца
Задание стиля
сenter, justify, left, right
title Задание имени<small></small> Уменьшает размер
шрифта<big></big> Увеличивает размер
шрифта<span></span> Служит для
выделения части текста и присвоения ей свойств
style title
Задание стиля Задание имени
<pre></pre> Отображает часть текста так, как она отформатирована (с любым количеством пробелов)
style title
Задание стиля Задание имени
<blockquote></blockquote>
Задает блок с отступами
style title
Задание стиля Задание имени
<div></div> Универсальный блочный контейнер
align
style title
Выравнивание абзаца
Задание стиля Задание имени
сenter, justify, left, right
<body></body> Определяет весь документ
text
bgcolor
background
style title
Задание цвета текста во всем документе
Задание фона документа цветом
Задание фона документа рисунком
Задание стиля Задание имени
Название (англ.), #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.
