kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

  1. Главная
  2. Информатика
  3. Презентации
  4. Разметка HTML документов

Разметка HTML документов

Нажмите, чтобы узнать подробности

Цели и задачи урока: 
• Сформулировать основные принципы создания WEB-страниц; 
• Познакомить учеников с основными командами оформления текста; 
• Продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц; 

 

• Сформировать навыки и умения создания простейших WEB-страниц;

Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Наладить дисциплину на своих уроках.
Получить возможность работать творчески.

Просмотр содержимого презентации
«Yazyk_razmetki_gipertextovykh_dokumentov_HTML»

«Язык разметки гипертекстовых документов HTML »

«Язык разметки гипертекстовых документов HTML »

Введение К аждый день всемирная паутина поглощает нас все больше и больше. Количество сайтов так же неуклонно растет. Д ля того, чтобы создать свой сайт необходимо знать язык HTML.

Введение

К аждый день всемирная паутина поглощает нас все больше и больше. Количество сайтов так же неуклонно растет. Д ля того, чтобы создать свой сайт необходимо знать язык HTML.

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

HTML-документ – это обычный текстовый документ, содержащий специальные разметочные указатели (тэги) .

HTML-файл имеет расширение .htm или .html

Что означают эти буквы?(HTML) H yper T ext M arkup L anguage Язык гипертекстовой разметки.

Что означают эти буквы?(HTML)

H yper T ext M arkup L anguage

Язык гипертекстовой разметки.

Общее представление Я зык HTML был разработан  британским  учёным  Тимом Бернерсом –Ли.  

Общее представление

  • Я зык HTML был разработан  британским  учёным 

Тимом Бернерсом –Ли.  

  • П риблизительно в 1989 — 1991 годах .  
  • H TML создавался как язык для обмена научной и технической документацией, 
  • H TML создавался как язык для обмена научной и технической документацией, 
  • H TML создавался как язык для обмена научной и технической документацией, 
Д ля ч его н ужна р азметка в H TML ? И менно я зык г ипертекстовой р азметки H TML, ответственен за появление многих чудесных WEB-страничек, WEB-сайтов, наполненных текстами, картинками, звуками, анимацией, видеоклипами, ссылками… Именно он определяет:

Д ля ч его н ужна р азметка в H TML ?

И менно я зык г ипертекстовой р азметки H TML, ответственен за появление многих чудесных WEB-страничек, WEB-сайтов, наполненных текстами, картинками, звуками, анимацией, видеоклипами, ссылками…

Именно он определяет:

  • Содержание.
  • Внешний вид,
  • Внешний вид,
  • Направленность странички.
  • Направленность странички.
  • Направленность странички.
Как создать ? Для создания H TML документов используют текстовые редакторы (например Б локнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на . html или .htm вы получите полноценную web страничку.

Как создать ?

Для создания H TML документов используют текстовые редакторы (например Б локнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на . html или .htm вы получите полноценную web страничку.

В каких средах работаем? Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор) Сохранить HTML- код так, чтобы страницу можно было просмотреть в Web-браузере: Файл, Сохранить как (появится диалоговое окно) Где? В вашей папке сайта My Site Имя файла? «index.html» Сохранить

В каких средах работаем?

  • Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор)
  • Сохранить HTML- код так, чтобы страницу можно было просмотреть в Web-браузере:

Файл, Сохранить как (появится диалоговое окно)

Где? В вашей папке сайта My Site

Имя файла? «index.html» Сохранить

Что такое тэги? Т эг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки. Т эг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки. Т эг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки. Т эг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки. Например: , Например: , Например: , Например: , Например: , Например: ,

Что такое тэги?

  • Т эг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки.
  • Т эг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки.
  • Т эг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки.
  • Т эг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки.
  • Например: ,
  • Например: ,
  • Например: ,
  • Например: ,
  • Например: ,
  • Например: ,

одиночный ТЭГ открывающий парный (контейнер) закрывающий

одиночный

ТЭГ

открывающий

парный

(контейнер)

закрывающий

ПРАВИЛА ЗАПИСИ ТЭГОВ Тэг всегда заключен в специальные символы Например:

ПРАВИЛА ЗАПИСИ ТЭГОВ

Тэг всегда заключен в специальные символы Например:

Основные тэги начало HTML-документа начало заголовка начало строки – названия страницы … строка названия страницы конец строки – названия страницы конец заголовка начало тела страницы … тело (всё содержимое) страницы конец тела страницы конец HTML-документа пример

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

начало HTML-документа

начало заголовка

начало строки – названия страницы

…

строка названия страницы

конец строки – названия страницы

конец заголовка

начало тела страницы

…

тело (всё содержимое) страницы

конец тела страницы

конец HTML-документа

пример

Структура документа Структура простейшего HTML документа выглядит следующим образом: Заголовок страницы

Структура документа

Структура простейшего HTML документа выглядит следующим образом:

Заголовок страницы

Заголовочная часть Информатика HTML

Заголовочная часть

Информатика

HTML

Текст заключенный между тэгами Информатика , отобразился в строке Имени документа HTML

Текст заключенный между тэгами Информатика , отобразился в строке Имени документа

HTML

Основная часть тэги заголовка первого уровня на Web – странице, в основной части страницы. Мы приветствуем Вас! HTML

Основная часть

тэги заголовка первого уровня на

Web – странице,

в основной части страницы.

Мы приветствуем Вас!

HTML

Вот результат сохраненной Web – странички и просмотренной в браузере HTML

Вот результат сохраненной Web – странички и просмотренной в браузере

HTML

ПРИМЕР HTML-ДОКУМЕНТА Моя первая Интернет-страничка! Это моя первая проба сил в Web-дизайне. Может быть, страничка пока еще получилась не очень красивой, но ведь она работает!!!

ПРИМЕР HTML-ДОКУМЕНТА

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

Это моя первая проба сил в Web-дизайне.

Может быть, страничка пока еще получилась

не очень красивой, но ведь она работает!!!

Практическая часть Создайте свою страничку по примеру приведённому ниже начало документа. сновная служебная информация о документе. Моя первая страничка шапке окна «название документа» Привет мир!!! тело

Практическая часть

Создайте свою страничку по примеру приведённому ниже

начало документа.

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

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

шапке окна «название документа»

Привет мир!!!

тело" документа всё что написано ниже выставляем на всеобщее обозрение

переносим текст на следующую строчку.

Меня зовут (ваше имя ), это моя первая страничка!

Редактирование текста Добавление параграфа «выравниваня» Пример: «по правому краю», «по левому краю», «по центру» для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом   . Привет мир!!!п о центру: Привет мир!!! по левому краю: Привет мир!!!по правому краю По обоим краям документа :Привет мир!!!  - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа

Редактирование текста

Добавление параграфа «выравниваня»

Пример: «по правому краю», «по левому краю», «по центру»

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

 .

Привет мир!!!

п о центру:

Привет мир!!!

по левому краю:

Привет мир!!!

по правому краю

По обоим краям документа :

Привет мир!!!  - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа

Вот что должно получиться Мой первый сайт Привет мир!!!   Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!! 

Вот что должно получиться

Мой первый сайт

Привет мир!!!


  Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!! 

Привет мир!!! Привет мир!!! Привет мир!!! Привет мир!!! Привет мир!!!" width="640"

Меняем размер «заголовка»

  В наборе тегов html языка имеется шесть типов заголовков:

Привет мир!!!

h2 Привет мир!!!

Привет мир!!!

Привет мир!!!

Привет мир!!!

Привет мир!!!

Меняем размер «шрифта» Тег   помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size  - размер. ишется и выглядит это так: Привет мир!!! Привет мир!!! Привет мир!!! Привет мир!!!   Привет мир!!!

Меняем размер «шрифта»

Тег   помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size  - размер. ишется и выглядит это так: Привет мир!!! Привет мир!!! Привет мир!!! Привет мир!!!   Привет мир!!!

Вот что должно получиться Мой первый сайт Привет мир!!! Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю  вареньё!!!  С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!

Вот что должно получиться

Мой первый сайт

Привет мир!!!


Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю  вареньё!!!  С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!

Спасибо за внимание!!!

Спасибо за внимание!!!


Получите в подарок сайт учителя

Творческие задания в Sсratch 5-6 классы

Информатика 11 класс ФГОС

Информатика 6 класс ФГОС

Электронная тетрадь по информатике 8...

Увлекательная информатика

Информатика 3 класс

Информатика 7 класс ФГОС

Информатика 10 класс ФГОС

Предмет: Информатика

Категория: Презентации

Целевая аудитория: 8 класс

Скачать
Разметка HTML документов

Автор: Мамонтов Максим Алексеевич

Дата: 30.11.2014

Номер свидетельства: 137284

Похожие файлы

object(ArrayObject)#853 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(97) "Презентация к уроку язык гипертекстовой разметки HTML "
    ["seo_title"] => string(62) "priezientatsiia-k-uroku-iazyk-ghipiertiekstovoi-razmietki-html"
    ["file_id"] => string(6) "101311"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(11) "presentacii"
    ["date"] => string(10) "1402413420"
  }
}

object(ArrayObject)#875 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(225) "Урок информатики по теме «HTML – язык разметки  гипертекстовых документов»«HTML – язык разметки  гипертекстовых документов» "
    ["seo_title"] => string(130) "urok-informatiki-po-tiemie-html-iazyk-razmietki-ghipiertiekstovykh-dokumientov-html-iazyk-razmietki-ghipiertiekstovykh-dokumientov"
    ["file_id"] => string(6) "134253"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1416722634"
  }
}

object(ArrayObject)#853 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(157) "Разработка урока информатики по теме "HTML – язык разметки  гипертекстовых документов" "
    ["seo_title"] => string(90) "razrabotka-uroka-informatiki-po-tiemie-html-iazyk-razmietki-ghipiertiekstovykh-dokumientov"
    ["file_id"] => string(6) "135895"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1417002886"
  }
}

object(ArrayObject)#875 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(127) "Разработка Web - сайтов с использованием языка разметки гипертекста HTML"
    ["seo_title"] => string(67) "razrabotkawebsaitovsispolzovaniiemiazykarazmietkighipiertiekstahtml"
    ["file_id"] => string(6) "302194"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(11) "presentacii"
    ["date"] => string(10) "1457087707"
  }
}

object(ArrayObject)#853 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(145) "Практическая работа по информатике для 11 класса «Создание Web-сайта на языке HTML»"
    ["seo_title"] => string(80) "prakticheskaia_rabota_po_informatike_dlia_11_klassa_sozdanie_web_saita_na_iazyke"
    ["file_id"] => string(6) "576697"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1616653876"
  }
}

Перейти в личный кабинет

Полезное для учителя




Распродажа видеоуроков!
1460 руб.
2430 руб.
1430 руб.
2390 руб.
1270 руб.
2110 руб.
Смотреть все комплекты
Курсы ПК и ППК для учителей!
Смотреть все курсы
ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Проверка свидетельства