2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы icon

2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы



Название2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы
Дата конвертации23.12.2012
Размер170.72 Kb.
ТипДокументы
источник

2.7.6. Разработка сайтов (Основы НTML)

Практические работы по теме «Создание Web-страницы в языке HTML»

Структура Web-страницы. Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.

            Web-страница помещается в контейнер и.состоит из двух частей: заголовка и отображаемого в браузере содержания.

Заголовок страницы помещается в контейнер . Заголовок содержит название страницы, которое помещается в контейнер и при просмотре отображается в верхней строке окна браузера.

Также в заголовок помещаются не отображаемые при просмотре мета-тэги, задающие кодировку страницы для ее правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем.

Отображаемое в браузере содержание страницы помещается в контейнер .

Работа 1. Основные тэги HTML

Создать Web-страницу, знакомящую с основными тэгами HTML.

  1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

  2. Ввести HTML-код, задающий структуру Web-страницы:

 

Первое знакомство с тэгами HTML






  1. Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя ваша_фамилия.htm

  2. Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.

  3. Заголовки. Внести в текст страницы после в пустую строку тэги заголовков различных уровней (размеров).

Заголовки различных уровней:

^

Заголовок первого уровня


Заголовок второго уровня


Заголовок третьего уровня


Заголовок четвертого уровня


Заголовок пятого уровня

Заголовок шестого уровня


6. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.

^ 7. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].

^ 8. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница

^ Работа 2. Форматирование шрифта.

Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия:

  1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

  2. Открыть файл ваша_фамилия.htm

  3. Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия:




Форматирование шрифта:

Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Равноширинный


Выделение:

Выделение
Усиленное выделение





 4. Списки. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.

Нумерованный список:


  1. Первый элемент списка

  2. Второй элемент списка

  3. Третий элемент списка



Ненумерованный список:


  • Первый элемент списка

  • Второй элемент списка

  • Третий элемент списка

 


Список определений:


ТЕРМИН 1

Пояснение к термину 1

ТЕРМИН 2

Пояснение к термину 2

ТЕРМИН 3

Пояснение к термину 3



^ 5. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.

6. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].

^ 7. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница

^ В итоге в файле имя.htm у вас должно получиться





Первое знакомство с тэгами HTML





^

Заголовок первого уровня



Заголовок второго уровня



Заголовок третьего уровня



Заголовок четвертого уровня



^
Заголовок пятого уровня


Заголовок шестого уровня






Жирный

Курсив

Подчеркнутый

Жирный подчеркнутый курсив

Равноширинный


Выделение

Усиленное выделение







  1. Первый элемент списка


  2. Второй элемент списка


  3. Третий элемент списка







  • Первый элемент списка


  • Второй элемент списка


  • Третий элемент списка







ТЕРМИН 1


Пояснение к термину 1


ТЕРМИН 2


Пояснение к термину 2


ТЕРМИН 3


Пояснение к термину 3








Работа 3. Цветовые схемы. Шрифты.


  1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

  2. Сздать файл index.htm

<HTML>



Моя перваЯ страница









HTML> (Запусти файл в браузере)

^ 3. Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего).

            Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов: 

Цвет

Код

Название

 

 

Цвет

Код

Название

 

черный

#000000

black

ч

фиолетовый

#FF00FF

magenta

ф

белый

#FFFFFF

white

б

бирюзовый

#00FFFF

cyan

б

красный

#FF0000

red

к

желтый

#FFFF00

yellow

ж

зеленый

#00FF00

lime

з

золотой

#FFD800

gold

з

синий

#0000FF

blue

с

оранжевый

#FFA500

orange

о

серый

#808080

gray

с

коричневый

#A82828

brown

к

   Основную цветовую схему Web-страницы можно задать в тэге с помощью атрибутов:

  Цвет фона

BGCOLOR="#RRGGBB"

Текстура фона

BACKGROUND="file_name"

Цвет текста

TEXT="#RRGGBB"

Цвет текста ссылки

LINK="#RRGGBB"

Цвет текста активной ссылки

ALINK="#RRGGBB"

