- Курс-практикум «Педагогический драйв: от выгорания к горению»
- «Формирование основ финансовой грамотности дошкольников в соответствии с ФГОС ДО»
- «Патриотическое воспитание в детском саду»
- «Федеральная образовательная программа начального общего образования»
- «Труд (технология): специфика предмета в условиях реализации ФГОС НОО»
- «ФАООП УО, ФАОП НОО и ФАОП ООО для обучающихся с ОВЗ: специфика организации образовательного процесса по ФГОС»
Свидетельство о регистрации
СМИ: ЭЛ № ФС 77-58841
от 28.07.2014
- Бесплатное свидетельство – подтверждайте авторство без лишних затрат.
- Доверие профессионалов – нас выбирают тысячи педагогов и экспертов.
- Подходит для аттестации – дополнительные баллы и документальное подтверждение вашей работы.
в СМИ
профессиональную
деятельность
Урок по теме HTML
1492
0
Основы языка гипертекстовой разметки документов
Информация в Интернете размещается наweb-сайтах. Web-сайты же состоят из web-страниц, как обыкновенный журнал состоит из страниц. Web-страницы внутри одного web-сайта связаны между собой с помощью гиперссылок.
Сайты могут быть интерактивными имультимедийными.
Мультимедийность подразумевает, что кроме текста, информация на сайте может быть представлена в виде графики (картинки, анимация, видеозапись) или звука (звукозаписи).
Если же на сайте есть различные формы для обратной связи с посетителями сайта (например, анкета), то такой сайт является интерактивным.
Web-страницы сайта могут содержать динамические объекты, созданные с помощью специальных языков программирования.
Пользователь может запускать те или иные динамические объекты с помощью расположенных на сайте управляющих элементов, например, кнопок.
Перед созданием сайта необходимо разработать его проект: определить, сколько web-страниц будет входить в сайт, какова будет их тематика и как они будут связаны между собой.
Нам известно, что web-страницы реализуются с помощью языка разметки гипертекстовых документов HTML и на самом деле являются обычными текстовыми документами, в которые вставляются специальные управляющие символы (тэги).
Текстовой файл можно будет удалить после создания html-документа. Основными элементами документа являются тэги (или дескрипторы).
Тэги – управляющие символы, которые определяют вид Web-страницы при её просмотре в браузере.
При отображении в браузерах web-страницы предстают в том виде, который задается тэгами.
Для создания web-страниц используются как простейшие текстовые редакторы, так и специальные программы, облегчающие и оптимизирующие работу с web-страницами.
Создание структуры web-страницы
Тэги, задающие вид web-страниц, могут быть одиночными или парными. Парные тэги состоят из открывающего и закрывающего тэгов и называютсяконтейнером.
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Записывать тэги можно как прописными, так и строчными буквами. У многих тэгов есть атрибуты, задающие их дополнительные свойства.
Web-страница состоит их двух логических частей: заголовка и содержания. HTML-код страницы помещается внутрь контейнера <HTML></HTML>, по которому браузер определяет, что этоweb-страница. Заголовокweb-страницы заключается в контейнер <HEAD></HEAD> и содержит название документа и справочную информацию о нем. Название страницы заключается в тэги <TILE></TILE>.
Основное содержание страницы помещается в контейнер <BODY></BODY>. Здесь могут быть текст, таблицы, бегущие строки, ссылки на графические объекты и звуковые файлы и т.д.
Созданную web-страницу необходимо сохранить в виде файла с расширением htm или html. Страницу, которая загружается в браузер первой, принято сохранять под именемindex.htm.
Смотри таблицу основных тэгов языкаHTML.
Для работы с HTML документом необходимо пройти подготовительный этап:
Создать персональную папку, где обязательным требованием является использование для имени папки английские буквы;
Создать текстовой документ блокнот;
Открыть документ и сохранить его под новым именем с расширением html или htm.
Закрыть документ;
Открыть html –документ;
Открыть блокнот, выполнив команду Вид/в виде html.
В папке должны находится:
Общий вид программы:
<html>
<head>
<title>Моя персональная страница</title>
</head>
<body>
Моя страница
</body>
</html>
Основное содержание программы помещается между тэгами <body></body>. Рассмотрим основные тэги.
Таблица основных тэгов языка HTML
ТЭГИ | НАЗНАЧЕНИЕ |
<html></html> | Указывает программе просмотра страниц, что это HTML документ. Данные тэги обрамляют документ |
<head></head> | Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тэг названия документа и тэги для поисковых машин |
<title></title> | Помещает название в оглавление программы просмотра страниц |
<body></body> | Определяет видимую часть документа |
<body bgcolor=…> | Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB – пример: FF0000 – красный цвет |
<body text=…> | Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет |
<body link=…> | Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет |
<body vlink=…> | Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет |
<body alink=…> | Устанавливает цвет гиперссылок при нажатии |
Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться форматировать текст соответствующим образом. Для этого используются тэги для форматирования текста. Они представлены в следующей таблице:
(Каждому ученику раздается данная таблица и проектируется на экран).
Таблица тэгов для форматирования текста
ТЭГИ | НАЗНАЧЕНИЕ |
<hl></hl> … <hl></hl> | Задает размер заголовка |
<pre></ pre > | Обрамляет предварительно отформатированный текст |
<b></b> | Жирное начертание шрифта |
<i></i> | Начертание Курсив |
<tt></tt> | Имитация стиля печатной машинки |
<cite></cite> | Используется для цитат, обычно наклонный текст |
<strong></ strong > | Используется для выделения наиболее важных частей текста (наклонный и жирный текст) |
<font size=…></font> | Устанавливает размер текста в пределах от 1 до 7 |
<font color=…></font > | Устанавливает цвет текста, используя значение цвета в виде |
<p> | Начало нового абзаца |
<palign=…> | Выравнивает абзац относительно одной из сторон документа, значения: |
<br> | Вставляет перевод строки |
<blockquote> </ blockquote> | Создает отступы с обеих сторон текста. |
<ol></ol> | Создает нумерованный список |
<li> | Определяет каждый элемент списка и присваивает номер |
<ul></ul> | Создает ненумерованный список |
<a href=”URL”></a> | Создает гиперссылку на другие документы или часть текущего документа |
Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенным пробелами. Описание атрибутов без использования ключевых слов не допускается.
Вставка изображений
Для того чтобы сделать web-страницу более привлекательной, на ней можно разместить графические файлы трех форматов – GIF, JPG,PNG. Изображения других форматов необходимо преобразовать в один из вышеуказанных.
На титульной странице обычно размещаются изображения, соответствующие тематике сайта. Требующиеся графические файлы можно скачать с Интернета. Например, фотографии компьютеров можно найти на сайте производителей и продавцов компьютерной техники.
На web-страницу рисунок вставляется с помощью тэга <IMG> с атрибутом SRC, который указывает путь к файлу на локальном компьютере или в Интернете. Полный путь к файлу на локальном компьютере или в Интернете. Полный путь можно не указывать, если файл изображения находится на локальном компьютере в том же каталоге, что и файл web-страницы. В этом случае достаточно одного имени файла.
С помощью атрибута ALT можно добавлять к рисунку на web-странице поясняющий текст, который появляется при наведении мышью на рисунок и полезен в тех случаях, когда по каким-либо причинам рисунок не загружается в браузере.
Гиперссылки на web-страницах
Еслиweb-страница состоит из нескольких страниц, то должна быть возможность перехода с одной страницы на другую. Такую возможность дают гиперссылки (состоит из 2 частей: указатель ссылки и адресная часть ссылки).
Указатель ссылки – это то, что мы видим на web-странице, обычно это текст или рисунок. Текст гиперссылки по умолчанию выделяется синим цветом и подчеркиванием. Щелчок мышью по указателю ссылки вызывает переход на другую страницу, указанную в адресной части гиперссылки.
Адресная часть – это URL-адрес документа, на который указывает ссылка.URL-адрес может бытьабсолютным и относительным.
Абсолютный адрес содержит путь к файлу и его имя.
Например: C:/Web-сайт/filename.htm – абсолютный адрес документа, находящегося на локальном компьютере.
http//www.host.ru/Web-сайт/filename.htm – абсолютный адрес документа, находящегося на удаленном компьютере в Интернете.
Относительный URL-адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки.
При разработке сайта входящие в негоweb-страницы рекомендуется связывать относительными ссылками. Тогда при перемещении этого сайта в другой каталог или при его публикации в Интернете адресную часть ссылок изменять не надо.
Гиперссылка задается контейнером <A> </A>. Контейнер должен содержать указатель ссылки. А с помощью атрибута HREF задаетсяURL-адрес документа на локальном компьютере или в Интернете: <A HREF=”URL”>Указатель гиперссылки </A>.
Практическая часть
Задание 1: разработайте тематический сайт «Компьютеры», который должен содержать:
титульную страницу «Компьютер»;
страницу «Программы», содержащую классификацию ПО;
страницу Словарь», содержащую словарь компьютерных терминов;
страницу «Комплектующие» с ценами на устройства компьютера;
страницу «Анкета», содержащую анкету для посетителей сайта.
1 этап: откройте окно текстового редактора Блокнот. В окне Блокнота введите следующий HTML-кодweb-страницы:
<HTML>
<HEAD>
<TITLE> Компьютер</TITLE>
</HEAD>
<BODY>
Все о компьютере
</BODY>
</HTML>
Теперь сохраните файл под именемindex.htm в папке сайта и загрузите этот файл в окно браузера для просмотра.
2 этап: мы создали страницу и вставили в нее заголовок. Теперь добавим текст после горизонтального разделителя и отформатируем его. В окне приложения Блокнот в контейнер <BODY> вставьте следующий текст с тэгами:
<FONT COLOR=” blue”>
<HI ALIGN=”Center”>
Все о компьютере
</HI>
</FONT>
<HR>
<P ALING=”left”> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>
<P ALING=”right”> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P>
Задание 2: в созданный нами сайт «Компьютер» на титульную страницу вставьте изображение компьютера, панель навигации и ссылку на адрес электронной почты.
1 этап: «Скачайте» изображение компьютера из Интернета и сохраните его в файле с именем computer.gif в каталоге сайта. В приложении Блокнот откройте созданный ранее файл index.htm. Затем в контейнер <BODY> вставьте перед абзацами текста тэг вставки изображения:
<IMG SRC=”computer.gif” ALT= “Компьютер” ALIGN=”right”>
2 этап: создайте пустые страницы «Программы», «Словарь», «Комплектующие», «Анкета» и сохраните их в файлах с именами software.htm,glossary.htm,hardware.htm,anketa.htm в каталоге сайта.
Каждая страница должна содержать следующий код:
<HTML>
<HEAD>
<TITLE> Заголовокстраницы </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
3 этап: вставьте в титульную страницу код, создающий панель навигации вашего сайта:
<P ALIGN=”center”>
[<A HREF=”software.htm”> Программы </A>]
[<A HREF=”glossary.htm”> Словарь </A>]
[<A HREF=”hardware.htm”> Комплектующие </A>]
[<A HREF=”anketa.htm”> Анкета </A>]
</P>
4 этап: вставьте в титульную страницу код, создающий ссылку на адрес электронной почты:
<ADDRESS>
<A HREF= mailto:mailbox@provaider.ru> E-mail:mailbox@provaider.ru </A>
</ADDRESS>
Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/43550-urok-po-teme-html
БЕСПЛАТНО!
Для скачивания материалов с сайта необходимо авторизоваться на сайте (войти под своим логином и паролем)
Если Вы не регистрировались ранее, Вы можете зарегистрироваться.
После авторизации/регистрации на сайте Вы сможете скачивать необходимый в работе материал.
- «Инклюзивное образование: организация учебно-воспитательного процесса по АООП в соответствии с ФГОС НОО обучающихся с ОВЗ»
- «Особенности организации внеурочной деятельности в соответствии с ФГОС»
- «Семья в социально-опасном положении и тяжелой жизненной ситуации: оказание социально-психологической помощи родителям и детям»
- «Организация образовательного процесса в очной и дистанционной форме в условиях эпидемии коронавирусной инфекции»
- «Досуговые мероприятия в работе педагога-организатора»
- «Специфика организации процесса адаптации детей к условиям дошкольной образовательной организации»
- Теория и методика дополнительного образования детей
- Изобразительное искусство и педагогическая деятельность в образовательных организациях
- Методы и технологии преподавания английского языка в образовательной организации
- Учитель-наставник. Организационно-методическое сопровождение профессиональной деятельности педагогов
- Организация работы классного руководителя в образовательной организации
- Учитель изобразительного искусства. Педагогическая деятельность по проектированию и реализации образовательного процесса
Чтобы оставлять комментарии, вам необходимо авторизоваться на сайте. Если у вас еще нет учетной записи на нашем сайте, предлагаем зарегистрироваться. Это займет не более 5 минут.