Курс лекций по учебной дисциплине Основы web - мастерства для специальности 230401

МИНИСТЕРСТВО ОБРАЗОВАНИЯ ИРКУТСКОЙ ОБЛАСТИ

ГБПОУ «Черемховский горнотехнический колледж им. М.И. Щадова»

РАССМОТРЕНО

Цикловой комиссией

«Информатики и вычислительной

техники»

председатель

_____________Е.А. Литвинцева

_________________20_____ год

ОДОБРЕНО

Методическим советом

колледжа

протокол №___

от___________ 20___года

Председатель МС

_____________ Е.К. Ващук

КОНСПЕКТ ЛЕКЦИЙ

учебной дисциплины ОСНОВЫ WEB - МАСТЕРСТВА

по специальности 230401 Информационные системы (по отраслям)

Черемхово, 2016г.

Раздел 1. Основные положения.

Тема 1.1. Исторические сведения.

Содержание учебного материала:

Интернет - разветвленная глобальная сеть, посредством которой миллионы компьютеров обмениваются данными, используя определенные стандартные протоколы.

История Интернета.

1)В 60-е годы Министерство обороны США поставило задачу – разработать надежную компьютерную сеть, которая должна была служить стратегическим интересам США. В основу концепции надежной сети была положена идея децентрализации. В Распределенной децентрализованной системе частичный отказ в работе сети не приводил бы к полной потере работоспособности.

2)В 1969 г. большинство учреждений, связанных с Министерством обороны, объединили собственные сети в сеть ARPANet- прародитель сети Интернет.

3)В 1983 г. для стандартизации обмена данными между UNIX- серверами и клиентами, ученые Калифорнийского университета в Беркли разработали протокол передачи данных – TCP/IP.

4)Развитие Интернета сопровождалось ростом числа серверов. В начале следующего десятилетия их было 100 000.

5)ARPANet превратилась в Интернет после подключения к сети ARPANet коммерческих предприятий.

6)В 1993 г. число подключенных серверов перевалило за миллион. Интернет приобрела очертания, близкие к сегодняшним и провозгласила в качестве цели своего развития всеобщую информатизацию человечества.

7)Привлечение к сети Интернет пользователей ПК посредством бесплатной пересылки информации, ее поиска и других услуг и оплаты только услуг локального поставщика услуг.

8)Ограничения для типов подключаемых к Интернету компьютеров не существует, несмотря на то, что технологически большинство серверов Интернета базируются на UNIX- системах. Поэтому в 1994 г. насчитывалось 4 миллиона компьютеров, работающих в сети.

9)Важнейшим событием в своей биографии сеть Интернет обязана швейцарским ученым из Европейской Лаборатории ядерной физики CERN. С созданием языка описания документа HTML появилась возможность построения службы Word Wide Web(WWW), позволявшей объединить в одном структурированном документе текстовые и графические данные (а позднее и мультимедиа- элементы), а также включать в документ ссылки на другие документы, расположенные в произвольных местах сети.

10)Студенты факультета NCSA (National Center for Supercomputing Applications) из университета в Иллинойсе построили первый Web- браузер (программу – обозреватель) Mosaic, который позволил отображать на мониторах компьютеров HTML- документы.

Таким образом, языком представления документов в WWW является HTML. Этот формат описывает не то, как должен выглядеть документ, а его структуру и связи.

Контрольные вопросы

Исторические сведения.

1.Дайте понятие сети «Интернет»

2.Какую задачу поставило Министерство обороны США в 60-е годы?

3.Назовите прародителя сети Интернет

4.Перечислите этапы развития Интернета

5.Чем сопровождалось развитие Интернета?

6.Охарактеризуйте шестой этап развития Интернета

7.Важнейшие события в биографии Интернета

8.Как назывался первый web-браузер?

Раздел 1. Основные положения.

Тема 1.2. Язык разметки гипертекста HTML.

Содержание учебного материала:

Определение: HTML- документ это ASCII- текст, состоящий из HTML- кодов и основного текста документа.

Для форматирования текста, задания структуры документа, встраивания ссылок и мультимедиа- объектов в HTML- документах используют специальные кодовые слова, которые называются дескрипторами разметки (тегами- Tags).

Будем помечать дескрипторы разметки угловыми кавычками, построенными из знаков >, <.

Пример:

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

Замечание:

Применение ASCII- текста в качестве основы HTML- документа позволяет надеяться, что он будет понят и корректно интерпретирован независимо от компьютерной платформы.

Автор идеи- Бернес Ли.

Основа от SGHL- язык определения структурной разметки.

1.Элементы

<название элемента> содержание элемента название элемента>

Пример: Параграф в документе: <р> параграф р>

Замечание: Существует элемент без содержания, например, принудительный разрыв строки -

2.Атрибут - описывает свойства элемента

<название элемента атрибут = «значение атрибута»> содержание название элемента>

Контрольные вопросы

Язык разметки гипертекста HTML.

1.Дайте понятие HTML-документа

2.Дайте понятие HTML- языка

3. дайте понятие дескриптора разметки

4. Каков синтаксис описания элемента

5. Каков синтаксис описания свойства элемента

6. Приведите пример

Тестовые задания

Исторические сведения. Язык разметки гипертекста HTML.

Вариант №1

Выберите один или несколько правильных ответов:

В какие годы министерство обороны США поставило задачу разработать надёжную компьютерную сеть
Какой протокол передачи данных разработали ученые Калифорнийского университета в Беркли
3. Прародитель Интернета
Дополните:
4.Интернет - это________________________________________

HTML –язык - это____________________________________

Опишите:

6.Синтаксис описания свойства элемента __________________

Тестовые задания

Исторические сведения. Язык разметки гипертекста HTML.

Вариант №2

Выберите один или несколько правильных ответов:

1.В HTML-документах используются специальные слова, которые называются

2. В каких кавычках помечают дескрипторы разметки
3. Кому обязана сеть Интернет важным событием в своей биографии
4. Какой дескриптор отвечает за принудительный разрыв строки
Дополните:
HTML-документ - это______________________________________

Опишите:

6. Синтаксис описания свойства атрибута________________________

Раздел 1. Основные положения.

Тема 1.3. Стандарты HTML. Структура HTML документа

Содержание учебного материала:

Стандарты HTML

1)HTML- стандарт 2.0 поддерживает только форматирование текста и встраивание простой графики.

2)В 1995 г. опубликованы предложения по расширенному стандарту HTML 3.0, которые стали использоваться как неофициальные HTML- рекомендации, воплотив, неся в программах- обозревателях.

3)В мае 1996 г. общественность познакомилась с HTML – стандартом версии 3.2, за которую несет ответственность организация объединения представителей промышленности и науки.

4)Первая публикация предложений по стандарту HTML 4.0 появилась 18.12.1997 г. Исправленная версия опубликована 24.04.1998 г.- в настоящее время - фактический стандарт.

24.12.1999 г.- спецификация версии 4.01. В ней устранены ошибки, обнаруженные в HTML 4.0.

Для просмотра HTML- документа необходим Web- браузер- специальная программа- обозреватель, которая в состоянии интерпретировать и корректно изображать HTML – дескрипторы на экране.

Пример: Netscape Navigator, Internet Explorer.

Структура документа в HTML

Документ состоит из 3-х частей:

Описание версии языка.

Раздел заголовка.

Тело документа.

HTML- документ ограничивается дескрипторами разметки:

<HTML> - начало документа

HTML> - конец документа

Все остальные команды HTML и всё содержимое Web- страницы, в том числе заголовок, тело документа, должны располагаться между двумя данными дескрипторами.

Для определения версии языка можно воспользоваться дескриптором Doctype>, располагающимся в HTML- документе перед <HTML>

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

Главная часть HTML- документа называется телом и включает в себя содержимое Web- страницы, выводимое на экран браузером. Это содержимое может быть оформлено как линейная последовательность элементов с помощью <body>, body> дескрипторов или как совокупность фреймов, делящих пространство на совокупность нескольких панелей (фреймов) с помощью <frameset>, frameset>.

Заголовки располагается между дескрипторами разметки <head> и head>.

В заголовке присутствует <TITLE> и TITLE>- имя документа.

Может присутствовать, но не обязательно <META>и META> передача информации, <Link> и Link>- связь с другими документами.

Атрибуты
Атрибут
Значение

Alink

Цвет активизируемой гиперсвязи

Bgcolor

Цвет фона

Link

Цвет гиперссылки

Text

Цвет текста

Vlink

Цвет используемой гиперссылки

Пример:

Doctype>

<html>

<head>

<title> Первые шаги title>

head>

<body> Первый HTML- документ!

body>

html>

Контрольные вопросы

Стандарты HTML. Структура HTML

Что такое атрибут?

С помощью какого дескриптора осуществляется описание версии языка?

Что должно располагаться между двумя дескрипторами <HTML> HTML>?

Где установлены важные глобальные изменения?

Как называется главная часть HTML-документа?

Между какими дескрипторами разметки располагаются заголовки?

Какие теги отвечают за имя документа?

За что отвечает дескриптор <META> иMETA>?

Перечислите атрибуты дескриптора <body>

Приведите пример

Тестовые задания

Стандарты HTML. Структура HTML

Выберите один или несколько правильных ответов

1. Описание версии языка осуществляется с помощью дескриптора

A)
B)

C)

D)

2. Главная часть HTML-документа называется

A) телом
B) атрибутом

C) заголовком

D) элементом

3. Между какими дескрипторами располагаются заголовки

A)
B)

C)

D)

4. Дескрипторы <TITLE> TITLE> отвечают за

A) имя документа
B) содержание документа

C) начало строки

D) заголовок документа

5. Количество разделов в структуре документа

A) 6
B) 7

C) 4

D) 3

6. Какой дескриптор отвечает за связь с другими документами

