SlideShare a Scribd company logo
1 of 20
Мастер-класс по информатике
27.03.2010
МОУ «СОШ №3 с углубленным изучением отдельных предметов»
ТЕХНОЛОГИЯ СОЗДАНИЯ WEB-
СТРАНИЦЫ
Язык HTML состоит из
специальных разметочных
указателей, иногда их называют
флаги разметки, а также
команды или коды языка
HTML, но чаще их называют теги
(от английского слова tag).
Тег – это инструкция браузеру,
указывающая способ отображения
текста.
Браузер – это
программа, служащая
для просмотра Web-
документов (страниц в
Internet).
Прописные и строчные буквы при
написании тегов не различаются.
<BODY>=<body><BODY>=<body>
<Body>=<BoDy><Body>=<BoDy>
Тег всегда начинается и
заканчивается угловыми скобками
“<>”.
СтруктураСтруктура HTMLHTML-файла-файла
<HTML>
<HEAD>
<TITLE>заголовок окна</TITLE>
</HEAD>
<BODY>
…
…
…
</BODY>
</HTML>
Заголовок
документа
Тело документа
П
Р
О
Г
Р
А
М
М
А
ЗаданиеЗадание
На рабочем столе в папке КОСМОС откройте файл
ГЕРОИ-КОСМОНАВТЫ.txt
ПРЕВРАТИМ ТЕКСТОВЫЙ
ДОКУМЕНТ В WEB-СТРАНИЦУ.
Сохраним
файл как web-
страницу,
добавив к имени
файла
расширение
html.
Удалим
текстовый файл
ГЕРОИ-
КОСМОНАВТЫ.
ОТКРОЙТЕ ПОЛУЧЕННЫЙ ФАЙЛ
ДОБАВИМ ТЕГ <BR> В ФАЙЛ
ФАЙЛ С ИЗМЕНЕНИЯМИ
СОХРАНЯЕМ И ЗАКРЫВАЕМ
Добавим на страницу цветной фон. Для этого
в теге <BODY> допишем атрибут bgcolor с
указанием цвета.
Например:
<BODY bgcolor=yellow>
или
<body BACKGROUND=star01a.jpg>
Сделаем текст стихотворения цветным. Для
этого в теге <BODY> допишем атрибут text с
указанием цвета.
Например: <BODY text=cyan>
Сделаем заголовок стихотворения и имя автора
крупнее. Для этого воспользуемся парным тегом
<BIG></BIG>.
Добавим на нашу Web-страницу картинку.
Нам понадобится непарный тег <IMG> с
атрибутом src, после которого указывается
полное название картинки.
Например: <IMG src=r7.gif>
Создадим на нашей Web-странице бегущую строку.
Движущийся элемент должен находиться внутри
парного тега <MARQUEE></MARQUEE>.
Например: <MARQUEE>
<BIG>ГЕРОИ-КОСМОНАВТЫ</BIG>.<BR>
</MARQUEE>
ЗаданиеЗадание Сделайте бегущей строкой
название стихотворения.
Представьте себя Web-дизайнерами
и создайте свои web-странички о
космосе.
Тексты стихотворений, фоны и
картинки вы можете найти в папке
КОСМОС.
ЗаданиеЗадание
к мастер классу

More Related Content

What's hot

основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
mmlllll
 
Web весна 2013 лекция 8
Web весна 2013 лекция 8Web весна 2013 лекция 8
Web весна 2013 лекция 8
Technopark
 
Язык разметки
Язык разметкиЯзык разметки
Язык разметки
elenash584
 

What's hot (10)

основы Html
основы Htmlосновы Html
основы Html
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страниц
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
 
HTML
HTMLHTML
HTML
 
Web весна 2013 лекция 8
Web весна 2013 лекция 8Web весна 2013 лекция 8
Web весна 2013 лекция 8
 
SharePoint и OpenXML
SharePoint и OpenXMLSharePoint и OpenXML
SharePoint и OpenXML
 
MS Word 2013 от новичка до профессионала. Занятие 3. Базовые возможности форм...
MS Word 2013 от новичка до профессионала. Занятие 3. Базовые возможности форм...MS Word 2013 от новичка до профессионала. Занятие 3. Базовые возможности форм...
MS Word 2013 от новичка до профессионала. Занятие 3. Базовые возможности форм...
 
