Коротко об элементах HTML

Тема 5. Базы ПОСТРОЕНИЯ WEB-САЙТОВ

Создание страничек в Веб – одно из направлений, где нужны познания по компьютерной графике. Тут коротко описан язык HTML разметки гипертекста, с помощью которого создаётся большая часть страничек во глобальной сети. При помощи HTML можно создавать не только лишь странички для Веба. Например, в HTML можно сделать интерактивную Коротко об элементах HTML презентацию хоть какой трудности либо оформить и приготовить документ (текст, графический коллаж) для печати. Плюс ко всему этому, можно освоить особые языки программирования (более пользующиеся популярностью из их - Javascript и PHP). С помощью их создаётся так именуемый динамический HTML (Dynamic HTML). Так создаются гостевые книжки, чаты, Интернет-магазины и Коротко об элементах HTML другие интерактивные странички (дозволяющие юзеру вести взаимодействие с собой). С помощью динамического HTML можно также создавать более действенные странички (к примеру, заместо 50 схожих страниц написать одну динамическую).

Главные понятия Web

Неформатированный текст (обыденный текст, ASCII текст) – создаётся в блокноте (Notepad) либо другом ординарном редакторе текста. Неформатированный текст – т.е. без форматирования, в Коротко об элементах HTML нём не могут употребляться разные шрифты, разный размер текста, выравнивание и т.д.

Код HTML – тоже может быть сотворен в ординарном редакторе текста, но отличается от обыденного текста тем, что содержит особые команды языка разметки гипертекста (HTML) – теги.

Web-страница (либо HTML-страница, HTML-документ, страничка, страница) – один Коротко об элементах HTML файл, содержащий код HTML, и имеющий расширение htm, html, php, phtml (есть и другие, пореже применяемые расширения).

Web-дизайнер – тот, кто создаёт web-страницы. Web-дизайнер может:

§ Создавать HTML-код в редакторе текста (либо в редакторе кода). Дальше рассматривается конкретно таковой метод.

§ Создавать web-страницу зрительно. Для этого употребляется особый Коротко об элементах HTML зрительный (WYSIWYG, What You See Is What You Get – что видишь, то и получаешь) редактор. 2-ой метод проще для начинающего, но, часто зрительно сделанные странички отличаются кривым кодом и огромным количеством ошибок.

Браузер (browser, броузер) – программка юзера для просмотра Web-страниц. Таким макаром, Вы создаёте страничку в одной программке – редакторе, просматриваете Коротко об элементах HTML её в другой – браузере. Можно сказать, что браузер – программка для зрительного отображения кода HTML. Примеры браузеров: Microsoft Internet Explorer, Мозилла, Netscape, Firefox, Opera.

Веб(Internet, World Wide Web, глобальная сеть, сеть) – огромное количество компов по всему миру, соединённых меж собой.

URL (Universal Resource Locator) – адресок web-страницы либо файла во глобальной Коротко об элементах HTML сети Веб. Любая страничка либо файл в сети имеет собственный уникальный URL адресок. Этот адресок записывается в специальную адресную строчку браузера. Примеры URL:

http://www.yandex.ru

http://seegix.net

http://1188.ru/index.php

В большинстве браузеров не непременно даже писать http:// и www:

yandex.ru

seegix.net

1188.ru/index.php

Юзер (либо user) – тот, кто Коротко об элементах HTML будет просматривать Web-страницы (в контексте Web-дизайна).

Web-сайт (website, site, веб-сайт) – совокупа web-страниц, объединённых некой общей мыслью и связанных меж собой ссылками.

Ссылка – зрительный элемент странички, связывающий её с другими страничками либо файлами. При нажатии на ссылку (обычно представляет собой текст либо картину), Вы перебегайте к Коротко об элементах HTML другой страничке, выполняете определённую команду либо скачиваете файл из сети.

Введение в HTML

В этой лекции вводится понятие "тег" и рассматривается пример простейшей web-страницы, тщательно рассматриваются теги и приводятся примеры их характеристик. Потом рассматривается структура web-страницы, теги параграфа, заголовка, отступа и методы организации комментария.

HTML (Hyper Text Markup Коротко об элементах HTML Language) значит язык разметки гипертекста. Этот язык был разработан Тимом Бернерсом-Ли в рамках сотворения проекта распределенной гипертекстовой системы, которую он именовал World Wide Web (WWW) либо Глобальная сеть. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Документ на языке HTML может включать последующие составляющие:

стилизованный и форматированный Коротко об элементах HTML текст,

команды включения графических и звуковых файлов,

гиперсвязи с разными ресурсами Internet.

скрипты на языке JavaScript и VBScript.

разные объекты, к примеру Flash-анимацию

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

Файлы HTML обычно имеют расширения htm либо html. Их Коротко об элементах HTML можно создавать с помощью хоть какого редактора текста.

Язык HTML является подмножеством массивного языка SGML (Standard Generalized Markup Language), который обширно употребляется в издательской деятельности. Основной выигрыш от использования этих языков состоит в переносимости текста меж различными издательскими системами. Эта же особенность сохраняется и в HTML. Так, читая документ, юзеры Коротко об элементах HTML могут устанавливать методы выделения текста, гарнитуру и размер шрифтов по собственному вкусу; они могут отменить просмотр рисунков.

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

В различных операционных системах имеются разные редакторы, которые можно использовать для сотворения документов HTML. Если вы используете Microsoft Windows, то запустите редактор Notepad.

Файлы HTML можно создавать и в редакторе Microsoft Word, в Коротко об элементах HTML каком имеется возможность сохранить документ как Web-страницу (в меню "Файл"), но использовать эту возможность не рекомендуется. Во-1-х, так как HTML-код, генерируемый MS Word не оптимален и содержит огромное количество ненадобных частей разметки, и, во-2-х, автоматическая генерация кода не будет содействовать исследованию и Коротко об элементах HTML правильному осознанию HTML.

Имеется также огромное количество специализированных редакторов для сотворения файлов HTML, таких как FrontPage, Macromedia Dreamweaver либо Adobe Web Bundle, которые владеют возможностью WYSIWYG (What You See Is What You Get - что видишь, то и получишь). С помощью их можно просто создавать документы HTML, с помощью кнопок и Коротко об элементах HTML частей меню, а не писать самому теги разметки. Но, как ранее говорилось выше, тем, кто желает стать на техническом уровне грамотным разработчиком Web, безотступно рекомендуется использовать обычный текстовый редактор для исходного исследования HTML.

Напечатайте последующий текст:

Это заголовок страницыЗдравствуйте!

Это моя 1-ая страничка HTML. Этот текст выводится жирным Коротко об элементах HTML шрифтом.

Пример выполнения данного HTML-кода

Здрасти!

Это моя 1-ая страничка HTML. Этот текст выводится жирным шрифтом.

Сохраните файл как "page1.htm".

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

Сейчас поглядите, как браузер покажет вашу первую страничку. Запустите браузер Веб. Изберите "Open" либо "Open Page" ("Открыть" либо "Открыть страничку") в меню File (Файл) браузера. Появится диалоговое окно. Изберите "Browse" либо "Choose File" ("Просмотр" либо "Избрать файл") и Коротко об элементах HTML найдите только-только сделанный файл HTML - "page1.htm" - изберите его и щелкните на кнопке "Open" ("Открыть"). В диалоговом окне должен показаться адресок, к примеру "C:\MyDocuments\page1.htm". Щелкните на кнопке ОК, и браузер выведет на экран вашу страничку.

Разбор примера

Ваш 1-ый HTML-документ начинается с тега , который Коротко об элементах HTML докладывает браузеру о начале документа HTML и завершается тегом , который информирует браузер о достижении конца документа HTML.

Текст меж тегами и является информацией заголовка документа. Эта информация не выводится в окне браузера.

Текст "Это заголовок странички" меж тегами и является заголовком документа. Этот заголовок выводится в строке заголовка окна Коротко об элементах HTML браузера.

Текст меж тегами и является текстом, который будет выведен в окне браузера. Текст "Здрасти!" меж тегами и будет отображен стилем заголовка, обычно жирным шрифтом большего размера.

Тег

значит, что начинается новый параграф, тег

значит конец параграфа.

Текст "Этот текст выводится жирным шрифтом." меж тегами и будет выведен жирным Коротко об элементах HTML шрифтом.

Кратко о тегах

Теги HTML употребляются для выделения частей HTML. Обычно теги HTML употребляются парами и заключены меж 2-мя знаками угловых скобок и . Всё что ограничено угловыми скобками "" именуется тегом. Теги являются командами языка HTML и во время просмотра странички в браузере не показываются. Текст меж исходным и конечным Коротко об элементах HTML тегами является содержимым элемента. Некие теги не имеют конечного, к примеру, тег принудительного переноса строчки
. Для таких тегов рекомендуется использовать последующее написание
.

Регистр знаков для отображения тегов не важен, к примеру,

и

значит одно и то же. Но в этом курсе употребляется нижний регистр для написания тегов. Это связано с тем Коротко об элементах HTML, что консорциум WWW (W3C), который занимается стандартизацией спецификации HTML, советует использовать теги в нижнем регистре, так как в последующем поколении эталонов будет конкретно такое требование.

Кратко об элементах HTML

Элементом именуется пара тегов с схожим именованием, в последнем из которых стоит оборотный слеш "/". Единственным исключением является элемент , который состоит только Коротко об элементах HTML из открывающего тега.

Разглядим тот же пример документа HTML:

Это заголовок страницыЗдравствуйте!

Это моя 1-ая страничка HTML. Этот текст выводится жирным шрифтом.

Пример выполнения данного HTML-кода

Здрасти!

Это моя 1-ая страничка HTML. Этот текст выводится жирным шрифтом.

Элементом HTML является:

Здрасти!

Этот элемент начинается с тега , имеет содержимое "Здрасти Коротко об элементах HTML!" и завершается тегом .

Также элементом HTML является:

Это моя 1-ая страничка HTML.Этот текст выводится жирным шрифтом.

Этот элемент, начинается с исходного тега

, завершается конечным тегом

и значит, что содержимое элемента "Это моя 1-ая страничка HTML. Этот текст выводится жирным шрифтом." является отдельным параграфом. При всем этом снутри Коротко об элементах HTML этого элемента находится другой элемент:

Этот текст выводится жирным шрифтом.

Этот элемент HTML начинается с исходного тега: Содержимым элемента HTML является: Этот текст выводится жирным шрифтом. Этот элемент HTML завершается конечным тегом . Предназначение тега состоит в определении элемента HTML, который должен выводиться жирным шрифтом.

Все описанные элементы HTML содержатся в элементе:

Здрасти Коротко об элементах HTML!

Это моя 1-ая страничка HTML.Этот текст выводится жирным шрифтом.

Этот элемент HTML начинается с исходного тега , и завершается конечным тегом . Предназначение тега состоит в определении элемента HTML, который содержит основную часть (либо тело) документа HTML.

Атрибуты тегов

Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементах HTML Коротко об элементах HTML. Атрибуты всегда употребляются в виде пары "имя/значение". Общий формат задания атрибутов имеет вид:

К примеру, тег:

значит, что цвет фона странички должен быть красноватым.

А тег:

значит, что параграф нужно выровнять по центру странички отображения браузера.

Атрибуты всегда помещаются в исходном теге элемента HTML. Значения атрибутов Коротко об элементах HTML всегда полезно заключать в кавычки. Более обширно употребляются двойные кавычки, но одиночные кавычки также допустимы.

В неких редчайших ситуациях, когда, к примеру, значение атрибута само содержит кавычки, нужно использовать одиночные кавычки:

ИНТУИТ

Пример выполнения данного HTML-кода

ИНТУИТ

Главные теги HTML

Параграфы

