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

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

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

Html страница и ее структура

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

Презентация по html программированию. 

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

Просмотр содержимого документа
«Html страница и ее структура»

Тема урока: «HTML страница и ее структура, определяемая основными тегами».

Тема урока: «HTML страница и ее структура, определяемая основными тегами».

Hyper Text Markup Language  или сокращенно  HTML   – язык гипертекстовой разметки документов, который лежит в основе почти всех существующих web-страниц, что ставит его на первое место в иерархии инструментов для создания сайтов.

Hyper Text Markup Language  или сокращенно  HTML  

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

Для изучения  HTML  необходим Блокнот . В нем мы будем вручную печатать код . Пример HTML кода

Для изучения  HTML  необходим Блокнот . В нем мы будем вручную печатать код . Пример HTML кода

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

Рассмотрим его элементы:

 –   теги, определяющие начало и

конец документа.

  –   служебная секция. Здесь

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

  –   теги, определяющие главный

заголовок документа.

 –   эта секция содержит всю видимую

часть web-страницы.

В браузере мы увидим Hello World!: .

В браузере мы увидим Hello World!:

.

Посмотрим, как выглядит самая обычная интернет-страница изнутри. Структура HTML   лежит в основе каждой web - страницы. Сегодня существует несколько типов  HTML  документов. Каждому типу документа соответствует его собственная  HTML структура.   Правильная начальная структура HTML  является залогом кросс-браузерности сайта.

Посмотрим, как выглядит самая обычная интернет-страница изнутри.

  • Структура HTML   лежит в основе каждой web - страницы.
  • Сегодня существует несколько типов  HTML  документов. Каждому типу документа соответствует его собственная  HTML структура.  
  • Правильная начальная структура HTML  является залогом кросс-браузерности сайта.

Создадим на диске D или C папку Mой первый сайт (можно назвать ее как угодно). В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот  . - Рассмотрим HTML теги, определяющие структуру страницы

Создадим на диске D или C папку Mой первый сайт (можно назвать ее как угодно). В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот  .

- Рассмотрим HTML теги, определяющие структуру страницы

  •  – обязательные, определяют HTML документ.
  •  – определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты.
  •  – определяют основной заголовок web - страницы.
  •  – обязательные, определяют видимую часть документа.
  •  – определяют заголовок 3-го уровня.
  •  – определяют параграф.
Пример структуры документа: HTML структура документа Мой первый заголовок Мой первый параграф Мой второй параграф

Пример структуры документа:

HTML структура документа

Мой первый заголовок

Мой первый параграф

Мой второй параграф

Пишем код страницы Последовательность действий следующая:

Пишем код страницы

Последовательность действий следующая:

  • 1. Пишeм в Блокноте код  HTML  страницы.
  • 2. Заходим в File ⇒ Save as (Файл ⇒ Сохранить как), находим нашу папку D\Mой первый сайт\ ⇒ прописываем имя файла: (File name) index.html (index – это имя, .html – расширение файла) ⇒ сохраняем.
  • 3. Открываем IE (Internet Explorer) или другой установленный по умолчанию браузер. В его меню пробуем найти и открыть сохраненный на компьютере файл index.html. Найти и открыть файл в любом браузере можно также в окошке, которое появится после набора на клавиатуре комбинации из двух клавиш: Ctrl и O – удерживаем Ctrl и после этого жмем латинскую букву O.
Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки 

Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки 

Урок 2. «Заголовок HTML страницы»

Урок 2.

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

На предыдущем уроке мы познакомились с  HTML заголовком  3-го уровня. Всего их 6: HTML заголовки HTML заголовок 1-го уровня HTML заголовок 2-го уровня HTML заголовок 3-го уровня HTML заголовок 4-го уровня HTML заголовок 5-го уровня HTML заголовок 6-го уровня

На предыдущем уроке мы познакомились с  HTML заголовком  3-го уровня. Всего их 6:

HTML заголовки HTML заголовок 1-го уровня

HTML заголовок 2-го уровня

HTML заголовок 3-го уровня

HTML заголовок 4-го уровня
HTML заголовок 5-го уровня
 HTML заголовок 6-го уровня