A)
B)

C)

D)

Раздел 2. Форматирование текста.

Тема 2.1. Текстовые блоки. Специальные символы

Содержание учебного материала:

Фиксирование (физическое) форматирование задается посредством типографических дескрипторов. С их помощью можно задать полужирное или курсивное начертание, глобальное изменение типа шрифта и его размера.

Настраиваемое (логическое) форматирование определяет вид фрагмента текста в соответствии с его функцией. Каким образом это форматирование будет отображено на экране, зависит от используемого браузера и его настройки.

Текстовые блоки.

Формат текстовых блоков задается с помощью настраиваемого форматирования.

Выделение фрагментов документов с помощью пар дескрипторов <div> и div> приводит к разбиению HTML- страницы на логические фрагменты, например, введение, основной текст и область ссылок.

Дескрипторы <div> и div> предназначены для определения крупных фрагментов (более 1 строки), а <span>, span>- фрагментов, ограниченных пределами первой строки.

Атрибуты дескрипторов <div> и <span>: align- предназначен для выравнивания фрагментов документа.

Align=left /center/ right /justify

Пример:

<body>

<div align=left>

Первый фрагмент документа

div>

<div align=center>

Второй фрагмент документа

div>

<div align=right>

Третий фрагмент документа

div>

body>

Форматирование заголовков всех типов производиться посредством дескрипторов <h1> …….<h6>. Так же в конце заголовка необходимо ввести соответствующий концевой дескриптор.

<h1> соответствует верхнему уровню в иерархии заголовков,<h6>-нижнему.

Для форматирования заголовков допускается использовать атрибут

Align=left /center/ right /justify

Замечание: Дескрипторы <h1>……<h6> используются только для заголовков, при желании выделить фрагмент текста (не заголовок) более крупным или полужирным начертанием, пользуйтесь дескриптором <big> или <font>.

Пример:

<body>

<h1 align=center> Заголовок всей Web- страницы h1>

<h2> заголовок уровня 2 h2>

<h3> Заголовок уровня 3 h3>

<h4> заголовок уровня 4- такой же размер, как у стандартного текста h4>

Стандартный текст

<h5> заголовок уровня 5 h5>

<h6 align=right> Авторские пометки Web- страницы h6>

body>

Выделение абзаца текста можно осуществлять с помощью дескрипторов <p> и p>. Для данного дескриптора существует атрибут align=center/left/right/justify.

Замечание: Концевой дескриптор <p> можно опустить, так как чаще он игнорируется браузером.

Цитаты знаменитых писателей, извлечения из стандартов, фрагменты первоисточников должны быть выделены <blockquote>.

Замечание 1: Для <blockquote> предусмотрен параметр cite=URL, позволяющий указать ссылку на сетевой ресурс, содержащий центрируемый документ.

Замечание 2: В HTML 4.0 и 4.01 для оформления цитат предусмотрен <q>. В отличии от предыдущего, который следует использовать для больших цитат, <q> рекомендован для «внутренних» цитат (несколько слов в пределах строки) например <p>.

Для <p> предусмотрен cite=URL.

В HTML существует возможность не форматировать текст с помощью <plaintext>.

Пример:

<body>

Далее следует

<Plaintext>

Простой текст и никакие дескрипторы не воспринимаются.

plaintext>

<h1> попытка ввести заголовок h1>

body>

В окне браузера по умолчанию текст выравнивается по левому краю экрана, но <center> и center> приводят к центрированию всех ограниченных ими HTML- элементов.

Web- браузер автоматически разбивает тексты фрагментов, превышающих по размеру одну строку, располагая их в нескольких строках (выполняет автоматическую верстку строк).

Текст, выделенный с помощью <nobr>…..nobr>, браузер не разрывает.

Объяснить места, в которых браузеру разрешается выполнять разрыв текста, можно, вставив в него <wbr>.

Принудительный разрыв строки осуществляется с помощью <br>.

Для управления расположением перенесенного в следующую строку текста в Internet Explorer предусмотрен для <br> атрибут clear.

Clear=none (по умолчанию) – следующая строка начинается в следующей вертикальной позиции.

Clear=left ищет следующее пустое пространство на левом краю полосы набора.

Clear=right ищет следующее пустое пространство на правом краю полосы набора.

Clear=all использует пустое пространство, начиная с позиции, в которой оба края свободны.

Контрольные вопросы

Текстовые блоки. Специальные символы

1.Что такое фиксированное форматирование?

2.Что такое логическое форматирование?

3.Какой дескриптор предназначен для выделения крупных фрагментов?

4.С помощью какого дескриптора осуществляется выделение абзаца текста?

5.Предназначение дескриптора <blocquate>?

6.Предназначение дескрипторов <nobr> nobr>?

7. Пример логического форматирования?

Раздел 2. Форматирование текста.

Тема 2.2. Логическое форматирование.

Содержание учебного материала:

Логическое форматирование.

