Создание простейшей веб-страницы. — КиберПедия 

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

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

Создание простейшей веб-страницы.

2017-09-10 320
Создание простейшей веб-страницы. 0.00 из 5.00 0 оценок
Заказать работу

HTML – это теговый язык разметки документов.

Элементы – это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега.

Тег – это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/".

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

 

Таблица 1. Оформление тела веб-страницы

Атрибут Действие Значения атрибута
BACKGROUND="URL" Фоновая картинка *.jpg, *.gif,.png. графический файл расположен в одной папке с Вашим документом
BGCOLOR="цвет " Цвет фона  
TEXT=”color” Цвет текста  
LEFTMARGIN="40" Определяет ширину левого и правого полей документа Пикселы
MARGINWIDTH="40" Определяет ширину верхнего и нижнего полей документа Пикселы

 

Таблица 2. Таблица цветов НТМL

pink розовый blue синий
cyan оттенок бирюзового teal ярко-голубой
orange оранжевый gray серый
brown коричневый yellow желтый
fuchsia ярко-фиолетовый olive оливковый
aqua бирюзовый purple фиолетовый
silver светло-серый red красный
black черный green зеленый

 

Таблица 3. Базисные теги

Тип документа <HTML></HTML> Начало и конец файла атрибуты
Имя документа <TITLE></TITLE> Должно быть в заголовке  
Заголовок <HEAD></HEAD> Описание документа  
Тело <BODY></BODY> Содержимое страницы  

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

 

Таблица 4

Форматирование
Заголовки <H*></H*> * - от 1 до 6 Стандарт определяет 6 уровней заголовков
Конец строки <TR>  
Начало абзаца <P>  
Выравнивание <H* ></H*> *-ALIGN= LEFT|CENTER|RIGHT По левому краю, по правому, по центру
Цитата <BLOCKQUOTE> </BLOCKQUOTE> Обычно выделяется отступом
Шрифт
Жирный <B></B>  
Курсив <I></I>  
Размер шрифта <FONT SIZE=?></FONT> От 1 до 7
Цвет шрифта <FONT COLOR="#$$$$$$"> </FONT>  

Веб-страницы с гиперссылками и изображениями. Важнейшую роль в оформлении страницы играют иллюстрации.

Для размещения рисунков в документе служит одиночный тег <IMG>, который должен обязательно содержать атрибут SCR=, значение которого составляет адрес файла изображения.

Изображение переносится на страницу с сохранением размеров. Нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота).

Альтернативный текст – словесное описание изображения задаётся при помощи атрибута ALT=.

Для создания гиперссылки в документе используются теги <A> и </A>. Текст ссылки помещается между этими тегами. Для того, чтобы указать адрес, на который указывает ссылка, необходим атрибут HERF=. Некоторые гиперссылки могут указывать на определённое место внутри страницы (якоря). Для него является обязательным атрибут NAME=. Значением этого атрибута является имя якоря, которое может состоять только из латинских букв и цифр и не должно содержать пробелов.

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

Размещение на веб-страницах списков и таблиц. Рассмотрим процесс создания нумерованных и маркированных списков. Они создаются примерно одинаковым образом. Список всегда располагается между открывающим и закрывающим тегом списка: <OL> и </OL> в случае упорядоченного списка; <UL> и </UL> - в случае неупорядоченного. Внутри списка располагаются его элементы. Их заключают между тегами <LI> и </LI>.

Таблица начинается открывающимся тегом <TABLE> и завершается закрывающимся </TABLE>.

Строки таблицы начинаются открывающимся тэгом <TR> и завершаются закрывающимся </TR>, а каждая ячейка таблицы начинается тегом <TD> и завершается </TD>.

Создание веб-документов средствами MicrosoftOffice. С помощью MicrosoftOffice можно создавать веб-страницы точно так же, как и обычные документов MicrosoftWord, MSExcel, MSPowerPoint.

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

Практическая часть

Задание 1

Создать файл с гипертекстовым документом:

1. Запустить редактор Блокнот, ввести текст:

Приветствую Вас на моей первой web-страничке!

2. Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*), а в строке Имя файла задать имя с расширением. html, например 1_name.html (где name – ваше имя).

3. Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.

4. Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.

Ввести теги, определяющие структуру html-документа.

С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами < TITLE> </ TITLE>) указать свою фамилию.

<HTML>

<HEAD><TITLE>Фамилия</TITLE>

</HEAD>

<BODY>

Приветствую Вас на моей первой web-страничке!

</BODY>

</HTML>

Сохранить документ под тем же именем, обновить его отображение в браузере (выполнить Вид/Обновить или нажать кнопку Обновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.

Отредактировать документ.

Вызвать меню браузера Вид/Просмотр HTML-кода и добавить после текста «Приветствую Вас на моей первой web-страничке!» текст подписи:

Студент группы NNN Фамилия Имя

Сохранить документ (но не закрывать) и обновить его просмотр в браузере.

Используя одиночный тег <BR>, отредактировать документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя – в следующей строке. Просмотреть в браузере новый вариант.

Внимание! После каждого изменения документ нужно сохранять, а просмотр в браузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.

Оформить фрагменты текста с помощью стилей Заголовков:

Первую строку документа оформить стилем Заголовок 1-го уровня с помощью парного тега <H1> …</H1>. Вторую строку оформить как Заголовок 6-го уровня, а третью как Заголовок 4-го уровня.

Просмотреть документ в браузере, изменяя настройку отображения шрифтов (меню Вид / Размер шрифта / Самый крупный, Средний, Мелкий и Самый мелкий).

Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки - на Заголовок 5 уровня, последней строки - на Заголовок 3-го уровня.

Выполнить форматирование шрифта.

После строки Фамилия Имя добавить еще одну строку текста


Поделиться с друзьями:

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

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

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

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



© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!

0.017 с.