«Структура html-документа. Создание Web страницы»


Меня зовут   Я учусь в классе



жүктеу 0,6 Mb.
Pdf просмотр
бет3/3
Дата11.01.2022
өлшемі0,6 Mb.
#32142
1   2   3
87dc23cab247e887de99f548ae8026e4

 

 

 

 

 

 


 

 

 

 

<h2>Меня <a href="/?q=зовут">зовут</a> </h2>  <br /> <br /><h2>Я учусь в классе </h2>  <br /> <br /><h3>Это моя любимая песенка</h3>   <p>  <br />   </p> <p>В лесу родилась <i>елочка. </i> <br />  </p> <p>В лесу она росла.</p> <br />   <p>    <br /></p> <br />Зимой и летом стройная, <br />   <p>   Зеленая была.</p> <br />   <p> <b> Метель </b> ей пела песенку:</p> <br />  <p> «Спи, елочка, бай-бай» </p> <br />  <p> <b> <i>Мороз  </b> </i>снежком укутывал:</p> <br />  <p>  <p>«Смотри, не замерзай!» </p> <br /> <br />  </p> <p>См. <a href="/mozg-sovremennogo-cheloveka.html">цвет шрифта </a></p> <p>Цвет текста (задается  </p> <p>названием  цвета  или </p> <p>его кодом )  <br /> <br /><body TEXT=”*”>  </p> <p>Фоновое  изображе-</p> <p>ние   <br /> <br /><body  </p> <p>BACKGROUND=”*”> </p> <p>Вместо * прописывается название файла в  </p> <p>формате  <br /></p> <br /><b>bmp  </b> <p>Например:  </p> <br /> <br /><body BACKGROUND=” <br /> <br /><b>цветы.bmp</b> <p>”>  <br /></p> <br /><b> </b> <br /> <br /><b>Вставка изображений </b> <br /></div> <style type="text/css"> </style> <hr /><div id="page8-div" > <br /><b>Назначение </b> <br /> <br /><b>Формат </b> <br /> <br /><b>Значение аргументов </b> <br /> <br /><b>(вместо звездочки *) </b> <p>Вставка изображений   </p> <p>Вместо * прописывает- </p> <p>ся название <a href="/obem-fajla-bajt.html">файла в </a></p> <p>формате  <br /> <br /><b>bmp, jpg  </b> </p> <p>  <p>Выравнивание  текста </p> <br /> <br />около изображения  <br /> <br />  <br /> <br />  <br /> <br />  <br /> <br />  <br /> <br />  </p> <p>Изображение </p> <p>как  <p>ссылка  <br /></p> <br /> <br /><i>адрес</i> </p> <p>>  </p> <p>В  качестве  <br /> <br /><i>адреса </i> </p> <p>мо- <br /></p> <br />жет  быть:  адрес  доку- <p>мента, адрес сайта,  </p> <p>e - mail.  <br /> <br /><b>Задание 2. Оформление фона HTML-документа, вставка картинки. </b> </p> <p>1. <p> </p> <br /> <br />Откройте созданный вами файл <br /> <br /><b> Пример.html.</b> </p> <p>  <p>2.</p> <br /> <br />  </p> <p>Сделайте цвет фона голубой. </p> <p>3. <p>  <br /> <br />После фразы «В лесу родилась» вставьте изображение елочки (</p> <br /> <br /><i><b>елка.bmp</b></i> </p> <p>).  <br /></p> <br />4. <p>  <p>Сохраните изменения и просмотрите их с помощью браузера </p> <br /> <br /><i><b>Internet <a href="/internet-explorer-brauzerinde-jmis-jasau-jene-java-komponentte.html">Explorer</a></b></i> </p> <p> .  <br /></p> <br />5. <p>  <p>Попробуйте  все  способы  выравнивания  текста  около  изображения,  не  меняя  место </p> <br /> <br />вставки картинки. Запишите в тетрадь назначение всех аргументов выравнивания тек- </p> <p>ста около изображения. </p> <p>6. <p>  <br /> <br />Вставьте в <a href="/tamasha-jasi-jabirau.html">качестве фона файл </a></p> <br /> <br /><i><b>шары.jpg.</b></i> </p> <p>  <p>7.</p> <br /> <br />  </p> <p>Сохраните изменения и просмотрите  их с помощью браузера </p> <br /> <br /><i><b>Internet Explorer</b></i> <p> .  <br /></p> <br /><b>Подведение итогов </b> <p> <p> </p> <br /> <br />Сделайте в тетради конспект теоретического материала.  </p> <p> <p> </p> <br /> <br />Ответьте на следующие вопросы:  </p> <p>1. <p> </p> <br /> <br />Какие существуют параметры форматирования шрифта в HTML-документе?  </p> <p>2. <p> </p> <br /> <br />Какие существуют способы выравнивания текста около изображения?  </p> <p>3. <p> </p> <br /> <br />Можно ли в качестве фона для Web-страницы использовать картинку?  <br /> <br /><b>Домашнее задание: </b> </p> <p>1. <p> </p> <br /> <br />Выучите конспект.  </p> <p>2. <p> </p> <br /> <br />Разработайте структуру  вашего будущего  сайта, распределите материал, продумайте  </p> <p>и подберите оформление. </p> <br /> <br /><b>Практическая работа № 3 по теме: </b> <br /> <br /><b>«Создание списков» </b> <br /> <br /><b>Цель:</b> <p> научиться создавать различные виды списков. </p> <br /> <br /><b>Виды списков </b> <br /> <br /><b>Назначение </b> <br /> <br /><b>Формат </b> <br /> <br /><b>Значения атрибутов </b> <p>Маркированный</p> <br /> <br /><i> </i> <p>  <br /> <br /><ul *>  </p> <br /> <br /><li>  <br /> <br /><i><b>элемент списка </b></i> <br /> <br /><i><b>…</b></i> <p>  <br /> <br /><li> </p> <br /> <br /><i><b>элемент списка</b></i> <p>  <p> </ul> </p> <br /> <br />устанавливает тип маркера. type=”disc”  </p> <p>type=”square” </p> <p>type=”circle”  </p> <p>  <p>Нумерованный  </p> <br /> <br />start=""    устанавливает  на- </p> <p>чальный  номер  в  текущем </p> <p>списке,   </p> <p>type=""      устанавливает  тип </p> <p>маркера.   </p> <p>  <br /> <br /><ol *> </p> <p> <li>  <br /> <br /><i><b>элемент списка </b></i> <br /> <br /><i><b>…</b></i> </p> <p>  <br /> <br /><li> </p> <br /> <br /><i><b>элемент списка</b></i> <p>  <br /> <br /></ol> </p> <p>A — маркер в <a href="/nedelya-raznie-tipi-diagramm-v-odnom-flakone.html">виде прописных букв</a>,   </p> <p>a — маркер в виде строчных букв,  </p> <p>I  —  маркер  в  виде  больших  римских  </p> <p>цифр,   <br /></p> <br />i  —  маркер  в  виде  маленьких  римских  <p>цифр,   <br /></p> <br />1 — маркер в виде арабских цифр.   <p>Многоуровневый </p> <p>  <p>  <br /></div> <style type="text/css"> </style> <hr /><div id="page9-div" > </p> <br />(используют  теги  нумеро- </p> <p>ванного  и  маркированного </p> <p>списков)  </p> <p>  <br /> <br /><b>Задание 1. Создание списков. </b></p> <p>1. <p>  <br /> <br />Откройте текстовый редактор </p> <br /> <br /><i><b>Блокнот.</b></i> </p> <p>  <p>2.</p> <br /> <br />  </p> <p>Создайте в нем следующий документ: </p> <br /> <br /><HTML>  <br /> <br /><ТITLE> Списки 

 

     

  • Сливы 

  • Яблоки 

  • Груши  

 

 

 



Первая колонка Вторая колонка Третья колонка
Первая колонка Вторая колонка Третья колонка
 

 



&

 bordercolor="#800000" 



&

 bgcolor="#008080 "> 

(заданы три атрибута: двойная линия рамки и ее цвет, цвет фона таблицы) 

 

Первая колонка

Вторая колонка Третья колонка
Первая колонка Вторая колонка Третья колонка
 

 

См. значения цветов в практической ра-



боте № 2 

Цвет пройденной ссылки 



 

Цвет активной ссылки 



 

Ссылка  на  другую  страни-

цу 

href=""  задает URL-адрес. 



  указатель 

ссылки  


Адрес относительный:  

. . . # . . . - имя файла в пределах данного 

компьютера плюс имя метки в пределах 

данного файла;  

Абсолютный адрес:  

http: // www.  ( .  .  . )  .  ( . .  . )/  -  на WEB-

страницу,  

mailto: ( . . . ) @ ( . . . ) - на электронную 

почту — E-mail ,  

news:  (  .  .  .  ) .  (  .  .  .  )  -  на Newsgroup  — 

группу  новостей  системы  телеконфе-

ренций UseNet,  

ftp: // ftp. ( . . . ) . ( . . . ) - на FTP-сайты 

системы  хранения  и  передачи  файлов, 

