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

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

2 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php позволяют выбирать информацию из базы данных по заранее неизвестным запросам дополнительная нагрузка на сервер загружаются медленнее

3 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! ! HTML-страница – это текстовый файл (Блокнот): Моя страница Привет! … Моя страница Привет! … index.html sail.jpg man.jpg sunset.jpg clock.avi ball.swf bee.wav images

4 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить рисунок открывающий закрывающий область действия тэга: описание таблицы

5 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Простейшая Web-страница Моя первая Web-страница Привет! Моя первая Web-страница Привет! first.html Моя первая Web-страница Моя первая Web-страница шапка («голова») Привет! Привет! основная часть («тело»)

6 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Заголовки: H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки выравнивание: История left, center, right left, center, right

7 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Абзацы переход на новую строку абзац (с отступами) И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками...

8 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по центру. Этот текст выровнен по ширине. left по левой границе right по правой границе center по центру justify по ширине Не используйте выравнивание по ширине для узких столбцов! ! атрибут тэга

9 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Маркированные списки Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square

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

11 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)

12 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Многоуровневые списки Города России Города Украины Города России Города Украины Москва Санкт-Петерург Киев Одесса

13 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка) страница во вложенной папке Пример страница в соседней папке Текст выйти из текущей папки

14 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Примеры (ссылки из файла rock.html) story.html stories – novels – new – old – list.html sea.html verse.html rock.html

15 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу сайта (URL) Васин текст Васин текст на файл для скачивания Скачать Скачать

16 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх в другом файле Цвет текста метка (якорь) переход на метку

17 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Запуск почтовой программы Напишите мне! Напишите мне!

18 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Гиперссылки в HEFS локальная ссылка Автоматически строится относительный адрес! ! Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную вставить только адрес файла

19 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Содержание и оформление Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? содержание (контент) логическая разметка ( *.html ) логическая разметка ( *.html ) оформление физическая разметка ( *.css ) физическая разметка ( *.css ) main.css mini.css print.css

20 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Логическая разметка выделение (emphasize) Это моя первая победа. сильное выделение (strong) Вася код программы a:= 2*b определение (definition) Сурок - это... цитата (citation) Блажен, кто верует,... сокращение (abbreviation) НИИЧАВО

Показать детали Пока" title="Основы Web-дизайна: HTML и редактор HEFS К. Поляков, 2007-2011 http://kpolyakov.narod.ru 60 Скрытый блок: оформление ссылки Показать детали Пока" class="link_thumb"> 60 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Скрытый блок: оформление ссылки Показать детали Показать детали остаться на странице по щелчку вызвать функцию show переход не выполнять Показать детали Пока"> Показать детали Показать детали остаться на странице по щелчку вызвать функцию show переход не выполнять"> Показать детали Пока" title="Основы Web-дизайна: HTML и редактор HEFS К. Поляков, 2007-2011 http://kpolyakov.narod.ru 60 Скрытый блок: оформление ссылки Показать детали Пока">

61 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Скрытый блок: как его открыть? 61 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"; }