Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

Структура HTML-документа

Содержание:

Введение

What is HTML? (что такое html)

Если переводить дословно с анг. языка аббревиатура HTML означает HyperText Markup Language, это язык гипертекстовой разметки, по-простому говоря язык, используемый для создания документов «веб-страниц».

История его начинается с конца 1980-х годов, когда возникла необходимость обмениваться множеством различных документов при помощи сети Интернет. Необходимо было придумать способ демонстрации документов и информации о их местонахождении. В 1989 году сотрудником CERN Тим Бернерс Ли предложил проект, известный как Всемирная паутина (англ. World Wide Web). Целью данного проекта была демонстрация гипертекстовых документов, связанных между собой гиперссылками. Для создания данного проекта Тимом Бернерсом Ли и его коллегами были изобретены идентификаторы URI, URL, протокол HTTP и язык HTML. В основу языка HTML был положен другой ранее созданный язык – SGML, который предусматривал установку связи между документами с помощью гиперссылок. Этот же человек создал браузер, первую программу для просмотра HTML документов.

В данной работе я рассмотрю основные методы программирования на языке HTML и разработаю собственный веб сайт.

Объект исследования: язык программирования HTML

Цель работы: изучение языка программирования HTML.

Задачи:

  1. Рассмотреть основы программирования на языке HTML и рассмотреть процесс создания сайта;
  2. Создать веб-сайт

Структура данной работы: введение, глава 1, глава 2, заключение, список литературы и приложения №1, №2.

Глава 1. Основы программирования

1.1 Как же выглядит язык HTML и из чего он состоит?

В качестве примера как же выглядит язык HTML, лучшем представлением являются первые упражнения по изучению данного языка.

В данном примере необходимо создать документ формата HTML с выводом текста «Hello, it’s my first page!». Решаются подобные задания просто, для создания документа формата HTML нам понадобиться простой блокнот и минимальный набор «тегов» для создания данного документа. И так открыв блокнот и записав в него следующее:

<html>

<head>

<title> My first step </title>

</head>

<body>

Hello, it's my first page!

<br>

<br>

Welcome!

</body>

</html>

Своей записью в блокноте мы создаем html документ, после записи нам необходимо сохранить файл блокнота с расширением .html и открыть получившийся файл в браузере. В результате наших манипуляций мы получаем простую веб-страничку с текстом, который мы задали.

C:\Users\s.pinchuk\Desktop\Учеба\курсовая\подготовка\1.jpg

С первого взгляда обычному пользователю персонального компьютера может показаться, что данный пример простой набор английских слов и скобок немеющий никакого отношение к какому-либо языку программированию. На самом деле это и есть HTML язык. Который в свою очередь состоит из различных элементов и атрибутов.

Элементы

Элемент – это конструкция языка HTML, содержащая данные. HTML включает в себя различные типы элементов, которые позволяют задавать абзацы, гипертекстовые ссылки, списки, таблицы, изображения и т. д. Конструкция <title> My first page </title> представляет собой элемент. Обычно элемент можно разделить на три части. Первая часть – <title> – называется открывающим тегом (англ. tag). Далее идет содержание элемента, которое в данном случае состоит из слов «My first page!». И наконец, </title> является закрывающим тегом. Как видно, название элемента (title) присутствует и в открывающем, и в закрывающем теге. Регистр символов в названии элемента не имеет значения. Однако в соответствии с соглашениями, принятыми большинством разработчиков, в примерах данной книги названия элементов записаны в верхнем регистре. Открывающий и закрывающий теги нужны для указания начала и конца элемента. Теги всегда начинаются символом < и заканчиваются символом >. В закрывающем теге перед его именем помещается символ слеш /. Для некоторых типов элементов допускается отсутствие закрывающего тега (например, элемент P, указывающий начало абзаца). Существуют также элементы, не имеющие закрывающего тега, то есть его не просто можно опустить, а он вообще не существует в языке. [1]

1.2 Атрибуты

Элементы могут содержать параметры, называемые атрибутами. Атрибуты могут иметь определенные значения (по умолчанию или устанавливаемые авторами). Пара атрибут/значение указывается в начальном теге элемента перед символом >, например:

<BODY bgcolor = «#FF0000»>

Каждому атрибуту может быть присвоено значение определенного типа. В приведенном примере указание атрибута bgcolor (имеющего тип %Color) в элементе BODY приведет к тому, что цвет фона страницы станет красным. Значения атрибутов заключаются в кавычки, хотя в определенных случаях кавычки необязательны. В начальном теге элемента может быть указано любое количество допустимых пар атрибут/значение, разделенных пробелами, например:

<BODY bgcolor = «#FF0000» text = «#0000FF»>

В приведенном примере устанавливаются красный цвет фона страницы и синий цвет основного текста. При установке значений нескольких атрибутов порядок их записи не имеет значения. Важно отметить, что регистр, в котором записываются названия атрибутов, также не имеет значения. Однако для повышения читабельности HTML-кода названия атрибутов обычно записываются в нижнем регистре (как в приведенных выше и ниже примерах). Существует любопытная разновидность атрибутов – булевы атрибуты. Для них возможны только два значения: ИСТИНА и ЛОЖЬ. По умолчанию эти атрибуты имеют значение ЛОЖЬ. Чтобы присвоить им истинное значение, достаточно просто указать имя этого атрибута, не присваивая ему никакого значения. Ниже приведен пример, в котором устанавливаются истинные значения двух атрибутов HTML-элемента INPUT:

<INPUT readonly disabled>. [1]

1.3 Вложенные элементы

Важным моментом HTML является возможность использования вложенных элементов. Элемент, находящийся внутри другого элемента, называется вложенным. Пример использования вложенных элементов для задания начертания шрифта:

<I>Курсив<B>-Полужирный курсив-</B>Курсив</I>

При обработке приведенного HTML-кода получится страница:

Рис. 1.1. Применение вложенных элементов

На приведенном рисунке видно, как действие внешнего (или родительского) элемента I (задание курсива) дополняет действие внутреннего элемента B (задание полужирного начертания шрифта). При использовании вложенности следует помнить, что вложенные элементы должны закрываться до того, как будут закрыты внешние элементы. Так, следующий пример является неверным:

<I> Неправильное закрытие <B> внутреннего элемента </I> до закрытия внешнего </B>. [1]

Блочные и встроенные элементы

Различают также блочные и встроенные элементы (иногда их называют элементами уровня блока и элементами уровня текста). Основным отличием блочных элементов является форматирование их браузером как обособленной части документа. Блочные элементы задаются парными тегами и могут содержать вложенные блочные или встроенные элементы и, естественно, текст. Встроенные элементы обычно находятся прямо в тексте и могут иметь содержимое или не иметь его. Примерами встроенных элементов могут служить приведенные ранее элементы B и I, а также элементы перевода строки, изображения и т. д. В отличие от блочных элементов, встроенные элементы могут содержать только текст или вложенные встроенные элементы. [1]

Каскадные таблицы стилей (CSS)

HTML используется, чтобы описать содержимое веб страницы, а каскадные таблицы стилей влияют на то, как выглядит контент. Говоря о веб-дизайне, способ, которым представлена страница, известен как ее представление. Шрифтами, цветами, фоновыми изображениями, интервалами между строками, макетом страницы и прочим управляют с помощью CSS. В новейшей версии (CSS3) вы можете добавлять на страницу даже специальные эффекты и простую анимацию. Таблицы стилей также управляют представлением документов не только в браузерах, но и в таких контекстах, как печать и устройства с экранами с малой диагональю. Кроме того, в таблицах стилей существуют правила для определения не визуального представления документов, например, как будет звучать текст при считывании его программой экранного доступа (однако они не очень хорошо поддерживаются). Таблицы стилей - это отличный инструмент, позволяющий автоматизировать процесс разработки, потому что вы можете производить изменения,

относящиеся ко всем страницам сайта, редактируя один-единственный документ таблицы стилей. Они в некоторой степени поддерживаются всеми современными браузерами. [2]

Структура HTML-документа

HTML-документ состоит из трех частей, в которых описывается следующая информация:

Данные о версии используемого HTML;

Заголовок документа; <head>

Тело документа. <body>

C:\Users\s.pinchuk\Pictures\htmlbody.gif

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

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

