Создание сайта. 1. Первый документ Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

Презентация:



Advertisements
Похожие презентации
Приложение к лекции 10 Общие понятия об HTML. Основные тэги.
Advertisements

Web-сайты и web- страницы. Цели и задачи: 1.Образовательные: 1. Ввести понятие «web-сайт»; 2. Познакомить с HTML; 3. Рассмотреть достоинства языка разметки.
Автор: Пилишкина Надежда Васильевна. HTML (Hyper Text Markup Language) «Язык гипертекстовой разметки» «Многомерный» текстовый документ, в котором установлены.
Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
Форматирование текста на Web- странице. Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа.
Занятие 5 Иллюстрации и гиперссылки. "Как вставлять картинки" - одиночный тег для размещения картинки src=URL" – обязательный атрибут тега URL – ссылка.
HTML. Первые шаги.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
Основы Web-дизайна Основы Web-дизайна Первые шаги.
HTML Урок 2 Пищита Е.В.. СОДЕРЖАНИЕ УРОКА Вставка горизонтальной линии. Тег Цвет горизонтальной линии. Тег Выравнивание горизонтальной линии. Тег Линия.
Язык HTML Web-дизайн Web – World Wide Web (WWW) Всемирная паутина. Design – проектирование, конструирование. Web-дизайн – проектирование в Интернете.
Катанов Александр Гребешков Александр. 2 Содержание: 1.Введение………………………………………………………………… Построение: а)Главные тэги……………………………………………………
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
Работа с текстом в HTML. Размер и форма шрифта Тег - определяет выводимый шрифт, его размер и цвет. Атрибуты тега: FACE – определяет гарнитуры шрифтов.
(HyperText Markup Language) – язык гипертекстовой разметки.
Форматирование текста на Web- странице. Заголовки Так выглядит заголовок первого уровня Так выглядит заголовок второго уровня Так выглядит заголовок третьего.
Знакомство с языком HTML Гипертекст – это электронный документ, который содержит гиперссылки на другие документы. Гипертекстовый документ предназначен.
Язык разметки гипертекста НТМL (HyperText Markup Language)
Основы языка HTML Теги разметки документа. Тег (tag - указатель, метка) Команда или фрагмент кода, который описывает определенный элемент документа HTML.
Транксрипт:

Создание сайта

1. Первый документ Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

2. Html html не является языком программирования, он предназначен для разметки текстовых документов То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги ). Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

3. Тег Все, что находится между - это тэг. Текст, не находящийся между такими скобками - весь виден при просмотре в броузере - этот тэг должен открывать документ закрывающий тег - перенос текста на другую строку ( не требуют закрывающего тэга ) Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

4. Очередность тегов - голова документа - тело документа... Только такая очередность закрывающих тэгов верна : тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т. д.

5. Раскрашивание Палитра ( все цвета интернета Добро пожаловать ! :) Цвет - решетка - имя цвета

6. Второй документ Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

7. Другой способ раскрашивания Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

8. Фон документа Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

9. Параграфы … Выравнивание текст - центрировать текст текст - по левому краю текст - по правому краю текст - по обоим краям Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

10. Центрирование ! Нельзя вводить в документ подобную конструкцию : после закрывающего тега автоматически происходит перенос строки текст - тэг альтернативный Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

11. Альтернатива выравнивания текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать ! :)

12. и Запрещается текст текст текст И текст текст текст Можно текст первого абзаца текст второго абзаца текст третьего абзаца

13. Заголовки и размер шрифта текст после закрывающего происходит автоматически перенос на другую строку для выделения небольшой части текста Для большого фрагмента текста предназначен атрибут size тэга текст

14. Стиль шрифта Полужирный текст Наклонный текст ( курсив ) моноширинный шрифт ( куча пробелов ) Или Можно применять сразу несколько тэгов : текст Подчеркнутый текст Перечеркнутый Или Перечеркнутый

15. Стиль шрифта Малый Нормальный текст Большой Верхний индекс sup Нижний индекс sub

16. Тип шрифта текст ( шрифт Arial) Стандартные типы шрифтов Times; Times New Roman; Arial; Helvetica; Courier; Verdana; Tahoma; Cosmic Sans; Garamond В атрибуте face можно указать сразу несколько типов шрифтов : текст ( шрифт Arial)

17. Тип шрифта В атрибуте face можно указать сразу несколько типов шрифтов : текст ( шрифт Arial)

18. Вставка картинки картинка в той же папке, что и документ во вложенной папке на уровень выше на другом сайте

19. Обтекание картинки текстом слева справа текст внизу текст посередине текст сверху

20. Обтекание картинки текстом расстояние между текстом и рисунком ( по вертикали ) по горизонтали ( в пикселях ) описание картинки ширина самой картинки высота самой картинки рамка вокруг самой картинки Атрибуты для одного тэга могут употребляться одновременно друг с другом

21. Картинку можно сделать фоном документа

22. Завершение обтекания текстом или all, right

23. Создание ссылок Создать отдельную папку и поместить в ней index.html – главный документ prf.html – документ с фотографиями посмотреть мои фотографии Тэг делает ссылкой заключенную в него картинку или фразу ( текст ). мои фотографии в той же папке мои фотографии в папке /photos мои фотографии на сайте

24. Цвета ссылки link - цвет просто ссылки alink - цвет активной ссылки ( нажатой ) vlink - цвет уже посещенной ссылки прописан один цвет для всех ссылок в документе Разный цвет ссылок делается при помощи тэга и его атрибута color: посмотреть мои фотографии ! - прописывается внутри тэга

25. Ссылка на почтовый ящик У mailto есть еще некоторые опции : - ?subject= Тема пи c ьма - &Body= Текст вашего сообщения - ( копии письма через запятую ) - ( скрытые копии письма через запятую ) Все вместе это будет выглядеть так :

26. Подсказка к текстовой ссылке текст - ссылка текст - ссылка

27. Картинка - ссылка Рамочку вокруг картинки можно убрать, если вы зададите картинке атрибут border="0"

28. Цвет рамки вокруг картинки задается атрибутом bordercolor,

29. Увеличение картинки Нажимаешь на маленькую картинку - загружается большая - в том же окне - в новом окне

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

31. Навигационная карта Атрибут shape - определяет форму области : будет ли она прямоугольником (shape="rect"), кругом (shape="circle") или многоугольником (shape="poly"). Атрибут shape - определяет форму области : прямоугольник (shape="rect"), круг (shape="circle") или многоугольник (shape="poly").

31. Навигационная карта 1., где x1=25, y1=36, x2=114, y2=98 2. Ссылка области 3. Дать имя карты 4. Связать карту с картинкой Текст

31. Навигационная карта Круглой область : координаты центра (x и y) и длина радиуса (R) в пикселях. Многоугольная область : координаты вершин (x и y)

32. Ссылка внутри документа – « якорь » Заголовки сделаем закладками, использовав атрибут тэга A - name: Стих третий Затем, мы сделаем на них ссылки : Ссылка на стих третий Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом : Ссылка на стих третий из какого - то другого документа или Ссылка на стих третий из какого - то другого документа ( имя сайта, имя документа + имя закладки )