нтмл код
нтмл   коднтмл   код
нтмл код
 
Язык разметки
Язык разметкиЯзык разметки
Язык разметки
 
занятие 2 презентация
занятие 2 презентациязанятие 2 презентация
занятие 2 презентация
 

Similar to к мастер классу

Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
itc73
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
itc73
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
kuzeenka31
 
лекция №10
лекция №10лекция №10
лекция №10
student_kai
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
 
Структура html документа
Структура html документаСтруктура html документа
Структура html документа
Andrey Radionov
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
mmmitioglo
 

Similar to к мастер классу (20)

HTML
HTMLHTML
HTML
 
55
5555
55
 
Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
 
мова Html
мова Htmlмова Html
мова Html
 
лекция №10
лекция №10лекция №10
лекция №10
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
 
Lection1
Lection1Lection1
Lection1
 
Структура html документа
Структура html документаСтруктура html документа
Структура html документа
 
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
 
Html
HtmlHtml
Html
 
Html, Css, Java Script
Html, Css, Java ScriptHtml, Css, Java Script
Html, Css, Java Script
 
Frontend
FrontendFrontend
Frontend
 
Основы HTML
Основы HTMLОсновы HTML
Основы HTML
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
 

More from Svetlana68

Нанотехнологии в медицине и фармации
Нанотехнологии в медицине и фармацииНанотехнологии в медицине и фармации
Нанотехнологии в медицине и фармации
Svetlana68
 
особенности структура проекта. Этапы проекта
особенности структура проекта. Этапы проектаособенности структура проекта. Этапы проекта
особенности структура проекта. Этапы проекта
Svetlana68
 
Исследовательская и проектная деятельность_зан1
Исследовательская и проектная деятельность_зан1Исследовательская и проектная деятельность_зан1
Исследовательская и проектная деятельность_зан1
Svetlana68
 

More from Svetlana68 (20)

Нанотехнологии в медицине и фармации
Нанотехнологии в медицине и фармацииНанотехнологии в медицине и фармации
Нанотехнологии в медицине и фармации
 
Логические элементы компьютера
Логические элементы компьютераЛогические элементы компьютера
Логические элементы компьютера
 
Стихотворение Дочке
Стихотворение ДочкеСтихотворение Дочке
Стихотворение Дочке
 
Стихотворение
СтихотворениеСтихотворение
Стихотворение
 
Две стороны социальных сетей
Две стороны социальных сетейДве стороны социальных сетей
Две стороны социальных сетей
 
Мир Scratch
Мир ScratchМир Scratch
Мир Scratch
 
Физкультминутки
ФизкультминуткиФизкультминутки
Физкультминутки
 
компьютер друг или враг
компьютер   друг или врагкомпьютер   друг или враг
компьютер друг или враг
 
отчет 2четверть
отчет 2четвертьотчет 2четверть
отчет 2четверть
 
отчет 1
отчет 1отчет 1
отчет 1
 
клавиатурный мир
клавиатурный мирклавиатурный мир
клавиатурный мир
 
мир кроссвордов
мир кроссвордовмир кроссвордов
мир кроссвордов
 
мир мультипликации
мир мультипликациимир мультипликации
мир мультипликации
 
мир компьютерной техники
мир компьютерной техникимир компьютерной техники
мир компьютерной техники
 
компьютерные игры
компьютерные игрыкомпьютерные игры
компьютерные игры
 
методы исследования
методы исследованияметоды исследования
методы исследования
 
типы проектов
типы проектовтипы проектов
типы проектов
 
темы проекта
темы проектатемы проекта
темы проекта
 
особенности структура проекта. Этапы проекта
особенности структура проекта. Этапы проектаособенности структура проекта. Этапы проекта
особенности структура проекта. Этапы проекта
 
Исследовательская и проектная деятельность_зан1
Исследовательская и проектная деятельность_зан1Исследовательская и проектная деятельность_зан1
Исследовательская и проектная деятельность_зан1
 

к мастер классу