Какие преимущества для пользователей есть в HTML5 по сравнению с HTML?
ü часть данных можно хранить на устройстве пользователя, т.е. приложения могут работать без интернет соединения;
ü веб-страницы могут отображать больше шрифтов с более широким диапазоном цветов, теней и других эффектов;
ü объекты на странице могут двигаться вместе с курсором;
ü интерактивные медиа типа игр можно запускать прямо в браузерах без подключения дополнительного ПО или плагинов. Для аудио и видео теперь также не нужны плагины;
ü браузеры могут отображать интерактивную 3D графику с помощью графического процессора компьютера.
Отбросив необходимость в сторонних плагинах, HTML5 ускоряет доставку более динамичного контента.
Практическая работа 1. Знакомство с процессом разработки веб - страницы
Создание разметки веб – страницы
1. На Рабочем столе создайте папку с именем «Веб-страница фамилия».
2. В данной папке создайте текстовый документ с именем index . html
3. Запустите программу Sublime Text и откройте созданный файл index . html
4. Создадим разметку нашей веб – страницы. Для этого введём определяющие теги. Обратите внимание, что у каждой части страницы есть открывающий и закрывающий тег.
<!doctype html> <html> <head> <title>Веб - программирование</title> </head> <body> </body> </html> |
Если мы откроем нашу веб – страницу при помощи браузера, то увидим чистый лист и название нашей будущей страницы «Веб – программирование»
|
|
5. Продолжим создавать страницу. Добавим заголовок и текст. Для этого между тегами <body> …</body> (тело страницы) наберите следующие теги и текст.
Пояснение: <h2>… </h2> - теги, формирующие заголовок, <p>...</p> - теги, формирующие абзац текста
<h2>Веб-программисты</h2>
<p>Веб-программист – это одна из самых трендовых ИТ-специальностей. По прогнозам сайта CareerCast, к 2024 году популярность профессии вырастет еще на 24 %.
В России за свой труд разработчик сайтов получает от 90 тысяч рублей, а верхний порог зарплат может достигать 600 тысяч.</p>
<p>Web-программист – это профессионал в сфере компьютерных технологий, а если быть точнее, в области web-программирования. Его основная задача – претворять в жизнь разработки web-дизайнеров, создавая качественные и функциональные сайты.</p>
Сохраните изменения, используя команду File – Save All
Обновите страницу в браузере. Теперь на нашей странице появился текст.
6. Добавим на веб - страницу изображение. Для этого с Рабочего стола в созданную вами папку переместим файл с изображение 2.jpg
В коде страницы пропишем тег для вставки изображения
<div class="pic" style="width:689px">
<img src="2.jpg" height="220" alt="_" />
|
|
</div>
Теперь наша страница содержит изображение
7. Почти все страницы в сети Интернет содержат ссылки для перехода на другие страницы. Создадим ссылку для перехода на страницу Википедии. Пропишем следующий код
<a href="https://ru.wikipedia.org/wiki/Веб-программирование">Веб-программирование</a>
Обновим страницу в браузере. Разметка веб – страницы создана.
В реальности веб – страницы не только чёрно – белые, а содержат множество цветов и красиво оформлены. Для того, чтобы оформить страницу, нам понадобится знание CSS - формального языка описания внешнего вида документа.
8. Перейдите в папку Веб – страница и создайте там ещё один текстовый документ с именем main.css
Откройте созданный документ в программе Sublime Text
Сначала оформим внешний вид нашей страницы
body – это тело нашего документа. Настроим параметры каждого элемента
background - color: #00FF99; - цвет фона страницы
border - width: 12px; - толщина рамки страницы
border-style: ridge; - стиль рамки
border-color: #bdbdbd; - цвет рамки
border-bottom: none; - отсутствие рамки снизу
border-right: none; - отсутствие рамки справа
margin - left: 5%; - внешний отступ слева
padding - left: 25px; - внутренний отступ слева
padding - top: 20px; - внутренний отступ сверху
|
|
font-size: 18px; - размер шрифта
font-family: "Comic Sans MS"; - стиль шрифта
text - indent: 2em – расстояние между буквами
9. Но чтобы оформление работало на странице, необходимо его подключить. Для этого в файле index . html добавим строку с кодом
<link rel="stylesheet" href="main.css">
Сохраним изменения и обновим нашу страницу в браузере
10. Добавим рамку к картинке и поместим картинку в середину страницы
img { padding: 10px; border: 1px solid #777; } .pic { margin-left: auto; margin-right: auto; } |
Урок 2. HTML (Hyper Text Markup Language) - язык гипертекстовой разметки
Под гипертекстом обычно понимается текст, содержащий ссылки на другие документы. Кроме того, гипертекст на веб-страницах, как правило, содержит форматирование (разнообразные начертания, размеры, цвета и выравнивания символов, а также графические элементы и таблицы).
Разметка - процедура внедрения в текст специальных обозначений (тэгов), которые определяют ссылки и форматирование.
Например, текст, заключённый между тэгами <h1> и </h1>, превращается в заголовок 1-го уровня: <h1>Заголовок</h1>.
Текст между тэгами <a> и </a> становится гиперссылкой на ресурс, указанный в атрибуте href тэга <a>:
|
|
<a href="http://www.bing.com/">Поиск</a>.
Указанный тэг имеет имя a и один атрибут с именем href и значением "http://www.bing.com/".
Как видно, обозначения тэгов подобраны таким образом, чтобы их легко было отличить от обычного текста. Угловые скобки зарезервированы для выделения тэгов в гипертексте.
Тэги могут быть открывающими и закрывающими: <h1> и </h1>, <a> и </a> и т.д., причём закрывающий тэг отличается от открывающего наличием символа слэша перед именем тэга и отсутствием атрибутов.
В целом структура, определяемая открывающим и парным ему закрывающим тэгами, называется элементом и имеет следующий общий вид:
<имя_элемента имя_атрибута1="значение_атрибута1" имя_атрибута2="значение_атрибута2"...> Текст </имя_элемента>
Варианты определения элемента:
- Элемент без атрибутов и содержимого, оформленный как самозакрывающийся тег: <hr />
- Элемент, вложенный в другой элемент:
<p> <a href="http://www.bing.com/">Поиск</a></p>Совокупность таких обозначений и правил их использования и образует язык разметки гипертекста HTML. Этот язык в его первоначальном варианте был предложен в 1989 году английским физиком Тимом Бернерс-Ли. В 1994 году Бернерс-Ли основал консорциум WWW - с уставной целью определить стандарты для HTML и позднее для XHTML. Его члены ответственны за создание чернового варианта стандарта, организацию его обсуждения и за внесение изменений в первоначальный вариант, учитывая замечания и предложения, поступившие от интернет-сообщества, чтобы удовлетворить пожелания большинства.
Структура документа HTML
Структура нужна для того, чтобы всё имело своё законное место - текст, тэги, стили, скрипты, служебная информация.
На первом месте HTML-документа, согласно стандарту, находится определение типа документа (ОТД). Существенный смысл ОТД заключается в том, чтобы указать, согласно каким правилам написан HTML-документ.
Непосредственно за ОТД должен следовать единственный в документе элемент наивысшего (корневого) уровня - элемент html. <html>…..</html>
Раздел head ("шапка")
Проще всего ответить на вопрос, что должно размещаться в разделе head, таким образом: там размещается всё, что не входит в тело документа, но необходимо для его правильного отображения.
Шапка документа - его заголовок, метаданные (информация о самом документе, а не о его содержимом), стили, скрипты.
Пример минимального раздела head:
<head> <title>Заголовок документа</title></head>Элемент title - единственный обязательный элемент раздела head.
Метаданные могут включать в себя информацию об авторах, ключевых словах документа и т.п., например:
<meta name="Authors" content="Alexander Kudryashev & Pavel Svetashkov" />Эти данные не видит пользователь, просматривающий страницу, но могут анализировать поисковые роботы.
Раздел body ("тело документа")
Здесь размещается основное содержимое документа. Выглядит это, например, так:
<body> <p>Hello, World!</p></body>Дело не только в том, согласно каким правилам мы написали документ и какие директивы DOCTYPE в него включили. Браузер - программа довольно широкого применения: она может читать текст, HTML, XHTML, ряд графических форматов и т.д. Приступая к чтению файла, браузер должен определиться, какого типа это содержимое. Когда мы открываем локальный файл, то на тип содержимого указывает его расширение (и ключи реестра); когда же загружаем его с веб-сервера (где расширение файла в запросе совершенно не обязательно должно быть указано), то сервер, отвечая на запрос браузера, включает в ответ заголовок вида content-type: text/html и т.п. В результате браузер всегда информирован о типе содержимого до того, как он начинает читать это содержимое, и он запускает свою подпрограмму - парсер (анализатор текста), специализированную на чтении именно данного типа содержимого.
Назначение языка CSS
Типичный HTML-документ представляет собой набор элементов, содержащих другие элементы либо текст. HTML-элементы могут иметь атрибуты - большинство атрибутов отвечают за такие визуальные характеристики элемента как цвет (color), отступ (margin), рамка (border), размеры (width, height) и т.п.
Другая большая группа атрибутов определяют реакции элементов на такие события как щелчок мышью (onclick), нажатие клавиши (onkeydown) и т.д.
Ряд атрибутов отвечают за информационное содержание, например, гиперссылка (href) или значение в элементе ввода (value).
Таким образом, атрибуты элементов можно принципиально разделить на группы по критерию: "Что определяет атрибут?" - представление, поведение или содержание (существуют и другие, не попадающие в эти группы, атрибуты).
Нетрудно заметить, что применение атрибутов представления на практике обычно имеет массовый характер, в отличие от атрибутов поведения или содержания. Иными словами, имея в документе множество элементов "абзац" (p), веб-дизайнер наверняка будет применять одно и то же форматирование ко многим из них. То же можно сказать и об изображениях, и о таблицах, и об элементах форм - вообще, в основе хорошего дизайна лежит разумное единообразие.
Практическое задание
1. В вашей рабочей папке создайте текстовый документ с именем имя. html
2. Запустите программу Sublime Text и откройте созданный файл имя. html
3. Создайте веб – страницу со встроенными стилями
4. Откройте веб - страницу в браузере, выполните анализ атрибутов элементов.
Упражнение. Замените значение атрибута «цвет текста» (color) на зелёный (green) в каждом абзаце примера.
5. Откройте веб - страницу в браузере, посмотрите изменения.
Урок 3. Теги HTML
ИЗОБРАЖЕНИЕ (в рамке) ГИПЕРССЫЛКА |
Работа со списками
list-style-type указывает вид маркера или номера list-style Соединяет объявления свойств list-style-type, list-style-image и list-style-position в одном сокращённом объявлении: list-style: [list-style-type] [list-style-image] [list-style-position] Например: list-style: square inside; | Подсказка Стиль для списка Файл main . css Подключение файла со стилями ... |
Изменение типа маркера
Свойство list-style-type, оно задает тип маркера элемента списка.
Меню навигации, к примеру, часто составляется из обычных маркированных списков (HTML элемент <ul>), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none:
ul {list-style-type : none; /* убираем маркер у списка */}Для маркированных (неупорядоченных) списков (HTML элемент <ul>) предусмотрено три типа маркеров: в форме закрашенного кружка (disc - это значение по умолчанию), маркер в форме полого круга (сircle) и в форме квадрата (square), а для нумерованных (упорядоченных) списков (элемент <ol>) все оставшиеся варианты. Полный перечень размещен в следующей таблице:
Дата добавления: 2020-04-25; просмотров: 182; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!