Нижние и верхние индексы

Знакомство с HTML

Цель работы: ознакомиться с базовыми приемами использования языка разметки HTML, с работой тегов и параметров для создания макета web-страниц.

Теоретические основы.

Тег[1] (html-тег, тег разметки) — управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации. HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Информация, заключенная между открывающим и закрывающим тегом, называется его контейнером. Весь тег (вместе с атрибутами) заключается в угловые скобки <>:

<имя_тега [атрибуты]>

Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (<html>...</html>). Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например, тег <img>.

Схема HTML-тега, выглядит следующим образом:

Схема парного тега: <имя Тега> </имя Тега>

Схема одиночного тега: <имя Тега>

Иногда в HTML тегах устанавливают атрибуты со значениями:

<имяТега атрибут="значение" ></имяТега>

<имяТега атрибут="значение" >,

где имяТега — это h1, p, b, img, a, table и др.

Теги HTML не чувствительны к регистру.
Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости.
Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки.

Краткий список тегов:

<html> - этот тег стоит в самом начале любой страницы, и обьявляет кодировки и саму страницу. </html> - этим тегом обязательно заканчиваются все страницы, точнее обьявляют конец страницы.

<head> </head> - между этими тегами находится невидимая часть сайта, документация.

<title><.title> - между этими тегами пишется название вашего сайта.

<body> </body > - между этими тегами пишется ввесь контент сайта - наполнение страницы.

<table> <tr> <td> - это таблица, одна из самых важных конструкций при построении сайта.

<h>... </h> <p>...</p> <li>...</li> - теги для написания заголовков, параграфов, списков для вставки текста на страницу.

<div></div> - блочный элемент, на котором можно построить весь сайт.
<img src="адрес" width="ширина" height="высота" alt="название" > - так вставляется изображение.

<a href="# адрес"> Страница 1 </a> - так делается ссылка на страницу.

Задание 1.

Создать несколько связанных страниц.

Первая страница index.html

Вторая страница Second.html

Указания к работе:

1. В папке home создать папку «new1», внутри этой папки создать папку «www» и «images».

2. В папке «www» хранятся html страницы index. html и 2.html

3. В папке «images» хранятся изображения для тестового сайта

4. Заполнить соответствующие текстовые документы, используя раздаточный материал.

Для страницы index.html:

<! DOCKTYPE HTML>

<head>

<title> Города мира </title>

</head>

<body>

<tr>

<td>

<img src="images/world.jpg" alt="Картина мира"

width="99.9%" height="30%" border="2" aling="center">

</td>

</tr>

</table>

<tr>

<br>Мумбай

<br>Гуанчжоу

<br>Москва

<br>Стамбул

<br>Лагос

</font>

</td>

<p> Мумбаи является столицей индийского штата Махараштра и он назывался Бомбей до 1996 года. Название Бомбей было производным от имени «Бом Baia», которое означало «Хороший залив» на португальском языке. История Мумбаи восходит к 1000 году до н.э., когда здесь процветали торговые отношения с другими странами мира, такими как Египет и Персия. Различные династии, включая Satavahanas, Вакатаков, Чалукьев, Маурьев и Rashtrakutas правили в этом месте. Позже, царь Маурьев Ашоки присоединил еще семь островов к своему королевству. Эти семь островов: Колаба, Остров старухи, Mahim, Wadala,Парел, Mazagaon и Matunga - Сион. В 1343 году архипелаг перешел в руки к мусульманам в Гуджарате.Португальцы, пришедшие в Индию для торговли в 16-м веке, захватили различные регионы на западном побережье, такие как Даман и Диу, и создали там свои торговые центры. Они взяли Бомбей под свой контроль силой и построили там множество церквей, включая Андреевскую церковь. Когда английский король Карл II женился на португальской принцессе Екатерине Браганса в 1662 году,

Бомбей был передан, как часть ее приданого. В 1668 году, Бомбей был передан в аренду за 10 фунтов золота в год британской Ост-Индской компании. Они перенесли свои штаб-квартиры в Бомбей в 1687 году.</p>

<p>Когда сэр Джордж Oxenden стал губернатором Бомбея, архипелаг и торговля на нем возродились с новой силой, он привлек множество торговцев гуджарати, строителей парусных судов и других производителей из различных частей мира. В это время был построен Бомбейский Замок. В 1838 году была введена система платы за выпас животных и многие владельцы скота не могли себе это позволить..

</p>

</font>

</td>

</tr>

</table>

<a href="Second.html"> Познакомиться с другими городами..</a>

</td>

</tr>

</table>

</body>

</html>

Для страницы Second.html:

<! DOCKTYPE HTML>

<html lang="en">

<head>

<meta charset="UTF-8">

<title> Города мира </title>

</head>

<body>

<table width="100%" height= "30%" border="2">

<tr>

<td>

<img src="images/world.jpg" alt="Картина мира"

width="99.9%" height="30%" border="2" align="center">

</td>

</tr>

</table>

<table width="100%" height="40%" border="2">

<tr>

<td valing="top" align="center" width="20%">

<font size="6">

<br>Мумбай

<br>Гуанчжоу

<br>Москва

<br>Стамбул

<br>Лагос

</font>

</td>

<td valing="top" align="justify">

<font size ="4">

<p> Гуанчжоу. Легенда гласит, что в древние времена из-за засухи, свирепствовавшей несколько лет подряд, и неурожаев зерна люди, жившие на территории нынешнего Гуанчжоу, голодали. Но однажды раздался мелодичный звук, и люди увидели плывущие со стороны Южно-Китайского моря пять облаков, на которых находились пять небесных богов; у каждого был наряд особого цвета, и каждый восседал на баране того же цвета, держащем во рту шесть цветков риса; эти облака, согласно легенде, спустились на улицы Чутина (древнего города, на месте которого ныне расположен Гуанчжоу). Божества дали рис людям, оставили им пятерых баранов, а сами вернулись на небеса.

