Язык разметки гипертекста HTML

Автор работы: Пользователь скрыл имя, 21 Октября 2013 в 02:06, реферат

Краткое описание

Открывая в браузере любую Web- страницу, мы текст , картинки, кнопки, таблицы и м ногою другое. Для того, чтобы создать Web –страницу , может потребоваться всего лишь текстовый редактор Notepad.
Окройте любую Web- страничку. То, что вы видите в броузере – это ее “лицо”. Чтобы увидеть “изнанку” Web- страницы , выполните команду View \ HTML Code. Откроется текстовый редактор Блокнот, в котором вы увидите “устройство” этой страницы.

Содержание

1.Назначение HTML. Основные понятия.
2. Структура HTML документа
3. Улучшеная страничка
Форматирование текста
Управление цветом
4. Рисунки на Web - странице.
5. Гиперссылки
6. Таблицы
Создание и форматирование таблиц
Разметка Web- страницы при помощи таблицы

Скачать полностью (81.75 Кб) Сколько стоит заказать работу?
Прикрепленные файлы: 1 файл

HTML_lecture_1.doc

— 350.00 Кб (Скачать документ)

Лекция 11.1.doc   V- 0,2

Cтр. из 13

  


  Лекция 1. Язык разметки гипертекста HTML.

 

1.Назначение  HTML. Основные понятия.

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

3. Улучшеная страничка

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

      Управление  цветом

4.  Рисунки   на  Web -  странице.

5. Гиперссылки

6. Таблицы

     Создание  и форматирование  таблиц

      Разметка Web-  страницы при помощи  таблицы

 

 

Назначение  HTML. Основные понятия.

 

Открывая  в браузере любую  Web-  страницу,  мы  текст ,  картинки, кнопки, таблицы  и  м ногою  другое. Для того,  чтобы  создать  Web –страницу ,  может  потребоваться  всего лишь  текстовый  редактор  Notepad.

Окройте  любую  Web- страничку. То, что  вы  видите  в  броузере – это  ее  “лицо”. Чтобы увидеть  “изнанку”  Web- страницы ,  выполните  команду  View \ HTML Code. Откроется   текстовый редактор  Блокнот,  в  котором  вы  увидите  “устройство” этой  страницы.

Введем  несколько  новых  терминов.

НТML – язык  разметки  гипертекста

Гипертекст -  информационная  структура, позволяющая устанавливать смысловые святи между  племенами текста  на  экране  комп’ютера  таким образом,  чтобы можно было  легко осуществлять  переходы от  одного  элемента  к другому.  На  практике  в гипертексте некоторые слова выделяются   путем  подчеркивания  или  окрашивания  в  другой цвет ( гиперссылки ). Выделение словаговорит  о  наличии  святи  этого  слова  с  некоторым  документом,  в  котором  тема,  связанная  с выделенным   словом, рассматривается  болем  подробно.

Отдельный  документ, выполненный  в  формате  HTML,  называется:

HTML – документом

Web- документом

Web- страницей

Такие  страницы имеют расширение  HTM, HTML.

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

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

Каждая  HTML -  страница  имеет свой  уникальный   URL -  адрес  в  Интернете.

Скрипт

Браузер -  программа для просмотра Web-  страниц

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

Любая  Web- страница  представляет собой  набор элементов .Основная  идея  гипертекста – возможность вложения  элементов.

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

< Начальный  тэг >Содержание элемента  </Конечный  тэг>

 

 

Пример 1.

< P><I>  Этот текст в отдельном  обзаце   </ P></I>

< P  align = " center"><I>  Этот текст выровнен  по центру экрана </I></ P>

Атрибут -   параметр  или свойство  элемента. Атрибуты располагаются внутри  начального тэга и отделяются  друг  от   друга  пробелами.

Пример 2.

< P  align = " center">  Этот текст выровнен  по центру экрана   </ P>

Табуляция для  вложенных,  новая строка для каждого элемента.

 

Структура  HTML  документа. Простейшая  HTML  -  страничка.

 

Устройство простейшей   HTML- пронрамми  изучим  на  следующем  примере.

Любая  Web -  страница  начинается    с тєга    <HTML>  и  заканчивается   тєгом   </HTML>.

Пример 1. doc1.htm

  

<HTML>

    <HEAD>

        < meta http-equiv = “Content-Type”

                 content =”text/html;   charset = windows-1251 “>

         <TITLE>  Упражнение   1     </TITLE>

    </HEAD>

    <BODY>

          <h1> Первый   HTML --  документ  </h1>

          <hr>

           <p>

