Язык разметки HTML

Партнерка на США и Канаду по недвижимости, выплаты в крипто

30% recurring commission
Выплаты в USDT
Вывод каждую неделю
Комиссия до 5 лет за каждого referral

ЛАБОРАТОРНЫЙ ПРАКТИКУМ

Язык разметки

HTML

г. Благовещенск 2008 г.

Данный практикум является практическим руководством для создания сайта в редакторе HTML.

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

В практикуме использованы материалы электронного учебника Алленовой Натальи, который располагается по адресу: http://*****.

Задание 1.

Создайте папку.

Откройте программу блокнот: пуск – программы – стандартные – блокнот.

Наберите следующий текст:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! :)
</body>
</html>

Сохраните файл в своей папке, дав ему имя index. html.

К сведению:

<head> </head> - голова документа
<body> </body> - тело документа

Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации

<title>- заголовок(Internet Explore)

Все тэги, расположенные между <body> </body> - непосредственное содержание документа

Задание 2

Окрасьте текст «Добро пожаловать!» в красный цвет набрав следующее:

<font color="#CC0000"> Добро пожаловать! :) </font>

Сохраните изменения.

Откройте файл index. html в своей папке и обновите содержимое нажав

К сведению:

Все цвета интернета можно найти по ссылке http://www. *****/tools/colors/.

Задание 3

Сделайте весь текст страницы синим, кроме текста, для которого прописаны теги <font></font>

НЕ нашли? Не то? Что вы ищете?

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>

Посмотрите изменения в файле index. html нажав

К сведению:

Если цвет текста в <body> не задавать, то по умолчанию он будет черным.

Задание 4

Установите цвет фона:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>

Обновите содержимое.

Измените расположение текста по центру и измените цвет фона и текста:

<html>

<head>

<title>Мой первый шаг </title>

</head>

<center>

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать!</font> :) </center>

</body>

</html>

К сведению:

Не следует также употреблять слишком много различных цветов на вашей страничке, это, как и яркий фон, отвлекает от содержания, мешает прочтению и выставляет вас самого не в лучшем свете.

Задание 5

Измените расположение текста, используя тег <div> </div> и атрибут align:

1) <div align="center"> текст </div>
2) <div align="left"> текст </div>
3) <div align="right"> текст </div>
4) <div align="justify"> текст </div>

К сведению:

(1) – расположение по средине

(2) – расположение слева

(3) – расположение справа

(4) – расположение по краям документа.

Задание 6

Введите заголовок третьего уровня <h3></h3> :

<H3>Здравствуйте, это моя первая страница.</H3>

К сведению:

Чем меньше уровень заголовка, тем крупнее выглядит шрифт

Задание 7

Наберите следующий параграф:

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг?

</p>

К сведению:

Параграф не может содержать в себе другие параграфы, и также тэг <div></div>

Однако <div> может содержать в себе параграфы

Задание 8

Выделите фрагмент текста:

<font size="+1"> еще один виртуальный друг? </font>

К сведению:

Атрибут size тэга <font></font> устанавливает желаемый размер шрифта:

<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>

Задание 9

Измените фрагменты текста применив:

<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<tt> моноширинный шрифт </tt>

<pre> текст (куча пробелов) текст

текст (куча пробелов) текст

</pre>

<u> Подчеркнутый текст </u>

К сведению:
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>

<small> Малый </small>
Нормальный текст
<big> Большой </big>

Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>

< - <
> - >
" - "
  - пробел

& - &

Линия задается тэгом <Hr> и не требует закрывающего тэга:

<Hr align="right"> (center или left)
<Hr width="30%"> (ширина линии в процентах/пикселях)
<Hr size="6"> (толщина линии)

<Hr NoShade> (отмена объемности)
<Hr color="cc0000"> (цвет линии, только в IE)

Задание 10

Вставьте картинку, используя следующий тег:

Измените ее, используя следующее:

