Web-страницы. Язык HTML и др. 1.Базовые конструкции языка HTMLБазовые конструкции языка HTML 2.Работа с таблицами и фреймами.Работа с таблицами и фреймами. - презентация

23 23 Задание для практической работы: 1. Какие есть ещё теги для форматирования текста? 2. Какое отличие тега FONT от тега BASEFONT? 3. Выполнить задания: упражнение 2.1, Придумать тему для собственной странички. Расположить на ней текст о себе.

24 Web-страницы. Язык HTML и др. Списки.

25 25 Маркированные списки Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square

26 26 Нумерованные списки Вася Петя Коля Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: , i, I, a, A

27 27 Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)

28 28 Многоуровневые списки Города России Города Украины Города России Города Украины Москва Санкт-Петерург Киев Одесса

29 Web-страницы. Язык HTML и др. Текстовые гиперссылки.

30 30 Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка) страница во вложенной папке Пример страница в соседней папке Текст выйти из текущей папки

31 31 Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу сайта (URL) Васин текст Васин текст на файл для скачивания Скачать Скачать

32 32 Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх в другом файле Цвет текста метка (якорь) переход на метку

33 33 Запуск почтовой программы Напишите мне! Напишите мне!

34 34 Цвет гиперссылок LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки

35 35 Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок Привет! Привет! цвет текста цвет фона посещенные ссылки (visited link) посещенные ссылки (visited link) цвет ссылок атрибуты тэга

36 Работа с таблицами и фреймами. Создание таблиц

37 37 Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. толщина рамки TABLEтаблица TR = table rowстрока таблицы TD = table dataданные таблицы TH = table header заголовок (жирный, по центру) CAPTION ALIGN= top (=bottom) заголовок таблицы (до или после таблицы)

38 38 Объединение ячеек Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! column span охват столбцов row span охват строк

39 39 Размеры ширина в пикселях или в % от ширины окна браузера высота в пикселях всей таблицы: строки: ячейки: ширина в пикселях или в % от ширины таблицы

40 Задание для практической работы: Пример 2.4, стр. 62, задание выполнить для расписания своего класса 2. Пример 2.5, стр Упражнение 2.3, стр. 66Упражнение 2.3, стр Пример 2.6, стр. 67

По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По центру, по верхней границе По правой границе, по середине По центру, по верхней границе 41 41 Выравнивание По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине...... всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom"> По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По центру, по верхней границе По правой границе, по середине По центру, по верхней границе

42 Оформление внешней рамки 42

43 Отображение разделительных линий 43

44 44 Фон и цвет текста Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов цвет фона фоновый рисунок

45 45 Отступы

46 46 Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white # F A # F A # F A # F A R R G G B B # F F # F F # F F # F F # F F F F F F# F F F F F F # F F F F F F# F F F F F F # 0 0 F F F F# 0 0 F F F F # 0 0 F F F F# 0 0 F F F F # # # # # A A A A A A# A A A A A A # A A A A A A# A A A A A A

47 Задание для практической работы 47 Пример 2.7, стр.70 – 1 балл Упражнение 2.4, стр балла Пример стр. 71, 1. Добавить заливку ячеек цветом 2. Убрать вертикальные линии 3. Сделать цветную рамку 4. Названия классов – гиперссылки на страницы классов 5. Изменить цвет гиперссылки – 5 баллов

48 48 Фреймы Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web- страница. 3 файла: left.html – страница в левой части right.html – страница в правой части index.html – описание структуры

49 49 Описание структуры index.html Фреймы-столбцы Фреймы-столбцы columns столбцы columns столбцы ширина в пикселях или % все остальное место source источник source источник имя фрейма (для ссылок)

50 50 Граница между фреймами граница между фреймами: 0 – невидима, 1 - видима граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу

убрать отступы от края фрейма до содержимого полоса прокрутки: a" title="51 Настройка фрейма (FRAME) убрать отступы от края фрейма до содержимого полоса прокрутки: a" class="link_thumb"> 51 51 Настройка фрейма (FRAME) убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров убрать отступы от края фрейма до содержимого полоса прокрутки: a"> убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров"> убрать отступы от края фрейма до содержимого полоса прокрутки: a" title="51 Настройка фрейма (FRAME) убрать отступы от края фрейма до содержимого полоса прокрутки: a">

52 52 Фреймы-строки index.html Фреймы-строки Фреймы-строки строки ширина в пикселях или % Фреймы-строки строки ширина в пикселях или %">

53 53 Сложные структуры (3 фрейма) index.html

54 54 Как открыть ссылку в другом фрейме Глава 2 Глава 2 TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы) Глава 2 Глава 2 TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы)">

55 55 Что такое CSS? HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы) HTML–код не должен содержать оформления! оформление частей документа (заголовков, параграфов) описывается в отдельном файле CSS = Cascading Style Sheets – каскадные таблицы стилей стилевые файлы: *.css HTML + CSS оформление содержание + Javascript анимация

