Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Язык гипертекстовой разметки HTML

Содержание

«Каркас» страницы< html >Мой сайтПосмотреть в браузере
HTMLЯзык гипертекстовой разметки для написания кода страниц сайта «Каркас» страницы< html >Мой сайтПосмотреть в браузере Текст в HTML< html >Мой сайтТекст в HTML Посмотреть в браузере Теги , , , Полужирный текст в HTMLНаклонный текст в HTMLТекст1 в Теги заголовковЗаголовок 1 уровняЗаголовок 2 уровня Посмотреть в браузере Ненумерованные списки Элемент списка 1 Элемент списка 2 Посмотреть в браузере Нумерованные списки Элемент списка 1 Элемент списка 2 Посмотреть в браузере Вложение ненумерованных списков Элемент списка 1     Элемент списка Вложение нумерованных списков Элемент списка 1     Элемент списка Сложные списки Элемент списка 1     Элемент списка 1.1 Вставка картинок Посмотреть в браузере Таблицы   1  2 Посмотреть в браузере Таблицы (продолжение 1)   1  2 Посмотреть в браузере Таблицы (продолжение 2)   1     2   Посмотреть в браузере Таблицы в HTML-документах - … ... - определитель ряда таблицы Атрибуты ALIGN=“align” Таблицы в HTML-документах - … … - определитель ячейки таблицы, помещается внутри Таблицы - ПримерRequirements for Netscape Gold Platform, OS PC Requirements Windows 486, Формы - Интерактивный элемент World Wide Web Пример HTML-текста формы    Добавить запись в гостевую книгу Формы….		….		()….		Aтрибуты:	ACTION=”URL”	- URL, по которому передается содержимое формы	METHOD=”GET” or “POST” - способ/метод пересылки - Определитель полей ввода в формахАтрибуты:	TYPE= ”type” 	- ввод строки текста	VALUE=”default_string”	- TYPE - Атрибут типа полей ввода в формахTYPE= ”text” 	- ввод строки - Элементы меню в формах	 Item_1	 Item_2	Атрибуты:	NAME=”var-name” 	- имя переменной, ассоциированное - Ввод нескольких строк текста	Default text to be displayedАтрибуты:	NAME=”var-name” 	- имя - Ввод нескольких строк текста - ПримерComments:			Any comments are highly appreciated. Thank you! Элементы -Флаги-переключатели Text_Item_#…. Text_Item_#ExampleТекст 1 Текст 2: Текст 3: Текст 4 Текст 5 Текст 6 Элементы -Переключатели-”радиокнопки” Text_Item_#… Text_Item_#ExampleТекст 1 Текст 2 : Текст 3: Текст 4 Активные графические образы	Атрибуты	HREF=“http://host/cgi-bin/imagemap/table_or_base	SRC=“directory/image.gif” 	ISMAP - серверный вариант формирования ссылок по координатам	USEMAP - Формат таблицы IMAGE.MAPMETHOD	URL			Coordinates pairs# Image map for image.gifcircle		dir1/capital.html		50,20 50,30rec			dir2/region.html		80,40 120,60poly		dir3/area.html		10,20 10,45 15,55 Активные графические образы клиентского типа USEMAP... Атрибуты	 SHAPE=shape -определяет очертание активной зоны Использование фреймов в HTML-документах			…				 - задание параметров фрейма		...		 - 	# информация, которая Задание параметров фреймов - Атрибуты:ROWS=“m,n,p” - задает параметры деления экрана браузера на Атрибуты фреймов - Атрибуты:NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET Пример -документа с фреймами It's a frame, I tell ya'!Alternative content no-frames browsers. СсылкиСсылка на внешний ресурс Ссылка на файлОбращение к почтовому клиенту (E-mail)Посмотреть в браузере Фон страницыПосмотреть в браузереПосмотреть в браузере Стиль ссылок (цвет и подчеркивание)Посмотреть в браузере Элемент разметки SCRIPTЭлемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или ЗаданиеВ «Блокноте» написать HTML-код простой странички с использованием материалов лекции.Просмотреть страницу в браузере.Спасибо за внимание!
Слайды презентации

Слайд 2 «Каркас» страницы
< html >



Мой

«Каркас» страницы< html >Мой сайтПосмотреть в браузере

сайт






Посмотреть в браузере


Слайд 3 Текст в HTML
< html >


Текст в HTML< html >Мой сайтТекст в HTML Посмотреть в браузере

/>
Мой сайт



Текст в HTML
 




Посмотреть в браузере


Слайд 4 Теги , , ,


Полужирный текст в HTML
Наклонный

Теги , , , Полужирный текст в HTMLНаклонный текст в HTMLТекст1

текст в HTML
Текст1 в HTML

Текст2 в HTML
Посмотреть

в браузере

Слайд 5 Теги заголовков

Заголовок 1 уровня
Заголовок 2 уровня
Посмотреть в

Теги заголовковЗаголовок 1 уровняЗаголовок 2 уровня Посмотреть в браузере

браузере


Слайд 6 Ненумерованные списки

Элемент списка 1
Элемент списка 2

Ненумерованные списки Элемент списка 1 Элемент списка 2 Посмотреть в браузере



Посмотреть в браузере


Слайд 7 Нумерованные списки

Элемент списка 1
Элемент списка 2

Нумерованные списки Элемент списка 1 Элемент списка 2 Посмотреть в браузере



Посмотреть в браузере


Слайд 8 Вложение ненумерованных списков

Элемент списка 1

Вложение ненумерованных списков Элемент списка 1   Элемент списка 1.1

Элемент списка 1.1
Элемент списка

1.2


  • Элемент списка 2


  • Посмотреть в браузере


    Слайд 9 Вложение нумерованных списков

    Элемент списка 1

    Вложение нумерованных списков Элемент списка 1   Элемент списка 1.1

    Элемент списка 1.1
    Элемент списка

    1.2


  • Элемент списка 2


  • Посмотреть в браузере


    Слайд 10 Сложные списки

    Элемент списка 1

    Сложные списки Элемент списка 1   Элемент списка 1.1

    Элемент списка 1.1
    Элемент списка 1.2



  • Элемент списка 2


  • Посмотреть в браузере


    Слайд 11 Вставка картинок

    Посмотреть в

    Вставка картинок Посмотреть в браузере

    браузере


    Слайд 12 Таблицы


    1
    2

    Таблицы  1 2 Посмотреть в браузере



    Посмотреть в браузере


    Слайд 13 Таблицы (продолжение 1)

    Таблицы (продолжение 1)  1 2 Посмотреть в браузере

    cellspacing="10">

    1
    2


    Посмотреть

    в браузере

    Слайд 14 Таблицы (продолжение 2)

    Таблицы (продолжение 2)  1   2  Посмотреть в браузере

    cellspacing="10">

    1

    background="5.gif">

    2






    Посмотреть в браузере


    Слайд 15 Таблицы в HTML-документах - …

    Таблицы в HTML-документах - … ... - определитель ряда таблицы Атрибуты

    ...> ... - определитель ряда таблицы
    Атрибуты
    ALIGN=“align”

    - выравнивание текста по левому (left), правому (right) краю (по умолчанию - по центру (center))
    VALIGN=alignment - определяет положение текста в ячейках таблицы - вырвнивание к верху (top), к низу (bottom) или по центру (по умолчанию)
    Дополнительно (в реализациях различных броузеров)
    BGCOLOR=color - цвет фона ряда таблицы

    Слайд 16 Таблицы в HTML-документах - …

    Таблицы в HTML-документах - … … - определитель ячейки таблицы, помещается

    ...> … - определитель ячейки таблицы, помещается внутри

    определителя ряда ...
    Атрибуты
    COLSPAN=colspan - определяет количество столбцов, которые занимает ячейка
    ROWSPAN=rowspan- определяет количество рядов, которые занимает ячейка
    NOWRAP - запрещает разрыв строки текста внутри ячейки
    WIDTH - задает ширину ячейки в пикселях
    HEIGHT - задает высоту ячейки в пикселях
    ALIGN=“align” - выравнивание текста по левому (left), правому (right) краю (по умолчанию - по центру (center))
    VALIGN=alignment - определяет положение текста в ячейках таблицы - вырвнивание к верху (top), к низу (bottom) или по центру (по умолчанию)
    Дополнительно (в реализациях различных браузеров)
    BGCOLOR=color - цвет фона в таблице
    BORDERCOLOR=color - определяет цвет рамки таблицы; может использоваться совместно с BORDERCOLORDARK, BORDERCOLORLIGHT

    Слайд 18 Таблицы - Пример

    Requirements for

    Таблицы - ПримерRequirements for Netscape Gold Platform, OS PC Requirements Windows

    Netscape Gold

    Platform,

    OS
    PC Requirements


    Windows
    486, HDD 5MB, 8MB

    Macintosh
    68020, HDD 5MB, 8 MB

    Unix
    N/A, HDD 6 MB, 16 MB


    Слайд 19 Формы - Интерактивный элемент World Wide Web

    Формы - Интерактивный элемент World Wide Web

    Слайд 20 Пример HTML-текста формы


    Добавить

    Пример HTML-текста формы   Добавить запись в гостевую книгу

    запись в гостевую книгу



    Добавить запись в гостевую книгу






    Имя:


    E-Mail:

    URL:

    Город:

    Страна:
    size=15>


    Комментарии:







    Слайд 21 Формы


    ….
    …. ()
    ….

    Aтрибуты:
    ACTION=”URL” - URL, по которому

    Формы….		….		()….		Aтрибуты:	ACTION=”URL”	- URL, по которому передается содержимое формы	METHOD=”GET” or “POST” - способ/метод

    передается содержимое формы
    METHOD=”GET” or “POST” - способ/метод пересылки протоколом

    HTTP содержимого формы
    METHOD=”GET” (по умолчанию) - содержимое формы добавляется к URL
    METHOD= “POST” - содержимое формы пересылается HTTP-серверу в виде сообщения
    ENCTYPE = ”MIME type” - MIME-тип данных, пересылаемых к HTTP-серверу методом POST

    Слайд 22 - Определитель полей ввода в формах

    - Определитель полей ввода в формахАтрибуты:	TYPE= ”type” 	- ввод строки

    NAME=”var-name” VALUE=”default_string” SIZE=”n” MAXLENGTH=”nmax” ALIGN=”position” SRC=”URL”>

    Атрибуты:
    TYPE= ”type” - ввод

    строки текста
    VALUE=”default_string” - начальное значение содержимого полей ввода
    NAME=”var-name” - присваивает имя ”var-name” вводимым данным
    SIZE=”n” , MAXLENGTH=”nmax” - определяют размер отображаемого поля текста и длину текстового буфера для типов ”text” и ”password”
    ALIGN=”top”, “middle”, “bottom” - привязка текста и графического образа для TYPE=”image”
    SRC=”URL”- используется для указания URL интерактивного образа

    Слайд 23 TYPE - Атрибут типа полей ввода в формах
    TYPE=

    TYPE - Атрибут типа полей ввода в формахTYPE= ”text” 	- ввод

    ”text” - ввод строки текста
    ”password”- ввод пароля - при

    вводе текст заменяется “звездочками”
    ”radio” - группа “радиокнопок”, из которых может быть выбрана только одна
    ”checkbox” - ввод логических элементов, определяемых значением Вкл./Выкл.
    ”hidden” - неотображаемый элемент текста, применяемый для связи форм
    ”reset” - управляющая кнопка для сброса всех полей формы
    ”submit” - управляющая кнопка, инициирующая пересылку данных к серверу
    ”image” - управляющая кнопка, инициирующая пересылку данных к серверу


    Слайд 24 - Элементы меню в формах

    - Элементы меню в формах	 Item_1	 Item_2	Атрибуты:	NAME=”var-name” 	- имя переменной,

    MULTIPLE SIZE=”n” >
    Item_1

    > Item_2

    Атрибуты:
    NAME=”var-name” - имя переменной, ассоциированное с вводимым элементом SELECT
    MULTIPLE - определяет формат меню в виде списка с прокруткой, а также допускает выбор множества элементов списка OPTION
    SIZE=”n” - определяет количество элементов в списке прокрутки
    OPTION - элементы списка SELECT
    VALUE=”value” - определяет величину, присвоенную данному элементу списка OPTION
    SELECTED - отмечает предварительно выбранный элемент списка OPTION

    Слайд 25 - Ввод нескольких строк текста

    - Ввод нескольких строк текста	Default text to be displayedАтрибуты:	NAME=”var-name” 	-

    ROWS=”n” COLS=”m” >
    Default text to be displayed

    TEXTAREA >

    Атрибуты:
    NAME=”var-name” - имя переменной, ассоциированное с вводимым текстом в форме TEXTAREA
    ROWS=”n” - количество рядов в зоне ввода текста
    COLS=”m” > - количество колонок в зоне ввода текста


    Слайд 26 - Ввод нескольких строк текста - Пример

    - Ввод нескольких строк текста - ПримерComments:			Any comments are highly appreciated. Thank you!

    method=POST action="/cgi-bin/cadguestbook.pl">
    Comments:


    Any comments are highly appreciated.

    Thank you!






    Слайд 27 Элементы -Флаги-переключатели
    Text_Item_#
    ….

    Элементы -Флаги-переключатели Text_Item_#…. Text_Item_#ExampleТекст 1 Текст 2: Текст 3: Текст 4 Текст 5 Текст 6

    TYPE=”checkbox” NAME=”var#-name” > Text_Item_#
    Example

    Текст 1
    Текст 2:

    type="text" name="string" size=50>


    Текст 3:
    Текст 4
    Текст 5
    Текст 6





    Слайд 29 Элементы -Переключатели-”радиокнопки”
    Text_Item_#

    Элементы -Переключатели-”радиокнопки” Text_Item_#… Text_Item_#ExampleТекст 1 Текст 2 : Текст 3: Текст

    NAME=”var-name”> Text_Item_#
    Example

    Текст 1
    Текст 2 :

    name="string" size=50>


    Текст 3:
    Текст 4
    Текст 5
    Текст 6







    Слайд 31 Активные графические образы




    Атрибуты
    HREF=“http://host/cgi-bin/imagemap/table_or_base
    SRC=“directory/image.gif”
    ISMAP -

    Активные графические образы	Атрибуты	HREF=“http://host/cgi-bin/imagemap/table_or_base	SRC=“directory/image.gif” 	ISMAP - серверный вариант формирования ссылок по координатам	USEMAP

    серверный вариант формирования ссылок по координатам
    USEMAP - клиентский (в

    браузере) вариант формирования ссылок по координатам

    Формат HTTP-запроса к WWW-серверу
    GET http://host/cgi-bin/imagemap/table_or_base?x,y HTTP1.0

    Слайд 32 Формат таблицы IMAGE.MAP
    METHOD URL Coordinates pairs
    # Image map for image.gif
    circle dir1/capital.html 50,20

    Формат таблицы IMAGE.MAPMETHOD	URL			Coordinates pairs# Image map for image.gifcircle		dir1/capital.html		50,20 50,30rec			dir2/region.html		80,40 120,60poly		dir3/area.html		10,20 10,45

    50,30
    rec dir2/region.html 80,40 120,60
    poly dir3/area.html 10,20 10,45 15,55 20,78
    default dir/default.html

    circle - круг - задаются

    координаты центра и правой крайней точки
    rectangle (rec) - прямоугольник - задаются координаты левой верхней и правой нижней точек
    polygon (poly) - задаются координаты вершин многоугольника
    point - задаются координаты точки
    default - задается URL, который выдается, если указатель мыши не попадает на выделенную зону образа

    Слайд 33 Активные графические образы клиентского типа USEMAP

    Активные графические образы клиентского типа USEMAP... Атрибуты	 SHAPE=shape -определяет очертание активной

    USEMAP="#map1">
    ...


    ALT="Access Guide" SHAPE=rect COORDS="x3,y3,x4,y4">

    Атрибуты
    SHAPE=shape -определяет очертание активной зоны (circle, rectangle (rec),polygon (poly), point, default)
    HREF=URL - гипертекстовая ссылка, соответствующая выделенной области
    COORDS="x1,y1,x2,y2, …, xN, yM" - координаты опорных точек активной зоны
    ALT="Alt Text" - текст, который отображается неграфическим броузером


    Слайд 34 Использование фреймов в HTML-документах

    Использование фреймов в HTML-документах			…				 - задание параметров фрейма		...		 - 	# информация,

    MRGINWIDTH=“k” MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE>



    - задание

    параметров фрейма
    ...

    - # информация, которая должна отображаться в<br> … # броузерах, не понимающих фреймы<br> <NOFRAMES><br><FRAMESET > <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide35"> <a href="/img/tmb/14/1378772/41cf290151fc2ae356e33b893fd786fd-720x.jpg" target="_blank">Слайд 35</a> Задание параметров фреймов - <br><br><br>Атрибуты:<br>ROWS=“m,n,p” - </h3> <div class="image"> <a href="/img/tmb/14/1378772/41cf290151fc2ae356e33b893fd786fd-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Задание параметров фреймов - Атрибуты:ROWS=“m,n,p” - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*) COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*) "><img src="/img/tmb/14/1378772/41cf290151fc2ae356e33b893fd786fd-720x.jpg" title="Язык гипертекстовой разметки HTML" alt="Задание параметров фреймов - Атрибуты:ROWS=“m,n,p” - задает параметры деления экрана браузера"></a> </div> <div class="text"> <h4>задает параметры деления экрана браузера на фреймы по вертикали</h4> в %, пикселях или по умолчанию (*) <br>COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*) <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide36"> <a href="/img/tmb/14/1378772/3d07963adc510ad86e02925c25709a4c-720x.jpg" target="_blank">Слайд 36</a> Атрибуты фреймов - <br> </h3> <div class="image"> <a href="/img/tmb/14/1378772/3d07963adc510ad86e02925c25709a4c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Атрибуты фреймов - Атрибуты:NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в директиве …SRC=“URL” - адрес документа: отображаемого в данном фреймеMRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ MRAGINHEIGHT=“l” -отступ отображаемой информации от горизонтальных границSCROLLING=“method” - параметр режима скроллинга во фрейме (yes, no, auto)NORESIZE - запрещает изменение размера фрейма"><img src="/img/tmb/14/1378772/3d07963adc510ad86e02925c25709a4c-720x.jpg" title="Язык гипертекстовой разметки HTML" alt="Атрибуты фреймов - Атрибуты:NAME=“framename#” - имя фрейма (для использования в атрибуте"></a> </div> <div class="text"> <h4>MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE><br><br>Атрибуты:<br>NAME=“framename#” - имя фрейма (для использования в</h4> атрибуте TARGET в директиве <A>…</A><br>SRC=“URL” - адрес документа: отображаемого в данном фрейме<br>MRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ<br> MRAGINHEIGHT=“l” -отступ отображаемой информации от горизонтальных границ<br>SCROLLING=“method” - параметр режима скроллинга во фрейме (yes, no, auto)<br>NORESIZE - запрещает изменение размера фрейма<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide37"> <a href="/img/tmb/14/1378772/43b4de1578253013459e6bd2d648b0fb-720x.jpg" target="_blank">Слайд 37</a> Пример -документа с фреймами<br> It's a frame, I </h3> <div class="image"> <a href="/img/tmb/14/1378772/43b4de1578253013459e6bd2d648b0fb-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Пример -документа с фреймами It's a frame, I tell ya'!Alternative content no-frames browsers."><img src="/img/tmb/14/1378772/43b4de1578253013459e6bd2d648b0fb-720x.jpg" title="Язык гипертекстовой разметки HTML" alt="Пример -документа с фреймами It's a frame, I tell ya'!Alternative content no-frames browsers."></a> </div> <div class="text"> <h4>tell ya'!<br></h4> - fills in.--><br><!-- Frame content: left.htm, middle.htm, and right.htm --><br><FRAMESET COLS="20%,*,20%"><br><FRAME SRC="left.htm" NAME="left"><br><FRAME SRC="middle.htm" NAME="middle"><br><FRAME SRC="right.htm" NAME="right"><br></FRAMESET><br><!-- End of Frameset --><br><NOFRAMES><br>Alternative content no-frames browsers.<br>



    Слайд 38 Ссылки

    Ссылка на внешний ресурс

    СсылкиСсылка на внешний ресурс Ссылка на файлОбращение к почтовому клиенту (E-mail)Посмотреть в браузере

    ="Photoshop/lesson16/lesson16_nofp_bg.gif"> Ссылка на файл

    Обращение к почтовому клиенту (E-mail)
    Посмотреть

    в браузере

    Слайд 39 Фон страницы





    Посмотреть в браузере
    Посмотреть в браузере

    Фон страницыПосмотреть в браузереПосмотреть в браузере

    Слайд 40 Стиль ссылок (цвет и подчеркивание)

    Стиль ссылок (цвет и подчеркивание)Посмотреть в браузере

    text-decoration: none;}
    a:visited {color: #FF0000; text-decoration: none;}
    a:hover {color: #00FF00; text-decoration:

    underline;}
    a:active {color: #0000FF; text-decoration: none;}
    -->


    Посмотреть в браузере


    Слайд 41 Элемент разметки SCRIPT
    Элемент разметки SCRIPT служит для размещения

    Элемент разметки SCRIPTЭлемент разметки SCRIPT служит для размещения кода JavaScript, VBScript

    кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно

    использовать не только в заголовке документа, но в его теле.
    • Имя файла: yazyk-gipertekstovoy-razmetki-html.pptx
    • Количество просмотров: 141
    • Количество скачиваний: 0