- •Лабораторная работа №1. «Основные понятия html»
- •Основные понятия html Что такое Интернет?
- •Зачем нужен язык разметки?
- •Об истории html
- •Браузеры
- •Html-файлы
- •Редакторы html-файлов
- •Коротко о главном
- •Лабораторная работа №2. «Общая структура html-документа»
- •Общая структура html-документа
- •Структурные теги
- •Элементы форматирования на уровне блоков
- •Коротко о главном
- •Лабораторная работа №3. «Оформление текста в html-документе»
- •Формирование абзацев и заголовков, работа со шрифтами Абзацы
- •Заголовки
- •Горизонтальные линии
- •Бегущая строка
- •Работа со шрифтами
- •Создание списков
- •Коротко о главном
- •Лабораторная работа №4. «Структура html-приложения. Гиперссылки»
- •Структура html-приложения. Гиперссылки Структура html-приложения
- •Создание гиперссылок
- •Коротко о главном
- •Лабораторная работа №5. «Графика и мультимедиа в html-документе»
- •Вставка графики и мультимедиа Вставка изображений
- •Вставка звука и видео
- •Коротко о главном
- •Лабораторная работа №6. «Таблицы в html-документе»
- •Создание таблиц
- •Пример создания простой таблицы
- •Пример создания таблицы с названиями столбцов
- •Создание сложных таблиц
- •Пример фрагмента html-документа для создания таблицы с различной шириной строк и столбцов
- •Оформление таблиц
- •Коротко о главном
- •Лабораторная работа №7. «Формы в html-документе»
- •Формы в html-документе Создание форм
- •Коротко о главном
- •Лабораторная работа №8. «Фреймы в html-документе»
- •Фреймы в html-документе Создание фреймов
- •Создание «плавающих» фреймов
- •Создание гиперссылок с учетом фреймов
- •Коротко о главном
- •Практическая работа. «Основы веб-конструирования»
Редакторы html-файлов
Так как HTML-документ представляет собой текстовый файл, для его создания и редактирования можно использовать любой текстовый редактор, например Блокнот. Существуют также специальные программы для подготовки веб-страниц. Их можно разделить на два типа:
• редакторы HTML-текстов, которые автоматизируют набор кода. Наиболее известные из них – это HomeSite, HotDog;
• визуальные редакторы HTML, в которых пользователь имеет дело не с кодом, а с графическими образами элементов HTML. К ним относятся редакторы Microsoft Front Page, Macromedia Dreamweaver.
Задание 1.2. Запишите определения основных понятий в тетрадь
Коротко о главном
HTML – это язык разметки гипертекста (Hyper Text Markup Language). Используется для создания веб-страниц.
Браузер – это программа для просмотра HTML-документов, страниц в Интернете.
Гипертекст – документ, содержащий ссылки, передающие управление на другие фрагменты текста или другие документы, находящиеся как на данном компьютере, так и на любом компьютере, подключенном к Интернету.
Гипертекст – это расширенный текст, содержащий дополнительные элементы. Главный из них – это гипертекстовая ссылка (гиперссылка), щелчок на которой позволяет перейти к другому документу или к другому фрагменту того же документа. Вставные объекты (рисунки, видеоролики и т. д.) также рассматриваются как элементы гипертекста.
Гиперссылка – это ссылка на другое место в документе или на другой документ, веб-страницу и т.д.
HTML-документ – это текстовый файл, содержащий код HTML.
Разметка документа заключается в том, что в обычный текст добавляются специальные команды HTML, описывающие, как должен выглядеть данный текст.
Разметка HTML-документов выполняется с помощью тегов, которые записываются с соблюдением определенных правил.
Теги – это определенные последовательности символов, заключенные между знаками < (меньше) и > (больше), задающие правила вывода на экран текстов, графики, звука и т. д.
Лабораторная работа №2. «Общая структура html-документа»
Задание 2.1. Добавьте в логико-смысловую модель темы «Основные понятия HTML» новые оси, которые будут содержать элементы общей структуры HTML-документа.
Общая структура html-документа
В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например <html>, <head>, <title>, </title>. Такие элементы разметки называются тегами.
Теги бывают парные и непарные, открывающие и закрывающие. Отличительным признаком закрывающего тега является символ «/».
Теги состоят из следующих друг за другом в определенном порядке элементов:
■ левой угловой скобки <;
■ необязательного символа / (слэш), который означает, что тег является конечным тегом, закрывающим некоторую структуру, например </title>;
■ имени тега, например html;
■ необязательных атрибутов. Теги могут иметь один или несколько атрибутов – параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Атрибут тега состоит из имени, знака равенства и значения, которое задается строкой символов. Значения атрибутов обычно заключаются в кавычки, например align="center". Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить.
■ правой угловой скобки >.
Большинство тегов спарены: за открывающим тегом следует соответствующий ему закрывающий тег, а между ними содержится текст или другие теги. В таких случаях два тега и часть документа, заключенная между ними, образуют блок, называемый элементом HTML. Некоторые теги, например <hr>, являются одиночными и для них закрывающий тег не применяется. Такие теги сами по себе являются элементами HTML.
Область действия парного тега начинается с того места, где стоит открывающий тег, а заканчивается там, где встречается закрывающий. Так, например, текст будет выводиться на экран полужирным начертанием, если стоит между тегами <в> и </в>.
Фрагмент HTML-документа, состоящий из открывающего тега, закрывающего тега и текста (или кода), расположенного между ними, называется HTML-элементом.
Часто теги, помимо имени, содержат дополнительные элементы, которые называются атрибутами, например: <BODY bgcolor="green" text="red">
Атрибуты – это компоненты тега, содержащие указания о том, как браузер должен воспринять и обработать тег.
Атрибуты входят в состав открывающего тега. В закрывающих тегах атрибуты не используются. Значение атрибута записывается через знак равенства (=) и заключается в кавычки.
Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head> эквивалентны.
В любом документе HTML существуют элементы, определяющие его структуру, – это структурные теги.