Фрагменты, сформатированные логически (то есть объявленные фрагментами определенного типа), не во всех браузерах выглядят одинаково.

Если в тексте документа вы ссылаетесь на книгу, статью, то можно выделить её название, используя <cite> и cite>

<code> и code> используется для изображения исходных текстов программ в окнах браузеров.

Для описания клавиш или их комбинаций используют <kdb> и kdb>.

Пример:

<body>

Введение <kdb> Проверка kdb> и нажмите клавишу <kdb> Return

kdb>

body>

Дескрипторы <samp> и samp> предназначены выделять отдельные символы и фрагменты текста, представляющие собой примеры вводимых компьютером данных.

Пример:

<body>

При появлении этой ошибки программа выдает сообщение <samp>.

Критическая ситуация, обработка не возможна samp> и

останавливается.

body>

В сочетании с <code>, <kdb> для выделения имен переменных, символов- заменителей или значений используется дескриптор <var> и var>

Пример:

<body>

Значение переменой < var> value var> содержится в цепочке символов

<var> string var>

body>

Если необходимо сделать акцент или выделить отдельные текстовые фрагменты используют дескрипторы <em> и em>.

Для усиления выделения можно воспользоваться дескрипторами <strong> и strong>

Internet Explorer допускает особое форматирование в рамках определений с помощью дескрипторов <dfn> и dfn>

Контрольные вопросы

Логическое форматирование.

1.Дайте понятие логическому форматированию

2. Пример логического форматирования?

3. Для чего предназначены дескрипторы <samp> и samp>?

4.Какие дескрипторы можно использовать для усиления выделения?

5. Каково назначение дескрипторов <dfn> и dfn>

Раздел 2. Форматирование текста.

Тема 2.3. Типографические дескрипторы форматирования.

Содержание учебного материала:

<b> (эквивалент <strong>) позволяет отобразить текст полужирным шрифтом.

<i> и i>- текст в курсивном начертании.

<tt> и tt>- пишущая машинка.

<u> и u>- подчеркнутый текст.

, и , - перечеркнутый текст

<font> позволяет изменить для фрагмента текста размер и цвет шрифта по отношению к стандартному.

<basefont>, basefont> позволяет задать стандартный размер шрифта.

Атрибуты :
Color=«цвет»
Цвет шрифта

Size=n

Размер шрифта

Size=+n/-n

Увеличение (уменьшение) шрифта относительно основы <basefont> на значение n

Face

Задает тип шрифта

Пример:

<b> Мои успехи в учебе b>

………..

……….

~~………~~

…..

…..

……

….

………...

…

<font face=Arial>…

body>

Логические дескрипторы от <h1> до <h6> должны использоваться исключительно для форматирования заголовков. Если вы хотите изобразить текст более крупным шрифтом, следует пользоваться <font> (атрибут size), либо <big>,big>.

Вложением <big> размер шрифта можно увеличить на несколько ступеней.

Логические <h5>, <h6> вряд ли целесообразно использовать для организации заголовка, так как они создают более мелкий текст по сравнению с обычным, следовательно, более корректным выглядит уменьшение фрагмента, достигнутое с помощью дескрипторов <small>, small>.

Пример:

<body>

<h1 align=center> Мои увлечения h1>

….

….

…...

...

...

…..

body>

Для математических формул часто необходимо располагать числа или буквы, ниже основной позиции строки в виде индекса, что можно сделать с помощью дескрипторов <sub>,sub>.

Пример:

<body>

Математические <sub> формулы sub> могут выглядеть так:

A i =a 1 +a2+a3 +     

E=mc ²

body>

Текст, начинающийся с <sup> будет поднят на полстроки выше и будет изображаться шрифтом, несколько меньшим, чем обычный текст.

Контрольные вопросы

Типографические дескрипторы форматирования

Дайте понятие типографическому форматированию текста

Перечислите основные типографические дескрипторы форматирования

Каково отличие при применении атрибута Size=+n/-n и Size=n

Какие дескрипторы позволяют располагать числа или буквы, ниже основной позиции строки в виде индекса

Каково назначение дескриптора <font>:

Какие возможности данного дескриптора известны?

Тестовые задания

Текстовые блоки. Специальные символы

Логическое форматирование. Типографические дескрипторы форматирования

Вариант №1

Выберите один или несколько правильных ответов:

1. Для чего предназначены дескрипторы <div> div>

2. Для чего предназначен дескриптор <span>
3.Посредством каких дескрипторов производится форматирование
заголовков всех типов

4. C помощью какого дескриптора осуществляется выделение абзаца текста
A) <q>
B) <p>

C) <div>

D) <br>

5. Какой параметр предусмотрен для дескриптора <blocguate>, позволяющий указать ссылку на сетевой ресурс, содержащий цитируемый документ

A) cite=URL
B) cite=P

C) cite=Q

D) cite=M

Дополните:

6.Фиксированное форматирования- это___________________________

Тестовые задания

Текстовые блоки. Специальные символы

Логическое форматирование. Типографические дескрипторы форматирования

