Создание Web–сайта средствами языка HTML

514.50K

Категория:

Интернет

Похожие презентации:

НТМL – язык гипертекстовой разметки

Создание Web-сайта

Язык разметки гипертекста HTML

Создание Web-сайта. Структура Web-сайта

Основы языка HTML

Методы и средства создания и сопровождения сайта

Создание Web-страниц на языке HTML

Основы языка разметки гипертекста

Основы языка HTML: тэги, атрибуты тэгов, комментарии

Создание Web - документов

Создание Web-сайта средствами HTML

1. Создание Web–сайта средствами языка HTML

м/ук № 2871. Подготовка Web-страниц средствами языка HTML

2.

1. Основные понятия WWW
WWW (World Wide Web, Web, всемирная паутина) –
совокупность взаимосвязанных гипертекстовых мультимедийных
документов (Web-сайтов, Web-страниц)
Web-страница
–
документ
WWW,
содержащий
форматируемый текст, мультемедийные объекты (звук, графику,
видео), ссылки на другие Web-страницы или файлы. Страницы
создаются средствами языка HTML и называются HTMLдокументами.
HTML (Hyper Text MarkUp Language) – язык гипертекстовой
разметки документов.
Гипертекст – множество отдельных документов, имеющих
ссылки друг на друга.
Гипертекстовая ссылка (гиперссылка) – часть документа
(текст, кнопка или изображение), реализующая переход к другому
2
документу.

3.

Web-сайт (Web-узел) – группа взаимосвязанных Webстраниц.
Home Page – домашняя (начальная) страница сайта,
открывается первой при загрузке Web-сайта, обычно
содержится в файле index.html.
Web-сервер – компьютер, хранящий Web-узлы и программа,
предоставляющая к ним доступ по запросам пользователя.
Web-браузер – это программа-клиент службы WWW. Она
используется для создания запросов к Web–серверу и
отображения на экране пользователя полученных документов
(Web–страниц).
Примеры браузеров: Microsoft Edge, Mozilla Firefox, Google
Chrome, Opera.
3

4.

2. Разработка Web-сайта
Основные этапы разработки сайта:
• выбор темы и размещаемой на сайте информации
• проектирование логической структуры сайта
• проектирование физической структуры сайта
• создание отдельных страниц и установка связей между
ними
• тестирование
• публикация (размещение сайта на сервере, услуга по
размещению на сервере Internet – Web-хостинг)
4

5.

Логическая структура сайта (дерево сайта) отражает
информационную организацию сайта, представляет собой
совокупность Web-страниц с указанием связей между ними
(может быть линейной, иерархической, в виде паутины).
Пример логической структуры сайта:
index.html
str1.html
(имя файла)
str2.html
str3.html
str3_1.html
5

6.

Физическая структура сайта представляет собой систему
вложенных каталогов (папок) относительно корневого
каталога (папки) сайта, в которых размещаются Web-страницы
и другие файлы сайта по тематическим признакам. В корневом
каталоге сайта размещается домашняя страница c именем
index.html.
Главная
русский
страницы
английский
рисунки
другие
index.html
6

7.

Для создания Web-сайтов используются:
• приложения для непосредственного создания сайтов
визуальные редакторы
Adobe Dreamweaver,
Microsoft Office SharePoint Designer (FrontPage)
WebSite X5 Evolution 8
простые текстовые редакторы (Блокнот, Notepad),
требующие изучения языка HTML
• конструкторы
ucoz.ru, wix.com
• системы управления контентом (CMS)
Joomla, Drupal, WordPress (бесплатные)
7

8.

3. Структура и создание HTML-документов
HTML-документ – это обычный текстовый файл,
включающий специальные управляющие HTML-коды или теги.
Большинство тегов являются парными – открывающими и
закрывающими. Открывающий тег может иметь параметры или
атрибуты, определяющие работу тега. Порядок следования
атрибутов произвольный.
Синтаксис:
< ТЕГ параметр1=значение1 параметр2=значение2….> –
открывающий тег
Текст
</ ТЕГ> – закрывающий тег
Прописные и строчные буквы в именах и параметрах тегов не
8
различаются (кроме текстовых констант)

9.

Открывающий, закрывающий теги (если есть) и
содержащаяся между ними информация называется блоком
или контейнером. Контейнеры могут содержать другие
контейнеры.
Структура HTML-документа:
<HTML>
< НEAD >
<TITLE> заголовок </ TITLE >
</ НEAD >
<BODY>
тело документа
</ BODY>
</ HTML>
9

