Разделы презентаций


HTML — первые шаги текст

Содержание

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

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

Слайд 1HTML - первые шаги

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

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

Слайд 2Структура


заголовок,

служебная часть

содержание
веб-документа



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

Слайд 3Шаг 1
Создаем папку D:\первые шаги\
Откроем Блокнот (notepad) и

скопируем туда следующий текст:


Мой первый шаг


Здравствуйте, это моя первая

страница.


Добро пожаловать! :)


Сохраним этот документ, присвоив ему имя index.html D:\первые шаги\index.html

Шаг 1Создаем папку  D:\первые шаги\ Откроем Блокнот (notepad) и скопируем туда следующий текст:						Мой первый шаг 						Здравствуйте,

Слайд 4Шаг 2
Окрасим слова Добро Пожаловать в красный цвет. Цвет можно

прописать по-английски или задать в шестнадцатеричной системе счисления: Добро пожаловать!

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

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

Слайд 5Шаг 3
Изменим цвет фона документа. Для этого используем параметр bgcolor

. Цвет фона устанавливается в тэге :

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

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

Слайд 6Шаг 4
Поговорим о тексте. Абзац текста вводится тэгом: Мы

можем:
центрировать текст: текст
выровнять текст по левому краю:

align="left">текст


выровнять текст по правому краю документа:

текст


выровнять текст по ширине:

текст


Мой первый шаг

Здравствуйте, это моя первая страница.
Добро пожаловать! :)


Замечание: можно разместить текст по центру, используя тэг
текст


Шаг 4	Поговорим о тексте. Абзац текста вводится тэгом:    Мы можем:центрировать текст: текст выровнять текст

Слайд 7Шаг 5
Используем атрибут текст
Мой первый шаг

bgcolor="#000000"> Здравствуйте, это моя первая страница.
Добро пожаловать! :)

align="justify"> Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета.


Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.




Шаг 5Используем атрибут текст  	  Мой первый шаг     Здравствуйте, это моя

Слайд 8Шаг 6
Выделим фразу "Здравствуйте, это моя первая страница», для этого

можно использовать заголовки. Заголовок выделяется жирным текстом, это одно из

его свойств:

текст


текст


текст



Мой первый шаг

Здравствуйте, это моя первая страница.


Добро пожаловать! :)

Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета.


Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.


Шаг 6	Выделим фразу

Слайд 9Шаг 7
Для выделения большого фрагмента текста, или только одного слова

можно использовать атрибуты тэга : текст

текст текст текст Мой первый шаг

Здравствуйте, это моя первая страница.


Добро пожаловать! :)

Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML , который в настоящее время является основой разработки электронных документов для Интернета.


Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.



Замечание: в нашем примере выделено слово «HTML».
Шаг 7	Для выделения большого фрагмента текста, или только одного слова можно использовать атрибуты тэга :

Слайд 10Шаг 8
Используем курсив, подчеркнутый текст, полужирный текст и фиксированный

текст: Полужирный текст Наклонный текст (курсив) Подчеркнутый

текст Мой первый шаг

Здравствуйте, это моя первая страница.


Добро пожаловать! :)

Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML , который в настоящее время является основой разработки электронных документов для Интернета.


Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.





Фиксированный шрифт - это шрифт с символами одинаковой ширины, тэг для него следующий: fixed - фиксированный шрифт
 текст (куча пробелов) текст 


Запомните, к одному фрагменту текста может применяться сразу несколько тэгов: текст
Шаг 8 Используем курсив, подчеркнутый текст, полужирный текст и фиксированный текст:    Полужирный текст

Слайд 11Шаг 9
Вставляем картинки в документ: Вместо my.jpg мы

можем подставить имя любой картинки с расширением jpg, gif, png

и др. Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке): картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ картинка лежит в поддиректории картинка лежит на другом сайте, путь прописывается полностью
Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше:) Мой первый шаг

Здравствуйте, это моя первая страница.


Добро пожаловать! :)

Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML , который в настоящее время является основой разработки электронных документов для Интернета.



Многие называют HTML языком программирования. Это не совсем верно, т.к. в традиционном понимании HTML лишь указывает программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Основная функция браузера заключается в интерпретации кода HTML и выводе визуального результата на экран монитора пользователя.



Шаг 9Вставляем картинки в документ:      Вместо my.jpg мы можем подставить имя любой

Слайд 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 пикселям (точкам).
Шаг 10Для расположения картинок относительно текста используем параметр align :      Это означает,

Слайд 13 (3) - параметр alt - краткое описание картинки. Если навести

курсором мыши на рисунок, и так подержать его (курсор) несколько

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

Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке.
Введем следующие параметры для нашей картинки:
моя фотография
Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".

Картинку можно сделать фоном документа. Это прописывается в открывающем тэге :
Параметры bgcolor и background можно прописать вместе на случай если фоновая картинка не загрузится.
(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так

Слайд 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 - цвет уже посещенной ссылки.

В нашем примере цвета одинаковые, но они могут быть разными, если цвет ссылки такой же как цвет текста документа (ссылка выделяется чертой).
Шаг 11Ссылкой на другие документы может быть текст (фраза, слово), а может быть и картинка. В этой

Слайд 15Шаг 12
Ссылкой может быть картинка. Принцип ссылки тот же, что

и в случае с текстом, только между тэгами вставляется не

текст, а картинка:
моя фотография Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png:
Мой первый шаг

Здравствуйте, это моя первая страница.


Добро пожаловать! :)

моя фотография Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу.

А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)

На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично.

Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:)


Замечание: вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"
моя фотография

Шаг 12Ссылкой может быть картинка. Принцип ссылки тот же, что и в случае с текстом, только между

Слайд 16Шаг 13
Если вы уже достаточно попутешествовали по интернету, то вы

должны были заметить, что ссылка может быть не только на

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

Слайд 17Шаг 14

Шаг 14

Слайд 18Шаг 15
Линия задается тэгом и не требует закрывающего тэга:

У линии есть много разных параметров:
(1) (center или

left) (2)
(ширина линии в процентах/пикселях) (3)
(толщина линии) (4)
(отмена объемности) (5)
(цвет линии, только в IE)

Эти параметры могут употребляться одновременно.




Шаг 15Линия задается тэгом и не требует закрывающего тэга: У линии есть много разных параметров: (1) (center

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


«Пригороды Санкт-Петербурга»,
«Музеи Санкт-Петербурга».


Примечание: Создать 5 и более страниц по

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

Слайд 20Желаю удачи!

Желаю удачи!

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика