Необходимое отступление о редакторах HTML.




Ширшова Д. В.

 

Лабораторная работа №6-7.

Разработка Web-сайта предприятия.

Методические указания по выполнению лабораторных работ по дисциплине «Информационные ресурсы в менеджменте»

КАЗАНЬ

2011

Что такое HTML?

Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2 и 4.0. Текущую спецификацию HTML всегда можно найти на сервере W3C (https://www.w3.org/).

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

Что Вам понадобится для освоения HTML?

Для освоения HTML по этому Руководству Вам понадобятся две вещи:

Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов. Мне лично очень нравится Netscape Navigator, поэтому именно его команды я и буду приводить, описывая операции с браузером.

Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.

Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным.

Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернету. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape Navigator, чтобы увидеть эти изменения реализованными в HTML-документе.

Необходимое отступление о редакторах HTML.

В настоящее время широко используются два типа редакторов HTML:

ü Редакторы типа "что видишь, то и получишь" (Netscape Navigator Gold, Microsoft Front Page). Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.

ü Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.

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

Ступенька 1-ая.

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

C:\ stud\ Ширшова \ имя вашей папки

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

Чтобы сохранить этот документ по следующему пути:
C:\ stud\ Ширшова \ имя вашей папки \ index.html, присвоив ему имя с расширением *.html выполните следующие действия:

- Файл -> Сохранить Как (File -> Save as)
- Дальше введите имя своего документа, например: index.html (обратите внимание, что в имени файла необходимо обязательно указать расширение *.html).
- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).
Чтобы просмотреть нашу страничку, нам необходимо отрыть любой браузер, например Internet Explorer:

Файл - Открыть - кнопка Обзор - Наш документ (index.html)
File – Open – Browse – index.html
Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.

Ступенька 2-ая.

 

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

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

Пример тэга: <br> (перенос текста на другую строку). Попробуйте вставить еще несколько тэгов <br> в нашем документе перед «добро пожаловать!». Сохраните. Посмотрите в вашем браузере, что получилось.

Итак, все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в браузере.

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

<html>
Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:
</html>

Некоторые тэги, вроде <br>, не требуют закрывающего тэга.

Ступенька 3-ая.
<html>
<head>
<title> Мой первый шаг </title>
</head>
<body>

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

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

Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Например <title>- заголовок. Зачем он? Откройте IE (Internet Explorer) с нашим документом и посмотрите на заголовок окна.

Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Следующие несколько ступенек будут посвящены именно этим тэгам: мы узнаем, как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом. Но прежде, все-таки закончим наш разговор о тэгах, в общем.

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

Обратите внимание:

<тэг1><тэг2><тэг3>... </тэг3></тэг2></тэг1>

Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.
Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке:
<тэг1><тэг2><тэг3>... </тэг3></тэг1></тэг2>

 

Ступенька 4-ая.

На этой ступеньке мы будем учиться раскрашивать. Для начала нам будет нужна палитра (все цвета интернета - https://www.artlebedev.ru/tools/colors/).

Зачем все это? А затем, что все обозначения цвета в Html прописываются именно таким способом. Например, белый цвет – ffffff. Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный.

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

Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам.

Попробуйте вместо СС0000 подставить другие значения цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #.

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

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

Как же еще задавать цвета в документе? - вспомним об открывающем тэге <body>:

<body text="#336699">

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


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

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

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

<body bgcolor="#000000">

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

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

<body text="#336699" bgcolor="#000000">

 

Ступенька 6-ая.
В этой главе мы поговорим о параграфах. Параграфы вводятся тэгом:
<p></p>
С помощью параграфов мы можем центрировать текст:
<p align="center">текст</p>
С помощью параграфов мы можем выровнять текст по левому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>


По обоим краям документа:
<p align="justify">текст</p>

Теперь введем параграфы в наш документ и посмотрим наглядно, что получится. В нашем примере стоит параграф с атрибутом центрирования текста (align="center"). Попробуйте подставить в параграф атрибут align с другими значениями: Left, Right, Justify.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </p>
</body>
</html>

Лучше использовать тэг <div></div>, одно из назначений которого выравнивание содержимого вашего документа. Все четыре значения атрибута align можно употреблять с <div>:

<div align="center"> текст </div>
<div align="left"> текст </div>
<div align="right"> текст </div>
<div align="justify"> текст </div>

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </div>
<p align="justify">
Привет. Меня зовут Иванова Мария. Мне 19 лет. Я учусь в КНИТУ-КАИ им. Андрея Николаевича Туполева и т. д. </p>
</body>
</html>

 

Ступенька 7-ая.

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

Начнем с заголовков. Существуют шесть уровней заголовков:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>

<H6> текст </H6>

Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.

Давайте теперь введем заголовок в наш документ. Выделим фразу "Здравствуйте, это моя первая страница":

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3> Здравствуйте, это моя первая страница. </H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </div>
<p align="justify">
Привет. Меня зовут Иванова Мария. Мне 19 лет. Я учусь в КНИТУ-КАИ им. Андрея Николаевича Туполева и т. д.</p>
</body>
</html>


Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут 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>

 

Давайте, выделим фразу «Меня зовут Иванова Мария»:


<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3> Здравствуйте, это моя первая страница. </H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </div>
<p align="justify">
Привет. <font size="+1"> Меня зовут Иванова Мария. </font> Мне 19 лет. Я учусь в КНИТУ-КАИ им. Андрея Николаевича Туполева и т. д.</p>
</body>
</html>

Ступенька 8-ая.

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

Сначала рассмотрим курсив и полужирный текст:

<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
К примеру, выделим курсивом фразу «Меня зовут Иванова Мария»:

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3> Здравствуйте, это моя первая страница. </H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </div>
<p align="justify">
Привет. <i> Меня зовут Иванова Мария.</i> Мне 19 лет. Я учусь в КНИТУ-КАИ им. Андрея Николаевича Туполева и т. д.</p>
</body>
</html>

Подчеркнутый текст вводится при помощи тэга <u>:

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

Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:

<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>

Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:

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

Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H2O.

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

Ступенька 9-ая.

Мы уже с вами ознакомились с атрибутами size и color для тэга <font>. В этой главе, мы завершим наше знакомство с тэгом <font>, изучив атрибут face. С помощью face мы можем задать тип шрифта.

Попробуйте ввести следующую конструкцию в наш документ для части текста, чтобы задать шрифт Arial:

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

Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя - это:

  • Times;
  • Times New Roman;
  • Arial;
  • Helvetica;
  • Courier;
  • Verdana;
  • Tahoma;
  • Cosmic Sans;
  • Garamond

В атрибуте face можно указать сразу несколько типов шрифтов:

<font face="arial, verdana, courier"> текст (шрифт Arial) </font>

В этом случае, если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые браузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.

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

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

Ступенька 10-ая.

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

 


Графику в документ можно добавить с помощью следующей строчки:

<img src="my.jpg">

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:

<img src="my/my.jpg">

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

<img src="../my.jpg">

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

<img src="https://www.homepage.ru/my/my.jpg">

Для вашего удобства кладите картинку в ту же папку, что и документ. Следует обратить внимание на то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="# 9999FF ">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </div>
<p align="justify">
<img src=" primtocodephoto.gif "> Привет. <i> Меня зовут Иванова Мария.</i> Мне 19 лет. Я учусь в КНИТУ-КАИ им. Андрея Николаевича Туполева и т. д.
</p>
</body>
</html>

 

Вот, что у нас получилось в результате выполнения кода:


Однако было бы лучше, если бы текст аккуратно располагался, например, сбоку от картинки. Как это сделать, узнаем на следующем шаге.

Ступенька 11-ая.

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

<img src="pr1.png" align="left">

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

<img src="pr1.png" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (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 - 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.
(2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
(3) - атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет.
(4) атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).
(5) - атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать.

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

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

<img src="pr1.png" align="left" hspace="30" vspace="5" alt="моя фотография">

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

 

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="# 9999FF ">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font>:) </div>
<p align="justify">
<img src=" primtocodephoto.gif " align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Привет. <i> Меня зовут Иванова Мария.</i> Мне 19 лет. Я учусь в КНИТУ-КАИ им. Андрея Николаевича Туполева на факультете Технической кибернетики и информатики на кафедре Компьютерных Систем. Мои любимые предметы – Схемотехника и Микропроцессорные системы. Мое хобби – музыка и книги. Я играю на фортепиано и гитаре. И т. д. </p>
</body>
</html>

Вот, что у нас получилось:

 

Также фоном документа можно сделать и картинку. Чтобы этого достичь, нужно прописать в открывающем тэге body следующую строчку:

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg" >

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


<html>

<head>

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

</head>

<body text="#330099" bgcolor="#9999FF "background="1156165.jpg" >

<div align="center">

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

<br>

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

<p align="justify">

<img src="1.jpg" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Привет. <i> Меня зовут Иванова Мария. </i> Мне 19 лет. Я учусь в КНИТУ-КАИ им. Андрея Николаевича Туполева на факультете Технической кибернетики и информатики на кафедре Компьютерных Систем. Мои любимые предметы – Схемотехника и Микропроцессорные системы. Мое хобби – музыка и книги. Я играю на фортепиано и гитаре. И т. д. </p>

</body>

</html>

Вот, что у вас должно получиться, после запуска странички:

Ступенька 12-ая.

На данном этапе мы поговорим о ссылках.
Наша страничка может состоять из нескольких документов. Один из них главный (index.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="https://www.homepage.ru/prf.html">мои фотографии</a>

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

Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - https://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.

Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.

<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

 

Html-код файла index.html:

<html>

<head>

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

</head>

<body text="#330099" bgcolor="#9999FF "background="1156165.jpg" link="#9933FF" alink="#FF00CC" vlink="#660099">

<div align="center">

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

<br>

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

<p align="justify">

<img src="1.jpg" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Привет. <i> Меня зовут Иванова Мария. </i> Мне 19 лет. Я учусь в КНИТУ-КАИ им. Андрея Николаевича Туполева на факультете Технической кибернетики и информатики на кафедре Компьютерных Систем. Мои любимые предметы – Схемотехника и Микропроцессорные системы. Мое хобби – музыка и книги. Я играю на фортепиано и гитаре. <a href="prf.html">А здесь вы можете посмотреть мои фотографии</a> </p>

</body>

</html>

Html-код файла prf.html:

<html>

<head>

<title>Мой второй шаг </title>

</head>

<body text="#330099" bgcolor="#9999FF" background="1156165.jpg">

<div align="center">

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

<br>

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

<p align="justify">

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

<img src="8785350_sosna_i_zakat.jpg" align="left" HSPACE=30 VSPACE=5 width="250" height="320" alt="моя фотография2">

 

</p>

</body>

</html>

 

Мы можем задать различные цвета для разных блоков текста в нашем документе (<font color="…"></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color:

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

Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.

Ступенька 13-ая.

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

Ссылка на ваш почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт):

<a href="mailto:pochta@mail.ru"> pochta@mail.ru </a>

 

У mailto есть еще некоторые опции:

-?subject=Тема пиcьма
- &Body=Текст вашего сообщения
- &cc=copy@mail.ru,copy2@mail.ru (копии письма через запятую)
- &bcc=hidden_copy@mail.ru,hidden_copy2@mail.ru (скрытые копии письма через запятую)

Все вместе это будет выглядеть так:

<a href="mailto:pochta@mail.ru?subject=Hello&Body=text&cc=copy@mail.ru&bcc=hidden_copy@mail.ru"> pochta@mail.ru </a>

В старых спецификациях Html (3.2 и ниже) такое не предусмотрено, с и старые браузеры того, о чем пойдет речь в этом примечании, не поддерживают (IE ниже 5.0 и NN 4.x и ниже). Зато в спецификации Html 4.0 возможность задать примечание к тексту учитываются.
Атрибут title (не путать с тэгом <TITLE>) предлагает информацию об элементе, для которого он устанавливается. Мы можем установить его, например, для тэга <a>:

<a href="ssilka.html" title="Ваша подсказка"> текст-ссылка </a>

Наведите курсор мыши на слова "текст-ссылка", и, если ваш браузер поддерживает спецификацию Html 4.0, то вы увидите то самое желанное.

Ступенька 14-ая.

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

<a href="prf.html"> <img src="primtocodephoto.gif"> </a>

Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:

<a href=" mailto:pochta@mail.ru "><img src="primtocodephoto.gif"></a>


 

 



Поделиться:




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

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2016-08-20 Нарушение авторских прав и Нарушение персональных данных


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