Основні теги і атрибути. Встановлення параметрів сторінки сайту
Работа добавлена на сайт samzan.net: 2015-07-10
Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
от 25%
Подписываем
договор
Основні теги і атрибути. Встановлення параметрів сторінки сайту, введення й форматування елементів сторінки: тексту, гіперпосилань, зображень. Графіка та мультимедійна інформація на веб-сторінках. Структурування веб-сторінок за допомогою таблиць.
Структура HTML документів. Управління кольором фону сторінки. Оформлення смислових частин сторінки абзацами.
Структура документу:
<HTML> - повідомляє браузеру, що далі слідує текст, який слід інтерпретувати як HTML документ.
<HEAD> - виділяють заголовок документа, в якому міститься службова інформація.
<TITLE> ... </TITLE> - виділяють назву сторінки, яка відображається в заголовку вікна браузера|.
</HEAD>
<BODY> - виділяють основну частину – “тіло” – web-сторінки.
...
...
</BODY>
</HTML>
|
<html></html> - вказує програмі перегляду сторінок, що це HTML документ.
<head></head> - визначає місце, де міститься різна інформація не відображається в тілі документа. Тут розташовується тег назви документа та теги для пошукових машин.
<body></body> - визначає видиму частину документа
|
|
<title></title> - поміщає назва документа до змісту програми перегляду сторінок
|
|
<body bgcolor=?> - встановлює колір фону документа, використовуючи значення кольору у вигляді RRGGBB - приклад: FF0000 - червоний колір.
<body text=?> - встановлює колір тексту документа, використовуючи значення кольору у вигляді RRGGBB - приклад: 000000 - чорний колір.
<body link=?> - встановлює колір гіперпосилань, використовуючи значення кольору у вигляді RRGGBB - приклад: 00FF00 - зелений колір.
<body vlink=?> - встановлює колір гіперпосилань на котох ви вже побували, використовуючи значення кольору у вигляді RRGGBB - приклад: 333333 - сірий колір.
<body alink=?> - встановлює колір гіперпосилань при натисканні.
|
|
Теги для форматування тексту
|
|
<pre></pre> - обрамляє попередньо відформатований текст.
<h1></h1> - створює НАЙБІЛЬШИЙ заголовок
<h6></h6> - створює найменший заголовок
<b></b> - створює жірий текст
<i></i> - створює похилий текст
<tt></tt> - створює текст - імітує стиль друкованої машінкі.Іспользуется для цитат, звичайно похилий текст.
<em></em>- використовується для виділення з тексту слова (похилий або жирний текст)
<strong></strong> - використовується для виділення найбільш вижних частин тексту (похилий або жирний текст)
<font size=?>< font> - встановлює розмір тексту в межах від 1 до 7.
<font color=?></ font> - встановлює колір тексту, використовуючи значення кольору у вигляді RRGGBB.
|
|
<a xhref="URL"></a> - створює гіперпосилання на інші документи або частину поточного документа.
<a xhref="mailto:EMAIL"></a> - створює гіперпосилання виклику поштової програми для написання листа автору документа.
<a name="NAME"></a> - зазначає частина тексту як мета для гіпперссилок в документі.
<a xhref="/go?http://www.cyberguru.ru/#NAME" title="http://www.cyberguru.ru/#NAME"></a> - створює гіперпосилання на частину поточного документа.
|
|
<p> - створює новий параграф
<p align=?> - вирівнює параграф щодо однієї з сторін документа, значення: left, right, або center
<br> - вставляє переклад рядка.
<blockquote></blockquote> - створює відступи з обох сторін тексту.
<dl></dl> - створює список визначень.
<dt> - визначає кожен з термінів списку
<dd> - описує кожне визначення
<ol></ol> - створює нумерований список
<li> - визначає кожен елемент списку і присвоює номер
<ul></ul> - створює ненумерований список
<div align=?> - важливий тег використовується для форматування великих блоків тексту HTML документа, також використовується в таблицях стилів
|
|
<img xsrc="../files/145/name"> - додає зображення в HTML документ
<img xsrc="../files/145/name" align=?> - вирівнює зображення до однієї зі сторін документа, приймає значення: left, right, center; bottom, top, middle
<img xsrc="../files/145/name" border=?> - встановлює товщину рамки навколо зображення
<hr> - додає в HTML документ горизонтальну лінію. <hr size=?> Встановлює висоту (товщину) лінії
<hr width=?> - встановлює ширину лінії, можна вказати ширину в пікселах або відсотках.
<hr noshade> - створює лінію без тіні.
<hr color=?> - визначає певний колір лінії. Значення RRGGBB.
|
|
<table></ table> - створює таблицю.
<tr></ tr> - визначає рядок у таблиці.
<td></ td> - визначає окрему клітинку в таблиці.
<th></th> - визначає заголовок таблиці (нормальна осередок з відцентрованим жирним текстом)
|
|
<table border=#> - задає товщину рамки таблиці.
<table cellspacing=#> - Задає відстань між осередками таблиці.
<table cellpadding=#> - Задає відстань між вмістом комірки і її рамкою.
<table width=#> - встановлює ширину таблиці в пікселах або відсотках від ширини документа.
<tr align=?> або <td align=?> - задає вирівнювання клітинок у таблиці, приймає значення: left, center, або right.
<tr valign=?> або <td valign=?> - встановлює вертикальне вирівнювання для елементів таблиці, приймає значення: top, middle, або bottom.
<td colspan=#> - вказує кількість стовпців яку об'єднано в одній клітинці. (За замовчуванням = 1)
<td rowspan=#> - вказує кількість рядків яку об'єднано в одній клітинці. (За замовчуванням = 1)
|
|
<frameset></frameset> - випереджає тег <body> в документі, що містить кадри;
<frameset rows="value,value"> - визначає рядка в таблиці кадрів, висота яких визначена к-стю пікселів або у відсотковому співвідношенні до висоти таблиці кадрів.
<frameset cols="value,value"> - визначає стовпці в таблиці кадрів, ширина яких визначена к-стю пікселів або у відсотковому співвідношенні до ширини таблиці кадрів.
<frame> - визначає одиничний кадр чи область в таблиці кадрів.
<noframes></noframes> - визначає, що буде показано у вікні браузера якщо він не підтримує кадри.
|
|
<frame xsrc="../files/145/URL"> - визначає який з HTML документів буде показаний в кадрі.
<frame name="name"> - вказує Ім'я кадру або області, що дозволяє перенаправляти інформацію в цей кадр чи область з інших кадрів.
<frame marginwidth=#> - визначає величину відступів по лівому і правому краях кадру; повинно дорівнювати або бути більшим за 1.
<frame marginheight=#> - визначає величину відступів по верхньому і нижньому краях кадру; повинно дорівнювати або бути більшим за 1.
<frame scrolling=VALUE> - вказує чи буде виводиться лінійка прокрутки в кадрі; значення value може бути "yes," "no," або "auto". Значення за замовчуванням для звичайних документів - auto.
<frame noresize> - перешкоджає зміні розмірів кадру.
|
|
Форми
Для форм, що виконують якісь функції повинні бути запущені відповідні CGI скрипти на сервері. HTML лише створює зовнішній інтерфейс форми.
|
|
<form></form> - створює форми
<select multiple name="NAME" size=?></select> - створює скролівне меню. Size встановлює кількість пунктів меню, яке буде показано на екрані, інші будуть доступні при використанні прокручування.
<option> - вказує кожен окремий елемент меню
<select name="NAME"></select> - створює спадаюче меню
<textarea name="NAME" cols=40 rows=8> - створює вікно для введення тексту. Columns вказує ширину вікна; rows вказує його висоту.
<input type="checkbox" name="NAME"> - Створює checkbox. За тегом слід текст.
<input type="radio" name="NAME" value="x"> - Створює radio кнопку. За тегом слід текст.
<input type=text name="foo" size=20> - Створює рядок для введення тексту. Параметром Size вказується довжина в символах.
<input type="submit" value="NAME"> - Створює кнопку "Прийняти"
<input type="image" border=0 name="NAME" xsrc="../files/145/name.gif"> - Створює кнопку "Прийняти" - для цього використовується зображення
<input type="reset"> Створює кнопку "Скасувати"
|
Завдання до виконання .
Перша сторінка на HTML
<html>
<head>
<title>
Приклад 1
</title>
</head>
<body>
<H1>
Привіт!
</H1>
<P>
Найпростіша сторінка на HTML
</P>
<P>
Це моя перша сторінка! :)
Редагувати її можна в блокноті, а відкривати – в браузері.
</P>
</body>
</html>
Друга сторінка на HTML
<HTML>
<HEAD>
<TITLE>управління розривом рядків </Title>
</HEAD>
<BODY>
<marquee>Це моя учбова сторінка</marquee>
<H2>Мене звуть <kbd>ІМ’Я</kbd></H2>
<H3 align=center>Я живу в <em>МІСТО</em>.</H3>
<H4 align=right>Моя Батьківщина - <font face="Academy" color="Red">Україна</font>. </H4>
<H5 align=left>Я навчаюся в КЛК НАУ</H5>
<B>Тут</B>
<I>продемонстровані </I>
<Blink>різноманітні </Blink>
<U> способи </U>
<KBD>управління </KBD>
<FONT SIZE=5 COLOR=FF80C0>шрифтом:</FONT>
его
<FONT SIZE=5 COLOR=FF00FF>кольором</FONT>
и
<FONT SIZE=+3 COLOR=FF00FF>розміром.</FONT>
</BODY>
</HTML>
Необхідний НTML-код, для створення третьої сторінки.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=1251" />
<title>Первая страница.</title>
<style>
/* здесь описаны стили оформления ссылок*/
a:link {
color: #0033FF;
text-decoration: none;
}
a:hover {
color:#666633;
text-decoration: underline;
}
/* здесь описаны стили оформления контента*/
#kontent {
text-align:center;
}
</style>
</head>
<body id="kontent">
<h1 align="center">Моя первая страница!</h1>
<p align="center">Так можно создавать свою первую страницу.</p>
<p align="center">Для начала приведен простой пример, по ссылке можно посмотреть пример,
<br> который создан из таблиц.</p>
<p align="center"><a href="http://kapon.com.ua/sign_table.php" title="пример страницы">
пример страницы</a> построенной на таблицах.</p>
</body>
</html>
Рекомендована література
1.2 Й.Я.Ривкінд, Т.І.Лисенко, Л.А.Чернікова, В.В.Шакотько, Інформатика 11 клас Академічний рівень, Київ, "Генеза", 2011 ст.236-254.