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

Реклама. Продолжение ниже
Основы языка разметки гипертекста
Оглавление
Урок 1
Понятия : HTML, web- сайта
Пример структуры сайта
Достоинства HTML
История
Виды тегов
Структура HTML
Мета - теги
Спецсимволы
Форматирование текста
Форматирование текста. Пример.
Форматирование текста
Таблица цветов
Выравнивание текста
Сочетания тегов
Сочетания тегов
Урок 2
Урок 3
Списки
Списки
Маркированный список
Нумерованный список
Нумерованный список
Нумерованный список
Нумерованный список*
Вложенный список
Вставка изображений
Вставка изображений. Форматы.
Вставка изображений. Gif *
Вставка изображений. JPEG *
Вставка изображений. PNG *
Вставка изображений. Примеры
Самостоятельная работа
Урок 4
Гиперссылка
Гиперссылки. Формат.
Гиперссылки. Примеры.
Гипперссылка в виде изображения
Гиперссылка в пределах страницы*
Графическое оформление
Графическое оформление
Урок 5
Урок 6
Таблицы
Таблицы
Таблицы
Таблицы
Таблицы
Таблицы
Таблицы
Урок 7
Урок 8 - зачет
1/54
Средняя оценка: 4.1/5 (всего оценок: 68)
Код скопирован в буфер обмена
Скачать (381 Кб)
Реклама. Продолжение ниже
1

Первый слайд презентации: Основы языка разметки гипертекста

Автор : Русинов А.С.

Изображение слайда
1/1
2

Слайд 2: Оглавление

Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8

Изображение слайда
1/1
3

Слайд 3: Урок 1

Введение в HTML, история, работа с текстом

Изображение слайда
1/1
4

Слайд 4: Понятия : HTML, web- сайта

HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Все web -страницы создаются при помощи языка HTML ( специальных управляющих символов – тегов). Web-сайт состоит из Web-страниц (обычно это файлы с расширением.html или htm ), объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. ГЛАВНЫЙ ФАЙЛ НАЗЫВАЕТСЯ index.html или index.htm

Изображение слайда
1/1
5

Слайд 5: Пример структуры сайта

Схема 1 2 урок

Изображение слайда
1/1
6

Слайд 6: Достоинства HTML

Возможность просмотра на любых ПК, под управлением различных операционных систем ( Windows, Linux, Unix, BSD, MacOS, OS/2...) Малый информационный объем

Изображение слайда
1/1
7

Слайд 7: История

1986 г - Standard Generalized Markup Language (SGML), международная организация по стандартизации (ISO) 1991 г – создан HTML (сотрудники Европейского института физики частиц), для Mosaic (22 тега) 1993 г – HTML версия 1.3 (43 тега) 1995 г - HTML версия 2.0 1996 г - HTML версия 3.0 (таблицы стилей CSS ) 1997 г - HTML версия 4.0 (фреймы, сложные таблицы…) 2005 г – начата разработка версии 5.0 (Консорциумом Всемирной паутины (W3C) )

Изображение слайда
1/1
Реклама. Продолжение ниже
8

Слайд 8: Виды тегов

Парные (c закрытием, контейнер) <html> </html> <p> Текс </p> Не парные ( одинарные) <br>

Изображение слайда
1/1
9

Слайд 9: Структура HTML

Изображение слайда
1/1
10

Слайд 10: Мета - теги

Помещаются между тегами <head>... </head> Служат для детального описания страницы <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="Description" content="Краткое описание содержания страницы"> <meta name="Keywords" content="ключевые слова документа, разделенные запятыми или пробелами"> ... </head>

Изображение слайда
1/1
11

Слайд 11: Спецсимволы

Иногда возникает необходимость в использовании символа, которого нет на клавиатуре или не воспринемается если мы его напечатаем в документе. Мнемокод Символ Мнемокод Символ &nbsp [ ] &laquo; « &quot; " &reg; ® &amp; & &deg; ° &lt; < &plusmn; ± &gt; > &micro; µ &curren; ¤ &para; ¶ &brvbar; ¦ &middot; · &sect; § &sup1; ¹ &copy; © &euro; € &ordf; ª

