Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Ссылки на другие страницы сайта

HyperText Markup Language

язык гипертекстовой разметки

Web-страницы

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

Web-страницы можно разделить на две группы:

· статические (они чаще всего имеют расширения *.htm или *.html) — те страницы, которые записаны на диск в готовом виде и не меняются;

· динамические (с расширениями *.shtml, *.asp, *.php, *.pl) — полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы).

Для просмотра Web-страниц на экране нужна специальная программа — браузер.

Мы будем рассматривать только статические Web-страницы, которые создаются на языке HTML (Hypertext Markup Language — язык разметки гипертекста). Напомним, что гипертекстом называется документ, содержащий гиперссылки — активные ссылки на другие документы на локальном компьютере или в Интернете, щелкнув по которым можно перейти к связанному документу.

Язык HTML использует специальные команды (они называются тэги) для разметки Web-страницы, то есть для размещения на ней текста, таблиц, рисунков, списков и т.п. Браузер, читая такой файл, обрабатывает эти команды и выводит страницы на экран. Поэтому одну и ту же Web-страницу разные браузеры могут выводить на экран по-разному.

 

Создание HTML документа

1. В любом текстовом редакторе. Например, Блокнот или WordPad.

2. Сохранить документ с расширением html. Внимание! При сохранении документа в текстовом редакторе автоматически добавляется расширение txt! Необходимо его удалить!

3. Для просмотра, созданного html файла, можно использовать любой браузер.

4. Можно создавать и просматривать html файлы в одном месте – редакторе html файла (это очень удобно). Например, можно скачать редактор html файлов, созданный К.Ю. Поляковым http://kpolyakov.spb.ru/prog/hefs.htm

 

Структура любого html файла

HTML-код Изображение в браузере
<HTML> <HEAD> <TITLE>Моя первая Web-страница</TITLE> </HEAD> <BODY> Привет! </BODY> </HTML>

PS: Всё содержимое страницы должно быть помещено после тега <body>!

Теги <html>, <head>, <title>, <body> должны присутствовать в html документе в единственном экземпляре!

Цвет текста и цвет фона для всего документа:

HTML-код Изображение в браузере
<BODY TEXT="#000000" BGCOLOR="yellow"> Привет!!!! </BODY>

PS: Параметры тега <BODY>:

TEXT – цвет текста, BGCOLOR – цвет фона.

Атрибуты параметров (в данном случае цвета) задаются в кавычках.

Цвета можно задавать в числовом виде (16-ая система счисления), а можно строкой (название цвета на английском языке). Например, красный цвет можно задать вот так “#FF0000”, или так “red”.

Обозначения цветов можно посмотреть на сайте К.Ю.Полякова http://kpolyakov.spb.ru/school/html/colors.htm

Горизонтальная линия

HTML-код Изображение в браузере
<HR WIDTH="60%" SIZE="3" ALIGN="right">

PS: Параметры тега <HR>:

  • SIZE — толщина линии в пикселях
  • WIDTH — ширина линии в пикселях или в процентах от ширины окна
  • ALIGN — выравнивание (LEFT, RIGHT или CENTER)

Перенос строки

HTML-код Изображение в браузере
Привет! Как у тебя дела? <BR> Отлично!!!!

PS: Все что написано после тега <BR> будет перенесено на другую строку.

Задание 1

1. На своем диске создать папку MySite. В этой папке создать html документ.

Поместить в него отрывок какого-нибудь стихотворения, сохраняя перенос строк.

2. Определить для него цвет фона, цвет текста.

3. Вставить в текст несколько горизонтальных линий.

 

Абзацы

HTML-код Изображение в браузере
<p align="left">абзац выровнен влево...</p> <p align="right">абзац выровнен вправо...</p> <p align="center">абзац выровнен по центру...</p>

PS: Здесь в теге <p> используется параметр align – выравнивание текста, с атрибутами “left”-выравнивание влево, “right”-выравнивание вправо, “center”-выравнивание по центру.

Заголовки

