Автор публикации: А. Гладких, студент 1 курса
СОЗДАНИЕ ВЕБ-РЕСУРСА СРЕДСТВАМИ HTML Работу выполнил ученик НПК 1 курса Группы 423 ЭО Гладких Александр
Введение Цель проекта: разработка веб-приложения средствами HTML. Тип проекта: индивидуальный исследовательский. Задачи: 1. Изучить технологии (способы) создания веб-приложений. 2. Определить тематику сайта. 3. Создать шаблон веб-ресурса. 4. Разработать веб-ресурс средствами HTML.
Актуальность Актуальность создания сайта любого вида – донесение информации до широкого круга пользователей сети интернет.
Проблема Зачастую люди хотят поделится своими достижениями\интересной информацией, но им негде. Такую проблему может решить создание простого веб-ресурса, на свое усмотрение, где можно будет сделать все что захочешь.
Теоретичеcкая часть Началом для теоретической части послужило прочтение множества статей на эту тему; изучение конструкторов сайтов, которые могли предоставить такие услуги; других сайтов написанных на этом языке программирования.
Практическая часть Началом для практической части стало изучение основных тегов в языке программирования HTML. Таких как: <html></html> (Указывает программе просмотра страниц, что это HTML документ.) <head></head> (Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.) <body></body> (Определяет видимую часть документа) и другие.
Изучив это, я начал пробовать сделать первый сайт, который выглядел как код ¹ вот так: А как страница в браузере вот так: Пробный сайт. 1* – написание двух символов « / » означает комментарий, и не считается как команда кода. <!DOCTYPE html> // тут показан тип документа <html> // Указывает программе просмотра страниц, что это HTML документ <head> // Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин <title>Пример</title> // название страницы </head> // закрытие тега <head> <body> // Определяет видимую часть документа <p>Пробный сайт. <p> // вывод текста на страницу в браузере </body> //закрытие тега <body> </html> //закрытие тега <html>
После удачной проверки, я принялся за написание продукта данного проекта – самого сайта. Первое, что было добавлено, это: Как это сделать я узнал в интернете. <!DOCTYPE html> //устанавливаю тип документа <head> // Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин <meta http-equiv="X-UA-Compatible" content="IE=edge" /> //установил тип иконки по совместимости <link rel="shortcut icon" href="roflan.png" /> //установил источник иконки сайта <link rel="icon" href="roflan.png"> //установил источник иконки сайта <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> //установил иконку сайту <html lang= "ru"> //установил язык проекта - русский
Потом, я добавил несколько кнопок, которые пересылают на другие страницы – темная тема и главная страница. Еще я добавил тег <style> этим кнопкам: Который добавляет шрифт Fixedsys (командой font-family: «Fixedsys Excelsior 3.01»; ) a.knopa1 { // «a.knopa1» - класс для кнопки font-family: 'Fixedsys Excelsior 3.01'; color: rgb(0, 0, 0); user-select: all; text-decoration: none; outline: none; position: absolute; top: 1em; left: 1em; background-color: #e0e0e0; padding: 1em 2em; }
Еще, тегом <style> можно добавить цвет фона кнопки, и ее размер: top: 1em; //размер вверх left: 1em; //размер влево background-color: #e0e0e0; //фон кнопки padding: 1em 2em; //расположение от краев Потом, я добавил код: « <h2><a href="index.html" class="knopa3">главный экран</a></h2> » Который использует класс «knopa3» как ссылку, отправляющую пользователя на файл «index.html» Был добавлен код: <body style="color:rgb(0, 0, 0); background-color:#ffffff"> Который меняет задний фон сайта на цвет, описанный в «background-color» (#ffffff – чисто белый цвет)
Был добавлен класс в теге <style> - .letter который добавляет надпись по середине экрана – заголовок страницы. <style> .letter { text-align: center; color: rgb(0, 0, 0); font-size: 400%; font-family: "Fixedsys Excelsior 3.01"; position: static; top: middle; </style> Текст был шрифта «Fixedsys», располагался по центру страницы (text-align: center;), имел черный цвет (rgb(0, 0, 0)). Завершением послужило добавление нескольких картинок и gif-анимаций на сайт, в виде ленты. Был использован тег img – добавляющий медиа-файл, если вписать ресурс, откуда брать этот файл левее (<img src=“файл”>). После ресурса, был добавлен тег высоты (height) и тег ширины (width), которые были установлены на параметр 500 пикселей (500px) оба => 500 на 500 пикслей.
Еще, была сделана темная тема средствами дубляжа всего, что было до этого, но с заменой цветовой палитры. Светлая тема Темная тема
Вывод Создавая данный проект, я научился многому новому и развил свои знания в программировании сайтов на языке HTML. Узнал о новом способе передачи информации через сайт. Продукт проекта – сайт, презентация Microsoft PowerPoint.
СПАСИБО ЗА ВНИМАНИЕ!