Изображение слайда
1/1
12

Слайд 12: Форматирование текста

Тег Описание Вид <H1>...</H1> Заголовок 1 уровня Заголовок1 ... <H6>...</H6> Заголовок 6 уровня Заголовок6 <BIG>...</BIG> Большой Большой <SMALL>...</SMALL> Маленький Маленький <SUP>...</SUP> Верхний индекс Верхний индекс <SUB>...</SUB> Нижний индекс Нижний индекс <B>...</B> Жирный Жирный <I>...</I> Курсив Курсив <U>...</U> Подчеркнутый Подчеркнутый <S>...</S> Перечеркнутый Перечеркнутый

Изображение слайда
1/1
13

Слайд 13: Форматирование текста. Пример

HTML - код <html> <head> <title>Заголовок</title> </head> <body> <b>Пробный текст</b> </body> </html> Вид на экране Пробный текст

Изображение слайда
1/1
14

Слайд 14: Форматирование текста

Размерами и начертаниями шрифта можно управлять также с помощью тега FONT и его атрибутов : <FONT FACE="Шрифт" SIZE="Размер">... </FONT> Например : <FONT FACE="Arial" SIZE="5">Текст </FONT> Цвет текста можно задать следующим образом : <FONT COLOR =“ red” >Текст </FONT> или <FONT COLOR =“ #FF0000” >Текст </FONT>

Изображение слайда
1/1
Реклама. Продолжение ниже
15

Слайд 15: Таблица цветов

Название Цвет Hex aqua #00FFFF black #000000 blue #0000FF fuchsia #FF00FF gray #808080 green #008000 lime #00FF00 maroon #800000 navy #000080 olive #808000 purple #800080 red #FF0000 silver #C0C0C0 teal #008080 white #FFFFFF yellow #FFFF00

Изображение слайда
1/1
16

Слайд 16: Выравнивание текста

Тег Описание < P >Текст</ P > Добавляет новый параграф, по умолчанию выровненный по левому краю. < BR > Переход на новую строку <P ALIGN="CENTER"> Текст </P> Выравнивание по центру. <P ALIGN="LEFT"> Текст </P> Выравнивание по левому краю. <P ALIGN="RIGHT"> Текст </P> Выравнивание по правому краю. <P ALIGN="JUSTIFY"> Текст </P> Выравнивание по ширине.

Изображение слайда
1/1
17

Слайд 17: Сочетания тегов

Теги можно комбинировать друг с другом получая нужный результат. Например, напечатать на экране жирным курсивом текст. Очередность сочений не имеет значения. Код HTML: <html> <head> <title>Сочетание тегов</title> </head> <body> <B><I> Текст </B></I> </body> </html>

Изображение слайда
1/1
18

Слайд 18: Сочетания тегов

Код HTML: <html> <head> <title>Сочетание тегов</title> </head> <body> <P ALIGN="CENTER"> <H1> Текст </H1> </P> </body> </html>

Изображение слайда
1/1
19

Слайд 19: Урок 2

Выполните задание №1, №2 в классе.

Изображение слайда
1/1
20

Слайд 20: Урок 3

Списки и изображения

Изображение слайда
1/1
21

Слайд 21: Списки

Нумерованные Маркированные Возможно создавать вложенные списки

Изображение слайда
1/1
22

Слайд 22: Списки

Располагается внутри контейнера <OL>... </OL> (нумерованный список) или <UL>... </UL> (маркированный список) А каждый элемент определяется тегами <LI> … </LI>

Изображение слайда
1/1
23

Слайд 23: Маркированный список

HTML код : <html> <body> <p>Прикладное ПО:</p> <ul> <li>СУБД</li> <li>Текстовые редакторы</li> <li>Графические редакторы</li> <li>Графические редакторы</li> </ul> </body> </html> Вид на экране Прикладное ПО : СУБД Текстовые редакторы Графические редакторы Графические редакторы

