Код HTML
Выбери формат для чтения
Загружаем конспект в формате pdf
Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
1. ОСНОВЫ HTML
Web-страницы – это текстовые файлы, хранящие содержимое страницы и команды
форматирования, называемые тегами. Правила форматирования документа регламентируется
языком разметки гипертекста HTML (Hyper Text Markup Language). Код HTML
интерпретируется браузером, который выводит отформатированное содержимое webстраницы на экран.
Тег - ключевое слово языка HTML, которое служит для оформления различных
элементов в документе. Тег записывается в треугольных скобках: <тег>. Теги бывают
парными и непарными. Парные теги требуют обязательного закрывающегося тега, синтаксис
которого тег>. Непарные теги соответственно закрывающего не имеют. Текст,
содержащийся между начальным и конечным тегом, отображается и размещается в
соответствии со свойствами, указанными в начальном теге.
Тега может иметь атрибуты, дающие дополнительные возможности описания
элемента web-страницы. Синтаксис такого тега:
<тег атрибут="значение" атрибут="значение" …>.
1.1. Структура документа
Документ HTML требует наличия определенных тегов в определенных позициях.
Структура HTML-документа:
Документ на языке HTML определяется парным тегом . Он открывается в
самом начале документа, а закрывается в самом конце.
Заголовок документа определяется парным тегом , после которого идут теги,
задающие информацию о документе. В частности, заголовок документа в браузере задается
между тегами и .
После тега следует тело документа. Под «телом» понимается весь набор
элементов на web-странице. Это может быть текст, графика, ссылки, таблицы и др. Тег
может включать множество атрибутов:
1
Атрибуты цвета в документах HTML задаются в системе RGB несколькими
способами:
- #RRGGBB, где каждая пара RR, GG, BB определяет наличие соответствующего
цвета. Цвет получается из смешивания красного (RR), зеленого(GG) и синего(BB) цветов.
Каждый пара описывается числом от 0 до FF в шестнадцатеричной системе счисления;
- color соответствующий цвет на английском языке.
В таблице 1 приведены основные цвета HTML.
Таблица 1.1.
Основные цвета
Цвет
Color
#RRGGBB
Цвет
Color
#RRGGBB
black
#000000
silver
#c0c0c0
черный
серебряный
red
#ff0000
темно-бордовый maroon #800000
красный
green
#008000
lime
#00ff00
зеленый
известь
olive
#808000
yellow
#ffff00
оливковый
желтый
navy
#000080
blue
#0000ff
темно-синий
синий
purple #800080
fuschia #ff00ff
фиолетовый
фуксия
teal
#008080
aqua
#00ffff
чирок
аква
gray
#808080
white
#ffffff
серый
белый
В качестве значений атрибутов для числовых значений (#) используются:
- десятичные числа с единицами измерения (например, 1px, 1pt, 1cm) – размер
вычисляется соответственно в пикселях, пунктах, сантиметрах и т.д.;
- десятичные числа (например, 5) – в этом случае в качестве единицы измерения
используется пиксель (px);
- проценты (10%) –размер вычисляется в процентах от охватывающего элемента.
Задания для самостоятельного решения
1. Создать HTML-страницу с заголовком «Я изучаю HTML». Для этой страницы
установить серый цвет фона и темно-синий цвет текста.
2. Изменить созданную страницу, установив для нее фоновый рисунок.
1.2. Описание HTML тегов
1.2.1. Комментарий
Для пояснений фрагментов кода используется тег комментария . Например:
1.2.2. Форматирование фрагментов текста
Форматирование текста – это средства, позволяющие менять вид текста, например,
изменение размера, начертания, применение различных эффектов. Ниже приведены
некоторые теги, используемые для форматирования фрагментов текста:
пример - полужирное начертание (пример);
пример - курсивное начертание (пример);
пример - курсивное начертание (пример);
пример - подчеркивание текста (пример);
2
пример - зачеркнутый текст (пример);
пример - текст фиксированной ширины (пример);
пример- подстрочное написание (пример);
пример - надстрочное написание (пример);
пример - установка различных характеристик шрифта.
Последний тег имеет атрибуты, с помощью которых можно задать тип шрифта, его
размер и цвет:
Любые теги форматирования текста можно использовать совместно друг с другом.
Например:
HTML-код
Страница в браузере
HTML – это язык
гипертекстовой
разметки, который
используется для создания
web-страниц.
HTML – это язык гипертекстовой разметки,
который используется для создания webстраниц.
Задания для самостоятельного решения
HTML-код, для следующего фрагмента текста,
1. Написать
сохранив его
форматирование:
Даны n точек на плоскости: (x1, y1), (x2, y2), …, (xn, yn). Найти: а) точку
*
(x , y*), наиболее удаленную от начала координат; б) точку (x0, y0), ближайшую к
началу координат.
2. Как будет отображен в браузере следующий фрагмент HTML-кода:
Вычислить сумму ряда 1x2+x4-...(-1)nx2n
для заданного числа членов n и
|x| < 1. Значения n и x вводятся
пользователем.
1.2.3. Создание и форматирование текстового документа
Средствами HTML-тегов можно получить привычную структуру текстового
документа: разделить текст на абзацы, выделить разделы и подразделы, использовать
различные типы списков и т.д.
Абзацы текста
В языке HTML для разделения текста на абзацы используется парный тег
Разделители
Для перехода на следующую строку в любом месте документа используется непарный
тег
. Он применяется, если нет необходимости создавать новый абзац, как, например, в следующем случае: HTML-код Страница в браузере Абзац - это...
добавляет полосу в том месте, где он встречается. В следующем примере горизонтальная полоса располагается сразу после заголовка первого уровня: HTML-код Страница в браузере
Структура HTML-страницы Тег имеет следующие атрибуты: 4
Списки Списки служат для упорядочивания информации однородного характера. Списки могут быть нумерованными и маркированными. Список в документе HTML состоит из парного тега, определяющего список, и тегов, отделяющих каждый элемент списка друг от друга. Нумерованный список создается парным тегом
. У этого тега определен атрибут, который используется для изменения способа выравнивания абзаца:
выравнивание абзаца по левому краю, по центру, по правому краю и по ширине страницы соответственно. Остальные характеристики абзаца, такие как отступ первой строки, интервал между строками можно задать, используя CSS. 3 Заголовки Структуру документа, разделенного на главы, разделы, подразделы и пр., можно создать, используя заголовки разного уровня. Для описания заголовков используют шесть парных тегов:
текст
- первый уровень;текст
- второй уровень;текст
- третий уровень;текст
- четвертый уровень;текст
- пятый уровень;текст
- шестой уровень. Например, использование данных тегов позволит создать web-страницу вида: HTML-код Страница в браузере Основы языка HTMLОсновы языка HTML
Описание тегов
Форматирование документа
Список
Нумерованный список
Атрибуты списка
Описание тегов Форматирование документа Список Нумерованный список Атрибуты списка Каждый уровень заголовка имеет собственное стандартное форматирование, например, для заголовка уровня 1 определено: размер шрифта 14, полужирное начертание. Заголовки можно выровнять на странице, для этого используется атрибут align:. Он применяется, если нет необходимости создавать новый абзац, как, например, в следующем случае: HTML-код Страница в браузере Абзац - это...
Абзац - это...
Способы форматирования
абзаца:
по центру,
по
правому краю,
левому
краю,
по ширине
добавляет полосу в том месте, где он встречается. В следующем примере горизонтальная полоса располагается сразу после заголовка первого уровня: HTML-код Страница в браузере
Структура HTML-страницы
Структура HTML-страницы Тег имеет следующие атрибуты: 4
Списки Списки служат для упорядочивания информации однородного характера. Списки могут быть нумерованными и маркированными. Список в документе HTML состоит из парного тега, определяющего список, и тегов, отделяющих каждый элемент списка друг от друга. Нумерованный список создается парным тегом
- , который имеет следующие
атрибуты:
- .
Пример использования нумерованного списка, для нумерации используются
маленькие латинские буквы, список нумеруется, начиная с буквы j (так ка эта 10-я буква в
латинском алфавите):
HTML-код
Страница в браузере
- element 1
- element 2
- element 3
- , имеющим следующие
атрибуты:
- element 1
- element 2
- element 3
-
Пример создания неупорядоченного списка, в котором используется квадратный
маркер:
HTML-код
Страница в браузере
- Выделение текста:
- жирным;
- курсивным;
- Характеристика шрифта.
- Вставка рисунков.
- Оформление текста:
- заголовки;
- абзацы;
- списки.
-
Отдельные элементы списка создаются с помощью парного тега
Возможности HTML
Средствами HTML осуществляется переход внутри страницы и на другие страницы сети Интернет. Для этого используется специальный тег.
Рис. 1.2. Образец web-страницы 6 1.2.4. Рисунки В HTML-документы кроме текста можно включать другие элементы: рисунки, таблицы и пр. Для вставки рисунка используется тег img. В документы рисунки физически не вставляются, в теле документа прописываются ссылки на внешние файлы с изображениями с помощью атрибута src. В результате получается документ со ссылками, а рисунки хранятся отдельно. Альтернативный текст выводится в браузере, пока не загружен рисунок. Альтернативный текст должен адекватно описывать рисунок, чтобы пользователь, отключивший вывод изображений, мог определить, нужно ли загружать это изображение. Пример использования различных значений атрибута align: HTML-код Страница в браузере Выравнивание рисунка Выравнивание рисунка Выравнивание рисунка Выравнивание рисунка Выравнивание рисунка Выравнивание рисунка Выравнивание рисунка Выравнивание рисунка Задания для самостоятельного решения 1. Напишите HTML-код страницы (с 3-мя рисунками), показанной на рисунке 1.3. Рис. 1.3. Страница с рисунками 7 1.2.5. Таблицы Помимо своего прямого назначения, таблицы могут служить основой для создания страниц блочной структуры. В конце 20-го века практически все сайты были сделаны на основе табличной структуры. Таблицы представляют собой совокупность строк. Строка состоит из совокупности ячеек, в которые и помещается различное содержимое: текст, рисунки и т.д. Для описания таблицы используется парный тег