56 56 Свойства элементов страницы body { color: white; background: #FF6600; } body { color: white; background: #FF6600; } название тэга значение селектор (свойство) color – цвет символов background – цвет фона my.css

... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; bac" title="57 Подключение стилевого файла Пример CSS ... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; bac" class="link_thumb"> 57 57 Подключение стилевого файла Пример CSS ... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } ... ... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; bac"> ... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } ..."> ... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; bac" title="57 Подключение стилевого файла Пример CSS ... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; bac">

58 58 Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек monospace – моноширинный serif – с засечками sans-serif – без засечек monospace – моноширинный размер в пикселях normal – обычный italic - курсив normal – обычный italic - курсив normal – обычный bold - жирный normal – обычный bold - жирный

59 59 Классы (стили оформления) p.spec { font-style: italic; background: green; } p.spec { font-style: italic; background: green; } для абзацев класса spec LEtat cest moi. LEtat cest moi. qq.html LEtat cest moi..spec { font-style: italic; background: green; }.spec { font-style: italic; background: green; } для всех элементов класса spec для всех элементов класса spec Россия молодая Россия молодая

60 60 Размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина высота Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. выравнивание: left center right justify выравнивание: left center right justify 100px 80% 20px фон абзацный отступ

61 61 Рамка и поля p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } рамка отступы снаружи отступы внутри сверху, справа, снизу, слева со всех сторон толщина solid – сплошная dashed - штриховая dotted – точечная solid – сплошная dashed - штриховая dotted – точечная цвет Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 40px 5px 20px

62 p.hallo { background: white url(images/grad.jpg); } p.hallo { background: white url(images/grad.jpg); } 62 Фоновый рисунок Привет, Вася! Привет, Вася! Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; } p.hallo { background: url(grad.jpg) repeat-y; } Привет, Вася!

63 63 Фоновый рисунок без повторения p. { background: url(letter.gif) no-repeat; padding-left: 20px; } p. { background: url(letter.gif) no-repeat; padding-left: 20px; } 20px

64 64 Ссылки p. a { color: green; text-decoration:none; } p. a { color: green; text-decoration:none; } p. a:hover { color: #00F; text-decoration:underline; } p. a:hover { color: #00F; text-decoration:underline; } p. a:visited { color: #F0F; } p. a:visited { color: #F0F; } ссылки внутри абзаца стиля убрать подчеркивание посещённые ссылки подчеркнуть когда мышь над ссылкой

65 65 Выделение отдельных слов.latin { color: green; font-style: italic; }.latin { color: green; font-style: italic; } класс, применимый ко всему курсив Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Что хочется исправить? !

66 Работа с изображениями, гиперссылки. Тема 6. Рисунки

67 67 Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256 цветов) рисунки с четкими границами, мелкие рисунки JPEG (Joint Photographer Expert Group) сжатие с потерями только True Color (16,7 млн. цветов) нет анимации и прозрачности рисунки с размытыми границами, фото PNG (Portable Network Graphic) сжатие без потерь с палитрой (PNG-8) и True Color (PNG-24) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки

68 68 Фон страницы (через CSS) body { background: url(back.jpg); } body { background: url(back.jpg); } 'images/back.jpg' '../images/back.jpg ' 'images/back.jpg' '../images/back.jpg ' Не должно быть «швов»! ! Фон не должен мешать! ! #6e5c62;

69 69 Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)

70 70 Выравнивание left right top bottom (по умолчанию) middle

71 71 Отступы VSPACE (vertical space) HSPACE (horizontal space)

72 72 Выравнивание и отступы (CSS) img.left { float: left; margin: 5px 10px; } img.left { float: left; margin: 5px 10px; } = VSPACE = HSPACE = ALIGN margin: 5px 10px 5px 0; отступа слева нет!

73 73 Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг рисунка

локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет " title="74 Рисунок-гиперссылка локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет " class="link_thumb"> 74 74 Рисунок-гиперссылка локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста» локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет "> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста»"> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет " title="74 Рисунок-гиперссылка локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет ">

75 75 Рисунки в HEFS вставить рисунок Автоматически вставляются размеры! !

