1 / 70

Структура WEB- страницы на языке HTML

Структура WEB- страницы на языке HTML. Введение Оформление текста Гиперссылки Списки Рисунки Таблицы Фреймы Понятие о JavaScript Выполнила: учитель информатики высшей категории Мартынова Нина Михайловна. Web- страницы. Язык HTML. Тема 1. Введение. Что такое Web- страницы?.

penda
Download Presentation

Структура WEB- страницы на языке 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. Структура WEB-страницы на языке HTML • Введение • Оформление текста • Гиперссылки • Списки • Рисунки • Таблицы • Фреймы • Понятие о JavaScript • Выполнила: учитель информатики высшей категории Мартынова Нина Михайловна

  2. Web-страницы.Язык HTML Тема 1. Введение

  3. Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web)– «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница– текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).

  4. Какие бывают Web-страницы? • статические – существуют на сервере в виде готовых файлов:*.htm, *.html • динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных)*.shtml, *.asp, *.pl, *.php • позволяют выбирать информацию из базы данных по заранее неизвестным запросам • дополнительная нагрузка на сервер • загружаются медленнее

  5. ! HTML – это не язык программирования! images sail.jpg sunset.jpg man.jpg bee.wav clock.avi ball.swf Язык HTML HTML = Hypertext Markup Language(язык разметки гипертекста) HTML-страница – это текстовый файл (Блокнот): index.html <HTML> <HEAD> <TITLE>Моя страница</TITLE> </HEAD> <BODY> Привет! … </BODY> </HTML>

  6. Тэги Тэг– это команда языка HTML, которую выполняет браузер: вставить рисунок • непарные тэги • парные тэги (контейнеры) <IMG SRC="vasya.jpg"> открывающий <TABLE> ... </TABLE> область действия тэга: описание таблицы закрывающий

  7. Простейшая Web-страница first.html шапка («голова») <HTML> <HEAD> <TITLE>Моя первая Web-страница</TITLE> </HEAD> <BODY> Привет! </BODY> </HTML> <HEAD> <TITLE>Моя первая Web-страница</TITLE> </HEAD> <BODY> Привет! </BODY> основная часть («тело»)

  8. Редактор HEFS запуск браузера (F9) буфер обмена один экран файловые операции отмена назад вперед браузер (IE) текстовый редактор

  9. #FA8072 Кодирование цвета • имена • red, green, blue, magenta, black, • шестнадцатеричные коды white R G B #FF0000 #FFFFFF #00FFFF #000000 #AAAAAA

  10. Web-страницы.Язык HTML Тема 2. Оформление текста

  11. Тэг BODY – общие свойства страницы • цвет фона и текста • цвет гиперссылок атрибуты тэга цвет текста <BODYTEXT="white"BGCOLOR=#00FF00> Привет! </BODY> цвет фона цвет ссылок <BODYLINK="#FF8C00"VLINK=green> ... </BODY> посещенные ссылки (visited link)

  12. Вставка тэгов в HEFS

  13. Вставка атрибутов в HEFS вставить только код цвета

  14. Тэг FONT – свойства блока текста • цвет текста • размер шрифта Привет! <FONTCOLOR=red> Как дела? </FONT> Привет! <FONTCOLOR=red SIZE=6> Как дела? </FONT> от 1 до 7 (3 – нормальный)

  15. Стили оформления

  16. Форматированный текст (листинги программ) programqq; vara, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. отформатированный текст (preformatted) <PRE> programqq; vara, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. </PRE>

  17. Заголовки: H1 … H6 <BODY> <H1>Заголовок документа</H1> <H2>Заголовок раздела</H2> <H3>Заголовок подраздела</H3> <H4>Заголовок параграфа</H4> <H5>Комментарий</H5> <H6>Авторские пометки</H6> </BODY> left, center, right выравнивание: <H1 ALIGN=center>История</H1>

  18. Форматирование текста в HEFS Ctrl-B

  19. Специальные символы

  20. Специальные символы в HEFS

  21. Абзацы • переход на новую строку • абзац(с отступами) Одно физическое тело захотело поменять три своихстарых варежки на что-нибудь хорошее.<BR>До самого вечера тело с варежками ... <P> Одно физическое тело захотело поменять три своихстарых варежки на что-нибудьхорошее.</P> <P>До самого вечера тело с варежками ... </P>

  22. ! Не используйте выравнивание по ширине для узких столбцов! Выравнивание атрибут тэга <P> <P ALIGN="center">Этот текст выровнен по центру.</P><P ALIGN="justify">Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. </P> left по левой границе rightпо правой границе centerпо центру justifyпо ширине

  23. Абзацы в HEFS

  24. ! Не рекомендуется использовать – лучше заголовки разделов! Линия-разделитель horizontal rule <HR> ширина в пикселях или процентах толщина выравнивание <HR WIDTH="60%" SIZE="3" ALIGN="right">

  25. Web-страницы.Язык HTML Тема 3. Гиперссылки

  26. Цвет гиперссылок <BODYLINK="#FF8C00"VLINK=greenALINK=red> ... </BODY> LINKссылки, на которых не были VLINKпосещенные ссылки ALINKактивные ссылки

  27. Ссылки на другие страницы сайта • страница в той же папке anchor (якорь) <AHREF="table.htm">Таблицы</A> hyper reference (гиперссылка) • страница во вложенной папке <A HREF="example/ex1.htm">Пример</A> • страница в соседней папке <A HREF="../texts/text1.htm">Текст</A> выйти из текущей папки

  28. Примеры(ссылки из файла rock.html) stories novels new old – – – – verse.html sea.html story.html list.html rock.html

  29. Ссылки на другие сайты • на главную страницу сайта <A HREF="http://www.mail.ru">Почта</A> index.htm, index.html, default.asp, … • на конкретнуюстраницу сайта (URL) <A HREF="http://www.vasya.ru/text/a.htm"> Васин текст</A> • на файл для скачивания <A HREF="http://www.vasya.ru/prog.zip"> Скачать</A>

  30. Ссылки внутри страницы переход на метку <A NAME="up"></A> <A HREF="#chap1">Глава 1</A><br> <A HREF="#chap2">Глава 2</A><br> <A NAME="chap1"></A> <H1>Глава 1</H1> Это текст главы 1. Это текст главы 1. Это текст главы 1. Это текст главы 1.<BR> <A HREF="#up">Наверх</A> <A NAME="chap2"></A> <H1>Глава 2</H1> Это текст главы 2. Это текст главы 2. Это текст главы 2. Это текст главы 2.<BR> <A HREF="#up">Наверх</A> метка (якорь) • в другом файле <A HREF="texts.html#color">Цвет текста</A>

  31. Запуск почтовой программы <A HREF="mailto:vasya@mail.ru"> Напишите мне! </A>

  32. ! Автоматически строится относительный адрес! Гиперссылки в HEFS локальная ссылка вставить только адрес файла Ctrl-Aгиперссылка на выделенный блок, адрес вводить вручную

  33. Web-страницы.Язык HTML Тема 4. Списки

  34. Маркированные списки unordered list (неупорядоченный список) listitem (элемент списка) <UL> <LI>Вася <LI>Петя <LI>Коля </UL> изменение маркера: disk  circle○ square ■ <UL TYPE="disk"> ... </UL>

  35. Нумерованные списки ordered list (упорядоченный список) <OL> <LI>Вася <LI>Петя <LI>Коля </OL> изменение нумерации: 1, i, I, a, A <OL TYPE=i START=3> ... </OL>

  36. Списки определений definition list (списокопределений) definition term (термин) <DL> <DT>компьютер <DD>устройство для обработки информации <DT>дискета <DD>гибкий магнитный диск <DT>винчестер <DD>жесткий магнитный диск </DL> definition description (описание)

  37. Многоуровневые списки <UL><LI>Города России     <LI>Города Украины </UL> <OL>  <LI>Москва  <LI>Санкт-Петерург</OL> <OL>  <LI>Киев  <LI>Одесса</OL>

  38. Списки в HEFS Ctrl-L вставить элемент списка <LI>

  39. Web-страницы.Язык HTML Тема 5. Рисунки

  40. Форматы рисунков • GIF (Graphic Interchange Format) • сжатие без потерь • прозрачные области • анимация • только с палитрой (2…256 цветов) • рисунки с четкими границами, мелкие рисунки • JPEG (Joint Photographer Expert Group) • сжатие с потерями • только True Color (16,7 млн. цветов) • нет анимации и прозрачности • рисунки с размытыми границами, фото • PNG (Portable Network Graphic) • сжатие без потерь • с палитрой (PNG-8) и True Color (PNG-24) • прозрачность и полупрозрачность (альфа-канал) • нет анимации • плохо сжимает мелкие рисунки

  41. ! ! Не должно быть "швов"! Фон не должен мешать! Фон страницы <BODY BACKGROUND="back.jpg"> "images/back.jpg" "../images/back.jpg" "http://www.vasya.ru/images/back.jpg"

  42. Рисунки в документе из той же папки: image(изображение) source(источник) <IMGSRC="flag.jpg"> из другой папки: <IMGSRC="images/flag.jpg"> <IMGSRC="../images/flag.jpg"> с другого сервера: <IMGSRC="http://www.vasya.ru/img/flag.jpg">

  43. Выравнивание <IMG SRC="flag.jpg"ALIGN="left"> left right bottom (по умолчанию) top middle

  44. Отступы <IMG SRC="net.jpg" ALIGN="left"HSPACE=10VSPACE=10> <IMG SRC="net.jpg"ALIGN="left"> VSPACE (vertical space) HSPACE (horizontal space)

  45. Другие атрибуты • всплывающая подсказка • надпись на месте рисунка, если его нет <IMG SRC="myphoto.jpg"ALT="Моя фотография"WIDTH=100 HEIGHT=150BORDER=0> • размеры позволяют: • растянуть - сжать • не портить дизайн, если рисунка нет толщина рамки вокруг рисунка

  46. Рисунок-гиперссылка иначе будет синяя рамка вокруг локальная ссылка: <A HREF="table.htm"> <IMG SRC="tbl.jpg" ALT="Таблицы"BORDER=0> </A> если </A>не вплотную к <IMG …>, будет «хвост» ссылка на другой сервер: не будет «хвоста» <A HREF="http://www.mail.ru"> <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0></A>

  47. ! Автоматически вставляются размеры! Рисунки в HEFS вставить рисунок

  48. Web-страницы.Язык HTML Тема 6. Таблицы

  49. Простейшая таблица толщина рамки <TABLE BORDER="1"> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD> </TR> </TABLE> TABLE таблица TR = table row строка таблицы TD = table dataданные таблицы TH = table header заголовок (жирный, по центру)

  50. Размеры высота в пикселях всей таблицы: <TABLE WIDTH="60%" HEIGHT="300"> ... </TABLE> ширина в пикселях или в % от ширины окна браузера строки: <TR HEIGHT="50"> ... </TR> ширина в пикселях или в % от ширины таблицы ячейки: <TD WIDTH="25%"HEIGHT="50"> ... </TD>

More Related