Файл: Основы программирования на языке HTML (О языке html).pdf
Добавлен: 13.03.2024
Просмотров: 87
Скачиваний: 0
Цвет фона документа:
Цвет простого текста документа:
Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">
Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.
Горизонтальная линия. Используя тег <HR>, вы можете разделить текст горизонтальной чертой.
Формат тега:
<HR SIZE=number WIDTH=number|percent ALIGN=left|right|center NOSHADE>
Параметры тега::
Толщина линии в пикселях.:
Ширина линии в пикселях или процентах от ширины окна броузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 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.
<link rel=”stylesheet” href=”style.css” type=”text/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).
10. Основы html для начинающих. Урок 1 URL: http://sitesnulya.ru/osnovy-html-dlya-nachinayushhix-urok-1/ (Дата обращения 13.02.19).
11. Интерактивные онлайн курсы по HTML, CSS и Javascript URL: https://htmlacademy.ru/ (Дата обращения 03.02.19).
12. Рекомендации консорциума W3c к HTML 5 от 28 октября 2014г. URL: http://spec.piraruco.com/html5/index.htm (Дата обращения 28.02.19).
13. Быстрый старт в HTML для начинающих URL: https://webkyrs.info/category/bystryi-start-v-html-dlia-nachinaiushchikh (Дата обращения 14.03.19).