HTML-код Изображение в браузере
<H1> Огромный заголовок</H1> <H2> Большой заголовок</H2> <H3> Заголовок поменьше</H3> <H4> Еще еще поменьше</H4> <H5> Крохотный заголовок</H5> <H6> Масипусечкин заголовочек</H6>

Стили оформления

HTML-код Изображение в браузере
<B>Я долго искал свой путь Я долго искал свой стиль</B> <I>Потратил тут столько сил</I> <S>Чтобы мой мир меня простил Я свеж и молод пока</S> <U>Я продал дух с молотка Купюры липнут к ладоням</U> <SUP>Я поднимаю бокал </SUP> <SUB>Сын папы - не про меня</SUB> <PRE> Я к вам явился со дна Открыто много дорог так Но мне нужна лишь одна </PRE>

PS:

  • <B>...</B> (от английского bold), а так же <STRONG>это жирный текст
  • <I>...</I> (от английского italic), а так же <EM>это курсив
  • <S>...</S> (от английского strike out) — это зачеркнутый текст
  • <U>...</U> (от английского underline) — это подчеркнутый текст
  • <SUP>...</SUP> (от английского superscript) — это верхний индекс
  • <SUB>...</SUB> (от английского subscript) — это нижний индекс
  • <PRE>...</PRE> (от английского preformatted) — это специальный стиль для оформления текстов программ. Моноширинный шрифт, остаются все пробелы и переходы на новую строку. Не необходимости в использовании тэгов переноса строки и абзаца, т.к. текст отображается «как есть». Посмотрите внимательно пример.

Задание 2

В документ со стихотворением внести изменения:

1. Каждый абзац стихотворения оформить как параграф, сохраняя перенос строк.

2. Название и автора стихотворения оформить как заголовки разных уровней.

3. В рамках одной строки применить различные стили оформления. Но для тэга PRE взять один абзац целиком.

 

Разметка части текста:

Для того, чтобы изменить цвет, размер и стиль шрифта для части текста, используют тэг <FONT>. Он имеет три основных параметра:

  • COLOR — цвет текста
  • FACE — начертание (название) шрифта
  • SIZE — размер шрифта (принимает целые значения от 1 до 7)
HTML-код Изображение в браузере
<BODY TEXT="black"> <FONT COLOR="red" FACE="Courier" SIZE="2"> Привет!!! </FONT> </BODY>

PS: Тэг <font> устанавливает для текста внутри области действия тэга шрифт Courier, желтого цвета, размера 2. Хотя текст всего документа установлен как black.

Списки

Маркированный список

HTML-код Изображение в браузере
<UL> <LI>Вася <LI>Петя <LI>Коля </UL>

PS: Каждый элемент маркированного списка имеет маркер — специальный значок слева. Список ограничен парным тэгом <UL> (от английского unordered list — неупорядоченный список). Каждый элемент списка начинается с непарного тэга <LI>, после которого можно располагать текст, рисунки, таблицы и т.п. Список заканчивается закрывающим тэгом </UL>.

В команде <UL> можно задавать тип маркера, например, для того, чтобы установить в качестве маркера квадратик, надо добавить параметр TYPE и задать его атрибут "square".

<UL TYPE="square">

HTML-код Изображение в браузере
<UL TYPE="square">> <LI>Вася <LI>Петя <LI>Коля </UL>

Кроме этих типов можно также использовать значения circle (окружность).

 

Нумерованный список

HTML-код Изображение в браузере
<OL> <LI>Вася <LI>Петя <LI>Коля </OL>

PS: Каждый элемент такого списка имеет номер. Нумерация может быть числовой или буквенной. Список ограничен парным тэгом <OL> (от английского ordered list — упорядоченный список). Каждый элемент списка начинается с непарного тэга <LI>, после которого можно располагать текст, рисунки, таблицы и т.п. Список заканчивается закрывающим тэгом </OL>.

В команде <OL> можно задавать тип нумерации (в параметре TYPE) и начальное значение номера (в параметре START). Так в следующем примере задается нумерация маленькими римскими цифрами начиная с iii.

HTML-код Изображение в браузере
<OL TYPE="i" START="3"> <LI>Вася <LI>Петя <LI>Коля </OL>

Кроме этого типа можно также использовать значения A (заглавные латинские буквы), a (строчные латинские буквы), I (большие римские цифры), и 1 (арабские цифры).

Вложенные списки

Списки могут быть вложенными, то есть, внутри элемента списка может быть еще один список (любого типа). На каждом уровне могут быть списки любых типов (нумерованные, маркированные, определения).

HTML-код Изображение в браузере
<UL> <LI>Города России <OL> <LI>Москва <LI>Санкт-Петерург </OL> <LI>Города Украины <OL> <LI>Киев <LI>Одесса </OL> </UL>

Задание 3

1. На своем диске в каталоге MySite создать html документ. Поместить в него несколько абзацев понравившегося текста.

2. Разметить текст, используя разный стиль (цвет текста, гарнитура шрифта, размер текста). Должно получиться минимум три разных по оформлению фрагмента текста.

3. Создать списки трех видов:

· Маркированные

· Нумерованные

· Вложенные

 

Гиперссылки

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

Ссылка устанавливается с помощью парного тэга <A> (от английского anchor - якорь). Тэг имеет параметр HREF, который указывает адрес документа. Ссылкой является вся информация, расположенная между открывающим <A> и закрывающим </A> тэгами.

По умолчанию ссылки выделяются синим цветом и подчеркиваются. Ссылки на документы, которые вы уже посетили, выделяются фиолетовым цветом. Изменить эти цвета можно прямо в параметрах тэга <BODY>:

HTML-код Изображение в браузере
<BODY LINK="red" VLINK="#00FF00" ALINK="green"> <A HREF="https://www.google.ru/"> Пойдем на Гугл!!! </A> </BODY>

PS: Параметр LINK обозначает цвет обычной ссылки (в примере красный), VLINK — цвет посещенной ссылки (в примере горчичный), ALINK — цвет ссылки, над которой находится курсор мыши (в примере зеленый). В данном примере в параметре HREF записан полный интернет-адрес сайта.

 

Это был пример ссылки на внешний сайт в Интернете (Google) в интернете.

Для того чтобы сделать ссылку на файл, который выложен в Интернет, надо указать полный URL документа, включая протокол, сайт, каталог и имя файла.

Например, чтобы сделать ссылку на файл n_8182487.shtml, расположенный в интернете на сайте http://www.gazeta.ru в каталоге culture/news/2016/01/29 нужно написать так:

<A HREF="http://www.gazeta.ru/culture/news/2016/01/29/n_8182487.shtml">
Новость
</A>

Тэг <A> может иметь также параметр TARGET, который говорит браузеру, где открывать окно. Например, ссылка на сайт www.mail.ru, который всегда открывается в новом окне, сделана так:

<A HREF="http://www.mail.ru"
TARGET="_blank">www.mail.ru</A>

 

Ссылки внутри страницы

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

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

1. В разделе о кошках мы ставим якорь, т.е. называем это место документа своим именем:

<A NAME="cat">Поговорим о кошках. </A>

2. В разделе о тиграх мы должны сослаться на раздел о кошках вот так:

<A HREF="#cat">А вот пример наших домашних тигров</A>

Имя cat — это метка якоря, при обращении к ней в параметре HREF надо поставить знак #, который говорит, что это метка, а не имя файла.

 

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

1. В разделе о кошках в документе catiki.html мы ставим якорь:

<A NAME="cat">Поговорим о кошках. </A>

2. В разделе о тиграх нашего исходного документа мы теперь должны сослаться на раздел о кошках вот так:

<A HREF=" catiki.html #cat">А вот пример наших домашних тигров</A>

Задание 4

На своем диске в каталоге MySite создать html документ. Задать для ссылок в документе понравившийся цвет, отличный от цвета заданного по умолчанию.

1. Первая ссылка. На любой ресурс в интернете. При этом она должна открываться в новом окне.

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

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

 

Ссылки на другие страницы сайта

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

Рассмотрим пример ссылки из файла file1.html на файл file2.html

