Основы языка HTML
методическая разработка по информатике и икт (9, 10 класс)

Хирьянова Виктория Александровна

В данной презентации "Основы языка HTML" Вы можете найти понятия HTML-документов, тегов и атрибутов. Также как создаются HTML-документы, списки и таблицы HTML-документах. Рассмотреть примеры.

Скачать:

ВложениеРазмер
Файл osnovy_yazyka_html.pptx127.91 КБ

Предварительный просмотр:


Подписи к слайдам:

Слайд 1

Основы языка HTML : тэги, атрибуты тэгов, списки, таблицы ГБОУ школа №552 Пушкинского района г. Санкт-Петербург Хирьянова В.А.

Слайд 2

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

Слайд 3

Теги Тэг – инструкция браузеру, указывающая способ отображения текста.

Слайд 4

ПРАВИЛА ЗАПИСИ ТЭГОВ Тэг всегда начинается со знака «меньше» (<) и оканчивается знаком «больше» ( >) Например:

Слайд 5

Виды тегов Одиночный 2. Парный (контейнер) открывающий < > закрывающий

Слайд 6

СТРУКТУРНЫЕ ТЭГИ Всё содержимое файла Интернет-страницы заключается в контейнер < html >…, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать.

Слайд 7

СТРУКТУРНЫЕ ТЭГИ начало контейнера HTML-документа начало контейнера заголовка начало контейнера строки – названия страницы … строка названия страницы конец контейнера строки – названия страницы конец контейнера заголовка начало контейнера тела страницы … тело (всё содержимое) страницы конец контейнера тела страницы конец контейнера HTML-документа

Слайд 8

Рассмотрим пример

Слайд 9

Списки в HTML- документах

Слайд 10

Списки в HTML- документах могут быть следующих видов: Неупорядоченные (маркированные) списки Упорядоченные ( нумерованный) списки Многоуровневые списки

Слайд 11

Неупорядоченные (маркированные) списки Например, для того чтобы создать вот такой список: Первый элемент Второй элемент Третий элемент Текст нужно расположить между тэгами < ul > и . А каждый новы элемент начинается с метки

  • Необходим следующий HTML- код: < ul >
  • Первый элемент
  • Второй элемент
  • Третий элемент

    Слайд 12

    Атрибуты тэга < ul > TYPE определяет вид маркера. Может иметь значения: disk - закрашенный кружок square – закрашенный квадратик circle – не закрашенный кружок По умолчанию используется type=‘’disc’’ Пример написания: < ul type=‘’circle’’>

    Слайд 13

    Упорядоченные ( нумерованный) списки Текст нужно расположить между тэгами < о l> и . Например, для того чтобы создать вот такой список: Первый элемент Второй элемент Третий элемент Необходим следующий HTML- код: < o l >

  • Первый элемент
  • Второй элемент
  • Третий элемент

    Слайд 14

    Атрибуты тэга < o l > TYPE определяет стиль нумерации пунктов. Может иметь значения: А – Нумерация заглавными латинскими буквами а - Нумерация маленькими латинскими буквами I – нумерация большими римскими цифрами i - нумерация маленькими римскими цифрами 1 - нумерация арабскими цифрами START определяет первое число, с которого начинается нумерация пунктов (используйте только целые числа) По умолчанию используется type=‘’ 1 ’’ , start =‘’1’’. Пример написания: < ol type=‘’A’’ st а rt = “3”>

    Слайд 15

    Многоуровневые списки рассмотрите самостоятельно!!!

    Слайд 16

    Таблицы в HTML- документах

    Слайд 17

    Границы таблицы Таблица начинается с тега

    и заканчивается тегом < / table>

    Слайд 18

    Атрибуты тега

    задает толщину рамки таблицы
    устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.
    задает расстояние между ячейками
    задает расстояние между содержимым ячейки и ее рамкой
    устанавливает ширину таблицы в пикселях или процентах от ширины документа
    устанавливает высоту таблицы в пикселях или процентах от ширины документа

    Слайд 19

    Строки таблицы Каждая строка таблицы начинается с тега < tr > и заканчивается тэгом < / tr >

    Слайд 20

    Атрибуты тега < tr > < tr align=“ ? ”> устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right. < t r valing =“ ? ”> устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom.

    Слайд 21

    Ячейки таблицы Каждая ячейка таблицы начинается с тега

    и заканчивается тегом < / td>

    Слайд 22

    Атрибуты тега

    устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right. устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom. устанавливает ширину ячейки устанавливает высоту ячейки Указывает количество столбцов, которое объединено в одной ячейке ( По умолчанию = 1) Указывает количество строк, которое объединено в одной ячейке ( По умолчанию = 1) Не позволяет программе просмотра делать перевод строки в ячейке таблицы

    Слайд 23

    Рассмотрим пример

    Слайд 24

    Создание гиперссылок

    Слайд 25

    Типы ссылок Ссылка на файл < a href = ‘’ Путь к файлу/его название ’’> Ссылка на файл < / a> Ссылка на сайт < a href= "http://название сайт"> Ссылка на сайт < / a > Ссылка на страницу < a href= "http://название сайта/страница"> Ссылка на страницу < / a > Все типы ссылок создаются абсолютно одинаково. Разница только в адресе объекта, на который нужно сослаться.

    Слайд 26

    Атрибуты тэга Атрибут target _blank — открывает ссылку в новой вкладке. _parent — загружает ссылку в родительском окне. _self — по умолчанию. Открывает ссылку в этом же окне. Пример < a href= "http://www.seoded.ru/" target= " _blank " > Главная страница < / a >

    Слайд 27

    Атрибуты тэга Атрибут title С его помощью создаётся всплывающая подсказка, которая появляется при наведении мыши на ссылку . Пример < a href= "http://www.seoded.ru/" title= "Перейти на главную страницу" >Главная страница< /а >

    Слайд 28

    Задание цвета всех ссылок на странице Цвета ссылок задаются в качестве атрибутов тега < body > . link — определяет цвет ссылок на веб-странице . Цвет по умолчанию синий, #0000FF. alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на неё кнопки мыши. Цвет по умолчанию красный, #FF0000. vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080. Пример

    Слайд 29

    http://www.seoded.ru/beginner/html/giperssilki.html#6 http://htmlbook.ru/content/tsvet-ssylok


    По теме: методические разработки, презентации и конспекты

    Обобщающий урок «Разработка Веб-сайтов с использованием языка HTML»

    Этот урок является заключительном  в  курсе “Разработка  Web-сайтов  с  использованием  языка  НТМL” . Он проведится его в  форме конкурса. Урок  стоит из ...

    Тест по теме "Основы языка HTML"

    Проверочный тест по теме "Основы языка гипертекстовой разметки HTML" для учащихся 9 класса...

    Методическая разработка "Основы языка разметки гипертекста HTML" 10 класс

    В архиве есть файл с конспектом урока и практическая часть "Интерактивные формы". УМК Угринович Н.Д....

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

    В настоящее время любой пользователь должен уметь представлять свою информацию в Интернет. Можно воспользоваться сервисами, например Ucoz, заполнить шаблоны web-страниц и не владея навыками web-констр...

    урок по теме: Основы языка разметки гипертекста HTML

    Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании....

    2 Внеурочные занятия 8 класс. Основы языка разметки гипертекста HTML

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

    Основы языка разметки гипертекста HTML

    Методическая разработка урока по информатике для обучающихся 10 класса (базовый уровень) по теме «Основы языка разметки гипертекста HTML» Тема урока: Основы языка разметки г...