Презентация «Язык разметки гипертекста»

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

Основы языка разметки гипертекста	Оглавление	Введение в HTML	Язык разметки гипертекста	Пример структуры сайта
Достоинства HTML	История	Виды тегов	Структура HTML	Краткое описание содержания страницы
Спецсимволы	Форматирование текста	Вид на экране	Цвет текста	Таблица цветов
Выравнивание текста	Сочетания тегов	Код	Задание	Списки и изображения
Списки	Элемент	Маркированный список	Нумерованный список	Элементы списка
Html-код	Порядок нумерации списка	Вложенный список	Вставка изображений	Форматы
Gif	JPEG	PNG	Изображение	Самостоятельная работа
Гиперссылки, графическое оформление	Гиперссылка	Формат	Ссылки с абсолютным адресом	Гипперссылка в виде изображения
Гиперссылка в пределах страницы	Графическое оформление	Фон не должен отвлекать внимание	Выполните задание	Таблицы
Тэг	Вид	Браузер	Атрибуты	Ширина таблицы
Строки	Colspan	Урок	Зачет

Презентация «Язык разметки гипертекста». Размер 357 КБ. Автор: Rusinov A.S..

Загрузка...

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

содержание презентации «Язык разметки гипертекста.ppt»

№	Слайд	Текст
1		Основы языка разметки гипертекста Основы языка разметки гипертекста. Автор: Русинов А.С.
2		Оглавление Оглавление. Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8.
3		Введение в HTML Урок 1. Введение в HTML, история, работа с текстом.
4		Язык разметки гипертекста Понятия: HTML, web-сайта. HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Все web-страницы создаются при помощи языка HTML (специальных управляющих символов – тегов). Web-сайт состоит из Web-страниц (обычно это файлы с расширением .html или htm), объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. ГЛАВНЫЙ ФАЙЛ НАЗЫВАЕТСЯ index.html или index.htm.
5		Пример структуры сайта Пример структуры сайта. Схема 1. 2 урок.
6		Достоинства HTML Достоинства HTML. Возможность просмотра на любых ПК, под управлением различных операционных систем (Windows, Linux, Unix, BSD, MacOS, OS/2...) Малый информационный объем.
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) ).
8		Виды тегов Виды тегов. Парные (c закрытием, контейнер) <html> </html> <p> Текс </p> Не парные (одинарные) <br>
9		Структура HTML Структура HTML.
10		Краткое описание содержания страницы Мета - теги. Помещаются между тегами <head> ... </head> Служат для детального описания страницы <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="Description" content="Краткое описание содержания страницы"> <meta name="Keywords" content="ключевые слова документа, разделенные запятыми или пробелами"> ... </head>
11		Спецсимволы Спецсимволы. Иногда возникает необходимость в использовании символа, которого нет на клавиатуре или не воспринемается если мы его напечатаем в документе. Мнемокод. Символ. Мнемокод. Символ. &nbsp. [ ]. « «. " " ® ®. & & ° °. < < ± ±. > > µ µ. ¤ ¤. ¶ ¶. ¦ ¦. · ·. § §. ¹ ? © ©. € €. ª ? . .
12		Форматирование текста Форматирование текста. Заголовок1. <H1>...</H1> Заголовок 1 уровня. ... <H6>...</H6> Заголовок 6 уровня. Заголовок6. <BIG>...</BIG> Большой. Большой. <SMALL>...</SMALL> Маленький. <SUP>...</SUP> Верхний индекс. Верхний индекс. <SUB>...</SUB> Нижний индекс. Нижний индекс. <B>...</B> Жирный. Жирный. <I>...</I> Курсив. Курсив. <U>...</U> Подчеркнутый. Подчеркнутый. <S>...</S> Перечеркнутый. Перечеркнутый. Тег. Описание. Вид. Маленький.
13		Вид на экране Форматирование текста. Пример. HTML - код <html> <head> <title>Заголовок</title> </head> <body> <b>Пробный текст</b> </body> </html> Вид на экране Пробный текст.
14		Цвет текста Форматирование текста. Размерами и начертаниями шрифта можно управлять также с помощью тега FONT и его атрибутов: <FONT FACE="Шрифт" SIZE="Размер"> ... </FONT> Например: <FONT FACE="Arial" SIZE="5">Текст</FONT> Цвет текста можно задать следующим образом: <FONT COLOR=“red”>Текст</FONT> или <FONT COLOR=“#FF0000”>Текст</FONT>
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.
16		Выравнивание текста Выравнивание текста. Тег. Описание. <P>Текст</P> Добавляет новый параграф, по умолчанию выровненный по левому краю. <BR> Переход на новую строку. <P ALIGN="CENTER">Текст</P> Выравнивание по центру. <P ALIGN="LEFT">Текст</P> Выравнивание по левому краю. <P ALIGN="RIGHT">Текст</P> Выравнивание по правому краю. <P ALIGN="JUSTIFY">Текст</P> Выравнивание по ширине.
17		Сочетания тегов Сочетания тегов. Теги можно комбинировать друг с другом получая нужный результат. Например, напечатать на экране жирным курсивом текст. Очередность сочений не имеет значения. Код HTML: <html> <head> <title>Сочетание тегов</title> </head> <body> <B><I> Текст </B></I> </body> </html>
18		Код Сочетания тегов. Код HTML: <html> <head> <title>Сочетание тегов</title> </head> <body> <P ALIGN="CENTER"> <H1> Текст </H1> </P> </body> </html>
19		Задание Урок 2. Выполните задание №1, №2 в классе.
20		Списки и изображения Урок 3. Списки и изображения.
21		Списки Списки. Нумерованные Маркированные Возможно создавать вложенные списки.
22		Элемент Списки. Располагается внутри контейнера <OL>... </OL> (нумерованный список) или <UL>... </UL> (маркированный список) А каждый элемент определяется тегами <LI>…</LI>
23		Маркированный список Маркированный список. Вид на экране Прикладное ПО : СУБД Текстовые редакторы Графические редакторы Графические редакторы. HTML код: <html> <body> <p>Прикладное ПО:</p> <ul> <li>СУБД</li> <li>Текстовые редакторы</li> <li>Графические редакторы</li> <li>Графические редакторы</li> </ul> </body> </html>
24		Нумерованный список Нумерованный список. Вид на экране: Прикладное ПО: Системное ПО Прикладное ПО Системы программирование. HTML код: <html> <body> <p>Прикладное ПО:</p> <ol> <li>Системное ПО</li> <li>Прикладное ПО</li> <li>Системы программирование</li> </ol> </body> </html>
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..
26		Html-код Нумерованный список. 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.
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.
28		Вложенный список Вложенный список. HTML код: Вид на экране. <html> <body> <p>ПО:</p> <ol> <li>Системное ПО</li> <li>Прикладное ПО</li> <ul> <li>СУБД</li> <li>Текстовые редакторы</li> <li>Графические редакторы</li> <li>Графические редакторы</li> </ul> <li>Системы программирование</li> </ol> </body> </html>
29		Вставка изображений Вставка изображений. Для встраивания изображения в документ используется тег <IMG>, имеющий обязательный параметр src, который определяет адрес файла с картинкой и alt, определяющий альтернативный текст.
30		Форматы Вставка изображений. Форматы. Формат. Расширение. Количество оттенков. GIF. .gif. 256. JPEG. .jpg. 16 млн. PNG. *.png. 281 трлн.
31		Gif Вставка изображений. Gif *. 256 цветов поддерживает загрузку файла с чередованием строк возможен прозрачный фон осуществляет анимацию изображения Используют для рисунков и gif-анимации.
32		JPEG Вставка изображений. JPEG *. 16 млн. цветов фотографическое качество изображений позволяет задать еще более высокую степень сжатия за счет потери качества Используют для фотографий.
33		PNG Вставка изображений. PNG *. 281 трлн. цветов поддерживает загрузку файла с чередованием строк возможен прозрачный фон (с различной степенью прозрачности) помехоустойчивый, осуществляет проверку на ошибки при передаче файлов Используют для фотографий.
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/.
35		Самостоятельная работа Самостоятельная работа. Выполните задания №3, №4.
36		Гиперссылки, графическое оформление Урок 4. Гиперссылки, графическое оформление.
37		Гиперссылка Гиперссылка. Гиперссылка — это связь между веб-страницами или файлами. Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки. Часто гиперссылка указывает на другую веб-страницу, но может также указывать на рисунок, мультимедийный файл, адрес электронной почты или программу. См. схема 1.
38		Формат Гиперссылки. Формат.
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>
40		Гипперссылка в виде изображения Гипперссылка в виде изображения. <A HREF="http://rusinov.name"><img src="sample.gif"> </a> Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Чтобы убрать рамку, следует у тега <IMG> установить параметр border="0"
41		Гиперссылка в пределах страницы Гиперссылка в пределах страницы*. Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта. HTML - код <a href="#Начало страницы">Наверх страницы</a> В то место, куда надо сделать переход надо вставить: <a name="Начало страницы"></a>
42		Графическое оформление Графическое оформление. Цвет фона веб-страницы задается с использованием параметра bgcolor тега <BODY>. HTML - код : <html> <head> ... </head> <body bgcolor="blue"> <p>...</p> </body> </html> Цвет можно указывать в шестнадцатеричном значении или по его имени.
43		Фон не должен отвлекать внимание Графическое оформление. В качестве фона можно использовать любое подходящее для этого изображение. Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться с цветовой гаммой веб-страницы и быть маленьким по размеру. Цвет фона веб-страницы задается с использованием атрибута (параметра) background тега <BODY>. HTML – код: <html> <head> ... </head> <body background="image/samplebg.gif"> <p>...</p> </body> </html> Internet Explorer позволяет сделать фон неподвижным с помощью параметра bgproperties="fixed" тега <BODY>.
44		Выполните задание Урок 5. Выполните задание №5, 6.
45		Таблицы Урок 6. Таблицы.
46		Тэг Таблицы. Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.
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> Вид на экране:
48		Браузер Таблицы. Для создания заголовка таблицы служит тэг <CAPTION>. По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей. HTML-код: <table border="1"> <caption> Заголовок таблицы </caption> <tr> <td>1</td> <td>2</td> </tr> </table> Вид на экране:
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> Вид на экране:
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>
51		Строки Таблицы. При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку. Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
52		Colspan Таблицы. 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> Вид на экране:
53		Урок Урок 7. Выполните задание № 7.
54		Зачет Урок 8 - зачет. Выполните тест.
«Язык разметки гипертекста»