К сведению:
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:
<img src="pr1.png" align="right">
Но это не все: текст может располагаться внизу картинки (это по умолчанию, посередине - (2), и вверху - (3):
(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">
Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:
(1) - <img src="pr1.png" vspace="10">
(2) - <img src="pr1.png" hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">

Объяснения по пунктам:

(1) - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800хна 600 точек. В нашем примере расстояние равно 10 пикселям.

(2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т. к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т. к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.

(4) атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).

(5) - атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, те же умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...

(6) – атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.

Задание 11

Сделайте картинку фоном документа, используя следующий тэг боди:
<body text="#336699" bgcolor="#000000" background="ваш_фон. jpg">

К сведению:

Атрибут background указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что фоновая картинка лежит в той же директории (папке), что и документ.

Задание 12

Используя атрибут clear и несколько его значений - all, left, right. выровняйте по левому краю картинку

К сведению:
All - завершить обтекание объекта текстом.

Left - завершить обтекание текстом объекта, выровненного по левому краю.

Right - завершить обтекание текстом объекта, выровненного по правому краю.

Задание 13

Сделайте ссылку на другой документ, используя тег <a></a>

К сведению:

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

link - цвет просто ссылки,

alink - цвет активной ссылки (нажатой),

vlink - цвет уже посещенной ссылки.

Как и цвет для всего текста в документе, цвета ссылок прописывается в <body>.

Можно задать различные цвета для разных блоков текста в документе (<font color="…"></font>).

Для текстовых ссылок можно задать разный цвет – это делается при помощи тэга <font> и его атрибута color:
<a href="prf. html"><font color="#CC0000">посмотреть мои фотографии</font></a>
Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.

Ссылка на почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт):
<a href="mailto:*****@***ru"> *****@***ru </a>

Задание 14

Сделайте закладки, используя атрибут тэга A - name:
<A name=" podzagoiovok ">подзаголовок</A>
Затем, сделайте на них ссылку:
<A href="#podzagoiovok">Ссылка на подзаголовок</A>

К сведению:
Заметьте - <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую ссылаетесь, обязателен. Можно ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:
<A href="ancorpri. html# podzagoiovok "> Ссылка на подзаголовок из какого-то другого документа </A>

Задание 15

Сделайте вашу картинку ссылкой, используя следующий пример:

<a href="prf. html"><img src="primtocodephoto. gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a>

затем уберите рамку, задав картинке атрибут border="0"

К сведению:

Цвет рамки вокруг картинки задается атрибутом bordercolor, например:
<img src="picture. gif" border="3" bordercolor="#CC0000">

Но, если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который задали для ссылок в тэге body с помощью link, vlink, alink, т. е. атрибут bordercolor в этом случае уже не влияет на цвет рамки вокруг картинки.
Атрибут target="_blank" - указывает на то, что документ (картинка), на который ведет ссылка, откроется в новом окне броузера.

Задание 16

Введите элементы списка используя тэги <ul> и <li>

<ul>
<li>Текст один
<li>Текст другой
<li>Текст сякой
<li>Текст эдакий
</ul>

К сведению:

У тэга <li> есть атрибут type, он отвечает за стиль элемента списка, визуально это выглядит так:

По умолчанию - (1)

Полый кружок - (2)

Квадратный - (3)

В случае (1) - <li type="disk">,
в случае (2) - <li type="circle">,
в случае (3) - <li type="square">.

Упорядоченные списки вводятся тэгом <ol>:

Для упорядоченных списков также может употребляться атрибут type. Для упорядоченных списков возможны следующие значение атрибута type:

1	арабские цифры	1, 2, 3, ...
a	буквы нижнего регистра	a, b, c, ...
A	буквы верхнего регистра	A, B, C, ...
i	римские цифры в нижнем регистре	i, ii, iii, ...
I	римские цифры в верхнем регистре	I, II, III, ...

Здание 17

Сделайте на вашей страничке бегущую строку

<marquee height="10" width="270" loop="2">
бегущая строка
</marquee>

К сведению:

Текст, который мы помещаем в тэге <marquee></marquee>, становится бегущей строкой.

bgcolor - цвет фона бегущей строки,

height - высота строки,

width - ширина строки.

Атрибут loop задает сколько раз прокрутится строка,

Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).

Behavior - поведение строки - behavior="scroll" (slide, alternate).

Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию).

Slide - прокрутка с остановкой, строка пробегает до края и останавливается.

Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края.

Alternate - строка будет двигаться от края к краю

Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до самое медленное движение, 10 - самое быстрое.

Задание 18

Сделайте на страничке несколько фреймов, используя тег <frameset></frameset>:

<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset rows="100,*,150">
<frame src="logo. html">
<frame src=" glavnaya. html">
<frame src="menu. html">
</frameset>
</html> (посмотреть)

К сведению:

При помощи фреймов броузер делиться на несколько окон, заданного размера, в которых располагаются независимые друг от друга документы.

атрибут cols отвечает за вертикальное расположение (столбцами).

атрибут rows – горизонтальное расположение

Одновременно эти параметры использовать нельзя.

Ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:
<frameset cols="10%,15%,75%">

Помните, что в сумме это все должно равняться 100%

Задание 19

Поменяйте расположение фреймов следующим способом:

<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo. html">
<frame src="menu. html">
</frameset>
<frame src="glavnaya. html">
</frameset>
</html>

К сведению:

Scrolling - атрибут тэга <frame>. Он может принимать несколько значений:

no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах;

yes - это значит полоса прокрутки будет всегда;

auto - полоса прокрутки появится только тогда, когда она нужна

Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма.

Задание 20

Создайте документ, содержащий ссылки (меню). Сохраните файл под именем menu. html

