Для начала познакомимся с основными определениями.
Интернет
Интерне́т – всемирная система объединенных компьютерных сетей, построенная на использовании протокола TCP/IP и маршрутизации пакетов данных. Интернет образует глобальное информационное пространство, служит физической основой для Всемирной паутины и множества других систем передачи данных.
Структура интернета напоминает паутину, в узлах которой находятся компьютеры, связанные между собой линиями связи. Как и объекты в реальной жизни, каждый компьютер имеет уникальный адрес, называемый IP-адресом.
Существуют два типа IP-адресов:
● Постоянные, закрепленные за определенным компьютером.
● Динамические – присваиваются в тот момент, когда пользователь соединяется с интернетом.
Структура IP-адреса позволяет узнать, в какой стране и в каком городе находится компьютер пользователя. Таким образом, например, при настройке объявлений по контекстной рекламе можно задавать регионы показа объявления. Пример IP-адреса: 192.168.1.2 .
Чтобы не запоминать сложные IP-адреса, придумали так называемые доменные имена.
Доменное имя – уникальное имя, которое данный поставщик услуг избрал себе для идентификации, например mail.ru или google.com.
Браузеры
Браузер – программа, с помощью которой вы имеете возможность просматривать любые сайты. То есть браузер является проводником между всемирной сетью интернет и пользователем. Именно он позволяет получать доступ ко всему множеству доступной в интернете информации.
Существует большое количество браузеров. Большинство из них практически одинаково отображают информацию, за исключением Internet Explorer, который некоторые теги и свойства стилей отображает иначе – к примеру, ширину блоков.
Гипертекст
Гипертекст – термин, введенный Тедом Нельсоном в 1965 году для обозначения «текста ветвящегося или выполняющего действия по запросу». Обычно гипертекст представляется набором текстов, содержащих узлы перехода между ними, которые позволяют избирать читаемые сведения или последовательность чтения.
Теперь давайте изучим строение веб страницы
Что представляет собой веб-страница
Веб-страница сайта состоит из различных блоков:
● Шапка (header), в которой могут размещаться логотип компании, название сайта, телефоны организации и проч.
● Вертикальная и/или горизонтальная навигация по сайту (меню).
● Основное содержимое (content).
● Нижний колонтитул (footer), где размещается дополнительная информация: автор сайта, счетчики посещаемости.
Виды сайтов
По содержимому
Статические – содержимое подготавливается заранее и выдается пользователю в том виде, в котором хранится на сервере. Динамические – содержимое генерируется при помощи серверных языков программирования.
По схеме представления информации
Коммерческие – сайты компаний, интернет-магазины и т.д. Информационные – доносят до пользователя какую-либо информацию. Веб-сервисы (порталы) – поисковые системы, электронная почта, форумы, социальные сети.
По размеру
Фиксированной ширины – задается фиксированная ширина сайта . Тогда все блоки сайта будут выглядеть так, как было задумано, и не будут изменять размер в зависимости от разрешения монитора или размера экрана браузера.
«Резиновые» – ширина строго не задается, а изменяется в зависимости от размера экрана браузера или разрешения монитора.
Адаптивная верстка/тип макета – дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое или их замена блоками, отображаемыми только при определенном разрешении.
Протоколы передачи данных
Взаимодействие компьютеров, серверов, маршрутизаторов, коммутаторов определяется протоколами. Каждый протокол – четкий и определенный набор правил и соглашений, предписывающий, каким образом производится обмен и обработка информации.
Наиболее известные протоколы, используемые в сети интернет:
● HTTP (HyperText Transfer Protocol) – протокол передачи гипертекста. Используется при пересылке веб-страниц с одного компьютера на другой.
● HTTPS (HyperText Transfer Protocol Secure) – тоже протокол для передачи гипертекста, но использует дополнительное шифрование данных для более безопасной передачи информации.
● FTP (File Transfer Protocol) – протокол передачи файлов со специального файлового сервера на компьютер пользователя. FTP дает абоненту возможность обмениваться двоичными и текстовыми файлами с любым компьютером сети. Установив связь с удаленным компьютером, пользователь может скопировать файл с удаленного компьютера на свой и наоборот.
Схема HTTP-запроса страницы
Пользователь набирает в браузере адрес нужного ему сайта, после чего посылается HTTP-запрос серверу. Сервер определяет тип страницы по расширению запрашиваемого файла. Если расширение .html, это статическая страница, и сервер сразу формирует HTML-страницу и отправляет ее обратно пользователю.
Если расширение, к примеру, .php, то в этом случае страница динамическая. Сервер подключает интерпретатор php, который, в свою очередь, может обратиться в базу данных и получить оттуда необходимые данные.
Результат – HTML-код, который веб-сервер посылает обратно на компьютер пользователя. Сгенерированный HTML-код веб-сервер упаковывает в HTTP-пакет, который и передается по сети обратно клиенту. Полученный HTTP-ответ попадает в браузер клиента, который извлекает из него HTML-код и генерирует на его основе графическое представление запрошенной страницы.
Процесс разработки сайта
Теги в HTML
Язык HTML – язык тегов. Теги описывают структуру HTML-документа. Они оформляются угловыми скобками <имя тега>, между которыми прописывается имя тега. Теги HTML-документа предназначены для управления конструкциями разметки: заголовками, абзацами, списками, таблицами и картинками.
Теги бывают парные и одиночные.
Парные теги сначала открываются, потом закрываются. Все, что описывают парные теги, находится внутри них. Так, тег делает текст полужирным. Вот как это выглядит:
<b>Какое прекрасное утро</b>
Одиночные теги стоят сами по себе и, как правило, не меняют контент вокруг себя. Пример:
<br> -- тег переноса строки
<hr> -- тег горизонтальной линии
Атрибуты тегов определяют какие-либо дополнительные, уточняющие параметры того или иного тега. Вы можете указать внутри тега столько атрибутов, сколько вам необходимо. Атрибуты разделяются пробелами. Пример:
<a href="contacts.html">Контакты</a>
<img src="book.png" alt="Книга">
Структура HTML-документа
1. Тип документа.
2. Раздел с технической информацией о странице: заголовок, описание, ключевые слова для поисковых машин, кодировка. Введенная в нем информация в основном не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
3. Раздел , где располагаются все элементы, которые видит пользователь. Именно с этим разделом мы в основном и будем работать.
<!doctype html>
<html>
<head>
<title>Hello HTML</title>
<meta charset="UTF-8">
</head>
<body>
. . .
</body>
</html>
Лайфхак: чтобы написать ↖↖↖↖ это быстрее нужно набрать ! и нажать Tab.
Основные теги оформления текста
Заголовки
Как и в газетах и журналах, в HTML-странице любая статья или новость должна начинаться с заголовка. Предусмотрено 6 уровней заголовков: первый из них будет отображен самым крупным шрифтом, а далее чем выше уровень, тем меньше будет размер шрифта.
Для отображения заголовков существует тег и указывается цифра от 1 до 6, которая соответствует уровню заголовка. Тег заголовка – парный, не забудьте его закрыть
Параграфы
После заголовка обычно следует какой-нибудь текст, который необходимо заключать в параграфы, или абзацы. При составлении документа выделяйте блоки текста в отдельные параграфы, как это сделано в книгах – в противном случае может получиться сплошной текст, который очень трудно будет читать посетителю сайта.
В HTML для параграфов используется парный тег, и внутри него помещается тот текст, который нужно отобразить. Пример:
<p>Здесь мы напишем первый параграф</p>
Теги выделения текста Иногда необходимо выделить слово, словосочетание, предложение или целый участок текста, чтобы привлечь внимание читателя или поискового робота. Чтобы это сделать, можно выделить фрагмент жирным, курсивом или подчеркнуть.
Аккуратнее с подчеркиванием текста: по стандартам принято, что подчеркнуты гиперссылки, и многие пользователи уже настолько к этому привыкли, что, видя подчеркнутый текст, хотят «кликнуть» по этому участку текста, ожидая перехода на другую страницу.
Теги <b> и <strong> внешне делают одно и то же: выделяют текст полужирным. Разница в том, что <strong> указывает на важность текста, а <b> просто делает текст полужирным. Так, текст в тегах <strong> устройство для чтения текста вслух будет выделять интонацией, а <b> – нет.
Аналогично с тегами <em> и <i>, делающими текст курсивным: <em> указывает на важность текста, а <i> нет.
<small> уменьшает размер шрифта на единицу по отношению к обычному тексту.
<sub> используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
<sup> используется для создания степеней и верхних индексов. Сдвигает текст выше уровня строки, уменьшая его размер.
<ins> выделяет текст в новой версии документа, подчеркивая его.
<del> перечеркивает текст. Используется для выделения текста, удаленного из документа.
<code> служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
<pre> позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
<q> используется для выделения коротких цитат. Браузерами заключается в кавычки
Вложенные теги
Очень часто при верстке веб-страниц необходимо вкладывать одни теги в другие. Эта вложенность может достигать несколько уровней. Поэтому следует запомнить одно простое правило: закрывать теги необходимо именно в той последовательности, в которой вы их открывали. Первый открытый тег закрывается последним.
<p>Использовать вложенность тегов
<b>легко
<i>и просто</i>
</b>
</p>
Горячие клавиши
Alt + tab – перемещение между открытыми окнами.
Ctrl + z – отменить действие.
Ctrl + y – вернуть действие.
Ctrl + x – вырезать.
Ctrl + c – копировать.
Ctrl + v – вставить.
Ctrl + s – сохранить.
Ctrl + a – выделить все.
Ctrl + tab – перемещение м/у открытыми вкладками.
F5 / Ctrl + R – обновить страницу.
F2 – переименовать.
Shift + Tab – вернуть одну табуляцию назад.
Shift + home – выделить с указанного места до начала строчки.
Shift + end – выделить с указанного места до конца строчки.
Shift + стрелка – при зажатом Shift выделять в указанную стрелками сторону.
Необходимые инструменты
Чтобы начать создавать свои веб-странички, необходим текстовый редактор. Можно воспользоваться встроенным в Windows блокнотом, но для начала удобнее использовать более функциональные текстовые редакторы Visual Studio Code, Sublime text, Notepad++ или Brackets.
Браузер. Выберите для себя наиболее удобный браузер. Я рекомендую пользоваться браузером Google Chrome.
Всем спасибо за прочтение! Скоро выйдет вторая часть, где мы приступим к созданию web страницы