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


Основы языка HTML

Содержание

Основные понятияHTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).HTML предназначен для создания веб-страниц во всемирной паутине.

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

Слайд 1Санкт-Петербургское государственное бюджетное
профессиональное образовательное учреждение «Фельдшерский колледж»
________________________________________________________________
Основы языка HTML
Лужкова

И. Е.
2017

Санкт-Петербургское государственное бюджетное профессиональное образовательное учреждение «Фельдшерский колледж»________________________________________________________________Основы языка HTMLЛужкова И. Е.2017

Слайд 2Основные понятия
HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).
HTML предназначен

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

Основные понятияHTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).HTML предназначен для создания веб-страниц во всемирной паутине.

Слайд 3Программы для просмотра Web - страниц
Microsoft Internet Explorer
Netscape Communicator
The Bat!
Opera

и т.д.

Программы для просмотра Web - страницMicrosoft Internet ExplorerNetscape CommunicatorThe Bat!Opera и т.д.

Слайд 4 Блокнот
(для создания страницы)

Internet Explorer
(для интерпретации файлов)

Программы для создания HTML – файлов:

Блокнот (для создания страницы)

Слайд 5
Гипертекст (hypertext) – текст, содержащий ссылки на другие

веб-страницы, серверы или ресурсы с возможностями выполнения переходов.
Гипертекст

Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы или ресурсы с возможностями выполнения

Слайд 6Основные понятия
Теги - это метки, которые используются для указания браузеру,

как он должен показывать web-сайт.
Большая часть HTML тегов состоит из

двух частей:
открывающий тег <...> 
закрывающий тег 
Теги не чувствительны к регистру
Основные понятияТеги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт.Большая часть HTML

Слайд 7




Одинарные

Двойные

Пример:  
….
 

Пример:

Тег


Слайд 8 ТЕКСТ с которым работаем

ТЕКСТ с которым работаем

Слайд 9 Они передают программе просмотра страницы основную информацию для

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

….








Они передают программе просмотра страницы основную информацию для идентификации и организации документа. Три самых важных

Слайд 10Структура HTML документа.
Абсолютно любой документ, построенный на базе HTML будет

состоять, по меньшей мере, из следующих тегов:
- Это самый

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



Структура HTML документа. Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих

Слайд 11 - Название, оглавление страницы, предназначен для поисковых машин, этот  тег

всегда помещается внутри - …
- В этот тег помещается

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

- Название, оглавление страницы, предназначен для поисковых машин, этот  тег всегда помещается внутри - … -

Слайд 13Пример:
    Это моя первая страница    Привет, мир!

Пример:     Это моя первая страница     Привет, мир!

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

содержимым применяются атрибуты тегов.
Атрибуты тега тела документа
- Цвет фона

документа, используя значение цвета в виде RRGGBB.
- Цвет текста документа

Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов.Атрибуты тега тела документа

Слайд 15Задание цвета на языке HTML
Шестнадцатеричные значения
(цветовая система базируется

на трёх основных цветах – красном, зеленом и синем –

обозначается RGB)
Например: #000000, #0000FF, #FF0000,
#FFFFFF
Мнемонические обозначения
(название цвета)
Например: Red, White, Blue, Green
Задание цвета  на языке HTMLШестнадцатеричные значения  (цветовая система базируется на трёх основных цветах – красном,

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

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

Слайд 17..... - Определяет величину заголовка по их степени важности.  ..... -

Самый большой заголовок.  ..... - Самый маленький заголовок.
….. - Определяет текст

жирным шрифтом.  …..- Определяет текст наклонным (курсив) шрифтом.  …..- Имитирует стиль печатной машинки.  ….. - Задаёт цвет текста, шестнадцатеричном коде. …..- Задаёт величину шрифта в пределах от “1” до “7”. 
…..- Увеличивает размер текст на условную 1-цу от заданного.  …..- Этот тег, браузер определяет как жирное начертание текста. 
…..- Этот тег, браузер определяет как наклонное (курсив) начертании текста. 

Атрибуты текста документа

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

Слайд 18Форматирование текста документа
…..- Определяет новый параграф текста с предварительным пропуском

одной строки.  - Выравнивает текст относительно одной из сторон документа. Значения: “left”,“right”,“justify“, “

center”.  Пример: текст

Текст по центру.

Форматирование текста документа…..- Определяет новый параграф текста с предварительным пропуском одной строки.   - Выравнивает текст относительно

Слайд 19Пример Теги для заголовка
Самый большой заголовок
Заголовок 2

Заголовок 3
Заголовок 4
Заголовок 5
Самый

маленький заголовок 6
Пример Теги для заголовка Самый большой заголовок Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Самый маленький

Слайд 21Изменение фона страницы
Чтобы создать цвет фона страницы, внутри начального элемента

указывается атрибут bgcolor= «цвет», например:

Основные цвета:
Белый white
Желтый yellow
Зеленый

green
Красный red
Синий blue
Черный black
Изменение фона страницыЧтобы создать цвет фона страницы, внутри начального элемента указывается атрибут bgcolor= «цвет», например:Основные цвета:Белый 		whiteЖелтый		yellowЗеленый

Слайд 22
Тестовая страница

Эта страница является тестовой
Самый большой

заголовок
Заголовок 2
Заголовок 3
Заголовок 4


Заголовок 5

Самый маленький заголовок 6



Тестовая страницаЭта страница является тестовой Самый большой заголовок Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Самый

Слайд 24Отображение текста курсивом и жирным шрифтом
Для обозначения курсива используют парный

тег ...
Для отображения жирным шрифтом использут парный тег ...
Например:

Тестовая страница

Эта

страница является тестовой



Отображение текста курсивом и жирным шрифтомДля обозначения курсива используют парный тег ...Для отображения жирным шрифтом использут парный

Слайд 26Пример Изменение цвета текста
Для изменения цвета текста используют атрибут text тега

:



Пример Изменение цвета текстаДля изменения цвета текста используют атрибут text тега :

Слайд 27 - Определяет нумерованный список.  - Объекту, заключённому в этот

тег присваивается номер.  Также применяется атрибут:  start - Указывает стартовый номер.  type - Определяет характер

обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.
...

- Определяет нумерованный список.   - Объекту, заключённому в этот тег присваивается номер.  Также применяется атрибут: 

Слайд 28Пример: 
  морковь  капуста  яблоки  уксус  сахар  соль 
Результат:
3. морковь
4. капуста
5. яблоки
6. уксус
7. сахар
8. соль

Пример:    морковь  капуста  яблоки  уксус  сахар  соль  Результат:3. морковь4. капуста5. яблоки6. уксус7. сахар8. соль

Слайд 29Графические элементы на странице
          Вставляет изображение на страницу.
 Форматирует положение

изображения в документе. Может иметь значения: left, right, center; bottom,

top, middle.
Устанавливает толщину рамки вокруг изображения
Графические элементы на странице          Вставляет изображение на страницу. Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom,

Слайд 30Устанавливает поля сверху и снизу или поля слева

и справа.
- Добавляет горизонтальную линию.
  Указывает ширину линии в

пикселах или процентах.

Линия без тени. 

 Определяет цвет линии.
Устанавливает поля сверху и снизу или поля слева и справа. - Добавляет горизонтальную линию.  Указывает ширину линии в

Слайд 31Создание таблиц
   Тег создающий таблицу.
Задает строку в таблице. 
Задает отдельную

ячейку в таблице.
Задает заголовок таблицы (обычная ячейка с форматированием

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

Слайд 32Атрибуты таблицы
         Определяет толщину рамки.
 Определяет расстояние между ячейками
Устанавливает

ширину таблицы. (Значение параметра может быть в пикселях или процентах)

height="#">Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах)
Атрибуты таблицы         Определяет толщину рамки. Определяет расстояние между ячейкамиУстанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах)Устанавливает

Слайд 33Указывает количество столбцов, объединенных в одной ячейке.
 Указывает количество

строк, объединенных в одной ячейке. 
 Задает ширину ячейки таблицы в

пикселях или процентах.
Задает высоту ячейки таблицы в пикселях или процентах.
Указывает количество столбцов, объединенных в одной ячейке. Указывает количество строк, объединенных в одной ячейке.  Задает ширину ячейки таблицы в

Слайд 34Создание таблиц
В теги пишем тег для вставки таблица

>, если надо, указываем ширину бордюра таблицы() и т.д.

Закрывающий тег ставим в конце таблицы.
Создаём СТРОЧКУ тегом
Разбиваем СТРОЧКУ НА СТОЛБЦЫ с помощью тега
Создаём вторую строчку тегом
Разбиваем её и т.д.

Создание таблиц В теги пишем тег для вставки таблица , если надо, указываем ширину бордюра таблицы() и

Слайд 35Оформление гиперссылок
- Задаёт переход на другие

ресурсы.
- Название страницы - Задаёт переход на другие

страницы сайта.
- Название страницы - Задаёт переход на другую страницу сайта в новом окне.

Оформление гиперссылок - Задаёт переход на другие ресурсы. - Название страницы - Задаёт переход на другие страницы

Слайд 36Атрибуты гиперссылок
Указывает в каком окне открывать гиперссылку.  
Цвет текста гиперссылок
Атрибут

LINK служит для выделения гиперссылок, которые еще не посещались пользователем.
Атрибут

VLINK - уже посещенные ссылки.
Атрибут ALINK - выделяет активную гиперссылку.
Атрибуты гиперссылок Указывает в каком окне открывать гиперссылку.  Цвет текста гиперссылокАтрибут LINK служит для выделения гиперссылок, которые

Слайд 37Тег с одним атрибутом согласно синтаксису выглядит следующим образом

Тег с одним атрибутом согласно синтаксису выглядит следующим образом

Слайд 38В общем виде любой одиночный или парный тег можно представить

схематически в следующем виде:

В общем виде любой одиночный или парный тег можно представить схематически в следующем виде:

Слайд 39Схема страницы сайта


Заголовок


ТЕКСТ И ДРУГИЕ НЕОБХОДИМЫ ТЕГИ И ИХ АТРИБУТЫ



Схема страницы сайтаЗаголовокТЕКСТ И ДРУГИЕ НЕОБХОДИМЫ ТЕГИ И ИХ АТРИБУТЫ

Слайд 40Спасибо за внимание!

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

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

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

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

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

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


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

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