Люди посеяли семена риса на земле Гуанчжоу, и с тех пор здесь, как говорится в легенде, всегда были благоприятный климат и обильные урожаи; пяти баранам люди воздвигли каменный памятник на склоне холма (а впоследствии и храм, где поклонялись им[). Благодаря пяти овнам Гуанчжоу получил своё название...

</p>

</font>

</td>

</tr>

</table>

<table width="100%" height="10%" border="2">

<tr> <td valing="top">

<a href="index.html"> Вернуться на главную страницу</a>

</td>

</tr>

</table>

</body>

</html>

*Для разбиения web-странички на функциональные области, всю область представляют в виде таблицы, высота и ширина которой задаются либо в пикселях, либо в процентах от ширины окна (Пример: <table width="940" height="350" border="2" >). Значения указываются в кавычках. Количество таблиц может быть любым. Используя теги <table>…. </table> друг за другом web-страница будет разбиваться последовательно на указанное количество блоков. Для разбиения пространства не только на блоки, расположенные по вертикали, но и по горизонтали, нужно внутри теги <table>…. </table> использовать теги <td> …. </td>. Для задания особых параметров выбранной области внутри открывающего тега прописываются свойства, например, <td valign="top" align="center"> ……</td>.

Связь web-страниц между собой осуществляется с помощью тега

<a href="# адрес "> Имя_страницы </a>. Имя главной web-страницы должно оставаться index, имена остальных страниц могут быть любыми.

Задание 2.

Цель:ознакомиться с языком разметки страницы HTML.

Элементы h1, h2, h3, h4, h5, h6

Структурирование тела документа выполняется внутри элемента <body> с помощью заголовков, задаваемых элементами h1, h2, h3, h4, h5, h6.

Элементы заголовков являются парными, поэтому должны иметь открывающий <h1> и закрывающий </h1> теги. HTML располагает шестью уровнями заголовков: h1 (самый верхний), h2, h3, h4, h5 и h6 (самый нижний). Функции элементов заголовков подобны обычным стилям заголовков в текстовых редакторах. Действие этих шести тегов представлено на рисунках ниже:

Код:

Отображение:

Пример 1. Создание web-страницы каталога архитектурных решений

1. Отформатируйте заголовок «Каталог архитектурных проектов» с помощью тегов <h1> и </h1>.

2. Отформатируйте заголовок «Проекты для Вашего будущего дома» с помощью тегов <h2> и </h2>.

3. Отформатируйте заголовки «Проекты домов» и «Площади домов» с помощью тегов <h3> и </h3>.

4. Основной текст разделите на абзацы с помощью тега <p>. Внутри первых двух абзацев используйте тег <br /> для переноса строки. В результате Ваш код должен выглядеть следующим образом (рисунок 1).

5. Просмотрите результат в браузере.

Рисунок 1

Разделение текста на абзацы:

Тег <p> задает начало абзаца и вставляет сверху абзаца расстояние – отступ для отделения этого абзаца от предыдущего.

Принудительный разрыв строки:

Тег <br /> позволяет выполнить перенос оставшейся части текста абзаца на следующую строку. Это непарный тег и в отличие от тега абзаца не увеличивает интервал между строками.

Маркированные и нумерованные списки:

Средствами HTML можно создавать любые списки: нумерованные (цифровые и буквенные) и маркированные с разными типами маркеров.

Тег <ul>…</ul> формирует маркированный список.

Тег <ol>…</ol> формирует нумерованный список.

Отдельный элемент списка как в <ul>, так и в <ol> формируется с помощью тега <li>.

Пример 2. Создание нумерованного списка

1. Создайте нумерованный список под заголовком «Проекты домов».

2. Создайте маркированный список под заголовком «Площади домов». Ваш код будет выглядеть следующим образом (рисунок 2).

Рисунок 2

Списки можно вкладывать друг в друга.

Начертания шрифтов

Тег <b>…</b> – позволяет отобразить текст полужирным шрифтом.

Тег <i>…</i> – позволяет отобразить текст в курсивном начертании.

Тег <u>…</u> – отображает подчеркнутый текст.

Например:

В этом случае текст будет отображен <b><i> жирным курсивом </i></b>, но не подчеркнутым.

А в этом случае текст будет написан <b><i><u> жирным подчеркнутым курсивом </u></i></b>.

Нижние и верхние индексы

Тег <sub> и </sub> позволяет опустить текст на полстроки ниже обычного текста.

Тег <sup> и </sup> позволяет поднять текст на полстроки выше обычного текста. Текст, расположенный между этими тегами, будет изображаться меньшим шрифтом, по сравнению с обычным текстом.

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

4.Сохраните файл. Просмотрите через браузер. Web-страница должна выглядеть следующим образом (рисунок 3).

Рисунок 3

Пример 3. Вставка изображений

Для вставки изображений используется тег <img>. Обязательным для этого тега является атрибут src (от английского SouRCe – источник). Он определяет путь до графического файла, изображение которого должно быть выведено на web-странице.

Для вставки изображения используется команда <img src="Имя файла" />

Например: <img src="image1.jpg" alt="Картинка" />

Атрибут alt необходим для того, чтобы при просмотре web-страницы в режиме отключенных изображений, вместо отсутствующей картинки была надпись, которая прописана в атрибуте alt. Также alt-тексты рекомендуется использовать всегда, т.к. поисковые машины анализируют их как ключевые слова при поиске изображений. Графические файлы могут быть в формате jpg, gif, png и обязательно в цветовой модели RGB.

Список всех атрибутов тега img:

align – определяет как рисунок будет выравниваться по краю и способ обтекания текстом;

alt – альтернативный текст для изображения; 

border – толщина рамки вокруг изображения; 

height – высота изображения; 

hspace – горизонтальный отступ от изображения до окружающего контента; 

src – путь к графическому файлу; 

vspace – вертикальный отступ от изображения до окружающего контента; 

width – ширина изображения; 

usemap – ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

Указания к работе

1. После списка площадей домов вставьте в web-страницу изображения проектов коттеджей project_1.jpg и project_2.jpg. Код вставки изображений будет выглядеть следующим образом:

2. Просмотрите результат в браузере (рисунок 4)

Рисунок 4

Знакомство с PHP

Нижние и верхние индексы

Поиск по сайту