HTML_Основы языка разметки гипертекста (774371)

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

Текст из файла

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

Web-сайты и Web-страницы

Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт посвящен ка­кой-либо теме или проблеме и состоит из компьютерных Web-страниц.

Сайт является интерактивным средством представления информации. Он имеет титульную страницу, на которой имеются гиперссылки на его основные разделы (Web-стра­ницы).

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

Гиперссылки могут связывать не только Web-страницы в пределах одного сайта, но и любые документы, размещен­ные в Интернете, независимо от того, где они находятся.

Щелчком по гиперссылке можно:

• запустить почтовую про­грамму для отправки сообщения разработчикам сайта,

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

• начать «скачивать» файлы на свой компьютер и т.д.

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

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

Web-страницы сайта могут содержать динамические объ­екты, (исполняемые модули), созданные с использованием Java-апплетов или элементов управления ActiveX.

Web-сайт состоит из Web-страниц, объединенных гиперссылками, содержащих мультимедиа и ди­намические объекты.

Создание Web-сайтов реализуется с использованием язы­ка разметки гипертекстовых документов HTML.

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

Основные достоинства HTML-документов:

• малый информационный объем;

• возможность просмотра на персональных компьютерах, оснащенных различными операционными системами;

• интерактивность.

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста (Блокнот).

Пример раз­работки тематического сайта «Компьютер».

1. Разработка проекта сайта, т.е. определить сколько Web-страниц будет входить в сайт, какова будет их темати­ка и как они будут связаны между собой.

Состав сайта:

• титульная страница «Компью­тер»;

• страница «Программы», содержащая классификацию программного обеспечения;

• страница «Словарь», содержащая словарь компьютер­ных терминов;

• страница «Комплектующие» с ценами на устройства компьютера;

• страница «Анкета», содержащая анкету для посетителей сайта.

2. Форматирование текста и размещение графики

Используем привычный и достаточно удобный для этих целей текстовый редактор Блокнот.

2.1. Открыть окно текстового редактора Блокнот.

Вид Web-страницы задается тэгами, которые заключают­ся в угловые скобки.

Тэги могут быть парными, т.е. обязате­льно наличие открывающего и закрывающего тэгов (такая пара тегов называется контейнером). Закрывающий тэг со­держит прямой слэш (/) перед обозначением.

Тэги могут быть и одиночными.

HTML-код страницы помещается внутрь контейнера .

Без этих тэгов браузер не в состоянии опре­делить формат документа и правильно его интерпретиро­вать.

Web-страница разделяется на две логические части:

• заголовок и

• содержание.

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

Название Web-страницы содержится в контейнере <Т1Т-LE> и отображается в строке заголовка браузера.

Назовем нашу Web-страницу «Компьютер»:

<Т1ТЬЕЖомпьютер

Основное содержание страницы помещается в контейнер и может содержать:

• текст,

• графические изображения,

• таблицы,

• бегущие строки,

• звуковые файлы и т.д.

Поместим на страницу текст «Давайте зна­комиться - компьютер» :

Давайте знакомиться - Компьютер

Созданную Web-страницу необходимо сохранить в виде файла. Принято называть титульный файл сайта под именем index.htm.

В качестве расширения файла Web-страницы мож­но также использовать .html.

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

Необходимо различать имя файла index.htm, т.е. имя под которым Web-страница хранится в файловой системе, и соб­ственно имя Web-страницы «Компьютер», которая высвечи­вается в верхней строке окна браузера и, в первую очередь, анализируется поисковыми системами. Имя Web-страницы должно в максимальной степени соответствовать ее содер­жанию.

2.2. В окне приложения Блокнот ввести HTML-код Web-стра­ницы. Сохранить файл под именем index.htm в папку сай­та. Загрузить этот файл в окно браузера для просмотра.

Koмпьютep

Давайте знакомиться - Компьютер

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

Некоторые тэги имеют атрибуты, определяющие свойства тега.

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

Заголовок страницы целесообразно выделить крупным шрифтом. Размер шрифта заголовка задается тэгами от (самый крупный) до (самый мелкий).

Без специального указания текст всегда выровнен по ле­вому краю страницы. Однако заголовок обычно принято раз­мещать по центру страницы (в данном случае — окна брау­зера). Сделать это нам позволяет атрибут ALIGN тэга заголовка:

<Н1 ALIGN="center">

Выравнивание по правой границе окна реализуется с по­мощью ALIGN=" right", по левой границе — ALIGN="left" (по умолчанию).

Изменить цвет заголовка, например на синий, можно с помощью тэга задающего шрифт с атрибутом цвета:

Значение атрибута COLOR можно задать либо названием цвета ("blue", "red", "yellow" и т.д.), либо его кодом (например, "#FFOOOO").

3. В окне приложения Блокнот в контейнер вставить последовательность тэгов и просмотреть результат в браузере.

<Н1 ALIGN="center">

Давайте знакомиться

компьютер

---

Первая или титульная страница является своего рода «визитной карточкой» вашего сайта.

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

В Web-сайтах. могут использоваться три графических формата — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необ­ходимо предварительно преобразовать в вышеуказанные форматы с помощью графического редактора (Photo Editor).

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

На титульной странице создаваемого сайта уместно раз­местить изображение того объекта, которому посвящен сайт (в нашем случае — компьютера).

4. Получить изображение компьютера и сохранить в файле с именем computer.gif в каталоге сайта.

Для вставки изображения используется тэг с атри­бутом SRС="имя файла":

Если графический файл находится в другом каталоге, то должен быть указан полный путь к файлу, если файл нахо­дится на сервере Интернета, то должен быть указан Интер­нет-адрес этого файла (URL).

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

Тэг имеет еще один атрибут ALT, значением кото­рого является текст, поясняющий, что должен был бы уви­деть пользователь на рисунке:

На титульной странице должен быть какой-то поясняю­щий текст, например:

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

Расположить данный текст относительно рисунка различ­ным образом позволяет атрибут ALIGN тэга , который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).

Если мы хотим, чтобы текст «обтекал» рисунок по право­му краю, тэг вставки изображения примет следующий вид:

5. В окне приложения Блокнот в контейнер вставить тэг вставки изображения и «обтекающий» его текст, про­смотреть результат в браузере.

Страницы этого сайта позволят вам больше узнать о компьютере и его программном обеспе­чении . . .

Гиперссылки на Web-страницах

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

Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимы заготовки Web-страниц. «Пустые» страницы должны иметь заголовок, но могут пока не иметь содержа­ния.

Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.

Каждая страница будет содержать следующий HTML-код:

<ТIТLЕ>Заголовок страницы

6. Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anke-ta.htm в каталоге сайта.

Гиперссылка на Web-странице внешне представляет со­бой объект (текст или рисунок), выделенный цветом и подчеркиванием. Активизация гиперссылки вызы­вает переход на другую страницу.

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

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

Панель навигации будет представлять собой абзац, вы­ровненный по центру. Абзацы помещаются в контейнер <р>, а пробелы обозначаются специальными символа­ми:  .

Код, обеспечивающий вставку в титульную Web-страни­цу текста гиперссылок, выглядит следующим образом:

<Р ALIGH= "center">

[Программы]   [Словарь]  

[Комплектующие]   [Анкета]

Теперь для каждой гиперссылки определим адрес перехо­да. Для этого используется контейнер гиперссылки <а> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Кон­тейнер должен также содержать текст гиперссылки:

Teкст гиперссылки

URL-адрес документа мо­жет быть абсолютным и относительным.

Абсолютный URL-адрес документа полностью определяет компьютер, ка­талог и файл, в котором располагается документ.

Абсолютный адрес документа, находящегося на локаль­ном компьютере:

С://путь/filename.htm

Абсолютный адрес документа, находящегося на удален­ном компьютере в Интернете:

http://www.host.ru/filename.htm

Относительный URL-адрес файла указывает на документ, расположенный в той же папке, что и документ, в котором находится указатель соответствующей ссылки.

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

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

[Программы]  

[Словарь] &nbs

[Koмплектующие]  

[Aнкeтa]

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

Полезно на титульной странице сайта создать ссылку на адрес электронный почты. Для этого атрибуту ссылки HREF присвоить URL-адрес электронной почты и добавить контейнер , кото­рый задает стиль абзаца, принятый для указания адреса, и содержащий адрес электронной почты.

8. Вставить в титульную страницу код, создающий ссылку на адрес электронной почты:

<А HREF="mailto:mailbox@provaider.ru">E-mail:

mailbox@provaider.ru

По щелчку мыши по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке «Кому» будет указан соответствующий адрес.

Созданная титульная стра­ница Web-сайта «Компью­тер» содержит заголовок, изображение компьютера, текст, панель навигации и ссылку на адрес электронной почты.

Списки на Web-страницах

Довольно часто при размещении текста на Web-страни­цах удобно использовать списки, в различных вариантах:

• маркированные списки (в HTML их принято называть не­нумерованными);

• нумерованные списки;

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

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

На странице «Программы» разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка.

Сначала создадим основной ненумерованный список основных категорий программного обеспечения.

Список рас­полагается внутри контейнера

, а каждый эле­мент списка определяется тэгом

. С помощью атрибута type тэга

можно задать вид маркера списка: "disc" , "square" и "circle" (по умолчанию "disc").

9. Открыть в Блокноте файл software.htm и добавить следую­щий HTML-код, задающий список:

Системные программы

Прикладные программы

Системы программирования

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

, а каждый элемент списка определяется также тэгом

. С помощью атрибута type тэга

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

10. Добавить HTML-код, задающий вложенный список для элемента

Прикладные программы:

текстовые редакторы;

графические редакторы;

электронные таблицы;

системы управления базами данных.

Страницу «Словарь» мы представим в виде терминологи­ческого словаря компьютерных терминов.

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

11. Открыть в Блокноте файл glossary.htm и добавить следую­щий HTML-код, задающий список определений:

Процессор

Центральное устройство компьютера,

производящее обработку информации в двоичном коде

< DТ>Оперативная память

Устройство, в котором хранятся

программы и данные

Формы на Web-страницах

Для того чтобы посетители сайта могли не только про­сматривать информацию, но и отправлять сведения его ад­министраторам.

Формы представляют собой управляющие элементы раз­личных типов:

• текстовые поля,

• раскрывающиеся списки,

• флажки,

• переключатели и т.д.

Разместим на странице «Анкета» анкету для посетите­лей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую ин­формацию они хотели бы видеть на нашем сайте.

Вся форма заключается в контейнер .

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

Для получения этих данных разместим в форме два одно­строчных текстовых поля для ввода информации.

Текстовые поля создаются с помощью тэга со значением атри­бута TYPE="text".

Атрибут NAME является обязательным и служит для идентификации полученной информации. Зна­чением атрибута SIZE является число, задающее длину поля ввода в символах.

Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки
.

12. Открыть в Блокноте файл anketa.htm и добавить следую­щий HTML-код, создающий текстовые поля для ввода данных, просмотреть страницу в браузере:

Пожалуйста, введите Ваше имя:

E-mail:

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

Для этого необходимо создать группу переключателей («радиокнопок»).

Создается такая группа с помощью тэга со значением атрибута TYPE="radio". Все элемен­ты в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".

Еще одним обязательным атрибутом является value, ко­торому присвоим значения "schoolboy", "student" и "te­acher". Значения атрибута value должны быть уникальны­ми для каждой «радиокнопки», т.к. при ее выборе именно они передаются серверу.

13. Добавить HTML-код, создающий группу переключателей для выбора одного варианта, просмотреть страницу в браузере:

Укажите, к какой социальной группе вы себя относите:

VALUE= "schoolbоу">учащийся<ВR>

VALUE="student">студент

VALUE= "teacher">учитель

Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предло­женного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге со значением атрибута TYPE="checkbox".

Флажки, объединенные в группу, могут иметь одинако­вые значения атрибута NAME. Например, NAME="group".

Еще одним обязательным атрибутом является value, ко­торому присвоим значения "www","e-mail" и "ftp". Значе­ния атрибута VALUE должны быть уникальными для каждо­го флажка, т.к. при его выборе именно они передаются серверу.

14. Добавить HTML-код, создающий флажки для выбора не­скольких вариантов, просмотреть страницу в браузере:

Какие из сервисов Интернета вы

используете наиболее часто:

NAME="group" VALUE="www">

WWW

NAME="group" VALUE="e-mail">

e-mail

NAME="group" VALUE="ftp">

FTP

15. Добавить HTML-код, создающий раскрывающийся спи­сок для выбора одного варианта, просмотреть страницу в браузере:

OPTION SELECTED>

Internet Explorer

Netscape Navigator

Opera

Neo Planet

16. Добавить HTML-код, создающий текстовую область для ввода комментариев, просмотреть страницу в браузере:

Какую еще информацию вы

хотели бы видеть на нашем сайте?<ВR>

<p> ROWS=4 </p><p> COLS=30></p><p> <b>17.</b> Добавить HTML-код, создающий кнопки, просмотреть страницу в браузере:</p><p> <INPUT TYPE="submit" </p><p> VALUE="Отправить "> </p><p> <INPUT TYPE="reset" </p><p> VALUE="Очистить"></p><p> Для того чтобы при щелчке по кнопке <i>Отправить</i> дан­ные из формы передавались на сервер и там обрабатыва­лись, необходимо указать, куда их отправить и какая про­грамма будет их обрабатывать. Эти параметры задаются с помощью атрибута action контейнера .</p><p> Атрибут ACTION определяет URL-адрес программы, рас­положенной на Web-сервере, которая обрабатывает получен­ные данные из формы. Атрибут ACTION будет выглядеть следующим образом:</p><p> ACTION="http:/www.mycompany.ru/cgi-bin/bd.exe"</p><p> <b>Инструментальные средства создания Web-страниц</b></p><p> Создание Web-страниц непосредственно на HTML требует больших усилий, времени и досконального знания синтак­сиса языка. </p><p> Однако применение специальных инструмента­льных программных средств (HTML-редакторов) делает ра­боту по созданию Web-сайтов простой и эффективной.</p><p> Существует мощные инструментальные системы разра­ботки сайтов, <i><u><b>например,</b></u></i> Microsoft Frontpage или Macromedia Dreamweawer. </p><p> Для разработки отдельных Web-страниц мож­но использовать свободно распространяемые редакторы Frontpage Express (входит в состав Microsoft Internet Explorer), Netscape Composer (входит в состав Netscape Communicator) и текстовый редактор MS Word 97.</p><p> <b>Тестирование и публикация Web-сайта</b></p><p> Прежде чем разместить Web-сайт на сервере в Ин­тернете, необходимо его тщательно протестировать.</p></p></p></p></p></p></p></p></p></p></li></li></li></li></li></li></li></li></li></d></dd></input></input></input></input></input></input></input></input>

Характеристики

Тип файла

Документ

Размер

80 Kb

Материал

Метода к лабам

Тип материала

Книга

Предмет

Электронные вычислительные машины (ЭВМ)

Высшее учебное заведение

МАИ

Тип файла документ

Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.

Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.

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

Список файлов книги

metoda-k-labam-1174388085-1496842794.zip

HTML_Основы языка разметки гипертекста.doc

Lr5_6-Оценка_характер.doc

ReadMe.txt

ЛР_1 Основы работы в вычислительных сетях 2009.doc