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


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

Содержание

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

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

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

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

Слайд 2Hyper Text Markup Language или сокращенно HTML 
– язык гипертекстовой разметки документов, который

лежит в основе почти всех существующих web-страниц, что ставит его

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

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

кода

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

Слайд 4Рассмотрим его элементы:

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

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

Рассмотрим его элементы:           –   теги, определяющие начало

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

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

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

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

документа соответствует его собственная HTML структура. 
Правильная начальная структура HTML является залогом кросс-браузерности сайта.

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

Слайд 7Создадим на диске D или C папку Mой первый сайт (можно назвать ее как угодно). В

системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные

(Аccessories), выбираем Блокнот .

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

 – определяют заголовок 3-го уровня.

 – определяют параграф.
Создадим на диске D или C папку Mой первый сайт (можно назвать ее как угодно). В системном меню Start или Пуск заходим в раздел Программы (All

Слайд 8Пример структуры документа:
HTML структура документа Мой первый заголовок Мой первый параграф Мой второй

параграф

Пример структуры документа:   HTML структура документа   Мой первый заголовок Мой первый параграф Мой

Слайд 9Пишем код страницы
Последовательность действий следующая:
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.


Пишем код страницыПоследовательность действий следующая:1. Пишeм в Блокноте код HTML страницы.2. Заходим в File ⇒ Save as (Файл ⇒ Сохранить как), находим нашу папку D\Mой первый

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

нажатием кнопки 


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

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

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

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

6:
HTML заголовки HTML заголовок 1-го уровня HTML заголовок 2-го уровня HTML заголовок 3-го

уровня

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

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

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

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

размер шрифта.
HTML заголовок определяет название отдельной статьи или web-страницы.
В идеале страница

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

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

Слайд 14HTML заголовки и их горизонтальное выравнивание
Примеры:


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






align="right" style="color:Gray">HTML заголовок справа
HTML заголовок по центру

HTML заголовки и их горизонтальное выравнивание Примеры:HTML заголовок слева HTML заголовок справа HTML заголовок по центру

Слайд 15Атрибуты и значения
align="" – определяет выравнивание.
align="left" – выравнивание по левой стороне.
align="right" – по

правой стороне.
align="center" – определяет центрирование.
style="color:" – определяет цвет текста.

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

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

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

Слайд 17HTML текст является основной составляющей большинства страниц интернета.
По ключевым фразам в тексте

HTML-страницы пользователи могут найти ваш сайт.
HTML текст может быть любого размера и

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

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

Слайд 18Теги, форматирующие HTML текст:
Теги     →   жирный HTML текст (жирный шрифт).
Теги 

   →   жирный HTML текст (жирный шрифт).
Теги     →   моноширинный HTML

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

Теги, форматирующие HTML текст:Теги     →   жирный HTML текст (жирный шрифт).Теги     →   жирный HTML текст (жирный шрифт).Теги    

Слайд 19HTML форматирование текста: зачеркнутый, подчеркнутый текст
... жирный шрифт
 ... моноширинный шрифт 
...

размер шрифта больше обычного 
... размер текста меньше обычного 
... наклонный шрифт 
подчеркнутый

текст (подчеркнутый шрифт)зачеркнутый текст (зачеркнутый шрифт) 
нижний индекс 
верхний индекс 

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

Слайд 20HTML размер шрифта и текста
Пример:
HTML размер шрифта Текст высотой 9

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

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


HTML размер шрифта и текста Пример:  HTML размер шрифта   Текст высотой 9 пикселей Текст

Слайд 21Результат:

Результат:

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

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

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

текста определяется с помощью CSS атрибутов.
HTML цвет текста может быть задан в режиме HEX,

например, color:#cc0000.
Цвет текста в HTML также может быть задан словом, например, color:Black.
HTML фон текста определяется значением атрибута background-color.

Как изменить цвет HTML текста с помощь CSS атрибутов  HTML цвет текста определяется с помощью CSS атрибутов.HTML цвет текста может

Слайд 24Попробуем изменить цвет текста в HTML:
HTML цвет текста Заголовок 1-го

уровня Первый параграф Второй параграф Третий параграф

Попробуем изменить цвет текста в HTML:   HTML цвет текста   Заголовок 1-го уровня Первый

Слайд 25Строка style="color:#000000" является линейным CSS включением — устанавливает цвет HTML текста в режиме HEX. HEX —

шестнадцатеричная система счисления (цифры от 0 до 9 и латинские

буквы от a до f), которая по структуре сравнима с RGB (Red Greеn Blue). Результат:
Строка style=

Слайд 26Как изменить HTML цвет и фон текста Попробуем изменить фон текста

в HTML:
HTML, фон, текст, цвет HTML Фон текста оранжевый

color:#ffffff">Цвет HTML текста белый, фон красный


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

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

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

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

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

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

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

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


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

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