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

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

Содержание

ОглавлениеУрок 1 Урок 2Урок 3Урок 4Урок 5Урок 6Урок 7Урок 8

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

Слайд 1Основы языка разметки гипертекста
Автор: Русинов А.С.

Основы языка разметки гипертекстаАвтор: Русинов А.С.

Слайд 2Оглавление
Урок 1
Урок 2
Урок 3
Урок 4
Урок 5
Урок 6
Урок 7
Урок 8

ОглавлениеУрок 1 Урок 2Урок 3Урок 4Урок 5Урок 6Урок 7Урок 8

Слайд 3Урок 1
Введение в HTML, история, работа с текстом

Урок 1Введение в HTML, история, работа с текстом

Слайд 4Понятия: HTML, web-сайта
HTML (от англ. Hypertext Markup Language — «язык

разметки гипертекста») - это стандартный язык разметки документов во Всемирной

паутине. Все web-страницы создаются при помощи языка HTML (специальных управляющих символов – тегов).

Web-сайт состоит из Web-страниц (обычно это файлы с расширением .html или htm), объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.

ГЛАВНЫЙ ФАЙЛ НАЗЫВАЕТСЯ index.html или index.htm
Понятия: HTML, web-сайтаHTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») - это стандартный язык разметки

Слайд 5Пример структуры сайта
Схема 1
2 урок

Пример структуры сайтаСхема 12 урок

Слайд 6Достоинства HTML
Возможность просмотра на любых ПК, под управлением различных операционных

систем (Windows, Linux, Unix, BSD, MacOS, OS/2...)
Малый информационный объем

Достоинства HTMLВозможность просмотра на любых ПК, под управлением различных операционных систем (Windows, Linux, Unix, BSD, MacOS, OS/2...)Малый

Слайд 7История
1986 г - Standard Generalized Markup Language (SGML), международная организация

по стандартизации (ISO)
1991 г – создан HTML (сотрудники Европейского

института физики частиц), для Mosaic (22 тега)
1993 г – HTML версия 1.3 (43 тега)
1995 г - HTML версия 2.0
1996 г - HTML версия 3.0 (таблицы стилей CSS )
1997 г - HTML версия 4.0 (фреймы, сложные таблицы…)
2005 г – начата разработка версии 5.0 (Консорциумом Всемирной паутины (W3C) )
История1986 г - Standard Generalized Markup Language (SGML), международная организация по стандартизации (ISO) 1991 г – создан

Слайд 8Виды тегов
Парные (c закрытием, контейнер)




Текс


Не парные (одинарные)


Виды теговПарные (c закрытием, контейнер)ТексНе парные (одинарные)

Слайд 9Структура HTML

Структура HTML

Слайд 10Мета - теги
Помещаются между тегами ...
Служат для детального

описания страницы




name="Keywords" content="ключевые слова документа, разделенные запятыми или пробелами">
...

Мета - тегиПомещаются между тегами ... Служат для детального описания страницы...

Слайд 11Спецсимволы
Иногда возникает необходимость в использовании
символа, которого нет на клавиатуре или

не
воспринемается если мы его напечатаем в документе.

СпецсимволыИногда возникает необходимость в использованиисимвола, которого нет на клавиатуре или невоспринемается если мы его напечатаем в документе.

Слайд 12Форматирование текста

Форматирование текста

Слайд 13Форматирование текста. Пример.
HTML - код


Заголовок



Пробный текст



Вид на экране

Пробный текст

Форматирование текста. Пример.HTML - кодЗаголовокПробный текстВид на экранеПробный текст

Слайд 14Форматирование текста
Размерами и начертаниями шрифта можно управлять также с помощью

тега FONT и его атрибутов:





...
Например:

FACE="Arial" SIZE="5">Текст

Цвет текста можно задать следующим образом:
Текст
или
Текст

Форматирование текстаРазмерами и начертаниями шрифта можно управлять также с помощью тега FONT и его атрибутов: ... Например:

Слайд 15Таблица цветов

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

Слайд 16Выравнивание текста

Выравнивание текста

Слайд 17Сочетания тегов
Теги можно комбинировать друг с другом получая нужный результат.

Например, напечатать на экране жирным курсивом текст. Очередность сочений не

имеет значения.

Код HTML:


Сочетание тегов


Текст


Сочетания теговТеги можно комбинировать друг с другом получая нужный результат. Например, напечатать на экране жирным курсивом текст.

Слайд 18Сочетания тегов

Код HTML:


Сочетание тегов



Текст



Сочетания теговКод HTML:Сочетание тегов Текст

Слайд 19Урок 2
Выполните задание №1, №2 в классе.

Урок 2Выполните задание №1, №2 в классе.

Слайд 20Урок 3
Списки и изображения

Урок 3Списки и изображения

Слайд 21Списки
Нумерованные
Маркированные

Возможно создавать вложенные
списки

СпискиНумерованныеМаркированныеВозможно создавать вложенныесписки

Слайд 22Списки
Располагается внутри контейнера ... (нумерованный список) или ...

(маркированный список)
А каждый элемент определяется тегами …

СпискиРасполагается внутри контейнера ... (нумерованный список) или ... (маркированный список)А каждый элемент определяется тегами …

Слайд 23Маркированный список
HTML код:



Прикладное ПО:

СУБД
Текстовые редакторы
Графические редакторы
Графические редакторы



Вид на экране

Прикладное ПО

:

СУБД
Текстовые редакторы
Графические редакторы
Графические редакторы


Маркированный списокHTML код:Прикладное ПО:СУБДТекстовые редакторыГрафические редакторыГрафические редакторыВид на экранеПрикладное ПО :СУБДТекстовые редакторыГрафические редакторыГрафические редакторы

Слайд 24Нумерованный список
HTML код:



Прикладное ПО:

Системное ПО
Прикладное ПО
Системы программирование



Вид на экране:

Прикладное ПО:

Системное

ПО
Прикладное ПО
Системы программирование

Нумерованный списокHTML код:Прикладное ПО:Системное ПОПрикладное ПОСистемы программированиеВид на экране:Прикладное ПО:Системное ПО Прикладное ПО Системы программирование

Слайд 25Нумерованный список
По умолчанию элементы списка нумеруются по порядку 1, 2,

3…
При помощи атрибута TYPE можно изменить стиль нумерации.


Нумерованный списокПо умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить

Слайд 26Нумерованный список

Нумерованный список

Слайд 27Нумерованный список*
При помощи атрибутов START VALUE можно изменить порядок нумерации

списка.
START - служит для задания начального номера списка, отличного от

1.
VALUE - дает возможность назначить произвольный номер любому элементу списка.
Пример:
Нумерованный список*При помощи атрибутов START VALUE можно изменить порядок нумерации списка.START - служит для задания начального номера

Слайд 28Вложенный список


ПО:

Системное ПО
Прикладное ПО

СУБД
Текстовые редакторы
Графические редакторы

Графические редакторы

Системы программирование



HTML код:

Вид на экране
Вложенный списокПО:Системное ПОПрикладное ПО СУБД Текстовые редакторы Графические редакторы Графические редакторы Системы программированиеHTML код:

Слайд 29Вставка изображений
Для встраивания изображения в документ используется тег
, имеющий обязательный

параметр src, который
определяет адрес файла с картинкой и alt, определяющий
альтернативный

текст.
Вставка изображенийДля встраивания изображения в документ используется тег, имеющий обязательный параметр src, которыйопределяет адрес файла с картинкой

Слайд 30Вставка изображений. Форматы.

Вставка изображений. Форматы.

Слайд 31Вставка изображений. Gif *
256 цветов
поддерживает загрузку файла с чередованием строк


возможен прозрачный фон
осуществляет анимацию изображения

Используют для рисунков и

gif-анимации
Вставка изображений. Gif *256 цветовподдерживает загрузку файла с чередованием строк возможен прозрачный фон осуществляет анимацию изображения Используют

Слайд 32Вставка изображений. JPEG *
16 млн. цветов
фотографическое качество изображений
позволяет задать

еще более высокую степень сжатия за счет потери качества

