Презентация по дисциплине Программное обеспечение компьютерных сетей

1. Презентация по дисциплине Программное обеспечение компьютерных сетей Дудко Е.В., преподаватель спец. дисциплин ГБОУ СПО Новороссийского колледжа строительства и экономики Краснодарского края

2. Тема: Язык гипертекстовой разметки HTML • Цель: • получить представление о языке HTML, • познакомиться с основными элементами языка • познакомиться со структурой web-страницы. (HyperText Markup Language)

3. HTML представляет собой простой язык обработки текстов; на этом языке при помощи набора тегов создается гипертекстовый документ, который можно просматривать специальной программой просмотра Web-страниц - браузером

4. Гипертекстовый документ - документ, содержащий ссылки на другой документ.

5. Переход по ссылкам реализуется через протокол передачи гипертекста HTTP (Hyper Text Transfer Protocol).

6. Отец Всемирной Паутины. Тим Бернерс-Ли является разработчиком языка гипертекстовой разметки HTML (HyperText Markup Language) (который является основным форматом Web-документов), HTTP протокола, URL, URI (унифицированный локатор ресурсов).

7. Гипертекстовые документы создаются на базе языка HTML (Hyper Text Markup Language) • Его управляющие коды состоят из текста ASCII. Они компилируются обозревателем для отображения на экране. Ссылки, списки, заголовки, картинки и формы называются элементами языка HTML.

8. Чтобы уметь профессионально подготавливать гипертекстовые документы, вы должны знать их внутреннее строение, то есть код документа HTML.

9. Описание HTML

10. HTML-документ -это обычный текстовой файл. • Используя любой Web-обозреватель, можно просмотреть результат работы, просто загрузив в него созданный на основе синтаксиса HTML текстовой файл.

11. Гипертекстовый язык предоставляет только информацию для чтения. • Самый главный элемент гипертекстового языка - это ссылки.

12. Тэг • - оформленная единица HTML-кода.

13. Тег HTML состоит из следующих друг за другом в определенном порядке элементов: • левой угловой скобки < • необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру • имени тега (например TITLE или PRE) • необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами (например: ALIGN=CENTER) • правой угловой скобки >

14. Большинство тегов имеют открывающий элемент < имя_тега> и закрывающий элемент </имя_тега> • Между ними находятся коды, которые распознает Web-обозреватель • Два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом • Некоторые теги (например <HR>) являются элементами HTML сами по себе, и для них соответствующий конечный тег неверен.

15. Для каждого тега определяется множество возможных атрибутов • Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть.

16. Спецификация атрибута состоит из расположенных в следующем порядке: • имени атрибута (например WIDTH) • знак равенства (=) • значения атрибута, которое задается строкой символов (например, "80").

17. значение атрибута заключают в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80") • Строка в кавычках не должна содержать такие же кавычки внутри себя

18. Можно опустить кавычки для значений атрибутов, которые состоят только из следующих символов: • символов английского алфавита (A - Z, a - z) • цифр (0 - 9) • промежутков времени • дефисов (-)

19. WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN=“CENTER” • Ссылка на URL без кавычек допустима, например, HREF=foo.htm, однако, когда URL используется с атрибутами, он должен быть заковычен, например HREF="http://www.hut.fi/". • Существуют некоторые браузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

20. Значения атрибутов должны быть отделены пробелами или незаполненными строками.

21. HTMLнечувствителен к регистру (TITLE, или Title, или title, или tItLE) • Но существуют и чувствительные к регистру конструкции языка, а именно: • escape последовательности (называемые символьными объектами), которые начинаются знаком & • URL, так как он может содержать наименования файлов, которые являются чувствительными к регистру во многих операционных системах

22. Когда документ выводится на экран, пробелы, знаки табуляции и пустые линии не сохраняются • То есть любая последовательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле HTML • С другой стороны, пробел в файле HTML может быть представлен с использованием любого количества пробелов или новыми (пустыми) строками.

23. Создание HTML документа

24. Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML<!DOCTYPE> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU"> • Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2

25. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера <HTML> • Любой HTML-документ открывается тэгом <HTML> и им же закрывается.

26. Между тэгами <HTML> и </HTML> следует разместить: • заголовок документа - между тегами <HEAD> и </HEAD> • тело документа - между тегами <BODY> и </BODY>

27. Между тегами HEAD всегда должна находиться информация о кодировке страницы (например <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">) и теги определяющие название страницы <TITLE></TITLE>. • Между тегами содержимого документа <BODY>...</BODY> можно располагать свою информацию, рисунки, видеофайлы, аудиофайлы...

30. Одной из наиболее распространенных ошибок было и остается размещение заголовка в теле документа или наоборот, что совершенно недопустимо. Сначала закрываем заголовок </HEAD>, затем открываем тело.

31. Для того, чтобы текстовый файл превратился в HTML-файл, необходимо поменять его расширение с ".txt" на ".html"