'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

Пример структуры сайта Схема 1 2 урок


Слайд 5

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


Слайд 6

История 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) )


Слайд 7

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


Слайд 8

Структура HTML


Слайд 9

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


Слайд 10

Спецсимволы Иногда возникает необходимость в использовании символа, которого нет на клавиатуре или не воспринемается если мы его напечатаем в документе.


Слайд 11

Форматирование текста


Слайд 12

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


Слайд 13

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


Слайд 14

Таблица цветов


Слайд 15

Выравнивание текста


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

Нумерованный список По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации.


Слайд 25

Нумерованный список


Слайд 26

Нумерованный список* При помощи атрибутов START VALUE можно изменить порядок нумерации списка. START - служит для задания начального номера списка, отличного от 1. VALUE - дает возможность назначить произвольный номер любому элементу списка. Пример:


Слайд 27

Вложенный список <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 код: Вид на экране


Слайд 28

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


Слайд 29

Вставка изображений. Форматы.


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

Вставка изображений. Примеры <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/


Слайд 34

Самостоятельная работа Выполните задания №3, №4


Слайд 35

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


Слайд 36

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


Слайд 37

Гиперссылки. Формат.


Слайд 38

Гиперссылки. Примеры. Ссылки с абсолютным адресом <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>


Слайд 39

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


Слайд 40

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


Слайд 41

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


Слайд 42

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


Слайд 43

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


Слайд 44

Урок 6 Таблицы


Слайд 45

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


Слайд 46

Таблицы 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> Вид на экране:


Слайд 47

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


Слайд 48

Таблицы Для выравнивания данных в таблице предназначены атрибуты 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> Вид на экране:


Слайд 49

Таблицы Ширина таблицы задается атрибутом 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> Вид на экране:


Слайд 50

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


Слайд 51

Таблицы 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> Вид на экране:


Слайд 52

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


Слайд 53

Урок 8 - зачет Выполните тест


×

HTML:





Ссылка: