Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Язык html. Создание простейших Web-страниц

↑

⇐ ПредыдущаяСтр 28 из 28

Цель работы: Ознакомиться с основами языка HTML для создания Web-страниц.

Теоретические сведения

Общие положения

Язык HTML (Hypertext markup language) предназначен для разметки текстовых документов (т.е. для форматирования текста) и не является самостоятельным языком программирования.

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

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

Если есть открывающий тэг, то должен быть и закрывающий: </html> - точно такой же, только впереди имеется наклонная черта. Некоторые тэги, например < br > (перенос текста на другую строку), не требуют закрывающего тэга. Тэг < br > не добавляет пустую строку, он заставляет программу просмотра выводить стоящие после него символы с начала новой строки.

К обязательным тэгам также относятся тэги < head > (< /head >) и < body > (</ body >).

Тэг < head > (</ head >) (в переводе с английского - голова) определяет служебную информацию документа. В рамках этого тэга можно применить еще один тэг - < title > (</ title >). Этот тэг определяет название документа. Т.е. вся информация, заключенная в скобки из тэгов < title > и </ title >, является непосредственно именем окна создаваемого документа.

Тэг < body > (</ body >) (в переводе с английского - тело) определяет тело документа. Т.е. вся информация, которая находится между тэгами < body > и < /body >, будет являться текстом документа.

Этих знаний уже вполне достаточно чтобы сделать первый шаг в создании страницы.

Пример:

<html>

<head>

<title>

Мой первый шаг

</title>

</head>

<body>

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

<br>

Добро пожаловать!

</body>

</html>

Для того чтобы применить этот простейший алгоритм, необходимо открыть программу Блокнот, записать туда этот пример и сохранить документ, дав ему расширение html. Затем необходимо открыть этот документ установленным на компьютере брaузером, результат показан на рисунке 22.1.

Рисунок 22.1 - Окно браузера Internet Explorer, в котором отображен приведенный выше html-документ

При дальнейших изменениях в текстовом документе (в Блокноте) необходимо сохранять файл каждый раз перед просмотром его в брaузере, а в брaузере не забывать нажимать кнопку «Обновить» для просмотра внесенных изменений.

22.1.2 Применение тэгов для задания цветов страницы

