Презентация "Основные теги HTML", информатика 9 класс
Оценка 4.9

Презентация "Основные теги HTML", информатика 9 класс

Оценка 4.9
Презентации учебные
pdf
информатика
5 кл—11 кл
16.11.2019
Презентация "Основные теги HTML", информатика 9 класс
Презентация "Основные теги HTML" разработана для уроков информатики в 9 классе или для дополнительных занятий по созданию Web-страниц. Содержит краткую информацию по основным тегам HTML, структуру web-страницы.
Trohacheva_Teg_HTML.pdf



Язык HTML

  HTML не является языком программирования, он предназначен для разметки текстовых документов. HTML состоит из тегов.

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

открывающий тег <...> и закрывающий тег

</...>. 

Структура HTML-документа

<html>  

      <head>  

            <title>Моя первая HTML-страница</title>  

     </head>  

     <body>  

             <H1>Первая страница</H1>

             <p>Здравствуйте!</p

             <IMG  SRC=“foto.jpg”   ALT=“Фото”>

     </body>

</html>

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

       Тег – код языка HTML , с помощью которого выполнятся разметка исходного текста. Тег записывается в угловых скобках.

 

       Имя атрибута

Имя тега      Значение атрибута

 

<H3 ALIGN = CENTER> Страница должна иметь заголовок </H3>

                  Атрибут                 Содержимое элемента           Закрывающий 

                                                                                                                           тег

     Теги не отображаются сами, а влияют на способ отображения документа. Атрибуты – свойства тегов.

 

Теги структуры

<HTML> Первый тег, сообщает веб-браузеру, что документ написан на языке  HTML.

      <HEAD> Этот тег указывает на начало области заголовка Web-страницы.                 <TITLE> Структура Web-страницы</title>  Обязательный контейнер,                                содержащий текст заголовка  Web-страницы,  отображается в                                заголовке окна браузера.

      </head> Конец области заголовка Web-страницы.

      <BODY > Тело Web-страницы. 

 

      </ BODY >  

</ HTML > Конец HTML-документа.

Уровни заголовков

     Заголовки позволяют структурно разделить текст на разделы.

<H1> Заголовок первого уровня </ H1>

<H2> Заголовок второго уровня </ H3>

………..

<H6> Самый маленький заголовок</ H6>

    Атрибут ALIGN – выравнивание управляет горизонтальным выравниванием, принимает значения:

      LEFT - влево,

     CENTER – по центру,

     RIGHT – вправо,

      JUSTIFY – по ширине.

 

<H1 ALIGN = CENTER > Заголовок первого уровня </ H1>

 

Форматирование текста

   <P> Текст </p> - абзац,  атрибут ALIGN  

   <br>  - переход на новую строку 

   <B> Текст </b> - выделение текста полужирным шрифтом 

   <I>Текст </i>  - выделение текста курсивом

   <Pre> Текст </pre> - предварительное форматирование текста. 

   <Center>  </Center> - выравнивание по центру

 

 

 

 

Форматирование текста

<font>...</font> - с помощью данного тега осуществляется  изменение внешнего вида текста. Имеет атрибуты:

color - цвет

face - шрифт

size — размер 

Изменения вносятся после тега <body> перед основным текстом.

Размер шрифта может принимать значения от 1 до 7, при этом 1 — самый маленький, 7 — самый большой.

 

<Font face= «Arial» size=3 color= «blue»> Это шрифт arial размером 3, цвет синий </font>

 

 

Списки

  Маркированный список:  

 

<UL TYPE=square >

         <LI> Первый пункт списка

         <LI> Второй пункт списка

        <LI> Третий пункт списка

</ul>

 

  Атрибут TYPE определяет внешний вид маркера:

  disc – закрашенные круглые маркеры (по умолчанию); circle – не закрашенные круглые маркеры; square – квадратные маркеры.

 

Списки

  Нумерованный список  

 

<OL>

         <LI> Первый пункт списка

         <LI> Второй пункт списка

         <LI> Третий пункт списка


</ol>

 

  Атрибут TYPE определяет вид символа списка:

  А прописные латинские буквы (A, B, C …);

  a – строчные латинские буквы (a, b, c …);

  I – большие римские цифры (I, II, III …);

  i – маленькие римские цифры (I, II, III …); 1 – арабские цифры (1, 2, 3 …) – по умолчанию.

  START=n – начальное значение списка.

Гиперссылки 

Гипертекстовая ссылка – основной элемент всех гипертекстовых систем, которые указывают на другой документ или на другую часть того же документа.

Задается тегами <A> </a>, обязательно наличие одного из атрибутов HREF и NAME

Ссылка за пределы данного документа:


 

<A HREF="адрес ссылки">Текст для щелчка </a>

 

Атрибут NAME позволяет перейти к отмеченному якорем месту этого же документа:

 

<A NAME="#имя_якоря">Текст для щелчка </a>

 

Рисунки на WEB-страничке 

  <IMG> - элемент для создания ссылки на графический файл (image). Он не содержит конечного тега - вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т.д.

Необходимым атрибутом является src - указатель на файл графики:

  src="Ссылка на файл".

  Например: 

       <IMG src="bos2.gif"> - обычный рисунок

 

Рисунки на WEB-страничке 

  Атрибуты тега <IMG>  

  HEIGTH - длина

  WIDTH - ширина

  ALIGN - позиционирование на экране (top, middle, bottom, left, right)

 


BORDER - толщина обрамления

  VSPACE - размер пустого пространства над и под изображением

  HSPACE - размер пустого пространства слева и справа от изображения

 

<IMG  SRC=“URL”   ALT=“Текст   HEIGTH =“длина”>

 

Горизонтальная линия

  <HR- горизонтальная линия (по умолчанию объемная с тенью) позволяет разделить длинный формально неограниченный текст на отдельные разделы. 

  Атрибуты:

  SIZE – толщина линии в пикселях;

  WIDTH – ширина линии в пикселях или в процентах от ширины окна браузера;

  ALIGN – положение на экране (слева, справа, по центру);

  NOSHADE – линия представляется простой однотонной темной полосой.

 

 

 

Бегущая строка

<MARQUEE WIDTH=200 BGCOLOR =#99ccff>Внимание!!!</MARQUEE>  

 

<MARQUEE ><IMG src=“Велосипедист.gif”></MARQUEE>  

 

  Атрибуты:

  ALIGN – позволяет разместить текст в верхней TOP, средней MIDDLE, нижней BOTTON области бегущей строки;

  BEHAVIORуправление бегущей строки на экране:

 


SCROLL – текст пересекает экран (по умолчанию);

  SLIDEтекст выдвигается на экран и останавливается;

  ALTERNATEтекст выдвигается,  затем перемещается взад-вперед.

  BGCOLORцвет фона;

  DIRECTIONнаправление движения текста (LEFT, RIGHT);

  HEIGHT – высота в пикселях или в %;

  WIDTHширина в пикселях или в %;

  LOOPколичество проходов бегущей строки;

  SCROLLAMOUNTскорость перемещения текста (1 – min, 2000-max); SCROLLDELAYвремя в млс для перерисовки текста.

 

Фон

Атрибуты тега <BODY>  bgcolor - цвет

<Body bgcolor=“green” >

<Body bgcolor=“#00FF00”>

Фон

  Атрибуты тега <BODY>  

  BACKGROUND – задает графическое изображение, которое, как кафельная плитка, заполнит фон документа.

 

<Body BACKGROUND =“путь_имя_файла.jpeg” >


 

  TOPMARGIN – верхняя граница в пикселях;

  BOTTOMMARGIN – нижняя граница в пикселях;

  LEFTMARGIN – левая граница в пикселях; RIGHTMARGIN правая граница в пикселях.

  LINK  - цвет гиперссылки;

  ALINK – цвет активной гиперссылки.

 

Таблицы 

  Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи:

выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением.

  При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элементы для описания каждой ячейки в с строке TD.

 

  <TABLE> </table> - внешний элемент таблицы

  <CAPTION> Подпись таблицы</CAPTION>

  <TR> </tr> - элемент, задающий строку таблицы

  <TD> </td> - элемент, задающий ячейку таблицы  <COL> - столбец таблицы Например: 

Таблица из 2 строк, в первой строке - 2 ячейки, во втрой – 3.

<TABLE>  

      <TR> <TD> 1.1</td> <TD> 1.2</td> </tr>  

      <TR> <TD>2.1 </td> <TD>2.2 </td> <TD>2.3 </td> </tr>  </table> 

Таблицы 

  ALIGN – выравнивание (LEFT, RIGHT, CENTER);

  BORDER – толщина границы (BORDER=3);

  BACKGROUND – фоновое изображение для всей таблицы;

  BGCOLOR – фоновый цвет;

  BORDERCOLOR – цвет рамки;

  CELLPADDING – расстояние от границ ячейки до ее содержимого;

  CELLSPACING – расстояние между ячейками в пикселах;

  HSPACE – свободное пространство от таблицы слева и справа;

  SPACE -  свободное пространство от таблицы снизу и сверху;

  COLSPEC – столбцы фиксированной ширины в символах или в процентах;

  WIDTH – ширина таблицы в пикселах или в процентах от текущей ширины окна браузера (WIDTH=256, WIDTH=100%).

Таблицы 

  ALIGN – выравнивание (LEFT, RIGHT, CENTER);

  BORDER – толщина границы (BORDER=3);

  BACKGROUND – фоновое изображение для всей таблицы;

  BGCOLOR – фоновый цвет;

  BORDERCOLOR – цвет рамки;

  CELLPADDING – расстояние от границ ячейки до ее содержимого;

  CELLSPACING – расстояние между ячейками в пикселах;

  HSPACE – свободное пространство от таблицы слева и справа;

  SPACE -  свободное пространство от таблицы снизу и сверху;

  COLSPEC – столбцы фиксированной ширины в символах или в процентах;

  WIDTH – ширина таблицы в пикселах или в процентах от текущей ширины окна браузера (WIDTH=256, WIDTH=100%).




Трохачева А.В., МБУ "Школа №86", г. Тольятти 2018

Выполните все задания по ссылке  http://mif.vspu.ru/books/html123/

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс

Презентация "Основные теги HTML", информатика 9 класс
Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
16.11.2019