Основы языка гипертекстовой разметки документов HTML Hyper Text

Скачать презентацию Основы языка гипертекстовой разметки документов HTML Hyper Text

fcacb3ef188f07f0cb05ba939f911852.ppt

Количество слайдов: 44

Основы языка гипертекстовой разметки документов HTML (Hyper Text Markup Language) язык разметки гипертекста

HTML (от англ. Hyper. Text Markup Language — «язык гипертекстовой разметки» ) — HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. Язык HTML до 5 -ой версии определялся как приложение SGML(стандартного обобщённого языка разметки по стандарту ISO 8879). Спецификации HTML 5 формулируются в терминах DOM (объектной модели документа). Язык XHTML является более строгим вариантом HTML, он следует синтаксису XML и является приложением языка XML в области разметки гипертекста. Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

Структура документа <HTML> <HEAD> <TITLE>заголовок web-документа</TITLE> </HEAD> <BODY> содержимое web-страницы </BODY> </HTML> Структура документа заголовок web-документа содержимое web-страницы

Заголовки разных уровней <H 1 ALIGN=LEFT>заголовок первого уровня, выровнен по левому краю</H 1> <H Заголовки разных уровней заголовок первого уровня, выровнен по левому краю заголовок третьего уровня, выровнен по центру заголовок пятого уровня, выровнен по правому краю

Оформление горизонтальных линий Горизонтальная линия – тег

Атрибут размера SIZE= число – задает высоту линии в пикселях (от 1 до 100) WIDTH= число – задает длину линии в пикселях WIDTH= число% - задает длину линии в процентах от ширины окна браузера Атрибут цвета COLOR= цвет, где в качестве значения после знака равенства пишется английское название цвета или числовой код оттенка

Форматирование линии <HR SIZE=100 WIDTH=2> - вертикальная линия высотой 100 пикселей и длиной 2 Форматирование линии

- вертикальная линия высотой 100 пикселей и длиной 2 пикселя

- квадрат (одно и то же значение для высоты и длины)

- прямоугольник

Палитра цветов Название Русское название Код Aqua Бирюзовый #00 FFFF Black Черный #000000 Blue Синий #0000 FF Fuchsia Лиловый #FF 00 FF Gray Серый #808080 Green Зеленый #008000 Lime Светло-зеленый #00 FF 00 Maroon Малиновый #800000 Navy Темно-синий #000080 Olive Оливковый #808000 Purple Фиолетовый #800080 Red Красный #FF 0000 Silver Серебристый #C 0 C 0 C 0 Teal Сизый #008080 White Белый #FFFFFF yellow желтый #FFFFF 0

Фон Web-страницы Цвет фона задается с помощью параметра BGCOLOR ТЕГА …. ….

Для добавления фонового рисунка на страницу используется параметр BACKGROUND тега …. ….

Теги форматирования абзацев Тег Описание

Текст абзаца

Контейнер абзаца. Перед новым абзацем автоматически добавляется небольшой отступ

Текст

Выравнивание абзаца по левому краю

Текст

Выравнивание абзаца по правому краю

Текст

Выравнивание абзаца по центру

Текст

Выравнивание абзаца по ширине Текст 1
Текст 2 Тег разрыва строки Текст Запрет разрывов и переносов слов. Текст выводится в одну строку Текст 1Текст 2 Разрешает браузеру делать перенос строки в указанном месте

