Презентация, доклад по информатике на тему HTML

Содержание

Web-сайты и Web-страницы Публикации во Всемирной паутине реализуются в форме Web–сайтов. Web–сайт по своей структуре напоминает журнал и состоит из web-страниц.

Слайд 1 HTML (Hyper Text Markup Language ) – язык разметки гипертекста


Слайд 2Web-сайты и Web-страницы

Публикации во Всемирной паутине реализуются в форме Web–сайтов.


Web–сайт по своей структуре напоминает журнал и состоит из web-страниц.

Web-сайты и Web-страницы Публикации во Всемирной паутине реализуются в форме Web–сайтов. Web–сайт по своей структуре напоминает журнал

Слайд 3Создание Web-сайтов
Создание реализуется с использованием языка разметки гипертекстовых документов HTML.
Технология HTML

состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web–страницу — файл с расширением .htm или .html.
Создание Web-сайтовСоздание реализуется с использованием языка разметки гипертекстовых документов HTML.Технология HTML состоит в том, что в обычный

Слайд 4Форматирование текста
Вид Web–страницы задается тегами, которые заключаются в угловые скобки.
Теги

могут быть парными, обязательно наличие открывающего и закрывающего тэгов (контейнер).
Закрывающий содержит прямой слэш (/) перед обозначением.

Форматирование текстаВид Web–страницы задается тегами, которые заключаются в угловые скобки. Теги могут быть парными, обязательно наличие открывающего

Слайд 5Основные теги HTML
HTML-код страницы помещается внутрь контейнера .
Web–страница разделяется на две

логические части: заголовок и содержание.
Заголовок заключается в контейнер и содержит справочную информацию о странице, название документа.
Основные теги HTMLHTML-код страницы помещается внутрь контейнера .Web–страница разделяется на две логические части: заголовок и содержание.Заголовок заключается

Слайд 6

9 класс




Название Web–страницы содержится в контейнере и отображается

в строке заголовка браузера.

Основные теги HTML

9 классНазвание Web–страницы содержится в контейнере  и отображается в строке заголовка браузера.Основные теги HTML

Слайд 7
Основное содержание страницы помещается в контейнер
и может содержать текст,

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


Давайте знакомиться

Основные теги HTML

Основное содержание страницы помещается в контейнер и может содержать текст, графические изображения, таблицы, звуковые файлы…Давайте знакомитьсяОсновные теги

Слайд 8Шаблон


Моя страничка


Содержание страницы


ШаблонМоя страничка  Содержание страницы

Слайд 9С помощью HTML-тэгов можно задать различные параметры форматирования текста.
Размер шрифта

заголовка задается тэгами от

(самый крупный) до

(самый мелкий).
Заголовок принято размещать по центру страницы(в данном случае – окна браузера). Сделать позволяет атрибут ALIGN тэга заголовка:


- по центру


- по правой границе


- по левой границе

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

С помощью HTML-тэгов можно задать различные параметры форматирования текста. Размер шрифта заголовка задается тэгами от (самый крупный)

Слайд 10Меняет цвет тэг задающего шрифт с атрибутом цвета:


COLOR = “#FF0000”>

Заголовок от остального содержания страницы отделяется горизонтальной линией с помощью тэга

Пример 2

Меняет цвет тэг задающего шрифт с атрибутом цвета:Заголовок от остального содержания страницы отделяется горизонтальной линией с помощью

Слайд 11Атрибут SIZE тэга задает размер шрифта, ему присваивается значение от

1 до 7. С помощью знаков «+» или «-» можно управлять изменением шрифта

Для задания типа шрифта используют атрибут FACE=. Следует сказать, что в основном применяют Times New Roman и Arial.
Атрибут SIZE тэга задает размер шрифта, ему присваивается значение от 1 до 7. С помощью знаков «+»

Слайд 12Атрибуты тэга

Фоновое изображение задается с помощью атрибута BACKGROUND

ФАЙЛА” >

Цвет фона Web-страницы задается атрибутом BGCOLOR

Цвет текста задает атрибут TEXT



Атрибуты тэга Фоновое изображение задается с помощью атрибута BACKGROUNDЦвет фона Web-страницы задается атрибутом BGCOLOR Цвет текста задает

Слайд 13

9 класс




Давайте знакомиться







Шаблон 2


9 класс


Давайте

знакомиться


9 классДавайте знакомитьсяШаблон 29 классДавайте знакомиться

Слайд 14
Стили
Тэг
Пример
 BOLD 

полужирный
 ITALIC 

курсив
 UNDERLINE 

подчеркнутый
 TYPEWRTER 


пишущая машинка

 STRIKETHROUGH 


вычеркнутый

 DECREASE FONT SIZE 


маленький

 INCREASE FONT SIZE 


большой

 BLINK 

  

мерцающий


СтилиТэгПример BOLD  полужирный  ITALIC  курсив  UNDERLINE  подчеркнутый  TYPEWRTER  пишущая машинка  STRIKETHROUGH  вычеркнутый   DECREASE FONT SIZE  маленький  INCREASE

Слайд 15Размещение графики
Первая или титульная страница является «визитной карточкой» сайта.
Страница может содержать

не только текст, но и графическую информацию (разнообразные рисунки, схемы и т.д.), а также звуковую информацию.
Размещение графикиПервая или титульная страница является «визитной карточкой» сайта.Страница может содержать не только текст, но и графическую

Слайд 16В Web-сайтах могут использоваться три графических формата
GIF
JPG
PNG
Для вставки изображения используется тэг

с атрибутом SRC = “имя файла”


В Web-сайтах могут использоваться три графических форматаGIFJPGPNGДля вставки изображения используется тэг с атрибутом SRC = “имя файла”

Слайд 17Тэг имеет ещё один атрибут ALT, значением которого является текст.



Расположить текст различным образом относительно рисунка позволяет атрибут ALIGN тэга .

TOP (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева), RIGHT(справа)

“текст”



Пример 3

Тэг имеет ещё один атрибут ALT, значением которого является текст. Расположить текст различным образом относительно рисунка позволяет

Слайд 18

Моя страничка




Лена



“top”>





Моя страничкаЛена

Слайд 19Гиперссылки на Web-страницах
Титульная страница содержит следующий HTML-код:




Моя страничка



Лена

Моя первая страничка






  • Обо мне.
  • Мой город.
  • Моя школа.
  • Мои друзья



Гиперссылки на Web-страницахТитульная страница содержит следующий HTML-код: Моя страничка    Лена  Моя первая страничка

Слайд 20Гиперссылка на Web–странице существует в форме выделенного объекта, щелчок по которому

обеспечивает переход на другую Web-страницу.
Панель навигации – размещение гиперссылок. Она может представлять собой абзац, выровненный по центру.
Абзацы помещаются в контейнер


  - пробел
Гиперссылка на Web–странице существует в форме выделенного объекта, щелчок по которому обеспечивает переход на другую Web-страницу.Панель навигации

Слайд 21 Для каждой гиперссылки адрес перехода определяет контейнер с

атрибутом HREF(значение URL-адрес).

Контейнер должен также содержать текст гиперссылки:

Текст гиперссылки

Например:

  • Обо мне.

  • Для каждой гиперссылки адрес перехода определяет контейнер с атрибутом HREF(значение URL-адрес).  Контейнер должен также

    Слайд 22

    Моя страничка



    Лена
    Моя первая

    страничка





    • Обо мне.
    • Мой город.
    • Моя школа.
    • Мои друзья



  • Обо мне.

  • Мой город.

  • Моя школа.

  • Мои друзья.



  • Моя страничка    Лена  Моя первая страничка

    Слайд 23

    Обо мне



    Лена
    Обо мне



    Рассказ о себе






    “текст”

    Обо мне    Лена  Обо мне    Рассказ о себе

    Слайд 24Ссылка на адрес электронной почты
    Необходимо атрибуту HREF присвоить URL-адрес электронной почты

    и добавить контейнер


    Текст

    Пример 6

    Ссылка на адрес электронной почтыНеобходимо атрибуту HREF присвоить URL-адрес электронной почты и добавить контейнер  ТекстПример 6

    Слайд 25Списки на Web-страницах
    Ненумерованный список
    Список располагается внутри контейнера , а каждый

    элемент списка определяется тэгом
  • .
    С помощью атрибута TYPE тэга
      можно задать вид маркера списка: “disc”, “square”, “circle”

  • Списки на Web-страницах Ненумерованный списокСписок располагается внутри контейнера , а каждый элемент списка определяется тэгом .С помощью

    Слайд 26 Нумерованный список
    Список располагается внутри контейнера , а каждый элемент списка

    определяется также тэгом
  • .
    С помощью атрибута TYPE тэга
      можно задать тип нумерации: арабские цифры, римские цифры, буквы
  • Нумерованный списокСписок располагается внутри контейнера , а каждый элемент списка определяется также тэгом . С помощью

    Слайд 27Список определений
    Для списка определений используется контейнер .
    Внутри него текст оформляется

    в виде термина, который выделяется непарным тэгом
    и определения, которое следует за тэгом
    .
    Список определенийДля списка определений используется контейнер . Внутри него текст оформляется в виде термина, который выделяется непарным

    Слайд 28Создание таблиц
    Для создания таблицы используется
    Атрибуты:
    Align – расположение таблицы

    Width – ширина таблицы
    Border – ширина внешней рамки
    Заголовок таблицы

    Создание таблицДля создания таблицы используется Атрибуты: Align – расположение таблицы Width – ширина таблицы Border – ширина

    Слайд 29Строка таблицы задается
    Атрибуты:

    align – выравнивание текста в ячейках

    строки

    valign – вертикальное выравнивание (top (верхний край), middle (центр), bottom (нижний край))

    Строка таблицы задается  Атрибуты: align – выравнивание текста в ячейках строки valign – вертикальное выравнивание (top

    Слайд 30Для разделения строк на колонки используется

    Атрибуты:
    nowrap – текст

    в одну строку
    colspan – размах ячейки по горизонтали
    rowspan – размах по вертикали
    valign - вертикальное выравнивание
    width – ширина ячеек
    height – высота ячеек

    Для разделения строк на колонки используется  Атрибуты: nowrap – текст в одну строку colspan – размах

    Слайд 31


    У таблицы может быть заголовок



    Первая

    строка, первая колонка


    Первая строка, вторая колонка




    У таблицы может быть заголовок						 		  Первая строка, первая колонка

    Слайд 33

    Дополнительные атрибуты

    Background - Фоновый рисунок
    Bgcolor – Цвет фона таблицы
    Bordercolor

    – Цвет рамки




    Дополнительные атрибуты Background - Фоновый рисунок Bgcolor – Цвет фона таблицыBordercolor – Цвет рамки

    Слайд 34Карты-изображения
    Для создания гиперссылок можно использовать карты-изображения, на которых выделены области

    – указатели гиперссылок.
    Карты-изображения Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок.

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

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


    Чтобы преобразовать изображение в карту , в тэг добавляется параметр USEMAP, значением которого является ссылка на имя

    Слайд 36
    Внутри контейнера помещаются тэги с описанием областей изображения.
    Атрибуты


    SHAPE – форма области (RECT, CIRCLE)
    COORDS – координаты области
    HREF – гиперссылка
    ALT – альтернативный текст
    Сергей
    Внутри контейнера  помещаются тэги  с описанием областей изображения.Атрибуты SHAPE – форма области (RECT, CIRCLE)COORDS

    Слайд 37Титульная страница





    Титульная страница

    Слайд 38Страница Обо мне




    Страница Обо мне

    Слайд 39Страница Мои друзья


    Страница  Мои друзья

    Слайд 40Страница Мои город



    Страница  Мои город

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

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


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

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

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

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