10.

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

Два основных блока обозначаются тегами:
НEAD – служебная
свойства документа.
заголовочная
часть,
определяет
BODY – определяет тело, содержимое документа.
Каждый блок может содержать различные теги.
TITLE – определяет название документа, которое
появляется в строке заголовка окна браузера при открытии
документа.
10

11.

Порядок создания и просмотра HTML-документа:
открыть Блокнот или другой текстовый редактор
ввести текст документа
сохранить документ в файле с типом HTML
открыть документ в браузере
Редактирование HTML-документа:
• перейти в Блокнот (КМ – Просмотреть исходный код)
• внести изменения, СОХРАНИТЬ
• перейти в окно браузера, ОБНОВИТЬ (клавиша F5;
кнопка Обновить)
При отображении HTML-документов браузер пропускает
неверные теги и не выдает сообщения об ошибках.
11

12.

4. Теги тела HTML-документов
4.1. Оформление документов
• Создание заголовков (от более крупных к более мелким):
<H1|H2|.....|H6> текст заголовка </H1|….|/H6>
Горизонтальная линия
<HR SIZE = толщина COLOR = цвет WIDTH = ширина>
толщина задается в пикселях, ширина в пикселях или
процентах от ширины экрана
Перевод строки
Создание абзаца (переход на следующую строку и пропуск
одной строки)
<BR>
<P>…….</P>
12

13.

В настоящее время в веб-разработке прослеживается
глобальная тенденция разделения содержимого вебстраницы от ее представления (форматирования):
Содержимое должно добавляться и определяться
разметкой, например, через HTML.
Представление определяется языками, такими
как CSS и JavaScript.

14.

Вывод текста без форматирования в исходном виде с
точным соблюдением переносов строк и интервалов
<PRE>…….</PRE>
Форматирование шрифта
<FONT FACE = шрифт SIZE = размер COLOR = цвет >
текст
</FONT>
Размер = 1..7, по умолчанию 3, + - размер – изменение
размера по отношению к размеру предыдущего текста.
Цвет задается одним из 16 стандартных цветов
именованными константами BLACK, WHITE, RED,
GREEN, BLUE…. или шестнадцатеричным числом из 6
цифр.
14

15.

Каждые две цифры соответствуют одному из цветов в
цветовой схеме RGB (RED – GREEN – BLUE) и принимают
значения от 00 (нет цвета) до FF (самый насыщенный).
BLACK = "#000000" RED = "#FF0000" WHITE = "#FFFFFF"
Стиль текста:
<I> ….</I> - курсив
<B>….</B> - полужирный стиль
<U>….</U> - подчеркнутый стиль
<SUP>….</ SUP> - верхний индекс
<SUB>….</ SUB > - нижний индекс
Выравнивание текста задается :
• атрибутом ALIGN в тегах заголовков, абзаца <P>,
горизонтальной линии <HR>
15

16.

ALIGN = LEFT | CENTER | RIGHT | JUSTIFY
по левому краю, центру, правому краю, ширине
(по умолчанию)
• с помощью тегов
< LEFT >….</ LEFT > (по умолчанию)
< CENTER>….</CENTER>
Бегущая строка
<MARQUEE DIRECTION = направление движения
HEIGHT = высота WIDTH = ширина BGCOLOR = цвет фона>
Текст бегущей строки (или тег изображения)
</MARQUEE>
Направление движения LEFT (по умолчанию), RIGHT, UP,
DOWN
Ширину можно указать в % от ширины экрана или в
16
пикселях, высоту в пикселях.

17.

• Вставка специальных символов:
пробел – &nbsp (все дополнительные пробелы текста
игнорируются браузером)
< – &lt
> – &gt © – &copy
Параметры тега BODY:
BGCOLOR – определяет цвет фона документа
TEXT – определяет цвет текста документа
BACKGROUND – определяет фоновое изображение
style="background-repeat: no-repeat; – не дает фону повторяться
background-size:cover" – растягивает фоновый рисунок на весь
экран.
LINK – определяет цвет гиперссылок
VLINK – цвет просмотренных гиперссылок
ALINK – цвет гиперссылок при наведении на них указателя
17
мыши

18.

