Создание Web-сайта на языке HTML
Цель: Создать тематический web-сайт с помощью языка Html.
Задачи:Создать сайт, разобраться в Css таблицах, выучить язык Html и научиться писать вручную информационный код.
Объект исследования: Тематический web-сайт.
Предмет исследования: Процесс разработки и создания сайта.
Гипотеза: Информативный web-сайт будет очень полезен и необходим. https://www.instagram.com/1rosemaryn?igsh==
Методы исследования: Поиск и изучение литературы, связанной с созданием сайта в редакторе кода, самой историей Dota и то, как разрабатывать сам сайт.
Скачать:
| Вложение | Размер |
|---|---|
 kolya_proekt.docx | 222.24 КБ |
Предварительный просмотр:
Муниципальное бюджетное общеобразовательное учреждение
Кесовогорская средняя общеобразовательная школа
имени дважды Героя Советского Союза А.В. Алелюхина
Индивидуальный итоговый проект
"Создание Web-сайта на языке HTML"
Информатика.
Кесова Гора
2025
Оглавление
ВВЕДЕНИЕ.......................................................................................................3
1.ОСНОВЫ HTML И CSS.............................................................................5
1.1.Web-страница и web-сайт........................................................................5
1.2.HTML..........................................................................................................8
1.3.CSS..............................................................................................................10
1.4. Выводы.....................................................................................................11
2. ПРАКТИЧЕСКАЯ ЧАСТЬ......................................................................12
2.1.Выводы......................................................................................................16
ЗАКЛЮЧЕНИЕ.............................................................................................17
СПИСОК ЛИТЕРАТУРЫ...........................................................................18
ВВЕДЕНИЕ
В будущем я хотел бы связать свою сферу деятельности с информатикой, поэтому уже сейчас интересуюсь программированием и разработкой. Я выбрал создание Web-сайта в качестве темы своего исследования.
Актуальность проекта: В современном мире роль информатики, средств обработки, передачи, накопления информации неизмеримо возросла. Средства информатики и вычислительной техники сейчас во многом определяют научно-технический потенциал страны, уровень развития ее народного хозяйства, образ жизни и деятельности человека. В современном мире люди получили огромное количество возможностей, о которых еще несколько десятков лет назад можно было только мечтать. Теперь каждый человек может в любое время и, находясь в любом месте, получить, свежую порцию новостей со всех уголков планеты. Так же немало важным стало программирование, которое помогает структурно мыслить, развить логику и, если вы уже вынуждены общаться с разработчиками, то облегчить с ними коммуникацию. Самое главное, программирование дает возможность самостоятельно реализовывать идеи, создавать продукт с нуля.
Цель: Создать тематический web-сайт с помощью языка Html.
Задачи:Создать сайт, разобраться в Css таблицах, выучить язык Html и научиться писать вручную информационный код.
Объект исследования: Тематический web-сайт.
Предмет исследования: Процесс разработки и создания сайта.
Гипотеза: Информативный web-сайт будет очень полезен и необходим. https://www.instagram.com/1rosemaryn?igsh==
Методы исследования: Поиск и изучение литературы, связанной с созданием сайта в редакторе кода, самой историей Dota и то, как разрабатывать сам сайт. После изучения основных программ для разработки сайта, нахождения удобного редактора кода и обобщив информацию в целом о создании сайта, начинаем приступать к разработке и созданию самого сайта.
1.ОСНОВЫ HTML И CSS
1.1.Web-страница и web-сайт
Web-страница – это созданный документ в формате html, который может включать в себя видео, фото, текст, графику, гиперссылки. Основное содержимое веб-страницы называется контентом. А главной целью создания этих страниц является предоставление информации посредством всемирной паутины. Объединение веб-страниц между собой одной тематикой, веб-дизайном и ссылками называют web-сайтом. Веб-сайты, как правило, объединены под одним адресом (домен) и принадлежат они частному лицу или организации. Для прямого доступа к страницам и сайтам был разработан специальный протокол для передачи данных с веб-серверов HTTP, который, по сути, является переводчиком содержимого веб-страницы.
Структура Web-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок — элемент, который заключает в себе другие элементы. Предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем элементов: , , Потомок — элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент является потомком одновременно для Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. является родительским только для и . Элемент является родительским только для . Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. Элементы и Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. Элементы и —одного уровня, так же как и элементы являются между собой сестринскими. Элемент Является корневым элементом документа. Все остальные элементы содержатся внутри .... Все, что находится за пределами элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается. Элемент Раздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу. Элемент Элементы, находящиеся внутри элемента , образуют дерево документа, так называемую объектную модель документа, DOM (documentobjectmodel). При этом элемент является корневым элементом. 1.3.CSS Так же немало важным для меня было изучение таблиц стилей CSS, которое мне позволило придать стиль и краски моему сайту. CSS (CascadingStyleSheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов. CSS поддерживает таблицы стилей для конкретных носителей, могут адаптировать представление своих документов к визуальным браузерам, слуховым устройствам, принтерам, брайлевским устройствам, карманным устройствам и т.д. Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния. Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например,: color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения. 1.4.Выводы После изучения мною литературы, я разобрался в основных свойствах языков HTML и CSS и собираюсь, применить их на практике в создании кода своего сайта. Литературные источники помогли узнать много полезного и увлекательного в сфере IT-технологий. 2. ПРАКТИЧЕСКАЯ ЧАСТЬ Свою работу я начал с нуля, у меня не было не заготовок не планов, была только цель – разобраться и узнать для себя новое. Для начала я скажу так, что я решил сам писать код, чтобы углубиться в Html и Css более подробно. Передо мною стояло два пути, то есть две возможности для создания сайта: с помощью конструктора сайтов и написание кода вручную. В свою очередь, что бы разобраться как следует я выбрал написание кода вручную. Для этого я стал просматривать просторы интернета и смотреть информацию, связанную с тем с чего начать. После того, как я понял основы, я начал писать сам код. Каждый сайт строиться на определенной конструкции, которая выглядит следующим образом: 1 2 3 4 5 6 7 8 9 10 Doctype Первая часть — Document Type Declaration (объявление типа документа) или doctype. Это просто способ сказать браузеру, или любому другому парсеру, какой тип документа рассматривается. Для HTML файлов необходимо указывать версию HTML. Doctype всегда объявляется первым в самом верху HTML документа. Doctype можно записывать в верхнем регистре, нижнем или вообще вперемешку, не имеет значения. Так как браузеры обязаны поддерживать все существующие типы контента в Интернете, то нельзя полностью полагаться только лишь на doctype. Самыми важными тегами являются html, head, body. Тег html Следующий по списку в любом HTML документе – элемент html. В HTML5 он несильно изменился и не имеет, каких либо новых особенностей. В этот тег я поместил все остальные элементы. Тег head Следующая часть страницы – элемент head. Первая строка внутри тега задает кодировку символом документа. Данный метатег был упрощен и на данный момент считается одним из основных. Тег body Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую я вводил в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д. Тег title Обязательным элементом раздела является ,
,
,
,
и