Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Лабораторная работа№1 Представление текстовых документов в формате HTML
|
|
Тема лабораторной работы: создание web-страниц с использованием HTML.
Цель работы: изучение основ языка гипертекстовой разметки HTML.
1. Изучить структуру web-документа
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. и он будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox) .
Далее обозначается начало и конец документа тегами <html> и соответственно. Внутри этих тегов должны находиться теги головы (<head></head>) и тела документа(<body></body>) .
Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п.
Основное содержимое: текст, таблицы, картинки, - находится в теле документа.
На этой картинке схематически изображена структура:
 |
Как вы видите, голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа </HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.
Вставка комментария: <!-- --> -закомментированный текст при просмотре документа через браузер видно не будет. В начале комментарий нужно открыть тегом <!-- затем вписать текст, и закрыть тегом --> . Тег <!-- --> внутри элемента TITLE не действует.
2. Создать простейшую страничку.
ШАГ 1.
Создайте на своем компьютере папку с названием вашего будущего сайта, ну к примеру в данном случае актуально будет назвать папку obuchenie_html . Внутри папки создайте еще одну папку с названием www, а внутри нее еще одну для изображений с названием img (позже вставим туда картинки):
ШАГ 2:
Зайдите в созданную на предыдущем шаге папку www и создайте внутри нее текстовый документ. Для этого зайдите в нее, кликните правой кнопкой мыши в выпадающем меню выберите Создать - Текстовый документ.
ШАГ 3:
Напишите в Блокноте текст простейшей странички
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Это моя первая страничка!</title>
</head>
<body>
<!--сейчас я напишу свою первую строчку текста!-->
Ура!!!! Я создал свою первую страницу на html!!!
</body>
</html>
ШАГ 4:
Сохраните ваш документ как "index.htm" (".html" даст тот же результат).После сохранения можете удалить текстовый документ.
ШАГ 5:
Запустите получившийся файл index.htm
Для того, чтобы внести изменения в страничку, Вам нужно открыть данный файл через обычный блокнот. Либо же, можно менять прямо в браузере, но только в браузере Opera.
3. Изучить форматирование заголовков и абзацев
По умолчанию текст идет слитно, без разделений на абзацы, заголовки, т.е. форматирование отсутствует!
Основными элементами форматирования текста в html являются тэги:
| P | Используется для разбивания текста на параграфы |
| H1,H2,...H6 | Применяются для создания заголовков 1,2...6 уровней |
| BR | Используетcя для переноса строки |
| DIV , SPAN | Используются для выделения части документа определенным способом. |
Рассмотрим каждый тэг подробнее.