Приветствуем вас дорогие подписчики Progger PRO , сегодня мы начнем обучатся созданию сайтов . В данный курс входит полное инструкция по началу создания HTML сайта для любых целей.
Для начала давайте разберемся что такое сайт и все что с ним связанно
Сайт, или веб-сайт (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети»), — одна или несколько логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователями как единое целое. Веб-сайты называются так, потому что доступ к ним происходит по протоколу HTTP[1].
Веб-сайт, как система электронных документов (файлов данных и кода) может принадлежать частному лицу или организации и быть доступным в компьютерной сети под общим доменным именем и IP-адресом или локально на одном компьютере. В статье журнала «Хозяйство и право» также было высказано мнение, что каждый сайт имеет своё название, которое при этом не следует путать с доменным именем[2]. С точки зрения авторского права сайт является составным произведением, соответственно название сайта подлежит охране наряду с названиями всех прочих произведений.
Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое — базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP.
Чтоб создать свою первую веб страницу вам нужно скачать программу для редактирования кода - самый подходящий бесплатный редактирования и для создания кода является Notepad++ , он полностью бесплатный и поддерживает большинство языков программирования как PHP ,HTML,CSS,Javascript и тд.
https://notepad-plus-plus.org/downloads/v7.8.7/ - ссылка на скачивание
Ознакомление с программой для создания сайтов -Notepad++
После установки и запуска вам покажет окно с кучей строк , цифр , функций .
Разберемся в основных функциях которые вам понадобятся для старта работы и обучения
- Вкладка "Файл" - через данную вкладку редактируется запущенные файлы в программе . Основные функции которые вам пригодиться в начале создания "Создать", "Открыть","Сохранить"
- Вкладка "Правка" - данная вкладка отвечает за действия с кодом , копирование , удаление и тд. Данной вкладкой вы будете пользоваться крайне редко так как все описанные функции можно выполнить при нажатии правой клавиши мыши
- Вкладка "Кодировки" - данная вкладка отвечает за использованные кодировки вашего кода - это способ передачи знаков алфавита, цифр, спецсимволов в виде байтов. Сейчас используются две самые популярные кодировки: UTF-8; Windows 1251. Мы и рекомендуем использовать данные кодировки так как они являются глобальными и подходят для многих языков
HTML фундамент вашего сайта
HTML (HyperText Markup Language) - язык разметки гипертекста - предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками
HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-броузер на компьютере пользователя Интернета.
HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.
Даже, если вы не собираетесь в дальнейшем редактировать "вручную" текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и "читаемым" при просмотре броузерами разных фирм.
Основными компонентами HTML являются:
- Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу типа создания абзаца или вставки изображения.
- Атрибут (или аргумент). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.
- Значение. Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.
Теги представляют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше).
Закрытие тега отличается от открытия только наличием символа '/'.
ЗАМЕТКА : Всегда закрывайте теги! Так как это произведет к ошибке считки кода вашего сайта и он не будет отображаться корректно . Существуют исключения где можно не закрывать тег ( переносы, абзацы ) но об этом в следующих уроках
HTML- программа должна начинаться тегом <HTML> и заканчиваться тегом </HTML>
<HTML>
...... (здесь будут другие теги программы)
</HTML>
HTML- программы состоят из двух основных частей: заголовка и тела. Заголовок ограничивается парой тегов<HEAD> и </HEAD>, а тело - парой тегов<BODY> и </BODY>.
В результате HTML- программа выглядит следующим образом:
<HTML>
<HEAD>
... (здесь будет заголовок)
</HEAD>
<BODY>
.... (здесь будут другие теги тела программы)
</BODY>
</HTML>
Кроме того, каждая HTML- программа имеет заголовок, который помещается в заголовок окна броузера. Заголовок окна броузера создается при помощи двух тегов <TITLE> и </TITLE> и содержится между тегами <HEAD> и</HEAD>.
Тогда программа принимает следующий вид:
<HTML>
<HEAD>
<TITLE> Основы HTML </TITLE> ;
</HEAD>
<BODY>
.... (здесь будут другие теги тела программы)
</BODY>
</HTML>
Создадим свой первый сайт
Начнем создание ! Пройдемся пошагово , от создания файла до написания кода и локального запуска чтоб посмотреть свой результат
- Шаг первый - откройте программу Notepad++, после открытия вы сразу видите в открытый файл "new 1" . Зададим ему сразу разрешение HTML . Для этого перейдите во вкладку "Файлы" дальше "Сохранить как " и вместо "new 1" ведите "index.html" . И сохраните в отдельную папку созданную вами для вашего сайта . Получилось? Отлично! Вы подготовили ваш основной файл сайта , но пока что он пустой . Пройдемте к следующему шагу
ЗАМЕТКА : название вашей стартовой страницы сайта обязательно должно иметь название "index" . Это нужно для того чтоб ваш сайт открывался автоматически при переходе на него , так как браузеры , серверы сначала ищут и индексируют данный файл !
- Шаг второй - пода уже добавить свой первый код ! Для начала введем данную строку
<!DOCTYPE html> - эта строка определяет тип вашего файла
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<p align="center" style="color:#ff0099; font-size:45px"> Я сделал Первый Сайт </p>
Что значит строка выше : Текст выровнен по центру, розового цвета, размером в 45 пикселей
</body>
</html>
После чего сохраните изменения в файле через вкладку "Файлы", или нажмите на иконку дискеты
Итак вы проделали все для запуска первого своего сайта , давайте его запустим! Зайдите в папку с сохранным файлом "index.html" , нажмите на него "Правой Клавишей Мыши" дальше "Открыть с помощью" и выберите в окне свой браузер . После этого откроется ваш браузер с вашим сайтом , и покажет данное окно
Открылось? Тогда поздравляем - у вас все получилось !
Заключение
На этом наш первый урок подходит к концу . Второй урок выйдет в скором времени - где мы разберем дизайн CSS для того чтоб оформить ваш сайта по последним мировым трендам . Подписывайтесь на наш канал чтоб не пропустить второй урок и если хотите начать создавать сайты и зарабатывать деньги через месяц после начала обучения
Если остались вопросы , пожелания или же вы хотите индивидуальные курсы от профессиональных программистов
пишите нам на почту
deadseti5050@gmail.com