Для тегов заголовков характерно следующее: чем меньше цифра, тем больше размер шрифта.

Для тегов заголовков характерно следующее: чем меньше цифра, тем больше размер шрифта.

  • HTML заголовок  определяет название отдельной статьи или web-страницы.
  • В идеале страница должна иметь не более одного  HTML заголовка  1-го уровня, не более двух второго уровня и так далее.
  • HTML заголовки , независимо от того, что каждому уровню соответствует определенный размер, могут быть любых размеров – с помощью  CSS  возможно какое угодно форматирование.
HTML заголовки и их горизонтальное выравнивание Примеры: HTML заголовок слева HTML заголовок справа HTML заголовок по центру

HTML заголовки и их горизонтальное выравнивание

Примеры:

HTML заголовок слева

HTML заголовок справа

HTML заголовок по центру

Атрибуты и значения

Атрибуты и значения

  • align=""  – определяет выравнивание.
  • align="left"  – выравнивание по левой стороне.
  • align="right"  – по правой стороне.
  • align="center"  – определяет центрирование.
  • style="color:"  – определяет цвет текста.
Урок 3. «HTML текст, размер шрифта, форматирование текста»

Урок 3. «HTML текст, размер шрифта, форматирование текста»

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

Теги, форматирующие HTML текст :

  • Теги    →   жирный HTML текст (жирный шрифт).
  • Теги    →   жирный HTML текст (жирный шрифт).
  • Теги    →   моноширинный HTML текст (моноширинный шрифт).
  • Теги    →   моноширинный HTML текст (моноширинный шрифт).
  • Теги    →   моноширинный HTML текст (моноширинный шрифт).
  • Теги    →   HTML текст, размер больше обычного (крупный шрифт).
  • Теги    →   HTML текст, размер меньше обычного (мелкий шрифт).
  • Теги    →   наклонный HTML текст (наклонный шрифт).
  • Теги    →   наклонный HTML текст (наклонный шрифт).
  • Теги    →   наклонный HTML текст (наклонный шрифт).
  • Теги    →   подчеркнутый HTML текст (подчеркнутый шрифт).
  • Теги    →   зачеркнутый HTML текст (зачеркнутый шрифт).
  • Теги    →   HTML текст (шрифт) в нижнем индексе.
  • Теги    →   HTML текст (шрифт) в верхнем индексе.
HTML форматирование текста: зачеркнутый, подчеркнутый текст

HTML форматирование текста: зачеркнутый, подчеркнутый текст

  • ... жирный шрифт
  •   ... моноширинный шрифт 
  • ... размер шрифта больше обычного 
  • ... размер текста меньше обычного 
  • ... наклонный шрифт 
  • подчеркнутый текст (подчеркнутый шрифт)
  • зачеркнутый текст (зачеркнутый шрифт) 
  • нижний индекс 
  • верхний индекс 
HTML размер шрифта и текста Пример: HTML размер шрифта Текст высотой 9 пикселей Текст высотой 12 пикселей Текст высотой 15 пикселей Текст высотой 18 пикселей

HTML размер шрифта и текста

  • Пример:

HTML размер шрифта

Текст высотой 9 пикселей

Текст высотой 12 пикселей

Текст высотой 15 пикселей

Текст высотой 18 пикселей

Результат:

Результат:

Урок 4. « Определяем HTML цвет текста и его фон»

Урок 4.

« Определяем HTML цвет текста

и его фон»

Как изменить цвет HTML текста с помощь CSS атрибутов

Как изменить цвет HTML текста с помощь CSS атрибутов

  • HTML цвет текста  определяется с помощью  CSS  атрибутов.
  • HTML цвет текста  может быть задан в режиме HEX, например, color:#cc0000.
  • Цвет текста в HTML  также может быть задан словом, например, color:Black.
  • HTML фон текста  определяется значением атрибута background-color.
Попробуем изменить цвет текста в HTML : HTML цвет текста Заголовок 1-го уровня Первый параграф Второй параграф Третий параграф

Попробуем изменить цвет текста в HTML :

HTML цвет текста Заголовок 1-го уровня

Первый параграф

Второй параграф

Третий параграф

Строка style=