где  хранятся  новые  программные  про-

дукты, гостевые файлы (FAQ) и т.д.,  

goppher: // goppher. ( . . . ) . ( . . . )/ — на 

сайты системы Gopher,  

wais: // wais. ( . . . ) . ( . . . )/ — на WAIS-

систему  больших  (распределенных)  баз 

данных,  

telnet: // bbs.( . . . ) . ( . . . )/ — на Telnet-

систему удаленных компьютеров;  

file: //( ... ):\( . . . ) . ( . . . ) — файл с диска 

данного компьютера;  

. . . ? . . . — URL-адрес плюс строка по-

иска. 

Ссылка  на  закладку  в  дру-



гом документе 

 указатель 

ссылки  

Ссылка  на  закладку  в  том 

же документе 

HREF=”#*”> 

указатель 

ссылки  


Определение 

закладки 

метки  внутри  текущей 

HTML-программы. 

Этим 

оператором  метят  место, 



куда  предполагается  де-

лать  переходы.  Текст  тега 

в этом случае выводится на 

WEB-странице 

в  место 

закладки.  



   

name="" — задает имя метки из симво-

лов латинского алфавита.  

 

Ссылки могут передаваться на файлы разных форматов: 



простой текст 

.txt  

файл PostScript  



.ps  


документ HTML  

.html или .htm 

звуковой файл AIFF  



.aiff  

рисунок GIF  



.gif  

звуковой файл AU  



.au  

рисунок TIFF  



.tiff  

звуковой файл WAV  



.wav  

рисунок X Bitmap  



.xbm  

анимация QuickTime  



.mov  

рисунок JPEG  



.jpg (.jpeg)  

фильм MPEG  



.mpeg (.mpg)  

Задание 1. Создание гиперссылок. 

1.

 



Создайте  предложенный  HTML-документ  в  виде  многофайлового  документа  (где 

Файл1 — основной документ, Файл2 — вспомогательный файл, для картинки создана 

гиперссылка)

 

Файл 1  


 

Файл 2 


 

 

 



 

 

 



 

 

 



2.

 

Сохраните изменения и просмотрите их с помощью браузера 



Internet Explorer . 

Задание 2. Создание гиперссылок. 

1.

 



Создайте HTML-документ следующего содержания: 

В лесу родилась елочка.  

В лесу она росла. 

Зимой и летом стройная,  

Зеленая была. 

2.

 



Добавьте гиперссылку, при нажатии на слово «елочка» можно перейти на следующий 

фрагмент: 

И вот она нарядная  

На праздник к нам пришла, 

И много-много радости 

Детишкам принесла!  

3.

 

Отформатируйте по своему усмотрению цвета ссылок: пройденной и активной. 



4.

 

Сохраните изменения и просмотрите их с помощью браузера 



Internet Explorer

 . 


Задание 3. Самостоятельная творческая работа над своим сайтом. 

Подведение итогов 

 



Сделайте в тетради  конспект теоретического материала. 

 



Ответьте на следующие вопросы: 

1.

 



Что такое гиперссылка? 

2.

 



Какие виды гиперссылок вы знаете? 

Домашнее задание: 

1.

 



Выучите конспект. 

Практическая работа № 6 по теме: 

«Создание фреймов» 

Цель:

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

С помощью фреймов экран разделяется на несколько областей, в каждой из которых 

отображается содержимое отдельной страницы и даже Web-узла. 

Хочешь  узнать

 

точное 



время? Жми сюда!!! 

Здесь  должна  быть 

картинка часов 

К  сожалению,  точного 

времени  я  тоже  не  знаю. 

Часы остановились. 




