Web-страницы и webсайты Структура web-страницы Создание Web-сайтов

Web-страницы и webсайты. Структура web-страницы.

Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Язык разметки – HTML (Hyper Text Markup Language. Создан в 1991 г. Зарождение языка связано с программистом - Тимом Бернерсом Ли.

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

Достоинства Web-страниц: Малый информационный объем; Возможность просмотра в различных операционных системах

Редакторы для создания Webстраниц. Простейшие текстовые редакторы : в ОС Windows – Блокнот в ОС Linux – Kate Web – редакторы : в ОС Windows – Microsoft Front. Page в ОС Linux – Quanta Plus

сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Webстраницам. В качестве гиперссылки на страницах сайта может использоваться текст, такая гиперссылка будет называться текстовой. Весьма часто текстовая гиперссылка представляет собой подчеркнутый текст синего цвета. Если в качестве гиперссылки использовано графическое изображение, например фотография, то догадаться о том, что это гиперссылка будет сложно. Как же в таком случае определить, является изображение гиперссылкой или нет? На этот случай запомните следующее правило: "Если при подведении курсора мыши к элементу Web-страницы он принимает форму руки, то этот элемент является гиперссылкой". Примечание: Из этого правила есть исключение, так например в случае с ролловерами, которые могут не являться гиперссылками, но при наведении курсора мыши на них, курсор тоже принимает форму руки. Кроме изменения вида курсора, при наведении на гиперссылку, должен также отобразиться URL (уникальный адрес ресурса), но об этом мы поговорим в уроке посвященном созданию гиперссылок средствами программы Front. Page.

Вид Web-страницы задается тегами, которые заключаются в угловые скобки. Теги Одиночные (нет конечного тега) <hr> Парные (обязателен закрывающийся тег, используется слеш / , который обозначает, что тег является конечным, закрывающим некоторую структуру <head> </head>

<html> <head> Название документа </head> <body> Тело документа </body> </html>

Заголовок web-страницы обозначается при помощи тегов <head> и </head> содержит название документа

Границы документа –тег <html>- должен открывать документ, тег </html>-должен стоять в последней строке документа. Без этих тегов браузер не в состоянии определить формат документа и правильно его интерпретировать. Страница разделяется на две логические части: заголовок и содержание.

Тег <title> определяет имя документа, располагается внутри заголовка документа

Основное содержание страницы помещается в контейнер <body> </body> и может включать текст, таблицы, ссылки, графические изображения и т. д.

Практическая работа № 3. 8 Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере Создать папку Мой сайт на рабочем столе Запустить приложение Блокнот <HTML> <HEAD> <ТITLE>Компьютер</ТITLE> </HEAD> <BODY> Компьютер и ПО </BODY> </HTML>

Форматирование текста на Web-странице Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н 1></Н 1> (самый крупный) до <Н 6></Н 6> (самый мелкий). Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта.

Форматирование шрифта Тэг Атрибуты FACE (гарнитура шрифта) = “Arial” SIZE(размер) = 4 СOLOR (цвет) = “red”

Атрибут COLOR позволяет задавать цвет шрифта (например, C 0 L 0 R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д. ), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000 FF".

выравнивание Атрибут ALIGN = «center” “right” “left”

Горизонтальная линия Отделение заголовка от остального содержания страницы производится с помощью горизонтальной линии – ТЭГ <HR>

Абзацы Разделение тексты на абзацы производится с помощью тэга Выравнивание для абзаца

Практическая работа с. 166 задания 3, 4 Создать HTML-код страницы <HEAD> <TITLE>Компьютер и ПО</TITLE> </HEAD> <BODY> <H 1 ALIGN=”center”>Компьютер и ПО</H 1> <HR> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </BODY> </HTML>

Типичные ошибки при разработке сайтов Адрес ресурса: ttp: //inf 777. narod. ru/lessons/frontpage_lessons/errors. htm

ТЕСТ Основы языка HTML" 1. HTML это … А. язык разметки гипертекста; Б. протокол передачи Web-страниц; В. протокол передачи файлов по сети Интернет; Г. программа - браузер; Д. разметочный знак гипертекста. А

2. Для того, чтобы отличить разметочный знак (тег) от обычного текста, он обрамляется символами … А. !…!; Б. @…@; В. #…#; Г. ^…^; Д. <…>. Д

3. Для задания области действия разметочного знака используются парные знаки. Закрывающий тег отличается от открывающегося тем, что … А. код тега записывается прописными буквами; Б. код тега записывается строчными буквами; В. перед кодом ставится символ / - косая черта; Г. перед кодом ставится символ * - звездочка; Д. ничем не отличается. В

4. Заголовочная часть HTML -документа выделяется тегом … А. HTML; Б. HEAD; В. BODY; Д. TITLE; Е. STRONG. Б

5. Основной текст документа выделяется тегом … А. HTML; Б. HEAD; В. BODY; Г. TITLE; Д. STRONG. В

6. Для вывода горизонтальной линии служит тег … А. BR; Б. H 1; В. P; Г. HR; Д. A. Г

7. Для обозначения абзаца служит тег … А. BR; Б. H 1; В. P; Г. HR; Д. A. В

Закончить фразу На уроке мне понравилось…. . Я сегодня научился(лась)…… Самым трудным на уроке для меня было …