Файл: Основы программирования на языке HTML (О языке html).pdf

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия. Используя тег <HR>, вы можете разделить текст горизонтальной чертой.

Формат тега:

Параметры тега::

Толщина линии в пикселях.:

Ширина линии в пикселях или процентах от ширины окна броузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

6. Добавление стилей в документ

6.1 Что такое CSS?

На начальных этапах развития сети интернет содержание и внешний вид страниц прописывались только в HTML. Но в последствии для работы над внешним видом страниц появился отдельный язык – CSS (расшифровывается как «каскадные таблицы стилей»). Необходимость в наличии отдельного инструмента для оформления документов возникла из-за того, что при совмещении оформления и наполнения сайта в одном инструменте теряется гибкость: код становится перегруженным, для того, чтобы что-то поменять в оформлении нужно править содержимое. Нет возможности переключаться между разными версиями оформления страницы, особенно если есть потребность поменять его кардинально, т.к. придётся переписывать очень много HTML-элементов. Именно поэтому было принято решение отказаться от размещения элементов оформления внутри атрибутов в HTML документе и разделить: разметка и содержимое страницы – это то, что относится к HTML, а всё что занимается стилями – относится к технологии CSS. Проще говоря: задача HTML – показать, какие элементы будут на странице, задача CSS – показать, как эти элементы будут на странице выглядеть. Слово «каскадные» в аббревиатуре CSS означает многоуровневые. Это значит, что одному и тому же элементу на странице может быть назначено сразу несколько стилей из разных источников. Какой именно стиль будет применён к элементу, решают правила приоритета.

Слово таблица в аббревиатуре означает, что CSS представляет собой набор стилей и их значений, которые можно свести в таблицу.

6.2. Работа с CSS

Документ CSS, так же, как и документ HTML представляет собой текстовый файл, для работы с которым можно использовать стандартные текстовые редакторы, но удобнее этим заниматься в продвинутых редакторах кода, таких, как Notepad++, PhpStorm, Atom или Stylyzer – специальный инструмент для работы с CSS.

Существует три основных способа подключения стилей CSS к телу документа HTML:

Атрибут Style – используется в элементах HTML для придания элементу стиля <p style="color:red; font-family:impact”>Абзац</p>
На данном примере мы покрасили посредством атрибута style Абзац в красный цвет и поменяли ему шрифт на “impact”.
Элемент Style – как правило его располагают внутри тега <head>. Использует CSS- селекторы для придания выбранным элементам документа HTML стиля:

<head>
<title> CSS</title>
<style>
P{ style="color:red; font-family:impact”}
</style>
</head>
В данном примере мы применили аналогичные стили CSS ко всем абзацам страницы.
Подключение стилей CSS с внешнего CSS-файла.
Для начала создаётся текстовый документ, например style.css, в нем так же укажем стили, как из предыдущего примера:
P{ style="color:red; font-family:impact”}
и сохраняем данный документ.
Теперь остаётся в теле главного документа подключить этот внешний CSS-файл внутри HTML-документа. Подключение производится с помощью элемента <link> с атрибутом rel=”stylesheet”. В элементе линк так же используется атрибут href с ссылкой на файл, который хотим подключить. В нашем случае документ HTML находится в той же папке, что и style.css, поэтому путь будет выглядеть так: href=”style.css”. Также в элементе link указывается атрибут type=”text/css”, который говорит о том, что подключается файл со стилями оформления CSS.

6.3 Синтаксис CSS

Синтаксис CSS - это просто набор селекторов, свойств и их значений.

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

CSS-правило состоит из селектора и перечня свойств и их значений:

селектор {

свойство: значение;

}

В CSS, как и в HTML присутствуют комментарии, для них используются символы /* и */. Вот пример CSS-правила из первой главы:

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

Заключение

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

В процессе написания данной курсовой работы я познакомился с языком разметки HTML, а именно: со структурой HTML-страниц, научился создавать простые статичные web-страницы и использовать базовые теги. Работать с файлами разных форматов и расширений для корректного отображения в браузере. Во время тестирования тегов, правил, изучения синтаксиса языков разметки CSS и HTML мною были опробованы различные бесплатные и платные инструменты: Notepad++, Atom, VisualStudio Code, Arachnophilia 5.5, PHPStorm, Stylizer. Хотя можно было ограничиться и 1 инструментом, но всё-же полезно было оценить интерфейс данных программ. Работа в специализированных редакторах была более удобной и понятной, нежели в стандартном текстовом редакторе.

Знания, полученные мною при написании данной курсовой работы, пригодятся мне в будущем на работе, мне следует ещё многое изучить, чтобы стать профессионалом в данном деле, но я буду и дальше изучать web-разработку на языке HTML и совершенствоваться как специалист.

Список использованной литературы:

1. Алленова Наталья: Самоучитель по html в формате html-книги, Ступеньки 1-13.

2. Мальчук Е.В. - HTML и CSS: Самоучитель, Москва, 2008, 408 с.

3. HTML теги URL: https://msiter.ru/references/html-reference (Дата обращения 20.02.19).

4. Основы html для начинающих на понятном языке URL: http://nesmelov.ru/html/osnovy-html.html (Дата обращения 14.02.19).

5. Первые Шаги - Учебник по Html для чайников URL: https://serblog.ru/demo/tutorial_html/steps/1step2.html (Дата обращения 28.02.19).

6. Что такое HTML и краткая история HTML URL: http://netagent.chat.ru/html/ul1.html (Дата обращения 09.02.19).

7. Рекомендации консорциума W3c к HTML 5 URL: https://www.w3.org/TR/2014/REC-html5-20141028/ (Дата обращения 25.02.19).

8. Basic Web Page Building(Создание базовой веб-страницы) - URL: https://www.arachnoid.com/arachnophilia/Documentation/BasicWebPageBuilding.html (Дата обращения 14.02.19).

9. Основы html для начинающих URL: http://webdesign-master.ru/blog/html-css/4.html (Дата обращения 18.02.19).