Второстепенные документы вставляются в базовый с помощью тегов: 

 

 

 

Примеры простейших фреймов: 

Горизонтальное  деление  экрана  производится  при  помощи  атрибута  rows,  а  верти-

кальное  при  помощи  атрибута  cols.  Значения  атрибутов  могут  быть  выражены  в  пикселах, 

процентах или * для обозначения оставшейся части экрана.  

 

cols = 50%, 50%; 



Деление области просмотра на равные правую и левую части.  

 



cols = 20%, 80%; 

Деление области просмотра на неравные правую и левую части.  

 

rows = 100, 20%,* 



Деление  области  просмотра  на  три  части:  первой  отведено  100  пикселей,  второй  — 

20% доступного пространства, а третьей — все остальное 

 

cols = *, 3* 



Деление  области  просмотра  на  неравные  правую  и  левую  части.  Правая  часть  в  три 

раза шире левой.  

 

cols=25%,75% 



Деление области просмотра аналогично предыдущему примеру.  

Задание 1. Создание макета страницы с фреймами. 

1.

 



Создайте HTML-документ следующего содержания: 

 

 

<br /> <br /><b>FRAMES</b> <br /> <br /> 

 


1

 BORDER=


2

 ROWS=


150,*



 



1

 BORDER=


2

 COLS=


150,*



 


 


 

 

 

2.

 



Сохраните изменения и просмотрите их с помощью браузера 

Internet Explorer

 . 


Задание 2. Самостоятельная творческая работа над своим сайтом. 

Подведение итогов 

 



Сделайте в тетради конспект теоретического материала. 

 



Ответьте на следующие вопросы: 

1.

 



Что такое фреймы? Для чего они используются? 

Домашнее задание: 

1.

 



Выучите конспект. 

Практическая работа № 7 по теме: 

«Создание форм» 

Цель:

 научиться создавать различные элементы форм.  

Формы  представляют  собой  интерактивные  элементы  HTML,  позволяющие  разработ-

чикам страниц взаимодействовать с посетителями. С их помощью пользователь может воз-




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

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

них, заполняя её.  

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



 

текст

 



 

атрибут 


Method 

определяет способ пересылки данных сценарию 



CGI

. Здесь протокол 



GET

 выбран по умолчанию, но в большинстве случаев разработчики пользуются про-

токолом 

POST

, который позволяет передавать большие объемы данных.  

 

атрибут 



Action 

определяет путь к сценарию 



CGI

 или адрес электронной почты.  

 

атрибут 



Еnctype

 определяет способ кодирования содержимого формы. Другими сло-

вами, он сообщает браузеру о способе кодирования информации перед отсылкой сер-

веру. По умолчанию используется значение 



x-www-form-encoded

.  


Формы для сценария: 
 

Формы для почты:

  

При помощи элемента 

 

 

 …

жүктеу 0,6 Mb.

Достарыңызбен бөлісу:
1   2   3




©g.engime.org 2024
әкімшілігінің қараңыз

    Басты бет
рсетілетін қызмет
халықаралық қаржы
Астана халықаралық
қызмет регламенті
бекіту туралы
туралы ережені
орталығы туралы
субсидиялау мемлекеттік
кеңес туралы
ніндегі кеңес
орталығын басқару
қаржы орталығын
қаржы орталығы
құрамын бекіту
неркәсіптік кешен
міндетті құпия
болуына ерікті
тексерілу мемлекеттік
медициналық тексерілу
құпия медициналық
ерікті анонимді
Бастауыш тәлім
қатысуға жолдамалар
қызметшілері арасындағы
академиялық демалыс
алушыларға академиялық
білім алушыларға
ұйымдарында білім
туралы хабарландыру
конкурс туралы
мемлекеттік қызметшілері
мемлекеттік әкімшілік
органдардың мемлекеттік
мемлекеттік органдардың
барлық мемлекеттік
арналған барлық
орналасуға арналған
лауазымына орналасуға
әкімшілік лауазымына
инфекцияның болуына
жәрдемдесудің белсенді
шараларына қатысуға
саласындағы дайындаушы
ленген қосылған
шегінде бюджетке
салығы шегінде
есептелген қосылған
ұйымдарға есептелген
дайындаушы ұйымдарға
кешен саласындағы
сомасын субсидиялау