Основы языка программирования HMTL
Выполнил:
Студент группы ИВТ 14.03
Лебедев Е.И.
Принял:
Д.т.н., проф. Веселов А.А.
Тверь, 2015
Задание на выполнение:
Изучить основные команды языка программирования HTML, отработать изученные навыки, решив тестовые примеры.
Решение тестовых примеров
Пример 1:
<html>
<head>
<title> Пример 1 </title>
</head>
<body>
<h1> Пример 1 </h1>
<p> Это простейший пример HTML-документа </p>
<p> HTML-файл может быть одновременно открыт и в блокноте и в браузере </p>
<p> просто нажмите клавишу обновить в браузере, чтобы увидеть изменения в HTML-документе </p>
</body>
</html>
Это простейший пример HTML документа, созданный в редакторе Notepad. Он состоит из «головы» (head) и «тела» (body). В голове содержится название (title) документа, отображающееся на вкладке браузера. Тело состоит из заголовка, который задается с помощью тэга <h1>, где 1 – это максимально возможная величина шрифта. Она варьируется в пределах от 1 до 6. Также в теле содержится 3 абзаца, которые задаются тэгом <p>.
Пример 2:
<html>
<head>
<title> Пример 2 </title>
</head>
<body>
<h1> Стих </h1>
<h2> автор неизвестен </h2>
<p> Однажды в студеную зимнюю пору <BR> Сижу за решеткой в темнице сырой <BR> Гляжу поднимается медленно в гору <BR> Скормленный в неволе орел молодой </p>
<p> И шествую в важном спокойствии чинном <BR> Мой грустный товарищ махая крылом <BR> В больших сопогах, полушубке овчинном <BR> кровавую пищу клюет под окном </p>
</body>
</html>
В этом примере использован непарный тег <BR>, задача которого заключается в принудительном переходе на следующую строку. Так как HTML документ подстраивается под размер окна браузера, то нет необходимости использовать этот тег постоянно.
|
|
Пример 3:
<html>
<head>
<title> Пример 3 </title>
</head>
<body>
<h1 ALIGN = CENTER> колекция горизонтальных линий </h1>
<hr SIze=2 width = 100% COLOR=#CE00A6> <br>
<hr SIze=4 width = 50% COLOR=#65A4F7> <br>
<hr SIze=8 width = 25% COLOR=#000000> <br>
<hr SIze=16 width = 12% COLOR=#AB14A0> <br>
</body>
</html>
В этом примере показан еще один непарный тег <HR>, который создает разделяющую полосу толщиной (по умолчанию) 1 пиксель и шириной в 100% от ширины окна. Изменить параметры можно с помощью атрибутов. Атрибут «Size» отвечает за ширину полосы, «Width» за длину, в процентах от ширины окна. Атрибут «Color» изменяет цвет полосы, он может быть задан названием цвета, который есть в палитре, либо любым цветом, заданным шестнадцатеричным RGB кодом. К заголовку документа применен атрибут «Align», он задает расположение текста относительно рамки экрана. Текст может быть оцентрован или смещен вправо, либо влево.
Пример 4:
<html>
<head>
<title> Пример 4 </title>
</head>
<body>
<H1 ALIGN=CENTER> Работа со шрифтами </H1>
<p> Теперь мы знаем, что фрагменты текста можно выделять <B> жирным </B> <I> курсивом </I> или <U> подчеркнутым </U> шрифтом. Кроме того можно включать в текст фрагменты с фиксированной толщиной символа <TT> Имитация пишущей машинки </TT> </p>
<p> кроме того существуют логические стили </p>
<p> <EM> EM -oт английского emphasis акцент </EM> <BR>
<strong> Strong т английского emphasis-сильный акцент </strong>
</body>
|
|
</html>
В этом примере производилась работа с форматированием текста. При помощи тегов <b>,<i>,<u>,<s> текст можно выделить жирным, курсивом, подчеркиванием, либо зачеркнуть текст соответственно. Тег <TT> фиксирует ширину символа. Эти теги изменяют физический стиль текста. Так же существуют теги, изменяющие стиль текста логически, в примере были использованы теги <EM> и <Strong>. Они служат для указания акцента.