Практические работы по HTML





 

Задание № 1. Создание простейшего файла HTML

 

1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2. Запустите программу Блокнот (Notepad).

3. Наберите в окне программы простейший файл HTML.

 

<HTML>

<HEAD>

 

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

<BODY>

 

Расписание занятий на вторник

</BODY>

</HTML>

 

4. Сохраните файл под именем RASP.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.

 

5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую).Для этого,не покидая программу Блокнот(свернитеокно на панель задач), откройте личную папку и двойным кликом по файлу RASP.HTML откройте окно браузера.

 

 

Рис.1

 

На экране вы увидите результат работы, изображенный на рисунке 1.

 

 

Задание № 2. Управление расположением текста на экране

 

1. При необходимости откройте текст Web-страницы в Блокноте (1 щелчок правой клавишей мыши по файлу RASP.HTML, в контекстном меню выбрать команду Открыть с помощью... и выбрать программу Блокнот).При необходимости открыть файл в браузере

 

– двойной клик по значку файла левой клавишей мыши.

 

2. Внести изменения в файл RASP.HTML, расположив слова Расписание, занятий, на вторник на разных строках.

 

<HTML>

<HEAD>

 

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

<BODY>

Расписание

 

занятий

на вторник

</BODY>

 

</HTML>

 

3. Сохраните текст с внесенными изменениями в файле RASP.HTML (меню Файл | Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка ). Изменилось ли отображение текста на экране?

 

Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.

 

Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.

 

 

Задание № 3. Некоторые специальные команды форматирования текста

 

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

 

Тег перевода строки <BR> отделяет строку от последующего текста или графики.

 

Тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.

 

Оба тега являются одноэлементными, тег <P> – двойной, т.е. требуется закрывающий тег.

 

1. Внесите изменения в файл RASP.HTML

 

<HTML>

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

 

</HEAD>

<BODY>

<P>Расписание</P>

<BR>занятий<BR>

 

на вторник

</BODY>

</HTML>

 

2. Сохраните внесенные изменения, переключитесь на панели задач на программу браузера, обновите Web-страницу.

 

Как изменилось отображение текста на экране? Выглядеть ваша Web-страница будет примерно так, как показано на рисунке 2.

 

 

Рис. 2

 

Задание № 4. Выделение фрагментов текста

 

1. Внести изменения в текст файла RASP.HTML

 

<HTML>

 

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

<BODY>

 

<B>Расписание</B>

<I> занятий</I>

<U> на вторник</U>

 

</BODY>

</HTML>

 

2. Посмотрите полученную Web-страницу.

 

Возможно использование комбинированных выделений текста.

 

<I><B>Расписание</B></I> <I><U> занятий</U></I> <U> на вторник</U>

 

Но при этом необходимо помнить следующее правило использования комбинированных тегов:

 

<Тег_1><Тег_2> ... </Тег_2></Тег_1>правильная запись.

 

<Тег_1><Тег_2> ... </Тег_1></Тег_2>–ошибочная запись.

 

Обратите внимание на «вложенность» тегов, она напоминает «вложенность» скобок.

 

 

Задание № 5. Задание размеров символов Web-страницы

 

Существует два способа управления размером текста, отображаемого браузером:

 

· использование стилей заголовка,

 

· задание размера шрифта основного документа или размера текущего шрифта. Используется шесть тегов заголовков: от <H1> до <H6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

 

1. Внесите изменения в файл RASP.HTML

 

<HTML>

<HEAD>

 

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

<BODY>

<P><H1>Расписание</H1></P>

 

<I> занятий</I><U> на вторник</U> </BODY>

</HTML>

 

2. Просмотрите свою Web-страницу. На экране вы увидите то, что отображено на рисунке 3.

 

 

 

 

Рис. 3

 

Задание № 6. Установка размера текущего шрифта

 

Тег шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.

 

1. Внесите изменения в текст RASP.HTML

 

<HTML>

 

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

</HEAD>

 

<BODY>

<FONT SIZE="7">Расписание</FONT>

занятий на вторник

</BODY>

 

</HTML>

 

2. Самостоятельно измените размер текста «занятий на вторник», используя тег <FONT>.

 

3. Измените оформление текста HTML-документа, используя тег выделения фрагментов и тег перевода строки и абзаца.

 

Задание № 7. Установка гарнитуры и цвета шрифта

 

Тег <FONT> предоставляет возможности управления гарнитурой, цветом и размером текста. Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE.Например,для отображения текста шрифтомArialнеобходимо записать:

<FONT FACE=”ARIAL”>

Для изменения цвета шрифта можно использовать в теге <FONT> атрибут COLOR=”X”. Вместо “X”надо подставить английское название цвета в кавычках(“ ”),либо его шестнадцатеричноезначение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.

 

Примеры записи текста в формате RGB приведены в Таблице 1:

                        Таблица 1  
        Запись текста в формате RGB          
                             
  Цвет   RRGGBB   Цвет     RRGGBB   Цвет   RRGGBB    
                             
  Black     Purple     FF00FF   Green   00FF00    
  Черный     Фиолетовый       Зеленый      
                       
  White   FFFFFF   Yellow     FFFF00   Azure   00FFFF    
  Белый     Желтый       Бирюзовый      
                       
  Red   FF0000   Brown     Blue   0000FF    
  Красный     Коричневый     Синий      
                       
  Orange   FF8000   Violet     B000FF   Gray   A0A0A0    
  Оранжевый     Лиловый       Серый      
                       
                             

 

