HTML - первые шаги Преподаватель ГОУ СПО ЯО «Ярославское училище культуры» Романова С.А.

Структура заголовок, служебная часть содержание веб-документа

Шаг 1 Создаем папку D:\первые шаги\ Откроем Блокнот (notepad) и скопируем туда следующий текст: Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Сохраним этот документ, присвоив ему имя index.html D:\первые шаги\index.html

Шаг 2 Окрасим слова Добро Пожаловать в красный цвет. Цвет можно прописать по-английски или задать в шестнадцатеричной системе счисления: Добро пожаловать! :) Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Кроме этого можно задать цвет основного текста с помощью параметра text: Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали (если цвет в не задавать, то по умолчанию он будет черным).

Шаг 3 Изменим цвет фона документа. Для этого используем параметр bgcolor. Цвет фона устанавливается в тэге : Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Обратите внимание: мы одновременно можем прописать в теге цвет текста в документе и цвет фона.

Шаг 4 Поговорим о тексте. Абзац текста вводится тэгом: Мы можем: центрировать текст: текст выровнять текст по левому краю: текст выровнять текст по правому краю документа: текст выровнять текст по ширине: текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Замечание: можно разместить текст по центру, используя тэг текст

Шаг 5 Используем атрибут текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.

Шаг 6 Выделим фразу "Здравствуйте, это моя первая страница», для этого можно использовать заголовки. Заголовок выделяется жирным текстом, это одно из его свойств: текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.

Шаг 7 Для выделения большого фрагмента текста, или только одного слова можно использовать атрибуты тэга : текст текст текст текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя. Замечание: в нашем примере выделено слово «HTML».

Шаг 8 Используем курсив, подчеркнутый текст, полужирный текст и фиксированный текст: Полужирный текст Наклонный текст (курсив) Подчеркнутый текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя. Фиксированный шрифт - это шрифт с символами одинаковой ширины, тэг для него следующий: fixed - фиксированный шрифт текст (куча пробелов) текст Запомните, к одному фрагменту текста может применяться сразу несколько тэгов: текст

Шаг 9 Вставляем картинки в документ: Вместо my.jpg мы можем подставить имя любой картинки с расширением jpg, gif, png и др. Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке): картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ картинка лежит в поддиректории картинка лежит на другом сайте, путь прописывается полностью Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше:) Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.

Шаг 10 Для расположения картинок относительно текста используем параметр align : Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right: Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3): (1) - (2) - (3) - Кроме параметра align существует еще несколько параметров: (1) - (2) - (3) - (4) - (5) - (6) - Теперь последуют объяснения по пунктам. (1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800 х на 600 точек). В нашем примере расстояние равно 10 пикселям. (2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась. (4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире). (5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. (6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следующие параметры для нашей картинки: Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография". Картинку можно сделать фоном документа. Это прописывается в открывающем тэге : Параметры bgcolor и background можно прописать вместе на случай если фоновая картинка не загрузится.

Шаг 11 Ссылкой на другие документы может быть текст (фраза, слово), а может быть и картинка. В этой части мы рассмотрим только текстовую ссылку. Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами. Пусть prf.html - документ с вашими фотографиями. Сделаем фразу "посмотреть мои фотографии" сделать ссылкой на prf.html: посмотреть мои фотографии Тэг делает ссылкой заключенную в него картинку или фразу (текст). (1) - мои фотографии (2) - мои фотографии (3) - мои фотографии В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html. В случае (2) документ лежит в поддиректории /photos. В случае (3) мы ссылаемся на сайт где лежит нужный нам документ. Есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать в открывающем тэге : link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, если цвет ссылки такой же как цвет текста документа (ссылка выделяется чертой).

Шаг 12 Ссылкой может быть картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка: Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png: Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :) На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Замечание: вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"

Шаг 13 Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) : скачать песню Если адрес указан таким способом: музыкальный сайт То это означает, что в указанном каталоге есть файл index.html, который загрузится по умолчанию. Ссылкой может быть маленькая картинка. Если нажать на неё, то загружается большая в том же или в новом окне. Выполняем следующее: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg): В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга есть параметр target: Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне браузера.

Шаг 14 Стили маркеров списка Тип списка Код HTMLПример Маркированный список с маркерами в виде круга... Чебурашка Крокодил Гена Шапокляк Маркированный список с маркерами в виде окружности... o Чебурашка o Крокодил Гена o Шапокляк Маркированный список с квадратными маркерами... Чебурашка Крокодил Гена Шапокляк Типы нумерованного списка Тип списка Код HTMLПример Нумерованный список с арабскими цифрами Чебурашка 2. Крокодил Гена 3. Шапокляк Нумерованный список с прописными буквами латинского алфавита... A. Чебурашка B. Крокодил Гена C. Шапокляк Нумерованный список со строчными буквами латинского алфавита... a. Чебурашка b. Крокодил Гена c. Шапокляк Нумерованный список с римскими цифрами в верхнем регистре... I. Чебурашка II. Крокодил Гена III. Шапокляк Нумерованный список с римскими цифрами в нижнем регистре... i. Чебурашка ii. Крокодил Гена iii. Шапокляк

Шаг 15 Линия задается тэгом и не требует закрывающего тэга: У линии есть много разных параметров: (1) (center или left) (2) (ширина линии в процентах/пикселях) (3) (толщина линии) (4) (отмена объемности) (5) (цвет линии, только в IE) Эти параметры могут употребляться одновременно.

Самостоятельная работа: Темы: «Красивейшие мосты мира», «Личности эпохи», «Необычные музеи», «Музыкальные театры», «Пригороды Санкт-Петербурга», «Музеи Санкт-Петербурга». Примечание: Создать 5 и более страниц по выбранной теме с использованием различных элементов и ссылками для перехода с одной страницы на другую.

Желаю удачи!