1. Пусть file1.html и file2.html находятся в одном каталоге на вашем диске. Тогда эта ссылка будет выглядеть так:

<A HREF=" file2.html"> Ссылка на второй файл</A>

2. Пусть теперь эти файлы находятся в разных каталогах. Первый файл находится в каталоге MySite на вашем диске: /MySite/file1.html, а второй находится в подкаталоге Primer каталога MySite на вашем диске: /MySite/Primer/file2.html Тогда эта же ссылка будет выглядеть так:

<A HREF="/Primer/file2.html"> Ссылка на второй файл</A>

3. Пусть теперь эти файлы по-прежнему находятся в разных каталогах, но теперь первый файл находится в подкаталоге Primer1 каталога MySite на вашем диске: /MySite/Primer1/file1.html, а второй файл находится в подкаталоге Primer2 каталога MySite на вашем диске: /MySite/Primer2/file2.html Тогда эта же ссылка будет выглядеть так:

<A HREF="../Primer2/file2.html"> Ссылка на второй файл</A>

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

 

Задание 5

На своем диске в каталоге MySite создать два html документа (место расположения зависит от номера задачи). В первом документе создать ссылку на второй документ.

1. Два документа находятся в одном каталоге.

2. Первый документ находится в каталоге MySite/Каталог1/

Второй документ находится в подкаталоге Каталог2 данного каталога.

3. Первый документ находится в каталоге MySite/Каталог1/ Второй документ находится в каталоге MySite/Каталог2.

Рисунки

В настоящее время поддерживаются следующие три формата рисунков: GIF, JPEG и PNG. На больших сайтах может использоваться очень много рисунков. Чтобы легче было разбираться в файлах, все рисунки обычно размещаются в отдельном подкаталоге, который часто называют IMAGES.

 

Фон страницы

Рисунок можно установить в качестве фона страницы. Для этого используется параметр BACKGROUND тэга BODY. Если указано только имя файла, рисунок должен находиться в том же каталоге, что и сама Web-страница. Например: <BODY BACKGROUND="lake.jpg">

Здесь lake.jpg – это картинка цвета фона.

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

 

 

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

Если же по каким-то причинам надо сделать фон-рисунок, он не должен мешать чтению текста, как в приведенном ниже примере:

Рисунки в документе

Для вставки рисунка в Web-документ используется тэг <IMG> (от английского image — изображение). Этот тэг имеет несколько параметров, из которых обязателен лишь SRC (от английского source — источник), который указывает, где находится рисунок. Если рисунок надо искать в том же каталоге, что и сама страница, надо просто написать имя файла. Можно указать также относительный адрес файла (так же, как в ссылках) или URL. Например:

<IMG SRC="image1.jpg">
<IMG SRC="images2/image2.jpg">
<IMG SRC="http://server/images/image3.jpg">

Рисунок image1.jpg находится в текущем каталоге, рисунок image2.jpg — в подкаталоге IMAGES2, а image3.jpg — на сервере в Интернете.

Выравнивание рисунка

Рисунок воспринимается браузером как «большая буква» в тексте. Поэтому важно указать правильное выравнивание в параметре ALIGN тэга IMG. Например:

<IMG SRC="image.jpg" ALIGN="left">

Подробнее о выравнивании можно посмотреть здесь http://kpolyakov.spb.ru/school/html/images.htm

 

Задание 6

На своем диске в каталоге MySite создать html документ. Поместить в него понравившийся текст.

1. Заполнить фон рисунком с максимально хорошей стыковкой. При этом текст страницы должен оставаться читаемым.

2. Поместить несколько картинок в документ с разным выравниванием. Минимум три картинки.

3. Поместить в документ картинку-ссылку на любой ресурс в интернете.

 

Таблицы

О таблицах можно прочитать здесь: http://kpolyakov.spb.ru/school/html/table.htm

 

Задание 7

На своем диске в каталоге MySite создать html документ. В документе создать таблицу следующего вида:

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка
Пятая ячейка Шестая ячейка Седьмая ячейка

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...