Лабораторные работы МИРЭА JavaScript (1017114)
Текст из файла
|
|
| МИНОБРНАУКИ РОССИИ |
| Государственное образовательное учреждение высшего профессионального образования « Московский государственный институт радиотехники, электроники и автоматики (технический университет)» МИРЭА
|
Лабораторный практикум
по дисциплине
ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ
Москва 2014
Лабораторная работа №1
Основы разметки гипертекста HTML
Цель работы:
Изучение основ стандартного языка разметки НТМL для создания статических Web–страниц
Длительность 4 часа
1. Краткие теоретические сведения.
Web–страницы пишутся с использованием языка НТМL и обычно передаются провайдеру услуг Интернет ISP (Internet Service Provider) для размещения на Web–сервере. Для получения страниц с Web–сервера используется протокол HTTP (Hyper Text Transfer Protocol). Адрес Web–страницы называется универсальным локатором ресурсов URL (Universal Resource Locator), например, http://www.mirea.ru. Web–страницы загружаются в компьютер и просматриваются на экране с помощью специальных программ, называемых браузерами, таких, как Internet Explorer, Google Chrome и т.п. Каждый браузер имеет свой набор возможностей для просмотра Web–страниц.
При создании Web–страниц используют различные инструментальные средства. Обычно статическая часть Web–страницы создается текстовым и графическим редакторами, обеспечивающими сохранение данных в формате HTML, а динамическая часть программируется на языках VBScript и JavaScript или с использованием специальных средств языков программирования таких, как Delphi, Java, Visual C++.
Язык разметки гипертекста HTML определяет структуру и динамику Web-страницы с помощью специальных символов, называемых тэгами. Тэг - это символ или ключевое слово, взятое в угловые скобки. Тэги, как правило, встречаются парами: начальный и конечный. Конечный тэг отличается от начального только наличием косой черты перед символом или словом. За символом или словом часто идет список параметров, в котором параметры отделяются друг от друга пробелами. Часто параметры имеют значения, задаваемые с помощью знака равенства. Любая Web–страница должна начинаться тэгом <html> и заканчиваются тэгом </html>. Программист может добавлять для себя некоторые примечания, но не показывать их пользователю. Достигается это следующим образом:
<!-- Текст комментария из одной или нескольких строк >
Комментарий можно включить до начала страницы, в любое место
страницы или в конец страницы.
Тег <HEAD>
Web–страница обычно начинается с заголовка, который устанавливается тэгами <head> и </head>. Заголовок включает служебную информацию и как правило, содержит заглавие Web–страницы выводимые тэгами <title> и </title>. Заглавие появляется в строке заголовка Web–браузера. Этот текст используется также поисковыми системами Интернет.
Тег <BODY>
Основное содержание страницы называется телом, и вводится тэгами <body> и </body>. В тэге <body> можно использовать ряд ключевых строк, называемых атрибутами. Основными атрибутами тэга <body> являются: align, alink, background, bgcolor, bgproperties, bottommagin, class, id, lang, language, leftmagin, link, rightmagin, scroll, style, text, onblur, onfocus, onload, onload,
vlink.
background — позволяет задать в качестве фона html-страницы картинку. Допустим есть картинка picture.jpg, расположенная по адресу http://3w.fcyb.mirea.ru/images/stories/mirea.jpg. Для того, чтобы сделать её фоном html-страницы нужно записать так:
<BODY background="http://3w.fcyb.mirea.ru/images/stories/mirea.jpg">
</BODY>
Если html-страница и картинка mirea.jpg находятся в одном каталоге (папке), то можно записать так:
<BODY background=" mirea.jpg "></BODY>
В общем случае нужно указать путь к файлу, например,
<BODY background="D:/myPictures/mirea.jpg"></BODY>
Обычно в качестве фона используется небольшой и простой рисунок, так называемую текстуру, который многократно выводится на экран, заполняя всё окно. Поскольку размер такого изображения небольшой, то создание фона происходит очень быстро.
text — устанавливает цвет текста html-документа. Например, сделаем текст зеленым:
<BODY text="#008000"></BODY>
Следующие атрибуты относятся к представлению вида ссылок на странице:
link — цвет ещё неиспользованной (непросмотренной) ссылки (по умолчанию синий).
vlink — цвет уже использованной (просмотренной) ссылки.
alink — цвет гиперссылок при наведении на них курсора мыши.
Допустим, нам нужно, чтобы цвет ещё неиспользованных ссылок был красным (#FF0000), а уже нажатых — синим (#0000FF). Сделать это можно так:
<BODY link="#FF0000" vlink="#0000FF"></BODY>
Атрибутов в теге (не только BODY, но и в любом другом) может быть как один, так и несколько сразу. А может и ни одного, в этом случае браузер будет использовать настройки по умолчанию. В следующем примере мы создадим html-страницу с черным фоном, зеленым текстом, неиспользованные ссылки - красные, а посещённые — синие. Весь этот ужас можно создать так:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#000000" text="#008000" link="#FF0000" vlink="#0000FF">
</BODY>
</HTML>
Наберите этот html-код. Между тегами <BODY> и </BODY> вставьте любой текст, сохраните этот файл под любым именем (латинскими буквами или цифрами), но обязательно с расширением html (например, myScript.html). А затем откройте его в браузере.
Цвет устанавливается путем указания значения красной, зеленой и синей составляющих в шестнадцатиричном формате либо с помощью цветовой константы HTML. Здесь нужно коротко сказать о способах представления цвета в HTML. Цвета в HTML можно задать либо именем цвета из предопределенного списка, либо шестнадцатеричным (hex) значением выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой Web-палитре. Использование цветов из этой палитры гарантирует их одинаковое воспроизведение всеми браузерами.
Помимо собственных атрибутов (атрибуты, которые используются только в этом теге) в теге BODY можно применять атрибуты и других тегов (их можно употреблять в разных тегах, они общие для них всех).
Таким образом, Web–страница имеет следующую структуру:
<!-- Примерная структура Web – страницы:-->
<html>
<head>
<title>
Добро пожаловать в Web–страницу
</title>
</head>
<body allign=center alink=tomato link=FFFF00>
<!--Здесь содержимое страницы, например, приветствие -->
Привет!
</body>
</html>
Теги для форматирования
Заранее отформатированный текст можно вставить в html-страницу с помощью тегов <pre> и </pre>. Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику
Самыми популярными тегами для форматирования текста являются:
<B> и </B> — используется для выделения текста полужирным.
Примечание. Во многих последних (по времени выпуска) учебниках и самоучителях вместо него рекомендуется использовать тег <strong> и </strong>.
<I></I> — используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег <em></em>.
<U> и </U> - позволит подчеркнуть текст. Не путать подчеркнутый текст с ссылкой.
<STRIKE> и </STRIKE> — делает текст перечеркнутым.
<SUB> и </SUB> — предназначен для выделения подстрочного текста (нижний индекс).
<SUP> и </SUP> - нужен для выделения надстрочного текста (верхнего индекса).
Все эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код:
<strong>H<sub>2</sub>O</strong> — это <strong><em>формула воды.</em></strong>
при просмотре в браузере будет выглядеть так:
H2O — это формула воды.
Абзацы
В HTML абзацы создаются с помощью тега <P>. Использование этого тега приводит к вставке одной пустой строки и размещению находящегося за ним видимого элемента html-страницы в следующей строке. Например, если мы напишем:
<p>Это первый абзац.</p> <p>Это второй абзац.</p>
То выглядеть это будет так:
Это первый абзац.
Это второй абзац.
Использовать закрывающий тег </P> не обязательно, т.к. браузер считает, что начало следующего абзаца означает конец предыдущего, но желательно.
Выравнивание текста
Для того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:
<p align="center">Текст по центру</p>
выровняет текст по центру. А код:
<p align="right">Выравнивание текста по правому краю</p>
выровняет текст по правому краю. Если атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код:
<p>Выравнивание по левому краю</p>
выровняет текст по левому краю
Теги BR и HR
Если нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то используется тег <BR>. Например, html-код
1. Первая строка. <br> 2. Вторая строка.
в браузере будет выглядеть так:
1. Первая строка.
2. Вторая строка.
У BR нет закрывающего тега. Для вставки нескольких пустых строк, нужно записать тег <BR> несколько раз подряд.
Визуально разделить части текста можно еще при помощи тега <HR>. Этот тег создает на странице горизонтальную разделительную полосу. Тег <HR> имеет следующие атрибуты:
size — толщина полосы;
width — ширина полосы;
align — выравнивание;
color — цвет полосы;
noshade - атрибут, не имеющий значений. Если указан, то создается сплошная черная полоса без тени.
Например, html-код:
<hr align="center" size="5" width="50%" color="#3399ff">
Ширину и толщину можно указывать как в пикселах (тогда величина будет постоянной), так и в процентах (тогда величина будет меняться в зависимости от разрешения экрана).
Заголовки
Для задания названий разделов и подразделов используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:
<H1></H1>, <H2></H2>, <H3></H3>, <H4></H4>, <H5></H5>, <H6></H6>.
Заголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок <H1></H1>, а самый маленький <H6></H6>.
Теги заголовков имеют атрибуты:
align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);
title — всплывающая подсказка, которая появляется при наведении мыши на заголовок.
Например, код HTML:
<h4 align="center" title="Заголовок 4 уровня">Заголовок 4 уровня</h4>
Работа со шрифтами
Для форматирования непосредственно шрифтов, в HTML есть тег <FONT></FONT>. У этого тега существуют следующие атрибуты:
color — цвет текста шрифта;
Характеристики
Тип файла документ
Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.
Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.
Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
