HTML — первые шаги

Главная Информатика

Скачать презентацию (0.4 мб)

Слайды и текст этой презентации

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

Слайд №2
	Структура заголовок,<br /> служебная часть содержание веб-документа
Слайд №3
	Шаг 1 Создаем папку D:первые шаги Откроем Блокнот (notepad) и скопируем туда следующий текст: Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Сохраним этот документ, присвоив ему имя index.htmlD:первые шагиindex.html
Слайд №4
	Шаг 2 Окрасим слова Добро Пожаловать в красный цвет. Цвет можно прописать по-английски или задать в шестнадцатеричной системе счисления:Добро пожаловать! 🙂 Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Кроме этого можно задать цвет основного текста с помощью параметра text: Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали (если цвет в не задавать, то по умолчанию он будет черным).
Слайд №5
	Шаг 3 Изменим цвет фона документа. Для этого используем параметр bgcolor . Цвет фона устанавливается в тэге : Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Обратите внимание: мы одновременно можем прописать в теге цвет текста в документе и цвет фона.
Слайд №6
	Шаг 4 Поговорим о тексте. Абзац текста вводится тэгом: Мы можем: центрировать текст: текст выровнять текст по левому краю: текст выровнять текст по правому краю документа: текст выровнять текст по ширине: текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Замечание: можно разместить текст по центру, используя тэг текст
Слайд №7
	Шаг 5 Используем атрибут текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.
Слайд №8
	Шаг 6 Выделим фразу «Здравствуйте, это моя первая страница», для этого можно использовать заголовки. Заголовок выделяется жирным текстом, это одно из его свойств: текст текст текст Мой первый шаг Содержание 1 Здравствуйте, это моя первая страница. 2 Здравствуйте, это моя первая страница. 3 Здравствуйте, это моя первая страница. 4 Здравствуйте, это моя первая страница. Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.
Слайд №9
	Шаг 7 Для выделения большого фрагмента текста, или только одного слова можно использовать атрибуты тэга : текст текст текст текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML , который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя. Замечание: в нашем примере выделено слово «HTML».
Слайд №10
	Шаг 8 Используем курсив, подчеркнутый текст, полужирный текст и фиксированный текст: Полужирный текст Наклонный текст (курсив) Подчеркнутый текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML , который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя. Фиксированный шрифт — это шрифт с символами одинаковой ширины, тэг для него следующий: `fixed - фиксированный шрифт` текст (куча пробелов) текст Запомните, к одному фрагменту текста может применяться сразу несколько тэгов: `текст`
Слайд №11
	Шаг 9 Вставляем картинки в документ: Вместо my.jpg мы можем подставить имя любой картинки с расширением jpg, gif, png и др. Самое главное понять, что все расположенное между кавычками — ссылка (путь к картинке): картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ картинка лежит в поддиректории картинка лежит на другом сайте, путь прописывается полностью Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше:) Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML , который в настоящее время является основой разработки электронных документов для Интернета. Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.
Слайд №12
	Шаг 10 Для расположения картинок относительно текста используем параметр align : Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right: Но это не все: текст может располагаться внизу картинки (это по умолчанию) — (1), посередине — (2), и вверху — (3): (1) — (2) — (3) — Кроме параметра align существует еще несколько параметров: (1) — (2) — (3) — (4) — (5) — (6) — Теперь последуют объяснения по пунктам. (1) — параметр vspace — задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel — минимальная единица изображения, точка. Например разрешение экрана 800х600 — 800 на 600 точек). В нашем примере расстояние равно 10 пикселям. (2) — параметр hspace — тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
Слайд №13
	(3) — параметр alt — краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза — «моя фотография». Если параметр alt не задавать, описания не будет. Но говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась. (4) — параметр width — ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире). (5) — параметр height — высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. (6) — параметр border — рамка вокруг самой картинки (в пикселях). Можно не задавать. Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следующие параметры для нашей картинки: Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали — 30 пикселей, по вертикали — 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись — «моя фотография». Картинку можно сделать фоном документа. Это прописывается в открывающем тэге : Параметры bgcolor и background можно прописать вместе на случай если фоновая картинка не загрузится.
Слайд №14
	Шаг 11 Ссылкой на другие документы может быть текст (фраза, слово), а может быть и картинка. В этой части мы рассмотрим только текстовую ссылку. Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами. Пусть prf.html — документ с вашими фотографиями. Сделаем фразу «посмотреть мои фотографии» сделать ссылкой на prf.html: посмотреть мои фотографии Тэг делает ссылкой заключенную в него картинку или фразу (текст). (1) — мои фотографии(2) — мои фотографии(3) — мои фотографии В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html. В случае (2) документ лежит в поддиректории /photos. В случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ. Есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать в открывающем тэге : link — цвет ссылки, alink — цвет активной ссылки (нажатой), vlink — цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, если цвет ссылки такой же как цвет текста документа (ссылка выделяется чертой).
Слайд №15
	Шаг 12 Ссылкой может быть картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка: Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png: Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! 🙂 Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? 🙂 На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Замечание: вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border=»0″
Слайд №16
	Шаг 13 Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением .html, но и на многие другие (.doc, .mp3, .jpg, .gif, .txt, .zip, .exe и т.д:) : скачать песню Если адрес указан таким способом: музыкальный сайт То это означает, что в указанном каталоге есть файл index.html, который загрузится по умолчанию. Ссылкой может быть маленькая картинка. Если нажать на неё, то загружается большая в том же или в новом окне. Выполняем следующее: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg): В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга есть параметр target: Итак, target=»_blank» — указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне браузера.
Слайд №17
	Шаг 14 Стили маркеров списка Стили маркеров списка Стили маркеров списка Тип списка Код HTML Пример Маркированный список с маркерами в виде круга … Чебурашка Крокодил Гена Шапокляк Маркированный список с маркерами в виде окружности … Чебурашка Крокодил Гена Шапокляк Маркированный список с квадратными маркерами … Чебурашка Крокодил Гена Шапокляк Типы нумерованного списка Типы нумерованного списка Типы нумерованного списка Тип списка Код HTML Пример Нумерованный список с арабскими цифрами … 1. Чебурашка2. Крокодил Гена3. Шапокляк Нумерованный список с прописными буквами латинского алфавита … A. ЧебурашкаB. Крокодил ГенаC. Шапокляк Нумерованный список со строчными буквами латинского алфавита … a. Чебурашкаb. Крокодил Генаc. Шапокляк Нумерованный список с римскими цифрами в верхнем регистре … I. ЧебурашкаII. Крокодил ГенаIII. Шапокляк Нумерованный список с римскими цифрами в нижнем регистре … i. Чебурашкаii. Крокодил Генаiii. Шапокляк
Слайд №18
	Шаг 15 Линия задается тэгом и не требует закрывающего тэга: У линии есть много разных параметров: (1) (center или left)(2) (ширина линии в процентах/пикселях)(3) (толщина линии)(4) (отмена объемности)(5) (цвет линии, только в IE) Эти параметры могут употребляться одновременно.
Слайд №19
	Самостоятельная работа: Темы: «Красивейшие мосты мира», «Личности эпохи», «Необычные музеи», «Музыкальные театры», «Пригороды Санкт-Петербурга», «Музеи Санкт-Петербурга». Примечание: Создать 5 и более страниц по выбранной теме с использованием различных элементов и ссылками для перехода с одной страницы на другую.
Слайд №20
	Желаю удачи!