Вариант №2

Выберите один или несколько правильных ответов:

1. Какими дескрипторами можно выделить название, если в тексте документа мы ссылаемся на книгу или статью

A)
B)

C)

D)

2. Какие дескрипторы предназначены выделять отдельные символы и фрагменты текста, представляющие собой примеры, вводимые компьютером данных

3.Какой буквой пишется текст в курсивном начертании
4.Расшифруйте: size=n
Дополните:
5.Логическое форматирование - это _________________________

Раздел 3. Списки, таблицы, формуляры

Тема 3.1. Списки в HTML.

Содержание учебного материала:

В HTML- стандарте предусмотрены команды, позволяющие структурировать тексты, создавая списки различных типов.

Неупорядоченные списки.

Наглядным примером неупорядоченного списка может послужить список покупок.

Пример:

<body>

Список покупок

<br>

(Неупорядоченный список - один уровень структуры)

<ul>

<li> 500 г. телятины

<li> 300 г. спагетти

<li> 1 упаковка томатной пасты

<li> 2 луковицы

<li> баночка соли

ul>

body>

При необходимости список можно структурировать, создав в нем иерархию.

Пример:

<body>

Список покупок

<br>

(Неупорядоченный список- 2 уровня структуры)

<ul>

<li> Мясо

<ul>

<li> 250 гр. Телятины

<li> 250 гр. Свинины

ul>

<li> Овощи

<ul>

<li> 1 упаковка томатной пасты

<li> 2 луковицы

ul>

<li> приправа

<ul>

<li> 1 баночка соли

<li> 1 баночка пердца

ul>

<li> Прочие

<ul>

<li> 300 гр. Спагетти

ul>

ul>

body>

Встраивание в документ неупорядоченного списка производиться посредством <ul>, а завершается список ul>.

Атрибуты дескриптора
.
Compact- представляет список в компактной форме.

Type=circle - используется в качестве вводного символа не закрашенный круг.

Type=disc - используется в качестве вводного символа закрашенный круг (по умолчанию)

Type=square - используется в качестве вводного символа не закрашенный квадрат.

Нумерованные списки.

В нумерованных списках каждый элемент снабжен номером.

Пример:

<body>

Рецепт «Спагетти по болонски»

<br>

(Пронумерованный список)

<ol>

<li> луковицы порезать кубиками

<li> добавить фарш

<li> спустить вермишель в воду

ol>

body>

Нумерация не обязательна будет выполнена арабскими цифрами.

Специальный атрибут <ol> позволяет использовать при нумерации буквы или цифры.

Пример:

<body>

Предисловие

<ol>

<li> Посвящение

<li> Об авторе

<li> Предисловие издателя

ol>

body>

Пронумерованный список начинается с <ol> и заканчивается ol>.

Атрибуты

Элементы нумерованного списка по умолчанию нумеруются арабскими цифрами.

Type="1" нумерация арабскими цифрами.

Type="A" нумерация латинскими прописными буквами.

Type="a" нумерация латинскими строчными буквами.

Type="I" нумерация большими римскими цифрами.

Type="i" нумерация малыми римскими цифрами.

В нумерованном списке элементы нумеруются автоматически в порядке возрастания с шагом 1.

1) Value=n явным образом задает номер данного элемента = n.

2) Номер следующего элемента = n+1.

3) В списках пронумерованных буквами, римскими цифрами заданная величина n соответствующим образом конвертируется (например, 7 соответствует a или VII).

Пример:

<body>

Список с измененной нумерацией

<br>

<ol>

<li> Арабская нумерация

type= "I" > нумерация большими цифрами

строчные буквы, value=5

code> Продолжит нумерацию с "5", то есть с "е"

<li type="i" value=8> нумерация маленькими римскими

цифрами

ol>

body>

Атрибуты <ol>.

Назначение

Compact

Доставление списка в компактной форме

Start=n

Задает число, с которого начинается список

Type

Задает способ нумерации списка

Используя несложный прием, в качестве вводного символа элемента списка можно использовать любую графику, следовательно, <li> заменяют на <img> с указанием используемого в качестве вводного символа рисунка.

Пример:

<body>

Документ по проекту «Манилов»

<br>

<ul>

<img src= «doc.gif»> мост через озеро <br>

<img src= «doc.gif»> Подземный ход в Москву <br>

<img src= « doc.gif»> Всеобщее благосостояние <br>

ul>

body>

Существует списки определений, они больше подходят для составления словарей.

Список определений начинается с дескриптора <dl> и завершается dl>

<dt> используется для задания термина, которому дается определение. Для любого определения используется свой <dt>. За <dt> следует <dd>, который служит для оформления определений термина.

Пример:

<body>

Краткий справочник- словарь русского компьютерного диамента

(И.

Зыков)

<br>

<dl>

<dd> Странность или ошибка в работе программы dd>

<dt> БАГЛАНД dt>

<dd> Народное название фирмы Borland dd>

