Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
Топ:
Выпускная квалификационная работа: Основная часть ВКР, как правило, состоит из двух-трех глав, каждая из которых, в свою очередь...
Когда производится ограждение поезда, остановившегося на перегоне: Во всех случаях немедленно должно быть ограждено место препятствия для движения поездов на смежном пути двухпутного...
Комплексной системы оценки состояния охраны труда на производственном объекте (КСОТ-П): Цели и задачи Комплексной системы оценки состояния охраны труда и определению факторов рисков по охране труда...
Интересное:
Как мы говорим и как мы слушаем: общение можно сравнить с огромным зонтиком, под которым скрыто все...
Распространение рака на другие отдаленные от желудка органы: Характерных симптомов рака желудка не существует. Выраженные симптомы появляются, когда опухоль...
Инженерная защита территорий, зданий и сооружений от опасных геологических процессов: Изучение оползневых явлений, оценка устойчивости склонов и проектирование противооползневых сооружений — актуальнейшие задачи, стоящие перед отечественными...
Дисциплины:
 2020-12-27 |
 133 |
из
5.00
|
Заказать работу |
Ссылки. 35
Абсолютные и относительные ссылки. 38
Правила вложений для тега <a>. 40
Атрибуты ссылок. 40
Ссылка на адрес электронной почты.. 42
Якоря. 43
Изображения. 44
Форматы файлов. 45
Добавление рисунка. 46
Альтернативный текст. 48
Изменение размеров рисунка. 50
Списки. 53
Список определений. 57
Таблицы.. 59
Вложенные таблицы.. 64
Заголовок таблицы.. 67
Задания. 69
Лабораторная работа №3 «Фреймы в HTML». 69
Создание фреймов. 71
Ссылки во фреймах. 74
Границы между фреймами. 75
Изменение размеров фреймов. 76
Полосы прокрутки. 77
Плавающие фреймы.. 78
Объекты в HTML.. 79
Валидация документов. 82
Проверка данных на валидность. 84
Написание корректного кода. 88
Задания. 90
Лабораторная работа №4 «Использование CSS для интерфейсов». 90
Преимущества стилей. 95
Типы носителей. 101
Базовый синтаксис CSS. 107
Значения стилевых свойств. 109
Селекторы тегов. 115
Задания. 116
Лабораторная работа №5 «Классы в CSS». 116
Идентификаторы.. 121
Контекстные селекторы.. 124
Соседние селекторы.. 126
Дочерние селекторы.. 131
Селекторы атрибутов. 136
Универсальный селектор. 144
Псевдоклассы.. 145
Группирование. 154
Наследование. 155
Каскадирование. 157
Задания. 160
Лабораторная работа №1 «Введение в HTML»
В примере 1.1 приведен несложный пример кода HTML.
Пример 1.1. Первая веб-страница
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Моя первая веб-страница</title></head><body><h1>Заголовок страницы</h1><p>Основной текст.</p></body></html>Чтобы посмотреть результат примера в действии, проделайте следующие шаги.
1. В Windows откройте программу Блокнот (Пуск > Выполнить > набрать «notepad» или Пуск > Программы > Стандартные > Блокнот).
2. Наберите или скопируйте код в Блокноте (рис. 1.1).
Рис. 1.1. Вид HTML-кода в программе Блокнот
3. Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example11.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы и кодировку UTF-8 (рис. 1.2). Обратите внимание, что расширение у файла должно быть именно html.
Рис. 1.2. Параметры сохранения файла в Блокноте
4. Запустите браузер Internet Explorer (Пуск > Выполнить > набрать «iexplore» или Пуск > Программы > Internet Explorer).
5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.
6. Если все сделано правильно, то в браузере вы увидите результат, как показано на рис. 1.3.
Рис. 1.3. Вид веб-страницы в окне браузера
В случае возникновения каких-либо ошибок проверьте правильность набора кода согласно примеру 1.1, расширение файла (должно быть html) и путь к документу.
Теги
Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги. Общий синтаксис написания тегов следующий.
<тег атрибут1="значение" атрибут2="значение"><тег атрибут1="значение" атрибут2="значение">...</тег>Как видно из данного примера, теги бывают двух типов – одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом. Впрочем, есть теги без всяких дополнительных атрибутов. Условно атрибуты можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега.
В примере 1.2 показан типичный HTML-документ с тегами и текстом.
Пример 1.2. Теги в документе
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Lorem ipsum</title></head><body><p>Lorem ipsum dolor sit amet consectetuer cursus pede pellentesque vitae pretium. Tristique mus at elit lobortis libero Sed vestibulum ut eleifend habitasse. Quis Nam Mauris adipiscing Integer ligula dictum sed at enim urna. Et scelerisque id et nibh dui tincidunt Curabitur faucibus elit massa. Tincidunt et gravida Phasellus eget parturient faucibus tellus at justo sollicitudin. Mi nulla ut adipiscing.</p></body></html>В данном примере используется одиночный тег <meta>, а парных тегов сразу несколько: <html>, <head>, <title>, <body> и <p>.
Парные теги
Парные теги, называемые по-другому контейнеры, состоят из двух частей – открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный – <тег>, а в закрывающем используется слэш – </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. Так, на рис. 1.4 демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.
а
б
Рис. 1.4. Вложение тегов, а – правильное, б – неверное
Если связать открывающий и закрывающий тег между собой скобкой, как показано на рис. 1.4, то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой (рис. 1.4а). Любое пересечение условных скобок (рис. 1.4б) говорит о том, что правильная последовательность тегов нарушена.
Правила применения тегов
Для тегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
Атрибуты тегов и кавычки
Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 1.3).
Пример 1.3. Использование кавычек в атрибутах тегов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Кавычки в атрибуте alt</title></head><body> <p><img src="images/arena.png" alt="Вид заголовка" height="101"></p> <p><img src="images/arena.png" alt=Вид заголовка height="101"></p> </body></html>В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочное значение. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...
Таксономические единицы (категории) растений: Каждая система классификации состоит из определённых соподчиненных друг другу...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!