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

Загрузка...

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

содержание презентации «Язык разметки гипертекста.ppt»
СлайдТекст
1 Основы языка разметки гипертекста

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

Основы языка разметки гипертекста. Автор: Русинов А.С.

2 Оглавление

Оглавление

Оглавление. Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8.

3 Введение в HTML

Введение в 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

Достоинства 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

Структура 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. [ ]. &laquo; «. &quot; " &reg; ®. &amp; & &deg; °. &lt; < &plusmn; ±. &gt; > &micro; µ. &curren; ¤. &para; ¶. &brvbar; ¦. &middot; ·. &sect; §. &sup1; ? &copy; ©. &euro; €. &ordf; ? . .

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-код

Нумерованный список. 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

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

32 JPEG

JPEG

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

33 PNG

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

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 - зачет. Выполните тест.

«Язык разметки гипертекста»
Загрузка...
Сайт

5informatika.net

115 тем
5informatika.net > HTML > Язык разметки гипертекста.ppt