<dd> Обычная форма прощания dd>

dl>

body>

В HTML предусмотрена специальная форма предоставления списков, ориентированных на вывод информации в содержимом файловых каталог с помощью <dir>,dir> (аналогично неупорядоченным списком с теми же атрибутами)

Встраивание меню в HTML- документ осуществляется посредством <menu>, menu>, которые ведут себя аналогично неупорядоченным спискам с теми же атрибутами.

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

Пример:

<body>

Netscape- расширения: «за» и «против»

<br>

(Комбинирование списков)

<li> Netscape- расширения делают сеть Интернет

интересной

<li> Графика украшает интерьер

<li> Повышается комфортность работы пользователя

<li> Полезные кнопки

Надлежащее построение страницы

<li> Новые приложения Интернета

ol>

<br>

<li> Netscape- расширения является лишним балластом.

<ol>

<li> Условности коммерческого предприятия

<li> Монополизация HTML

<li> Хаос в стандартных WWW

ol>

body>

Контрольные вопросы

Списки в HTML

С помощью какого дескриптора производится встраивание в HTML-документ неупорядоченного списка?

2.Перечислите атрибуты <ul>

3. Дайте понятие «неупорядоченные списки»

4.Дайте понятие «нумерованные списки»

5.Перечислите атрибуты дескриптора <li>

6.Какими цифрами нумеруются элементы нумерованного списка?

7.Приведите пример нумерованного списка

8.Дайте понятие «списка определений»

9.Для чего служит дескриптор <dd>?

10.Каково предназначение <menu> и menu>

Тестовые задания

Списки в HTML

Выберите один или несколько правильных ответов

Посредством какого дескриптора производится встраивание в HTML-документ неупорядоченного списка
A)
B)

C)

D)
Списки в HTML бывают

3. Атрибуты дескриптора

A) type

B) value

C) square

D) align

Какими буквами нумеруются элементы нумерованного списка по умолчанию
A) русскими
B) римскими

C) английскими

D) арабскими
С каких дескрипторов начинаются списки определений
A)
B)

Дескриптор используется для:

Раздел 3. Списки, таблицы, формуляры

Тема 3.2. Таблицы в HTML.

Содержание учебного материала:

Таблица формируется дескрипторами <table> и table>, а дескрипторы <tr>, tr> выделяют строки, которые в свою очередь разбиваются на ячейки заголовков <th> , th> или ячейки данных <td>, td>.

Атрибуты

Frame

Void

Above

Below

Hsides

Lhs

Rhs

Vsides

Box

Border

Отображение сторон таблицы

Границы вокруг таблицы не отображаются

Отображается верхняя граница

Отображается нижняя граница

Отображается верхняя и нижняя границы

Отображается левая граница

Отображается правая граница

Отображается левая и правая границы

Отображаются все границы

Rules

None

Group

Rows

Cols

All

Отображение границ между ячейками

Границы между ячейками не отображаются

Отображаются границы между группами колонок или строк

Отображение границ между строками

Отображение границ между колонками

Все границы между ячейками

Width

Ширина таблицы

Задает минимальную ширину таблицы в пикселях (игнорируется, если содержимое ячеек требует для размещения определенного места, чем задано этим атрибутом)

Задает, какую часть ширина окна браузера занимает данная таблица

Пример:

<body>

Табличная структура

<br>

<th colspan=2> Ячейка заголовка

(Первая строка) th>

tr>

<tr>

<td> Ячейка данных (Вторая строка) td>

<td> Вторая ячейка данных td>

tr>

table>

body>

Таблица в HTML состоят из строк, а строки из ячеек.

Дескриптор <tr> начинает табличную структуру, а tr> заканчивает.

Между этими дескрипторами располагаются дескрипторы, описывающие самые мелкие элементы таблицы- ячейки (<th>, th> или <td>, td>).

Атрибуты

Пример:

аlign=top>

<td> Первая строка таблицы td>

vаlign =top

аlign =middle>

Вторая строка таблицы

vаlign=middle

table>

body>

В HTML располагают 2 категории ячеек: ячейки заголовков <tr> и ячейки данных <td>. Каждый из этих дескрипторов имеет соответствующие концевые дескрипторы.

Атрибуты <td>, <tr>.

Пример:

Заголовок таблицы

<tr>

<td> Отдельная ячейка td>

<td> Вторая отдельная ячейка td>

<td> Третья отдельная ячейка td>

<td> Ячейка 4 td>

<td> Ячейка 5 td>

Ячейка 1+2

Ячейка 3+4

Ячейка 5

Ячейка 1

Ячейка 4+5

Контрольные вопросы

Таблицы в HTML

1. Какими дескрипторами формируются таблицы в HTML?

2.Каково предназначение <tr> и tr>

3. Перечислите атрибуты дескриптора <table>

4. Приведите пример

5. Расшифруйте : “ frame=above”

6. Каково предназначение <td> и td>

7. Перечислите атрибуты дескриптора <tr>

