Средства создания и сопровождения сайта. Создание web-сайта на языке HTML
Тема: Средства создания и сопровождения сайта. Создание web-сайта на языке HTML.
Цель: Освоение приемов создания web-страниц и web-сайтов на языке HTML: знакомство с элементами и структурой html-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.
Теоретические сведения к практической работе
Интернет - это сложная электронная информационная структура, представляющая собой глобальную сеть, которая позволяет связывать между собой компьютеры в любой точке земного шара.
WWW - World Wide Web («Всемирная паутина») - это общемировая гипертекстовая информационная система (является частью Интернета).
Web - страница - это отдельный комбинированный документ сети WWW, который может содержать текст, графику, анимацию, звуковые и другие объекты. Хранится в файле *.html.
Сайт (веб-сайт, ресурс) – это место в интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц, которые воспринимаются как единое целое.
Создание сайтов - составной процесс, состоящий из нескольких этапов:
1.разработка дизайна,
2.вёрстка,
3.программирование,
4.безопасность.
Сопровождение сайтов:
это техническая поддержка сайта;
помощь в обновлении контента;
внесение корректировок в работу ресурса.
Методы создания и сопровождения сайтов:
вручную на языкe HTML (в БЛОКНОТе);
c помощью редакторов сайтов (HEFS, DreamWeaver и др.);
c помощью Конструктора сайтов на основе готового шаблона (ucoz.ru, narod.ru и др.);
с помощью систем управления сайтов (Joomla, 1С Битрикс и др.).
Этапы создания WEB-страницы:
1. Разработка проекта (Постановка задачи);
Главная тема страницы.
Текстовое содержание (грамотный язык).
Планировка размещения информации на странице (верстка).
Графика (набор рисунков, анимации).
Стиль дизайна (сочетания цветов, фоны и т. п.)
2. Алгоритм заполнения страницы.
3. Программирование.
Программа для WEB-страницы записывается на языке HTML в виде текстовых файлов в текстовом редакторе Блокнот.
HTML не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги).
Общий вид записи тега: <Тег>Фрагмент страницы </Тег>
<Тег> должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий: </Тег>
Некоторые тэги, вроде <br>, не требуют закрывающего тэга.
<тэг> </тэг> - может содержать внутри себя другие тэги (и текст).
Обратите внимание:
<тэг1> <тэг2> <тэг3> ... </тэг3> </тэг2> </тэг1>
Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.
Базисные теги
<html> </html> - начало и конец файла
<title> </title> - имя документа (должно быть в заголовке)
<head> </head>- голова документа
<body></body> - тело документа
<br> - перенос текста на другую строку
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<u> Подчеркнутый текст </u>
<strike> Перечеркнутый </strike> или <s> Перечеркнутый </s>
<small> Малый </small>
Нормальный текст
<big> Большой </big>
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>
<img src=”полный путь к файлу”> - вставка изображения
<a> </a> вставка ссылки
<p> </p> - параграф. После закрывающего тега </p> автоматически происходит перенос строки.
С помощью параграфов мы можем центрировать текст:
<p align="center">текст</p>
С помощью параграфов мы можем выровнять текст по левому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>
По обоим краям документа:
<p align="justify">текст</p>
<div></div>, одно из назначений выравнивание содержимого документа. Все четыре значения атрибута align можно употреблять с <div>:
<div align="center"> текст </div>
<div align="left"> текст </div>
<div align="right"> текст </div>
<div align="justify"> текст </div>
Параграф не может содержать в себе другие параграфы, и также тэг <div></div>. Однако <div> может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю.:<div align="right">
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>
Существуют шесть уровней заголовков:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
При этом, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.
Пример программы:
<HTML>
<HEAD>
<title> Моя страница </title>
</HEAD>
<BODY>
Содержимое страницы
</BODY>
</HTML>
Атрибуты
Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.
Тэги и их атрибуты
Атрибут Действие
<FONT COLOR=”цвет”
size=“число от 1 до 7”
FACE=“шрифт”> Меняет цвет,
Размер,
Гарнитуру шрифта текста
<BODY TEXT=”color”
<BODY BGCOLOR="цвет”> Меняет цвет всего текста
Цвет фона страницы
<BODY BACKGROUND="URL"> Добавляет фоновую картинку (графический файл формата *.jpg, *.gif)
<IMG SRC=”полный путь к файлу”
align="left">
align="right">
align="bottom">
align="middle">
align="top">
vspace="количество">
hspace="количество">
alt="текст">
width="количество">
height="количество">
border="5">
bordercolor="цвет"> Выравнивает текст относительно изображения:
картинка слева
картинка справа
текст снизу картинки (по умолчанию)
текст посередине
вверху
задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях.
задает расстояние по горизонтали
краткое описание картинки (при наведении на изображение курсором мыши)
ширина самой картинки (в пикселях)
высота картинки
рамка вокруг картинки (по умолчанию). Для удаления рамки прописывается значение атрибута “0”
задает цвет рамке
<a href="путь к файлу">текст ссылки</a>
<a href="mailto:pochta@mail.ru"> текст ссылки </a>
title="Ваша подсказка"> текст ссылки </a>
<a href="путь к файлу"> <img src="путь к картинке"> </a> Вставка ссылки на страницу в виде текста
ссылка на e-mail
вставка пояснения к ссылке
Вставка ссылки на страницу в виде картинки
Например, Тег для окрашивания слов Добро пожаловать будет выглядеть следующим образом: <font color="#CC0000"> Добро пожаловать! :) </font>
Таблица цветовОбратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #.
Одновременно можно прописать в тэге <body> и цвет текста в документе, и цвет фона : <body text="#336699" bgcolor="#000000">
Типы шрифтов являются стандартными, и должны находиться на компьютере каждого пользователя - это:
•Times;
•Times New Roman;
•Arial;
•Helvetica;
•Courier;
•Verdana;
•Tahoma;
•Cosmic Sans;
•GaramondВ атрибуте face можно указать сразу несколько типов шрифтов, задав список разделенных запятыми названий шрифтов:
<font face="arial, verdana, courier"> текст (шрифт Arial) </font>
В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier, в порядке приоритета.
Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>.
Содержание работы:
Задание № 1. Создайте с помощью языка HTML в БЛОКНОТЕ web-сайт «Мой сайт», от имени любого любимого персонажа сказки, мультфильма, фильма и т.п. состоящий из пяти страниц:
Страница 1 должна содержать:
заголовок;
вступление
гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».
Страницы 2, 3, 4 и 5 должны содержать:
заголовок;
по два или более отформатированных абзаца текста (один абзац не менее трех полных строк);
фотографии (минимум по одной на каждой странице).
Сохраните каждую страницу присвоив ей расширение *.html:
Файл - Сохранить Как - вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).
Сайт должен содержать информацию о выбранном персонаже, а также его семье, друзьях и т.п.
Требования к сайту:
заголовки и гиперссылки выравнивать по центру;
для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);
использовать разные способы выравнивания фотографий;
обязателен фоновый цвет страницы;
на каждой странице должен быть заголовок окна;
для заголовков использовать шрифт Time New Roman, для основного текста Arial (размеры подобрать самостоятельно).
Задание № 2. Протестируйте работоспособность сайта в браузере (по возможность в двух различных). Протестируйте работоспособность сайта при выключенной графике. Для этого откройте в браузере свой документ html.