Презентация по информатике HTML - первые шаги - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Презентация по информатике HTML - первые шаги, слайд №1

Презентация по информатике HTML - первые шаги, слайд №2

Презентация по информатике HTML - первые шаги, слайд №3

Презентация по информатике HTML - первые шаги, слайд №4

Презентация по информатике HTML - первые шаги, слайд №5

Презентация по информатике HTML - первые шаги, слайд №6

Презентация по информатике HTML - первые шаги, слайд №7

Презентация по информатике HTML - первые шаги, слайд №8

Презентация по информатике HTML - первые шаги, слайд №9

Презентация по информатике HTML - первые шаги, слайд №10

Презентация по информатике HTML - первые шаги, слайд №11

Презентация по информатике HTML - первые шаги, слайд №12

Презентация по информатике HTML - первые шаги, слайд №13

Презентация по информатике HTML - первые шаги, слайд №14

Презентация по информатике HTML - первые шаги, слайд №15

Презентация по информатике HTML - первые шаги, слайд №16

Презентация по информатике HTML - первые шаги, слайд №17

Презентация по информатике HTML - первые шаги, слайд №18

Презентация по информатике HTML - первые шаги, слайд №19

Презентация по информатике HTML - первые шаги, слайд №20

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Презентация по информатике HTML - первые шаги. Доклад-сообщение содержит 20 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

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

Слайд 3

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

Описание слайда:

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

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

Шаг 6 Выделим фразу "Здравствуйте, это моя первая страница», для этого можно использовать заголовки. Заголовок выделяется жирным текстом, это одно из его свойств: текст текст текст Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! :) Эта страница посвящена описанию и разъяснению основ языка гипертекстовой разметки 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, можно увидеть надпись, для чего она (картинка) предназначалась. (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) мы ссылаемся на сайт где лежит нужный нам документ. Есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать в открывающем тэге : 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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

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