До того как учить теги форматирования HTML, поглядим как введенный текст отобразится Коротко об элементах HTML, если не будут использованы никакие теги, не считая тегов и . Последующий пример показывает таковой документ HTML

Этот текст будет показан в окне браузера.

Пример выполнения данного HTML-кода

Этот текст будет показан в окне браузера.

Этот обычной пример документа HTML, который содержит малое количество тегов HTML и показывает, как текст Коротко об элементах HTML снутри элемента body отображается в браузере.

Если ввести большой объем текста таким методом, то читать его будет очень неловко. Логичнее разбить его на параграфы, как в книжке, которые увеличивают читабельность текста, и не считая того выделяют смысловые блоки.

Последующий пример указывает, как показываются параграфы

Это параграф 1.

Это параграф 2.

Это параграф 3.

Пример выполнения данного Коротко об элементах HTML HTML-кода

Это параграф 1.

Это параграф 2.

Это параграф 3.

Этот пример показывает, как в браузере выводится текст снутри частей параграфа. Можно созидать, что по дефлоту текст каждого параграфа выводится в виде отдельного блока. Любой из таких блоков отделяется от прошлых и следующих блоков странички пустой строчкой. Но отображение параграфа браузером Коротко об элементах HTML может быть просто изменено средством таблицы стилей.

В различных браузерах на различных мониторах с различным разрешением страничка будет отображаться по-разному, потому не стоит форматировать с помощью прибавления пустых строк и пробелов. Хоть какое число пробелов заменяется одним.

Внедрение пустых параграфов

для вставки пустых строк является нехорошим стилем, заместо Коротко об элементах HTML этого используйте тег
.

Заглавия

Заглавия определяются при помощи тегов от до . определяет заголовок наибольшего размера, а определяет заголовок самого малеханького размера.

Это заголовок первого уровняЭто заголовок второго уровняЭто заголовок третьего уровняЭто заголовок 4-ого уровняЭто заголовок 5-ого уровняЭто заголовок шестого уровня

Заглавия автоматом отделяются дополнительными промежутками от других частей документа Коротко об элементах HTML.

Переносы строк

Для переноса снутри параграфа употребляется тег
, который делает принудительный перенос строчки.

Это
пара
граф с переносами строк

Пример выполнения данного HTML-кода

Это

Пара

граф с переносами строк

Тег
не имеет закрывающего тега. Потому для сопоставимости с будущими версиями эталона рекомендуется последующее написание тега

Горизонтальная линейка

Делить разные элементы можно с помощью горизонтальной линейки, для этого Коротко об элементах HTML используйте тег :

Этот параграф отобразится сверху горизонтальной полосы.

Этот параграф отобразится снизу горизонтальной полосы.

Пример выполнения данного HTML-кода

Это параграф отобразится сверху горизонтальной полосы.

Это параграф отобразится снизу горизонтальной полосы.

Тег не имеет закрывающего тега. Потому для сопоставимости с будущими версиями эталона рекомендуется последующее написание тега . Для этого тега определен Коротко об элементах HTML ряд атрибутов, но они являются устаревшими. И хотя их применение может быть, но консорциум W3C их использовать не советует. Заместо их следует использовать таблицы стилей.

Комменты в HTML

Тег комментария употребляется для вставки комментариев в начальный код HTML. Комменты будут проигнорированы браузером. Комменты можно использовать для пояснения кода, что Коротко об элементах HTML может посодействовать при редактировании начального кода в дальнейшем.

Вот вам наглядный пример:

Этот текст будет показан в окне браузера.

Пример выполнения данного HTML-кода

Этот текст будет показан в окне браузера.

Дополнительные примеры

Наилучшим методом исследования HTML является работа с примерами. Разглядим несколько примеров, которые иллюстрируют некие элементы форматирования Коротко об элементах HTML документов.


korrektirovka-rabochego-ponyatiya-otkritosti-obrazovaniya-v-kontekste-zadach-tyutorskogo-soprovozhdeniya.html
korrektirovka-yachejki-tablici.html
korrektiruyushij-koefficient-bazovoj-dohodnosti-k2.html