Используют

для фотографий
Вставка изображений. JPEG *16 млн. цветовфотографическое качество изображений позволяет задать еще более высокую степень сжатия за счет

Слайд 33Вставка изображений. PNG *
281 трлн. цветов
поддерживает загрузку файла с чередованием

строк
возможен прозрачный фон (с различной степенью прозрачности)
помехоустойчивый, осуществляет

проверку на ошибки при передаче файлов

Используют для фотографий
Вставка изображений. PNG *281 трлн. цветовподдерживает загрузку файла с чередованием строк возможен прозрачный фон (с различной степенью

Слайд 34Вставка изображений. Примеры

Изображение risunok.gif находится в той же папке
что

и html файл

Изображение risunok.gif находится в папке
katalog по отношению

к html файлу

Находится на компьютере в папке
c:\site\risunok.gif

Находится на сайте http://test.ru/



Вставка изображений. ПримерыИзображение risunok.gif находится в той же папкечто и html файлИзображение risunok.gif находится в папкеkatalog по

Слайд 35Самостоятельная работа
Выполните задания №3, №4

Самостоятельная работаВыполните задания №3, №4

Слайд 36Урок 4
Гиперссылки, графическое оформление

Урок 4Гиперссылки, графическое оформление

Слайд 37Гиперссылка
Гиперссылка — это связь между веб-страницами или файлами.

Гиперссылка на

Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает

переход на Web-страницу, указанную в адресной части ссылки.

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

См. схема 1.
ГиперссылкаГиперссылка — это связь между веб-страницами или файлами. Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок

Слайд 38Гиперссылки. Формат.

Гиперссылки. Формат.

Слайд 39Гиперссылки. Примеры.
Ссылки с абсолютным адресом

Персональная страничка
Сылка на файл

Ссылки

с относительным адресом

Персональная страничка
Сылка на файл

страничку

Ссылки на e-mail

E-mail для связи



Гиперссылки. Примеры.Ссылки с абсолютным адресомПерсональная страничкаСылка на файлСсылки с относительным адресомПерсональная страничкаСылка на файл

Слайд 40Гипперссылка в виде изображения


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


рамка толщиной один пиксел и цветом, совпадающим с
цветом текстовых ссылок.



Чтобы убрать рамку, следует у тега установить параметр
border="0"
Гипперссылка в виде изображения Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим сцветом текстовых

Слайд 41Гиперссылка в пределах страницы*
Чтобы построить ссылку на область внутри текущей
страницы,

надо дать этой области название при
помощи атрибута NAME тэга .

Имя должно
содержать только буквы и цифры.

Таким образом можно делать гиперссылки, указывающие на
области других страниц внутри сайта.

HTML - код
Наверх страницы
В то место, куда надо сделать переход надо вставить:


Гиперссылка в пределах страницы*Чтобы построить ссылку на область внутри текущейстраницы, надо дать этой области название припомощи атрибута

Слайд 42Графическое оформление
Цвет фона веб-страницы задается с использованием
параметра bgcolor тега .

HTML

- код :


...


...



Цвет можно указывать в шестнадцатеричном значении
или по

его имени.
Графическое оформлениеЦвет фона веб-страницы задается с использованиемпараметра bgcolor тега .HTML - код :......Цвет можно указывать в шестнадцатеричном

Слайд 43Графическое оформление
В качестве фона можно использовать любое подходящее для
этого изображение.

Фон не должен отвлекать внимание от
текста, при этом должен хорошо

сочетаться с цветовой гаммой
веб-страницы и быть маленьким по размеру.
Цвет фона веб-страницы задается с использованием атрибута
(параметра) background тега .

HTML – код:


...


...





Internet Explorer позволяет сделать фон неподвижным с помощью
параметра bgproperties="fixed" тега .

Графическое оформлениеВ качестве фона можно использовать любое подходящее дляэтого изображение. Фон не должен отвлекать внимание оттекста, при

Слайд 44Урок 5
Выполните задание №5, 6

Урок 5Выполните задание №5, 6

Слайд 45Урок 6
Таблицы

Урок 6Таблицы

Слайд 46Таблицы
Для создания таблицы служит тэг . Как известно таблица состоит

из строк, а строки, в свою очередь состоят из ячеек.

Для определения строк служит тэг , для создания ячеек - , .
ТаблицыДля создания таблицы служит тэг . Как известно таблица состоит из строк, а строки, в свою очередь

Слайд 47Таблицы
HTML-код:

 
  1
  2
 
 
  3
  4
 
 
  5
  6
 

Вид на экране:

ТаблицыHTML-код:   1  2    3  4    5  6  Вид на экране:

Слайд 48Таблицы
Для создания заголовка таблицы служит тэг .
По умолчанию браузер располагает

заголовок таблицы по центру над ней. При помощи атрибута ALIGN

со значением bottom можно разместить заголовок под таблицей.

HTML-код:



 
  
  
 
Заголовок таблицы
12

Вид на экране:

ТаблицыДля создания заголовка таблицы служит тэг .По умолчанию браузер располагает заголовок таблицы по центру над ней. При

Слайд 49Таблицы
Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.
Атрибут ALIGN

предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается

по центру, а ячеек - влево.
Атрибут VALIGN выравнивает данные по вертикали.

HTML-код:


 
  
  
 
 
  
  
 
1111
2222		22222
Нижняя ячейкаНижняя ячейка

Вид на экране:

ТаблицыДля выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию

Слайд 50Таблицы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в

абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%").
HTML-код:

width="200">
 
  

Ширина 200 пикселей


 




 
  
 

Ширина 60%


Вид на экране:

ТаблицыШирина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных

Слайд 51Таблицы
При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек

столбца или строки в одну большую ячейку.
Атрибут COLSPAN тэгов ,

позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.
Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.
Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
ТаблицыПри помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.Атрибут

Слайд 52Таблицы
HTML-код:

 
  1111
  22222
  33333
 
 
  44444
  55555
  66666
 
 
  77777
  88888
 
 
  99999
 

Вид на

экране:

ТаблицыHTML-код:   1111  22222  33333    44444  55555  66666    77777  88888    99999  Вид на экране:

Слайд 53Урок 7
Выполните задание № 7

Урок 7Выполните задание № 7

Слайд 54Урок 8 - зачет
Выполните тест

Урок 8 - зачетВыполните тест

Похожие презентации

Как провалить дистанционное обучение: 6 ошибок в организации Как провалить дистанционное обучение: 6 ошибок в организации 187
Travelling Travelling 214
Первый слайд Название компании, ваше имя и должность, КОНТАКТЫ (Можно поставить Первый слайд Название компании, ваше имя и должность, КОНТАКТЫ (Можно поставить 170
Степные растения и животные Степные растения и животные 746
Тема урока: Тема урока: 176
презентация к дню учителя презентация к дню учителя 125
Прямолинейное равноускоренное движение. Ускорение Прямолинейное равноускоренное движение. Ускорение 394
Функциональная система главных трезвучий. Соединение главных трезвучий Функциональная система главных трезвучий. Соединение главных трезвучий 274
Конкурентоспособность Конкурентоспособность 377
БУДДИЗМ БУДДИЗМ 207
Образование в РФ Образование в РФ 180
ARTICLES AND ARTICLES AND 173
План урока: Что такое природа. Взаимосвязь общества и природы. Влияние НТП на План урока: Что такое природа. Взаимосвязь общества и природы. Влияние НТП на 195
Структурная схема цифровой обработки сигналов Структурная схема цифровой обработки сигналов 378
И.Ф.Стравинский И.Ф.Стравинский 122
Гагаринский урок Гагаринский урок 180
Modal verbs in the past Modal verbs in the past 435
Почему люди боятся сверхъестественного, если его не существует Почему люди боятся сверхъестественного, если его не существует 222
Театр и кинематограф Театр и кинематограф 228
МЕХАНИЧЕСКОЕ ДВИЖЕНИЕ МЕХАНИЧЕСКОЕ ДВИЖЕНИЕ 216

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

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

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

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

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

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

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