Html оформление домашней страницы

Создание сайта на CSS и HTML: подготовка домашней страницы

Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

Сегодня мы создадим все папки и файлы, необходимые для сборки веб-сайта на HTML и CSS, а также подготовим домашнюю страницу – файл index.html – к HTML-контенту, который будем добавлять в следующих мануалах.

Требования

Если вы следовали всем мануалам из этой серии, для сборки вашего тестового сайта вы можете использовать каталог проекта css-practice, файл index.html, папки images и css и файл styles.css, которые вы создали ранее. Если вы выполнили не все мануалы и вам нужны инструкции по настройке базовой файловой системы, ознакомьтесь с нашим предыдущим мануалом из этой серии, Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Примечание: Если вы хотите выбрать имена для папок или файлов самостоятельно, избегайте пробелов, специальных символов (например. #,% и т.п.) и заглавных букв, поскольку в дальнейшем такие имена могут вызвать проблемы. Также имейте в виду, что вам нужно будет изменить пути к файлам в некоторых командах, которые мы используем в оставшихся мануалах этой серии.

Сейчас у вас должна быть папка проекта css-practice, содержащая следующие папки и файлы:

Сначала мы подготовим файл index.html для хранения контента, который мы будем добавлять в следующих мануалах.

Подготовка файла index.html

Чтобы подготовить файл index.html в качестве домашней страницы веб-сайта, нужно добавить в него несколько важных строк HTML. Эти строки будут служить инструкциями для браузера и не будут отображаться на странице сайта. Удалите все, что есть на данный момент в файле index.html (если у вас остался в нем контент из предыдущих мануалов), и добавьте в документ следующий фрагмент кода:

Не забудьте указать свой заголовок сайта вместо нашего условного. Затем сохраните файл index.html. Прежде чем продолжить, давайте кратко рассмотрим только что добавленные строки по порядку, чтобы понять, как они работают:

• Объявление сообщает браузеру, какой тип HTML используется в этом документе. Это значение важно объявить, поскольку существует несколько версий стандарта HTML, и браузер должен понимать, какие из них использовать в этом конкретном случае. В этом объявлении html определяет текущий веб-стандарт HTML, то есть HTML5.
• Открывающий и закрывающий теги сообщают браузеру, что весть находящийся между ними контент нужно интерпретировать как HTML. Сюда мы также добавили атрибут lang, который задает язык веб-страницы. В этом примере мы выбрали английский (с помощью тега en). Полный список языковых тегов можно найти в реестре языковых тегов IANA.
• Открывающий и закрывающий теги создают в HTML-документе раздел, который обычно содержит информацию о самой странице, а не контент. Браузеры не отображают информацию, которая хранится в разделе .
• Тег указывает, что в документе следует использовать набор символов UTF-8 (формат Unicode, который поддерживает большинство символов из разных письменных языков).
• Тег сообщает браузеру имя веб-страницы. Этот заголовок отображается не на самой веб-странице, а на вкладке браузера и в результатах поиска. Если хотите, вы можете заменить My First CSS Site названием по вашему выбору.
• сообщает браузеру, где найти таблицу стилей, содержащую правила. Если вы следовали мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code, ваша таблица стилей должна находиться в css/styles.css. Если вы создали собственную файловую систему, укажите правильный путь.
• Открывающий и закрывающий теги будут содержать основной контент веб-страницы. В следующих мануалах мы добавим сюда HTML-контент.

Заключение

У вас есть все папки и файлы, необходимые для создания веб-сайта с помощью HTML и CSS. Также ваш файл index.html теперь содержит все необходимое, чтобы выступать в качестве домашней страницы веб-сайта. В следующем мануале вы узнаете, как будет устроен наш тестовый сайт и какие шаги мы предпримем для его создания.

Источник

Урок 2. Создание главной страницы сайта

– Научиться добавлять текст на вебстраницу.
– Научиться форматировать текст.
– Научиться добавлять списки.
– Научиться добавлять видоеконтент на страницу.

В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 2.1):

2.1 — Предварительный просмотр веб-страницы

Создание главной страницы.

В первом уроке вами была создана страница с дизайном сайта, в начале второго урока вы создадите страницу index.html, которая будет являться главной страницей сайта.

В этом упражнении вы создадите главную веб-страницу.

– Запустите Visual Studio Code. Автоматически должен открыться ваш проект. Если этого не произошло, то воспользуйтесь первым уроком и откройте проект.
– Кликните на файл design.html правой кнопкой мыши и выберите пункт «Копировать».
– Кликните правой кнопкой мыши в пустой области под файлом design.html и выберите в открывшемся меню пункт «Вставить».
– Кликните на появившийся файл design copy.html правой кнопкой мыши и выберите в открывшемся меню пункт «Переименовать».
– Задайте имя файла index.html и нажмите кнопку «Enter».

В результате выполнения всех пунктов упражнения у вас должен появиться в списке файлов, файл index.html, а так же он должен быть открыт в рабочей области Visual Studio Code (рисунок 2.2).

2.2 — Результат создания файла index.html

Оформление главной страницы.

В этом упражнении вы укажите, что index.html это главная страница сайта.

– Перейдите в рабочую область Visual Studio Code.
– Переместите курсор мыши к тегу Title.
– Добавьте через тире к тексту ЮК Советник текст «Главная страница» (рисунок 2.3).

2.3 — Главная страница в теге Title

Добавления абзаца на страницу.

HTML текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.

Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства.
В этом упражнении вы вставите текст в область main-сontent веб-страницы.

– Выберите файл index.html.
– Кликните на строку с текстом «Контент«(рисунок 2.4).

– С помощью файлового менеджера откройте папку work_files, а ней папку txt.
– С помощью текстового редактора откройте файл index.txt (рисунок 2.5).

– Выделите мышью первый абзац, кликните правой кнопки мыши и выберите в открывшемся меню пункт «Копировать».
– Перейдите в Visual Studio Code и удалив слово «Контент» кликните правой кнопкой мышью между тегами , . В появившемся меню выберите пункт «Вставить».
– В конце предложений вставьте тег переноса на новую строку
(рисунок 2.6).

2.6 — Вставка текста и тега переноса строки

В результате выполнения упражнения вы получили страницу с абзацем (рисунок 2.7).

Добавления списка на страницу.

HTML списки используются для группировки связанных между собой фрагментов информации.
В этом упражнении вы вставите список в веб-страницу.

– Выберите файл index.html.
– Кликните на конец абзаца (на тэг

) и нажмите «Enter».
– Для добавления ненумерованного списка добавьте теги и .
– Для добавления одного пункта списка добавьте между предедыщими тегами, теги и .
– Каждый отдельный пункт списка находится между тегами и .
– Заполните список из файла index.txt согласно рисунку 2.8.

В результате выполнения упражнений вы получили страницу с абзацем и списком (рисунок 2.9).

Повторив упражнения на добавление абзаца и списка, добавьте второй, третий абзац и второй список из файла index.txt (рисунок 2.10).

2.10 — Главная страница. Три абзаца и два списка

Добавления видеоконтента на страницу.

HTML5 видео – новый стандарт для размещения мультимедийных файлов в сети с оригинальным программным интерфейсом без привлечения подключаемых модулей.
В этом упражнении вы вставите видео в веб-страницу.

– Выберите файл index.html.
– Кликните на строку ниже
– Для выравнивания видеоконтента по середине введите текст:
– Для добавления видео добавьте теги и
– Введите между этими тегами фразу Ваш браузер не поддерживает HTML5.
– Для добавления видео перейдите к тегу видео и введите атрибут src, указав путь до файла video/present.mp4 (рисунок 2.11).

 html> head> title>Моя веб-страницаtitle> head> 

h1>Добро пожаловать на мою страницу!h1> h2>Меня зовут Макс.h2> h3>Надеюсь, вам не будет скучно.h3> 

b> Полужирный текст b> i> Наклонный текст i> u> Подчеркнутый текст u> sub> Подстрочный текст sub> sup> Надстрочный текст sup>