Евгения Константиновна/ 28 февраля, 2020/ Основы HTML/CSS, Сайтостроение/ 0 комментариев

Основы сайтостроения

Введение или "Кто что делает?"

Интернет — сеть глобального пользования, и поэтому вся информация в сети должна быть представлена на универсальном языке, который понимали бы все пользователи. Языком публикации, используемым в World Wide Web, является HTML (Hiper Text Markup Language – язык разметки гипертекста).

   ❄  Консорциум Всемирной паутины (англ. World Wide Web Consortium, W3C) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Основателем и главой консорциума является сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий. По состоянию на 29 мая 2019 года Консорциум насчитывает 444 члена.
Источник ВИКИПЕДИЯ >>

Кто что делает?

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

Что делает сервер?

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

Что делает браузер?

Вы уже знаете, как работает браузер: вы бродите по сети Интернет, щелкая на ссылках для перехода между страницами. Такой щелчок служит поводом для того, чтобы браузер сделал запрос на веб-страницу серверу, получил ответ на этот запрос и отобразил эту страницу в своем окне. О том, как именно отображать страницу браузеру говорит именно язык HTML и CSS.

Общие сведения об HTML и CSS

HTML (HyperText Markup Language) – это язык разметки гипертекста, использующийся для разметки веб-документов (указывает, что будет на веб-странице);
CSS (Cascading Style Sheets) — это каскадные списки стилей, которые содержат описание свойств и их значений для объектов на веб-странице (указывает, какими будут объекты на веб-странице;
Веб-серверы обслуживают и хранят веб-страницы, которые созданы с помощью HTML и CSS. Браузеры извлекают страницы и визуализируют их содержимое, основанное на HTML и CSS;
Используя HTML, мы помечаем содержимое тегами, чтобы придать ему структуру. Мы называем соответствующие теги и их содержимое элементом;
➦ Элемент состоит из трех частей: открывающего тега, содержимого и закрывающего тега.
<p> СОДЕРЖИМОЕ </p>
Но есть несколько элементов, например <img> или<hr>, которые являются исключением из этого правила, но об этом мы поговорим на следующем уроке 🙂

Как работает HTML5?

HTML5 — это пятая версия HTML. Хотя стандарт был завершён только в 2014 году(предыдущая, четвёртая, версия опубликована в 1999 году), уже с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта. HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.

Итак, HTML5 представляет собой семейство технологий из:

  • ➤ HTML-разметки, которая была расширена рядом новых элементов;
  • ➤ Каскадных таблиц стилей CSS3, в которых появилось много нового, что дает больше возможностей по стилизации веб-страниц;
  • ➤ JavaScript;
  • ➤ Api-интерфейсов JavaScript

Давайте заглянем за кулисы и посмотрим, как все эти технологии объединяются:

Правила создания HTML структуры сайта

Пока мы будем изучать HTML и СSS, нам придется выполнить большую «кучу» практических работ, поэтому будем соблюдать правила, и каждую хранить в отдельной папке 🙂

ПОЛЕЗНЫЕ СОВЕТЫ

ВНИМАНИЕ СОВЕТ №1: В имени для папок и файлов используются ТОЛЬКО латинские буквы, ВСЕ буквы маленькие, БЕЗ ПРОБЕЛОВ и знаков препинания.
Не забываем в текстовых файлах поменять соответствующее расширение.
   ➦ index.html — это главная страница любого сайта;
   ➦ Папка css — в ней файл style.css;
   ➦ Папка img — в ней файлы с картинками (если вы скачали файл из ИНТЕРНЕТА и у него какое-то сумасшедшее имя, ну типа такого ghfjkdnnnnsjdjfks5467373847.jpg, переименуйте его, например fon1.jpg, скромно, и вам понятно, что это картинка фона 🙂 )
   ➦ Папка js — в ней файлы скриптов, но об этом попозже…

ВНИМАНИЕ СОВЕТ №2:
Для того, чтобы постоянно следить за ходом своей работы и проверять результат, при разработке веб-страниц, мы советуем вам всегда держать открытыми оба окна: окно разработки – текстовый редактор и окно исполнителя – браузер.
   ➦ Для быстрого сохранения изменений в коде программы – используйте комбинацию клавиш – Ctrl+S
   ➦ Для перехода между окнами – используйте комбинацию клавиш – Alt+Tab
   ➦ Для обновления информации в окне браузера – используйте клавишу F52

В какой программе набирать код?

РЕДАКТОР КОДА

Для верстки кода можно использовать просто текстовый редактор БЛОКНОТ, мы будем использовать блокнот покруче 🙂 . На компьютерах в студии уже установлен этот редактор.
➦ Notepad++ - это бесплатный редактор исходного кода и замена блокнота, который поддерживает несколько языков. Запуск в среде MS Windows, его использование регулируется лицензией GPL.

⚛ ЗАДАНИЕ ⚛
uchilca

ЗАДАНИЕ

  ⚛ Давайте попробуем создать нашу первую страничку.
Создаем пока только один текстовый файл ➦ даём имя index.html ➦ открываем его в редакторе Notepad++ (или просто в БЛОКНОТЕ) ➦ открываем в Браузере ➦ набираем код <p>ПРИВЕТ МИР!</p> ➦ Сtrl+S ➦ Alt+Tab ➦ F5
У меня получилось как на картинки, а у вас? 🙂

УРОК 1

Источник: " Изучаем программирование на HTML5" Автор: Эрик Фримен, Элизабет Робсон

3+

Оставить комментарий