02.06.2013 Язык HTML гипертекстовой разметки Web-страниц. - презентация

1 Язык HTML гипертекстовой разметки Web-страниц

2 Язык HTML был «изобретен» Тимом Бернерсом-Ли в 1989 году. За его основу была взята идея специальными ключевыми словами обозначать, как браузеру следует отображать текст, размеченный языком HTML. Эти ключевые слова получили название tag (тег), и, чтобы их можно было отличить от основного текста, записываются в угловых скобках.

3 начало Web-страницы служебная информация головная часть информация, основная часть (тело) отображаемая в браузере Самые главные теги, которые формируют Web-страницу:

4 Абзацные теги (paragraph) – начинает новый абзац, между соседними разделами создается пустая строка (division) – начинает новый абзац, между соседними разделами не создается пустая строка (break) – разрыв строки

5 Атрибуты – это свойства тегов в HTML. Они записываются в тех же угловых скобках сразу за именем тега и разделяются пробелами Атрибут, отвечающий за выравнивание текста, называется align и может принимать значения left (по левому краю), right (по правому краю), center (по центру) и justify (по ширине).

6 Пример Урок информатики текст будет выровнен по правому краю Урок информатики текст будет выровнен по центру Урок информатики текст будет выровнен по левому краю Урок информатики текст будет выровнен по ширине

7 Шрифтовое оформление Изменение начертания шрифта, т.е. оформление его полужирным или курсивом, а также подчеркивание: (bold) – полужирное (italic) – курсивное начертание (underline) – подчеркнутый текст

8 Большие возможности в настройке свойств шрифта дает парный тег. Сам по себе этот тег ничего с заключенным в нем текстом не делает, всю работу берут на себя его атрибуты. Атрибут size позволяет установить размер шрифта. Размер шрифта в HTML измеряется в неких условных единицах – от 1 (самый мелкий) до 7 (самый крупный). Пример: Я учусь в 18-ом лицее

9 Гарнитуру шрифта можно установить с помощью атрибута face – атрибутом тега. Некоторые обозначения шрифтов: serif – шрифты с засечками sans-serif – рубленые шрифты cursive – курсивные шрифты fantasy – декоративные шрифты Пример: Это должно быть записано курсивом

