Урок 1.

Тема.  Понятие об языке разметки гипертекста — язык НТМ. НтмL-файл. Коды (теги) языка НТМ. Структурные теги. Оформление текста в WWW-документе. Теги форматирование символов.

Цели урока:

- дать представление о HTML,  структуре сайта; дать минимальные навыки создания Веб страницы в Блокноте.

- развития у учащихся интереса к созданию Веб- сайтов

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

- развитие познавательных интересов, навыков работы в сети Интернет и на компьютере.

 

Оборудование:  компьютер, подключенный к плазменной панели, компьютеры, подключенные к сети интернет.

Ход урока:

 

I. Орг. момент.

Приветствие, проверка присутствующих. Объяснение хода урока.

 

II.     I. Теоретическая часть. Рассказ учителя.

План изучения темы(на доске).

1. Что такое HTML?

2. Для чего я могу использовать HTML?

3. Как расшифровывается H-T-M-L?

4. Структура Web-страницы

5.Что такое HTML-тэги?

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

7.  В каких программах создавать сайт?

 

 

1. Что такое HTML?

HTML это "родной язык" вашего браузера (программы просмотра вэб-страниц).

Говоря кратко, HTML был изобретён в 1990 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Tim Berners-Lee мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.

HTML это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-коды страницы в Internet, щёлкните "View" в линейке меню вашего браузера и выберите "Source".

2. Для чего я могу использовать HTML?

Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней. Хорошей новостью является то, что HTML легко изучать и использовать. Через два урока вы уже создадите ваш первый web-сайт.

HTML используется для создания web-сайтов. И это очень просто!

3. Как расшифровывается H-T-M-L?

HTML это сокращение от "HyperText Mark-up Language/язык гипертекстовой разметки" - и на данном этапе этого знания вам вполне достаточно. Однако, чтобы всё было путём, давайте разъясним некоторые детали.

4. Структура Web-страницы. Загрузить редактор «HTML Gate 5.»

Прежде чем начинать объяснение тэгов, стоит поговорить о структуре Web-страницы.
Три самых важных управляющих кода HTML - <HTML>, <HEAD> и <BODY>. Они передают программе просмотра страницы основную информацию для идентификации и организации документа. Управляющие коды <HTML> и </HTML> помещаются соответственно в начале и конце всего документа, чтобы обозначить текст как действительный документ на языке разметки гипертекста. Говоря точнее, эти коды ограничивают ту часть документа, которую должна обработать и отобразить ваша будущая страница.

Между кодами <HEAD> и </HEAD> помещается раздел заголовка документа.Но это не значит, что он должен отображаться на странице. Третья команда это <TITLE> и </TITLE>. Когда текст обрамляется кодами <TITLE>, то он отображается на панели заголовка вашей страницы. Заголовок вашего документа должен быть информативным и конкретным, а не туманным и общим.

Управляющие коды <BODY> и </BODY> определяют часть документа, которая будет показана на самой странице. Тело документа состоит из тэгов, которые мы будем обсуждать далее.

Итак, общая структура типичного документа HTML выглядит следующим образом:
Код:

  • <HTML>
    <HEAD>
    <TITLE>Текст заголовка окна</TITLE>
    </HEAD>
    <BODY>
    Текст документа, тэги
    </BODY>
    </HTML>

 

 

5. Что такое HTML-тэги?

"Тэги"?

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

Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком sign ">".

Обычно имеются два тэга - открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш "/".

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.

Н, как говорится, из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: <br />.

HTML - это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.

Примеры:(написать в редакторе).

Пример 1: тэг <b> информирует браузер, что весь текст между <b> и </b> должен быть напечатан жирным шрифтом. ("b" это сокращение для "bold".)

<b>Моя первая Веб страница.</b>

будет выглядеть при просмотре в браузере:

              Моя первая Веб страница

 

