HTML: краткие сведения-1
HTML – язык разметки гипертекста (HyperText Markup Language).
Гипертекст – текст + ссылки для автоматического перехода (гиперссылки).
Разметка – указания к оформлению и расположению текста и других элементов на странице.
| HTML = гипертекст + теги разметки |
Теги
- Тег (tag) заключается в угловые .
- Область действия тега – между открывающим и закрывающим тегами.
- Открывающий тег может содержать параметры.
- Закрывающий тег начинается с символа
- Регистр при написании имен тегов и параметров не важен.
- Тег неизвестный браузеру – игнорируется.
Вложенные теги: Теги могут вкладываться друг в друга как матрешки. Вложенный тег должен заканчиваться до закрытия внешнего.
| font size=»+3«>большой текст b>полужирный/b>/font> | — правильно |
| font color=»#BB0000″>красный текст b>добавим жирности< /font > не красный< /b > | — не правильно |
Пробелы, разрыв строки, комментарии.
- Несколько пробелов или несколько новых строк игнорируются — считаются за один пробел.
- Для указания новой строки используйте тег разрыва .
- Текст, заключенный в блок (
.
,
.
и т.д), автоматически начинается с новой строки.
- Пропускаются текст и теги внутри комментария:
- Только текст в пердварительно форматированном блоке отображается «как есть», т.е. со всеми пробелами и разрывами строк.
Структура web-страницы
Первым идет необязательный тег , задющий формат документа: html, xml и их версию.
Тег определяет границы HTML-документа, который делится на голову — и тело —
Между задаются общие свойства документа, например, текст заголовка дополнительная информация (в частности тип документа и кодировка ), данные для поисковых серверов и т.д.
Внутри тега собственно и пишется визуальная часть документа.
Как называется указание к оформлению разметки веб страницы на языке html
HTML – язык создания веб-страниц сайта
Для создания гипертекстовых документов, входящих в состав веб-сайтов, используются специальные программные средства, к которым, в первую очередь, относят язык разметки страниц и создания гипертекстовых документов HTML (HyperText Markup Language).
Гипертекстовый документ – файл, содержащий различные виды информации и имеющий в своей структуре ссылки (гиперссылки) на другие файлы или сам являющийся документом, на который есть ссылка в другом файле, расположенном на некотором сервере в любой точке планеты. Гипертекстовый документ, размещённый на сервере с использованием WWW-технологии, называют Web-страницей (веб-страницей). Файл, содержащий HTML документ должен иметь расширение “.htm” или “.html”.
Язык разметки представляет собой совокупность тегов (тэгов), позволяющих отображать необходимые элементы документов (веб-страниц) в окне браузера, осуществлять связь с другими объектами и веб-страницами.
Тег или тэг (англ. “Tag”) является признаком объекта, управляющим кодом. Тэги представляют некоторые операторы (команды, дескрипторы), заключённые в скобки типа “< >”, причём ими начинается и заканчивается целая страница или некоторый фрагмент. Так как многие теги являются парными, они определяют начало и конец некоторого действия. В конце команды ставится слеж “/” с именем, используемым в её начале.
Для создания Web-страниц (веб-страниц) не обязательно иметь доступ к сети. Все известные программы просмотра (IE, Netscape, Mosaic, Опера и др.) могут открыть файл с документом, находящийся на электронном носителе пользователя.
Тэги можно вводить большими и маленькими буквами, например, тэги , и
равнозначны.
Тэг
означает принудительный перевод строки в тексте. Тэг, определяющий новый абзац (параграф – Paragraph) обозначается .
Приведём другие теги, определяющие работу с текстом:
– Bold (жирный)
– Italic (курсив)
– определяет тип шрифта, его цвет и размер.
Кроме этих тэгов в состав некоторых тэгов можно включать дополнительные условия, определяющие его расположение на странице (слева, справа, по середине или по ширине) и др.
Любой документ в виде веб-страницы имеет следующую минимальную структуру:
– Начало страницы.
– Заголовок страницы, отображаемый в верхней строке браузера.
– Конец заголовка страницы.
– Начало отображаемой в браузере части документа.
– Конец отображаемой в браузере части документа.
– Конец страницы.
Аналогично ссылку можно установить на объект внутри страницы (Вверх), предварительно установив место, к которому будет осуществлен переход внутри одной страницы, например, ;
на другую страницу (Новости) и
на адрес электронной почты, например,
lib@mail.ru .
Графические изображения и другие нетекстовые компоненты хранятся отдельно и не вставляются в документ непосредственно. Вместо этого в текст вставляют ссылку, указывающую программе просмотра имя файла, содержащего картинку. Стандартно поддерживаются форматы картинок “GIF” и “JPEG”. Картинка вставляется с помощью тэга .
Для изображения горизонтальной полосы служит тэг .
В тексте, расположенном между тэгами , не допускается использование кавычек, символов “” (больше), «/» и т.п. Их заменяют записями типа “"”, “<”, “>”.
Обычно используют следующую последовательность создания гипертекстового документа (веб-страницы):
1. Создают минимальный документ, в т.ч. по шаблону.
2. Вставляют между тэгами
Для использования кодировки русских символов (кириллица) рекомендуется использовать следующий тэг:
.
3. Вставляют между тэгами
и необходимые тексты и другие объекты, в т.ч. включая их в таблицы. Используют различные фоновые изображения в виде графических объектов, окрашенных областей или всей страницы в какие-либо цвета.4. Размечают тексты (параграфы, заголовки, размер и т.д.). Устанавливают их цвет с учётом их хорошего зрительного восприятия человеком и принципов дизайна.
5. С учётом тех же требований вставляют ссылки на графические изображения и гипертекстовые связи.
6. Загружают подготовленный документ в программу просмотра (браузер) в автономном режиме и оценивают выполненную работу.
7. Проводят корректировку добиваясь получения необходимых, в том числе с точки зрения дизайна, результатов.
Практическое занятие:
Разработка (планирование) и дизайн сайта.
Создание главной и других веб-страниц сайта.
Первая (главная, домашняя или по-английски “Home Page”) страница – лицо сайта. Обычно на первой странице размещают элементы, обозначающие (идентифицирующие) её “хозяина” (название или имя, реквизиты, фото и др.), а также названия предлагаемых сайтом основных тем, ресурсов и услуг.
На основе тем работ, выполненных на первой лекции, студент (ка) создаёт тематический сайт.
Темы согласовываются с преподавателем.
Необходимые для наполнения страниц сайта материалы можно взять из любых традиционных (печатных) учебных, учебно-методических пособий, а также из Интернета.
Сайт должен содержать 5–7 веб-страниц.
Разработайте макет главной страницы сайта.
Главная страница сайта – файл с именем “index.htm”.
На ней между тэгами
.
Затем в область между тэгами
и включается:1) это же название работы,
2) фамилия исполнителя и название его учебной группы, например, в таблицу, состоящую из одной строки и двух ячеек, размером в 60% и 40% соответственно.
– этот тег означает, что описанная ниже таблица разместится по центру веб-страницы.
– начало таблицы , при этом “border=0” означает, что вокруг таблицы не будет рамки, а “ bgcolor=”#0000ff” ”, что цвет фона внутри таблицы будет синим.
Название работы – по центру первой ячейки первой строки шириной в 60% таблицы размещается название работы красного цвета и высотой в 8 единиц.
Если необходимо включить в любую ячейку таблицы рисунок, например, логотип, то поступают следующим образом:
– в ячейке с шириной в ХХ% таблицы размещается картинка с именем “ logo.gif ”. Вокруг неё не будет рамки, а при установке на неё мыши появится текст “ Логотип”.
Ниже (например, отступив одну строку) располагают горизонтальное меню. В качестве примера предлагается использовать структуру веб-сайта турфирмы с вариантами названия входящих в её состав веб-страниц:
● О нас (we.htm)
● Наши туры (our_tours.htm)
● Контакты и проезд (contacts.htm)
● Новости (news.htm)
Эти названия представляют собой гипертекстовые ссылки к соответствующим элементам иерархической структуры сайта (веб-страницам), позволяющим пользователю быстро и удобно находить искомые информационные ресурсы, в том числе на других сайтах.
Эта структура отобразится на главной странице, как правило, внутри горизонтальной таблицы, в нашем случае состоящей из четырёх колонок-ячеек. Необходимая для этого таблица формируется следующим образом:
– начало таблицы , при этом “border=2” означает, что вокруг таблицы будет рамка толщиной 2 пиксела.
О нас – первый столбец (колонка, ячейка) первой строки таблицы с ссылкой на веб-страницу “we.htm”.
Наши туры – второй столбец первой строки таблицы с ссылкой на веб-страницу “our_tours.htm”.
Контакты и проезд – третий столбец первой строки таблицы с ссылкой на веб-страницу “contacts.htm”.
Новости – четвертый столбец первой строки таблицы с ссылкой на веб-страницу “news.htm.
Под таблицей разместим горизонтальную черту красного цвета:
.
Далее сделаем несколько пустых строк, 2–4 раза применив следующую комбинацию тэгов:
– параграф и перевод строки .
Под ними в правой части страницы введём данные, отражающие дату выполнения работы, например:
– синий цвет и размер шрифта .
Создан 21.10.2007 г. – текст, выделенный курсивом, размещается по правому краю страницы.
После выполнения первой работы, необходимо создать остальные веб-страницы. Так, например, вторую страницу можно создать аналогично главной странице. Для этого сохраняют страницу “index.htm”, например, с именем “contacts.htm” для создания связанной веб-страницы “Контакты и проезд” и убирают с неё всё лишнее, оставив лишь таблицу с меню.
На второй странице область начинается с меню (например, скопированного с первой страницы). Затем в неё включается краткое описание темы выполняемой работы. Если оно сопровождается графическими материалами, то и их следует включить в состав этой страницы.
Если на любой странице требуется использовать ненумерованный список, например, сведения об адресе, телефоне и электронной почте фирмы, то его можно сформировать следующим образом:
-
используют парный тэг
.
Аналогичным образом создаются следующие страницы . Они обязательно должны отражать достоинства, недостатки и сферу использования описываемых устройств, систем, топологий и т.п., а также выводы и предложения студента (ки) относительно рассмотренного тематического материала .
Размещение ресурсов на сайте.
После выполнения всей работы по созданию сайта на локальном компьютере студента (ки), они проверяют работу ссылок, осуществляют окончательное оформление страниц (цвет страниц, текстов, размер и др.) и предъявляют свои работы преподавателю.
После получения положительной оценки данной работы, студент (ка) размещают свой сайт на бесплатном сервере и сообщают об этом преподавателю для проверки им работы сайта и выставления окончательной оценки за практическую работу.
Привет!
Этот *.htm-файл может быть открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload (перезагрузить) в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
Дополнительные отступы введены для удобства чтения, однако в HTML это совсем не обязательно. Браузеры игнорируют символы конца строки и множественные пробелы в HTML-файлах. Как видно из примера, вся информация о форматировании документа находится в его фрагментах, заключенных между знаками «». Такой фрагмент (например, ) называется меткой или тегом (по-английски tag). Большинство тегов парные (как открывающие и закрывающие скобки), то есть на каждую открывающую метку вида
Большие и маленькие буквы не различаются, например , и
равноправны и одинаково вызывают принудительный перевод строки в тексте. Часто действие тегов интуитивно понятно для знающих английский:
— Bold (жирный), — Italic (курсив), — Paragraph (параграф).
Многие теги, помимо имени, могут содержать атрибуты – элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута.
В настоящее время начинается постепенный переход к более строгому языку разметки гипертекста – XHTML, который уже поддерживается разработчиками некоторых браузеров. Этот язык существенно расширяет возможности языка HTML 4, но более требователен к синтаксису. Для последующей совместимости с XHTML желательно 1) имена тегов и атрибутов записывать в нижнем регистре и 2) значения атрибутов должны всегда заключаться в кавычки.
Обязательные теги
Тег должен открывать HTML-документ, а тег должен завершать его.
Пара тегов
. указывает на начало и конец заголовка документа. Кроме наименования документа (см. метки ниже), в этот раздел может включаться служебная информация.Все, что находится между тегами
Пара тегов
. указывает на начало и конец тела HTML-документа, в котором и находится содержимое документа.Теги вида , где i – цифра от 1 до 6 (
.
–
.
) описывают заголовки шести различных уровней. Заголовок первого уровня – самый крупный, шестого уровня – самый мелкий.
Все, что заключено между
и
, воспринимается как один абзац. Метки и
могут содержать атрибут align (от английского «выравнивать»), например:
Выравнивание заголовка по центру
или
образец абзаца с выравниванием по правому краю
Вот еще один пример HTML-документа:
привет!
Это чуть более сложный пример HTML-документа
Теперь мы знаем, что абзац можно выравнивать не только влево,
Картинки и другие нетекстовые компоненты не вставляются в документ, а хранятся отдельно. Вместо этого в текст вставляется ссылка, указывающая программе просмотра имя файла, содержащего картинку. Стандартно поддерживаются форматы картинок GIF и JPEG.
– вставить картинку.
мастерская – сделать слово «мастерская» гипертекстовой ссылкой на сервер www.openweb.ru.
Последние два тега кроме своего имени содержат атрибуты. Например, чтобы вставить в документ картинку у тега , необходим атрибут src=»имя_файла.gif». Часто атрибуты необязательны и служат для уточнения внешнего вида элемента.
Теперь Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно. Чтобы улучшить наш простой HTML-документ рассмотрим форматирование абзаца.
Главнаястр.1Гл.2. Элементы Web-страницч1ч2ч3>
2. Оформление текста внутри абзаца
Непарные теги
Существуют теги, которые не подчиняются двум основным правилам HTML: они непарные, а некоторые (&-последовательности) вводятся только маленькими буквами.
– этот тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Это удобно при публикации стихов:
Стих
Однажды в студеную зимнюю пору
Сижу за решеткой в темнице сырой.
Гляжу — поднимается медленно в гору
Вскормленный в неволе орел молодой.
И шествуя важно, в спокойствии чинном,
Мой грустный товарищ, махая крылом,
В больших сапогах, в полушубке овчинном,
Кровавую пищу клюет под окном.
– горизонтальная линия. Может включать атрибут size, определяющий толщину линии и/или width – ширину линии (в пикселях или процентах). Например:
Комментарии
Браузеры игнорируют любой текст, помещенный между . Это удобно для размещения комментариев.
Форматирование шрифта
HTML допускает два подхода к шрифтовому выделению фрагментов текста. Можно прямо указать, каким должен быть шрифт на некотором участке текста, то есть изменить физический стиль текста. А можно пометить некоторый фрагмент текста как имеющий отличный от нормального логический стиль, оставив интерпретацию стиля браузеру.
Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между тегами и , будет написано жирным шрифтом. Текст между тегами и будет написан наклонным шрифтом. Текст, размещенный между тегами и , будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.
Тег font – задает размер и цвет шрифта текста (применять не рекомендуется). Атрибуты:
Size – устанавливает размер шрифта. По умолчанию используется размер 3. Значения: а) фиксированный размер от 1 до 7, б) относительное изменение «+1» и «-3» на один размер больше и на три размера меньше. Можно задавать размеры в пунктах – pt, пикселях – px.
Face – определяет список разделенных запятыми названий шрифтов. Color – цвет текста. Примеры: ЗЕЛЕНЫЙ
Шрифты типа Arial, Helvetica, sans-serif называют пропорциональными рублеными; Georgia, Times New Roman, serif – пропорциональные с засечками (серифные); Courier, mono – моноширинные шрифты (буквы одинаковой ширины) с засечками.
При использовании логических стилей заранее неизвестно, что увидят пользователи. Разные браузеры представляют одни и те же тегами логических стилей по-разному. Некоторые браузеры показывают нормальный текст вместо выделенного логическим стилем. Распространены следующие логические стили: . – от английского emphasis – акцент, . – сильный акцент, . – фрагмент исходного текста, . – образец сообщения, . – для указания того, что нужно ввести с клавиатуры, . – для написания имен переменных.
Главнаястр.1Гл.2. Элементы Web-страницч1ч2ч3>
3. Разметка документа
Как мы уже видели структурировать документ можно с помощью заголовков и абзацев. Кроме того, абзацы можно организовывать в списки.
Например, чтобы создать вот такой список:
Инструменты для разработки веб-сайтов
Внимание! Все тесты в этом разделе разработаны пользователями сайта для собственного использования. Администрация сайта не проверяет возможные ошибки, которые могут встретиться в тестах.
Данный тест необходимо пройти после просмотра видеоурока. Удачи!
Система оценки: 5 балльная
Список вопросов теста
Вопрос 1
Что такое поисковый робот?
Выберите один из 4 вариантов ответа:
Варианты ответов
- Программа пополняющая поисковый указатель
- Сортировщик страниц поискового каталога
- Программа для поиска людей в социальных сетях
- Разновидность поискового сервера
Вопрос 2
Укажите разновидности html — редакторов.
Выберите несколько из 4 вариантов ответа:
Варианты ответов
- Браузеры
- Провайдеры
- Редакторы исходного кода
- Визуальные html-редакторы
Вопрос 3
При помощи какого языка пишется разметка веб-страниц?
Выберите один из 4 вариантов ответа:
Варианты ответов
Вопрос 4
Укажите преимущества визуальных HTML — редакторов, по сравнению с редакторами исходного кода при оформлении веб-страниц?
Выберите несколько из 4 вариантов ответа:
Варианты ответов
- Можно не знать язык разметки гипертекста
- Более рациональное написание кода
- Сразу виден результат работы
- Проверка правильности кода
Вопрос 5
Как иначе называются визуальные html — редакторы?
Выберите один из 4 вариантов ответа:
Варианты ответов
- Веб-редакторы
- Тег-редакторы
- Ручные редакторы
- WYSIWYG-редакторы
Вопрос 6
Как называется параметр тега в языке HTML ?
Составьте слово из букв:
Варианты ответов
Вопрос 7
При помощи каких программ можно создавать веб-страницы на языке разметки гипертекста?
Выберите несколько из 4 вариантов ответа:
Варианты ответов
- Текстовые редакторы
- Редакторы исходного кода
- Среды программирования
- Графические редакторы
Вопрос 8
Как называется указание к оформлению разметки веб-страницы на языке HTML ?
Вопрос 9
Укажите преимущества редакторов исходного кода перед текстовыми редакторами при создании веб-страниц?
Выберите несколько из 4 вариантов ответа:
Варианты ответов
- Возможность сразу видеть результат
- Можно не знать язык разметки гипертекста
- Готовые шаблоны кода
- Проверка правильности кода
Вопрос 10
Укажите недостатки визуальных HTML — редакторов.
Выберите несколько из 4 вариантов ответа:
Варианты ответов
- Требуют знания большого количества тегов
- Большой объем веб-страниц
- Нерациональная генерация кода
- Создание веб-страниц занимает много времени