Строка style="color:#000000" является линейным  CSS  включением — устанавливает  цвет HTML текста  в режиме HEX. HEX — шестнадцатеричная система счисления (цифры от 0 до 9 и латинские буквы от a до f), которая по структуре сравнима с RGB (Red Greеn Blue). Результат:

Как изменить HTML цвет и фон текста Попробуем изменить фон текста в HTML : HTML, фон, текст, цвет HTML Фон текста оранжевый Цвет HTML текста белый, фон красный

Как изменить HTML цвет и фон текста Попробуем изменить фон текста в HTML :

HTML, фон, текст, цвет

HTML Фон текста оранжевый

Цвет HTML текста белый, фон красный

HTML цвет | Выбираем нужный цвет по имени Red Orange Yellow Purple Green DarkRed DarkOrange DeepSkyBlue DarkBlue Blue Gold Indigo DarkGreen DarkOrchid LightGreen LightSkyBlue Gray LightPink DeepPink Black MidnightBlue LemonChiffon LightGrey White Aqua GreenYellow Lime WhiteSmoke Aquamarine DimGray Fuchsia BurlyWood Crimson Beige Coral Chocolate BlanchedAlmond DarkCyan MediumOrchid LimeGreen FireBrick Gainsboro Violet DarkSlateBlue GoldenRod Tomato DarkSlateGray AliceBlue Wheat RosyBrown YellowGreen CornflowerBlue Khaki OrangeRed

HTML цвет | Выбираем нужный цвет по имени

Red

Orange

Yellow

Purple

Green

DarkRed

DarkOrange

DeepSkyBlue

DarkBlue

Blue

Gold

Indigo

DarkGreen

DarkOrchid

LightGreen

LightSkyBlue

Gray

LightPink

DeepPink

Black

MidnightBlue

LemonChiffon

LightGrey

White

Aqua

GreenYellow

Lime

WhiteSmoke

Aquamarine

DimGray

Fuchsia

BurlyWood

Crimson

Beige

Coral

Chocolate

BlanchedAlmond

DarkCyan

MediumOrchid

LimeGreen

FireBrick

Gainsboro

Violet

DarkSlateBlue

GoldenRod

Tomato

DarkSlateGray

AliceBlue

Wheat

RosyBrown

YellowGreen

CornflowerBlue

Khaki

OrangeRed


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

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

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

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

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

Информатика 5 класс (Россия)

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

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

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

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

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

Целевая аудитория: 11 класс.
Урок соответствует ФГОС

Скачать
Html страница и ее структура

Автор: Радова А.Ф.

Дата: 23.11.2018

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

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

object(ArrayObject)#863 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(109) "Конспект урока на тему: Создание веб-страницы: Мир животных "
    ["seo_title"] => string(64) "konspiekt-uroka-na-tiemu-sozdaniie-vieb-stranitsy-mir-zhivotnykh"
    ["file_id"] => string(6) "108791"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1403861222"
  }
}

object(ArrayObject)#885 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(159) "Конспект урока по информатике "Добавление таблиц, оформление рисунков на Web-страницах" "
    ["seo_title"] => string(93) "konspiekt-uroka-po-informatikie-dobavlieniie-tablits-oformlieniie-risunkov-na-web-stranitsakh"
    ["file_id"] => string(6) "104059"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1402663191"
  }
}

object(ArrayObject)#863 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(29) "Практикум по HTML "
    ["seo_title"] => string(17) "praktikum-po-html"
    ["file_id"] => string(6) "128572"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1415537194"
  }
}

object(ArrayObject)#885 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(29) "Основы языка HTML "
    ["seo_title"] => string(18) "osnovy-iazyka-html"
    ["file_id"] => string(6) "154908"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1421226441"
  }
}

object(ArrayObject)#863 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(129) "Урок по информатике «Создание web-страниц с помощью HTML. Основы языка HTML»"
    ["seo_title"] => string(80) "urok_po_informatikie_sozdaniie_web_stranits_s_pomoshch_iu_html_osnovy_iazyka_htm"
    ["file_id"] => string(6) "387969"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1486296286"
  }
}

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




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

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

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

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

Ваш личный кабинет

Восстановить пароль
Регистрация
Проверка свидетельства