8.Перечислите атрибуты дескрипторов <td> и <th>

9.Перечислите атрибуты дескриптора <select>

10. Каково предназначение дескриптора <options>

Тестовые задания

Таблицы в HTML

Вариант 1

Выберите один или несколько правильных ответов

Цвет фона таблицы можно изменить с помощью дескриптора

А) bordercolor

C) color

B) bgcolor

D) bedcolor

К атрибутам дескриптора относятся

А) align

C) frame

B) bgcolor

D) valign

Целочисленные значения могут принимать атрибуты

А) rules

C) frame

B) valign

D) border

Атрибут frame имеет свойство(а)

А) top

C) rows

B) left

D) rowspan

Установите соответствие

Атрибут

назначение

1.colspan

А.Выравнивание по горизонтали

2.rowspan

Б.Ширина ячейки в столбцах

3.valign

В.Выравнивание по вертикали

Г.Ширина ячейки в строках

Дополните

Таблица формируется ____________, а _________выделяют строки

Тестовые задания

Таблицы в HTML

Вариант 2

Выберите один или несколько правильных ответов

1.За отображение сторон таблицы отвечает дескриптор

А) border

C) frame

B) colspan

D) rules

2.К атрибутам дескриптора <td> относятся

А) rows

C) frame

B) bgcolor

D) valign

3.Целочисленные значения могут принимать атрибуты

А) rules

C) frame

B) cellpaddihg

D) border

4.Атрибут rowspan имеет свойство(а)

А) top

C) n

B) left

D) n%

Установите соответствие

Атрибут

назначение

1.cell"> А.Выравнивание по горизонтали

2.cellspacing

Б.Расстояние между содержимым и рамкой ячеек таблицы

3.align

В.Выравнивание по вертикали

Г.Расстояние между рамками таблицы

Дополните

6. _________выделяют строки, которые в свою очередь разбиваются на ячейки заголовков _____________ или ячейки данных__________________

Раздел 3. Списки, таблицы, формуляры

Тема 3.3. Формуляры в HTML.

Содержание учебного материала:

Формуляры (формы) позволяют создавать области HTML для ввода информации пользователя.

Для создания различных областей (полей) используют элементы областей формы: кнопки, текстовые поля, флажки, memo, поля для выбора файла, скрытые элементы управления.

Формуляр вставляется с помощью <form>, form>.

Атрибуты :

action=URL- адрес для отправки заполненного формуляра

method=get/post- способ передачи формуляра

method=get- заставляет Web-браузер передавать все данные формуляра по URL- адресу, заданному в action

method=post- заставляет Web- браузер связываться с сервером, обрабатываемым формуляром; после установления связи передает сами данные.

3) ansubmit= «script»- процедура, активизирующая при отсылки формы на сервер

4) onreset= «script»- процедура, активизирующая при сборе (очистке) формы

С помощью дескриптора <input>, в формуляре можно описывать элементы ввода управления.

Замечание: атрибуты name, type обязательно для <input> (концевого не существует).

Атрибуты :

align= Right/left/center выравнивание по горизонтали;

Accesskey= «символ»- клавиша быстрого доступа к элементу.

Checked- устанавливается с типом type=radio или checkbox, устанавливающей переключатель.

Disabled- блокирующий элемент, не может использоваться с элементом hidden

Readonly- указывает, что содержимое этого поля не может быть изменено, используется с type=text

Maxlenght=n- максимальное число букв в тесте

Name= «имя»- приписывает элементу имя

Size=n (для type=text/password) позволяет указать максимальное количество символов, отображаемых в поле (видимый размер поля). Для прочих элементов позволяет указать занимаемый по горизонтали размер в пикселях

Src=URL-URL рисунка для type=image

Type=checkbox- флажки для многовыборных вариантов

Type=button- пользовательская командная кнопка, используемая для выполнения процедуры, связанной с событием нажатия этой кнопки (unclick). В атрибуте value задается надпись на кнопке

Type=submit- командная кнопка, отправляющая на сервер внесенные в формуляр данные

Type=reset- командная кнопка, возвращающая формуляр к исходному состоянию (сбрасывает)

Type=file- создает поле ввода, которое дает возможность пользователю, заполняющему формуляр, указать файл, пересылаемый на сервер вместе с формуляром.

Type=image- пользовательская кнопка на которой отображена иллюстрация

Type=password- создает защищенное поле ввода (вместо текста *)

Type=hidden- передает на сервер параметры, которые не могут быть изменены пользователем.

Type=radio- радио-кнопка.

Группировка полей и легенд.

<fieldset>, fieldset> тематически объединяют близкие и рядом расположенные поля формуляра в группу и выделяют её визуально.

<legend>,<legend> приписывают группе полей текст комментарий.

<legend> имеет атрибут align

Меню

Пара дескрипторов <select>, select> вставляют в существующий формуляр разворачивающейся memo или поля списка

Отдельные пункты memo или элементы списка определяются <options>.

Атрибуты

Disabled- блокировка доступа к списку.

Multiple- разрешение использовать более одной опции.

Name=«имя»- имя поля

Size=n-количество одновременно изображаемых пунктов.

Атрибуты options.

disabled

label= «текст»- текст элемента списка

selected- выбранный по умолчанию элемент списка

value= «значение»- передаваемое значение

Контрольные вопросы

Формуляры в HTML

Каково предназначение формуляров

С помощью какого дескриптора вставляется формуляр?

Перечислите атрибуты <form>

Какие элементы формы используются для создания различных областей?

Для чего используется дескриптор <input>?

Перечислите атрибуты <input>

Расшифруйте “type=checkbox”

Каково предназначение дескриптора <fieldset> иfieldset>

Расшифруйте « type=image”

Расшифруйте “action=URL”

Тестовые задания

Формуляры в HTML

Вариант №1

Выберите один или несколько правильных ответов

1.К элементам формы относят

А) ссылки

D)меню

B) кнопки

E)графическое изображение

C) легенды

F)графические поля

2.Атрибут method дескриптора <font> может принимать значение(я)

А) post

C) get

B) jet

D) нет верного ответа

3. К атрибуту(ам) дескриптора <input> относят

А) action

C) href

B) valign

D) нет верного ответа

4. Целочисленное значение принимает(ют) атрибуты

А) size

C) disabled

B) maxlenght

D) ) maxwidth

5. Атрибут type может принимать значение(я)

А) radio

C) file

B) imades

D) url

6. За группировку полей отвечает(ют) дескриптор(ы)

А)

D)<font>

E) </font>

C) <input>

F) </input>

Установите соответствие

Атрибут

Значение

1.disablet

А. текст элемента списка

2.label

B. передаваемое значение

3. value

C. выбранный по умолчанию элемент списка

D. блокировка доступа к списку

Дополните

8.Отдельные пункты меню или элементы списка определяются ___________

Атрибут align=bottom располагает _______________________

Тестовые задания

Формуляры в HTML

Вариант №2

Выберите один или несколько правильных ответов

1.К элементам формы относят

А) ссылки

D)меню

B) флажки

E)текстовые поля

C) легенды

F)графические поля

2.Значение “script” принимает(ют) атрибут(ы)

А) action

C) input

B) onreset

D) onsubmit

3. К атрибуту(ам) дескриптора <input> относят

А) action

C) src

B) align

D) нет верного ответа

4. Атрибут readonly используется с type=

А) password

C) image

B) text

D) нет верного ответа

5. Атрибут type может принимать значение(я)

А) radio

C) file

B) src

D) botton

6. За описание элементов ввода и управления отвечает(ют) дескриптор(ы)

А)

D)<option>

E) </option >

C) <input>

F) </input>

Установите соответствие

Атрибут

Значение

1.disabled

А. текст элемента списка

2. selected

B. выбранный по умолчанию элемент списка

3. multiple

C. разрешение использовать не более 1 опции

D. блокировка доступа к списку

Дополните

8.Разворачивающееся меню вставляется дескриптором(и)___________

9.Атрибут align=top располагает ________

Раздел 4. Гиперсвязи и ссылки

Тема 4.1. Организация гиперсвязей.

Содержание учебного материала:

Главная особенность гипертекста – возможность связывания документов друг с другом путем создания гиперсвязей.

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

Гиперсвязи можно встроить в любом месте HTML – документа – в графику, таблицы, в текстовые абзацы.

Для описания гиперсвязей в web – документах используется <a>, a> («якорь»).

Между <a>, a> может находиться только текст, графика и заголовки.

Текст, располагающийся между <a>, a> обычно изображается браузерами в цвете.

Атрибуты <a>, a>

функция

href

URL

Целевой адрес гиперсвязи

Name

«метка»

Имя связи

Title

Текст

Имя цели гиперсвязи

target

фрейм

Целевой фрейм (указывает браузеру, где отображать результат отработки данной гиперсвязи; в качестве значения атрибута браузер ожидает определенного ранее названия фрейма или окна).

Рекомендации по организации гиперсвязей:

для включения в текст большого числа гиперссылок рекомендуется использовать списки;

текст гиперссылки не должен быть длинным;

вставляйте в текст необходимые ссылки;

не размещайте 2 <a>, a> рядом один с другим в тексте документа, не вставив между ними никакого разделителя;

выделяйте гиперссылки в одном стиле;

в качестве текста гиперсвязей можно использовать графику.

Гиперссылку можно указать на:

Позицию в своем документе;

Другой документ на своем сервере;

Произвольный объект по любому адресу Интернета (a href=http://www/AltaVista.com> AltaVistaa>).

Пример:

В папке 2 файла: 1.html, 2.html.

1.html

……..

2.html

[link] .

Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Поскольку SEO-оптимизация это разновидность шаманизма — она как магия, классифицируется на «белую» и «черную» -такую, после которой сайт за две недели попадает в топ, а потом в бан. Настоящая белая SEO оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

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