ИнформатикаиИКТ Лекция...

ГБОУ СПО "УМТК" Кондаратцева Т.П.

Информатика и ИКТЛекция 12

1 курс

Методы создания исопровождения сайта

Основы языкагипертекстовойразметки HTML

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

WWW - World Wide Web («Всемирнаяпаутина») - это общемироваягипертекстовая информационнаясистема (является частью Интернета).

Web - страница - это отдельныйкомбинированный документ сети WWW, который может содержать текст, графику, анимацию, звуковые и другие объекты. Хранится в файле *.htmlСайт (веб-сайт, ресурс) – это место винтернете, которое определяется своимадресом (URL), имеет своего владельцаи состоит из веб-страниц, которыевоспринимаются как единое целое.

Пример структуры сайта

Создание сайтов- составной процесс, состоящий изнескольких этапов:

• разработка дизайна,

• вёрстка,

• программирование,

• безопасность

Сопровождение сайтов- это техническая поддержка сайта,

- помощь в обновлении контента

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

Методы создания исопровождения сайтов

• вручную на языкe HTML (в БЛОКНОТе)

• c помощью редакторов сайтов (HEFS, DreamWeaver и др.)

• c помощью Конструктора сайтов наоснове готового шаблона (ucoz.ru, narod.ru и др.)

• с помощью систем управления сайтов(Joomla, 1С Битрикс и др.)

1. Разработка проекта(Постановка задачи)

1. Разработка проекта(Постановка задачи)

Этапы созданияWEB-страницы

1. Разработка проекта(Постановка задачи).

• Главная тема страницы.• Текстовое содержание (грамотный язык).• Планировка размещения информации настранице (верстка).

• Графика (набор рисунков, анимаций).• Стиль дизайна (сочетания цветов, фоныи т. п.)

1. Разработка проекта(Постановка задачи).

• Главная тема страницы.• Текстовое содержание (грамотный язык).• Планировка размещения информации настранице (верстка).

• Графика (набор рисунков, анимаций).• Стиль дизайна (сочетания цветов, фоныи т. п.)

Пример проекта WEB- страницы

Моя личная страница___________________________________________________

Мой город…………………..Мой колледж…………………..Моя специальность…………………..

___________________________________________________

МояМоя личнаяличная страницастраница______________________________________________________________________________________________________

МойМой городгород……………………………………....МойМой колледжколледж……………………………………....МояМоя специальностьспециальность……………………………………....

______________________________________________________________________________________________________

Фото

2. Алгоритм заполнениястраницы.


Пример

Моя личная страница___________________________________Мой город…………………..Мой колледж…………………..Моя специальность…………………..___________________________________

МояМоя личнаяличная страницастраница______________________________________________________________________МойМой городгород……………………………………....МойМой колледжколледж……………………………………....МояМоя специальностьспециальность……………………………………....______________________________________________________________________

Фото

1) Название страницы



Пример



Фото


2) Черта



Пример



Фото


2) Черта

3) Фотография (справа)



Пример



Фото


2) Черта


4)Текст (слева)



Пример



Фото


2) Черта


4)Текст (слева)

5) Черта

3. Программирование. 3. Программирование.

HTML - Hyper Text

Markup Language - язык разметки гипертекста.

HTML - Hyper Text

Markup Language - язык разметки гипертекста.

Программа для WEB-страницы

записывается на языке HTML в виде

текстовых файлов в текстовом

редакторе Блокнот.

Эти файлы имеют название

имя.html

Программа для WEB-страницы

записывается на языке HTML в виде

текстовых файлов в текстовом

редакторе Блокнот.

Эти файлы имеют название

имя.html

Операторы (команды) языка

HTML называются тегами.

Операторы (команды) языка

HTML называются тегами.

Общий вид записи тега

<Тег> Фрагмент страницы </Тег><Тег> Фрагмент страницы </Тег>

или<Тег>

Фрагмент

страницы

</Тег>

<Тег>

Фрагмент

страницы

</Тег>

Базисные теги• <HTML> </HTML> - начало и конец файла

•<TITLE> </TITLE> имя документа (должнобыть в заголовке)

•<HEAD> </HEAD>- голова документа

•<BODY></BODY> - тело документа

Общий вид программы

<HTML><HEAD><title> Название окна</title></HEAD><BODY>Содержимое cтраницы

</BODY></HTML>

Пример программы

<HTML><HEAD><title> Моя страница </title></HEAD><BODY>Содержимое cтраницы

</BODY></HTML>

?

<H1> текст </H1>


. . .<H6> текст </H6>



. . .<H6> текст </H6>

Тегзаголовковтекста< Hn>

<H1> Моя личная страница </H1><H1> Моя личная страница </H1>

Пример:

Как расположить по центру?

Что такое атрибуты• Атрибуты элемента определяют егосвойства. • Значение атрибута может бытьзаключено в одинарные или двойныекавычки. • Порядок следования атрибутов в тегене важен. • Атрибут действует от открывающеготега, в котором он задан, дозакрывающего, или только внутри тега, если тег не имеет парного.

Пример:

<H1 ALIGN=“Center”>Моя личная страница</H1><H1 ALIGN=“Center”>Моя личная страница</H1>

Атрибут выравниваниятекста ALIGN

(значения Left, Right, Center)

<HR><HR>Тегчерты< HR>

ПРОГРАММА<BODY>

<H1 ALIGN=“Center”>Моя личная страница</H1>

<HR>

<H2 ALIGN=“Left”> Мой город </H2>

<FONT>Я живу в . . . </FONT>

<H2 ALIGN=“Left”> Мой колледж </H2>

<FONT> Я учусь в . . . </FONT>

<H3 ALIGN=“Left”> Моя специальность </H3>

<FONT>. . . </FONT>

<HR>

</BODY>

<BODY>

<H1 ALIGN=“Center”>Моя личная страница</H1>

<HR>

<H2 ALIGN=“Left”> Мой город </H2>

<FONT>Я живу в . . . </FONT>

<H2 ALIGN=“Left”> Мой колледж </H2>

<FONT> Я учусь в . . . </FONT>

<H3 ALIGN=“Left”> Моя специальность </H3>

<FONT>. . . </FONT>

<HR>

</BODY>

index.html

4. Реализация на компьютере4. Реализация на компьютере

Ввод

Запуск ?БраузерInternet Explorer

Текстовыйредактор Блокнот

Корректировка 5.Анализрезультата5.Анализрезультата

Дизайнстраницы

Тэги и их атрибуты

Добавляет фоновуюкартинку(графический файлформата *.jpg, *.gif )

<BODY BACKGROUND="URL">

вставка графическогоизображения

<IMG SRC=”файл”ALIGN=”значение”>

Меняет цвет всего текстаЦвет фона страницы

<BODY TEXT=”color”BGCOLOR="цвет”>

Меняет цвет,Размер,гарнитуру шрифта текста

<FONT COLOR=”цвет”size=“число от 1 до 7”FACE=“шрифт”>

ДействиеАтрибут

Таблица цветов

#FFFF00yellow#FFFFFFwhite#008080teal#C0C0C0silver#FF0000red#800080purple#808000olive#000080navy#800000maroon#00FF00lime#008000green#808080gray#FF00FFfuchsia#0000FFblue#000000black#00FFFFaqua

HexЦветНазвание

Выполнить практическое заданиеВыполнить практическое задание

Контрольные вопросы1. Что такое интернет, вэбстраница, сайт? 2. Как расшифровать WWW?3. В чем заключается процесс создания сайта?4. В чем заключается процесс поддержки сайта?5. Перечислите методы создания и поддержки сайтов.6. Перечислите этапы создания вэбстраницы.7. В чем заключается этап разработки сайта?8. Что такое HTML?9. Что такое тег?10. Перечислите базовые теги.11. Вид записи тегов: заголовков, горизонтальной черты,

шрифта, вставки изображения.12. Что такое атрибуты тега, привести примеры.13. Какие атрибуты могут использоваться у тегов:

заголовков, тела страницы, горизонтальной черты, шрифта, вставки изображения?

преподавательГБОУ СПО «УМТК»Кондаратцева Т.П.

преподавательГБОУ СПО «УМТК»Кондаратцева Т.П.

ИнформатикаиИКТ Лекция...

Documents