Все цвета прописываются своими кодовыми названиями. Ниже приведены некоторые из цветов (все «безопасные» цвета, т.е. воспринимаемыми одинаково всеми браузерами, можно посмотреть по следующему адресу: http://www.artlebedev.ru/tools/colors/):

FFFF00 – желтый,

CC0000 – красный,

FF00FF – фиолетовый,

3300FF – синий,

00CCFF – голубой,

00CC00 – зеленый,

FFFFFF – белый,

000000 – черный и т.д.

Для задания цвета можно применить многофункциональный тэг < font > (</ font >). Многофункциональным он называется, потому что в нем может задаваться не только цвет, но и текст, например:

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

Теперь выражение «Добро пожаловать!» будет красного цвета.

Цвет всего текста в документе можно задавать через тэг < body >. Выглядеть это будет следующим образом:

Цвет фона задается все тем же тэгом < body >. Это выглядит так:

В тэге < body > можно одновременно прописать и цвет текста в документе, и цвет фона. Выглядит это так:

Параграфы

Параграфы, т.е. разделы документа, вводятся тэгом < p > (</ p >).

С помощью параграфов можно центрировать текст:

<p align="center">текст</p>

выровнять текст по левому краю:

<p align="left">текст</p>

выровнять текст по правому краю документа:

<p align="right">текст</p>

Указание выравнивания текста в параграфе по какому-либо критерию будет распространяться только на информацию, размещенную между тэгами < p > (</ p >).

Если не задавать параграфы, то текст во всем документе выравнивается по умолчанию по левому краю. К параграфу уже не нужен тэг < br > для переноса строки, т.к. перенос задается по умолчанию. Если перенос не нужен, есть альтернативный тэг < p align="center">:

<center>текст</center>

Шрифты

Размер шрифта задается с помощью тэга < h > (</ h >). Значений (т.е. размеров шрифтов) у этого тэга только шесть и задаются они соответственно:

<h1> текст </h1>

<h2> текст </h2>

<h3> текст </h3>

Этот тэг помимо размера увеличивает также и толщину линий букв (делает буквы жирными), что не всегда необходимо. Помимо этого у тэга < h > есть еще одно свойство: как и у тэга < p > (</ p >), перенос строки также задается по умолчанию.

Если текст переносить не надо, а надо просто выделить часть текста, то используют многофункциональный тэг < font > (</ font >). Применяется он следующим образом:

<font size=”+4”> текст </font>

У него есть семь размеров: от –2 до +4 и текст не становится жирным. Стандартный размер по умолчанию +0.

Курсив, подчеркнутый текст и полужирный текст задаются следующим образом:

<b> Полужирный текст </b>

<i> Наклонный текст (курсив) </i>

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

К одному фрагменту текста может применяться сразу несколько тэгов:

<u> <b> <i> текст </i> </b> </u>.

Для задания шрифта текста, применяется все тот же тэг < font > (</ font >). Это будет выглядеть следующим образом:

<font face=”ARIAL”> текст (шрифт Arial)</font>

С помощью атрибута face задали шрифт Arial.

Рисунки

Тэг для вставки рисунка (в примере он имеет название my.jpg) выглядит следующим образом:

Необходимо отметить, что все расположенное между кавычками - ссылка (путь к рисунку). Данный пример (<img src="my.jpg">) говорит о том, что рисунок находится в том же каталоге (директории, папке), в которой находится и файл html. Если рисунок находится в поддиректории (например, my), то ссылка на него будет выглядеть так:

Если рисунок находится на уровень выше, а документ находится в поддиректории, то ссылка на него будет такой:

Если рисунок лежит на другом сайте, то путь к нему прописывается полностью:

Для удобства лучше помещать рисунок в ту же директорию, что и файл html.

Для того чтобы рядом с рисунком располагался весь текст, следует знать, что у некоторых тэгов есть параметры (атрибуты). Параметр может задаваться один, а может быть их несколько. Например, у тэга < p > есть < p align="center">. Параметр align есть и у рисунков:

Это означает, что рисунок будет прижат к левому краю экрана, а текст будет обтекать его справа. Чтобы сделать наоборот (рисунок справа, а текст - слева), надо прописать right:

Текст может располагаться внизу рисунка (по умолчанию) - (1), справа и лева от рисунка - (2), и вверху - (3):

(1) - <img src=" my.jpg " align="bottom">

(2) - <img src=" my.jpg " align="middle">

(3) - <img src=" my.jpg " align="top">

Кроме параметра align существует еще несколько параметров:

(1) - <img src=" my.jpg " vspace="10">

(2) - <img src=" my.jpg " hspace="30">

(3) - <img src=" my.jpg " alt="моя фотография">

(4) - <img src=" my.jpg " width="100">

(5) - <img src=" my.jpg " height="200">

(6) - <img src=" my.jpg " border="5">

Это означает:

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

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

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

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

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

(6) - параметр border - рамка вокруг рисунка (толщина линии рамки - в пикселях). Можно не задавать.

Все параметры могут использоваться одновременно друг с другом.

Рисунок также можно сделать фоном документа. Фон прописывается в открывающем тэге body:

Параметр Background указывает на то, где находится фоновый рисунок. В примере он указывает, что рисунок лежит в той же директории, что и файл html.

Ссылки

Интернет - страница может состоять из нескольких документов. Один из них - главный index.html (или main.html). Он открывается первым и должен обязательно находиться на Вашем сайте в Интернете.

Остальные документы можно называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории, а могут находиться в разных директориях.

Ссылкой на эти другие документы (части страницы) может быть текст (фраза, слово), а может быть и картинка (рисунок).

Рассмотрим текстовую ссылку.

Для начала необходимо создать новый документ (допустим, prf.html) в той же директории, где находится главный документ index.html. Пусть prf.html - документ с вашими фотографиями. Тогда можно фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:

<a href="prf.html">посмотреть мои фотографии</a>

Тэг < a></a > делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же, как в случае с картинками:

(1) - <a href="prf.html">мои фотографии</a>

(2) - <a href="/photos/prf.html">мои фотографии</a>

(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

В случае (1) документ находится в той же директории, что и документ, в котором находится ссылка на prf.html, в случае (2) - документ находится в поддиректории /photos, в случае (3) ссылаются на сайт http://www.homepage.ru, где находится необходимый документ.

Цвет ссылки прописывается следующим образом:

Link - цвет ссылки, alink - цвет активной (нажатой) ссылки, vlink - цвет уже посещенной ссылки. В примере цвета одинаковые, но они могут быть разными.

Ссылка на почтовый ящик прописывается так:

<a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишите письма </a>

Как уже упоминалось ранее, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:

Ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д.).

Делается это по такому же принципу:

<a href="http://www.melody.ru/music.mp3"> скачать песню </a>

Если адрес указан таким способом, то это означает, что в указанном каталоге есть файл вроде index.html, который загрузится по умолчанию:

<a href="http://www.melody.ru/"> музыкальный сайт </a>

Для того чтобы при нажатии на маленькую картинку загружалась картинка большего размера, делают ссылкой картинку (допустим, small.jpg) и ссылаются на другую картинку (допустим, big.jpg):

В этом случае большая картинка откроется в том же окне.

Для того чтобы картинка (или любой другой файл-документ) открылась в новом окне, следует воспользоваться параметром тэга < a></a > target:

Итак, target=”_blank” указывает на то, что документ (в нашем случае картинка), на который ведет ссылка, откроется в новом окне браузера.

Порядок выполнения работы

1. Ознакомиться с теоретическими сведениями.

2. Создать чистую html-страницу. Присвоить ей свое имя, используя тэг < title >. Написать сведения о себе.

3. Задать фон страницы (любой из списка). Присвоить второй цвет той текстовой информации, которая была записана, и выделить третьим цветом первое слово из текста.

4. Разместить первое слово текста по центру страницы, а весь остальной текст разместить по правому краю.

5. Выделить первое слово подчеркнутым шрифтом, задав ему наибольшие размеры. Весь остальной текст выделить наклонным шрифтом и, пользуясь тэгом < font >, задать последнему слову текста размер «-2».

6. Разместить на странице какой-либо из имеющихся на компьютере рисунков. Разместить его по левому краю. Справа и сверху от рисунка вставить его краткое описание. Дать ему название и вписать его с помощью тэга < alt >. Заключить рисунок в рамку.

7. Создать еще один html-файл и разместить его в той же папке, что и первый. Использовать тот же рисунок для задания фона в новом файле. Затем в первом файле создать ссылку на второй файл, поместив ее ровно под рисунком.

8. Сохранить созданный файл и просмотреть его в браузере.

9. Показать преподавателю полученные результаты.

Содержание отчета

1. Цель работы.

2. Краткие теоретические сведения.

3. Краткое описания хода выполнения лабораторной работы.

4. Письменные ответы на контрольные вопросы по указанию преподавателя.

22.4 Контрольные вопросы

1. Для чего предназначен язык разметки html?

2. Какие тэги являются обязательными?

3. Какой тэг нужно использовать, если в тексте надо только одно слово выделить другим цветом?

4. Каким образом задается фон страницы?

5. Как сделать текст прилегающим к правой стороне страницы?

6. Сколько значений имеет тэг < h >?

7. Как в тексте выделить только одно слово другим шрифтом?

8. Как вставляются в файл рисунки, и какие действия можно применить к тексту, сопровождающему эти рисунки?

9. Что такое активная ссылка?

10. Как прописывается в ссылку почтовый адрес?

ЛАБОРАТОРНАЯ РАБОТА № 23

ЯЗЫК HTML. ОФОРМЛЕНИЕ ПРОСТЕЙШИХ WEB-СТРАНИЦ

Цель работы: научиться создавать с помощью html-кода списки и таблицы.

Теоретические сведения

Списки

В языке разметки HTML информация может быть представлена в виде списков, аналогичных маркированным спискам WORD:

· Текст один

· Текст другой

· Текст третий

· Текст четвертый.

Список состоит из тега-контейнера списка, определяющего его тип, и стандартных тэгов < li >, предваряющих каждый пункт списка. Упорядоченный список открывается тегом < ol >, а каждый его пункт стандартным тегом < li >.

Списки прописываются следующими тэгами:

<ol>

<li>Текст один</li>

<li>Текст другой</li>

<li>Текст третий</li>

<li>Текст четвертый</li>

</ol>

Вид маркеров в списке можно изменить:

(1) – закрашенный кружочек (disk) ●;

(2) – не закрашенный кружочек (circle) ○;

(3) – не закрашенный квадратик (square) □.

У тэга < li > есть параметр type:

В случае (1) - <li type="disk">

В случае (2) - <li type="circle">

В случае (3) - <li type="square">

Табуляция задается следующим образом: <ul>Ваш текст</ul>.

Чтобы отступ (табуляция) был больше, надо вкладывать тэг < ul > в самого себя:

<ul><ul>Два отступа</ul></ul>

<ul><ul><ul>Три отступа</ul></ul></ul>

Специальные символы

Специальные символы не часто употребляются, но, тем не менее, в текстах они бывают необходимы:

(1) - &lt - знак меньше (<)

(2) - > - знак больше (>)

(3) - " - кавычка (")

