Создание сайтов с использованием языка гипертекстового программирования HTML, и создания основных структур для сайтов. Использование различных параметров языка HTML для лучшего вывода информации на экран компьютера. Что такое браузер? Какие бывают сайты. Заголовки, вставка картинок в виде ссылок, таблицы и списки.
Основы гипертекстового конструирования 9 класс.ppt
Основы
гипертекстового
конструирования.
Создание сайтов.
Годом рождения World Wide Web считается 1989 - в этом
году был изобретен язык, ставший впоследствии основным
языком web-документов - это язык – HTML.
Автором языка HTML является Тим Бернерс-Ли
HTML (Hyper Text Markup Language) - это специальный язык
форматирования электронных документов (веб-страниц в
формате *.html или *.htm).
Создание документов на языке HTML чем-то напоминает
программирование. Вот только, в нашем случае на выходе
получится не отлаженная программа, а веб-страница,
основу
по-другому
называющийся набором тегом. При просмотре страницы,
теги выполняют ту же роль, что и стандартные команды в
программировании.
составляет HTML-код,
которой
HTML-документ
задает
информацию и правила показа этой информации на
экране монитора.
это программа, которая
–
каждой
платформы
Для
специальная
программа-интерпритатор («браузер»), которая должна
выполнять HTML-программу по стандартным единым
правилам.
создается
Браузер – это специальное приложение-интерпритатор,
которое
HTML-программу,
отображать
экране
компьютера
гипертекстовый документ
позволяет,
выполняя
на
Самыми популярными браузера являются:
•Microsoft Internet Explorer
•Opera
•Mozilla Firefox
•Konqueror
•Netscape Browser
•Maxthon
Существуют 2 способа
создания сайтов
Текстовый
(ручной)
Графический
(визуальный, с
использованием
конструктора )
По уровню персонификации сайты
классифицируются:
Сайты
Корпоративные
Персональные
Обычно HTML-документ - это файл с расширением .html
или .htm, в котором текст размечен HTML-тегами (англ. tag
- специальные встроенные указания).
Средствами HTML задаются синтаксис и размещение
тегов, в соответствии с которыми браузер отображает
содержимое Веб-документа. Текст самих тегов Веб-
браузером не отображается.
'<' и заканчиваются
Все теги начинаются символом
символом '>'. Обычно имеется пара тегов - стартовый
(открывающий) и завершающий
(закрывающий) тег
(похоже на открывающиеся и закрывающиеся скобки в
математике), между которыми помещается размечаемая
информация:
Информация
стартовым
тегом
является
а
Здесь
завершающим - . Завершающий тег отличатся от
стартового лишь тем, что у него перед текстом в скобках
<> стоит символ '/' (слэш). Браузер, читающий HTML-
документ, отображает его в окне, используя структуру
HTML-тегов.
должны
присутствовать три главных части:
каждом HTML-документе
тег
,
В
Рассмотрим общую структуру
типичного простейшего документа
HTML:
Простейший HTML-документ
Тело документа - текст,
фотографии и всё остальное, что
будут видеть посетители Вашего
сайта.
- идентификатор всего блока HTML-команд.
- идентификатор заголовка документа HTML.
- идентификатор заголовка окна просмотра.
<BODY> - идентификатор HTML-команд документа для
просмотра.
Три основных тега <HTML>, <HEAD> и <BODY> передают
браузеру основную информацию для идентификации и
организации документа.
Все указанные теги - парные, то есть каждый из них
заканчивается конечным тегом с косой чертой.
Все команды можно писать как с маленькой буквы, так и с
большой.
</div>
</div>
<div class="media-material-detail-body-presentation__container">
<div class="media-material-detail-body-presentation-image__container">
<a href="https://fs.znanio.ru/methodology/images/26/99/2699b8e75a6465a3bde21b16d239c7c65d5c4e4f.jpg"
title="Ссылка на снимок материала: "
target="_blank">
<img class="media-material-detail-body-presentation-image__snapshot"
src="https://fs.znanio.ru/methodology/images/26/99/2699b8e75a6465a3bde21b16d239c7c65d5c4e4f.jpg"
alt=""
loading="lazy" />
</a>
</div>
<div class="media-material-detail-body-presentation-text__container">
Начертание текста
Для задания начертания текста используются следующие
элементы:
B - полужирное начертание
I - курсивное начертание
U - подчёркнутый текст
S - перечеркнутый текст
BIG - увеличенный размер шрифта
SMALL - уменьшенный размер шрифта
SUP - верхний индекс
SUB - нижний индекс
TT - моноширный шрифт
BLINK - мерцающий текст
</div>
</div>
<div class="media-material-detail-body-presentation__container">
<div class="media-material-detail-body-presentation-image__container">
<a href="https://fs.znanio.ru/methodology/images/ba/26/ba268776c607e198538f0756d6bd6911c90975be.jpg"
title="Ссылка на снимок материала: "
target="_blank">
<img class="media-material-detail-body-presentation-image__snapshot"
src="https://fs.znanio.ru/methodology/images/ba/26/ba268776c607e198538f0756d6bd6911c90975be.jpg"
alt=""
loading="lazy" />
</a>
</div>
<div class="media-material-detail-body-presentation-text__container">
<HTML>
<HEAD>
<TITLE> Пример начертания текста
текст с полужирным начертанием текст с курсивным начертанием подчёркнутый текст перечеркнутый текст
увеличенный размер шрифта
уменьшенный размер шрифта верхний индекстекст нижний
индекс моноширный шрифт подчёркнутый текст с полужирным курсивным
начертанием
Форматирование текста.
По умолчанию браузер отображает текст в одну строку по
ширине окна с выравниванием по левому краю.
Для перехода на следующую строку можно использовать
одиночный тег BR. Тег можно вставлять в любом месте
текста.
При использовании тега BR браузер отображает текст как
один абзац, для разделения текста на абзацы
используется элемент P, который задаётся парными
тегами
....
. Закрывающий тег не обязателен.
Чтобы полностью сохранить исходное форматирование
текста можно использовать элемент PRE, который задаётся
парными тегами
....
. При использовании этого
элемента тест сохраняет исходное форматирование и
отображается моноширным шрифтом.
Форматирование текста
Текст разрывается в
указанных местах при
помощи элемента BR
Элемент PRE:
Текст отображается
с сохранением исходного
форматирования
моноширным шрифтом.
Для обозначения заголовков текста в языке HTML существуют
специальные элементы - H1, H2, H3, H4, H5 и H6 (номера
определяют важность заголовка от 1 до 6)
Для заголовков можно задать следующие свойства:
align - выравнивание заголовка
title - текст подсказки (всплывает при наведение указателя)
Элемент FONT
Заголовки
Для задания отображения части текста отличного от
изображения используемого по умолчанию используется
элемент FONT, который может иметь следующие атрибуты:
face - название шрифта
size - размер шрифта от 1 до 7 (по умолчанию используется 3)
color - цвет текста
Заголовки. Элемент FONT
Заголовок H1
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
Использование элемента FONT для
отображения
текста
Для обеспечения соответствия между внешним видом
документа в браузере пользователя и дизайном
разработчика необходимо использовать специальные
атрибуты тега :
BGCOLOR - цвет фона документа;
BACKGROUND - URL графического изображения, для
создания фона;
BGPROPERTIES - режим прокрутки фона по отношению к
тексту документа (по умолчанию прокрутка вместе с
текстом, BGPROPERTIES=FIXED - стационарный фон);
TEXT - цвет текста документа;
LINK - цвет выделения элементов-якорей ссылок;
ALINK - цвет выделения активных элементов-якорей ссылок;
VLINK - цвет выделения элементов-якорей просмотренных
ссылок;
Для определения цветов в HTML применяются
шестнадцатеричные коды RGB компонентов, но
стандартные 16 цветов можно задавать по их
общепринятым названиям:
BLACK=#000000
GREEN=#008000
GRAY=#808080
RED=#FF0000
YELLOW=#FFFF00
BLUE=#0000FF
WHITE=#FFFFFF
SILVER=#C0C0C0
MAROON=#800000
OLIVE=#808000
NAVY=#000080
PURPLE=#800080
TEAL=#008080
LIME=#00FF00
FUSHSIA=#FF00FF
AQUA=#00FFFF
- вставка графического
изображения в виде файла lycos.gif.
Вставляем изображения
Для добавления на веб-страницу изображений
используется одиночный тег IMG, который может иметь
следующие атрибуты:
scr - задаёт URL изображения
alt - текст, который отображается на месте изображения,
если браузер не может отобразить само изображение
border - толщина границы вокруг изображения в пикселях
align - задаёт выравнивание изображения
height - задаёт высоту изображения в пикселях
width - задаёт ширину изображения
vspace - задаёт величину свободного пространства сверху
и снизу от изображения
hspace - задаёт величину свободного пространства слева и
справа от изображения
Изображение
Здесь специально указан не
существующий URL
изображения и поэтому оно не
может быть отображено
Гиперссылки
Для навигации и связывания документов между собой в
языке гипертекстовой разметки HTML предусмотрена
возможность создания гиперссылок. Для этого используется
элемент A, который задаётся парными тегами .....
Обычно браузеры выделяют гиперссылки, чтобы их сразу
можно было отличить от остального содержимого страницы
- подчёркивание и синий цвет.
Для создания ссылки нужно задать атрибуту href элемента
A URL нужного ресурса.
Например:
Первая страница сайта Вторая страница сайта
В данном случай показан пример задания гиперссылки на
документ, который находится в той же папке, что и
ссылающаяся страница, для задания ссылки на документ
находящийся на другом сайте необходимо указывать его
полный URL:
Яндекс
-
гипертекстовая ссылка в виде изображения globe.gif,
переход к просмотру изображения zinn.gif.
int@mtu-net.ru -
гиперссылка на адрес электронной почты.
Маркированные списки
Для перечисления информации удобно применять
маркированные или нумерованные списки. В таких списках
каждый новый элемент выделяется маркером или ему
присваивается порядковый номер.
Маркированные списки задаются парными тегами
.....
Элементы списка начинаются с тега
,
закрывающий тег
не обязателен.
Например:
первый элемент списка
второй элемент списка
При помощи атрибута type можно задать следующие типы
маркера:
circle - круг без заливки
dist - круг с заливкой (используется по умолчанию)
sguare - квадрат
Нумерованные списки
Нумерованный список обозначается парными тегами
...
Например:
первый элемент списка
второй элемент списка
Атрибутом type можно задать тип нумерации:
1 - используются арабские цифры
A и a - большие или малые буквы латинского алфавита
I и i - большие или малые римские цифры
Атрибутом start можно задать номер первого элемента в
списке.
Горизонтальные линии
Для вставки горизонтальной линии применяется
одиночный тег HR, который может иметь следующие
атрибуты:
align - выравнивает линейку в окне браузера, может
принимать следующие значения:
left - выравнивание по левому краю
right - выравнивание по правому краю
center - выравнивание по центру
noshade - булев атрибут (значение не присваивается),
отображает линейку плоской
size - толщина линейки, численное значение
width - ширина линейки, может задаваться в пикселах или
в процентах от ширины окна браузера
По умолчанию линейка выравнивается по центру и имеет
ширину 100% от окна браузера.
Создание бегущей текстовой строки
(только для Internet Explorer):
Атрибут behavior :
right - текстовая строка бежит вправо
left - текстовая строка бежит влево
alternate – текстовая строка бежит влево и вправо.
Таблицы
Важным элементом для упорядочивания данных являются
таблицы, если Вы посмотрите на сайты в Интернет, то
увидите, что многие из них построены именно на таблицах.
Примечание: Посмотреть исходный код любой веб-страницы
можно щелкнув правой кнопкой на любом свободном от
ссылок и картинок месте и выбрав в всплывающем меню
пункт "Просмотр HTML-кода" в Internet Explorer или
"Исходный код" в Opere.
Таблицы задаются парными тегами
...
и
состоит из строк, задаваемых элементом TR - парные теги
...
(закрывающий тег не обязателен) и ячеек -
элемент TD, с парными тегами
...
(закрывающий
тег так же не обязателен).
Для таблицы имеется возможность создавать заголовок,
задаваемый парными тегами
...
,
который должен располагаться непосредственно за
открывающим тегом
Таблица с заголовком
Пример таблицы с
заголовком
1
11
111
2
22
222
Атрибуты таблиц
Многие параметры отображения таблицы задаются соответствующими
атрибутами элемента TABLE, рассмотрим некоторые из них:
align - задаёт положение таблицы в окне браузера
bgcolor - цвет фона таблицы
border - толщина внешней границы
bordercolor - цвет границ таблицы
cellpadding - размер пустого пространства между границами и
содержимым ячейки
width - ширина таблицы
height - высота таблицы
frame - задаёт отображаемые части внешней таблицы
Атрибуты для строк таблицы TR:
align - задаёт горизонтальное выравнивание текста
valign - задаёт вертикальное выравнивание текста
bgcolor - цвет фона строки
bordercolor - цвет рамки строки
Атрибуты для ячеек таблицы: Атрибуты для строк таблицы TR:
align - задаёт горизонтальное выравнивание текста
valign - задаёи вертикальное выравнивание текста
bgcolor - цвет фона ячейки
bordercolor - цвет рамки ячейки
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с
договором-офертой сайта. Вы можете
сообщить о нарушении.
Основы гипертекстового конструирования 9 класс.ppt
- вставка графического
изображения в виде файла lycos.gif.
Вставляем изображения
Для добавления на веб-страницу изображений
используется одиночный тег IMG, который может иметь
следующие атрибуты:
scr - задаёт URL изображения
alt - текст, который отображается на месте изображения,
если браузер не может отобразить само изображение
border - толщина границы вокруг изображения в пикселях
align - задаёт выравнивание изображения
height - задаёт высоту изображения в пикселях
width - задаёт ширину изображения
vspace - задаёт величину свободного пространства сверху
и снизу от изображения
hspace - задаёт величину свободного пространства слева и
справа от изображения
Здесь специально указан не
существующий URL
изображения и поэтому оно не
может быть отображено
-
гипертекстовая ссылка в виде изображения globe.gif,
переход к просмотру изображения zinn.gif.
int@mtu-net.ru -
гиперссылка на адрес электронной почты.
