Лабораторные работы по HTML. Общее представление о языке гипертекстовой разметки html

• Название: Общее представление о языке гипертекстовой разметки html
• Дата: 18.11.2022
• Размер: 2.22 Mb.
• Имя файла: Лабораторные работы по HTML.docx
• Тип: Документы; #796190

ЛАБОРАТОРНО -ПРАКТИЧЕСКИЕ

ЗАДАНИЯ

ОБЩЕЕ ПРЕДСТАВЛЕНИЕ О ЯЗЫКЕ ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML

HTML (от англ.HyperText Markup Language «язык разметки гипертекста») – стандартный язык разметкидокументов во Всемирной паутине. Большинство веб-страницсоздаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерамии отображается в виде документа в удобной для человека форме.

HTML является приложением («частным случаем») SGML(стандартного обобщённого языка разметки) и соответствует международному стандарту ISO8879. XHTMLже является приложением XML.

Язык HTML был разработан британскимучёным Тимом Бернерсом-Липриблизительно в 19861991 годахв стенах Европейского Центра ядерных исследованийв Женеве(Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантическихэлементов – дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста.Мультимедийныевозможности были добавлены позже.

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

ЛАБОРАТОРНАЯ РАБОТА № 1

Знакомство со структурой HTML-документа. Применение тегов логического и физического форматирования

Цель: научить применять теги логического и физического форматирования при создании Webстраниц.

Время выполнения: два академических часа.

Форма занятия: лабораторная работа.

Задание № 1. Задание простейшего HTML-документа

Запустите программу Блокнот и осуществите ввод следующего HTML кода:

< HTML>




ALINK="#00FF00" VLINK="blue">

Это мой первый HTML-документ!

VLINK="blue">

HTML один из наиболее

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

Тег используется для <ЕМ> интонационного выделения определённого текстового фрагмента . Браузерами отображается курсивом.

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

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



Этот текст будет показан шрифтом по умолчанию.





Этот текст будет показан

ОДНИМ из 3-х указанных шрифтов, черным цветом и размером "2"

VLINK="blue">

В этом тексте использовано три различных тега физического форматирования.

<Р>При создании HTML-документа для обозначения абзаца используется специальный тег

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

<Р ALIGN="CENTER"> Taкой тип выравнивания подходит для заголовков документов.

<Р ALIGN="RIGHT"> Двoйнoй перевод строки в данном случае не поможет: браузер, интерпретируя код, не воспримет двойной отступ как команду создания абзаца.

<Р ALIGN="JUSTIFY"> Значение JUSTIFY стало поддерживаться браузерами сравнительно недавно, однако во многих случаях именно этот тип выравнивания подходит для работы с текстом.

<Р ALIGN="JUSTIFY"> При наборе текста в каком-нибудь текстовом редакторе (Microsoft Word , WordPerfect и др.) для обозначения абзаца мы используем клавишу <Enter>. Такое действие даёт программе команду обособить один фрагмент текста от другого, задав "красную строку"


<Р ALIGN="JUSTIFY">

     При наборе текста в какого-нибудь текстовом редакторе (Microsoft

Word, WordPerfect др.) для обозначения абзаца мы используем клавишу <Enter>


<Р ALIGN="JUSTIFY">

      Taкoe действие дает программе команду обособить один фрагмент текста от другого, задав "красную строку".


<Р>

Белеет парус одинокий


В тумане моря голубом


Что ищет он в стране далёкой?


Что кинул он в краю родном?


<НЗ>Пример нумерованного списка

---

Классификация прикладных программных средств


1. текстовые редакторы
   
   < LI >текстовые процессоры
   
   < LI >графические редакторы
   
   

<НЗ>Пример нумерованного списка

---

<В>Классификация прикладных программных средств:

< LI >текстовые редакторы

< LI >текстовые процессоры < LI >графические редакторы
… .


8. бухгалтерские системы
   
   

<В>Арабские цифры


1. текстовые редакторы
   
   < LI>текстовые процессоры
   
   
2. графические редакторы
   
   

<В>Большие римские цифры


1. текстовые редакторы
   
   
2. текстовые процессоры
   
   
3. графические редакторы
   
   

Прописные латинские буквы


1. текстовые редакторы
   
   
2. текстовые процессоры
   
   
3. гpaфичecкиe редакторы
   
   

<НЗ>Пример маркированного списка

---

<В>Популярные редакторы векторной графики:

• CorelDRAW
  
  
• Adobe Illustrator
  
  
• Macromedia FreeHand
  
  
  
  
  
  
  <В>Редакторы векторной графики:
  
  
  • CorelDRAW
    
    
  • Adobe Illustrator
    
    
  • Macromedia FreeHand
    
    
  
  
  
  
  
  <В>Редакторы растровой графики:
  
  
  • Adobe Photoshop
    
    
  • Ulead Photoimpact
    
    
  • Macromedia Fireworks
    
    
  
  
  
  
  
  <В>Редакторы 3D-графики:
  
  
  • 3D Studio MAX
    
    
  • Corel Bryce
    
    
  • Maya
    
    
  
  
  
  
  
  <В>Редакторы компьютерной графики:
  
  CorelDRAW
  
  
  Adobe Illustrator
  
  
  Macromedia FreeHand
  
  
  Adobe Photoshop
  
  
  Macromedia Fireworks
  
  
  3D Studio MAX
  
  
  Corel Bryce
  
  
  
  
  
  
  
  <В>Редакторы компьютерной графики:
  
  
  • Векторные редакторы
    
    
    
    
    
    • CorelDRAW
      
      
      
      
      
      1. CorelDRAW
         
         
      2. Corel PhotoPaint
      3. Corel R.A.V.E.
         
         
      
      
      
    
    
    
  • Растровые редакторы
    
    
    
    
    
    • Adobe Photoshop
      
      
      
      
      
      1. Adobe Photoshop
         
         
      2. Adobe ImageReady
         
         
      
      
      
    
    
    
  
  
  
  
  

  
  
  

  Редакторы HTML-документов

  
  
  

  <В>Визуальные Web-редакторы (WYSIWYG-редакторы)
  
  

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

  <В>НТМL-редакторы
  
  

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

  <В>Текстовые редакторы
  
  

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

  
  
  

<САРТION>Пример простейшей таблицы



<ТН>Ячейка с заголовком

<ТD>Ячейка с обычным текстом









<ТН>Состав персонального компьютера

B состав персонального компьютера входят следующие компоненты: Системный блок Монитор Клавиатура Мышь

<ТD>Ячейка 2











<ТD>Ячейка 6

Ячeйкa 1	Ячeйкa 3
Ячейка 4	Ячeйкa 5

Ячейка 1
Ячейка 2	Ячейка 3
	Ячeйкa 4
	Ячeйкa 5

Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4
Ячейка 5	Ячейка 6	Ячейка 7	Ячейка 8

<ТD>Ячейка 1

<В>Таблица 1

Ячейка 2	Ячейка 3	Ячейка 4
Ячейка 5	Ячейка 6	Ячейка 7	Ячейка 8

WIDTH="100%" FRAME="box" RULES="GROUPS">











<ТD>Ячейка 5 <ТD>Ячейка 6

<В>Таблица 2

Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4
Ячейка 7	Ячейка 8

<В>Таблица 3

Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4
Ячейка 5	Ячейка 6	Ячейка 7	Ячейка 8

VLINK="blue">

Adobe Photoshop

---

Одним из наиболее популярных и распространенных графических редакторов считается программа для работы с растровой графикой Adobe Photoshop, разработанная корпорацией Adobe Systems .

На сегодняшний день доступна версия программы 7.0

VLINK="blue">


http://www.adobe.com/">




VLINK=''blue">

Adobe Photoshop

---

Одним из наиболее популярных и распространенных графических редакторов считается программа для работы с растровой графикой Adobe Photoshop, разработанная корпорацией

<А HREF="http://www.adobe.com/">

Adobe Systems .
VLINK="blue''>

Tern HTML

---

FONT

SPAN

TABLE

---

FONT – один из основных тегов физического форматирования текста, отображающий свойства шрифтов.

Выравнивание по верхнему краю

<Р> Выравнивание по базовой линии




Верблюд – корабль пустыни. Это название закрепилось за ним с давних пор, когда караваны верблюдов ходили с грузами через пустыни в условиях безводья и недостатка пищи. Верблюды могут проходить через безводные пространства. На них навьючивают груз до 250 кг, с которым они могут делать переходы по 300 км в день со средней скоростью передвижения 10 км/час.



<Р ALIGN=JUSTIFY>

Кроме домашних северных оленей, разводимых человеком, в тундре сохранилось много диких северных оленей, которые ведут кочевой образ жизни в поисках ягеля. Северные олени хорошо приспособлены к жизни в суровых условиях. Широкие копыта позволяют оленям не провалиться в снегу, передвигаться по болотам и топям. Шерсть у северных оленей тоже особенная. Толстая сердцевина каждого волоса наполнена воздухом, а воздух хорошо сохраняет тепло тела. Поэтому мех даже во время сильного ветра надежно защищает оленя от холода.







Выравнивание ALIGN=TOP






Выравнивание ALIGN=TEXTTOP











Лисица – одна из популярных героинь детских сказок. Она стройна, изящна, у нее удлиненное туловище на невысоких ногах. Из всей ее общей длины примерно 40% приходится на пушистый хвост. Удивительно хорошо приспособилась она к самым разным уровням, но больше других любит открытые места с небольшим лесом, оврагами, холмами, Избегает лишь глухой тайги и пустынь. Лисица очень проворна, обычная манера ее передвижения – неторопливая рысца Лисица – великолепный охотник:

Помимо наблюдательности и сообразительности, у нее отличная зрительная память, хорошее обоняние и острый слух

---

---

"Один"

---

---

---

---

"Два"

---

---

---

---

"Три"

---

---

---

---

"Четыре"

---

---

---

---

"Пять"

---

---

"Нажми на один из пронумерованных кругов, и ты увидешь номер в крупном размере"

срщсщдфеу" VLINK="blue"> Ссылки верхнего фрейма Файл с текстом в левом нижнем фрейме Файл с текстом в правом нижнем фрейме Фaйл с текстом в верхнем фрейме Файл с текстом в полном окне Фaйл с текстом в новом окне Файл с текстом в текущем фрейме VLINK="blue"> <НЗ>Укажите свои увлечения: Компьютеры и Интернет Литература и искусство Музыка и танцы Автомобили Cпopт и активный отдых VLINK="blue"> <НЗ>Укажите свою возрастную группу: 0-5 лет 5-12 лет 12-20 лег Oт 20 лет VLINK="blue"> <Н2>Анкета пользоваггеля: Контактные данные: <Р> Ваше имя: Ваш E-mail: Ваш сайг <В>Возраст: 5-0 лет     5-12 лет      12-20 лет    Oт 20 лет <Р><В>Увлечения: Компьютеры и Интернет    Литература и искусство    Музыка и танцы    Автомобили    Спорт и активный отдых <Р ALIGN ="center">   VLINK="blue"> <НЗ>Пожалуйста, сообщите свои данные: Ваше имя:<ВР> Ваш E-mail: Комментарий:<ВR>   <br /><br /><INPUT TYPE="reset" VALUE="Очистить"> <br /><br /></FORM> <br /><br />VLINK="blue"> <br /><br /><FORM NAME="anketa" ACTION="/cgi-bin/anke1a.cgi" METHOD="get"> <br /><br />B каком городе вы живете?</Н2> <br /><br /><SELECT NAME="city" SIZE="5"> <br /><br /><OPTION VALUE="Moscow”>Mocква <br /><br /><OPTION VALUE="Sankt-peterburg”>Санкт-петербург <br /><br /><OPTION VALUE="Samara">Caмapa <br /><br /><OPTION VALUE="Ryazan">Рязань <br /><br /><OPTION VALUE="Krasnoyarsk">Красноярск <br /><br /><OPTION VALUE="Komsomolsk">Комсомольск-на-Амуре <br /><br /><OPTION VALUE="Vladivostok">Владивосток <br /><br /></SELECT> <br /><br /><Н2>Ваша профессия?</Н2> <br /><br /><SELECT NAME="profession"> <br /><br /><OPTION VALUE="Teacher">учитель <br /><br /><OPTION VALUE="Technik">слесарь <br /><br /><OPTION VALUE="Designer">дизайнер <br /><br /><OPTION VALUE="Driver" SELECTED>водитель <br /><br /><OPTION VALUE="Fireman">пoжapный <br /><br /><OPTION VALUE="Actor">актёр <br /><br /></SELECT> <br /><br /><INPUT TYPE="submit" VALUE="Отправить">  <br /><br /><INPUT' TYPE="reset" VALUE ="Очистить"> <br /><br /></FORM> <br /><br />VLINK="blue"> <br /><br /><h2>ПОЛЬЗОВАТЕЛЬСКАЯ АНКЕТА <br /></td> <td width="134"> <br />ALINK="#00FF00" <br /></td> </tr> <tr valign="top"> <td width="588" height="55"> <br /> <FORM NAME="user_anketa" ACTION="/сgi-bin/anketa.cgi" <br /><br />ENCTYPE="multiparf/form-data"> <br /></td> <td width="134"> <br />METHOD="posf <br /></td> </tr> <tr valign="top"> <td width="588" height="23"> <br /><table border="0" cellpadding="5" cellspacing="3" <br /></td> <td width="134"> <br />ALIGN="center" <br /></td> </tr> </table> <br />WIDTH="98%"> <br /><br /><tr> <br /><br /><TH BGCOLOR="#999999" WIDTH="50%">Личные данные<ТН> <br /><br /><TH BGCOLOR="#999999" WIDTH ="50%">Увлечения</TH> <br /><br /></tr> <br /><br /><tr> <br /><br /><td valign="top" bgcolor="#eeeeee" width="50%"> <br /><br />Ваше имя:<br /> <br /><br /><INPUT TYPE="text" SIZE="30" MAXLENGTH="35" NAME="name"> <br /> <br /><br />Ваш пароль:<ВР> <br /><br /><INPUT TYPE="password" SIZE="30" MAXLENGTH="35" NAME="password"> <br /><br /><br />Ваша фотография:<br /> <br /><br /><INPUT TYPE="file" SIZE="18" NAME="photo"> <br /><br /></td> <br /><br /><td valign="top" bgcolor="#eeeeee" width="50%"> <br /><br /><INPUT TYPE="checkbox" NAME="hobby" VALUE="computers" СНЕСКЕD>Компьютеры и Ин-<br /><br />тернет <br /><br /><br /><INPUT TYPE="checkbox" NAME="hobby" VALUE="art"Литература и искусство <br /> <br /><br /><INPUT TYPE="checkbox" NAME="hobby" VALUE ="music">Музыка и танцы <br /><br /><br /><INPUT TYPE="checkbox" NAME="hobby" VALUE ="auto">Автомобили <br /><br /><br /><INPUT TYPE="checkbox" NAME="hobby" VALUE="sport">Cпopт и активный отдых <br /><br /></td> <br /><br /></tr> <br /><br /><tr> <br /><br /><TH BGCOLOR="#999999" WIDTH="50%">Mecтo жительства</TН> <br /><br /><TH BGCOLOR="#999999'' WIDTH="50%"> Комментарии</TН> <br /><br /></tr> <br /><br /><tr> <br /><br /><td valign="top" bgcolor="#eeeeee"width="50%"> <br /><br /><SELECT NAME="city" SIZE="5"> <br /><br /><OPTION VALUE="Moscow”>Mocква <br /><br /><OPTION VALUE="Spb”>Санкт-Петербург <br /><br /><OPTION VALUE="Samara">Caмapa <br /><br /><OPTION VALUE="Ryazan">Рязань <br /><br /><OPTION VALUE="Krasnoyarsk">Красноярск <br /><br /><OPTION VALUE="Komsomolsk">Комсомольск-на-Амуре <br /><br /><OPTION VALUE="Vladivostok">Владивосток <br /><br /></SELECT> <br /><br /><SELECT NAME="country"> <br /><br /><OPTION VALUE="Russia">Россия <br /><br /><OPTION VALUE="England">Англия <br /><br /><OPTION VALUE="USA">США <br /><br /><OPTION VALUE="Germany">Германия <br /><br /><OPTION VALUE="France"> Франция <br /><br /></SELECT> <br /><br /></td> <br /><br /><td valign="top" bgcolor="eeeeee" width="50%"> <br /><br /><TEXTAREA COLS="25" ROWS="5" NAME="comments"> <br /><br /> Я впервые на этом сайте .