HTML и с чем его едят
Я хочу написать более-менее объёмный учебный материал по языку гипертекстовой разметки - HTML.HTML на протяжении всей своей истории претерпевал модернизации,но они не были какими-то кардинальными изменениями,что конечно можно считать плюсом.
HTML - это не язык программирования,а язык разметки.Он может использоваться,как отдельная и независимая компьютерная технология.Разметку статических сайтов вполне возможно реализовывать на HTML.Для того,чтобы создать динамические сайты необходимо использовать другие компьютерные технологии - в частности Javascript.
На данной момент в мои планы входит разработка некоего документа,описывающего HTML,как язык разметки статических сайтов,возможно впоследствии я расширю тему и освещу создание динамических сайтов.
HTML-разметку интерпретируют специальные программы - веб-браузеры.Именно благодаря веб-браузерам возможно просматривать статические и динамические сайты пользователям компьютеров.
HTML-документ или попросту веб-сайт представляет собой простой текстовый файл,содержащий HTML-разметку,которая обрабатывается и выводится определенным образом в графическое окно веб-браузера.Здесь также надо понимать,что веб-сайт может состоять и из группы взаимосвязанных страниц.
HTML-разметка - это специальным образом составленный текст.Основой этого текста являются угловые скобки,знак равенства и двойные кавычки.
HTML-теги - это элементы разметки,которые являются строительными блоками веб-страницы.Надо понимать,что HTML-теги имеют атрибуты и задаются,как имя и значение.
HTML-теги могут быть как одиночными,так и парными.
Парный HTML-тег состоит из открывающей и закрывающей части.Парность символизирует завершенность и к тому же показывает разметчику,где именно начинается и заканчивается элемент.
Понятно,что одиночный HTML-тег отличается от парного тега и попросту не содержит закрывающей части.
При построении статических веб-сайтов в них могут встраиваться различные изображения.Высокачественные изображения позволяют украсить веб-страницу и сделать её более привлекательной для конечного пользователя.
Вообще веб-вёрстка имеет прямое отношение к конечному пользователю,который взаимодействует с веб-сайтом и определяет удобство или неудобство той или иной разметки.Понятно,что динамические сайты могут быть более разнообразными,чем статические сайты.По мере написания этого документа я склоняюсь к тому,чтобы создать учебный материал именно по освещению веб-вёрстки.
CSS - каскадные таблицы стилей - является вспомогательной браузерной технологией,которая позволяет определять внешний вид HTML-элементов.
Теперь надо показать каркас веб-документа.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Здесь находится обычный текст
</body>
</html>
Тег <html> является корневым тегом.Теги <html>,<head> и <body> должны находится во всех правильных - валидных веб-страницах.
Существуют специальные валидаторы,которые проводят проверку на соответствие веб-страниц существующим стандартам.Они могут находить ошибки в HTML-коде и указывать на них,чтобы разработчик принял меры по их устранению.На самом деле HTML-валидатор является очень дотошным в отношении разметки.Здесь надо понимать,что его советы по оформлению HTML-документа можно игнорировать.Но знать о HTML-валидаторе нужно для полноты картины о разработке на HTML.
В HTML-валидатор с помощью специально подготовленной веб-формы можно загрузить файл,который нужно проверить,либо непосредственно ввести исходный текст веб-документа или вставить из буфера обмена операционной системы.
Итак,давайте начнём рассмотрение тега <img>.Он используется для отображения изображений на веб-странице.Атрибут src позволяет установить адрес изображения.
<img src="image.png">
Данный выше HTML-код показывает изображение image.png в веб-браузере.Веб-браузер поддерживает различные форматы изображений и умеет отображать их.С помощью атрибутов width и height можно настраивать ширину и высоту соответственно.
Тег <a> используется для создания гиперссылки.Любой веб-сайт во всемирной паутине имеет адрес,по которому к нему может обратиться веб-браузер.Так вот,атрибут href - нужен для указанию этого адреса в веб-документе.
<a href="http://www.google.ru">пример гиперссылки</a>
У каждого веб-сайта в интернете существует протокол и без протокола доступ к веб-странице невозможен.Самый распространённый протокол передачи данных - это HTTP.Он позволяет получать гипертекстовые документы и отображать их в графическом окне веб-браузера.
Протокол HTTP обеспечивает клиент-серверное взаимодействие.Посредством HTTP веб-браузер соединяется с веб-ресурсом и посылает запрос.Полученный веб-документ представляет собой обычный HTML-файл и доступен к редактированию и изменению пользователем.
Существует мнение,что если рассказываешь что-нибудь узкоспециализированное другим людям,то лучше начинаешь понимать сам.Все веб-документы имеют URL - Uniform Resource Locator - и он является главным компонентом интернета.URL - это просто другое название гиперссылки и веб-адреса.URL имеет определенную схему,по которой он строится.Выше я уже вскользь говорил о гиперссылках.
HTML содержит множество тегов и каждый из них определенным образом используется в разметке веб-страниц.Теги в веб-документе можно узнать по угловым скобкам,которыми они окружены.Открывающая часть тега позволяет задавать атрибуты,закрывающая часть тега - определяет конец элемента.Это описание относится к парным тегам.Одиночные теги не имеют закрывающей части,таким тегом,например, является разрыв строки - <br>.
Конечно в теоретической работе желательно,чтобы она шла последовательно и являлась логической картиной,смотря на которую можно лучше усвоить описываемый предмет.Но естественно не всё в этом мире - идеально и поэтому любой учебный текст несовершенен кто бы его не писал.
HTML-теги можно вкладывать друг в друга.Например,ссылка-изображение создаётся с помощью вложенных тегов.Понятно,что файл изображения должен находится в директории с веб-документом.Но надо понимать,что возможно в атрибуте src указать определенную директорию,которая не является текущей.
<a href="http://www.google.ru">
<img src="test.jpg">
</a>
В атрибуте alt обычно располагается текст,который будет отображаться,если по каким-либо причинам изображения не будет по указанному пути.
<img src="test.jpg" alt="изображение отсутствует">
Всегда есть возможность подогнать изображение под определённую ширину и высоту,используя атрибуты width и height.Надо понимать,что само изображение физически на жестком диске при этом не изменяется.
<img src="test.jpg" width="100" height="100">
Веб-форма позволяет внести какую-либо информацию и отправить её на обработку веб-серверу.Отправка данных осуществляется с помощью специальной кнопки,которая имеет тип - submit.
Также веб-форму можно использовать для проведения регистрации на каком-либо сайте.Она поддерживает графические элементы такие как текстовое поле,зависимые и независимые переключатели,раскрывающийся список.Указанные графические элементы наиболее часто используемые при построении веб-форм.
На самом деле правильнее говорить,что не веб-формы поддерживают графические элементы,а именно технология HTML.
Изучение HTML необходимо для того,чтобы создавать статические и динамические сайты.Знание тегов и их атрибутов позволяет использовать технологию HTML на всю катушку.Здесь возникает вопрос:возможно ли знание всех тегов и атрибутов?В идеальном мире веб-разработчик обладает феноменальной памятью и поэтому способен запомнить что угодно и в каком-угодно количестве.
Понятно,что HTML является базовой браузерной технологией,без которой невозможна никакая фронтенд-разработка.В дополнение к технологии HTML существует технология CSS,которая позволяет детально управлять внешним видом HTML-элементов.Для разработки динамических сайтов используется язык программирования Javascript.Ясное дело,что статические страницы не требуют языка программирования для своего функционирования,но обладают чрезвычайно ограниченными возможностями.Вероятно,что статических сайтов в интернете гораздо меньше,чем динамических сайтов.
Свидетельство о публикации №124031304431