СМИ ЭЛ № ФС 77 - 56403
+16Всероссийские конкурсы
         для педагогов

Форма входа

Печатный сборник

Сайт для педагогов

Сайт для учащихся

Информация

Минобр

Блог

Главная » Материалы педагогов » Срочный конкурс "Лучшая разработка"

Язык разметки текста HTML
Тема: «Язык разметки текста HTML»

Цели урока:
• Научиться разрабатывать документы, предназначенные для публикации в; Интернете;
• Отработать навыки редактирования веб-страниц в кодах HTML;
• Восприятие компьютера как инструмента обработки и создания информационных объектов;
• Формирование целостного восприятия окружающего мира.
Оборудование: ПЭВМ.

Ход урока.
I. Организационное начало.
1. Приветствие.
2. Работа с дежурными.
II. Работа по осмыслению и усвоению нового материала.
1. Объявление темы и цели урока.
- Тема урока " Основы языка гипертекстовой разметки документов HTML". Сегодня мы узнаем, что же такое HTML и для чего он нужен, научимся создавать HTML – документы.
2. Объяснение нового материала.
а) Что такое HTML?

Всемирная паутина (World Wide Web) состоит из множества электронных документов, связанных между собой и представляющих огромный объём различных данных, которые описываются специальными технологическими правилами. Эти правила составляются с помощью языка гипертекстовой разметки HTML – Hyper Text Markup Language.
Многие называют HTML языком программирования. Это не совсем верно, так как в традиционном понимании HTML является языком разметки электронных документов, лишь указывающим программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации.
Специальные программы, используемые для просмотра электронных документов, созданных по правилам языка разметки HTML, называются браузерами. Главное назначение браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя. В настоящее время существует различное количество браузеров. Для выполнения последующих упражнений и заданий рекомендую использовать Internet Explorer, поскольку данный браузер позволяет осуществлять полную интеграцию с другими приложения Windows.
Структура HTML-документа
Как отмечалось ранее, язык HTML набор специальных правил. Каждому правилу соответствует своё название, свойство и значение. Например, чтобы задать правило жирного начертания обыкновенного текста, необходимо использовать следующую HTML конструкцию:

1) Откройте блокнот.

2)Запишите следующий текст: <b>Обыкновенный текст</b>


3)Сохраните данный файл. В названии укажите 1.html, тип файла выберите «Текстовые документы».

4)Нажмите правой кнопкой мыши на созданном файле и выберите «Открыть с помощью», далее выбираем Internet Explorer.


5) Internet Explorer должен открыть следующую страницу:


Обратите внимание, что текст, который должен отображаться жирным начертанием обособлен символами b и /b, заключёнными в угловые скобки < >. Подобную конструкцию <какой-либо символ> принято называть тегом.
Теги бывают одинарные и парные. В нашем случае тег будет являться парным, так как он закрывает HTML конструкцию вместе с символом (/ - прямой слэш).
Некоторые параметры и их значения у определённого тэга могут либо отсутствовать, либо считаться необязательными и устанавливаться только в случае изменения стандартных характеристик тэга.
Например, в первом случае <b>Обыкновенный текст</b> текст по умолчанию отобразился чёрным цветом. Попробуйте следующей строчкой набрать: <b><font color=#FF0040>Обыкновенный текст</font></b>

Сохраните документ и вновь откройте в Internet Explorer.
Результат должен быть таким:


Упражнение: Создать следующий html-документ (цвет задан следующим кодом - #088A08):



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

Основные тэги HTML

Основные теги <html></html> Указывает программе просмотра страниц что это HTML документ.
<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body> Определяет видимую часть документа.


Теги оглавления <title></title> Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа <body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<body text=?> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
<body link=?> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет. <body vlink=?> Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.


Теги для форматирования текста
<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирый текст
<i></i> Создает наклонный текст
<tt></tt> Создает текст - имитирующий стиль печатной машинки.
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em> Используется для выделения из текста слова
(наклонный или жирный текст)

<strong></strong> Используется для выделения наиболее выжных частей текста (наклонный или жирный текст)
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7. <font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.


Гиперссылки <a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.
<a href="mailto:EMAIL"> Создает гиперссылку вызова почтовой программы для </a> написания письма автору документа.
<a name="NAME"></a> Отмечает часть текста как цель для гипперссылок в документе.
<a href="#NAME"></a> Создает гиперссылку на часть текущего документа.


Форматирование

<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
<br> Вставляет перевод строки.
<blockquote>
</blockquote> Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?> Важный тег используемый для форматирования
больших блоков текста HTML документа, также используется в таблицах стилей
Графические элементы
<img src="name"> Добавляет изображение в HTML документ
<img src="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?> Устанавливает толщину рамки вокруг изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?> Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет. Значение RRGGBB.


Таблицы
<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Атрибуты таблицы
<table border=#> Задает толщину рамки таблицы.
<table cellspacing=#> Задает расстояние между ячейками таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<tr valign=?> или <td Устанавливает вертикальное выравнивание для ячеек valign=?> таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1) <td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

Кадры
<frameset></frameset> Предваряет тег <body> в документе, содержащем кадры;
<frameset rows="value,value"> Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.
<frameset cols="value,value"> Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров.
<frame> Определяет единичный кадр или область в таблице кадров.
<noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает кадры.

Атрибуты кадров <frame src="URL"> Определяет какой из HTML документов будет показан в кадре.
<frame name="name"> Указывает Имя кадра или области, что позволяет перенаправлять информацию в этот кадр или область из других кадров.
<frame marginwidth=#> Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1. <frame marginheight=#> Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.
<frame scrolling=VALUE> Указывает будет-ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.

<frame noresize> Препятствует изменению размеров кадра.

Формы
Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.

<form></form> Создает формы
<select multiple name="NAME" Создает скролируемое меню. Size устанавливает кол-
size=?></select> во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент меню
<select name="NAME"></select> Создает ниспадающее меню

<option> Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 Создает окно для ввода текста. Columns указывает rows=8></textarea> ширину окна; rows указывает его высоту.
<input type="checkbox" Создает checkbox. За тегом следует текст. name="NAME">
<input type="radio" Создает radio кнопку. За тегом следует текст. name="NAME" value="x">
<input type=text name="foo" Создает строку для ввода текста. Параметром Size size=20> указывается длина в символах.
<input type="submit" Создает кнопку "Принять" value="NAME">
<input type="image" border=0 Создает кнопку "Принять" - для этого используется name="NAME" src="name.gif"> изображение
<input type="reset"> Создает кнопку "Отмена"
Категория: Срочный конкурс "Лучшая разработка" | Добавил: yurkin13-86 (13.03.2016)
Просмотров: 315 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Календарь

«  Март 2016  »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031

Материалы

Бесплатный диплом обучение требования дети 6 класс Развитие речи $IMAGE1$ АЛЬБОМ ПО РАЗВИТИЮ ПРОСТЫХ ФОРМ ЗВУ познание АМо конспект занятия ИКТ Системно-деятельностный подход Презентация 2 класс Adobe Photoshop история лес белка сказкотерапия биология 5 класс И.Н. Пономарёва аккорлы География анализ учебника антициклоны атмосферные фронты проект семинар City country конспект урок 8 вид блюз Алгоритм химия 8 класс 5-9 классы Математика 5 класс 5 класс английский язык урок обучен технологическая карта урока предлог африканская чума свиней Открытый урок сценарий урок математики 1 класс фгос музыка Английский язык конкурс Collections 9 класс математики Уроки элементами воспитания. экологического школа учитель спорт английский Рождество литература 10 класс 11 класс русский язык коррекционная школа приставка Бородино автоматизация звуков безопасность дошкольное образование биология 5 класс УМК Школа 2100 занятие 9 мая ВОВ воспитание образование сайт опыт благодарности и сертификаты здоровьесберегающие технологии Программа Физика #environmental protection #визуализация #технология учебных вопросов Интегрированное занятие информатика конспект урока биология обществознание 4 класс Великая Отечественная война толерантность методическая разработка внеклассное мероприятие игра

Счетчик