LEFTMARGIN, RIGHTMARGIN задают левое (правое)
поле для всей страницы в пикселях.
Пример 1.
<BODY BGCOLOR = YELLOW LEFTMARGIN =100>
<CENTER> <H1> ГГТУ им. П.О. Сухого </H1>
</CENTER>
<H2 ALIGN=LEFT> <FONT COLOR="0000E1">
Энергетический факультет
</H2>
<B> <FONT SIZE=6 COLOR=GREEN>
Это первый абзац полужирный шрифт размер 6
выровнен по левому краю (по умолчанию)
</FONT>
</B>
18

19.

<P ALIGN=CENTER>
<FONT SIZE=5 COLOR="F100F1">
<I> А это второй абзац, курсив, размер 5, выровнен по центру
</I>
<P ALIGN=RIGHT> Это первая строка третьего абзаца
(выровнен по правому краю), она обрывается
<BR>
А это вторая, после нее должна быть линия
</FONT>
<HR SIZE = 6 COLOR =RED WIDTH=80% ALIGN=CENTER>
19

20.

<PRE>
<B> <FONT SIZE=5>
Хорошие советы!!!!!
- не перегружайте страницу большими изображениями;
- проверяйте как можно чаще ссылки на вашей странице.
</FONT>
</B>
</PRE>
<CENTER>
<FONT SIZE=5 COLOR=YELLOW>
<MARQUEE HEIGHT=30 WIDTH = 80%
BGCOLOR="F100F1">
В Т О Р О Й &nbsp&nbsp&nbsp С Е М Е С Т Р!!!
</MARQUEE>
</CENTER>
</BODY>
20

21.

4.2. Создание списков
Нумерованные списки:
<OL> - начало списка
<LI> - описание первого пункта
<LI> - описание второго пункта
…….
</OL> - конец списка
Атрибуты тега <OL>:
TYPE = A | a | I | i | 1 – вид нумерации
A, a – латинские прописные/строчные буквы
I, i – римские цифры
1 – арабские цифры (по умолчанию)
START = n – задает начальное значение числовой нумерации
21

22.

Маркированные списки:
<UL> - начало списка
<LI> - описание первого пункта
<LI> - описание второго пункта
…….
</UL> - конец списка
Вид маркера можно задать при помощи атрибута тега <UL>
TYPE = disc | circle | square
(по умолчанию)
Списки могут быть вложенными, уровни вложения не
ограничены.
22

23.

Пример 2. Вывод нумерованного списка факультетов
шрифтом красного цвета:
Список факультетов
1. ЭФ
2. МТФ
3. МСФ
<FONT SIZE = 4 COLOR = RED >
<CENTER>
<I> Список факультетов </I>
</CENTER>
<OL>
<LI> ЭФ
<LI> МТФ
<LI> МСФ
</OL>
</FONT>
23

24.

4.3. Создание таблиц
Описание таблицы
< TABLE BORDER = ширина > … < /TABLE>
параметр BORDER задает границы таблицы, ширина
указывается в пикселях, может отсутствовать как параметр
полностью (нет границ) так и значение ширины (тонкая черная
линия границ).
< CAPTION >… </ CAPTION > - заголовок таблицы
<TR>… </TR> - строка таблицы
<TH> …</TH> - заголовки столбцов
<TD>… </TD> - данные каждой ячейки
24

25.

Горизонтальное выравнивание задается атрибутом
ALIGN тегов <TR>, <TD>, <TH>
<TH> - по центру по умолчанию
Для таблицы относительно окружающего текста (LEFT,
RIGHT).
Вертикальное атрибутом
VALIGN
тегов
<TH> и <TD>
VALIGN= TOP | MIDDLE | BUTTON
Объединение нескольких соседних
атрибутами тегов <TH> или <TD>
ячеек
задается
COLSPAN = число ячеек – по горизонтали
ROWSPAN = число ячеек – по вертикали
25

26.

Цвет фона задается атрибутом BGCOLOR тегов <TABLE>,
<TR>, <TD>, цвет текста тегом <FONT> для заголовка или ячеек
таблицы.
Ширина всей таблицы (в пикселях или % от ширины экрана)
и отдельных ячеек (в пикселях или % от ширины таблицы)
задается атрибутом WIDTH тегов <TABLE>, <TH>, <TD>.
Высота ячейки атрибутом HEIGHT тегов <TH>, <TD>.
Закрывающие теги </CAPTION>, </TH>, </TR>, </TD>
можно не указывать.
Пример 3. Создать таблицу следующего вида:
ИТОГИ СЕССИИ
ФАМИЛИЯ
Иванов
Петров
ГРУППА
ОЦЕНКИ
ТЭ-11
Э-12
5
8
6
7
26

27.

<TABLE BORDER>
<CAPTION>
<FONT COLOR=RED> ИТОГИ СЕССИИ
</ CAPTION>
<TR>
<TH> <FONT COLOR=BLUE>
&nbsp ФАМИЛИЯ &nbsp </ TH>
<TH> &nbsp ГРУППА &nbsp </ TH>
<TH COLSPAN=2> &nbsp ОЦЕНКИ &nbsp</ TH>
</ TR>
27

28.

<TR>
<TD> Иванов </TD>
<TD ALIGN=CENTER> ТЭ-11 </ TD>
<TD ALIGN=RIGHT> 5 </ TD>
<TD ALIGN=RIGHT> 6 </ TD>
</TR>
<TR>
<TD> Петров </ TD>
<TD ALIGN=CENTER> Э-12 </ TD>
<TD ALIGN=RIGHT> 8 </ TD>
<TD ALIGN=RIGHT> 7 </ TD>
</ TR>
</ TABLE>
28

29.

ФАКУЛЬТЕТ
ЭФ
ФАИС
ГРУППА
Э-11
Э-12
ТЭ-11
ИП-11
ИП-12
29

30.

<TABLE BORDER>
<TR ALIGN=CENTER>
<TH> <FONT COLOR=RED> &nbsp ФАКУЛЬТЕТ &nbsp
<TH> <FONT COLOR=RED >&nbsp ГРУППА &nbsp
<TR ALIGN=CENTER >
<TD ROWSPAN=3>ЭФ
<TD ALIGN=CENTER>Э-11
<TR ALIGN=CENTER>
<TD> Э-12
<TR ALIGN=CENTER>
<TD>ТЭ-11
<TR ALIGN=CENTER>
<TD ROWSPAN=2>ФАИС
<TD>ИП-11
<TR ALIGN=CENTER>
<TD>ИП-12
</TABLE>
30

31.

4.4. Адресация файлов в Интернет
Любой файл в Интернет имеет свой адрес, включающий имя
файла, его местоположение в Интернет (адрес сервера) и
протокол обмена информацией с компьютером, где находится
файл. Он называется URL-адресом, универсальным указателем
ресурса.
Общий вид URL:
протокол : // адрес_сервера / путь к файлу / имя_файла
Все документы WWW передаются по протоколу HTTP.
31

32.

Примеры URL-адресов:
http: // www.nihe.unibel.by / rus / courses / courses.html
http: // www.bychess.info / future.html
Ссылки могут быть неполными, содержащими только адрес
сервера. В этом случае обращение происходит к домашней
странице сервера.
http: // www.microsoft.com домашняя страница Web-сервера
фирмы Microsoft
http: // www.gstu.by
домашняя страница сайта ГГТУ
32

33.

Если файл находится на том же компьютере, что и HTMLфайл, имеющий на него ссылку, то путь к файлу может быть
относительным, без указания адреса сервера. Если все файлы
находятся в одном каталоге, то указывается только имя файла.
Str1.html – файл в текущем каталоге
image/im1.jpeg – рисунок im1.jpeg в подкаталоге image
текущего каталога
../image/im1.jpeg – рисунок im1.jpeg в подкаталоге image
родительского каталога (предыдущего уровня)
URL-адреса и относительные имена файлов используются
при создании гиперссылок и вставке изображений.
Если имя файла содержит русские буквы или пробелы, то
оно обязательно должно заключаться в кавычки, например
"мой_дом.bmp"
33

34.

4.5. Вставка графических изображений
Перед вставкой изображения в Web-страницу его
необходимо создать с помощью графического редактора или
использовать готовые файлы с изображениями.
Существует множество форматов данных для хранения
графических изображений. Основными критериями при
использовании графических файлов является скорость передачи
данных и качество изображения.
Наиболее часто используемыми являются форматы
графических файлов JPEG и GIF (для его замены разработан
формат PNG). Файлы в формате BMP хранятся без сжатия,
имеют большой объем и требуют много времени для загрузки.
34

35.

