Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Первый вводный урок по HTML 4.01

Первый вводный урок по HTML 4.01



  • Информатика

Поделитесь материалом с коллегами:

Лекции по Web-программированию 2-й год

Урок 1

Содержание

п.п

стр.

Основные понятия

1.

Тема1. Введение в HTML

2

2.

Тема 2. Создание HTML документов

6

3.

Практическое задание №1

8

4.

Домашнее задание №1

14

Основные понятия

  1. Язык HTML

  2. WEB-броузер

  3. HTML-документ

  4. Тег

  5. Категории тегов

  6. Элементы, из которых состоят теги

  7. HTML элемент

  8. Aтрибут

  9. Спецификация атрибута

  10. Значение атрибута

  11. URL

  12. escape последовательности

  13. Тег

  14. Тег

  15. Тег

  16. Комментарии

  17. Тег

  18. Тег

  19. Тэг абзаца

  20. Тег

  21. Тэг преформатирования

  22. Тег

  23. Тег

  24. Тег

  25. Тег


  1. Тема 1. Введение в HTML


HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров.

Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки.

Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя вцелом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.

В большинстве случаев автор документа строго определяет внешний вид документа. В случае HTML читатель (основываясь на возможностях WEB-броузера может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-броузеру интерпретировать эти тэги.

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

HTML-тэги две категории:

  • тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом

  • тэги, описывающие общие свойства документа, такие как заголовок или автор документа

Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

  • левой угловой скобки < (такого же, как "меньше чем" символа)

  • необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру.

Таким образом в этом контексте Вы можете читать символ /, как конец...

  • имени тега, например TITLE или PRE

  • необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER

  • правой угловой скобки > (такой же, как символа "больше чем").

Примеры:




Элементы HTML

Большинство, но не все теги HTML спарены так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например:


Foreword


В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом. Некоторые теги, например , являются элементами HTML сами по себе, и для них соответствующий конечный тег неверен.

Далее мы будем называть теги по их именам, опуская обязательные угловые скобки.

Aтрибуты

Для каждого тега определяется множество возможных атрибутов. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть.

Спецификация атрибута состоит из расположенных в следующем порядке:

  • имени атрибута, например WIDTH

  • знак равенства (=)

  • значения атрибута, которое задается строкой символов, например, "80".

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя.

Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Предпочтительно использование двойных кавычек, так как для глаза человека бывает трудно отличить одинарные кавычки от символов, подобных символам акцентирования.

Можно опустить кавычки для значений атрибутов, которые состоят только из следующих символов:

  • символов английского алфавита (A - Z, a - z)

  • цифр (0 - 9)

  • промежутков времени

  • дефисов (-)

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER".

Ссылка на URL, например, HREF=foo.htm, допустима, но, когда URL используется с атрибутами, он должен быть заковычен, например REL="nofollow" target="_blank" HREF="http://infourok.ru/go.html?href=http%3A%2F%2Fwww.hut.fi%2F".

Существуют некоторые броузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

Если значение атрибута такое же, как его имя, может быть использован минимальный синтаксис атрибута. То есть

можно сократить до .

Некоторые агенты пользователей (программы просмотра пользователя, броузеры) даже требуют минимизации для некоторых атрибутов (COMPACT, ISMAP, CHECKED, NOWRAP, NOSHADE, NOHREF).

Так что лучше использовать минимизированный синтаксис там, где это возможно.

Значения атрибутов должны быть отделены пробелами или незаполненными строками.


Чувствительность к регистру


Что касается имен тегов, атрибутов и большинства значений атрибутов, HTML нечувствителен к регистру.

Вы можете, например, написать TITLE, или Title, или title, или даже tItLE, если Вам нравится.

Чувствительные к регистру конструкции языка, а именно:

  • escape последовательности (более официально называемые символьными объектами), которые начинаются знаком & (например, <)

  • URL, так как он может содержать наименования файлов, которые являются case чувствительными во многих операционных системах (например, в Unix).

Разделение на строки и использование пробелов и символов табуляции.


Когда документ выводится на экран, пробелы и пустые линии не сохраняются, за исключением текста, заключенного в теги PRE (предварительно отформатированный текст).

То есть любая последовательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле HTML. С другой стороны, пробел в файле HTML может быть представлен с использованием любого количества пробелов или новыми (пустыми) строками.

Тема 2. Создание HTML документов


HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров.

Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора.

Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

Структура документа


Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован.

Самый первый тэг, который встречается в документе, должен быть тэгом . Тег указывает программе просмотра страниц что это HTML документ.

Минимальный HTML-документ будет выглядеть так:

...тело документа...


Заголовочная часть документа


Тэг заголовочной части документа должен быть использован сразу после тэга и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга . Стартовый тэг помещается непосредственно перед тэгом и другими тэгами, описывающими документ, а завершающий тэг размещается сразу после окончания описания документа.

Например:



Список сотрудников

...

Технически, стартовые и завершающие тэги типа , и необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.


Заголовок документа


Большинство WEB-броузеров отображают содержимое тэга в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами и , размещается внутри -тэгов. Заголовок документа не появляется при отображении самого документа в окне.


Комментарии


Элемент !-- определяет комментарий, невидимый при просмотре страницы. Между двумя тегами находится ваш текст. Часто бывает необходим при использовании новых тегов, не поддерживаемых в старых браузерах. В этом случае новые теги, обрамленных комментариями не будут отображаться в старых браузерах как непонятный текст.


Синтаксис комментария:



Пример:

А ссылку вы видите!
А выглядит код так:

А ссылку вы видите!


Комментарии могут встречаться в документе где угодно и в любом количестве.

Практическое задание № 1

  1. Итак, для начала создай на диске отдельную директорию (папку) для будущей страницы (порядок прежде всего:)

  2. D:\первые шаги\

  3. Теперь откроем блокнот (notepad) и скопируем туда следующий текст:

Мой первый шаг

Здравствуйте, это моя первая страница.



Добро пожаловать! :)

  1. А теперь сохраним этот документ, присвоив ему имя index.html (D:\первые шаги\index.html)

  2. Теперь откроем, допустим, Internet Explore (не закрывайте блокнот, он нам еще пригодится). Файл - Открыть - кнопка Обзор - Наш документ (index.html).

  3. Если мы чего-то изменили в нашем index.html документе (в блокноте), то, чтобы посмотреть как это выглядит в Internet Explorer, надо не забывать нажимать в IE (Internet Explorer) кнопку ОБНОВИТЬ (тоже самое касается других броузеров:) Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ:)

Первое, что нам нужно усвоить, что хтмл (html) это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: Html не является языком программирования, он предназначен для разметки текстовых документов (т.е. для форматирования текста). То, как будет выглядеть ваш текст, определяют метки (tags или тэг).

Пример тэга:
(перенос текста на другую строку, что-то вроде Enter:). Попробуйте между тэгами Body его понатыкать - посмотрите, что получится:)

Т.е. все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в броузере.

Как мы видим на нашем примере тэгов много и они разные:). Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги.

Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:

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

Все тэги, расположенные между , это что-то вроде служебной информации (наша служба и опасна и трудна, и на первый взгляд как-будто не видна:). Например - заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд выше всех командных строк (на заголовок окна)... Увидели?:)

Все тэги, расположенные между - непосредственное содержание документа.


Тэги тела документа


Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.


Тело документа

Тело документа должно находиться между тэгами и . Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.


Уровни заголовков

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д.

Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1".

Тег служит для создания заголовка. Всего существует 6 видов заголовков - от H1 до H6. Тегу

соответствует самый большой заголовок, тегу
- самый маленький.


Синтакс заголовка уровня 1 следующий:

Заголовок первого уровня

Заголовки другого уровня могут быть представлены в общем случае так:

Заголовок x-го уровня

где x - цифра от 1 до 6, определяющая уровень заголовка.

Атрибуты

align

Выравнивает заголовок в соответствии со следующими значениями

center

По центру

left

По левому краю

right

По правому краю

title

Всплывающая подсказка


Пример

Очень большой заголовок с тегом

Заголовок поменьше с тегом

Еще меньше с тегом

Маленький заголовок с тегом

Очень маленький заголовок с тегом
Самый маленький заголовок с тегом


Тэг абзаца

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки.

Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга

.

Если вы не разделите абзацы тэгом

, ваш документ будет выглядеть как один большой абзац.

Тег

создает новый параграф. Два или более тега

, идущих подряд, заменяются одним.

Параметры

align

Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center

left

выравнивание по левому краю. По умолчанию

right

выравнивание по правому краю

center

выравнивание по центру

justify

выравнивание по ширине

title

Всплывающая подсказка

Пример

Выравниваем параграф по правому краю с помощью соответствующего атрибута


Центрирование элементов документа

Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тэг

.

Все элементы между тэгами

и

будут находиться в центре окна.

Тег

предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера. CENTER это тег уровня блока, поэтому им можно центрировать, например, таблицы, тексты.


Тэг преформатирования

 

Тэг преформатирования,

,
позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом .

Внутри предварительно сформатированного текста разрешается использовать:

  • перевод строки

  • символы табуляции (сдвиг на 8 символов вправо)

  • непропорциональный шрифт, устанавливаемый броузером

Использование тэгов, определяющих формат абзаца, таких как или

,
будет игнорироваться броузером при помещении их между тэгами
и .

Пример, собранный из предыдущих:

<TITLE> Список Web-программистов TITLE>

Список Web-программистов нашей школы

Составлено : 95 июля 12000 года

Данный список содержит фамилии, имена и отчества

всех самых лучших, всех самых найумнейших и наймудрейших, а также найлюбимейших программистов нашей школы.

Список может быть использован только в сугубо личных служебных целях. <P>

BODY>

HTML>

Заголовок "Список Web-программистов " не отображен броузером как часть документа. Он появится в заголовке окна броузера.


Разрыв строки

Тэг
(BReak line) вставляет перевод строки, т.е. извещает броузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где броузер должен отображать их одну под другой.


Например:

У Лукоморья дуб зеленый,

Златая цепь на дубе том

И днем и ночью Кот ученый

Все ходит по цепи кругом…


Дополнительный параметр позволяет расширить вохможности тэга
.


CLEAR=left|right|all>

Данный параметр позволяет выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна броузера.

Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг
для смещения текста ниже рисунка:

Как вы можете видеть, данная схема демонстрирует связь


schema1.gif
Мастер/Деталь


Неразрывная строка

Если вы не хотите, чтобы браузер автоматически переносил строку, то вы можете обозначить ее тэгами и . В этом случае браузер не будет переносить строку, даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно.

Например:

Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг в это место.

Например:

Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было

Данная строка является самой длинной строкой документа,

которая не допускает какого-либо разбиения где бы то ни было


Цитата

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом

, отступает от левого края документа на 8 пробелов.

Например:

На сегодняшнем первом уроке наш Великий Петя Иванов глава нашего Всемироного представительства произнес:



Сегодня один из величайших дней для нашего программистского общества.

Мы открыли новую технологию, позволяющую нам просто говорить компьютеру, что мы хотим сделать, а он это делает это за нас!

При отображении браузером данный текст будет выглядеть так:

На сегодняшнем первом уроке наш Великий Петя Иванов глава нашего Всемирного представительства произнес:

Мы открыли новую технологию, позволяющую нам просто говорить компьютеру, что мы хотим сделать, а он это делает это за нас!

Список базовых тэгов HTML

Стартовый

Завершающий

Описание

Обозначение HTML-документа

Заголовочная часть документа

Заголовок документа

Тело документа

Заголовок абзаца первого уровня

Заголовок абзаца второго уровня

Заголовок абзаца третьего уровня

Заголовок абзаца четвертого уровня

Заголовок абзаца пятого уровня

Заголовок абзаца шестого уровня

Абзац

 

Форматированный текст


 

Перевод строки без конца абзаца

Цитата


Описанные ранее тэги - это все, что необходимо вам для того, чтобы начать работать с HTML.

С использованием описанных тэгов вы можете создать простой HTML-документ. Однако, следующие разделы позволят вам существенно улучшить внешний вид ваших документов и опишут новые возможности HTML





Домашнее задание №1


1. На основе изученного материала на уроке 1 создать собственную Вэб-страничку.

Придумать название страницы, наполнить ее текстовым и графическим содержанием, в конце указать автора странички.

Сохранить на съемном носителе и принести на следующее занятие.

(Примеры возможных сайтов приведены в папке «примеры сайтов»)



  1. Выучить и записать определения в тетрадь всех основных понятий к уроку 1


3. Выучить таблицу базовых тегов из Приложения №1




Автор
Дата добавления 17.09.2015
Раздел Информатика
Подраздел Конспекты
Просмотров223
Номер материала ДA-049548
Получить свидетельство о публикации

Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх