|
|
| (2 промежуточные версии не показаны) |
| Строка 1: |
Строка 1: |
| - | <metakeywords>Гіпермаркет Знань - перший в світі!, Гіпермаркет Знань, Інформатика 8 клас, Інформатика, клас, урок, на Тему, Служба WWW, Гіпертекстові документи, гіперпосилання, Веб-сторінки, веб-сайти, веб-портали, презентація уроку</metakeywords> | + | <metakeywords>Гіпермаркет Знань - перший в світі!, Гіпермаркет Знань, Інформатика 8 клас, Інформатика, клас, урок, на Тему, Служба WWW, Гіпертекстові документи, гіперпосилання, Веб-сторінки, веб-сайти, веб-портали, презентація уроку</metakeywords> |
| | | | |
| - | '''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика ]]>>[[Інформатика 8 клас|Інформатика 8 клас]]>> Інформатика:Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали.''' | + | '''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика ]]>>[[Інформатика 8 клас|Інформатика 8 клас]]>> Інформатика:Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали.''' |
| | | | |
| - | Презентація до предмету '''[[Інформатика 8 клас|Інформатика 8 клас]]'''. | + | Презентація до предмету '''[[Інформатика 8 клас|Інформатика 8 клас]]'''. |
| | | | |
| - | Тема '''«[[Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали.|Язык разметки гипертекста]]»'''. | + | Тема '''«[[Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали.|Язык разметки гипертекста]]»'''. |
| | | | |
| - | ТУТ БУДЕ ТЕКСТ
| + | <br> |
| | | | |
| - | <br>'''Перейти до презентації можна клікнувши на текст "[http://school.xvatit.com/Presentation/Kuratory/Isupov/2_prezent_8kl_t11_inf_1.ppt Презентація]" і встановивши Microsoft PowerPoint '''<br>
| + | <br> |
| - | <br> | + | |
| | | | |
| - | Надіслано вчителем інформатики Ісуповим С. Л.
| + | ''' ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА'''<br><br>'''Часть1.''' Структура и параметры html-документа. Форматирование текста. Графика на Web-страницах. Ссылки. Маркеры.<br><br>''' HTML-теги'''<br><br>HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере.<br>Теги могут быть написаны заглавными и строчными буквами. Наиболее мудро в тегах использовать заглавные буквы, чтобы они выделялись в тексте. <br>'''<TAG>...</TAG>''' |
| | | | |
| - | <sub>Інформатика для 8 класу, підручники та книги з інформатики [[Інформатика|скачати]], бібліотека [[Гіпермаркет Знань - перший в світі!|онлайн]] </sub> | + | <br>Теги, в основном, используются попарно. Открывающий тег включает, закрывающий тег выключает. <br>'''<TAG ATTRIBUTE>...</TAG>''' |
| | | | |
| | + | <br>Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. Тег говорит браузеру ЧТО делать, а атрибут говорит КАК это делать. <br>'''<TAG ATTRIBUTE="...">...</TAG>'''<br><br>Всегда обращайте внимание на порядок расположения тегов: <br><br>Верно: <br>'''<A><B></B></A>'''<br><br>Неверно: <br>'''<A><B></A></B>'''<br><br>''' Структура HTML-документа'''<br><br><HTML><br><HEAD><br><TITLE>простое название</TITLE><br></HEAD><br><BODY><br>содержание страницы<br></BODY><br></HTML><br><br>[[Image:29.06-6.jpg|503x378px]]<br><br>''' Параметры документа''' |
| | | | |
| | + | <br> |
| | | | |
| - | [[категория: Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали. Презентація уроку]] | + | Параметры документа задаются через тег <BODY>. <br>Параметры – это специальные символьные команды, которые «понимает» браузер. |
| | + | |
| | + | <br> |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 592px; height: 139px;" |
| | + | |- |
| | + | | colspan="2" | Атрибуты тега BODY <br> |
| | + | |- |
| | + | | bgcolor |
| | + | | цвет фона задан по схеме RGB (Красный Зеленый Синий), 6-разрядное шестнадцатеричное число (#RRGGBB) или имя цвета (например red - Красный, green - Зеленый, blue - Синий) |
| | + | |- |
| | + | | background |
| | + | | фон - графический файл |
| | + | |- |
| | + | | text |
| | + | | цвет текста |
| | + | |- |
| | + | | link <br> |
| | + | | цвет ссылки |
| | + | |- |
| | + | | alink |
| | + | | цвет активной ссылки |
| | + | |- |
| | + | | vlink |
| | + | | цвет посещенной ссылки |
| | + | |} |
| | + | |
| | + | <br>''' Параметры документа: пример'''<br><br><HTML><br><HEAD><br><TITLE>Заглавие документа</TITLE><br></HEAD><br><body bgcolor="#fee8e0" text="black" link="#0000ff" alink="#ff0000" vlink="#000080"><br>Это наш пример!!!<br></body><br></HTML> <br><br>''' Индексирование документы'''<br><br>HTML-документы могут содержать набор ключевых слов и других вспомогательных параметров, такие как заглавие, описание сайта, авторство для индексирования и лучшего нахождения поисковыми системами страницы. Эти параметры обозначены в META-тегах. |
| | + | |
| | + | <br> |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 382px; height: 61px;" |
| | + | |- |
| | + | | colspan="2" | Атрибуты тега META |
| | + | |- |
| | + | | description |
| | + | | описание документа |
| | + | |- |
| | + | | keywords <br> |
| | + | | ключевые слова, разделенные запятыми |
| | + | |} |
| | + | |
| | + | <br>''' Кодировка страницы'''<br><br>Для здания кодировки используется тег META, |
| | + | |
| | + | стоящий в теге HEAD. |
| | + | |
| | + | Атрибуты тега для задания кодировок: |
| | + | |
| | + | <br> |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 602px; height: 100px;" |
| | + | |- |
| | + | | http-equiv <br> |
| | + | | content |
| | + | | кодировка |
| | + | |- |
| | + | | Content-Type <br> |
| | + | | text/html; charset=windows-1251 |
| | + | | Кириллица Windows |
| | + | |- |
| | + | | Content-Type <br> |
| | + | | text/html; charset=KOI8-R |
| | + | | Кириллица KOI8-R |
| | + | |- |
| | + | | Content-Type |
| | + | | text/html; charset=iso-8859-5 |
| | + | | Кириллица ISO |
| | + | |- |
| | + | | colspan="3" | другие кодировки...<br> |
| | + | |} |
| | + | |
| | + | <br><HTML><br><head><br><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"><br><META NAME="DESCRIPTION" CONTENT="Домашняя страница Васи Пупкина"><br><META NАМЕ="keywords" CONTENT="Пупкин, дизайн, htm, html"><br><TITLE>Заглавие документа</TITLE><br></HEAD><br><BODY><br>Вася<br><br><br>Содержание документа: автоматически отображается на Кириллице!<br></BODY><br></HTML><br><br>''' Заголовки'''<br><br>В HTML существуют специальные теги для заголовков: от Н1 (самого крупного) до Н6 (самого мелкого):<br><br><HTML><br><HEAD><br><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"><br></HEAD><br><BODY><br><H1> Заголовок 1</H1><br><H2> Заголовок 2</H2><br><H3> Заголовок 3</H3><br><H4> Заголовок 4</H4><br><H5> Заголовок 5</H5><br><H6> Заголовок 6</H6><br></BODY><br></HTML> <br>'''<br> Стили текста'''<br><br><B> Bold жирный<br><I> Italic наклонный<br><U> Underline подчеркнутый<br><S> Strikethrough зачеркнутый<br><br><br><HTML><br><BODY><br><B> Bold</B> <br><br><I> Italic </I><br><br><U> Underline </U><br><br><S> Strikethrough </S><br><br><B><I> Bold & Italic </I></B><br></BODY><br></HTML<br><br>''' Шрифт''' |
| | + | |
| | + | <br> |
| | + | |
| | + | Шрифт задаётся тегом FONT. <br> |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 411px; height: 81px;" |
| | + | |- |
| | + | | colspan="2" | <br> Атрибуты тега FONT |
| | + | |- |
| | + | | Face <br> |
| | + | | имена шрифтов, разделенные запятыми |
| | + | |- |
| | + | | Size |
| | + | | размер от 1 до 7 (по умолчанию 3) |
| | + | |- |
| | + | | Color |
| | + | | цвет шрифта |
| | + | |} |
| | + | |
| | + | <br><HTML><br><HEAD><br><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"><br></HEAD><br><BODY><br><FONT FACE="Arial Cyr, Helvetica" SIZE="4" COLOR="green"><br>Цвет, размер и шрифт выбраны.</FONT><br></BODY><br></HTML><br><br>''' Предварительное форматирование'''<br><br>Неразрывный пробел – &nbsp; (non-breaking space). |
| | + | |
| | + | Перенос строки – <br> |
| | + | |
| | + | Размещение текста в том виде, в котором он представлен – |
| | + | |
| | + | <PRE>... </PRE><br><br>Пример: <br><HTML><br><BODY><br><PRE><br>Предварительное форматирование текста<br> // * //<br></PRE> <br><br>Mitsubishi Galant <br><br>Mitsubishi Galant. <br><P> Начало нового абзаца!<br></P><br></BODY><br></HTML><br>'''<br> Верхние и нижние индексы'''<br><br>Верхний индекс - тег SUP, а нижний - SUB. |
| | + | |
| | + | <HTML><br><BODY><br>X<SUP>3</SUP><br><br><br>A<SUB>3</SUB><br></BODY><br></HTML> <br>'''<br> Выравнивание'''<br><br>Тег нового абзаца <P> |
| | + | |
| | + | <br> |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 473px; height: 120px;" |
| | + | |- |
| | + | | colspan="2" | Атрибут тега <P> <br> |
| | + | |- |
| | + | | ALIGN |
| | + | | ВЫРАВНИВАНИЕ |
| | + | |- |
| | + | | left <br> |
| | + | | по левой границе |
| | + | |- |
| | + | | center |
| | + | | по центру |
| | + | |- |
| | + | | right |
| | + | | по правой границе |
| | + | |- |
| | + | | justify <br> |
| | + | | по ширине |
| | + | |} |
| | + | |
| | + | <br><HTML><br><BODY><br><p align=center>Значение CENTER - центрирование</p><br><p align=right>Значение RIGHT - выравнивание по правому краю.</p><br><p align=left>Значение LEFT - выравнивание по левому краю</p><br></BODY><br></HTML> <br><br>''' Графика на Web-страницах'''<br><br>На Web-страницах возможно размещать графическую информацию. <br>Желаемым условием графики в сети является небольшой размер файлов, наиболее часто реализуется в форматах GIF и JPEG. |
| | + | |
| | + | <br> |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 556px; height: 61px;" |
| | + | |- |
| | + | | Формат |
| | + | | Диапазон цветов |
| | + | | |
| | + | Прозрачность <br> |
| | + | |
| | + | | Анимация |
| | + | |- |
| | + | | GIF |
| | + | | от 2 до 256 |
| | + | | Да |
| | + | | Да |
| | + | |- |
| | + | | JPEG |
| | + | | 16 милионов или 256 оттенков (Grayscale) |
| | + | | Нет |
| | + | | Нет |
| | + | |} |
| | + | |
| | + | <br> Для публикаций изображений используется тег IMG: |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 578px; height: 139px;" |
| | + | |- |
| | + | | colspan="2" | Атрибуты тега IMG <br> |
| | + | |- |
| | + | | SRC |
| | + | | имя графического файла и путь до него |
| | + | |- |
| | + | | WIDTH <br> |
| | + | | ширина изображения в пикселах |
| | + | |- |
| | + | | HEIGHT |
| | + | | высота изображения в пикселах |
| | + | |- |
| | + | | BORDER |
| | + | | ширина рамки вокруг изображения в пиксели |
| | + | |- |
| | + | | ALT |
| | + | | альтернативный текст изображения |
| | + | |- |
| | + | | ALIGN |
| | + | | расположение на экране: Left - слева, Right – справа |
| | + | |} |
| | + | |
| | + | <br><HTML><br><BODY><br><IMG SRC= "image/1.gif" WIDTH="155" HEIGHT="155" BORDER="2" ALT="Бабочка" align="right"> <br></BODY><br></HTML> <br><br>''' Графика на Web-страницах: пример'''<br><br>[[Image:29.06-7.jpg|440x228px]]<br><br><IMG SRC=ie.gif ALIGN="RIGHT" BORDER=1 |
| | + | |
| | + | ALT=“Веселая картинка"> <br>Картинку можно разместить справа от текста... |
| | + | |
| | + | <br>[[Image:29.06-8.jpg|570x186px]]<br><br><img src=ie.gif align="LEFT"> <br><img src=ie2.gif align="RIGHT"> <br>Атрибут ALIGN дает возможность разместить текст на Web-странице между двумя изображениями...<br><br>[[Image:29.06-9.jpg|571x386px]]<br><br>[[Image:29.06-10.jpg]]<br><br><IMG SRC=PALMA.JPG ALIGN="LEFT" <br>HSPACE=30 VSPACE=30><br><br>Ссылки служат для перехода с одной страницы на другую, перенаправление по протоколам ссылок и прочее. <br>Реализуются с помощью тега A. |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 577px; height: 81px;" |
| | + | |- |
| | + | | colspan="2" | Атрибуты тега A <br> |
| | + | |- |
| | + | | href |
| | + | | |
| | + | Имя и путь к странице |
| | + | |
| | + | Интернет-адрес с именем протокола: http://<br> |
| | + | |
| | + | Ссылка отправления письма на e-mail: mailto:<br> Переход на ссылку внутри документа # |
| | + | |
| | + | |- |
| | + | | target |
| | + | | имя окна, в которое отправит ссылка:<br> |
| | + | _blank - открывает ссылку в новом окно браузера<br> |
| | + | |
| | + | _top - окно стоящее поверх остальных<br> _parent - открывает ссылку в родительском окне (по умолчанию) |
| | + | |
| | + | |- |
| | + | | name |
| | + | | имя ссылки в документе |
| | + | |} |
| | + | |
| | + | <br>''' Ссылки на Web-страницах''' |
| | + | |
| | + | <br> |
| | + | |
| | + | {| cellspacing="1" cellpadding="1" border="1" style="width: 584px; height: 81px;" |
| | + | |- |
| | + | | Ссылка в пределах одного сайта: |
| | + | | <A HREF=menu/1.htm>Заходите в гости!</А> |
| | + | |- |
| | + | | Ссылка на ресурс Интернет: |
| | + | | <A HREF=http://gimn6.krsk.info target="_blank">Ссылка на сайт гимназии 6 </А> |
| | + | |- |
| | + | | Ссылка на ресурс Интернет: |
| | + | | <A HREF= <br> |
| | + | http://www.mysite.ru/html/example.html><br> |
| | + | |
| | + | Текст является ссылкой на документ <br> example.html на сайте www.mysite.ru в папке HTML</A> |
| | + | |
| | + | |- |
| | + | | Ссылка на адрес электронной почты: |
| | + | | <br> <A HREF="mailto:vlata@hotbox.ru"> Присылайте письма!</A> |
| | + | |- |
| | + | | Ссылка на метку внутри данного документа: |
| | + | | <A HREF="#mesto">Переход по метке</A> – <br> |
| | + | переход к строке этого же документа, <br> |
| | + | |
| | + | помеченной <br> |
| | + | |
| | + | <A NAME="mesto"><br> |
| | + | |
| | + | |- |
| | + | | Картинка-ссылка <br> |
| | + | | <A HREF=example.html><img src=example.gif <br> |
| | + | width=100 height=100 border=0></A><br> <A HREF=example2.gif><img src=example.gif <br> width=100 height=100 border=0></A> |
| | + | |
| | + | |- |
| | + | | Ссылка на произвольный файл: <br> |
| | + | | <br> <A HREF= "MyFile.exe" Title=“Файл в 10 Мегабайт">Скачать программу</А> |
| | + | |- |
| | + | | Абсолютные ссылки: |
| | + | | <A HREF= http://www.mysite.ru/html/example.html> <br> |
| | + | Текст является ссылкой на документ example.html <br> |
| | + | |
| | + | на сайте www.mysite.ru в папке HTML<br> </A> |
| | + | |
| | + | |- |
| | + | | Относительные ссылки: |
| | + | | <A HREF=/html/example.html><br> |
| | + | Ссылка на файл example.html лежащий в папке HTML сайта<br> </A> |
| | + | |
| | + | |- |
| | + | | Относительные ссылки: |
| | + | | <A HREF=../example.html><br> |
| | + | <img src=images/example.gif width=100 height=100 border=0><br> </A> |
| | + | |
| | + | |} |
| | + | |
| | + | <br>''' Списки на Web-страницах'''<br><br>[[Image:29.06-11.jpg|629x450px]]<br><br>[[Image:29.06-12.jpg|605x446px]]<br><br>[[Image:29.06-13.jpg|688x463px]]<br><br>[[Image:29.06-14.jpg|601x295px]]<br>'''<br> Списки с графическими маркерами'''<br><br>Картинки для маркеров должны быть небольшого размера, соответствовать форматированию текста. Образцы маркеров можно найти на сайтах: |
| | + | |
| | + | www.grapholina.com/Grafics и www.theshockzone.com <br><br>[[Image:29.06-15.jpg|604x210px]]<br><br>Для указания способа вертикального выравнивания текста относительно границ маркеров можно воспользоваться атрибутом ALIGN (top, middle, bottom) тега IMG: <br>'''<BR><img src="spisok.gif" align="middle">Раз'''<br>Атрибут HSPACE тега IMG позволит отделить картинку маркера от текста:<br>'''<BR><img src="spisok.gif" HSPACE="10">Раз'''<br><br>'''Перейти до презентації можна клікнувши на текст "[http://school.xvatit.com/Presentation/Kuratory/Isupov/2_prezent_8kl_t11_inf_1.ppt Презентація]" і встановивши Microsoft PowerPoint '''<br> <br> |
| | + | |
| | + | Надіслано вчителем інформатики Ісуповим С. Л. |
| | + | |
| | + | <sub>Інформатика для 8 класу, підручники та книги з інформатики [[Інформатика|скачати]], бібліотека [[Гіпермаркет Знань - перший в світі!|онлайн]] </sub> |
| | + | |
| | + | [[Category:Служба_WWW._Гіпертекстові_документи_і_гіперпосилання._Веб-сторінки,_веб-сайти,_веб-портали._Презентація_уроку]] |
Параметры документа задаются через тег <BODY>.
Параметры – это специальные символьные команды, которые «понимает» браузер.
стоящий в теге HEAD.
Шрифт задаётся тегом FONT.
<PRE>... </PRE>
Пример:
<HTML>
<BODY>
<PRE>
Предварительное форматирование текста
// * //
</PRE> <br>
Mitsubishi Galant <br>
Mitsubishi Galant.
<P> Начало нового абзаца!
</P>
</BODY>
</HTML>
Верхние и нижние индексы
Верхний индекс - тег SUP, а нижний - SUB.
Надіслано вчителем інформатики Ісуповим С. Л.