Корова  похожа  на  лошадь.

А лошадь  не похожа  на корову.

Имеено это  сходство

 мы  берем  за  основу    

          </p>

    </BODY>

</HTML>

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

Начало головной  части

Информация  о документе

 

Название  документа

Конец  головной  части

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

 

Заголовок

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

Начало  абзаца

Абзац

 

 

 

Конец  абзаца

Конец  тела  документа

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


HTML – программа

Команды языка  HTML  (теги)  заключаються   в угловые скобки.  Теги  парные. Первый тег  открывает  описание  команды, второй ,  отличающийся  от  первого  наличием  косой  черты „/” перед  ключевым  словом – закрывает его.

Тег <HTML> открывает  программу,  а  тег  </HTML> -  закрывает ее.

Между  этими двумя основными  тегами  располагается  головная  часть  программы  и  ее  тело.

<HTML>

        головная  часть

        тело 

</HTML>

 

Головная  часть  программы

В блоке <HEAD> … </HEAD> описываются   общие правила отображения HTML –документа и содержится   вспомогательная  информация   о  документе.

Команда  <META  >   задает  информацию  о  кодировке,  в  которой  написан  HTML -  документ.( стандартная  кодировка  Windows ).

Между парой  тегов  <TITLE>  располакается  имя   документа , которое  показывается    в заголовке окна браузера.

 

Тело программы

Между  тегами <BODY>  располагаются  команды, следуя  которым  браузер  выводит   информацию  в  окно  документа.

<body background= файл_картинка   bgcolor=цвет>

Осрбый  паркетный  фон: висота  -  1  пикел, ширина-1600 пикселов.

Заголовки

Разделяют   информацию на  отдельные логические  части. Поддерживаются заголовки 6 -  уровней.

<Hn>Текст заголовка   </Hn>  n = 1-6

 

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

Горизонтальная  линия задается  тегом  <hr>.  Он не имеет  парного. <hr>.

Абзац

Абзацы  отделяются  друг  от друга    пустыми   строками.  Задается  абзац  тегам  <p> и </p>,  между которыми  помещается  текст. Парный  тег </p> просто  игнорируется  браузером.

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

  • Перед  абзацем  выводится  пустая  строка;
  • Абзац  выравниватся  по  левому  краю;
  • Между  словами помещается  ровно  по  одному  пробелу независимо от того,  сколько  пробелов  проставлено  в  HTML  программе;
  • Перенос  текста  на  новую  строку  происходит тогда,  когда очередное  слово  не  помещается  на  экранной  строке,  а  не тогда, когда  новая  строка  начинается  в  HTML –программе.

 

Как работает  браузер

Улучшеная  страничка

 

   <p>Корова  похожа  на  лошадь.

   <p>А лошадь  не похожа  на корову. 

   <p>Имеено это  сходство

   <p> мы  берем за  основу    

Принудительный  разрыв  строки

Команда <br> заставляет   браузер продолжать  вывод абзаца  с новой строки. Не имеет парного.

      <p>

          Корова  похожа  на  лошадь. <br>

          А лошадь  не похожа  на корову. <br>

          Имеено это  сходство  <br>

          Мы  берем  за  основу .   

 

Вопросы  и  упражнения.

  1. Что такое HTML-  программа
  2. Кто выполняет  программу
  3. При  записи  абзаца поставили между соседними словами  поставили   5 пробелов.Сколько  прбелов увидит он  в  броузере ? ( пять,  один,  ни  одного,  два )
  4. <P>

                  Иванов

                  Иван

</P>

Как  покажет  текст  браузер?

    • в две строчки
    • в  одну  строчку с  двумя  прбелами
    • в  одну  строчку с  одним  прбелом
    • не  покажет  вовсе
  1. Какая  из  трех  программ задает  вывод  текста  в две строки:

 

Программа 1

Программа 2

Программа 3

      <P>

                  Іванов <br>

                  Иван<br>

</P>

     <P>

                  Іванов<br>

                  Иван

</P>

     <P>

                  Іванов <br> Иван

</P>


 

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

Структура,  стиль и внешний вид  текстового  документа

Можно  рекомендовать  следующий  способ  оформления:

Программирование  вывода  текста

Открывающие  теги  могут  содержать  атрибуты,  т.е. дополнительную  информацию о  свойотображаемого  на экране  элемента. Атрибуты записываются  через пробел от  его имени в виде отдельного  ключевого слова,  знака «=»   и  параметра ( значения  атрибута ).  Порядок  следования  не важен.  Действует   внутри  тега.

Атрибут  size  определяет  толщину  линии

< hr  size=1>

 

Пример 2. doc2.htm

  

<HTML>

    <HEAD>

        < meta http-equiv = “Content-Type”

                 content =”text/html;   charset = windows-1251 “>

         <TITLE>  Вид  2     </TITLE>

    </HEAD>

    <BODY    bgcolor = white  text = black >

          <h1>    Сборник  газетных вырезок  </h1>

          <hr>

           <p>

           Заметка  из  газеты  <cite> «Станок»  </cite>

 

              <p>

          Действительно, в отделе <cite>”Что случилось  за  день”</cite> нонпарелью  было  напечатано:

                   <font color =red>

                        <h3   align = center> Попал  под  лошадь   </h3>                       

                   

                       <small>                  

                                 <p>

Вчера на  плошади попал под  лошадь  извозчика

                         </small>

                  </font>

              <p>

Это  извозчик отделался  легким  испугом

              <p  align=right>

<cite>”Двенадцать стульев “</cite><br> Илья Ильф,

Евгений  Петров

        </BODY>

</HTML>

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

Начало головной  части

Информация  о документе

 

 

Название  документа

Конец  головной  части

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

Заголовок

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

Начало  абзаца

Выделено  название  газкты

 

 

 

 

 

ачало  подцитаты

Задан  красный  цвет

Заголовок  выровнен по  центру пдцитаты

Уменьшен размер  шрифта

 

 

Размер  восстановлен

Восстановлен черный  цвет

 

 

Конец  тела  документа

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

Абзац  выровнен  справа

 

 

Конец  тела  программы

Конец  программы


 Форматирование  шрифта

      <font  size=3>      <font>

 Форматирование  абзаца

      <P>                            </P>   -    выравнивает  абзац  по  левому  краю

     <P align=left     >       </P>   -    выравнивает  абзац  по  левому  краю

     <P align=right  >       </P>   -    выравнивает  абзац  по  левому  краю

     <P align=center >       </P>   -    выравнивает  абзац  по  левому  краю

Вид  тэга

Описания  и  атрибуты

<BIG>

Укрупнение  шрифта

<BLOCKQUOTE>

Большая  цитата

<CENTER>

Выравнивание   блока  по  центру

<CITE>

Цитата

<DIV>

Блок (контейнер)

<EM>

Выделение

<FONT>

Мзменеиие  шрифта

<Hn>

Заголовок

<HR>

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

<PRE>

Авторскте  фориатирование

<P>

Абзац

<SMALL>

Уменьшение  шрифта

<STRONG>

Устленное  выделение

<SUB>

Нижний  индекс

<SUP>

Верхний  индекс

<TT>

  

 

Цвет  фона  и цвет  шрифта

Цвет для  фона  и  шрифта можно  задать  с  помощью  при  помощи  атрибутов  bgcolor и text в теге   в теге <body>.

    <BODY    bgcolor = white  text = black >

Цвет  шрифта можно  менять  внутри  документа многократно  при  помощи  команды <font>.  Установка цвета  в  этой  команде  выполняется  при  помощи  атрибута color.

<font color="red">                                 </font>.

Cамое лучшее  -  не  задавать шрифт  вовсе. Браузер  будет  показывать   документ  шрифтом „по умолчанию”.Для изменения размеров   шрифта есть  специальные  команды: <big> </big>’,

<small>  </small>. Команда   <big>  увеличивает размер  шрифта,  а  команда  <small>   уменьшает .

Название можно  выделить при  помощи   команды  <cite>  </cite>. Большие  цитаты  лучше выделять  из основного текста  при  помощи  команды  <blockquote>  </blockquote>

Выделение

Усиленное  выделение

 

Имя

Код

Описания

black

#000000

черный

silver

#C0C0C0

серебряный

Gray

#808080

серый

white

#FFFFFF

белый

maroon

#800000

кричневый

red

#FF0000

красный

purple

#800080

темно-сиреневый

fuchsia

#FF00FF

сиреневый

green

#008000

зеленый

lime

#00FF00

светло-зеленый

olive

#808000

оливковый

yellow

#FFFF00

желтый

navy

#000080

темно - синий

blue

#0000FF

синий

teal

#008080

петроль

aqua

#00FFFF

голубой

Информация о работе Язык разметки гипертекста HTML