Задание шрифта Контейнер (<FONT>…. </FONT) <FONT FACE=“Monotype Corsiva”>Текст</FONT> Verdana, Arial Black, Arial Narrow, Book Задание шрифта Контейнер (…. Текст Verdana, Arial Black, Arial Narrow, Book Antiqua, Bookman Old Style. Century , Gothic, Garamond, Courier New, Comic Sans MS, Impact, Times New Roman, Tahoma

Задание размера шрифта <FONT SIZE=1>Шрифт размера 1</FONT> <FONT SIZE=2>Шрифт размера 2</FONT> <FONT SIZE=3>Шрифт размера Задание размера шрифта Шрифт размера 1 Шрифт размера 2 Шрифт размера 3 Шрифт размера 4 Шрифт размера 5 Шрифт размера 6 Шрифт размера 7

Шрифтовое выделение Тег Описание Пример Текст Полужирный текст Текст Курсивный текст Текст Подчеркнутый текст х² Верхний индекс H₂O Нижний индекс ~~Текст~~ Зачеркнутый текст

Текст

Текст пишется как есть, включая все пробелы Текст Курсивный текст Текст Текст Полужирный текст Текст х² H 2 О Текст

Нумерованные списки (теги <OL>…<LI>…</OL>) Параметр Пример <OL> <LI>текст</LI> </OL> Нумерованный список с параметрами, подразумеваемыми Нумерованные списки (теги

) Параметр Пример

текст

Нумерованный список с параметрами, подразумеваемыми по умолчанию: 1. Текст 2. Текст 3. Текст

Маркированные списки (теги <UL>…<LI>…</UL> Параметр <UL TYPE=circle> Пример o. Текст <UL TYPE=disc> • Текст Маркированные списки (теги

Параметр

Для добавления таблицы на web-страницу используется контейнер

…

, при этом таблица должна содержать хотя бы одну строку и одну ячейку в ней. Внутрь этого контейнера помещаются другие контейнеры, формирующие основные элементы таблицы: … - заголовок таблицы. Размещение заголовка определяется значением параметра ALIGN: ALIGN=TOP – заголовок над таблицей ALIGN=BOTTOM – заголовок под таблицей ALIGN=LEFT – заголовок над таблицей и выровнен влево ALIGN=RIGHT – заголовок над таблицей и выровнен вправо

<TR>…</TR> - контейнер, создающий строку таблицы <TH>…</TH> - контейнер, создающий ячейку «шапки» таблицы (заголовка … - контейнер, создающий строку таблицы … - контейнер, создающий ячейку «шапки» таблицы (заголовка столбца или строки таблицы). Данный контейнер должен находиться внутри … … - контейнер, создающий ячейку таблицы. Этот контейнер также должен находиться внутри …

<HTML> <HEAD> <TITLE>Таблица из 4 ячеек</TITLE> </HEAD> <BODY> <TABLE BORDER=2> <TR> <TD>Ячейка 1</TD> <TD>Ячейка Таблица из 4 ячеек

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

<HTML> <HEAD> <TITLE>Таблица 3 x 4</TITLE> </HEAD> <BODY> <TABLE BORDER=3> <TR> <TD>Ячейка 1</TD> <TD>Ячейка Таблица 3 x 4

Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4
Ячейка 5	Ячейка 6	Ячейка 7	Ячейка 8
Ячейка 9	Ячейка 10	Ячейка 11	Ячейка 12

Выравнивание данных в ячейке Атрибут ALIGN VALIGN значения LEFT RIGHT CENTER TOP BOTTOM CENTER описание пример Выравнивание содержимого ячейки по горизонтали Выравнивание содержимого ячейки по вертикали

Объединение ячеек таблицы Атрибуты Описание Пример COLSPAN=n Объединение n соседних ячеек в одной и той же строке ROWSPAN=n Объединение n соседних ячеек одного и того же столбца

Для объединения прямоугольного блока n x m ячеек необходимо одновременно записать оба указанных параметра для тега , соответствующего верхней левой из объединяемых ячеек:

<<TABLE BORDER=2> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> <TD>Ячейка 3</TD> </TR> <TD>Ячейка 4</TD> <TD COLSPAN=2>Ячейка <

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5

Вставка иллюстраций тег <IMG> формат описание Применение GIF Использует палитру из 256 цветов. Применяется Вставка иллюстраций тег формат описание Применение GIF Использует палитру из 256 цветов. Применяется для создания анимированных рисунков Иллюстрации, содержащие текст, логотипы, анимированные рисунки JPEG Поддерживает 16 млн цветов и реализует сжатие изображения с частичной потерей информации фотографии PNG-8 Аналог GIF, но поддерживается всеми браузерами. Использует улучшенный формат сжатия данных Иллюстрации, содержащие текст, логотипы, анимированные рисунки, изображения с прозрачными участками PNG-24 Поддерживает 16 млн цветов. Подобен GIF и PNG-8, но, в отличие от JPEG, сохраняет детали изображения Фотографии и рисунки с прозрачными участками, с большим количеством цветов и четкими деталями изображения Пример:

Задание размеров иллюстрации Атрибуты HEIGHT и WIDTH

Задание рамки вокруг рисунка <IMG SRC=“имя файла. расширение” BORDER=2> Задание рамки вокруг рисунка

Альтернативный текст <IMG SRC=“имя файла. расширение” ALT=“текст”> <img border= " src="https://present5.com/presentation/fcacb3ef188f07f0cb05ba939f911852/image-27.jpg" alt="Альтернативный текст " /> Альтернативный текст

Совместная верстка рисунка и текста с помощью таблицы

КОМПЬЮТЕР

Гиперссылки (тег <A>…</A>) Абсолютная ссылка <A HREF=http: //www. yandex. com>Поисковая система Яндекс</A> Относительная ссылка Гиперссылки (тег …) Абсолютная ссылка Поисковая система Яндекс Относительная ссылка главная страница Создание подсказки к ссылке (атрибут TITLE тега

Формы на Web-страницах • Текстовые поля

Переключатели Укажите, к какой группе пользователей вы себя относите:
учащийся
студент
учитель

Флажки Какие из сервисов Интернета вы используете наиболее часто:
WWW
e-mail
FTP

Поля списков <SELECT NAME=“browsers”> <OPTION SELECTED>Internet Explorer <OPTION> Netscape Navigator <OPTION>Opera <OPTION>Neo Planet </SELECT> Поля списков

Текстовая область Какую еще информацию вы хотели бы видеть на нашем сайте?

Отправка данных из формы <INPUT TYPE=submit VALUE=“отправить”> <INPUT TYPE=reset VALUE=“очистить”> Отправка данных из формы

Атрибут COLS Создание фреймов (теги и ) Способ задания описание Примеры размеров %, % Число, %, * Вертикальное разделение окна браузера Окно разделится вертикально на две равные части Под первый вертикальный фрейм отводится 150, под второй 30% доступного пространства, а для третьего – вся оставшаяся часть ROWS Число, число %, * Горизонтальное разделение окна браузера Задание горизонтальных фреймов с точным указанием их высоты: верхний-30, нижний – 70 Задание горизонтальных фреймов, где первый будет занимать 30% от высоты окна, а второй – все остальное пространство

Заголовок меню 25% Содержимое Фрейм с заголовком 15%

Оформление файла zagolovok. html заголовок заголовок

Оформление файла menu. html <HTML> <HEAD> <TITLE>Меню</TITLE> </HEAD> <BODY> <H 2 ALIGN=CENTER>меню</H 2> </BODY> Оформление файла menu. html Меню меню

Оформление файла sodergimoe. html Содержимое Содержимое

Моя web-страница Моя семья Мои друзья Мои увлечения Меня зовут: Иванович Я родился: 20. 02. 2002 г. Я проживаю: г. Челябинск, ул. Новороссийская, д. 8 кв. 5

Практическое задание 20% 15% Логотип Меню 10% Заголовок Содержимое Адрес фирмы 20% Новости, поиск

Глава 1. Основы сети Интернет В наше время особо важное значение имеет информация. Наиболее удобным способом получения и передачи информации является использование всемирной компьютерной сети Интернет. Компьютерная сеть – это объединение компьютеров, линий связи между ними и программ, обеспечивающих обмен информацией. Виды компьютерных сетей: 1. Локальная сеть – это компьютерная сеть, объединяющая компьютеры, расположенные в одном здании или в соседних зданиях. 2. Распределенная (территориальная) сеть – это компьютерная сеть, объединяющие компьютеры, которые находятся в разных частях города, а иногда и в разных городах. 3. Корпоративная сеть – это когда к распределенной сети подключается не отдельные компьютеры, а локальные сети. Создание корпоративных сетей нашло применение для предприятий, имеющих филиалы в других городах. 4. Глобальная сеть – это распределенная сеть мирового масштаба. Интернет и является самой известной глобальной компьютерной сетью.