<html>
<head>
<title>Документ с Меню</title>
</head>
<body >
<center>
<a href=" glavnaya. html" target="window-1">Главная</a>
<a href="onas. html" target="window-1">О нас</a>
<a href="istoriya. html" target="window-1">История</a>
<a href="kontakt. html" target="window-1">Контакты</a>
<a href="dostigeniya. html" target="window-1">Достижения</a>
</center>
</body>
</html>

К сведению:

Указав параметр target="window-1", где window-1 - это имя фрейма, в котором располагается документ с основным содержанием, все ссылки открываются в нужном фрейме, а меню никуда не исчезает

Чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение top:
<a href="project. html" target="_top">Мой проект о рыбках</a>

Задание 21

Создайте таблицу на любой созданной странице

<table>
<tr>
<td bgcolor="#FFCC33">ИМЯ</td>
<td bgcolor="#336699">ФАМИЛИЯ</td>
<td bgcolor="#FFCC33">ОТЧЕСТВО</td>
</tr>
<tr>
<td bgcolor="#336699">Сидоров</td>
<td bgcolor="#FFCC33">Иван</td>
<td bgcolor="#336699">Петрович</td>
</tr>
</table>

К сведению:

Таблица задается тэгом:
<table></table>

<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы

Если вы хотите задать фон для ряда, то атрибут bgcolor прописывается для тэга <tr>:
<tr bgcolor="#FFCC33">
Если вы хотите задать фон для всей таблицы, то атрибут bgcolor прописывается для тэга <table>:
<table bgcolor="#FFCC33">

В каждой ячейке могут находиться и картинки, и текст (+тэги и атрибуты применяемые к ним), и даже таблицы (в этом случае они называются - вложенные таблицы). Т. е. тэги, которые мы применяем для форматирования содержимого (контента) - все те же.

Задание 22

Задайте ширину и высоту ячейки таблицы

К сведению:

С помощью атрибутов height и width - можно задать высоту и ширину ячейки для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах.

Задание 23

Выровняйте надписи в ячейках используя тэги для выравнивания содержимого <center> или атрибут align.

К сведению:

Значение justify при употреблении с тэгом <td> атрибут align принимать не может.

Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):

Задание 24

Объедините 2 первые ячейки в одну, последний столбец в один ряд, используя атрибуты colspan и rowspan.

<table>

К сведению:

Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов

Задание 25

Уберите пространства между ячейками таблицы:

К сведению:

Можно наоборот увеличить пространство между ячейками, допустим, пусть cellspacing="5"

Задание 26

Задайте таблице рамку равную 3 пикселям и задайте рамке цвет:

<table border="3" bordercolor="#000000">

К сведению:

Рамка вводится параметром border.

Некоторые ссылки на русском языке

для дальнейшего изучения редактора HTML

· перевод "Махаон" (http://www. *****/digest/beght_r1.html)

html. tar - вы можете скачать архив "Введения в HTML"

· Краткое описание синтаксиса HTML (http://www. *****/FWO/quick_r. html)

· Учебник по HTML, Виталий Павленко (http://lemoi-www. *****/lect/bookhtml/begin. htm)

· Спецификация HTML 4.0, перевод Юлии Поданевой (http://*****/~julia/)

· Основы HTML 4.0 (William Robert Stanek), PC Magazine Online, Публикуется в выпуске PC Magazine от 01.01.01 г. (http://*****/)

· Справочное руководство по HTML 4.0 (http://htmlhelp. *****/)

· Описание HTML на Сервере Информационных Технологий. (http://www. *****/internet/html/index. shtml)

· Описание HTML Якова Каца (http://www. megapolis. org/internet/web_manual/web21.html)

· Изучение HTML 3.2 на примерах. (http://www. *****/internet/html32/all_rush. htm).

· КРАТКОЕ РУКОВОДСТВО ПО HTML . (http://www. *****/internet/html/refer. shtml)

· Краткое руководство по языку HTML 3.2, (http://www-sbras. ict. nsk. su/win/docs/html-gd/contents. html)

· HTML. Начальный курс (http://pwd. *****/html/1_html. htm)

· Тэги списков (http://pwd. *****/html/2_html. htm)

· Новые технологии информационного сервиса в Internet (HTML, CGI и др.) Павел Храмцов. (http://www. *****/programming/khramtsov/index. shtml)

· Формы (http://pwd. *****/html/3_html. htm)

· Справочник по браузеронезависимому HTML (http://html. *****/)

· WML - язык разметки WAP-приложений (http://www. *****/internet/articles/wmldoc. shtml)

· Введение в ASP, Григорий Грин (http://www. *****/internet/asp/asp_intro. shtml)

Для заметок

________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

__________________________________________________________________________________________________________________________________________________________

Партнерка на США и Канаду по недвижимости, выплаты в крипто

Некоторые ссылки на русском языке

для дальнейшего изучения редактора HTML

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы