Создание сайта на HTML
Представляем вам видео курс по созданию веб сайта на HTML5 и CSS3. За курс мы построим макет сайта, сделаем разметку и пропишем все стили. По итогу мы получим полноценный шаблон веб сайта, реализованный на чистом HTML и CSS.
Видеоурок
Создание сайта происходит в несколько этапов:
- Необходимо определить макет сайта (его дизайн);
- Установить всё необходимое для начала работы над сайтом;
- Приступить к написанию разметки и стилей;
- Адаптировать и оптимизировать сайт;
- Опубликовать сайт в Интернете.
План курса
В ходе видео курса мы научимся писать разметку сайта, добавлять к ней CSS стили и оптимизировать сайт для публикации на хостинге.
Мы не будем добавлять серверный или клиентский функционал к сайту, так как это было сделано в другом курсе: « Создание динамического сайта ».
Новый курс
Данный курс является устаревшим и вместо него предлагаем просмотреть более новый курс по созданию верстки для сайта «itProger». Просмотреть курс по верстке веб сайта можно на нашем сайте:
Как создать сайт HTML
Сегодня мы разберемся как создать сайт в блокноте при помощи HTML. HTML-документ должен иметь следующую структуру:
Как создать сайт с нуля - "Нубекс" Мой первый сайт в блокноте HTML
Привет! Это мой первый сайт.
Скопируйте приведенный код в блокнот (Notepad) и сохраните на компьютере в формате .html. Чтобы теперь посмотреть на нашу веб-страницу, откройте сохраненный файл с помощью браузера (Правой кнопкой мыши -> Открыть с помощью).
Большинство тегов, которые используются в нашем коде уже были рассмотрены в предыдущих статьях:
- html — корневой тег документа, является контейнером веб-страницы;
- head — в этом теге указываются основные данные, касающиеся генерации веб-страницы (заголовок, стили, скрипты, мета-теги и так далее);
- body — основной тег страницы. Представляет собой «тело» документа, внутрь которого помещаются остальные теги;
- — указывает на тип документа (Doctype);
- meta — используется для указания метаданных страницы (в нашем случае тег указывает на кодировку страницы. Подробнее о мета-тегах читайте в статье Мета-теги);
- title — задает непосредственный заголовок страницы (Тег title);
- H1 — заголовок страницы/статьи (подзаголовки задаются тегами H2-H6);
- P — тег, с помощью которого выделяются абзацы в тексте страницы;
Как показано выше, HTML-страницы сайта имеют древовидную структуру. Одни теги могут быть вложены в другие, а те, в свою очередь, — в третьи. Это означает, что структура документа определена достаточно четко. Открывающиеся теги обязательно должны иметь закрывающую пару. Немного усложним нашу страницу:
ООО Василий Пупкин Информация о нашей компании
Кто мы?
Мы - комманда профессионалов.
Наши услуги
Создание сайтов
Мы создаем по-настоящему крутые сайты.
Продвижение сайтов
Ваш сайт в ТОП-3 поисковых систем через 2 дня.
Посадка картошки
20 соток в час.
Контакты
Карта проезда: . Телефон: 0000
Основная информация о создании сайта при помощи конструктора сайтов «Нубекс» описана в статье: Как правильно создать сайт.
Создаём свой первый сайт на HTML
Урок №9
Создаём свой сайт из трёх страниц
В этом уроке, мы создадим сайт состоящий из трёх страниц. Но перед этим, для вашего же удобства, вам нужно создать папку на Рабочем столе , папку можете назвать Мой сайт .
Закиньте в папку Мой сайт , все файлы которые у нас уже есть, а именно два HTML-файла:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
и две фотографии:
irbis.jpg
polyarnyi-volk.jpg
Сделаем третью страницу, она будет посвящена полярной сове.
Данные третьей страницы
Создайте в папке Мой сайт HTML-файл:
polyarnaya-sova.html
Название страницы , сделайте:
Страница о полярной сове
h1 < color: green; font-family: Arial; >p
Заголовок статьи :
Полярная сова
Статья состоящая из двух абзацев :
Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения - территория тундры: Евразия, Северная Америка, Гренландия. Полярная сова обитает обычно в открытой местности, в лесах встречается редко. Питается в основном, мелкими грызунами: леммингами, в год может съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие хищники, птицы, рыба и даже падаль.
В итоге, вы должны получить следующую страницу.
Соединяем ссылками страницы сайта
На данный момент у нас есть три HTML-файла, в которых находятся статьи описывающие различных северных животных:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
polyarnaya-sova.html — Статья о полярной сове .
Теперь нам нужно соединить их ссылками, чтобы получился сайт. Ссылки делать вы уже научились, поэтому я вам дам лишь HTML-код, который нужно разместить перед закрывающим тегом