1. Внесите изменения в файл RASP.HTML

 

<HTML>

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

 

</HEAD>

<BODY>

 

<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание</FONT></B></I></U> занятий на вторник

</BODY>

</HTML>

 

2. Самостоятельно измените размер, цвет, гарнитуру стиль текста документа.

 

 

Задание № 8. Выравнивание текста по горизонтали

 

1. Внесите изменения в файл RASP.HTML

 

<HTML>

<HEAD>

<TITLE>Учебный файл HTML</TITLE>

 

</HEAD>

<BODY>

<P ALIGN="CENTER">

<FONT COLOR="#008080" SIZE="7">

 

<B>Расписание</B></FONT><BR>

 

<FONT SIZE="6"><I> занятий на вторник</I></FONT> </P>

 

</BODY>

</HTML>

 

 

2. Просмотрите изменения в браузере. На экране вы увидите то, что показано на рисунке 4.

 

 

Рис. 4

 

 

Задание № 9. Задание цвета фона и текста

 

При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок (последние два примера будут рассмотрены позже).

 

1. Внесите изменения в файл RASP.HTML

 

<HTML>

<HEAD>

 

<TITLE>Учебный файл HTML</TITLE> </HEAD>

 

<BODY BGCOLOR="#FFFFCC" TEXT="#330066"> <P ALIGN="CENTER">

 

<FONT COLOR="#008080" SIZE="7">

<B>Расписание</B></FONT><BR>

 

<FONT SIZE="6"><I> занятий на вторник</I></FONT> </P>

 

</BODY>

</HTML>

 

2. Просмотрите изменения Web-страницы в браузере.

 

 

Задание № 10. Размещение графики на Web-странице

 

Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным.

 

Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.

Для выполнения следующего задания поместите файл с именем CLOCK.JPG (или другим именем) в рабочую папку.

 

Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете файл графического изображения во вложенной папке, то при описании изображения необходимо указывать путь доступа к файлу изображения, отображая вложенность папок.

 

1. Внесите изменения в файл RASP.HTML

 

<HTML>

<HEAD>

 

<TITLE>Учебный файл HTML</TITLE> </HEAD>

 

<BODY BGCOLOR="#FFFFCC" TEXT="#330066"> <P ALIGN="CENTER">

 

<FONT COLOR="#008080" SIZE="7">

<B>Расписание</B></FONT><BR>

 

<FONT SIZE="6"><I> занятий на вторник</I></FONT> <BR><BR>

 

<IMG SRC="CLOCK.PNG">

</P>

</BODY>

 

</HTML>

 

2. Просмотрите изменения вашей Web-страницы в браузере.

 

На экране вы увидите те, что показано на рисунке 5.

 

 

 

Рис. 5

 

Тег <IMG> имеет немало атрибутов, описанных в таблице 2. Эти атрибуты можно задавать дополнительно и располагаться они могут в любом месте тега после кода IMG.

 

Таблица 2

       
  Атрибуты изображения      
         
Атрибут Формат Описание    
     
ALT <IMG SRC="CLOCK.JPG" Задает текст, заменяющий изображение в том случае,
  ALT="Картинка"> если браузер не воспринимает изображение  
     
BORDER <IMG SRC="CLOCK.JPG" Задает толщину рамки вокруг изображения.
  BORDER="3"> Измеряется в пикселях      
         
ALIGN <IMG SRC="CLOCK.JPG" Задает выравнивание изображения относительно
  ALIGN="TOP"> текста:      
    · относительно текста выровнена верхняя часть
    изображения – "TOP",    
    · относительно текста выровнена нижняя часть
    изображения – "BOTTOM",    
    · относительно текста выровнена средняя часть
    изображения – "MIDDLE".    
     
HEIGHT <IMG SRC="CLOCK.JPG" Задает вертикальный размер изображения внутри
  HEIGHT="111"> окна браузера      
     
WIDTH <IMG SRC="CLOCK.JPG" Задает горизонтальный размер изображения внутри
  WIDTH="210"> окна браузера      
     
VSPACE <IMG SRC="CLOCK.JPG" Задает добавление верхнего и нижнего пустых полей
  VSPACE="8">        
     
HSPACE <IMG SRC="CLOCK.JPG" Задает добавление левого и правого пустых полей
  HSPACE="8">        
           

 

 

Задание № 11. Использование атрибутов изображения

 

1. Самостоятельно внесите изменения в текст файла RASP.HTML: опробуйте использование таких атрибутов графики, как ALT, BORDER, ALIGN, HEIGHT, WIDTH, VSPACE,

 

HSPACE.

 





Читайте также:
Романтизм: представители, отличительные черты, литературные формы: Романтизм – направление сложившеесяв конце XVIII...
Основные направления модернизма: главной целью модернизма является создание...
ТЕМА: Оборудование профилактического кабинета: При создании кабинетов профилактики в организованных...
Методика расчета пожарной нагрузки: При проектировании любого помещения очень важно...

Рекомендуемые страницы:



Вам нужно быстро и легко написать вашу работу? Тогда вам сюда...

Поиск по сайту

©2015-2021 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2017-10-25 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту:

Мы поможем в написании ваших работ! Мы поможем в написании ваших работ! Мы поможем в написании ваших работ!
Обратная связь
0.043 с.