(4) -   - пробел

(5) - & - знак &

Так как все символы, заключенное между скобками < и > браузер воспринимает как тэг, то чтобы ввести в текст символы скобок, придумали специальные символ (1) и (2).

Применить вышеуказанные специальные символы можно, как в следующем примере:

Символ пробела (4)

слово1 &nbsp;слово2 &nbsp;слово3 = слово1 слово2 слово3

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

Символ & используется для написания спецсимволов, поэтому для него тоже существует спецсимвол &amp.

Специальные символы не надо включать ни в какие тэги, они считаются просто текстом.

Таблицы

Таблицы являются основным элементом разметки html страниц. С их помощью определяются зоны, в которых на странице будут располагаться объекты. В ячейках таблицы могут помещаться рисунки, текст, списки, ссылки, другие таблицы и т.д.

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

<table > (</ table >)

Таблица состоит из строк и столбцов (ячеек), поэтому их надо указать:

<tr></tr> - строка таблицы;

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

Сначала следует задавать строки (пусть их будет две):

<table>

</table>

Затем в каждой строке задаются столбцы (ячейки):

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Теперь надо заполнить получившийся каркас:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Первая цифра в этих записях - это номер ряда, а вторая - номер столбца (1х2 - первый ряд, второй столбец и т.д.).

Если посмотреть, что уже получилось, то это будет выглядеть так:

1x1	1x2	1x3
2x1	2x2	2x3

Фон таблицы задается параметром bgcolor=" цвет фона ". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В следующем примере зададим фон для каждого столбца.

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

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

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

Теперь осталось лишь выровнять содержимое внутри таблицы:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

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

Тэги, которые применяются для форматирования текста - те же, что для обычного текста.

Тэги для центрирования текста могут прописываться в каждой ячейке.

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

Пример:

<table>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

Таблица может создаваться с рамкой. Рамка вводится параметром border. Зададим рамку шириной 3 пикселя: <table border="3">.

Результат показан на рисунке 23.1.

Рисунок 23.1 – Таблица с закрашенным фоном ячеек

⇐ Предыдущая 19 20 21 22 23 24 25 26 2728

Познавательные статьи:

Формы дистанционного обучения

Передача мяча двумя руками снизу

Значение правильной осанки для жизнедеятельности человека

Основные ошибки при выполнении передач мяча на месте

Последнее изменение этой страницы: 2016-04-26; просмотров: 463; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.145.7.253 (0.008 с.)