
- •Лабораторная работа №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> должен открывать HTML-документ. Логично, что тег </html> должен завершать HTML-документ.
<HEAD>. . .</HEAD> – эта пара тегов указывает на начало и конец заголовка документа (Web-страницы). Помимо наименования документа (см. описание тега <title> ниже), в этот раздел может включаться множество служебной информации.
<TITLE>. . .</TITLE> – все, что находится между тегами <title> и </title>, толкуется браузером как название документа. Текст, размещенный за тегом <title>, отображается в заголовке окна браузера.
<BODY>. . .</BODY> – эта пара меток указывает на начало и конец «тела» HTML-документа и определяет основное содержание документа (Web-страницы).
Элементы форматирования на уровне блоков
При формировании Web-страниц часто требуется определить уровни заголовков. Существует шесть уровней, которые задаются тегами вида: <h1>...</h2> - <h6>...</h6>
Заголовок первого уровня – самый крупный, шестого уровня, естественно, самый мелкий.
<Р>. . .</Р> – такая пара тегов описывает абзац. Все, что заключено между <р> и </р>, воспринимается как один абзац. Закрывающий тег может быть опущен.
Поскольку HTML-документы – это текстовые файлы, для их создания можно воспользоваться любым текстовым редактором, например Notepad (Блокнот). Все HTML-файлы следует сохранять с расширением .htm или .html. Это укажет компьютеру, что файл не просто текстовый, а содержит коды HTML.
HTML-документ разделяется на две логические части: заголовок и содержание (тело).
Заголовок заключается между тегами <head> и </head>. В заголовке HTML-документа содержится название страницы, а также справочная информация (например, тип кодировки).
Название страницы располагается между тегами <title> и </title>. Например,
<TITLE> Моя страничка </ТIТLЕ>.
Содержание – это то, что будет выводиться на экран программой просмотра – текст, картинки, видеофрагменты. Содержание заключается между двумя тегами <body> и </body>.
Теговая модель предполагает разбиение документа на отдельные фрагменты, которые заключаются в теги или начинаются тегом.
Образец HTML-документа:
<HTML>
Заголовок
<ТІТLЕ> Проба 1 </TITLE>
</HEAD>
<BODY>

Тело программы
<Н1> Моя первая страничка </Н1>
<HR>
<HR>
Привет! Меня зовут ....!.
Это моя личная домашняя страничка.
</BODY>
</HTML>
Задание 2.2. Запишите определения основных понятий в тетрадь
Коротко о главном
HTML-элемент – это фрагмент HTML-документа, состоящий из открывающего тега, закрывающего тега и текста (или кода), расположенного между ними.
Атрибуты – это компоненты тега, содержащие указания о том, как браузер должен воспринять и обработать тег.
Значения атрибутов обычно заключаются в кавычки.
Вид веб-страницы определяется тегами. При написании кода страницы теги заключаются в угловые скобки. Теги могут быть одиночными и парными, для которых обязательно наличие открывающего и закрывающего тега. Закрывающий тег содержит прямой слэш ( / ) перед обозначением.
Контейнер – пара тегов, содержащая открывающий и закрывающий теги.
Содержание – это то, что будет выводиться на экран программой просмотра – текст, картинки, видеофрагменты.
Весь HTML-документ помещается внутрь контейнера <HTML> </HTML> Заголовок веб-страницы заключается в контейнер <HEAD> </HEAD> Название веб-страницы содержится в контейнере <TITLE> </TITLE> Основное содержание страницы помещается в контейнер <BODY> </BODY> |
Задание 2.3. Выполните
В программе Блокнот создайте HTML-документ заданной структуры.
<HTML>
<HEAD>
<ТIТLЕ>Моя страница 1</TITLE>
</HEAD>
<BODY bgcolor="black" text="yellow">
<HR>
<H1 align="center">Moя первая страничка</Н1>
<HR>
<H2> Привет! Меня зовут ....! </H2>
Это <В> моя </В> личная домашняя страничка.
</BODY>
</HTML>
Сохраните его в своей папке под именем FAMILIJA1.HTML, где «FAMILIJA» – это ваша фамилия, записанная латинскими буквами. Закройте программу.
Просмотрите в браузере созданный HTML-документ.
Просмотрите код вашего HTML-документа, для чего выполните цепочку команд «Вид» «Просмотр HTML-кода».
Откройте с помощью программы Блокнот созданный вами HTML-документ.
Дополните содержимое веб-странички информацией о своих увлечениях, о школе, о своем городе. Сохраните файл.
В окне браузера на панели инструментов нажмите кнопку
(Обновить) или, нажав правую кнопку, выберите в контекстном меню строку «Обновить», и посмотрите, что получилось.
Закройте окна программ, с которыми работали.