Для вставки графических изображений используется тег:
<IMG SRC="URL-адрес изображения"
ALT = "альтернативный текст" ALIGN = выравнивание
WIDTH = ширина HEIGHT = высота BORDER = …
VSPACE =… HSPACE =…>
Атрибуты тега определяют:
ALT - текст, который заменяет рисунок, если он не
отображается
ALIGN (LEFT | RIGHT) – способ выравнивания
изображения относительно обтекающего текста
WIDTH, HEIGHT – ширина и высота изображения в
пикселях
35

36.

VSPACE и HSPACE –размер пустых полос вокруг
рисунка по вертикали и горизонтали в пикселях
BORDER – ширина рамки вокруг рисунка в
пикселях. Цвет рамки совпадает с цветом текста, по
умолчанию
черный.
Если
рисунок
является
гиперссылкой, то цвет рамки совпадает с цветом
гиперссылки.
Пример:
<IMG SRC = "car.gif" ALT = "мой автомобиль"
ALIGN = LEFT WIDTH = 70 HEIGHT = 50
VSPACE = 10 HSPACE = 10>
36

37.

4.6. Создание гиперссылок
Простота организации гиперссылок – основной фактор
широкого распространения Web-технологий. С помощью
гиперссылок устанавливается связь между HTMLдокументами.
Гиперссылки могут быть представлены в виде текста
или рисунка (изображения). Текст обычно подчеркивается.
Цвет текстовых гиперссылок определяется параметрами тега
BODY Web-страницы или установками браузера, если
параметры не заданы.
Если установить указатель мыши на ссылку, то в строке
состояния браузера появится URL-адрес ресурса, на который
указывает ссылка. Щелчок по ссылке вызывает загрузку и
переход к документу с указанным URL-адресом.
37

38.

Для создания гиперссылки используется тег:
<A HREF= " URL-адрес " >
текст или тег вставки изображения
</A>
Примеры:
текстовая гиперссылка:
<A HREF = " my_adres.html " > мой адрес </A>
гиперссылка в виде рисунка:
<A HREF= "my_adres.html " > <IMG SRC = " dom.gif "
ALT = "мой адрес" WIDTH = 40 HEIGHT = 20 >
</A>
38

39.

Для того, чтобы гиперссылка не подчеркивалась,
используется атрибут STYLE тега гиперссылки в виде:
STYLE = " text-decoration : none "
Пример:
<A HREF = "my_adres.html" STYLE = " text-decoration : none ">
мой адрес
</A>
Если необходимо, чтобы все гиперссылки Web-страницы не
подчеркивались, в заголовочной части документа (<HEAD> …..
</HEAD> ) указать стиль всех гиперссылок:
<STYLE type = " text/css ">
A{
text-decoration : none
}
</STYLE>
39

40.

А для той гиперссылки, которую нужно все-таки подчеркнуть,
указать атрибут STYLE в виде:
STYLE = "text-decoration : underline"
Можно создать переход
по гиперссылке не к началу
документа, а к некоторой опорной точке как в текущем
документе, так и в другом документе, если документы
достаточно длинные.
Для создания таких внутренних ссылок в нужном месте
документа (опорной точке) необходимо разместить именные
якоря (анкеры) с помощью тега
<A NAME= "name" > , где name – имя опорной точки.
Тогда для перехода к этому фрагменту текущего документа
используется тег
<A HREF= "# name"> текст ссылки </A >
40

41.

Для перехода к фрагменту другого документа используется
тег
<A HREF= "имя файла # name" >
Например, можно отметить начало Web-страницы тегом
<A NAME= "начало"> </A>
Тогда внутренняя гиперссылка для перехода к началу
страницы будет иметь вид:
<A HREF= "#начало"> Переход к началу документа
</A>
41

42.

Можно выполнить переход
используя стандартную кнопку.
к
новой
Web-странице,
Для этого нужно создать форму с одной кнопкой, при
щелчке по которой открывается новый файл (Web-страница,
изображение и др.)
<FORM ACTION = "имя файла">
<INPUT TYPE = SUBMIT VALUE="текст">
</FORM >
Тег <FORM> используется для создания формы. Значение
параметра ACTION определяет имя файла, к которому
выполняется переход.
Тег <INPUT> определяет элемент формы. Значение
параметра TYPE = SUBMIT определяет кнопку, значение
параметра VALUE – текст на кнопке
42

43.

Пример:
<FORM ACTION = "Ават.jpg"
<INPUT TYPE = SUBMIT VALUE = "рисунок">
</FORM >
43

English Русский Правила