Итак, полноценный HTML-документ должен содержать все три указанные элемента структуры или хотя бы два последних элемента. [3]

Глава 2. Практическая часть

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

2.1 Создание сайта

Итак, что нужно для создания сайта?

Можно много рассказывать о различных редакторах как графических типа Photoshop, так и текстовых которые используются для создания сайта, но так как у нас ограниченное количество страниц курсовой то я возьму текстовый редактор под названием Sublime Text и начну создание своего сайта.

Sublime Text - это кроссплатформерный многофункциональный текстовый редактор с набором инструментов для маркировки и выделения фрагментов кода. Необходим он для упрощения создания исходников на различных языках программирования. Главное его преимущество - это маркировка кода для более понятного восприятия.

Sublime Text

HTML документ с содержанием нашего контента будет выглядеть так:

Содержание HTML документа:

И так познакомимся поближе с содержанием:

Элемент <!DOCTYPE html> и атрибут <html lang="en"> обозначает тип данного документа и язык на котором написан контент.

Далее тег <head> открывает нам возможность написать заголовок сайта как в нашем примере «Hi Synergy», заголовки используются поисковыми системами для получения описания сайта, ключевых слов и других данных. Основная задача тега — это хранения других элементов, цель которых — помочь браузеру в работе с данными. В нашем примере тегом <link> мы подключаем для использования на нашей страничке файл CSS.

<link rel="stylesheet" href="css/ma.css">

После закрытия тега <head> открывается тег <body>. Внутри данного блока располагается содержание веб страницы, а именно текст, изображение, скрипты и прочее. Тегом <div> мы открываем отдельный блок где будет располагаться наш контент задаем ему класс container что бы в последствии обратится именно к этому боку в таблице стилей CSS <div class="container">

Далее мы расположим логотип нашего сайта: <img src="img/logob.png" alt="Synergy" где img src="img/logob.png мы описываем вставку изображения и путь к нему. А атрибутом alt мы пишем текст на случай пропажи изображения или отключения отображения в браузере.

Тегом <nav> мы создадим меню нашего сайта: <nav> <ul class="menu"> <li> <a href="#">Home</a> и прочие пункты.

Далее мы напишем простой текст но уже в другом блоке div <div class="titles">

<div class="ti1">Hello, synergy teacher!

<h1>It's nice to meet you</h1></div>

Для обращения в CSS укажем класс class="titles"

И в заключении создадим блок в виде кнопки:

<div>

<a class="button1" href="#">Tell me about Html</a>

</div> </header>

Где также указывается класс "button1" для обращения в CSS и указывается ссылка на случай взаимодействия с кнопкой href="#".

2.2 Итог работы с файлом HTML

И вот мы уже описали содержания нашего сайта, на сайте будет меню, логотип, текст. Попробуем посмотреть, что получилось:

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

Как можно было заметить по тексту выше весь контент мы располагали в отдельных друг от друга блоках с тегом <div> при этом указывая класс каждого блока посредством атрибута class="". Все это необходимо было для того чтобы мы смогли описать стиль конкретного блока в CSS.

Создание таблицы стилей CSS

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

Вид в Sublime Text будет такой:

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

Первое, что мы видим идет обращения к блоку <body> где расположен основной контент. Значением font-family мы задаем параметр каким будет шрифт. По умолчанию шрифт, установленный в браузере это Times New Roman. В нашем случаи мы будем использовать шрифт Arial. Далее идут значения такие как padding и margin. Эти значения задают характеристики полей блока и его отступа.

Так же в CSS описываются классы, которые мы указывали в различных блоках например: класс «.container» в нем указывается значение width: 800px. Это значение указывает ширину данного блока. На основной странице будет располагаться картинка поэтому в блоке header прописывается значение background и указывается путь к изображению.

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

Посмотрим, что в итоге у нас получилось:


Вот это уже похоже на настоящий сайт!

На верху сайта у нас расположилось меню и логотип

По центру текст был выведен текст

И под конец была сделана кнопка

Заключение

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

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

Подводя итоги проведенного изучения хочется отметить, что HTML это основа разработки сайта. Работая только с одним HTML невозможно создать уникальный проект поэтому необходимо изучать и другие языки программирования. Не знания основы невозможно продвигаться дальше, HTML это база, на которой строятся все веб сайты.

Приложением к настоящей курсовой работе идет исходный код документа Html и CSS разработанный в процессе подготовки материалов для данной работы.

Список литературы

  1. Чиртик А.А. HTML: Популярный самоучитель: учебник для бакалавров / Чиртик А.А. 2008. — 8 с.
  2. Дженнифер Роббин HTML5, CSS3 и JavaScript исчерпывающее руководство / Дженнифер Роббин 4- издание 2014. - 10-50 с..
  3. Самоучитель HTML для чайников [Электронный ресурс]. – Режим доступа: http://www. https://serblog.ru/demo/tutorial_html/steps/1step2.html– Заглавие с экрана. – (Дата обращения: 12.07.2018).
  4. МАКЕТ И ВЕРСТКА HTML+CSS [Электронный ресурс]. – Режим доступа: https://wayup.in/– Заглавие с экрана. – (Дата обращения: 10.07.2018).
  5. Брайан Хоган, HTML5 и CSS3. Веб-разработка по стандартам нового поколения / 2011. - 10-60 с..
  6. Дэвид Макфарланд, Большая книга CSS3 / 2014 5-50 c..
  7. Дронов.В.А. HTML.5.CSS.3.и.Web 2.0.Разработка.современных.Web-сайтов. / 2011 10-30 с.
  8. Питер Лабберс, HTML5 для профессионалов. Мощные инструменты для разработки современных веб-приложений. / Брайан Олберс, Фрэнк Салим / 2011. 10-80 с.
  9. Эрик Фримен - Изучаем HTML, XHTML и CSS / 2012.
  10. К.Сухов - HTML5 - путеводитель по технологии / 2013.
  11. Ташков П. А. - Веб-мастеринг. HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / 2010
  12. Дэвид Кроудер - Создание веб-сайта для чайников / 2009.

Приложение №1

Исходник HTML

<!DOCTYPE html>

<html lang="en">

<head>

<title>Hi Synergy</title>

<link rel="stylesheet" href="css/ma.css">

</head>

<body>

<header>

<div class="container">

<div class="heading clearfix">

<img src="img/logob.png" alt="Synergy"

class="logo" height="150px">

<nav>

<ul class="menu">

<li> <a href="#">Home</a>

</li>

<li> <a href="#">Services</a>

</li>

<li> <a href="#">Portfolio</a>

</li>

<li> <a href="#">About</a>

</li>

<li> <a href="#">Contact</a>

</li>

</ul>

</nav>

</div>

</div>

<div class="titles">

<div class="ti1">

Hello, synergy teacher!

<h1>It's nice to meet you</h1></div>

</div>

<div>

<a class="button1" href="#">Tell me about Html</a>

</div> </header>

<div class="container3">

<div class="titles">

conteriner 2 </div>

</div>

</body>

</html>

Приложение №2

Исходник CSS

body {

font-family: Arial;

padding: 0;

margin: 0;}

.clearfix:after {

content: '';

display: table;

width: 100%;

clear: both;}

.container {

width: 800px;

margin: 0 auto;}

header { background: url(../img/1.jpg)

no-repeat center top /cover;

padding-bottom: 600px;}

.logo { margin-top: 41px;

float: left;}

nav {float: right;

margin-top: 150px;}

.menu {

padding: 0;

margin: 0;

display: block;}

.menu li {

float: left;

display: block;

margin-right: 41px}

.menu a {

color: #fff;

text-decoration: none;

text-transform: uppercase;

font-size: 14px;}

.ti1 {

font-size: 40px;

color: #fff;

text-transform: uppercase;

text-align: center;

margin-top: 50px;}

h1 {

color: #6666ff;

}

.button1 {

background: #fed136;

color: #484543;

text-decoration: none;

display: block;

width: 240px;

padding: 20px 0px;

margin: 0 auto;

border-radius: 3px;

text-align: center;

text-transform: uppercase;

font-weight: bold;

font-size: 18px;

}

h2 { text-align: center;

text-transform: uppercase;

font-family: Arial;

}

.container2 {

background: color #ddd;

}

.container3 {

background: #cccccc

padding: 600px;

}