10 Атрибут установки цвета текста color – атрибут тега. Задать значение цвета можно с помощью его названия (red – красный, firebrick – кирпичный,…) или номера (#FF0000 – красный, #B22222 – кирпичный). Номер цвета состоит из трех пар шестнадцатеричных чисел. Первая пара обозначает светимость красной составляющей пикселя, вторая пара – зеленой, третья – синей. Если все составляющие пикселя светятся в полную мощь, получаем белый цвет (#FFFFFF ). Несветящийся пиксель, кодируемый номером #000000, дает черный цвет.

11 Примеры: # – серый цвет # – темно-зеленый цвет #8800FF – фиолетовый цвет #FF0088 – розовый цвет #FFFF00 – желтый цвет

12 Установки для всего документа производятся с помощью тега Атрибут text – устанавливает цвет текста во всем документе Атрибут bgcolor (backgroundcolor) – устанавливает цвет фона странички Пример: - Коричневый текст будет выведен на бледно-желтом фоне

13 Рисунки на Web-странице Тег Имеет следующие атрибуты: src – указывает местоположение графического файла align – определение способа обтекания рисунка текстом. Может принимать значения left (рисунок располагается слева, а текст обтекает его справа), right (текст обтекает рисунок слева) width и height – ширина и высота рисунка в пикселях alt – текст-подсказка над картинкой border – задает толщину рамки вокруг картинки hspace и vspace – горизонтальные и вертикальные поля вокруг картинки

14 Пример:

15 Графические файлы можно использовать для создания фона странички. Делается это с помощью атрибута background тега Пример:

16 Списки б ывают нумерованные и маркированные. Нумерованный список окаймляется парным тегом. Каждый элемент списка отмечается тегом. Атрибутом type тега можно задать тип нумератора. Значениями этого атрибута могут быть: 1 – нумерация арабскими цифрами (1,2,3,…); I – римскими цифрами (I,II,III,IV,V,…); i – малыми римскими цифрами (i,ii,iii,iv,v,…); A – прописными латинскими буквами (A,B,C,D,E,…); a– строчными латинскими буквами (a,b,c,d,e,…). По умолчанию нумерация списка начинается с единицы.

17 Пример нумерованного списка: Треугольники могут быть (частные случаи): равносторонними; равнобедренными; прямоугольными. В браузере такой список выглядит так: Треугольники могут быть (частные случаи): a. равносторонними; b. равнобедренными; c. прямоугольными.

18 Ненумерованный список окаймляется парным тегом. Каждый элемент списка отмечается уже знакомым нам тегом. По умолчанию ненумерованный список маркируется жирными точками. Если же нужно изменить вид маркера, воспользуйтесь атрибутом type, который может принимать следующие значения: disc – те самые жирные точки; сircle – окружности или пустые точки; square – квадратики.

19 Таблицы создаются парным тегом. - тег создания строки таблицы. Его атрибуты бывают следующими: border – указывает ширину рамки таблицы в пикселях align – устанавливает выравнивание самой таблицы (не ее содержимого!) width – ширина таблицы (в пикселях) height – высота (в пикселях) Ширину или высоту указывают в пикселях (н-р, width=300) или в процентах от величины окна браузера (width=70%) bgcolor – задает цвет фона для всей таблицы

20 тег создания строки таблицы. - тег создания ячейки. Его атрибуты: align – горизонтальное выравнивание; valign – вертикальное выравнивание, может принимать значения top (по верхнему краю), middle (по центру) или bottom (по нижнему краю); width – ширина ячейки (и всей колонки); height – высота ячейки (и всей строки); colspan – указывет количество ячеек в строке, которые необходимо объединить; rowspan – указывает количество объединяемых ячеек в колонке; bgcolor – цвет фона ячейки.

21 Гиперссылки Гиперссылками управляет парный тег. Обязательный атрибут href указывает документ, на который ссылается гиперссылка. Атрибут title позволяет записать текст подсказки. Пример: А здесь вы можете перейти на вторую страницу.

22 Цвет гиперссылок можно изменить атрибутами тега : link – цвет непосещенной гиперссылки; vlink – цвет посещенной гиперссылки; alink – цвет активной гиперссылки

23 Фреймы - это подокна, рамки. Страничка с фреймовой структурой вместо тега содержит парный тег, управляющий отображением файлов с помощью атрибутов: сols – количество и размеры вертикальных фреймов, которые задаются перечислением их размеров через запятую; rows – количество и размеры горизонтальных фреймов; frameborder – наличие или отсутствие рамок у вложенных фреймов; framespacing – расстояние между фреймами в пикселях.

24 Пример: Создадим страницу index.htm c двумя вертикальными фреймами, первый из которых занимает 100 пикселей по ширине, а второй – все оставшееся пространство.

25 Каскадные таблицы стилей CSS Таблица стилей – это шаблон, набор правил, который управляет оформлением тегов на страничке, на сайте или даже на нескольких сайтах. Стилевое правило состоит из двух частей – селектора, который определяет область действия правила, и определения. Определение же состоит из свойства и его значения, разделенных двоеточием. Для одного селектора можно указать несколько определений, тогда их необходимо разделять точкой с запятой. Можно для оформления одного документа создать несколько стилевых таблиц. В этом случае сначала будет применяться внешний стиль, затем внутренний, а затем уже строчной – то есть стили выстраиваются неким «каскадом» от дальних к ближним.

26 По способу встраивания в документ таблицы стилей разделяют на три типа: 1) ВНЕШНИЕ. Таблицу стилей можно записать в текстовом файле (часто с расширением.css, но необязательно). Тогда имя стилевого файла указывается с помощью атрибута href непарного тега : В этом примере значение атрибута href указывает, что стилевую таблицу следует искать в файле style.css. Атрибуты rel и type указывают, что мы имеем дело с таблицами стилей.

27 ) ВНУТРЕННИЕ. Таблица стилей записывается в головной части Web-документа между парными тегами. Необязательный атрибут type=text/css сообщает браузеру, что речь идет именно о таблицах CSS.

