Разработка Web-сайтов с использованием языка разметки гипертекста HTML. - презентация

1 Разработка Web-сайтов с использованием языка разметки гипертекста HTML

2 Web-страницы Создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы – HTML-тэги, которые определяют вид Web-страницы при её просмотре в браузере. Создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы – HTML-тэги, которые определяют вид Web-страницы при её просмотре в браузере.

3 Достоинства Web-страниц малый информационный объём; малый информационный объём; возможность просмотра в различных операционных системах (ОС). возможность просмотра в различных операционных системах (ОС). Для создания Web-страниц используются простейшие текстовые редакторы. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот. Для создания Web-страниц используются простейшие текстовые редакторы. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

4 Web-сайты Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определённой теме или проблеме. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определённой теме или проблеме. Web-сайты состоят из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web- страницам. Web-сайты состоят из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web- страницам.

5 Тэги одиночные парные (контейнер) одиночные парные (контейнер) Тэги могут записываться как прописными, так и строчными буквами. Структура Web-страницы

6 - открывает/закрывает HTML-документ. - открывает/закрывает HTML-документ. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страницы логические части Web-страницы заголовок содержание

7 - заголовок Web-страницы, содержит название документа и справочную информацию о странице. - заголовок Web-страницы, содержит название документа и справочную информацию о странице. - название страницы, отображается в верхней строке окна браузера. - название страницы, отображается в верхней строке окна браузера. содержание страницы. содержание страницы. Заготовка Web-страницы «Компьютер» Компьютер Компьютер Компьютер и ПО

8 Форматирование текста на Web-странице Заголовок От (самый крупный) до (самый мелкий) Абзац - абзац - абзац Переход на новую строку - непарный тэг (для стихов) - непарный тэг (для стихов)Шрифт SIZE=4 – размер шрифта (от 1 до 7) FASE=ARIAL – тип шрифта COLOR = RED - цвет шрифта

9 Начертание шрифта жирный текст жирный текст наклонный текст наклонный текст подчеркнутый текст подчеркнутый текст текст - имитирующий стиль печатной машинки текст - имитирующий стиль печатной машинки A можно и всё сразу: супер выделенный текст... супер выделенный текст...

10 Цвета HTML Профессиональные дизайнеры используют шестнадцатеричные коды цветов системы RGB. RGB (сокращенно от Red/Green/Blue) - это шестизначное число, определяющее цвет. Первые две цифры задают количество красного цвета, вторые две цифры - зеленого, последние - синего. Мы привыкли к десятичной системе счисления: от 0 до 9. Шестнадцатеричная СС - это числа от 0 до буквы f. То есть, самая старшая цифра здесь не 9, a f. Теперь идем далее. Шестнадцатеричный код для черного цвета будет такой: А для белого: ffffff Желтый цвет будет таким: ffff00. Можно придумывать разные комбинации цифр таких кодов. Например, код 12abfe9 соответствует одному из оттенков зеленого цвета.

11 Цвета HTML #ffffff – белый # – черный #ff00ff – пурпурный #0000ff – синий #ff0000 – красный #00ffff – голубой # ffff00 – желтый #00ff00 – ярко-зеленый # – темно-голубой Можно придумывать разные комбинации цифр таких кодов. Например, код 12abfc9 соответствует одному из оттенков зеленого цвета. Делайте эксперименты. Используется это так: text="#код". Например: Например: text="#12abf9"

12 Выравнивание ALIGN =left (right, center) ALIGN =left (right, center) Горизонтальная линия Горизонтальная линия Метка может включать атрибуты SIZE (определяет толщину линии в пикселях) и/или WIDTH (определяет размер линии в % от ширины экрана). Например,

13 Картинки - вставка картинки - вставка картинки Замечание. Если ваши картинки находятся в отдельной папке (рекомендую!), например в папке "fotos", то адрес будет таким: Дополнительные (необязательные) атрибуты тега : 1. ALIGN - позиционирует картинку. Значения: left, right, center. Например, отобразить картинку справа в браузере можно так: 2. ALT - всплывающая подсказка при наведении мышки на картинку, т.е. ALT="Moe фото". 3. BORDER - ширина рамки вокруг картинки. Значения: от 1 до... Пример: BORDER="l".

14 Гиперссылки Указатель ссылки Указатель ссылки

15 Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.

16 Списки на Web-страницах Нумерованные Нумерованные

первый элемент первый элемент второй элемент второй элемент третий элемент третий элемент