Разделы презентаций


HTML

Содержание

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

Слайды и текст этой презентации

Слайд 1HTML
Язык гипертекстовой разметки для написания кода страниц сайта

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

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



Мой сайт






Посмотреть в

браузере

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

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



Мой сайт



Текст

в HTML
 




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

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

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


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

HTML
Текст1 в HTML

Текст2 в HTML
Посмотреть в браузере

Теги , , , Полужирный текст в HTMLНаклонный текст в 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.2


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


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

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

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

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

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


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


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

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

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

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

    Элемент

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


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


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

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

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

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

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

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


    1
    2


    Посмотреть в

    браузере

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

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


    1
    2


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

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

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


    1

    2






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

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

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

    - определитель ряда таблицы
    Атрибуты
    ALIGN=“align” - выравнивание текста

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

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

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

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

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

    Requirements for 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

    Таблицы - ПримерRequirements for Netscape Gold Platform, OS PC Requirements Windows 486, HDD 5MB, 8MB Macintosh 68020,

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

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

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


    Добавить запись в

    гостевую книгу



    Добавить

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




    Имя:


    E-Mail:

    URL:

    Город:

    Страна:
    size=15>


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






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

    Слайд 21Формы


    ….
    …. ()
    ….

    Aтрибуты:
    ACTION=”URL” - URL, по которому передается содержимое

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

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

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

    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 интерактивного образа
    - Определитель полей ввода в формахАтрибуты:	TYPE= ”type” 	- ввод строки текста	VALUE=”default_string”	- начальное значение содержимого полей ввода	NAME=”var-name”	-

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

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

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

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

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

    SIZE=”n” >
    Item_1
    Item_2

    Атрибуты:
    NAME=”var-name” -

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

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

    COLS=”m” >
    Default text to be displayed


    Атрибуты:
    NAME=”var-name” -

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

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

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

    Comments:

    name=comments COLS=70 ROWS=8>
    Any comments are highly appreciated. Thank you!


    type=reset>

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

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

    > Text_Item_#
    Example

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


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




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

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

    Text_Item_#
    Example

    action="/cgi-bin/terra-dbase/terra.cgi"method=GET>
    Текст 1
    Текст 2 :
    Текст

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






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

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




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

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

    ссылок по координатам

    Формат HTTP-запроса к WWW-серверу
    GET http://host/cgi-bin/imagemap/table_or_base?x,y HTTP1.0
    Активные графические образы	Атрибуты	HREF=“http://host/cgi-bin/imagemap/table_or_base	SRC=“directory/image.gif” 	ISMAP - серверный вариант формирования ссылок по координатам	USEMAP - клиентский (в браузере) вариант формирования

    Слайд 32Формат таблицы IMAGE.MAP
    METHOD URL Coordinates pairs
    # Image map for image.gif
    circle dir1/capital.html 50,20 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, который выдается, если указатель мыши не попадает на выделенную зону образа
    Формат таблицы 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 20,78default		dir/default.htmlcircle 		- круг - задаются

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

    ...


    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" - текст, который отображается неграфическим броузером

    Активные графические образы клиентского типа USEMAP... Атрибуты	 SHAPE=shape -определяет очертание активной зоны (circle, rectangle (rec),polygon (poly), point,

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

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



    - задание параметров фрейма
    ...

    -

    # информация, которая должна отображаться в
    … # броузерах, не понимающих фреймы
    <br><FRAMESET > <br> </div> <div class="image"> <a href="/img/thumbs/2d616a354fa413bb7beffce8f48e1a5d-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Использование фреймов в HTML-документах … - задание параметров фрейма ... - # информация, которая должна отображаться в … # броузерах, не понимающих фреймы "><img src="/img/thumbs/2d616a354fa413bb7beffce8f48e1a5d-800x.jpg" title="HTML Использование фреймов в HTML-документах … - задание параметров фрейма ... - # информация," alt="Использование фреймов в HTML-документах … - задание параметров фрейма ... - # информация, которая должна отображаться в … # броузерах, не"></a> </div> <hr> </div> <div class="descrip" id="slide35"> <h2><a href="/img/thumbs/feef84c9c81d13901d30c3b5532d49f3-800x.jpg" target="_blank">Слайд 35</a>Задание параметров фреймов - <br><br><br>Атрибуты:<br>ROWS=“m,n,p” - задает параметры</h2> <div class="text"> <h3>деления экрана браузера на фреймы по вертикали в %, пикселях</h3> или по умолчанию (*) <br>COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*) <br> </div> <div class="image"> <a href="/img/thumbs/feef84c9c81d13901d30c3b5532d49f3-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Задание параметров фреймов - Атрибуты:ROWS=“m,n,p” - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*) COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*) "><img src="/img/thumbs/feef84c9c81d13901d30c3b5532d49f3-800x.jpg" title="HTML Задание параметров фреймов - Атрибуты:ROWS=“m,n,p” - задает параметры деления экрана браузера" alt="Задание параметров фреймов - Атрибуты:ROWS=“m,n,p” - задает параметры деления экрана браузера на фреймы по вертикали в %,"></a> </div> <hr> </div> <div class="descrip" id="slide36"> <h2><a href="/img/thumbs/889f5441acbea644a9056e648d49c721-800x.jpg" target="_blank">Слайд 36</a>Атрибуты фреймов - <br></h2> <div class="text"> <h3>NORESIZE><br><br>Атрибуты:<br>NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в</h3> директиве <A>…</A><br>SRC=“URL” - адрес документа: отображаемого в данном фрейме<br>MRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ<br> MRAGINHEIGHT=“l” -отступ отображаемой информации от горизонтальных границ<br>SCROLLING=“method” - параметр режима скроллинга во фрейме (yes, no, auto)<br>NORESIZE - запрещает изменение размера фрейма<br> </div> <div class="image"> <a href="/img/thumbs/889f5441acbea644a9056e648d49c721-800x.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/thumbs/889f5441acbea644a9056e648d49c721-800x.jpg" title="HTML Атрибуты фреймов - Атрибуты:NAME=“framename#” - имя фрейма (для использования в атрибуте" alt="Атрибуты фреймов - Атрибуты:NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в директиве …SRC=“URL” - адрес"></a> </div> <hr> </div> <div class="descrip" id="slide37"> <h2><a href="/img/thumbs/08bb969b9f9b518027dc069f67df124e-800x.jpg" target="_blank">Слайд 37</a>Пример -документа с фреймами<br> It's a frame, I tell ya'!<br></h2> <div class="text"> <h3>3 columns: left and right -20%; middle - fills in.--><br></h3> 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>


    Пример -документа с фреймами It's a frame, I tell ya'!Alternative content no-frames browsers.

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

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

    Ссылка

    на файл

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

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

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





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

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

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

    {color: #FF0000; text-decoration: none;}
    a:hover {color: #00FF00; text-decoration: underline;}
    a:active {color: #0000FF;

    text-decoration: none;}
    -->


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

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

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

    VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только

    в заголовке документа, но в его теле.

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

    Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

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

    Что такое TheSlide.ru?

    Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


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

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