- Курс-практикум «Педагогический драйв: от выгорания к горению»
- «Формирование основ финансовой грамотности дошкольников в соответствии с ФГОС ДО»
- «Патриотическое воспитание в детском саду»
- «Федеральная образовательная программа начального общего образования»
- «Труд (технология): специфика предмета в условиях реализации ФГОС НОО»
- «ФАООП УО, ФАОП НОО и ФАОП ООО для обучающихся с ОВЗ: специфика организации образовательного процесса по ФГОС»
Свидетельство о регистрации
СМИ: ЭЛ № ФС 77-58841
от 28.07.2014
- Бесплатное свидетельство – подтверждайте авторство без лишних затрат.
- Доверие профессионалов – нас выбирают тысячи педагогов и экспертов.
- Подходит для аттестации – дополнительные баллы и документальное подтверждение вашей работы.
в СМИ
профессиональную
деятельность
Учебно-методическое пособие для учащихся «Основы языка HTML»
1362
0
автор: Александрова Светлана Николаевна ГБОУ школа № 638
Основы языка HTML
Учебно-методическая разработка для учащихся
Автор:
Александрова С.Н.
учитель информатики
ГБОУ школа № 638
Пушкинского района
Санкт-Петербурга
2015
Содержание:
Создаём HTML-документ
Начертание текста
Форматирование текста.
Заголовки и атрибуты шрифта
Списки
Вставляем изображения
Создание гиперссылок
Создание таблиц
Атрибуты таблиц
Пример создания HTML-документа
Создать HTML- документ можно в любом текстовом редакторе, например, "блокнот".
Для этого достаточно, после написания кода, сохранить полученный файл в расширении .htmlили после сохранения файла с расширением .txt поменять его на .html.
Например, в блокноте у вас получился файл "текстовой докумен.txt" , меняем имя на index.html, при публикации сайта в интернет для главной страницы обычно присваивается имя index, остальные страницы можно называть как угодно.
Если Ваш компьютер не показывает расширения файлов, в Windows XP можно зайти в панель управления, выбрать "свойства папки" и в меню "вид", снять галочку с пункта "скрывать расширения для зарегистрированных файлов".
Простейший HTML-документ выглядит так:
<HTML>
<HEAD>
<TITLE>
Простейший HTML-документ
</TITLE>
</HEAD>
<BODY>
Тело документа - текст, фотографии и всё остальное, что будут видеть посетители Вашего сайта.
</BODY>
</HTML>
В данном примере элемент HTML явно указывает браузеру, что им будет обрабатываться HTML-код.
Заголовок HTML-документа находится в элементе HEAD, его иногда называют "шапкой", и содержит информативные элементы.
TITLE - заголовок документа, его Вы можете видеть в самом верху браузера. Например, для этой страницы "Простейший HTML-документ".
Элемент BODY - тело документа, вся его содержательная часть, текст, фотографии и так далее...
(рассмотрим позже)
После обработки браузером данный документ будет выглядеть так:
Примечание: В данном и последующих примерах на сайте я буду использовать браузер "Opera", в других браузерах, например, "Internet Explorer", документ будет выглядеть аналогично.
Начертание текста
Для задания начертания текста используются следующие элементы:
B - полужирное начертание
I - курсивное начертание
U - подчёркнутый текст
S - перечеркнутый текст
BIG - увеличенный размер шрифта
SMALL - уменьшенный размер шрифта
SUP - верхний индекс
SUB - нижний индекс
TT - моноширный шрифт
BLINK - мерцающий текст
Составим такой документ:
<HTML>
<HEAD>
<TITLE> Пример начертания текста </TITLE>
</HEAD>
<BODY>
<B> текст с полужирным начертанием</B><BR>
<I> текст с курсивным начертанием</I><BR>
<U> подчёркнутый текст</U><BR>
<S> перечеркнутый текст</S><BR>
<BIG> увеличенный размер шрифта</BIG><BR>
<SMALL> уменьшенный размер шрифта</SMALL><BR>
<SUP> верхний индекс</SUP>текст <SUB> нижний индекс</SUB><BR>
<TT> моноширный шрифт</TT><BR>
<B><I> <U> подчёркнутый текст с полужирным курсивным начертанием</U></I></B><BR>
</BODY>
</HTML>
После обработки браузером данный документ будет выглядеть так:
Форматирование текста
По умолчанию браузер отображает текст в одну строку по ширине окна с выравниванием по левому краю.
Для перехода на следующую строку можно использовать одиночный тег BR. Тег можно вставлять в любом месте текста.
При использовании тега BR браузер отображает текст как один абзац, для разделения текста на абзацы используется элемент P, который задаётся парными тегами <P>....</P>. Закрывающий тег </P> не обязателен.
Чтобы полностью сохранить исходное форматирование текста можно использовать элементPRE, который задаётся парными тегами <PRE>....</PRE>. При использовании этого элемента тест сохраняет исходное форматирование и отображается моноширным шрифтом.
При необходимости запретить разрыв строк можно использовать элемент NOBR, который задаётся парными тегами <NOBR>....</NOBR>. Текст расположенный между этими тегами будет отображаться в одну строку и если он не будет помещаться в окне браузера, то браузер отобразит горизонтальную линию прокрутки.
<HTML>
<HEAD>
<TITLE>
Форматирование текста
</TITLE>
</HEAD>
<BODY>
Текст разрывается<BR>в указанных местах<BR>при помощи элемента BR
<PRE>
Элемент PRE:
Текст отображается
с сохранением исходного форматирования
моноширным шрифтом.
</PRE>
</BODY>
</HTML>
После обработки браузером данный документ будет выглядеть так:
Заголовки и атрибуты шрифта
Заголовки
Для обозначения заголовков текста в языке HTML существуют специальные элементы - H1, H2, H3, H4, H5 и H6 (номера определяют важность заголовка от 1 до 6)
Для заголовков можно задать следующие свойства:
align - выравнивание заголовка
title - текст подсказки (всплывает при наведение указателя)
Элемент FONT
Для задания отображения части текста отличного от изображения используемого по умолчанию используется элемент FONT, который может иметь следующие атрибуты:
fise - название шрифта
size - размер шрифта от 1 до 7 (по умолчанию используется 3)
color - цвет текста
Например:
<HTML>
<HEAD>
<TITLE>
Заголовки. Элемент FONT
</TITLE>
</HEAD>
<BODY>
<H1 align=center> Заголовок H1 </H1>
<H2 align=center> Заголовок H2 </H2>
<H3 align=center> Заголовок H3 </H3>
<H4 align=center> Заголовок H4 </H4>
<H5 align=center> Заголовок H5 </H5>
<H6 align=center> Заголовок H6 </H6>
Использование элемента FONT для <FONT size=4 color=red> отображения </FONT> текста
</BODY>
</HTML>
Выглядит это так:
Создание списков
Маркированные списки
Для перечисления информации удобно применять маркированные или нумерованные списки. В таких списках каждый новый элемент выделяется маркером или ему присваивается порядковый номер.
Маркированные списки задаются парными тегами
<UL>.....</UL>
Элементы списка начинаются с тега <LI>,
закрывающий тег </LI> не обязателен.
Например:
<UL>
<LI> первый элемент списка
<LI>второй элемент списка
</UL>
При помощи атрибута type можно задать следующие типы маркера:
circle - круг без заливки
dist - круг с заливкой (используется по умолчанию)
sguare - квадрат
Нумерованные списки
Нумерованный список обозначается парными тегами
<OL> ... </OL>
Например:
<OL>
<LI> первый элемент списка
<LI>второй элемент списка
</OL>
Атрибутом type можно задать тип нумерации:
1 - используются арабские цифры
A и a - большие или малые буквы латинского алфавита
I и i - большие или малые римские цифры
Атрибутом start можно задать номер первого элемента в списке.
Вставляем изображения
Для добавления на веб-страницу изображений используется одиночный тег IMG, который может иметь следующие атрибуты:
scr - задаёт URL изображения
alt - текст, который отображается на месте изображения, если браузер не может отобразить само изображение
border - толщина границы вокруг изображения в пикселях
align - задаёт выравнивание изображения
height - задаёт высоту изображения в пикселях
width - задаёт ширину изображения
vspace - задаёт величину свободного пространства сверху и снизу от изображения
hspace - задаёт величину свободного пространства слева и справа от изображения
Например:
<HTML>
<HEAD>
<TITLE>
Изображение
</TITLE>
</HEAD>
<BODY>
<IMG src="/foto.gif" border=4 height=400 width=400 alt="изображение размером 400 на 400">
Здесь специально указан не существующий URL изображения и поэтому оно не может быть отображено
</BODY>
</HTML>
Данный документ выглядит так:
Гиперссылки
Для навигации и связывания документов между собой в языке гипертекстовой разметки HTML предусмотрена возможность создания гиперссылок. Для этого используется элемент A, который задаётся парными тегами <A>....</A>. Обычно браузеры выделяют гиперссылки, чтобы их сразу можно было отличить от остального содержимого страницы - подчёркивание и синий цвет.
Для создания ссылки нужно задать атрибуту href элемента A URL нужного ресурса.
Например:
<A href="/1.html"> Первая страница сайта </A>
<A href="/2.html"> Вторая страница сайта </A>
В данном случай показан пример задания гиперссылки на документ, который находится в той же папке, что и ссылающаяся страница, для задания ссылки на документ находящийся на другом сайте необходимо указывать его полный URL:
<A href="http://www.yandex.ru/"> Яндекс </A>
Составим такой документ:
<HTML>
<HEAD>
<TITLE>
Создание гиперссылок
</TITLE>
</HEAD>
<BODY>
<A href="/1.html">Первая страница сайта</A><BR>
<A href="/2.html">Вторая страница сайта</A><BR>
<A href="http://www.yandex.ru/">Яндекс</A><BR>
</BODY>
</HTML>
После обработки браузером получается:
Чтобы создать изображение-гиперссылку достаточно заключить элемент IMG внутрь элементаA, например:
<A href="/1.html"> <IMG src="/foto.gif"> </A>
Таблицы
Важным элементом для упорядочивания данных являются таблицы, если Вы посмотрите на сайты в Интернет, то увидите, что многие из них построены именно на таблицах.
Примечание: Посмотреть исходный код любой веб-страницы можно щелкнув правой кнопкой на любом свободном от ссылок и картинок месте и выбрав в всплывающем меню пункт "Просмотр HTML-кода" в Internet Explorer или "Исходный код" в Opere.
Таблицы задаются парными тегами <TABLE>...</TABLE> и состоит из строк, задаваемых элементом TR - парные теги <TR>...</TR> (закрывающий тег не обязателен) и ячеек - элементTD, с парными тегами <TD>...</TD> (закрывающий тег так же не обязателен).
Для таблицы имеется возможность создавать заголовок, задаваемый парными тегами<CAPTION>...</CAPTION>, который должен располагаться непосредственно за открывающим тегом <TABLE>
Пример простейшей таблицы:
<HTML>
<HEAD>
<TITLE> Простейшаятаблица </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD> 1
<TD> 11
<TD> 111
<TR>
<TD> 2
<TD> 22
<TD> 222
</TABLE>
</BODY>
</HTML>
Пример таблицы с заголовком:
<HTML>
<HEAD>
<TITLE>
Таблица с заголовком
</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION> Пример таблицы с заголовком </CAPTION> <TR>
<TD> 1
<TD> 11
<TD> 111
<TR>
<TD> 2
<TD> 22
<TD> 222
</TABLE>
</BODY>
</HTML>
После обработки браузером это выглядит так:
Атрибуты таблиц
Многие параметры отображения таблицы задаются соответствующими атрибутами элементаTABLE, рассмотрим некоторые из них:
align - задаёт положение таблицы в окне браузера
bgcolor - цвет фона таблицы
border - толщина внешней границы
bordercolor - цвет границ таблицы
cellpadding - размер пустого пространства между границами и содержимым ячейки
width - ширина таблицы
height - высота таблицы
frame - задаёт отображаемые части внешней таблицы
Атрибуты для строк таблицы TR:
align - задаёт горизонтальное выравнивание текста
valign - задаёт вертикальное выравнивание текста
bgcolor - цвет фона строки
bordercolor - цвет рамки строки
Атрибуты для ячеек таблицы: Атрибуты для строк таблицы TR:
align - задаёт горизонтальное выравнивание текста
valign - задаёи вертикальное выравнивание текста
bgcolor - цвет фона ячейки
bordercolor - цвет рамки ячейки
<HTML>
<HEAD>
<TITLE>
Таблица
</TITLE>
</HEAD>
<BODY>
<TABLE width=60% frame=box>
<TR bgcolor=gold>
<TD>1
<TD>11
<TR>
<TD bgcolor=blue>2
<TD bgcolor=lime>22
</TABLE>
</BODY>
</HTML>
Получается такой документ:
БЕСПЛАТНО!
Для скачивания материалов с сайта необходимо авторизоваться на сайте (войти под своим логином и паролем)
Если Вы не регистрировались ранее, Вы можете зарегистрироваться.
После авторизации/регистрации на сайте Вы сможете скачивать необходимый в работе материал.
- Курс-практикум «Профессиональная устойчивость и энергия педагога»
- «Реализация ФГОС образования обучающихся с умственной отсталостью: специфика организации инклюзивного процесса для лиц с ОВЗ»
- «Методика организации инклюзивного процесса в дошкольном образовательном учреждении для детей с ОВЗ»
- «Организация работы с обучающимися с ОВЗ в практике учителя кубановедения»
- «Социальная работа с военнослужащими и членами их семей»
- «Основы профессиональной деятельности учителя-дефектолога (олигофренопедагога)»
- Тьюторское сопровождение в образовательной организации
- Методика преподавания основ безопасности жизнедеятельности
- Английский язык: теория и методика преподавания в образовательной организации
- Мировая художественная культура: теория и методика преподавания в образовательной организации
- Обучение детей с ограниченными возможностями здоровья в общеобразовательной организации
- Деятельность няни в рамках социального обслуживания населения: теоретические и практические основы
Чтобы оставлять комментарии, вам необходимо авторизоваться на сайте. Если у вас еще нет учетной записи на нашем сайте, предлагаем зарегистрироваться. Это займет не более 5 минут.