2. Содержание
• Основныепонятия.
• Этапысоздания сайтов
• Языкигипертекстовойразметки
• Структуравеб – страниц
• Создание простойвеб – страницы
• Форматированиесимволови абзацев в веб – странице
• Размещение изображенияв веб – странице
• Создание списка в веб – странице
• Создание таблиц в веб – странице
• Организацияпереходовпо гиперссылкам
• Создание фреймов
3. Основные понятия
Веб-дизайн — вид графического
дизайна, направленный на
разработку и оформление объектов
информационной среды интернета,
призванный обеспечить им высокие
потребительские свойства
и эстетические качества.
4. Основные понятия
HTML (от англ. HyperText Markup
Language — «язык гипертекстовой
разметки»;) — стандартный язык
разметки документов во Всемирной паутине.
Большинство веб-страниц создаются при
помощи языка HTML (или XHTML). Язык
HTML интерпретируется браузерами и
отображается в виде документа в удобной
для человека форме.
5. Этапы создания веб - сайта
Анализ и проектирование
Написание контента
Креатив
Написание кода веб – сайта
Тестирование
Публикация
Раскрутка
Поддержка
6. Языки гипертекстовой разметки
HTML (от англ. HyperText Markup
Language —
«язык гипертекстовой разметки»;)
— стандартный язык разметки
документов во Всемирной
паутине.
Когда осенью 1991 года Интернет
впервые услышал позывные новой
технологии, название которой
легко уместилось в три буквы,
почти никто не мог представить
себе, что завоевания ее окажутся
настолько глобальными. Сегодня
для многих неискушенных
пользователей слово Интернет
прочно ассоциируется с WWW и с
уст специалистов не сходит тема
будущего информационных систем
и влияния на это будущее
всемирной сетевой паутины.
Язык HTML был
разработан британским учёным Тимом Бернерсом-
Ли приблизительно в 1986—1991 годах в
стенахЕвропейского Центра ядерных
исследований в Женеве (Швейцария). HTML создавался
как язык для обмена научной и технической
документацией, пригодный для использования людьми,
не являющимися специалистами в области вёрстки.
7. Структура веб - страниц
HTML-теги заключаются в угловые скобки и могут быть одиночными или
парными.
Парные теги (контейнер) содержат открывающий и закрывающий теги.
Закрывающий тег содержит прямой слеш (/) перед обозначением.
Теги могут записываться как прописными, так и строчными буквами.
HTML – код страницы помещается в контейнер.
Без этих тегов браузер не сможет определить формат документа и правильно
его интерпретировать.
Web-страница разделяется на 2 логические части:
Заголовок;
Содержание.
8. Создание простой веб – страницы
Простейший пример классического документа:
< HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
</HEAD>
<BODY>
<H1>Простейший документ </H1>
</BODY>
</HTML>
9. Форматирование символов и абзацев
в веб – странице
Примеры форматированиямогут быть описаны с помощью парных тегов:
<b> - жирный шрифт;
<I> - курсив;
<U>
<font face = ``Times New Roman`` color = ``black`` size=``3``>
В последнем теги могут использоваться не все атрибуты.
Значение атрибута color может быть задан двумя способами: словесным или
цифровым в формате RGB (#808000).
В теге <body> можно задавать цвет текста (text) и фона (bgcolor) на свей
страницы.
Чтобы ввести несколько пробелов подряд используется последовательность
 .
10. Размещение изображения в веб –
странице
На веб – странице можно размещать рисунки в формате CIF,
JPEG, BMP, PNG, WMF. Для помещения изображения на
страницу используется непарный тег <img>, который
может иметь вид:
<img src = ``photo.gif`` width = ``60``height = ``90`` alt = ``Моя
фотография в детстве``>.
Атрибут src является обязательным и указывает имя файла, в
котором содержится изображение.
11. Создание списка в веб – странице
Теги списков являются способом наглядного
отображения
сконструированной информации.
Списки в HTMLбываютдвухвидов:
• Упорядоченные (пронумерованные)
• Неупорядоченные (непронумерованные)
Упорядоченные списки служат для отображения
последовательных
операций или
алгоритмов.
Неупорядоченные списки служат для составления
перечней, когда порядок
следования пунктов несущественен. Отличаются они
лишь способом оформления.
12. Теги списков
<OL> - создает упорядоченный список.
Атрибуты:
START – определяет первое число, с которого начинается нумерация пунктов.
TYPE – определяет вид нумерации. Может иметь значения:
“A” – заглавные латинские буквы A, B, C …
“a” – строчные латинские буквы a, b, c …
“I” – большие римские числа I, II, III …
“i” – маленькие римские числа i, ii, iii …
“1”- арабские числа 1, 2, 3 … По умолчанию.
<UL> - создает неупорядоченный список
Атрибуты:
<TYPE> - вид маркера элемента. Может иметь значения:
Disk – закрашенный кружок. По умолчанию
Circle – незакрашенный кружок
Square – квадратик
<LI> - одиночный тег, создающий пункт меню внутри элементов <OL> и <UL>
Атрибуты:
TYPE – вид маркера элемента
VALUE – значение элемента списка.
<DL> - отрывает и закрывает список определений
<DT> - создает термин в списке определений внутри элемента <DL>
<DD> - создает определение термина внутри элемента <DL>
13. Примеры списков
Создадим список, состоящий из трех элементов и нумерованный большими
римскими числами, начиная с цифры III.
<OL type=“I”>
<LI value=“3”>Пункт
<LI>Пункт
<LI>Пункт
<|/OL>
III. Пункт
IV. Пункт
V. Пункт
14. Примеры списков
Создадим список, состоящий из двух
уровней. Первый уровень маркированный
И состоит из двух элементов, второй
уровень нумерованный арабскими
цифрами и состоит из трех элементов.
<UL>
<LI>Пункт1
<OL>
<LI>Подпункт1.1
<LI>Подпункт 1.2
<LI>Подпункт 1.3
</OL>
<LI>Пункт2
<OL>
<LI>Подпункт2.1
<LI>Подпункт 2.2
<LI>Подпункт 2.3
</OL>
</UL>
- Пункт1
1. Подпункт 1.1
2. Подпункт 1.2
3. Подпункт 1.3
- Пункт2
1. Подпункт 2.1
2. Подпункт 2.2
3. Подпункт2.3
15. Примеры списков
Создадим список, состоящий из трех терминов. Первый термин имеет два
определения, второй и третий – одно определение.
<DL>
<DT>Термин1
<DD>Определениетермина1
<DD>Другоеопределениетермина1
<DT>Термин2
<DD>Определениетермина2
<DT>Термин3
<DD>Определениетермина3
</DL>
Термин1
Определениетермина1
Другоеопределение термина1
Термин2
Определениетермина2
Термин3
Определениетермина3
16. Создание таблиц в веб – странице
Таблицы в HTML формируются нетрадиционным способом –
построчно. Сначала с помощью элемента TR необходимо создать ряд
таблицы, в который затем элементом TD помещаются в ячейки.
Теги таблиц:
<TABLE> - парный тег создающий таблицу и определяющий ее общие свойства
<CAPTION> - Создает заголовок таблицы
<TR> - создает строку таблицы
<TD> - создает ячейку таблицы
<TH> - элемент ячейки, являющийся заголовком таблицы (отличается тем, что
выделен полужирным шрифтом). Тег непарный.
19. Организация переходов по гиперссылкам
Язык HTML предостовляет возможность задать переход не просто к другой страницы, но и к
определенному месту внутри этой страницы. Для этого то место, к которому надо будет сделать
переход, помечается тем же самым ссылочным тегом <a>, но с атрибутом не href, а name. Например:
<a name = Р3> Пункт 3 </a>
Где «Пункт 3» – то место в тексте страницы, на которую делается ссылка, с которого надо начать
вывод на экран. Ссылка на анкер обозначается символом #, после которого ставится имя анкера, а
перед которым – имя файла с анкером. Например:
Href = ``page2.htm#p3``
«Р3» – это не имя файла, а имя анкера в этом файле.
20. Создание фреймов
Фрейм — в языке HTML, веб-
дизайне: область окна
браузера для представления
отдельной веб-страницы.
Фреймы разбивают веб-
страницу на отдельные
миникадры, расположенные на
одном экране, которые являются
независимыми друг от друга.
21. Создание фреймов
Пример бегущей строки:
<font face=“arial” color=“red”>
<MARQUEE bgcolor=“yellow” height=“100”
width=“700”
direction=“right”
behavior=“scroll”scrollamount=“10”>
Бегущяя
строка </MARQUEE>
</font>
22. Создание фреймов
INPUT- текстовое одностроковое поля ввода, поля пароля, переключатели, радиокнопки, чекбоксы,
скрытые поля, кнопки выгрузки файла, кнопки изображений и т.д.
АтрибутТУРЕ- определяет тип поля для ввода данных. По умолчанию - это "text".
Возможные значения:
text- создает поле ввода под одну строку текста.
password- создает поле ввода под одну строку, однако текст, вводимый пользователем,
отображается в виде значков "*".
checkbox- создает поле ввода для атрибутов типа Boolean (“да”/”нет”) или для атрибутов, которые
Могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько
Полей checkbox. Каждое выбранное поле chackbox создает отдельную пару name value в информации,
посылаемой на сервер. Поле этого типа обязательно должно иметь атрибуты NAME и VALUE.
23. Создание фреймов
Radio - создает поле ввода для атрибутов, которые принимают одно значение изнескольких возможных. Все
кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает
пару name/value, которая будет послана на сервер.
Submit - создает кнопку, при нажатии которой заполненная форма посылается на сервер.
Image - создает графическую кнопку-картинку, инициализирующую передачу данных на
сервер. Местонахождение графического изображения можно задать с помощью атрибута
SRC.
Атрибут CHECKED- указывает, что поля типов checkbox и/или radio активизированы.
SELECT- меню единичного или множественного выбора
TEXTAREA- многострочное текстовое поле.
