- •Оглавление
- •1.Предмет и задачи курса Web-дизайна
- •2. Способы адресации компьютеров в сети
- •3. Принципы и организация сети Интернет
- •4. Протокол tcp/ip
- •5. Службы Интернет
- •6. Интернет - технологии в образовании
- •7. Размещение (хостинг) и регистрация нового сайт
- •8. Виды сайтов. Их структура.
- •9.Современные Web-технологии
- •10. Обзор средств разработки web-страниц
- •11. Язык разметки гипертекстовых документов (html): сущность, историческая справка, будущее
- •12. Основные понятия html (тэги и их параметры)
- •13. Структура html-документа
- •14. Форматирование текста ( логическое и физическое, специальные символы).
- •15. Форматирование документа (абзацы, цитаты, слои, комментарии,)
- •23. Для чего предназначены каскадные листы стилей?
- •24. Создание стилей.
- •25. Как представляется цвет в Web?
- •26.Создание анимационных изображений?
- •27. Какие мультимедиа объекты могут быть размещены на Web-странице?
- •28. Основные типы сайтов?
- •33. Возможности современных программ, используемых для создания web-страниц
10. Обзор средств разработки web-страниц
-
Блокнот(notepad)
-
Macromedia Dreamweaver MX Adobe GoLive и LiveMotion
-
Microsoft FrontPage
-
Hotdog
11. Язык разметки гипертекстовых документов (html): сущность, историческая справка, будущее
HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметкидокументов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML.
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах
Историческая справка:
-
RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
-
HTML 3.2 — 14 января 1997 года;
-
HTML 4.0 — 18 декабря 1997 года;
-
HTML 4.01 (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999 года;
-
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.
-
HTML 5 — в разработке. Конец разработки запланирован на 2014 год.
12. Основные понятия html (тэги и их параметры)
HTML (HyperText Markup Language) - язык разметки гипертекста.
-
Веб-страница
Веб-страница - это сетевой документ, открываемый в браузере. Обычно веб-страница создается в формате HTML и содержит, как правило, текст, изображения и ссылки. В связи с развитием технологий, веб-страницей также могут называться документы и в другом формате, например, XML, Flash, PDF и т.д.
-
Сайт (интернет-ресурс)
Cайт — это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.
-
Тег
Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.Теги могут содержать атрибуты
-
Контейнер
Контейнером называется парный тег, внутри которого могут располагаться другие теги. Контейнер требует закрывающего тега, обозначаемого </тег>. Таким образом, контейнер состоит из открывающего тега (<тег>) и закрывающего (</тег>).
-
Браузер
Браузер - это программа для просмотра веб-страниц.
-
Гиперссылки
Ссылки - это основа сетевых документов, которые позволяют переходить с одной веб-страницы на другую.
13. Структура html-документа
Переименуем файл txt в html
<HTML> <HEAD> <TITLE>Заголовок документа</TITLE>
</HEAD> <BODY> Текст документа </BODY> </HTML>
14. Форматирование текста ( логическое и физическое, специальные символы).
Физическое форматирование текста
<B> . . . </B>: выделяет текст жирным шрифтом;
<I> . . .</I>: выделяет текст наклонным шрифтом (курсивом);
<U> . . .</U>:выделяет текст подчеркиванием;
<S> . . .</S>:выделяет текст перечеркиванием;
Логическое форматирование текста
<CITE> . . . </CITE>: цитата
<STRONG> . . . </STRONG> сильное выделение текста
<Var>…</var> это имя переменной
<CODE> . . . </CODE> фрагмент исходного текста
|
< |
< |
|
> |
> |
|
& |
& |
|
" |
" |
|
© |
© |
|
® |
© |
15. Форматирование документа (абзацы, цитаты, слои, комментарии,)
перевод строки, горизонтальные линии)
<p>aбзац</p> имеет атрибут align
<br> тег разрыва строки
<H1>…..<H6> заголовки </H1>…..</H6> заголовки.
<q></q> -цитата
Тэг <HR>- горизантальная линия, следующие атрибуты
-
ALIGN - выравнивает по раю или центру; имеет значения LEFT, CENTER, RIGHT
-
WIDTH - устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ %
-
SIZE - Устанавливает ширину линии в пикселах
-
NOSHADE - отменяет рельефность линии
-
COLOR - Указывает цвет линии
<Layer>-слой. Атрибуты
-
width ширина
-
heidth высота
-
name имя
16. Организация связных документов, использование ссылок
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую.
<a href="URL">текст ссылки</a>
<a href="url"style=color:цвет>меняет цвет</a>
17. Организация списков (нумерованные, маркированные, определений, вложенные).
Начинается с тега <LI>
<UL>-маркерованный
Атрибут Type=disc,circle,square. Диск, окружность и квадрат соответсвенно
<OL>-нумерованный
Type=1,a,A,I,i. 1-арабские, а-латинские, А-латинские, I-римкие i-маленькие римские
Start с какого начать нумерацию
Список определений
<Dl>
<DT>название</DT>
<DD>это </DD>
</Dl>
18. Создание фреймовой структуры документов
Вместо<body > - <FRAMESET>
Параметры Rows –горизонтальные полосы Сols –вертикальные полосы, все в пикселях процентах
Тег <FRAME> размещается внутри контейнера <FRAMESET> и </FRAMESET>
Тег <FRAME> содержит шесть параметров, а именно: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORESIZE.
19. Встраивание изображений в HTML-документ (фоновые изображения, выравнивание изображений, рамка, альтернативный текст, изображение ссылка)
Background=url –вставить картинку
Bgcolor=цвет –вставить цвет
Вставить изображение в текст:
<img src=url> атрибут align=texttop, middle,left,right
Для альтернативного текста атрибут в <img> - alt=ывыдыыввы
Рамка атрибут в <img>- border =1
20. Таблицы в HTML-документах.
<TABLE>…</TABLE>- для создания таблицы.
<CAPTION>…</CAPTION> описывает заголовок таблицы;
<TR>…</TR> задает строки таблицы;
<TH>…</TH> ограничивает ячейки заголовков колонок;
<TD>...</TD> описывает стандартную ячейку.
21. Как создаются страницы с фреймами
Вместо<body > - <FRAMESET>
Параметры Rows –горизонтальные полосы Сols –вертикальные полосы, все в пикселях процентах
Тег <FRAME> размещается внутри контейнера <FRAMESET> и </FRAMESET>
Тег <FRAME> содержит шесть параметров, а именно: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORESIZE.
22. Из каких элементов проектируется форма?
<FORM> с атрибутами:
-
ACTION - активирует применяемый к форме файл сценария.
-
NAME - идентифицирует форму.
-
METHOD - метод передачи данных формы
<INPUT>-для небольшого текста
-
TYPE - указывает на тип вводимой информации. Значения: text (текст), password (звездочки) и hidder (информация не будет показана).
-
NAME - присваивает имя полю.
-
SIZE - длина поля. (значение указывается в количестве символов)
-
MAXLENGHT - ограничение на количество вводимых символов.
-
VALUE - используется в тех случаях, когда нужно заполнить поля для ввода какой-либо информацией на момент загрузки страницы.
<TEXTAREA>-Для размещения текстовых полей
-
COLS - ширина окна (в количестве символов).
-
ROWS - высота окна (в количестве символов).
-
NAME - информация для идентификации.
-
VALUE - информация в окне на момент загрузки.
<Select> меню единичного или множественного выбора