1. ОСНОВНЫЕ ПОНЯТИЯ WEB-ТЕХНОЛОГИЙ
WWW или «Всемирная паутина» - это сеть документов, связанных между собой гиперссылками.
Гипертекст – это документ, который наряду с обычной текстовой и графической информацией содержит ссылки на другие документы, причем эти ссылки встроены в текстовые фрагменты или в графические объекты данного документа.
Гиперссылка – это некоторое ключевое слово или объект в документе, с которым связан указатель для перехода на другую страницу в паутине; изображение гиперссылки выделяется цветом и подчеркиванием.
Web-сайт – это совокупность взаимосвязанных страниц, принадлежащих какому-то человеку или организации;
- организуется на Web-сервере провайдера сетевых услуг;
- имеет главную страницу, являющуюся титульным листом сайта (представляет владельца сайта и содержит гиперссылки на разные его разделы).
Web-страницы – это документы «Всемирной паутины», которые имеют собственные адреса и содержат текстовую и графическую информацию, а также ссылки на другие документы Интернета;
- страницы форматируются с помощью специального гипертекстового языка описания документов HTML (Hypertext Markup Language), имеют расширение .HTM или .HTML.
HTML – это язык разметки данных.
Базовым структурным элементом Web-документа является тег, или дескриптор, или контейнер.
Дескрипторы (теги) в HTML – это специальные элементы разметки, которые определяют, как данный HTML-документ должен интерпретироваться программой просмотра информации – браузером.
Или
Тэги – инструкции браузеру, указывающие способ отображения текста.
Для создания Web-страниц служат простейшие текстовые редакторы.
Технология HTML состоит в том, что в обычный текстовый документ вставляют управляющие символы (тэги) и в результате получают Web-страницу.
W3C (World Wide Web Consortium/ Консорциум Всемирной паутины) – это организация, которая занимается внедрением новых технологий в WEB и их стандартизацией. Основная цель создания WEB стандартов — возможность взаимодействия различных программных продуктов. Соответственно это разработка программных продуктов в соответствии со стандартами и в итоге качественный IT продукт.
Стандарт это соответствие текущим правилам разработки на определенном языке. Например, вы разрабатываете ресурс на HTML, который имеет стандарт, включающий в себя определенные теги и исключающий старые менее эффективные теги прошлых его стандартов/версий. Если ваш ресурс использует теги в соответствии с текущими стандартами, то он считается ресурсом с валидным кодом, но если вы использовали старые теги, которые уже не входят в состав нового стандарта, то ваш продукт имеет не валидный код. Но это не значит, что теги не будут работать. Стандарты проверяются специальными программами/сервисами, которые называются валидаторы.
2. СТРУКТУРА WEB-СТРАНИЦЫ
Написание кода в HTML достаточно свободное. Но из-за этой свободы возникает большое количество противоречий для браузеров. Ведь им нужно как-то отображать "вольный" код, и желательно, чтобы каждый браузер отобразил этот код одинаково. И тут им на помощь приходит DOCTYPE.
DOCTYPE - это объявление типа документа, другими словами, DOCTYPE означает, какую версию HTML (либо XHTML) Вы используете. HTML развивается уже давно, и много тегов было раньше, потом они устаревали, появлялись новые. И очень важно дать понять браузеру, какую версию HTML Вы используете или, другими словами, какой набор тегов у Вас имеется, и, главное, как его надо отображать.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Данный DOCTYPE означает, что документ соответствует стандарту HTML 4.01.
Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
Для HTML5 DOCTYPE записывается проще:
<!DOCTYPE HTML>
Любая HTML-страница имеет такую структуру:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Заголовок документа </TITLE>
<META http-equiv="Content-type" content="text/html; charset=windows-1251">
</HEAD>
<BODY>
Тело документа
</BODY>
</HTML>
Давайте рассмотрим, что записано.
<html>, <head>, <body> - это открывающие теги.
</html>, </head>, </body> - закрывающие теги.
Теги бывают парные и одиночные. Парные теги - это теги, которые нуждаются в закрытии.
Одиночные теги - это теги, которые не требуют наличие закрывающего тега.
Назначения данных тегов:
Тег <html> означает начало HTML-документа.
Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Этот тег необязательно заполнять каким-либо текстом.
Тег </head> означает конец заголовка HTML-документа.
Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете - всё расположено в теге <body>.
Тег </body> означает конец содержимого документа.
Тег </html> означает конец HTML-страницы.
Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера.
Тег </title> сообщает, что здесь заголовок заканчивается.
Что касается тега <meta>, то здесь сначала необходимо поговорить об атрибутах этого тега.
У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Теги с атрибутами записываются в виде:
<тег атрибут=”значение” атрибут=”значение” …>текст</тег>
Здесь атрибут=”значение” – задание конкретных значений параметрам (атрибутам) тега. Не является обязательным.
Текст – текст, который выводится на экран в виде, обусловленном тегом и его атрибутами.
Значения атрибутов принято брать в кавычки, но большинство браузеров понимают запись и без них. Исключения составляют значения, у которых присутствует пробел, - тогда такой атрибут обязательно берут в кавычки.
Тег <meta> (в данном случае) служит для определения языка, на котором написана страница. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251).
3.2. Созданную Web-страницу необходимо сохранить в виде файла, имеющего расширение .htm или .html. Принято сохранять титульный лист сайта, т.е. тот, который первый загружается в браузер, под именем index.html.
3.3. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
3.4. Необходимо различать имя файла index.html (т.е. имя под которым Web-страница хранится в файловой системе) и собственно имя Web-страницы, которое высвечивается в верхней строке окна браузера (в заголовке) и в первую очередь анализируется поисковыми системами.
3. КОДИРОВКА
Понятно, что кириллица - это "windows-1251", а Unicode - это "UTF-8".
Кодировка - это таблица, в которой описывается соответствие определённого символа и числа. То есть любой символ, который мы видим или вводим, для компьютера в реальности - всего лишь набор битов (набор нулей и единиц). Именно эти биты и перегоняются от устройства к устройству. А чтобы показать результат этих перегонок человеку, компьютер преобразует с помощью таблицы (той самой кодировки) код символа в соответствующий внешний вид.
Кодировка UTF-8 - самая популярная во всём мире. Она объединяет все кодировки в одну и является самой универсальной кодировкой.
Кодировок большое количество, и задача Web-мастера состоит в правильном выборе кодировки и указания её напрямую.
Если Вы точно знаете, что на разрабатываемом вами сайте будет не только русский и латинский алфавит, то используйте UTF-8.
4. СОДЕРЖИМОЕ ДОКУМЕНТА
Если речь идет о содержимом страницы - значит, код пишется внутри тега <body>.
4.1. АТРИБУТЫ ТЕГА <BODY>:
BACKGROUND – фоновое изображение страницы
Пример, <body background=”image/fon.jpeg”> (фоном документа станет картинка fon.jpeg из папки image).
BGCOLOR - цвет фона HTML-документа. Можно символьные или шестнадцатеричные значения. Шестнадцатеричные значения задаются в формате #RRGGBB – соответственно красный, зеленый и синий цвет модели RGB.
Пример:
<body bgcolor=”LightYellow”>
или
<body bgcolor =” #FFFFE0”> (документу задан светло-желтый цвет)
TEXT - цвет шрифта документа
Пример:
<body text=”Green”> (в документе весь текст будет напечатан зеленым цветом)
LINK, VLINK, ALINK задают цвет гиперссылок в документе, соответственно для ссылок, которые встречаются в тексте, уже посещенных и активных в данный момент (в момент щелчка мышкой). По умолчанию эти цвета равны LINK=blue, VLINK=purple, ALINK=red.
Пример:
<body link = "green" vlink = "red" alink = "blue">
4.2. ЗАГОЛОВКИ.
Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги <h1>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за <h1> должен следовать <h2> и т.д. Также не допускается вложение других тегов в теги <h1>...<h6>.
Тег <h1>. Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h1>должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.
Примечание.
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Тег <h2. Им обозначаются подзаголовки тега <h1>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.
Тег <h3>. Показывает подзаголовки тега <h2>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.
Теги <h4>, <h5>, <h6>. Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Размер шрифта
Изменить размер, цвет, гарнитуру текста можно с помощью тега <FONT>…</FONT>. Тег имеет три атрибута: SIZE (размер), COLOR (цвет), FACE (гарнитура).
Пример
<font size = "5" color=”red” face=”Arial”>Текст </font>
Размер шрифта может принимать значения от 1 до 7 (1 – мелкий, … 7 - крупный). По умолчанию используется размер шрифта 3.
А так же кто хочет еще узнать что-то нового смотрите ниже на ссылки.
Статьи:
Какой антивирусник ставить в 2021 году?
Как разогнать оперативную память и чтобы твой ПК не сгорел!
Почему лучше поставить Windows 7 на свою операционку
Основные характеристики, принцип работы, интерфейсы жестких дисков
Видео:
Как загружается виндовс 7 на жестком диске и на ssd.
История Windows. С чего всё начиналось.