76 Создание карты гиперссылок. 76 Карта ссылок - это изображение, содержащее одну или несколько гиперобластей, называемых гиперобъектами. Каждый гиперобъект функционирует, как отдельная ссылка. Ссылки могут указывать на различные страницы или выполнять различные скрипты, что делает карты ссылок более полезными, чем обычные старые добрые изображения со ссылкой, в которых изображение целиком функционирует, как одна ссылка. В карте ссылок сам файл изображения не представляет ничего особенного. Можно начать с любого Web-изображения. Превращает изображение в карту ссылок блок HTML- кода, определяющий форму, положение и функционирование гиперобъектов. Итак, карта ссылок состоит из двух частей: 1. Самого файла изображения; 2. Блока кода, определяющего гиперобъекты. Обратите внимание, что в теге img используется атрибут usemap, который сообщает браузеру, какое определение карты применить. На странице можно иметь любое число карт ссылок и даже можно использовать одно и то же определение для абсолютно разных изображени. Само определение находится между тегами mар. Значение атрибута name тега тар соответствует значению атрибута usemap тега img, за одним исключением, которое бросается в глаза: в значении атрибута usemap перед именем определения ставится символ числа (#), а значение атрибута name не имеет префикса. Каждый гиперобъект карты ссылок получает свой собственный тег area. Таким образом, если у нас есть шесть гиперобъектов, нам понадобится шесть тегов area. Эти теги are a могут идти в любом порядке. Как можно предположить, атрибуты тега area определяют, где и как будут располагаться гиперобъекты: Атрибут shape определяет, какая форма гиперобъекта из трех возможных используется: прямоугольник (rect), окружность (circle) или многоугольник (poly). Атрибут coords определяет положение и размер гиперобъекта. В зависимости от значения атрибута shape, значения атрибута coords имеют разный смысл. Левый верхний угол любого изображения имеет координаты (0,0). Правый нижний угол изображения с размерами 500 на 300 пикселов имеет координаты (500,300). Атрибут href содержит ссылку гиперобъекта. Его значением может быть путь к новой странице, или оно может открывать пустое окно электронного сообщения или запускать скрипт.

77 Web-страницы. Язык HTML и др. Тема 9. Блоки (DIV)

78 78 Блоки (DIV) – любое содержимое Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. 1

79 79 Блоки (DIV) – рамки и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar. padding border margin #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; } #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; }

80 80 «Плавающие» блоки.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; }.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } На природе На природе свойства блока свойства абзаца внутри блока

81 Web-страницы. Язык HTML и др. Тема 10. Понятие о Javascript

82 82 Что может Javascript? информация статична нет интерактивности (только переход на другую страницу) Чем плоха HTML-страница? Что можно сделать с помощью Javascript? изменение рисунка при наведении мыши выпадающие меню всплывающие подсказки фотогалерея без перегрузки страницы движение объекта по экрану Javascript может быть отключен в браузере

83 83 Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства свойства объекта можно менять из программы на Javascript (скрипта) все, что происходит – это события все события можно «обрабатывать», т.е. как-то реагировать на них Javascript – это язык программирования! ! HTML + Javascript = DHTML (Dynamic HTML)

84 84 Замена рисунка при движении мыши когда курсор мыши над рисунком после ухода мыши События: onMouseOver – курсор мыши над объектом onMouseOut – курсор мыши ушел с объекта начальный рисунок this – этот объект this.src – свойство SRC этого объекта

85 85 Скрытый блок Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др..hidden { display:none; }.hidden { display:none; }

86 86 Скрытый блок: оформление ссылки Показать детали Показать детали остаться на странице по щелчку вызвать функцию show переход не выполнять Показать детали Показать детали остаться на странице по щелчку вызвать функцию show переход не выполнять">

87 Скрытый блок: как его открыть? 87 function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; }

Похожие презентации

---

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 4. Списки.

Web-страницы. Язык HTML 1.ВведениеВведение 2.Оформление текстаОформление текста 3.ГиперссылкиГиперссылки 4.СпискиСписки 5.РисункиРисунки 6.ТаблицыТаблицы.

Основы Web-дизайна: HTML и редактор HEFS К. Поляков, 2007-2011 1 Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой.

Web-страницы. Язык HTML Тема 1. Введение. 2 Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ. Гипертекст – текст, содержащий.

К. Поляков, 2007-2011 Web-страницы. Язык HTML и др. 1.ВведениеВведение 2.Структура документаСтруктура документа 3.СпискиСписки 4.ГиперссылкиГиперссылки.

К. Поляков, 2007-2011 Web-страницы. Язык HTML и др. Тема 1. Введение.

Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.

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

Язык HTML Web-дизайн Web – World Wide Web (WWW) Всемирная паутина. Design – проектирование, конструирование. Web-дизайн – проектирование в Интернете.

Web-страницы. Язык HTML 1.ВведениеВведение 2.Структура документаСтруктура документа 3.СпискиСписки 4.ГиперссылкиГиперссылки 5.Оформление документаОформление.

К. Поляков, 2007-2011 Web-страницы. Язык HTML и др. 1.ВведениеВведение 2.Структура документаСтруктура документа 3.СпискиСписки 4.ГиперссылкиГиперссылки.

(HyperText Markup Language) – язык гипертекстовой разметки.

Название страницы содержание страницы Структура любого HTML файла.

HTML (HyperText Markup Language) - Язык Разметки Гипертекста.

HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.

1 Cascading Style Sheets каскадные таблицы стилей 2.

РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ.

Уроки сайтостроения «Структура html- документа». Что такое Интернет? Интернет, словно город, состоит из домиков – сайтов, которые, в свою очередь, состоят.

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 1.ВведениеВведение 2.Оформление текстаОформление текста 3.ГиперссылкиГиперссылки 4.СпискиСписки 5.РисункиРисунки.

© Пивоваров Я.А., 2005 г. Появление HTML пришлось на начало 90-х годов благодаря двум протоколам, которые являются базовыми для Internet – TCP (Transmission.

Подбираем похожую презентацию...

Готово:

Web-страницы. Язык HTML 1.ВведениеВведение 2.Структура документаСтруктура документа 3.СпискиСписки 4.ГиперссылкиГиперссылки 5.Оформление документаОформление.