Слайд 1Учимся создавать
HTML-документы
Слайд 2Основы HTML
Язык HTML (Hyper-Text Markup Language) - язык гипертекстовой разметки
- основное средство создания страниц для Internet.
Данные в формате
HTML похожи на текстовой файл, за исключением того, что некоторые из символов интерпретируются как разметка. Разметка придает документу некую структуру.
Достоинства HTML-документов: малый объем, возможность просмотра на компьютерах с различными операционными системами, интерактивность.
Слайд 3Инструменты создания web-документа
Текстовый редактор.
Браузер для просмотра результатов.
Валидатор — это программа
для анализа
HTML- кода Web страниц на наличие ошибок, согласно
существующим стандартам.
Графический редактор.
Справочник по тегам HTML.
Слайд 4Инструменты создания web-документа
HTML-редакторы бывают двух видов:
Кодовые редакторы. HTML-документ можно создавать
в любом текстовом редакторе, например, в Блокноте. Однако, удобно, чтобы
были следующие возможности:
подсветка синтаксиса
работа с несколькими документами.
проверка текущего документа на ошибки.
Визуальные редакторы. Наиболее популярным является Macromedia Dreamweaver, занимающий промежуточную позицию между кодовыми и визуальными редакторами. К тому же по нему достаточно много литературы на русском языке.
Графический редактор
необходим для обработки изображений и их подготовки для публикации на веб-странице. Самый популярный – Photoshop. Но в большинстве случаев мощь Photoshop-а избыточна. Программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.
Браузер
Браузер - программа, предназначенная для просмотра веб-страниц. Подойдет любой браузер. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera.
Слайд 5Синтаксис HTML документа
В HTML-документе есть две явные составляющие:
сам текст,
который пользователь видит на экране браузера,
теги (англ.: tag-ярлычок, этикетка),
которые определяют, как он выводится на экран, но остаются невидимыми для пользователя при просмотре документа.
Все это в общем случае выглядит так:
<открывающий тег> текст, к которому применяется этот тег закрывающий тег>
Итак, тег состоит из следующих друг за другом в определенном порядке элементов:
левой угловой скобки < (такого же, как "меньше чем" символа)
имени тега, например title или pre
атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: align=center
правой угловой скобки > (такой же, как символа "больше чем").
если тег является конечным тегом,то после знака < ставится слеш /, такой тег закрывает некоторую структуру. Таким образом Вы можете читать символ / , как конец.
Пример: ,
Слайд 6Начало html-документа
Браузер загружает страницу и “считывает код” сверху вниз, слева
направо.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться
со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так: :
Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).
Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, т.к. HTML существует в нескольких версиях, кроме того, есть XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.
Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Слайд 7Структура HTML-документа
< HTML> ... - тэги показывают начало и
окончание HTML документа
... - это тэг заголовка
документа, содержит справочную информацию о странице, которая не отображается браузером. Например, здесь располагается контейнер
... - тэг названия страницы, который появится в строке названия в браузере.
... - эта пара тэгов указывает на начало и конец тела HTML-документа. В теле документа содержится ваша информация: текст, графические изображения, бегущие строки, звук и т.д., которая отображается на экране монитора.
Слайд 8Пример простейшего web-документа
Откройте Блокнот и запишите код:
HTML 4.0//EN”>
Изучение html
Изучаем html