Изображение слайда
1/1
24

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

HTML код : <html> <body> <p>Прикладное ПО:</p> <ol> <li>Системное ПО</li> <li>Прикладное ПО</li> <li>Системы программирование</li> </ol> </body> </html> Вид на экране : Прикладное ПО: Системное ПО Прикладное ПО Системы программирование

Изображение слайда
1/1
25

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

По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации. Значение TYPE Нумерация A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..

Изображение слайда
1/1
26

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

HTML-код: <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> <ol type="A"> <li> элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> </ol> Отображение в браузере: элемент 1 элемент 2 элемент 3 элемент 1 элемент 2 элемент 3

Изображение слайда
1/1
27

Слайд 27: Нумерованный список*

При помощи атрибутов START VALUE можно изменить порядок нумерации списка. START - служит для задания начального номера списка, отличного от 1. VALUE - дает возможность назначить произвольный номер любому элементу списка. Пример: HTML-код: <ol start="5"> <li> элемент 1</li> <li value="9"> элемент 2</li> <li> элемент 3</li> </ol> Отображение в браузере: 5. элемент 1 9. элемент 2 10. элемент 3

Изображение слайда
1/1
28

Слайд 28: Вложенный список

<html> <body> <p>ПО:</p> <ol> <li>Системное ПО</li> <li>Прикладное ПО</li> <ul> <li>СУБД</li> <li>Текстовые редакторы</li> <li>Графические редакторы</li> <li>Графические редакторы</li> </ul> <li>Системы программирование</li> </ol> </body> </html> HTML код : Вид на экране

Изображение слайда
Изображение для работы со слайдом
1/2
29

Слайд 29: Вставка изображений

Для встраивания изображения в документ используется тег <IMG>, имеющий обязательный параметр src, который определяет адрес файла с картинкой и alt, определяющий альтернативный текст.

Изображение слайда
1/1
30

Слайд 30: Вставка изображений. Форматы

Формат Расширение Количество оттенков GIF *.gif 256 JPEG *.jpg 16 млн. PNG *.png 281 трлн.

Изображение слайда
1/1
31

Слайд 31: Вставка изображений. Gif *

256 цветов поддерживает загрузку файла с чередованием строк возможен прозрачный фон осуществляет анимацию изображения Используют для рисунков и gif-анимации

Изображение слайда
1/1
32

Слайд 32: Вставка изображений. JPEG *

16 млн. цветов фотографическое качество изображений позволяет задать еще более высокую степень сжатия за счет потери качества Используют для фотографий

Изображение слайда
1/1
33

Слайд 33: Вставка изображений. PNG *

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

Изображение слайда
1/1
34

Слайд 34: Вставка изображений. Примеры

<IMG SRC="risunok.gif"> Изображение risunok.gif находится в той же папке что и html файл <IMG SRC="katalog/risunok.gif"> Изображение risunok.gif находится в папке katalog по отношению к html файлу <IMG SRC="c:\site\risunok.gif"> Находится на компьютере в папке c:\site\risunok.gif <IMG SRC="http://test.ru/risunok.gif"> Находится на сайте http://test.ru/

Изображение слайда
1/1
35

Слайд 35: Самостоятельная работа

Выполните задания №3, №4

Изображение слайда
1/1
36

Слайд 36: Урок 4

Гиперссылки, графическое оформление

Изображение слайда
1/1
37

Слайд 37: Гиперссылка

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

Изображение слайда
1/1
38

Слайд 38: Гиперссылки. Формат

Изображение слайда
1/1
39

Слайд 39: Гиперссылки. Примеры

Ссылки с абсолютным адресом <A HREF="http://rusinov.name">Персональная страничка</a> <A HREF="c:\site\index.html">Сылка на файл</a> Ссылки с относительным адресом <A HREF="file.html">Персональная страничка</a> <A HREF="big/ pic. gif ">Сылка на файл</a> <A HREF=“ /small / gol. html ">Ссылка на страничку</a> Ссылки на e-mail <A HREF="mailto:andrey@rusinov.name">E-mail для связи</A>

Изображение слайда
1/1
40

Слайд 40: Гипперссылка в виде изображения

<A HREF="http://rusinov.name"><img src="sample.gif"> </a> Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Чтобы убрать рамку, следует у тега <IMG> установить параметр border="0"

Изображение слайда
1/1
41

Слайд 41: Гиперссылка в пределах страницы*

Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта. HTML - код <a href="#Начало страницы">Наверх страницы</a> В то место, куда надо сделать переход надо вставить: <a name="Начало страницы"></a>

Изображение слайда
1/1
42

Слайд 42: Графическое оформление

Цвет фона веб-страницы задается с использованием параметра bgcolor тега <BODY>. HTML - код : <html> <head> ... </head> <body bgcolor="blue" > <p>...</p> </body> </html> Цвет можно указывать в шестнадцатеричном значении или по его имени.

Изображение слайда
1/1
43

Слайд 43: Графическое оформление

В качестве фона можно использовать любое подходящее для этого изображение. Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться с цветовой гаммой веб-страницы и быть маленьким по размеру. Цвет фона веб-страницы задается с использованием атрибута (параметра) background тега <BODY>. HTML – код : <html> <head> ... </head> <body background="image/samplebg.gif"> <p>...</p> </body> </html> Internet Explorer позволяет сделать фон неподвижным с помощью параметра bgproperties="fixed" тега <BODY>.

Изображение слайда
1/1
44

Слайд 44: Урок 5

Выполните задание №5, 6

Изображение слайда
1/1
45

Слайд 45: Урок 6

Таблицы

Изображение слайда
1/1
46

Слайд 46: Таблицы

Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.

Изображение слайда
1/1
47

Слайд 47: Таблицы

HTML- код : <table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> Вид на экране :

Изображение слайда
Изображение для работы со слайдом
1/2
48

Слайд 48: Таблицы

Для создания заголовка таблицы служит тэг <CAPTION>. По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей. HTML- код : <table border="1"> <caption> Заголовок таблицы </caption> <tr> <td>1</td> <td>2</td> </tr> </table> Вид на экране :

Изображение слайда
Изображение для работы со слайдом
1/2
49

Слайд 49: Таблицы

Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN. Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево. Атрибут VALIGN выравнивает данные по вертикали. HTML- код : <table border="1" cellpadding="5"> <tr> <td align="right">1111<br>2222</td> <td valign="top" align="center">22222</td> </tr> <tr> <td> Нижняя ячейка </td> <td> Нижняя ячейка </td> </tr> </table> Вид на экране :

Изображение слайда
Изображение для работы со слайдом
1/2
50

Слайд 50: Таблицы

Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). HTML- код : <table border="1" width="200"> <tr> <td><p>Ширина 200 пикселей</p></td> </tr> </table> <br> <table border="1" width="60%"> <tr> <td><p> Ширина 60%</p></td> </tr> </table> Вид на экране :

Изображение слайда
Изображение для работы со слайдом
1/2
51

Слайд 51: Таблицы

При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку. Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.

Изображение слайда
1/1
52

Слайд 52: Таблицы

HTML- код : <table border="1"> <tr> <td rowspan="3">1111</td> <td colspan="2">22222</td> <td colspan="2">33333</td> </tr> <tr> <td>44444</td> <td colspan="2" rowspan="2">55555</td> <td>66666</td> </tr> <tr> <td>77777</td> <td>88888</td> </tr> <tr> <td colspan="5">99999</td> </tr> </table> Вид на экране :

Изображение слайда
Изображение для работы со слайдом
1/2
53

Слайд 53: Урок 7

Выполните задание № 7

Изображение слайда
1/1
54

Последний слайд презентации: Основы языка разметки гипертекста: Урок 8 - зачет

Выполните тест

Изображение слайда
1/1
Реклама. Продолжение ниже