Пример 2:Тэги <h1>, <h2>, <h3>, <h4>, <h5> и <h6> указывают браузеру создавать заголовки (h для "heading"), где <h1> это заголовок первого уровня - самый крупный шрифт, <h2> - заголовок второго уровня - шрифт меньшего размера, и <h6> - заголовок шестого уровня - самого низкого в этой иерархии, и самый маленький шрифт.

               <h1>Это заголовок</h1>
               <h2>Это подзаголовок</h2>
 

будет выглядеть в браузере:

Это заголовок

Это подзаголовок

6.               В каком регистре должны вводиться буквы тэгов?

Большинству браузеров безразлично, в каком регистре введены буквы тэгов. <HTML>, <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать тэги в нижнем регистре.

7.               Где размещать все эти тэги?

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

Если вы перейдёте к следующему уроку, то уже через 10 минут сможете создать свой первый web-сайт.

8.                Атрибуты

Вы можете назначать атрибуты во многих тэгах.

Что такое атрибут?

Как вы, возможно, помните, тэги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br /> информирует браузер, что нужно сделать перевод строки). В некоторых тэгах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут".

Пример 1:

 
           <h2 style="background-color:#ff0000;">Мой друг HTML</h2>
 

Атрибуты всегда записываются внутри тэга, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей. Мы к этому ещё вернёмся.

О чём же речь?

Атрибуты бывают разные. Первый изученный вами атрибут это style/стиль. С помощью этого атрибута вы можете настраивать отображение вашего web-сайта. Например, цвет фона/background colour:

Пример 2:

 
           <html>
  
             <head>
             </head>
 
             <body style="background-color:#ff0000;">
             </body>
 
           </html>
 

выведет в браузере страницу красного цвета - проверьте сами. Мы детально объясним, как работает цветовая система.

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

9.                В каких программах создавать сайт?

·        Блокнот

·        Microsoft Word

·        Dreamwiever

·        Macromedia  Flash

·        Home Site

·        HTML Gate 5

Ответы на вопросы:

1.      Что такое HTML?

2.      Для чего я могу использовать HTML?

3.      Как расшифровывается H-T-M-L?

4.      Структура Web-страницы

5.      .5.Что такое HTML-тэги?

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

7.      В каких программах создавать сайт?

 

III.                        Практическая работа(по карточкам).

Постановка задачи.

Разработать Web-страницу со следующим текстом и изображением (см. рисунок).

Рекомендуемый план разработки темы:

1. Образуйте на диске, в своей папке, новую папку под именем, напр., KARADAG.

2. Запустите Web - браузер (иконка Internet на рабочем столе Windows).

3. Войдите в редактор браузера. Смотрите меню (или рисунок): «Вид» - «В виде HTML» (или «Источник») – «Ввод» (Enter). Теперь перейдите в меню редактора: Файл - Создать -Ввод.

4. Наберите в окне редактора текст, который отразит пока только структуру Web - страницы:

<html>

<head><title>

<head><title> Кара-Даг- 2009 </title>

</head>

<body>

</body>

</html>

 

5.Набранный текст сохраните как page1.htm в предварительно образованной вами папке (KARADAG). Не забудьте установить тип файла как «Все файлы (*.*)».

6. Загрузите в Web - браузер файл page1.htm. Для этого откройте в меню браузера: Файл - Открыть - Обзор - найдите в своей папке файл page1.htm - Открыть - O.K. Убедитесь, что название Web-страницы (KARADAG2002) отразилось в верхней статусной строке Web- браузера.

7. Откройте первоисточник Web-страницы (Вид - В виде HTML) и между тэгами <body> </body> наберите следующий текст:

Поход  по Крыму

Мы, группа школьников из Харькова, горим желанием поехать в Крым. Там мы хотим снять видеофильм, посетить и осмотреть местные достопримечательности, знаменитые музеи, дельфинарий.

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

 

Сохраните дополненный текст

 

8. Перейдите в меню Web - браузера. Щелкните по иконке Обновить. Убедитесь, что в окне браузера отразился весь набранный вами текст.

Задача в своем минимуме выполнена.

III. Итог урока.

IV. Дом задание. Выучить теорию.

 

 

Hosted by uCoz