Цвет текста просмотренной ссылки

VLINK="#RRGGBB"

  При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.

Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон - темный текст, или темный фон - светлый текст. Нежелательны буквы белого цвета - они могут оказаться невидимыми при печати страницы на принтере.

Для оформления страницы можно использовать следующую цветовую схему: (после

  (Сохранить файл и Обновить страничку)

Работа 4. Вставка изображений.

1.. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

  1. Открыть файл index.htm

^ 3. Вставка изображений. Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG.

Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.



Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге

. Размеры изображения (в пикселах) можно задать с помощью атрибутов  WIDTH и HEIGHT. К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой - либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.

Открыть

Вставить в начале страницы картинку.

просто картинка



Атрибут ALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.  

4. ^ Форматирование текста. Для выделения фрагментов текста используется тэг . Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут SIZE - размер символов.

Выравнивание текста по горизонтали задает атрибут ALIGN. Его возможные значения: left - выравнивание по левому краю center – по центру и right - по правому краю.

Выравнивание можно добавлять к тэгам, задающим заголовки, абзацы, или размещающим информацию в таблице. Выровнять по центру заголовок страницы. HSPACE, VSPACE - горизонтальный и вертикальный отступы между картинкой и текстом.

  Введем заголовки различных уровней.

^

А это - заголовок нашей странички.



А это - подзаголовок нашей странички.

(Сохранить файл и Обновить страничку)


Выделим часть текста более крупным шрифтом и цветом и определим выравнивание

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.


Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.


Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.

(Сохранить файл и Обновить страничку)

Работа 5. Оформление гиперссылок.

1.. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

2. Открыть файл index.htm

^ 3. Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга
, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.

Указатель ссылки

file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.

Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке.

Используем различные значения атрибута HREF для реализации различных реакций браузера:

^ Моя вторая страничка (Сохранить файл и Обновить страничку)

А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.

Моя вторая страничка

(Сохранить файл и Обновить страничку)


4. Создадим вторую страничку. Для этого откроем ^ Блокнот еще раз. И наберем в нем следующий текст.





Моя втораЯ страница








<А HREF="index.htm">
Моя первая страничка






5. Сохраним файл под именем index1.htm.

6. Запустить первый файл index.htm. Запустим гиперссылку Моя втораЯ страница.

В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга .

Пусть в нашем проекте при щелчке мышью по маленькому рисунку, вызывается ее крупная фотография. Такой прием часто используют, для снижения времени загрузки страницы. Посетитель увидит уменьшенные копии рисунков, а при желании, сможет загрузить полномасштабное изображение. Дополним нашу страничку, введем текст в пустую строку в файл index1.htm. .< A HREF="carsk.jpg">

7. (Сохранить файл и Обновить странички index.htm, index1.htm..)

Работа 6-8. Творческое задание

  Творческле задание. «Мой сайт». Создать Web-сайт, рассказывающий о вас.

Сайт рекомендуется хранить в отдельной, специально созданной папке Сайт, вложенной в папку Ваша_фамилия. Здесь будут находиться как Web-страницы, так и графические файлы. Начальная страница сайта обычно имеет имя index.htm, в этом случае для начала просмотра сайта, в адресе достаточно указать путь к папке, где он хранится.

Начальная страница «Мой сайт» будет содержит информацию о вас, вашей семье и ваших друзьях. Страницы связаны между собой гиперссылками.

Создадим начальную Web-страницу, в процессе работы над которой, познакомимся с применением атрибутов тэгов для вставки изображений, гиперссылок, таблиц и карт-изображений.

^ Дополнительный справочный материал для самостоятельного изучения.

Работа с таблицами.

Общий вид таблицы:





...

...

... заголовок таблицы ...
первая ячейка вторая ячейка



Атрибуты метки TABLE не обязательны. По умолчанию, таблица выводится без рамки. Как правило, размер ячеек таблицы устанавливается автоматически, чтобы наилучшим образом разместить содержимое, однако можно установить ширину таблицы с помощью атрибута WIDTH. Атрибуты BORDER, CELLSPACING и CELLPADDING предоставляют дополнительные возможности для контроля за внешним видом таблицы. Заголовок размещается над или под таблицей в зависимости от значения атрибута ALIGN.

Горизонтальный ряд ячеек определяется элементом TR, закрывающая метка не обязательна. Ячейки таблицы определяются элементами TD (для данных) и TH (для заголовков). Как и TR, эти элементы могут не иметь закрывающей метки. TH и TD могут включать несколько атрибутов: ALIGN и VALIGN для выравнивания содержимого ячейки, ROWSPAN и COLSPAN для указания того, что ячейка занимает более одного горизонтального ряда или колонки. Ячейка таблицы может содержать другие элементы уровня блока и текста, включая формы и другие таблицы.

Для элемента TABLE обязательны открывающая и закрывающая метки. Допустимые атрибуты:

align

Допустимые значения: LEFT, CENTER и RIGHT. Определяет положение таблицы по отношению к полям документа. По умолчанию установлено выравнивание по левому краю, но это можно изменить путем включения в документ элемента DIV или CENTER.

^ DIV и CENTER

Элементы DIV можно использовать для разбиения HTML-документа на несколько разделов (англ. division — раздел). Для указания горизонтального выравнивания внутри элемента DIV можно использовать атрибут ALIGN с допустимыми значениями LEFT, CENTER и RIGHT (аналогично принятому для абзацев
).

Обратите внимание: элемент DIV по определению закрывает открытый абзац P. За исключением этого случая, браузеры не показывают элемент DIV на экране. Элемент
полностью равнозначен
. В элементах DIV и CENTER обязательны открывающие и закрывающие метки.

width

При отсутствии этого атрибута ширина таблицы определяется автоматически в зависимости от содержимого. Атрибут WIDTH можно использовать для установки фиксированной ширины в пикселах (например, WIDTH=212) или в процентах от пространства между левым и правым полем (например, WIDTH="80%").

border

Используется для указания ширины внешней окантовки таблицы в пикселах (например, BORDER=4). Значение можно установить равным нулю, в результате чего окантовка не будет видна. В отсутствие этого атрибута окантовка также не должна показываться на экране. Обратите внимание: некоторые браузеры воспринимают метку точно так же, как BORDER=1.

cellspacing

В традиционном издательском программном обеспечении расположенные рядом ячейки таблицы имеют общую окантовку. В HTML это не так. Каждая ячейка имеет собственную окантовку. Ширина окантовки ячейки в пикселах устанавливается атрибутом CELLSPACING (например, CELLSPACING=10). Этот атрибут также устанавливает расстояние между окантовкой таблицы и окантовками крайних клеток таблицы.

cellpadding

Устанавливает расстояние между окантовкой ячейки таблицы и содержимым ячейки.

Элемент CAPTION может иметь один атрибут ALIGN со значением ALIGN=TOP или ALIGN=BOTTOM. Соответственно, заголовок таблицы показывается либо над, либо под таблицей. Большинство браузеров по умолчанию показывают заголовок над таблицей. Открывающая и закрывающая метки обязательны. В заголовках тыблиц не разрешаются элементы уровня блока.

Элемент TR открывает описание строки таблицы. Закрывающая метка не обязательна. Имеет два стрибута:

align

Устанавливает горизонтальное выравнивание в ячейках строки. Допустимые значения: LEFT, CENTER и RIGHT. Действие аналогично атрибуту ALIGN у абзацев.

valign

Устанавливает вертикальное выравнивание в ячейках строки. Допустимые значения: TOP, MIDDLE и BOTTOM; содержимое ячеек при этом выравнивается по верхнему краю, по центру или по нижнему краю.

Существует два элемента, определяющих ячейки таблицы. TH используется для ячеек-заголовков, а TD - для ячеек с данными. Открывающие метки обязательны, закрывающие - нет. Ячейки могут иметь следующие атрибуты:

nowrap

Этот атрибут запрещает автоматический перевод текста со строки на строку внутри ячейки таблицы (например,

). Эффект применения этого атрибута аналогичен использованию объекта   вместо пробела по всему содержимому ячейки.

rowspan

Используется с положительным целым значением числа строк таблицы, занятых ячейкой. По умолчанию принято равным единице.

colspan

Используется с положительным целым значением числа колонок таблицы, занятых ячейкой. По умолчанию принято равным единице.

align

Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: LEFT, CENTER и RIGHT. Если атрибут ALIGN не указан, принятое по умолчанию выравнивание - по левому краю для
и по центру для , однако это можно изменить установкой атрибута ALIGN элемента TR.

valign

Указывает принятое по умолчению выравнивание содержимого ячейки. Имеет приоритет над значением, установленным атрибутом ALIGN строки таблицы. Допустимые значения те же самые: TOP, MIDDLE и BOTTOM. Если атрибут VALIGN не установлен, по умолчанию принято выравнивание по центру, однако это можно изменить установкой атрибута VALIGN элемента TR.

width

Указывает рекомендуемую ширину содержимого ячейки в пикселах. Значение используется только в случаях, когда оно не противоречит требованиям к ширине других ячеек в колонке.

height

Указывает рекомендуемую высоту содержимого ячейки в пикселах. Значение используется только в случаях, когда оно не противоречит требованиям к высоте других ячеек в строке.

Таблицы, как правило, показываются на экране "приподнятыми" над поверхностью страницы, а ячейки - "вдавленными" в тело таблицы. Ячейки выделяются окантовкой только если в них есть содержимое. Если содержимое ячейки состоит только из пробелов, ячейка считается пустой, за исключением случаев, когда в ней есть хотя бы один объект  .


Литература:


Теоретический материал по языку HTML взят из материалов сайта

http://www.w3.org/pub/WWW/TR/




Похожие:

2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconТема: Web-страницы и Web-сайты. Структура Web-страниц. Форматирование текста и размещение графики
Цель: познакомить учащихся со структурой Web-страниц, познакомить учащихся со способами форматирования Web-страниц, научить размещать...
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconТема: Web-страницы и Web-сайты. Структура Web-страниц. Форматирование текста на Web-страницах Цель: познакомить учащихся со структурой Web-страниц, начать разработку Web-страницы «Компьютер и по»
Цель: познакомить учащихся со структурой Web-страниц, начать разработку Web-страницы «Компьютер и по»
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconУрок по теме «Создание и использование таблиц на Web-страницах» Изучение курса завершается выполнением учащимися индивидуального или группового (2-3 чел.) проекта разработка web-сайта
Учебник: Н. Угринович, Информатика и информационные технологии, 10 – 11 кл. Целью данного курса является формирование первичного...
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconСоздание Web-сайта с помощью ms word Цель работы
Освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора ms word
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconТема: Форматирование текста на Web-странице. Вставка изображений в Web-страницы
Цель: учить учащихся форматированию текста и вставке изображений на Web-странице
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconПрактическая работа №1 Создание web-страницы на html
Откройте блокнот и сохраните (сохранить как) документ в свою папку (создайте) на рабочем столе, введите имя index html
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconРазработка урока по теме «Структура html-документа. Цвет фона и текста», с использованием авторского мультимедийного продукта «Создание web страниц с помощью языка разметки html»
Информация об участии педагога моу сош №89 в городских, областных, региональных, российских мероприятиях в 2010-2011 уч году
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconПрактическая работа №1 «Создание Web страницы»
Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows xp, программа Internet Explorer; программа...
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconПрограмма по созданию Web-приложений, которой я успешно пользуюсь
«Регионального центра развития образования» Оренбургской области в ноябре 2007 года по теме: «Основы создания учебных Web-приложений»....
2 Разработка сайтов (Основы нtml) Практические работы по теме «Создание Web-страницы в языке html» Структура Web-страницы iconТема: Всемирная паутина
Цель: познакомить учащихся с технологией Всемирной паутины; из каких частей состоит адрес Web-страницы; ввести понятие браузера
Разместите кнопку на своём сайте:
Документы


База данных защищена авторским правом ©lib2.podelise.ru 2000-2013
При копировании материала обязательно указание активной ссылки открытой для индексации.
обратиться к администрации
Документы