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

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

2 Всемирная паутина (World Wide Web WWW) состоит из множества связанных между собой электронных документов, представляющих кладезь информационных данных, описанных с помощью специальных технологических правил. Эти правила составляются на языке гипертекстовой разметки HTML (HyperText Markup Language). Можно с уверенностью сказать, что сегодня язык разметки HTML является основой всех размещенных в Интернете электронных документов.

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

4 Сохранение созданного файла Файл -> Сохранить Как (File -> Save as) - Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно). - Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save). Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ. Файл - Открыть - кнопка Обзор - Наш документ (index.html) File – Open – Browse – index.html

5 Первый тэг Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:

6 Второй тэг (перенос текста на другую строку) - не требует закрывающего тэга. - голова документа - тело документа

7 Некоторые сведения о тэгах Все тэги, расположенные между, это что-то вроде служебной информации. Все тэги, расположенные между непосредственное содержание документа. - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст)... Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым – закрываем последним, второй – предпоследним и т.д.

8 Третий тэг: окрас текста цветом Добро пожаловать! :) Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам.

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

10 Четвёртый тэг – окрас всего текста. Тэг - многофункционален. - это значит, что весь текст страницы будет синим. Если цвет текста в не задавать, то по умолчанию он будет черным.

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

12 Пятый тэг – установка цвета фона Цвет фона устанавливается в уже знакомом нам тэге :

13 Пример применения Мой первый шаг

14 Обратите внимание: мы одновременно можем прописать в тэге и цвет текста в документе, и цвет фона.

15 Шестой тэг – выравнивание текста Параграфы вводятся тэгом: С помощью параграфов мы можем центрировать текст: текст

16 С помощью параграфов мы можем выровнять текст по левому краю: текст По правому краю документа: текст По обоим краям документа: текст

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

18 Аналог тэга Аналог тэга текст

19 Пример использования Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появться еще один виртуальный друг? :)

20 Седьмой тэг – размер шрифта Существуют шесть уровней заголовков: текст

21 Пример использования Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)

22 Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга, который устанавливает желаемый размер шрифта: текст текст текст текст текст текст текст

23 Пример использования Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)

24 Восьмой тэг – установка стиля текста Полужирный текст Наклонный текст (курсив) моноширинный шрифт текст (куча пробелов) текст текст (куча пробелов) текст текст (куча пробелов) текст К одному фрагменту текста может применяться сразу несколько тэгов: текст

25 Подчеркнутый текст вводится при помощи тэга : Подчеркнутый текст Тэги и представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет: Перечеркнутый

26 Тэг представляется крупным шрифтом, а малым шрифтом относительно основного текста: Малый Нормальный текст Большой

27 Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub – нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:). Верхний индекс sup Нижний индекс sub

28 Девятый тэг – запись наименования шрифта текст (шрифт Arial) Times; Times New Roman; Arial; Helvetica; Courier; Verdana; Tahoma; Cosmic Sans; Garamond

29 Десятый тэг – вставка графического объекта Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой: Если картинка лежит на другом сайте, то путь прописывается полностью:

30 Пример использования Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)