Ученики на Учителя.com


Презентация "Язык разметки гипертекстовых документов HTML" 8 класс

Скачать материал
Подписи к слайдам:
«Язык разметки гипертекстовых документов HTML » Введение Каждый день всемирная паутина поглощает нас все больше и больше. Количество сайтов так же неуклонно растет. Для того, чтобы создать свой сайт необходимо знать язык HTML. HTML-документ – это обычный текстовый документ, содержащий специальные разметочные указатели (тэги).

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

Что означают эти буквы?(HTML) Hyper Text Markup Language Язык гипертекстовой разметки. Общее представление
  • Язык HTML был разработан британским учёным 
    • Тимом Бернерсом –Ли. 
  • Приблизительно в 1989—1991 годах.  
      • HTML создавался как язык для обмена научной и технической документацией, 
Для чего нужна разметка в HTML ? Именно язык гипертекстовой разметки HTML, ответственен за появление многих чудесных WEB-страничек, WEB-сайтов, наполненных текстами, картинками, звуками, анимацией, видеоклипами, ссылками… Именно он определяет:
  • Содержание.
    • Внешний вид,
      • Направленность странички.
Как создать ? Для создания HTML документов используют текстовые редакторы (например Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на .html или .htm вы получите полноценную web страничку. В каких средах работаем?
  • Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор)
  • Сохранить HTML- код так, чтобы страницу можно было просмотреть в Web-браузере:
    • Файл, Сохранить как (появится диалоговое окно) Где? В вашей папке сайта My Site Имя файла? «index.html» Сохранить
Что такое тэги?
        • Тэг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки.
            • Например: <html>, <br>

ТЭГ

одиночный

парный

(контейнер)

открывающий < >

закрывающий </ >

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

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

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

<HTML>

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

<HEAD>

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

<TITLE>

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

…

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

</TITLE>

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

</HEAD>

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

<BODY>

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

…

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

</BODY>

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

</HTML>

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

пример

Структура документа Структура простейшего HTML документа выглядит следующим образом: <html> <head> <title> Заголовок страницы </title> </head> <body> Заголовочная часть <head> </head>

HTML

<head>

<title>Информатика</title>

</head>

HTML

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

Основная часть <body> <h1>Мы приветствуем Вас!</h1> </body>

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

</h1> Web – странице,

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

HTML

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

HTML

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

<HTML>

<HEAD>

<ТIТLЕ> Моя первая Интернет-страничка! </TITLE>

</HEAD>

<BODY>

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

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

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

</BODY>

</HTML>

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

<html>

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

<head>

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

<title>Моя первая страничка</title>

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

</head>

<body>

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

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

<br>

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

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

</body>

</html>

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

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

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

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

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

<p align="center">Привет мир!!!</p>по центру:

<p align="left">Привет мир!!!</p>по левому краю:

<p align="right">Привет мир!!!</p>по правому краю

По обоим краям документа :<p align="justify">Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>

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

<html> <head> <title>Мой первый сайт </title> </head> <body> <p align="center">Привет мир!!!</p> <br> <p align="justify">  Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!  </p> </body> </html>

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

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

<h1> Привет мир!!! </h1>

<h2> Привет мир!!! </h2>

<h3> Привет мир!!! </h3>

<h4> Привет мир!!! </h4>

<h5> Привет мир!!! </h5>

<h6> Привет мир!!! </h6>

Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size - размер. ишется и выглядит это так: <font size="+4">Привет мир!!!</font> <font size="+2">Привет мир!!!</font> <font size="+0">Привет мир!!!</font> <font size="-1">Привет мир!!! </font> <font size="-2">Привет мир!!!</font>

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

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

<html> <head> <title>Мой первый сайт</title> </head> <body> <center><h2>Привет мир!!!</h2></center> <br> <p align="justify"> <font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font> </p> </body> </html>

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

Информатика - еще материалы к урокам: