Пояснительная записка к презентации
Предварительный просмотр презентации
HTML (Hyper Text Markup Language ) – язык разметки гипертекста
Web-сайты и Web-страницы Публикации во Всемирной паутине реализуются в форме Web–сайтов. Web–сайт по своей структуре напоминает журнал и состоит из web-страниц.
Создание Web-сайтов Создание реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web–страницу — файл с расширением .htm или .html.
Форматирование текста Вид Web–страницы задается тегами, которые заключаются в угловые скобки. Теги могут быть парными, обязательно наличие открывающего и закрывающего тэгов (контейнер). Закрывающий содержит прямой слэш (/) перед обозначением.
Основные теги HTML HTML-код страницы помещается внутрь контейнера <HTML></HTML>. Web–страница разделяется на две логические части: заголовок и содержание. Заголовок заключается в контейнер <HEAD></HEAD> и содержит справочную информацию о странице, название документа.
Основные теги HTML <HEAD> <TITLE>9 класс</TITLE> </HEAD> Название Web–страницы содержится в контейнере <TITLE></ TITLE> и отображается в строке заголовка браузера.
Основные теги HTML Основное содержание страницы помещается в контейнер <BODY></BODY> и может содержать текст, графические изображения, таблицы, звуковые файлы… <BODY> Давайте знакомиться </BODY>
Шаблон <html> <head> <title>Моя страничка</title> </head> <body> Содержание страницы </body> </html>
Форматирование текста С помощью HTML-тэгов можно задать различные параметры форматирования текста. Размер шрифта заголовка задается тэгами от <H1> (самый крупный) до <H6> (самый мелкий). Заголовок принято размещать по центру страницы(в данном случае – окна браузера). Сделать позволяет атрибут ALIGN тэга заголовка: <H1 ALIGN = center> - по центру <H1 ALIGN = right> - по правой границе <H1 ALIGN = left> - по левой границе
Меняет цвет тэг задающего шрифт с атрибутом цвета: Меняет цвет тэг задающего шрифт с атрибутом цвета: <FONT COLOR = “blue”> <FONT COLOR = “#FF0000”> Заголовок от остального содержания страницы отделяется горизонтальной линией с помощью тэга <HR> Пример 2
Атрибут SIZE тэга <FONT> задает размер шрифта, ему присваивается значение от 1 до 7. С помощью знаков «+» или «-» можно управлять изменением шрифта Атрибут SIZE тэга <FONT> задает размер шрифта, ему присваивается значение от 1 до 7. С помощью знаков «+» или «-» можно управлять изменением шрифта Для задания типа шрифта используют атрибут FACE=. Следует сказать, что в основном применяют Times New Roman и Arial.
Атрибуты тэга <BODY> Атрибуты тэга <BODY> Фоновое изображение задается с помощью атрибута BACKGROUND <BODY BACKGROUND=“ИМЯ ФАЙЛА” > Цвет фона Web-страницы задается атрибутом BGCOLOR <BODY BGCOLOR=“RED”> Цвет текста задает атрибут TEXT <BODY TEXT=“BLUE ”>
Шаблон 2 <html> <head> <title>9 класс</title> </head> <body> <h1 align = center> <font color = “blue”> Давайте знакомиться </font> </h1> <hr> </body> </html> <html> <head> <title>9 класс</title> </head> <body> Давайте знакомиться </body> </html>
Стили Тэг Пример BOLD <B> полужирный ITALIC <I> курсив UNDERLINE <U> подчеркнутый TYPEWRTER <TT> пишущая машинка STRIKETHROUGH <S> вычеркнутый DECREASE FONT SIZE <SMALL> маленький INCREASE FONT SIZE <BIG> большой BLINK <BLINK> мерцающий
Размещение графики Первая или титульная страница является «визитной карточкой» сайта. Страница может содержать не только текст, но и графическую информацию (разнообразные рисунки, схемы и т.д.), а также звуковую информацию.
В Web-сайтах могут использоваться три графических формата В Web-сайтах могут использоваться три графических формата GIF JPG PNG Для вставки изображения используется тэг <IMG> с атрибутом SRC = “имя файла”
Тэг <IMG> имеет ещё один атрибут ALT, значением которого является текст. Тэг <IMG> имеет ещё один атрибут ALT, значением которого является текст. Расположить текст различным образом относительно рисунка позволяет атрибут ALIGN тэга <IMG>. TOP (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева), RIGHT(справа) <IMG SRC=“Имя файла” ALT=“текст” ALIGN= “right”> Пример 3
<html> <html> <head> <title>Моя страничка</title> </head> <body> <h1 align = center> <font color = “blue”> Лена </font> </h1> <hr> <img src=“.gif” alt=“” align= “top”> <font color = “blue”> </body> </html>
Гиперссылки на Web-страницах Титульная страница содержит следующий HTML-код: <html> <head> <title>Моя страничка</title> </head> <body> <h1 align=center> <font color=‘blue’>Лена <p><h2>Моя первая страничка </font></h1> <hr> <ul type=disk> <h3 align=left> <li>Обо мне. <li>Мой город. <li>Моя школа. <li>Мои друзья</ul> </body> </html>
Гиперссылка на Web–странице существует в форме выделенного объекта, щелчок по которому обеспечивает переход на другую Web-страницу. Гиперссылка на Web–странице существует в форме выделенного объекта, щелчок по которому обеспечивает переход на другую Web-страницу. Панель навигации – размещение гиперссылок. Она может представлять собой абзац, выровненный по центру. Абзацы помещаются в контейнер <P></P>   - пробел
Для каждой гиперссылки адрес перехода определяет контейнер <A></A> с атрибутом HREF(значение URL-адрес). Для каждой гиперссылки адрес перехода определяет контейнер <A></A> с атрибутом HREF(значение URL-адрес). Контейнер должен также содержать текст гиперссылки: <A HREF=“URL”>Текст гиперссылки </A> Например: <li><A HREF=“A1.htm”>Обо мне.</A>
<html> <head> <title>Моя страничка</title> </head> <body> <h1 align=center> <font color=‘blue’>Лена <p><h2>Моя первая страничка </font></h1> <hr> <ul type=disk> <h3 align=left> <li>Обо мне. <li>Мой город. <li>Моя школа. <li>Мои друзья</ul> </body> </html> <li><A HREF=“A1.htm”>Обо мне.</A> <li><A HREF=“A2.htm”>Мой город.</A> <li><A HREF=“A3.htm”>Моя школа.</A> <li><A HREF=“A4.htm”>Мои друзья.</A></ul> <body bgcolor=green> <body background=“1.jpg”>
<html> <html> <head> <title>Обо мне</title> </head> <body> <h1 align=center> <font color=‘blue’>Лена <p><h2>Обо мне </font></h1> <hr>Рассказ о себе </body> </html> <img src=“1.jpg”> </body> </html> <img src=“1.jpg” alt=“текст”>
Ссылка на адрес электронной почты Необходимо атрибуту HREF присвоить URL-адрес электронной почты и добавить контейнер <ADRESS></ADRESS> <ADRESS> <A HREF=“адрес”> Текст</A> </ADRESS> Пример 6
Списки на Web-страницах Ненумерованный список Список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc”, “square”, “circle”
Нумерованный список Список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры, римские цифры, буквы
Список определений Для списка определений используется контейнер <DL></DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DT> и определения, которое следует за тэгом <DD>.
Создание таблиц Для создания таблицы используется <table></table> Атрибуты: Align – расположение таблицы Width – ширина таблицы Border – ширина внешней рамки Заголовок таблицы <caption></ caption >
Строка таблицы задается <TR></TR> Строка таблицы задается <TR></TR> Атрибуты: align – выравнивание текста в ячейках строки valign – вертикальное выравнивание (top (верхний край), middle (центр), bottom (нижний край))
Для разделения строк на колонки используется <TD></TD> Для разделения строк на колонки используется <TD></TD> Атрибуты: nowrap – текст в одну строку colspan – размах ячейки по горизонтали rowspan – размах по вертикали valign - вертикальное выравнивание width – ширина ячеек height – высота ячеек
<BODY> <BODY> <TABLE BORDER=1> <CAPTION> У таблицы может быть заголовок </CAPTION> <TR> <TD> Первая строка, первая колонка </TD> <TD> Первая строка, вторая колонка </TD> </TR> </TABLE> </BODY>
Дополнительные атрибуты Background - Фоновый рисунок Bgcolor – Цвет фона таблицы Bordercolor – Цвет рамки
Карты-изображения Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок.
Чтобы преобразовать изображение в карту , в тэг <IMG> добавляется параметр USEMAP, значением которого является ссылка на имя карты. Например: <IMG src="friends.jpg" alt="Это мои друзья" usemap="#friends" > Для описания областей карты изображения используется тэг <MAP>, единственным параметром которого является NAME. <MAP name="friends"> </MAP>
Внутри контейнера <MAP> </MAP> помещаются тэги <AREA> с описанием областей изображения. Атрибуты <AREA> SHAPE – форма области (RECT, CIRCLE) COORDS – координаты области HREF – гиперссылка ALT – альтернативный текст <area shape="rect" coords="0,30,50,120" alt="Сергей">
Титульная страница
Страница Обо мне
Страница Мои друзья
0
Комментарии
Дедушка ГуРу