Практическое руководство по HTML
© Николай Чувахин, 1997
Глава 2. Наш первый HTML-документ Как устроен HTML-документHTML-документ - это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот самый простой HTML-документ:
Пример 1 Привет!
Это простейший пример HTML-документа.
Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
Пример 1 Привет!
Это простейший пример HTML-документа.
Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "". Такой фрагмент (например, ) называется меткой (по-английски - tag, читается "тэг"). Большинство HTML-меток - парные, то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением "/". Метки можно вводить как большими, так и маленькими буквами. Например, метки , и будут восприняты браузером одинаково. Многие метки, помимо имени, могут содержать атрибуты - элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки ...Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.
...Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
...Все, что находится между метками и , толкуется браузером как название документа. Netscape Navigator , например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
...Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
... - ...Метки вида (где i - цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня - самый крупный, шестого уровня, естественно - самый мелкий.
Такая пара меток описывает абзац. Все, что заключено между , воспринимается как один абзац. Метки и
Могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
Выравнивание заголовка по центру
Образец абзаца с выравниванием по правому краю
Подытожим все, что мы знаем, с помощью примера 2:
Пример 2 Привет! Это чуть более сложный пример HTML-документа
Теперь мы знаем, что абзац можно выравнивать не только влево,
но и по центру
или по правому краю.
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого - с абзаца.
В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.
Вы готовы? Тогда поехали!
Подключение к интернету для создания страницы на html нам НЕ нужно.
Нам понадобится1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )| Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на: 1) для Windows NotePad++ (скачать или ) Intype (скачать) 2) для Mac
и Linux
Их отличие от обычных текстовых редакторов заключается в основном в том, что они делают автоматические отступы, ! дают возможность пересохранить файл в другой кодировке (обратите внимание, в будущем столкнётесь), окрашивают теги в различные цвета как, например, код внизу урока. В обычном редакторе он будет одного цвета. |
2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.
Приступим к созданию страницы HTML1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .
Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html
Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить
. Готово!
Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку
Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)
| так НЕ должно выглядеть: photo, текстовой документ, game
так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее: Смотрим настройки файлов и папок: Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить |
3) вставляем в него Весь код (вместе с комментариями), указанный ниже:
Заголовок моей странички
4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.
В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:
Рисунок 1.
На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:
Название Вашей первой странички
Заголовок моей странички
Это моя первая web-страничка!
В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.
Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.
Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете
Название страницы
Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы
Название страницы
Любой заголовок
Просто текст
Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом
Другой текст
Почти все теги в HTML открывающие и закрывающие
(исключение, например, тег img, который обозначает вставку изображеия).
Название страницы
В очередной раз напомню, что Важно не забывать писать закрывающие теги
для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:
Хочу выделить текст жирным, а этот уже курсивом
Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее
Хочу выделить текст жирным, а этот уже курсивом
Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!
5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.
В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении - будем вставлять изображения, делать ссылки и много другого интересного)
Мои поздравления!
Несложно же?)
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
Текст
align="center">Текст
align="left">Текст
align="right">Текст
align="justify">Текст
* По умолчанию текст выравнивается по левому краю.
Отличие между параграфом (тег ) и тегом
в том, что в начале и в конце параграфа появляется вертикальный отступ, чего нет в случае использования тега
Давайте попробуем разместить текст по центру при помощи тега параграфа . Вносим изменения в index.html
Результат
Думаю, что теперь принцип выравнивания текста Вам понят. Попробуйте поэкспериментировать с тегами, которые указаны в этом уроке в таблице выше.
Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров. Списки также разделяют на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. А в многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Может быть, звучит несколько туманно, но единожды увидев это на примере, уже ни с чем нельзя будет спутать.
Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом и его закрывающим близнецом . Отдельные элементы списка объявляются при помощи обозначающего тега
Давайте создадим еще одну html-страничку. Для этого опять откроем "Блокнот" и внесем туда следующий HTML-код:
|
Списки Mapкированный список
|
Сохраним файл как spiski.html
в папке "Мой сайт
".
Посмотрим, что у нас получилось Результат
(Unordered List) - тег служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида. Требуется закрывающий тег
Атрибуты:
type - При помощи параметра type мы имеем возможность явно указывать, какой тип маркера следует использовать для отображения элементов списка. В качестве значений данного параметра применяется одно из трех предустановленных ключевых слов:
title - Всплывающая подсказка при наведении курсора на список.
Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов и . А элементы списка объявляются при помощи все того же тега
|
Списки Mapкированный список
Нумерованный список
|
Результат
В теге атрибут type имеет следующие типы маркеров:
| 1 | Нумерации обычными арабскими цифрами (по умолчанию) |
| A | Обозначение элементов списка при помощи символов латинского алфавита верхнего регистра (заглавные буквы). Нумерация идет по алфавитному порядку, начиная от A до Z |
| a | Обозначение элементов списка при помощи символов латинского алфавита нижнего регистра (маленькие буквы). Нумерация идет по алфавитному порядку, начиная от a до z |
| I | Устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться латинские символы верхнего регистра |
| i | создает нумерацию при помощи римских цифр, которые будут состоять из символов латинского алфавита нижнего регистра |
*
Параметр type
с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр type
с соответствующим значением разрешено указывать в теге элемента списка
Пример записи:
Примечание:
Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.
Давайте еще рассмотрим теги:
- служит для создания списка определений
и
- являются описанием списка определений.
Опять редактируем нашу страничку spiski.html :
Результат
Давайте вернемся к нашей страничке index.html
и попробуем вставить в нее изображение. Делается это при помощи тега
с обязательным
параметром scr
(от source - источник
), в котором указывается адрес картинки (место, где она находится).
Создайте в папке "Мой сайт " еще одну папку и назовите ее "picture ". Теперь, сохраните в нее эту картинку:
Открываем папку "picture " и видим, что наша картинка носит имя kartinka и имеет расширение .jpg
Приступаем к редактированию index.html
Результат
Тег - выравнивание изображения по центру. Также, могут быть использованы теги:
Выравнивание по левому краю
- выравнивание по правому краю
Разберем параметры тега
, которые мы использовали в данном примере:
src="picture/kartinka.jpg" - здесь мы указали адрес нашего изображения, т.е. место, где находится наша картинка.
Устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
А теперь перечислим все параметры тега
. align - определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Может принимать следующие значения:
bottom - выравнивание нижней границы изображения по окружающему тексту
left - выравнивает изображение по левому краю окна
right - выравнивает изображение по правому краю окна
middle - выравнивание середины изображения по базовой линии текущей строки
top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
. alt - альтернативный текст для изображения
. border - толщина рамки вокруг изображения. Указывается в пикселях.
Пример: border="1"
. width - ширина изображения. Указывается в пикселях или процентах.
Пример: в пикселях - width="155" , в процентах - width="100%"
. height - высота изображения. Указывается в пикселях или процентах.
Пример: в пикселях - height="155" , в процентах - height="100%"
. hspace - горизонтальный отступ от изображения до окружающего контента. Указывается в пикселя
Пример: hspace="5"
. vspace - вертикальный отступ от изображения до окружающего контента. Указывается в пикселя
Пример: vspace="5"
. ismap - сообщает браузеру, что картинка является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
. lowsrc - путь к графическому файлу низкого разрешения для предварительного отображения
. src - путь к графическому файлу
Ссылки (или гиперссылки) позволяют щелчком кнопки мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссылки применяются в большинстве существующих страниц. Они могут быть текстовыми и графическими. Текстовые ссылки представляют собой выделенное слово или целую фразу. Выделение ссылки производится цветом или подчеркиванием, в зависимости от настройки браузера.
В языке HTML структуры текстовых и графических ссылок подобны друг другу. Все они задаются тегом с параметром href , которому соответствует закрывающий тег . В ссылке сначала указывается имя файла, на который она ссылается, а затем текст или имя графического файла, содержащего изображение ссылки. Кроме простых графических ссылок, можно создать так называемую графическую карту ссылок: картинку с «горячими областями», щелчок на которых приводит к срабатыванию соответствующих ссылок.
Давайте попробуем создать на странице index.html ссылку на вторую страничку spiski.html . Для этого добавим следующий html-код (редактируем index.html ):
Результат
Чтобы создать графическую ссылку, необходимо между тегами и вствить изображение. Приведем пример на нашей картинке. Ссылка будет выглядить следующим образом:
Рассмотрим параметр target , который может принимать следующие значения:
Blank - загружает страницу в новое окно браузера
Self - загружает страницу в текущее окно
Parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self
Top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self
* По умолчанию используется _self
Транскрипт1 1 Практикум «Создание Web-сайта Компьютер» Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. Задание 1. Создание структуры Web-страницы. Приступим к созданию титульной Web-страницы сайта. Для этого используем привычный и достаточно удобный для этих целей текстовый редактор Блокнот. Открыть окно текстового редактора Блокнот. Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тегов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами. HTML код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание. Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. Название Web-страницы содержится в контейнере и отображается при ее просмотре в строке заголовка браузера. Назовем нашу Web-страницу Компьютер: Компьютер Основное содержание страницы помещается в контейнер и может включать текст, таблицы, бегущие cтроки, ссылки на графические изображения и звуковые файлы и т.д. Поместим для начала на страницу текст Все о компьютере: Все о компьютере Созданную Web-страницу необходимо сохранить в виде файла. Принято называть титульный файл сайта, т.е. тот который первый загружается в браузер, именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке. Необходимо различать имя файла index.htm, т.е. имя под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы Компьютер, которая высвечивается в верхней строке окна браузера и, в первую очередь анализируется поисковыми системами. Имя Web-страниць должно в максимальной степени соответствовать ее содержанию. В окне приложения Блокнот ввести HTML код Web-страницы. Сохранить файл под именем index.htm в папку сайта. Загрузить этот файл в окно браузера для просмотра. Компьютер Все о компьютере
2 Задание 2. Форматирование текста. Пока страница выглядит не слишком привлекательно. Мелкий шрифт, черный текст на белом фоне почти не обращают на себя внимание. С помощью HTML тэгов можно задать различные параметры форматирования текста. Размер шрифта для имеющихся в тексте заголовков задается тэгами от (самый крупный) до (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом: Все о компьютере Некоторые тэги имеют атрибуты, которые могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако заголовок принято размещать по центру. Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью ALIGN="right", а по центру ALIGN="center". Bce о компьютере С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE размер шрифта (например, SIZE=4), атрибут COLOR цвет шрифта (например, COLOR="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т.д.), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB формат "RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие интенсивность зеленого (green) и две последние интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная FF. Легко догадаться, что синему цвету будет соответствовать значение "#OOOOFF". Таким образом, задать синий цвет заголовка можно с помощью тэга FONT С атрибутом COLOR: FONT COLOR="blue"> Bce о компьютере Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга . Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания. На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
Таким образом, если вставить в страницу определенную последовательность тэгов, то мы получим Web-страницу, содержащую отцентрированный заголовок синего цвета, выводимый крупным шрифтом и отделенный горизонтальной линией от остального текста. В окне приложения Блокнот в контейнер вставьте последовательность тэгов и просмотрите результат в браузере. 2
3 3 Bce о компьютере
Ha этом сайта вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Tepминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. Задание 3. Вставка изображений. На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трех форматов GIF, JPG и BMP. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из выше указанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office. На титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт (в нашем случае компьютера). Многочисленные фотографии компьютеров можно найти, например, на сайтах производителей и продавцов компьютерной техники. Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Webстраницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
Если файл находится на удаленном сервере в Интернете, то должен быть указан URLадрес этого файла. Например:
Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN тэга
, который может принимать пять различных значений: TOP (верх), MIDDLE (середина), BOTTON (низ), LEFT (слева) и RIGHT (справа). Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
4
В окне приложения Блокнот в контейнер вставьте перед абзацами текста тэг вставки изображения, просмотрите результат в браузере. 4 Задание 4. Гиперссылки на Web-страницах Первая титульная страница должна обеспечивать посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта. Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо, прежде всего, создать заготовки Web-страниц. Такие пустые страницы должны иметь заголовок, но могут пока не иметь содержания. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта. Каждая страница будет содержать следующий HTML-код: Заголовок страницы Создать пустые страницы Программы, Словарь, Комплектующие и Анкета. Сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в каталоге сайта. Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.
5 Адресная часть гиперссылки представляет собой URL-адрес документа, на который указывает ссылка. URL-адрес может быть абсолютным и относительным. Абсолютный URLадрес документа полностью определяет компьютер, каталог и файл, в котором располагается документ. Абсолютный адрес документа, находящегося на локальном компьютере, будет включать в себя путь к файлу и имя файла, например: С:/Web-сайт/filename.htm Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например: Относительный URL-адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web-страницы связывать относительными ссылками. Это позволить не изменять адресную часть ссылок при перемещении Web-сайта в другой каталог локального компьютера или при его публикации в Интернете. Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки. Прежде всего, необходимо разместить на титульной странице тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход. Разместим гиперссылки под введенным текстом, в новом абзаце, в одну строку, разделенные несколькими пробелами. Такое размещение гиперссылок часто называют панелью навигации. Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ): [Программы] [Словарь] [Комплектующие] [Анкета] Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки с атрибутом HREF, значением которого является URL адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки: Указатель гиперссылки Вставьте в титульную страницу код, создающий панель навигации:
[Программы] [Словарь] [Комплектующие] [Анкета]
Панель навигации на титульной странице создана, теперь активизация текста гиперссылок будет приводить к переходу на другие страницы сайта. 5
6 Задание 5. Списки на Web-страницах Довольно часто при размещении текста на Web-страницах удобно использовать списки, в различных вариантах: нумерованные списки, когда элементы списка идентифицируются с помощью чисел; маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров); списки определений, позволяющие составлять перечни определений в так называемой словарной форме. Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного. На странице Программы разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка. Сначала создадим основной нумерованный список основных категорий программного обеспечения. Список располагается внутри контейнера , а каждый элемент списка определяется тэгом
- , а каждый элемент списка определяется также тэгом
- . С помощью атрибута TYPE тэга
- можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность). Добавьте HTML-код, задающий вложенный список для элемента
- Прикладные программы:
- СИСТЕМНЫЕ ПРОГРАММЫ
- ПРИКЛАДНЫЕ ПРОГРАММЫ
- ТЕКСТОВЫЕ РЕДАКТОРЫ;
- ГРАФИЧЕСКИЕ РЕДАКТОРЫ;
- ЭЛЕКТРОННЫЕ ТАБЛИЦЫ;
- СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.
- СИСТЕМЫ ПРОГРАММИРОВАНИЯ 6 Cтраницу словарь мы представим в виде словаря компьютерных терминов. Для этого используем контейнер списка определений . Внутри него текст оформляется в виде термина, который выделяется непарным тегом и определения, которое следует за тегом . Откройте в Блокноте файл glossary.htm, введите заголовок Компьютерные термины и добавьте следующий HTML-код, задающий список определений:
7 Процессор Центральное устройство компьютера, производящее обработку информации в двоичном коде Оперативная память Устройство, в котором хранятся программы и данные 7
Руководство по использованию визуального редактора информационного наполнения сайта http://pzi.ru Пятигорского завода Импульс. Пятигорск 2011 Содержание 1 Интерфейс редактора... 3 2 Изменение размера редактора...4
Оглавление Введение...1 1. Цель работы...1 2. Основные теоретические сведения...1 Структура HTML-документа...1 Элемент BODY...2 Начертание текста...2 Маркированные списки...3 Нумерованные списки...3 Форматирование
Модуль 1 «Основы компьютерной геометрии» Лекция 2 «Введение в HTML, HTML5 и CSS» к.ф.-м.н., доц. каф. ФН-11, Захаров Андрей Алексеевич, ауд.:930а(улк) моб.: 8-910-461-70-04, email: [email protected] МГТУ
Краткое руководство по использованию Cистемы редактирования сайта Оглавление 1. Введение... 3 2. Знакомство с основными элементами системы редактирования... 4 3. Панель управления основными командами...
6. Графика Изображения Поддержка изображений в HTML - путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. Браузер
Лабораторная работа 5 Оформление текста в виде списков и колонок Создание списков В текстовых документах перечисления различного типа оформляются в виде списков. Существуют списки различных типов: нумерованные
ПРАКТИЧЕСКАЯ РАБОТА 1 Знакомство со структурой HTML-документа. Применение тегов логического и физического форматирования. Списки Цель: научить применять теги логического и физического форматирования при
ФГКОУ «Нахимовское военно-морское училище МО РФ» Инструкция по добавлению материалов на сайт Санкт-Петербург, 2015 Содержание 1. Вход в консоль CMS (авторизация на сайте) 4 2. Добавление записи 4 3. Ввод
Требования к оформлению материалов для системы дистанционного образования Санкт- Петербургского центра подготовки спасателей 3 Оглавление 1.Структура материалов 2. Оформление текста курса в документе Word...
Технология создания Web страниц электронного ресурса в Microsoft Office FrontPage 2003 Создание нового Web-узла Создайте папку, в которой предполагаете разместить разрабатываемые ЭУММ. Запустите программу
1 ДИНАМИЧЕСКОЕ WEB-ПРИЛОЖЕНИЕ 1. О языке HTML и технологии ASP.NET В этой работе Вы создадите динамическое Web-приложение. Ваше приложение должно быть установлено на сервере. У пользователей-клиентов,
1 WORD позволяет легко форматировать символы и абзацы. Встроенные программы проверки орфографии и грамматики проверяют документ не только после его завершения, но и в процессе создания. Существующие средства
1. Пояснительная записка. Рабочая программа по информатике и ИКТ составлена на основе: стандарта основного общего образования по информатике и ИКТ (приложение из приказа Министерства образования Российской
Федеральное государственное образовательное учреждение высшего профессионального образования "Южный федеральный университет" Островская И.В. ТЕСТОВЫЕ ЗАДАНИЯ НА ТЕМУ: ОПЕРАЦИОННАЯ СИСТЕМА WINDOWS Методические
Текстовый редактор Word 2007 ИНТЕРФЕЙС ПРОГРАММЫ Текстовый редактор (процессор) это универсальная прикладная программа, предназначенная для создания и обработки текстов с помощью компьютера, позволяющая
Создание электронной презентации в Microsoft PowerPoint 2003 Тема 1. Создание и сохранение презентации Задание: запустите программу Microsoft PowerPoint. Рассмотрите интерфейс и режимы работы. Создайте
Ставропольский государственный аграрный университет Кафедра информационных систем и технологий ЗАДАНИЕ И МЕТОДИЧЕСКИЕ УКАЗАНИЯ НА ПРАКТИЧЕСКОЕ ЗАНЯТИЕ по учебной дисциплине «Архитектура информационных
Глава 1 HTML и CSS Структура языка HTML Структура HTML-документа Ввод и оформление текста Ссылки Форматирование текста Работа с таблицами Изображения Формы Общие принципы CSS Форматирование текста средствами
Текстовый процессор Word Word одна из самых совершенных программ в классе текстовых процессоров, которая предусматривает выполнение сотен операций над текстовой и графической информацией Word дает возможность
SiteBuilder. Конструктор сайтов Руководство пользователя Дата: 15.09.2011 г. Версия: 1.0 [email protected] www.activecloud.com Комментарии и сообщения об ошибках, пожалуйста, направляйте на [email protected].
2 Текстовый процессор OpenOffice.org Writer Текстовый процессор (ТП) OpenOffice.org Writer входит в пакет программ Текстовый процессор Writer, предназначен для создания, редактирования и форматирования
EGroupWare. Новости. Общие сведения и назначение Новости служат для создания кратких тематических сообщений без рассылки их по электронной почте. Новости можно настроить для отображения на основном экране
ПУБЛИКАЦИЯ СВОЕЙ ЗАМЕТКИ НА САЙТЕ ШКОЛЫ «АФИНЫ» Алексей Греков Частная школа «Афины», Киев, 2010 1. СОЗДАЕМ НОВУЮ ЗАМЕТКУ...2 2. ВСТАВЛЯЕМ КАРТИНКИ И ДРУГИЕ ГРАФИЧЕСКИЕ ОБЪЕКТЫ...3 3. СОХРАНЯЕМ ЗАМЕТКУ...4
Руководство по заполнению и просмотру Личного кабинета участника Содержание 1. Заполнение «Личного кабинета»... 2 2. Описание формы заполнения... 4 3. Работа в редакторе... 6 1. Заполнение «Личного кабинета»
Глава 7. Графика Поддержка изображений в HTML - путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. 7.1. Форматы
Язык программирования HTML 1. Вызовите текстовый редактор БЛOКНОТ, который находится в группе "Стандартные". Наберите следующий ниже текст и сохраните под именем web1.html в папку html_text, которую предварительно
Система управления сайтом Конструктор сайтов Вместе с доменным именем в зоне.рф вы получаете удобную и простую в управлении административную панель, позволяющую создавать и редактировать контент, изменять
ТОВАРИЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ «BBS-IT» ИНФОРМАЦИОННО-ВЫЧИСЛИТЕЛЬНЫЙ ЦЕНТР Инструкция по работе с кабинетом пользователя диалоговой площадки «Народный контроль» Акмолинской области Руководство
Работа с редактором документов Word Краткие теоретические сведения Текстовый процессор (редактор) Word это приложение Windows, предназначенное для создания, просмотра, модификации и печати текстовых документов.
Проектирование блога на платформе blogger.com Краснодар - 2015 2 Проектирование блога на платформе blogger.com Оглавление Введение 3 Создание блога... 4 1.1 Создание аккаунта на Google.ru... 4 1.2 Создание
Описание практической работы 4 ОФОРМЛЕНИЕ САЙТА «ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ, ТОВАРЫ И УСЛУГИ» С ПОМОЩЬЮ КАСКАДНЫХ СТИЛЕЙ (CSS) Время выполнения 4 часа. Цель работы: изучить принципы создания и использования
Лабораторная работа 1 Средство подготовки презентаций Microsoft Powerpoint. Быстрое создание презентации с помощью мастера автосодержания Цель работы: научиться создавать документы (слайды) для электронной
Лекция 2 Редактирование сайта 1 Добавление изображений на сайт... 1 Создание новых страниц... 4 Размещение страниц... 10 Добавление кнопок с пунктами меню... 12 Добавление изображений на сайт В режиме
Microsoft Office Word является популярнейшей прикладной программой для создания и обработки текстовых документов, которая обладает множеством возможностей настольной издательской системы по работе с текстами
Система электронных публикаций Программа просмотра Руководство пользователя Издательская фирма "Сентябрь", Москва, 2006-2008 Эта версия Руководства соответствует возможностям и функционалу Системы электронных
А.Н. Маслобоев Базовые возможности языка HTML по разработке и оформлению Web-страниц Учебно-методическое пособие Санкт-Петербург 2016 МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ
РАБОТА 03 Основы HTML: работа с текстом Изучаемые вопросы 1. Передача данных и адресация в Интернете 2. Дескрипторы, использование пробелов и пустых строк, структура документа 3. Абзацы и заголовки 4.
ТЕХНОЛОГИЯ ПОДГОТОВКИ ТЕКСТОВЫХ ДОКУМЕНТОВ Текстовый процессор MS WORD MS WORD Microsoft Word основа любого офиса и, пожалуй, самая нужная и популярная программа во всем Microsoft Office. МНОГОФУНКЦИОННАЛЬНЫЙ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ КИНО И ТЕЛЕВИДЕНИЯ» Кафедра математики и информатики
UNIVERSITÉ NATIONALE DE RECHERCHE ÉCOLE SUPÉRIEURE D ÉCONOMIE DÉPARTEMENT DE LANGUES ÉTRANGÈRES CHAIRE DE LANGUE FRANÇAISE XI COLLOQUE INTERNATIONAL D ÉTUDIANTS ET DE JEUNES CHERCHEURS «LA FRANCE ET LA
ГБПОУ РА «Адыгейский педагогический колледж им.х. Андрухаева» Д.Х. Уджуху Создание сайта в Microsoft SharePoint Designer Лабораторные и практические работы Майкоп, 2015 1 Печатается по решению организационно-методической
Краткое руководство для администрирования сайта Работа с сайтом начинается с входа пользователя в административную часть сайта под своим логином и паролем. Пользовательская диалоговая страница доступна
Практическое занятие 12 Работа с текстовым редактором, вставка объектов по учебной дисциплине «Информатика и ИКТ» Тема: Понятие об информационных системах и автоматизации информационных процессов. Цель:
Плагины Форвард Тx SLNewsLine Программа для формирования в автоматическом режиме заданий для бегущей строки Дата выпуска: 18 ноября 2009 г. Краткое руководство СофтЛаб-НСК Содержание Введение... Общий
Введение Каскадные таблицы стилей, или Cascading Style Sheets (CSS), обеспечивают творческую свободу в разметке и дизайне веб-страниц. Пользуясь CSS, вы сможете украсить текст страниц привлекательными
Глава 10 Введение в CSS Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб-сайтов,
ООО «РусТендер Софт» Документация Стр. 1 из 10 Система автоматизации процессов торгово- закупочной деятельности предприятия Конструктор документов Описание Версия описания: 1.0 Последнее обновление: 28.09.2014
Работа с табличным процессором Microsoft Excel Краткие теоретические сведения Приложение Windows Excel позволяет формировать и выводить на печать документы, представленные в табличном виде, выполнять расчеты
Лабораторная работа 1 Оформление официального документа. Цель работы: данная работа поможет вам приобрести элементарные навыки, связанные с вводом и редактированием текста. В процессе работы вы подготовите
Ñîäåðæàíèå Введение 13 Об этой книге 13 Глупые предположения 14 Компакт-диск 14 Обозначения, используемые в книге 15 Структура книги 16 Часть I. Создайте Web-страницу сегодня 16 Часть II. Создание страниц
Понятие абзаца Абзацем называют фрагмент текста от одного нажатия клавиши Enter до следующего. Абзацем также является фрагмент от начала документа до первого нажатия клавиши Enter. В ячейках таблицы абзацем
Тема: Практическая работа 14-2 Создание базы данных, состоящей из одной таблицы. Ввод данных в таблицу. Использование форм. Цель: Научиться создавать базы данных в MS Acces (создавать таблицы и формы,
Загрузка файлов на сайт По умолчанию все страницы на сайте создаются шаблоном веб-страница. В этом случае в нижней части страницы появляется строка Добавить файлы, с помощью которой можно загрузить на
1. ЦЕЛИ И ЗАДАЧИ ОСВОЕНИЯ ДИСЦИПЛИНЫ 1.1. Цели освоения дисциплины: приобретение знаний и представлений о смысле, целях и задачах гипертекстовых документов 1.. Задачи: дать студентам знания по теории гипертекстовых
Введение Дистанционное обучение современная форма организации образовательного процесса с применением дистанционных образовательных технологий. Его развитие в последнее время обусловлено ростом числа пользователей
Мастер-класс «Создание и оформление презентаций в PowerPoint» Стефанова Л. М., методист ГОУ РК «РЦО», учитель русского языка и литературы г. Сыктывкара Республики Коми 1. С чего начать составление презентации?
