1 / 69

HTML

HTML. Язык гипертекстовой разметки страниц. Структура HTML документа Заголовок Абзац Атрибуты тегов Inline- описание ( style) Атрибуты тега body. Фиксированный текст Вставка рисунка Линии Списки Ссылки Таблицы Фреймы. Содержание:. Web -страница.

gail-lane
Télécharger la présentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. HTML Язык гипертекстовой разметки страниц

  2. Структура HTML документа Заголовок Абзац Атрибуты тегов Inline-описание (style) Атрибуты тега body Фиксированный текст Вставка рисунка Линии Списки Ссылки Таблицы Фреймы Содержание:

  3. Web-страница Web-страница – это документ в формате HTML, содержащий текст и специальные инструкции – дескрипторы (тэги) HTML. Документы HTML хранятся в файле с расширением .html, или .htm (например, index.html)

  4. Дескрипторы HTML Дескрипторы HTML сообщают Web-броузеру информацию о структуре и особенностях форматирования web-страницы. Каждый дескриптор содержит определенную инструкцию и заключен в уголковые скобки (< и >) Многие дескрипторы обладают атрибутами, позволяющие указывать значения параметров

  5. Структура HTML документа <html><head> Служебная информация </head> <body> тело документа </body> </html>

  6. Создание текста Текст написанный между тегами отображается на экране <html><head><title>Цветы и фрукты</title> </head> <body>Фрукты и цветы. У вас нет собственного сада? Не беда! Наши специальные патентованные удобрения позволяют выращивать роскошные и пышущие здоровьем фрукты прямо ДОМА! Вырастите чудесные экзотические цветы и подарите своим друзьям </body> </html>

  7. Отображение в окне броузера Фрукты и цветы. У вас нет собственного сада? Не беда! Наши специальные патентованные удобрения позволяют выращивать роскошные и пышущие здоровьем фрукты прямо ДОМА! Вырастите чудесные экзотические цветы и подарите своим друзьям

  8. Создание заголовков Заголовки создаются тегом <h>. Используется 6 уровней заголовков от <h1> до <h6> Например: <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6> Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6

  9. Абзац Абзац создается тегом <p> Например: <p>Текст абзаца</p>

  10. Форматирование текста <body><h1>Фрукты и цветы</h1><p>У вас нет собственного сада? Не беда! Наши специальные патентованные удобрения позволяют выращивать роскошные и пышущие здоровьем фрукты прямо ДОМА!</p><p> Вырастите чудесные экзотические цветы и подарите своим друзьям</p></body>

  11. Фрукты и цветыУ вас нет собственного сада? Не беда! Наши специальные патентованные удобрения позволяют выращивать роскошные и пышущие здоровьем фрукты прямо ДОМА! Вырастите чудесные экзотические цветы и подарите своим друзьям

  12. Атрибуты тегов <Имя тегаатрибут1=значение1 атрибут2=значение2> Текст </ имя тэга> Например: <palign="center">Текст</p>

  13. Атрибут style Устанавливает стиль написания текста <a style="параметры">текст<p> Style="параметр1:значение1; параметр2:значение2;…"

  14. Основные параметры шрифта font-weight: [bold|normal|number] - жирность шрифта font-style: [normal|italic|oblique] - наклон шрифта font-size: number - размер шрифта font-family: name - гарнитура шрифта color: number - цвет шрифта background-color: number - цвет подложки background: url - текстурная подложка

  15. Например: <p style="font-weight:bold;font-style:italic; font-size:72;font-family:arial;color:red;"> текст абзаца </p>

  16. текст абзаца

  17. Основные параметры абзаца • text-align: [left|right|center|justify] – выравнивание • text-indent: number - отступ красной строки • line-height: number – интерлиньяж(межстрочный интервал) • letter-spacing: number – трекинг (межбуквенный интервал)

  18. Основные параметры абзаца (отступы от текста) • padding-left: number - отступ от текста слева • padding-right: number - отступ от текста справа • padding-top: number - отступ от текста сверху • padding-bottom: number - отступ от текста снизу

  19. Основные параметры абзаца (отступы от границ) • margin-left: number - отступ от границы слева • margin-right: number - отступ от границы справа • margin-top: number - отступ от границы сверху • margin-bottom: number - отступ от границы снизу

  20. Атрибуты тега <body> • Text– цвет текста • Bgcolor – цвет фона • Background=url – фоновый рисунок • Например: • <bodytext=#338833 bgcolor =#112233> • Текст страницы(относится ко всей странице) • </body>

  21. Отступы на странице • LEFTMARGIN=0 – отступ слева • TOPMARGIN=0 – отступ сверху • MARGINWIDTH=0 – ширина поля (левого и правого) • MARGINHEIGHT=0 – ширина поля (верхнего и нижнего)

  22. Начертание шрифтов <b>Полужирный текст</b><i>курсив</i><u>Подчеркнутый текст</u><tt>Пропорциональный</tt>

  23. Фиксированный текст <pre> текст </pre> Текст, записанный в тэге pre выводится с точностью до пробела. Его можно использовать для написания стихотворений

  24. Вставка рисунка • <imgsrc="my.jpg"> • <imgsrc="my/my.jpg"> • <imgsrc="../my.jpg"> • <imgsrc="http://www.homepage.ru/my/my.jpg">

  25. Атрибуты тэга <img> Горизонтальное выравнивание • <imgsrc="pr1.png"align="left"> Вертикальное выравнивание • <imgsrc="pr.png"align="bottom"> • <imgsrc="pr.png" align="middle"> • <imgsrc="pr.png" align="top">

  26. Другие атрибуты тэга IMG • <img src="pr.png" Vspace="10"> • <img src="pr.png" Hspace="30"> • <img src="pr.png" alt="фото"> • <img src="pr.png" width="100"> • <img src="pr.png" height="200"> • <img src="pr1.png" border="5">

  27. Выравнивание рисунка <p><imp src="cat.gif"align="top">текст расположен сверху</p> <p><imp src="cat.gif"align="middle">текст расположен посередине</p> <p><imp src="cat.gif"align="bottom">текст расположен снизу</p>

  28. Расположение текста Текст расположен сверху Текст расположен посередине Текст расположен снизу

  29. Обтекание рисунка <h1>Зоопарк города Бердичева</h1> <img src=“cat.gif”align=“left”>Зоопарк города Бердичева, за неимением ничего другого, приглашает взглянуть на кота обыкновенного <br clear=“all”> Впрочем мы готовы предложить вам лекцию о диких животных

  30. Пример обтекания рисунка Зоопарк города Бердичева Зоопарк города Бердичева, за неимением ничего другого, приглашает взглянуть на кота обыкновенного Впрочем мы готовы предложить вам лекцию о диких животных

  31. Линии <hr> • <Hr align="right"> (center или left) • <Hr width="30%"> (ширина линии в процентах/пикселях) • <Hr size="6"> (толщина линии) • <Hr NoShade> (отмена объемности) • <Hr color=“#cc0000"> (цвет линии, только в IE)

  32. Маркированный список <!-- disc, circle, square --> <ul type="disc"> <li>роза</li> <li>мимоза</li> <li>мак</li> <li>василек</li> </ul> • Результат • роза • мимоза • мак • василек

  33. Нумерованный список <!-- start= " number" type=“1|A|a|I|i“--> <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ol> • Результат • Первый • Второй • Третий

  34. Графические маркеры <ul> <br><img src=“1.jpg”> <li>Первый</li> <br><img src=“1.jpg”> <li>Второй</li> <br><img src=“1.jpg”> <li>Третий</li> </ul> • Результат • Первый • Второй • Третий

  35. Ссылки Главный документ web-узла должен иметь имя index.html. Остальные могут именоваться как угодно, например, index1.html, … Ссылкой может являться текст или картинка

  36. Формат ссылки и цвет <a href=“ссылка”>текстссылки</a> Атрибуты тэга body link – цвет ссылки alink – цвет активной ссылки vlink – цвет посещенной ссылки <body link=#336633 vlink=#336699 alink=#996633>

  37. Текстовые ссылки <a href=“ссылка”>текстссылки</a> • <a href=“i1.html">новости</a> • <a href=“image/f1.jpg">фото</a> • <a href="http://www.hp.ru/ list.html">комментарий </a> Ссылка на стр. новостей i1.html новостифотокомментарий

  38. Графическая ссылка <a href=“index1.html”> <img src=“cat.gif”></a> Рисунок является ссылкой на страницу index1.html

  39. Ссылка на часть картинки Навигационные карты задаются тэгом Map. Тэг Map включает себя тэг(и) Area, которые определяют геометрические области внутри карты (в нашем примере это будут прямоугольники, окружности, области) и ссылки, связанные с каждой областью

  40. Навигационная карта 1 Сделать область №1 рисунка (240Х140) навигационной ссылкой на документ index1.html В нашем примере у прямоугольника №1 координаты: x1=25, y1=36, x2=114, y2=98

  41. Прямоугольная область <img src="bluerects.gif“ usemap="#karta1">... Куча текста и всякого содержания, или ничего...<map name="karta1"><area href="index1.html" shape="rect" coords="25,36,114,98"></map>

  42. Навигационная карта 2 Сделать область №1 рисунка (240Х140) навигационной ссылкой на документ index2.html В нашем примере у окружности №1 координаты: x=46, y=48, r=35

  43. Круговая область <img src="mapcircle.gif" usemap="#karta2">... Куча текста и всякого содержания, или ничего...<map name="karta2"><area href="index2.html" shape="circle" coords="46,48,35" alt="маленькийкруг"></map>

  44. Навигационная карта 3 Координаты пишутся по следующему принципу: <area shape="poly"coords="x1,y1,x2,y2,...,xN,yN">

  45. Многоугольная область <img src="mappoly.gif" usemap="#karta3">... Куча текста и всякого содержания, или ничего...<map name="karta3"><area href="index3.html" shape="poly" coords="168,9,232,29,200,97,223,129, 153,119"></map> (возможно одновременное использование разных областей)

  46. Ссылка на e-mail <a href="mailto:имя@сервер">текст ссылки</a> <a href="mailto:_nick_@e-mail.ru"> _nick_@e-mail.ru</a> Ссылка на «почтовый ящик» Результат _nick_@e-mail.ru

  47. Опции mailto • ?subject=Тема пиcьма • &Body=Текст вашего сообщения- &cc=copy@mail.ru,copy2@mail.ru • (копии письма через запятую)- &bcc=hidden_copy@mail.ru, • hidden_copy2@mail.ru • (скрытые копии письма через запятую)

  48. Получение бланка e-mail <a href="mailto:pochta@mail.ru ?subject=Hello&Body=text &cc=copy@mail.ru&bcc=hidden_copy@mail.ru"> pochta@mail.ru </a> При нажатии на ссылку почтовая программа выдаст бланк с заполненным адресом

  49. Бланк. Что это такое?

  50. Внутренние ссылки Чтобы сделать ссылку внутри документа создают закладку (якорь) опцией name,или id, задающей уникальное имя закладки <A name="stih1">текст закладки</A> Часть текста делают ссылкой на имя закладки <A href="#stih1">текст ссылки</A>

More Related