Рабочие листы
к вашим урокам
Скачать
1 слайд
1
Основы языка HTML
Идея решения проблемы обмена документами между различными компьютерами и приложениями через Internet основана на языке разметки гипертекста HTML(HyperText Markup Language).
Разметка документа - это описание различных фрагментов документа и их взаимного расположения.
Выполняется разметка с помощью символов ASCІІ, а точнее, арабских цифр, символов латинского алфавита и некоторых знаков препинания. Из этих символов набираются команды языка HTML - теги, иначе говоря, дескрипторы.
Термин "гипертекст" впервые был введен Тедом Нельсоном в 60-х годах, то есть задолго до появления Internet.
Понятие "гипертекст" обозначает электронный документ, который содержит в себе ссылки на другие документы.
2 слайд
2
Основы языка HTML
Разработка языка разметки HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet.
Однако для широкого распространения World Wide Web, кроме языка HTML, потребовалось разработка протокола передачи гипертекста HTTP (HyperText Trasport Protocol – протокол передачи гипертекста), который позволил осуществить обмен документами HTML.
Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа всякий раз, когда пользователь щелкает мышью по какому-либо URL (адрес внешнего информационного ресурса).
Основные разработчики:
Тим Беренс-Ли, 1989 – основатель языка, создал базовый вариант HTML.
Д. Раггетт (Hewlett-Packard Labs), 1992 - HTML+.
Дэн Конноли,1994 - HTML 2.
В настоящее время версия с 1994 г. - HTML 4.0.
3 слайд
3
Основы языка HTML
Основные элементы языка – команды (ТЭГИ)
Тэги:
<имя> … </имя>
Параметры тэгов – указываются внутри тэга, разделяются пробелами:
Имя_параметра = “Значение_параметра”
Общая структура документа HTML
<HTML>
<HEAD>
Содержание заголовка
</HEAD>
<BODY>
Содержание тела документа
</BODY>
</HTML>
4 слайд
4
Основы языка HTML
Элементы заголовка html-документа (тэг HEAD)
5 слайд
5
Основы языка HTML
Элементы стиля и форматирования текста.
Текст, заключенный между открывающим и закрывающим тэгами, воспроизводится в соответствии со значением тэга и его параметров.
6 слайд
6
Основы языка HTML
Списки
7 слайд
7
Основы языка HTML
Гиперссылки.
<A HREF=”Имя_URL”> Текст_гиперссылки </A>, где
“Имя _URL” – Полный адрес или относительный путь, определяющий источник для перехода по гиперссылке,
Текст_гиперссылки – место в документе, которое будет гиперссылкой.
Можно определить гиперссылку на определенное место в другом документе или в этом же документе. Для этого место, на которое планируется сделать гиперссылку, обозначается следующим образом (либо в данном документе, либо в другом внешнем документе):
<A NAME = “Имя_для_ссылки”> текст </A>, где
“Имя_для_ссылки” – любое имя (идентификатор)
Текст – тот фрагмент текста, на который будет переводить гиперссылка.
Для того, чтобы сделать гиперссылку на этот фрагмент необходимо:
<A HREF=”Имя_внешнего_файла#Имя_для_ссылки”> Текст гиперссылки </A> - для ссылки на внешний файл.
<A HREF=”#Имя_для_ссылки”> Текст гиперссылки </A> - для ссылки на место в текущем документе.
Вывести значение гиперссылки в другом окне:
<A HREF="URL" TARGET="***| _blank| _self| _parent| _top"> </A>
8 слайд
8
Основы языка HTML
Вставка рисунков
<IMG SRC="Адрес_или_путь/Имя_файла" ALT="текст_альтернативный" >
Выравнивание картинки относительно страницы:
ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT
Выравнивание картинки относительно основного текста страницы:
ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM
Фон и цвета
Фоновая картинка: <BODY BACKGROUND="URL">
Цвет фона: <BODY BGCOLOR="#$$$$$$"> (порядок: красный/зеленый/синий)
Цвет текста: <BODY TEXT="#$$$$$$">
Цвет ссылки: <BODY LINK="#$$$$$$">
Пройденная ссылка: <BODY VLINK="#$$$$$$">
Активная ссылка: <BODY ALINK="#$$$$$$">
9 слайд
9
Основы языка HTML
Таблицы
10 слайд
10
Основы языка HTML
Простое текстовое поле:
Поле checkbox:
Поле radiobutton:
Поле password:
Поле hidden:
Кнопка Submit:
Кнопка Reset:
Графическая кнопка:
Ввод интерактивных форм.
<FORM METHOD=POST|GET ACTION=”http://potor.baikal.ru”>
<P> Примеры полей для ввода:<BR>
Простое текстовое поле: <INPUT NAME="test1" VALUE="test1" TYPE="text"><BR>
Поле checkbox: <INPUT NAME="test2" TYPE="checkbox" CHECKED><BR>
Поле radiobutton: <INPUT NAME="test3" TYPE="radio"><BR>
Поле password: <INPUT NAME="test4" TYPE="password"><BR>
Поле hidden: <INPUT NAME="test5" TYPE="hidden" VALUE="kuku"><BR>
Кнопка Submit: <INPUT NAME="submit" VALUE="Submit" TYPE="submit"><BR>
Кнопка Reset: <INPUT NAME="reset" VALUE="Reset" TYPE="reset"><BR>
Графическая кнопка: <INPUT NAME="graph" VALUE="default" SRC="man1.gif" TYPE="image"><BR>
</FORM>
Рабочие листы
к вашим урокам
Скачать
6 661 833 материала в базе
Настоящий материал опубликован пользователем Галичина Алевтина Ивановна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
600 ч.
Курс повышения квалификации
72/180 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.