|
Гіпермаркет Знань>>Інформатика >>Інформатика 8 клас>> Інформатика:Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали.
Презентація до предмету Інформатика 8 клас.
Тема «Язык разметки гипертекста».
ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА
Часть1. Структура и параметры html-документа. Форматирование текста. Графика на Web-страницах. Ссылки. Маркеры.
HTML-теги
HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере.
Теги могут быть написаны заглавными и строчными буквами. Наиболее мудро в тегах использовать заглавные буквы, чтобы они выделялись в тексте.
<TAG>...</TAG>�
Теги, в основном, используются попарно. Открывающий тег включает, закрывающий тег выключает.
<TAG ATTRIBUTE>...</TAG>�
Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. Тег говорит браузеру ЧТО делать, а атрибут говорит КАК это делать.
<TAG ATTRIBUTE="...">...</TAG>
Всегда обращайте внимание на порядок �расположения тегов:
Верно:
<A><B></B></A>
Неверно:
<A><B></A></B>
Структура HTML-документа
<HTML>
<HEAD>
<TITLE>простое название</TITLE>
</HEAD>
<BODY>
содержание страницы
</BODY>
</HTML>
карт
Параметры документа
Параметры документа задаются через тег <BODY>.
Параметры – это специальные символьные команды, которые «понимает» браузер.
Атрибуты тега BODY
bgcolor цвет фона задан по схеме RGB (Красный Зеленый Синий), �6-разрядное шестнадцатеричное число (#RRGGBB) или имя цвета (например red - Красный, green - Зеленый, blue - Синий)
background фон - графический файл
text цвет текста
link цвет ссылки
alink цвет активной ссылки
vlink цвет посещенной ссылки
Параметры документа: пример
<HTML>
<HEAD>
<TITLE>Заглавие документа</TITLE>
</HEAD>
<body bgcolor="#fee8e0" text="black" link="#0000ff" alink="#ff0000" vlink="#000080">
Это наш пример!!!
</body>
</HTML>
Индексирование документы
HTML-документы могут содержать набор ключевых слов и других вспомогательных параметров, такие как заглавие, описание сайта, авторство для индексирования и лучшего нахождения поисковыми системами страницы. �Эти параметры обозначены в META-тегах.
Атрибуты тега META
description описание документа
keywords ключевые слова, разделенные запятыми
Кодировка страницы
Для здания кодировки используется тег META, �стоящий в теге HEAD. �Атрибуты тега для задания кодировок:
http-equiv content кодировка
Content-Type text/html; charset=windows-1251 Кириллица Windows
Content-Type text/html; charset=KOI8-R Кириллица KOI8-R
Content-Type text/html; charset=iso-8859-5 Кириллица ISO
другие кодировки...
<HTML>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<META NAME="DESCRIPTION" CONTENT="Домашняя страница Васи Пупкина">
<META NАМЕ="keywords" CONTENT="Пупкин, дизайн, htm, html">
<TITLE>Заглавие документа</TITLE>
</HEAD>
<BODY>
Вася
<br>
Содержание документа: автоматически отображается на Кириллице!
</BODY>
</HTML>
Заголовки
В HTML существуют специальные теги для заголовков: �от Н1 (самого крупного) до Н6 (самого мелкого):
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
<H1> Заголовок 1</H1>
<H2> Заголовок 2</H2>
<H3> Заголовок 3</H3>
<H4> Заголовок 4</H4>
<H5> Заголовок 5</H5>
<H6> Заголовок 6</H6>
</BODY>
</HTML>
Стили текста
<B> Bold жирный
<I> Italic наклонный
<U> Underline подчеркнутый
<S> Strikethrough зачеркнутый
<HTML>
<BODY>
<B> Bold</B> <br>
<I> Italic </I><br>
<U> Underline </U><br>
<S> Strikethrough </S><br>
<B><I> Bold & Italic </I></B>
</BODY>
</HTML
Шрифт
Атрибуты тега FONT
Face имена шрифтов, разделенные запятыми
Size размер от 1 до 7 (по умолчанию 3)
Color цвет шрифта
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
<FONT FACE="Arial Cyr, Helvetica" SIZE="4" COLOR="green">
Цвет, размер и шрифт выбраны.</FONT>
</BODY>
</HTML>
Предварительное форматирование
Неразрывный пробел – (non-breaking space). �Перенос строки – <br> �Размещение текста в том виде, в котором он представлен – �<PRE>... </PRE>
Пример:
<HTML>
<BODY>
<PRE>
Предварительное форматирование текста
// * //
</PRE> <br>
Mitsubishi Galant <br>
Mitsubishi Galant.
<P> Начало нового абзаца!
</P>
</BODY>
</HTML>
Верхние и нижние индексы
Верхний индекс - тег SUP, а нижний - SUB. ��<HTML>
<BODY>
X<SUP>3</SUP>
<br>
A<SUB>3</SUB>
</BODY>
</HTML>
Выравнивание
Тег нового абзаца <P>
Атрибут тега <P>
ALIGN ВЫРАВНИВАНИЕ
left по левой границе
center по центру
right по правой границе
justify по ширине
<HTML>
<BODY>
<p align=center>Значение CENTER - центрирование</p>
<p align=right>Значение RIGHT - выравнивание по правому краю.</p>
<p align=left>Значение LEFT - выравнивание по левому краю</p>
</BODY>
</HTML>
Графика на Web-страницах
На Web-страницах возможно размещать графическую информацию.
Желаемым условием графики в сети является небольшой размер файлов, наиболее часто реализуется в форматах GIF и JPEG.
Формат Диапазон цветов Прозрачность Анимация
GIF от 2 до 256 Да Да
JPEG 16 милионов или 256 оттенков (Grayscale) Нет Нет
Для публикаций изображений используется тег IMG:
Атрибуты тега IMG
SRC имя графического файла и путь до него
WIDTH ширина изображения в пикселах
HEIGHT высота изображения в пикселах
BORDER ширина рамки вокруг изображения в пиксели
ALT альтернативный текст изображения
ALIGN расположение на экране: Left - слева, Right – справа
<HTML>
<BODY>
<IMG SRC= "image/1.gif" WIDTH="155" HEIGHT="155" BORDER="2" ALT="Бабочка" align="right">
</BODY>
</HTML>
Графика на Web-страницах: пример
карт
<IMG SRC=ie.gif ALIGN="RIGHT" BORDER=1 �ALT=“Веселая картинка">
Картинку можно разместить справа от текста...
карт
<img src=ie.gif align="LEFT">
<img src=ie2.gif align="RIGHT">
Атрибут ALIGN дает возможность разместить текст на Web-странице между двумя изображениями...
карт
карт
<IMG SRC=PALMA.JPG ALIGN="LEFT"
HSPACE=30 VSPACE=30>
Ссылки служат для перехода с одной страницы на другую, перенаправление по протоколам ссылок и прочее.
Реализуются с помощью тега A.
Атрибуты тега A
href Имя и путь к странице
Интернет-адрес с именем протокола: http://�Ссылка отправления письма на e-mail: mailto:�Переход на ссылку внутри документа #
target имя окна, в которое отправит ссылка:�_blank - открывает ссылку в новом окно браузера�_top - окно стоящее поверх остальных�_parent - открывает ссылку в родительском окне (по умолчанию)
name имя ссылки в документе
Ссылки на Web-страницах
Ссылка в пределах одного сайта: <A HREF=menu/1.htm>Заходите в гости!</А>�
Ссылка на ресурс Интернет: <A HREF=http://gimn6.krsk.info target="_blank">Ссылка на сайт гимназии 6 </А>�
Ссылка на ресурс Интернет:
<A HREF= http://www.mysite.ru/html/example.html>�Текст является ссылкой на документ example.html на сайте www.mysite.ru в папке HTML</A>�
Ссылка на адрес электронной почты: <A HREF="mailto:vlata@hotbox.ru"> Присылайте письма!</A>�
Ссылка на метку внутри данного документа: <A HREF="#mesto">Переход по метке</A> – �переход к строке этого же документа, помеченной �<A NAME="mesto">�
Картинка-ссылка <A HREF=example.html><img src=example.gif width=100 height=100 border=0></A>
<A HREF=example2.gif><img src=example.gif width=100 height=100 border=0></A>�
Ссылка на произвольный файл: <A HREF= "MyFile.exe" Title=“Файл в 10 Мегабайт">Скачать программу</А>�
Абсолютные ссылки: <A HREF= http://www.mysite.ru/html/example.html> �Текст является ссылкой на документ example.html на сайте www.mysite.ru в папке HTML�</A>
Относительные ссылки:
<A HREF=/html/example.html>�Ссылка на файл example.html лежащий в папке HTML сайта�</A>
Относительные ссылки:
<A HREF=../example.html>�<img src=images/example.gif width=100 height=100 border=0>�</A>
Списки на Web-страницах
карт
карт
карт
карт
Список с несколькими �уровнями вложенности:
<OL>
<LI>форматирование текста</LI>
<UL>
<LI>жирность; </LI>
<LI>наклон; </LI>
<LI>цвет </LI>
</UL>
<LI>работа с абзацами </LI>
</OL>
Списки с графическими маркерами
Картинки для маркеров должны быть небольшого размера, соответствовать форматированию текста. Образцы маркеров можно найти на сайтах: �www.grapholina.com/Grafics и www.theshockzone.com
карт
Для указания способа вертикального выравнивания текста относительно границ маркеров можно воспользоваться атрибутом ALIGN (top, middle, bottom) тега IMG:
<BR><img src="spisok.gif" align="middle">Раз�
Атрибут HSPACE тега IMG позволит отделить картинку маркера от текста:
<BR><img src="spisok.gif" HSPACE="10">Раз
Перейти до презентації можна клікнувши на текст "Презентація" і встановивши Microsoft PowerPoint
Надіслано вчителем інформатики Ісуповим С. Л.
Інформатика для 8 класу, підручники та книги з інформатики скачати, бібліотека онлайн
Предмети > Інформатика > Інформатика 8 клас > Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали > Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали. Презентація уроку
|
