Статья исследовательской работы

ВЁРСТКА САЙТА С ПОМОЩЬЮ ЯЗЫКА ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML И КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ CSS

БПОУ ОО «Болховский педагогический колледж»

Работа выполнена обучающимся

4 курса группы «Г»

специальности 44.02.06. Профессиональное обучение

(по отраслям)

Войнова Даниила Сергеевича

Руководитель:

Семёнов Сергей Андреевич

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

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

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

В ходе ее выполнения были решены задачи:

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

Дано теоретическое обоснование основ гипертекстовой разметки HTML и каскадных таблиц CSS как создание гипертекстовых документов. HTML (Hypertext Markup Language) - это язык гипертекстовой разметки, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных публикуемых во всемирной паутине Интернет. CSS (англ. Cascading Style Sheets, каскадные таблицы стилей) – это простой язык дизайна, предназначенный для упрощения процесса презентации веб-страниц. CSS обрабатывает внешний вид веб-страницы. Используя стили, мы можем контролировать цвет текста, стиль шрифтов, расстояние между параграфами, размеры и расположение колонок, используемые фоновые изображения и цвета, макеты дизайна, варианты отображения на разных устройствах и размерах экрана. А также множество других эффектов. [1,2,3]

Рассмотрены особенности верстки веб-страницы средствами языка гипертекстовой разметки HTML и каскадных таблиц стилей CSS. Для размещения текста на странице самыми базовыми атрибутами будут являться заголовки, p - создание абзаца, i - курсив, b - массивный шрифт. Для добавления медиаконтента используются такие атрибуты: img, audio, video для выбора пути к файлу или ссылки из интернет сети используется атрибут src (source - источник). Чтобы вставить гиперссылки на веб-страницу используется тег a его важным атрибутом является href (hyper reference - гиперссылка), который нужен для переадресации на указанную в нем ссылку на интернет ресурс или файл на компьютере. Для добавлении анимации на веб-страницу используются такие свойства селектора как animation и transition. Свойство animation позволяет изменять свойства элемента в течение определённого периода, а transition определяет, как элемент меняется за определённый период. Более простой способ добавления анимации transition.[4] Для подключения каскадных таблиц стилей CSS необходимо внутри тега head добавить тег link, в котором нужно указать атрибуты rel (relationship – отношение) – говорит браузеру, какая роль играет ссылка внутри тега, в нашему случае нужно указать stylesheet т. е., будет роль таблиц стилей, второй важный атрибут это href – указывает путь к файлу со стилем или ссылка из сети Интернет. После этого можно заходить в заранее созданный файл с расширением .css и указывать параметры отображения чего либо. Для добавления иконочных шрифтов нужно найти источник с иконочными шрифтами, к примеру fontawesome.com, зарегистрироваться в нем и получить свой бесплатный набор, в котором будет тег с параметрами для добавления набора иконочных шрифтов на свою веб-страницу. Достаточно скопировать этот тег и добавить на страницу в теге body. После этого заходим на сайте во вкладку с иконками, фильтруем бесплатные и выбираем нам нужную иконку. Копируем готовый тег с параметрами и вставляем на страницу.

Рассмотрены этапы создания веб-страницы с использованием гипертекстовой разметки HTML и CSS. Создаем 5 документов с расширением .html. В каждый из них вводим базовый код, который в будущем можно спокойно наполнить нужным нам содержимым. В главный документ .html прописываем код для фреймов, каждый фрейм называем по своему. В меню указываем пункты через список ul, а для перехода на страницу нужен тег гиперссылки a в котором указываем путь к файлу выбираем через атрибут target нужный нам фрейм. Создаем 2 папки content и style, в первой папке будет содержимой страниц из меню, а во второй будут храниться стили в формате .css. В каждом документе с расширением .html добавляем в теге ead тег k и привязываем к данной странице стиль в папке style. В созданных документах в формате .css прописываем селекторы и параметры стилей. Сохраняем и проверяем страницу.

Таким образом, разработана веб-страница на тему «Сайт портфолио группы». Проект, включает следующие объекты: отдельные области, где отображается та или иная информация выбранная пользователем, область меню, где пользователь можете перемещаться по веб-странице и выбирать те пункты, которые его интересуют, кнопка домой, которая позволяет вернуться на главную страницу одним кликом, содержит ссылки снизу на другие интернет страницы. Таким образом, разработана веб-страница с использованием языка гипертекстовой разметки HTML и каскадных стилей CSS. Данная веб-страница направлена на применение теоретических знаний и практических умений использования языка гипертекстовой разметки HTML и каскадных стилей CSS, а также на знакомство с дисциплиной Компьютерные сети на 2 курсе и Веб-дизайн на 3 курсе. Данный проект позволит студентам овладеть знаниями по вопросам, связанные с данными дисциплинами.

Список использованных источников

1. Основы HTML./ [Электронный ресурс] /Режим доступа / -https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics

2. Что такое HTML и зачем он нужен./ [Электронный ресурс] /Режим доступа / - https://timeweb.com/ru/community/articles/chto-takoe-html

3. Что такое, история создания и преимущества CSS./ [Электронный ресурс] /Режим доступа / - https://proglang.su/css/introduction

4. Все про сайтостроение./ [Электронный ресурс] /Режим доступа / - https://doka.guide/