28 Пример: Сентябрь В этом примере создается внутренний стиль (тегом H4{text-align:center;, в котором пока color:#886600;одно правило – для тега font-family:Arial;. Это правило }содержит три определения 1) выравнивание по центру 2) цвет шрифта коричневый 3) гарнитура шрифта Arial Наш класс В нашем классе 20 человек. Его актив:

29 Классы Не всегда есть возможность определить стиль для конкретных тегов. Например, необходимо некоторые термины выделять особым образом или же задать для всего текста выравнивание по ширине, а для некоторых абзацев – красную строку. В таких случаях создают классы. При записи правила имя класса предваряют точкой.

30 Пример: H4,H3,H1 {text-align:center; В этом примере color:#886600; создано два класса: font-family:Arial; 1) just - выравнивание } по ширине и красная.just{text-align:justify; строка text-indent:3 em; 2) term - выделение } терминов красным.term{color:red; цветом увеличенным font-size:110%; шрифтом и разрядкой letter-spacing:0.1 em; }

31 Теперь, чтобы применить к какому-либо элементу один из классов, в соответствующем теге пишут class=name, где name – имя класса. Пример: Школа делового успеха Образовательный проект: виртуальные курсы по деловому общению, этике, психологии, имиджу, стилю, визажу. Клуб F1 Для любознательных и тех, кто нуждается в помощи. Консультации специалистов: педагогов, психологов, врачей, стилистов, преподавателей, программистов и т.д.

32 Псевдоклассы А как задать оформление для гиперссылок? Ведь в документе могут присутствовать и обычные гиперссылки, и посещенные, и активные, а тег для всех один -. Для объектов, которые могут находиться в различных состояниях, стандарт CSS определяет псевдоклассы. Всего существует семь псевдоклассов, но только четыре из них поддерживаются браузерами – как раз те, которые нужны для отображения гиперссылок. Имя псевдокласса записывается после имени тега через двоеточие: A:link – обычная гиперссылка; A:active – активная гиперссылка; A:visited – посещенная гиперссылка; A:hover – гиперссылка, над которой находится указатель мыши.

33 Последний псевдокласс позволяет создать интересный эффект меню в стиле Windows. Пример: A{text-decoration:none; font-weight:bold; text-align:center;} A:link{color:#008800;} A:visited{color:#888800;} A:active{color:#880000;} A:hover{color:#CCCCFF; background-color:#888800;} При наведении указателя мыши на пункт меню он выделяется, инвертируясь (то есть цвет фона и цвет символов обмениваются значениями)

34 Свойства обрамления и заполнения CSS дают нам еще одну возможность, которую не предоставлял стандартный HTML – возможность взять в рамку любой элемент страницы, причем не просто в рамку. Для каждого элемента CSS предлагает три контейнера, которые совместно создают обрамление – это подложка (padding), рамка (border) и поля (margin). Поля Рамка Подложка Элемент

35 Самым «управляемым» элементом является рамка – ее можно увидеть, для нее можно задать цвет (border-color), толщину (border-width) и стиль (border-style). Причем стиль является определяющим свойством – не задав его, мы рамку вообще не увидим.

36 Создадим класс bord, обводящий блок двойной зеленой рамкой толщиной 3 пикселя..bord{border-color:green; border-style:double; border-width: 3;} Теперь присоединим этот стиль к блоку тегом : Школа делового успеха Образовательный проект: виртуальные курсы по деловому общению, этике, психологии, имиджу, стилю, визажу.

37 Длинного и нудного описания всех названий можно избежать, если использовать краткое определение свойства: значения толщины рамки, ее стиля и цвета перечисляются через пробел в произвольном порядке. Описание рамки из предыдущего примера эквивалентно следующему описанию:.bord{border: 3 green double;}

38 Можно создавать стиль для каждой стороны рамки отдельно. Для этого надо к названию элемента приписать название стороны через дефис. В следующем примере для всего блока определяется двойная зеленая рамка, а для левой – сплошная рамка толщиной 5 пикселей..bord{border: 3 green double; border-left:5 solid; }

39 За расстояние от содержимого блока до рамки отвечает свойство padding. Для элемента padding можно задать величину, причем как сразу для всех четырех сторон, так и для каждой стороны отдельно. Пример:.bord{border: 3 green double; border-left:5 solid; padding: 10; padding-left: 30; } В этом примере создаются отступы по 10 пикселей со всех сторон, о отступ слева – 30 пикселей.

40 Бывает и так, что все отступы различные. В этом случае их можно перечислить, начиная с верхнего, по часовой стрелке. Пример:.bord{border: 3 green double; border-left:5 solid; padding: ; } Здесь создаются отступы: 10 пикселей сверху, 20 – справа, 30 – снизу и 40 – слева.

41 Таким же образом задаются поля margin (внешние отступы). Часто свойство margin используют для того, чтобы убрать непривычное для нас разделение абзацев пустой строкой, которую создает тег. В следующем примере описан стиль для тега, задающий отрицательный верхний отступ величиной -1 em. P{margin-top: -1 em;}

42 Для пространства, занимаемого подложкой, можно задать фоновый цвет и фоновое изображение. Делается это с помощью следующих свойств: background-color (цвет фона) background-image (фоновый рисунок) background-position (расположение фонового рисунка) background-repeat (повторение фонового рисунка) или с помощью одного «комбинированного» свойства background

43 Пример:.bord{border: 3 green double; border-left:5 solid; padding: 10; background: #FFFF88 url(images/trava.gif) repeat-x bottom; } В этом примере устанавливается желтоватый цвет фона, фоновая картинка из файла trava.gif, повторяющаяся по горизонтали (repeat-x ) в нижней части блока.

44 Позиционирование Расположение элемента на страничке задается с помощью свойства position, которое может принимать одно из трех значений: static – обычное расположение relative – смещение элемента задается относительно предыдущего элемента absolute – смещение элемента задается относительно левого верхнего угла окна браузера Смещение элемента задается свойствами top (сверху, смещение по вертикали) и left (слева, смещение по горизонтали), некоторые браузеры понимают также right (справа) и bottom (снизу)

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

46 Такое же положение даст значение свойства position:static Установим относительное положение картинки: Здесь использован третий способ встраивания таблицы стилей в документ – строчной. Правила описываются в атрибуте style тега. Кроме относительного позиционирования здесь указаны горизонтальная (left:150) и вертикальная (top:30) координаты, т.е. картинка сдвигается от своего «законного» положения на 150 пикселей вправо и на 30 пикселей вниз

47 Кроме положения элемента можно указать размеры блока свойствами width и height. В следующем примере для тега создается inline- стиль: текстовому блоку задаются размеры 150х100 пикселей и для контроля он обводится рамкой. Клуб F1 Для любознательных и тех, кто нуждается в помощи. Консультации специалистов: педагогов, психологов, врачей, стилистов и т.д.

48 Свойство overflow может принимать следующие значения: visible – браузер покажет все содержимое блока независимо от размеров (это значение работает по умолчанию) hidden – текст, который не поместился в указанные рамки, будет скрыт scroll – появятся полосы прокрутки

49 Язык сценариев JavaScript – это технология, позволяющая «оживлять» Web-страницы, делать ее живой, интерактивной Первая версия появилась в декабре 1995 года. JavaScript – это скрипты (сценарии), составленные на языке JavaScript, позволяют реагировать на действия посетителя.

50 Объекты и события Как мы общаемся с компьютером? Как только система загружается, мы начинаем генерировать события – двигать мышкой, щелкать ее кнопками, набирать на клавиатуре текст. Система тут же узнает об этих событиях и реагирует так, как было задумано разработчиками приложений. Язык JavaScript тоже умеет понимать события. Какие? Давайте мысленно загрузим нашу будущую страничку в браузер и попробуем представить, на какие события нам хотелось бы отреагировать. Вы, вероятно, будете удивлены, но к этому моменту уже произошло довольно много событий, и первое из них – это загрузка страницы (onLoad).

51 Если вы успели провести мышкой над окном браузера, то при этом сгенерировали еще кучу событий. Это и передвижение указателя мыши (onMouseMove), и наведение указателя на какой-нибудь объект, н-р, строчку текста (onMouseOver), и выход указателя за пределы этого объекта (onMouseOut). Ну а если вы еще и пощелкали мышкой, то список событий увеличится вдвое. Как же на них реагировать?

52 Рассмотрим несколько примеров, в которых создаются обработчики событий. при загрузке страницы Привет! появляется окно с сообщением «Мы вам рады», а при попытке Место для текста закрыть страницу-«До свидания!» В теге записаны два обработчика событий: onLoad=alert(Мы вам рады!); – событие onLoad происходит при загрузке страницы. Функция alert выводит окно с сообщением, записанным в качестве ее параметра. onUnload=alert(До свидания!); – событие onUnload происходит во время выгрузки страницы из браузера, т.е. тогда, когда мы закрываем его окно либо перегружаем страницу.

53 Попробуем отреагировать на другие события, изменив при этом что-то на самой страничке. Теперь при щелчке мышкой в любом месте страницы текст «Место для текста» центрируется, а при двойном щелчке выравнивается по правому краю. Привет! Место для текста

54 В этом примере изменяются свойства некоторого элемента станицы (текста «Место для текста»). Чтобы можно было обращаться к конкретному элементу, ему надо дать имя. Имя элемента обозначается атрибутом id (identificator). Теперь мы можем указать, что у элемента myText необходимо установить значение свойства align в center, что мы и сделали с помощью записи myText.align=center. Точка в этой записи служит разделителем между идентификатором элемента и его свойством.

55 Добавим в этот код обработку еще двух событий. Теперь, если окно браузера становится неактивным (событие onBlur), в элемент myText выводится текст «Вы куда? Вернитесь!», но как только вы опять перейдете в окно браузера, текст изменится на «Мы рады, что вы опять с нами!». За текстовое содержимое блока отвечает свойство innerText, к которому мы обращались.

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