Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Лабораторная работа№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 Используются для выделения части документа определенным способом.

Рассмотрим каждый тэг подробнее.


mylektsii.ru - Мои Лекции - 2015-2019 год. (0.005 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал