Главная / Информатика / Методическое пособие для учителя по курсу «Создание Web-страниц средствами языка HTML»

Методическое пособие для учителя по курсу «Создание Web-страниц средствами языка HTML»

и BODY>. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги , <HEAD> и <BODY>, а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Но всё-таки при создании Web-страниц опускать эти теги не рекомендуется.

Простейший правильный документ HTML.


<HEAD>

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

HEAD>

<BODY>

Этот текст можно прочитать на экране

BODY>

Теги HTML

Язык HTML состоит из специальных разметочных указателей – тегов. Их также можно назвать командами, инструкциями или кодами языка HTML.

Тег – инструкция броузеру, указывающая способ отображения текста. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тег.

Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения – можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.

Существует два типа тегов – парные и непарные.

Парные теги – открывающие и закрывающие, аналогичные круглым скобкам алгебраического выражения. Они влияют на текст с того места, где употреблены, до того места, где указан признак окончания их действия (закрывающие теги начинаются с символа косой черты (/).

Например, <HTML> HTML>, <P> P>, <H3> H3>

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

Например, <BR>, <META>, <IMG>

Тег <META> несет служебную информацию о Web-сайте и не отображается в экране браузера: это информация о кодировке Web-странички, об авторе, а также набор ключевых слов для поиска, отображающих содержание сайта.

Пример.

Пример создания таблицы

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

При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа. Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.


Атрибуты тегов

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

Атрибуты – это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.

Атрибуты могут иметь значения, записываемые после знака равенства (=). Всегда полезно заключать значение атрибута в кавычки (одинарные либо двойные). Строка в кавычках не должна содержать такие же кавычки внутри себя. Можно опускать кавычки для значений атрибутов, которые состоят только из следующих символов:

  • символов английского алфавита;

  • цифр (0-9);

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

  • дефисов (-).

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

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

  • цифр (0 - 9)

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

  • дефисов (-)

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER".
Закрывающие теги не содержат атрибутов.

Примеры. <FONT fase=”arial”> FONT>

<TABLE width=”50%” bgcolor=”#00CC99”>


Комментарии

Подобно тому, как во всех языках программирования есть возможность внесения в программу комментариев (текстовых строк, не являющихся частью программы), есть она и в языке HTML. Начинается комментарий со специального тега . Комментарий может включать в себя любые символы, кроме символа “больше” (>), и, таким образом, не может включать в себя теги.


Принцип наследования тегов

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

<начало 1-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<начало 2-го тега>

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<начало 3-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


<Конец 3-го тега>


<Конец 2-го тега>


<Конец 1-го тега>



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

Также следует заметить, что некоторые атрибуты вложенных тегов могут воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую.
Если у внутренней таблицы размер задан 100 пикселов, то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом, вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".


Практическая работа № 1

«Создание простейшей Web-страницы»


Цель: научиться создавать Web-страницы в текстовом редакторе Блокнот.

Указания к выполнению

  • Откройте текстовый редактор Блокнот.

  • Наберите в нём структуру HTML-документа, которая приведена ниже:


О братьях наших меньших.

Здесь будет размещено содержание Web-страницы

Методическое пособие для учителя по курсу «Создание Web-страниц средствами языка HTML»
  • Информатика
Описание:

Методическое пособие для учителя по  курсу «Создание Web-страниц средствами языка HTML» разработано на основе книги  И. Смирновой "Начала Web-дизайна".

Пособие содержит в себе теоретический материал и практические задания для учащихся 8-11-х классов, позволяющие получить базовые знания по основным темам курса: «Начальные сведения о языке HTML», «Теги HTML», «Графика на Web-странице», «Таблицы». В результате ученики научатся создавать Web-страницы, связывать их гиперссылками, размещать на страницах списки, таблицы, графику.

Данный курс рекомендуется к изучению на уроках по предмету «Технология (информационные технологии)», частично по предмету «Информатика и ИКТ», а также на кружке по информатике.

 

Курс рассчитан на 17 учебных часов. 

Автор Сницаренко Наталья Николаевна
Дата добавления 25.03.2015
Раздел Информатика
Подраздел Конспекты
Просмотров 347
Номер материала 58652
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


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

↓ Показать еще коментарии ↓