В цьому розділі будуть розміщені приклади HTML– кодів, які найчастіше використовуються в HTML– сайтах. Більше матеріалу про мову гіпертекстової розмітки можна переглянути тут.

Або перейти на категорію Все про HTML

Приклад 1

Звичайна HTML– сторінка, можна використовувати для вивчення мови гіпертекстової розмітки HTML.

<html>

<head>

<title> Назва сайту, або заголовок</title>

</head>

<body>

1. Набирати текст кода в текстовоиу редакторі, також необхідно враховувати правила синтаксиса (не забувати закривати теги)

2.Вибираєм в меню Файл–зберегти як.

3.В відкритому вікні вибираємо місце для збереження файлу (наприклад– створіть папку і назвіть mysite)

4.В рядку імя файла прописуємо імя файлу з розширенням .html (рекомендую годовну сторінку назвати index.html

5.Натисніть кнопку зберегти


</body>

</html>

 

<html>
<head>

<title> Назва сайту, або заголовок</title>

</head>

<body>

1. Набирати текст кода в текстовоиу редакторі, також необхідно враховувати правила синтаксиса (не забувати закривати теги) 2.Вибираєм в меню Файл–зберегти як. 3.В відкритому вікні вибираємо місце для збереження файлу (наприклад– створіть папку і назвіть mysite)

4.В рядку імя файла прописуємо імя файлу з розширенням .html (рекомендую годовну сторінку назвати index.html

5.Натисніть кнопку зберегти

</body>

</html>


 

Приклад 2

Звичайна HTML– сторінка в якій веб–сайт потрібно розмістити по центру, для оптимального дозволу 1024х768 пікселів. Використовується код “table”.

<html>

<head>

<title> Назва сайту, або заголовок</title>

</head>

<body>

<table width= “1024” boorder= “1” align= “center”>

<tr>

<td>
<P>1. Набирати текст кода в текстовоиу редакторі, також необхідно враховувати правила синтаксиса (не забувати закривати теги)</P>

<P>2.Вибираєм в меню Файл–зберегти як.</P>

<P>3.В відкритому вікні вибираємо місце для збереження файлу (наприклад– створіть папку і назвіть mysite)</P>

<P>4.В рядку імя файла прописуємо імя файлу з розширенням .html (рекомендую годовну сторінку назвати index.html</p>

<P>5.Натисніть кнопку зберегти</p>

</td>

</tr>

</body>

</html>

 

<html>
<head>

<title> Назва сайту, або заголовок</title>

</head>

<body>

<table width= «1024» boorder= «1» align= «center»>

<tr>

<td>

<P>1. Набирати текст кода в текстовоиу редакторі, також необхідно враховувати правила синтаксиса (не забувати закривати теги)</P>

<P>2.Вибираєм в меню Файл–зберегти як.</P>

<P>3.В відкритому вікні вибираємо місце для збереження файлу (наприклад– створіть папку і назвіть mysite)</P>

<P>4.В рядку імя файла прописуємо імя файлу з розширенням .html (рекомендую годовну сторінку назвати index.html</p>

<P>5.Натисніть кнопку зберегти</p>

</td>

</tr>

</body>

</html>

54.а

⇑Приклад 2

Приклад 3

HTML– сторінка в якій розміщена згідно стнандарту HTML–4 версія html яка використовується при кодуванні документа, метадані. Розміри сайту будуть задані таким чином,

сайт повинен передивлятися при мінімальному розширенні 1024х768 пікселів.

викорисаємо таблицю з функцією <table> шириною в 900 пікселів

в цю таблицю ми добавимо ще 4–таблиці (першу для банера), (другу для зони меню), (третю для зони вмісту зі скролами), (для фіксованої зони з контактними даними).

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http–equiv= “Content–Type” content= “text/html; charset=windows-1251 ” >

<title> Назва сайту, або заголовок</title>

</head><body><table width= “900” border= “1” align= “center”>

<tr>

<td align= “center”><table width= “100%”  height= “60” border = “1” >

<tr>

<td width= “800”> місце для банера </td>

<td width= “100”> час і дата</td>

</tr>

</table>

</td>

</tr>

<tr>

<td height= “30”> зона горизонтального меню</td>

</tr>

<tr>

<td valign= “top”> зона скролів</td>

</tr>

<tr>

<td height= “30”> фіксована зона контактних даних </td>

</tr>

</table>

</body>

</html>



<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>

<head>

<meta http–equiv= «Content–Type» content= «text/html; charset=windows-1251 » >

<title> Назва сайту, або заголовок</title>

</head>

<body>

<table width= «900» border= «1» align= «center»>

<tr>

<td align= «center»>

<table width= «100%»  height= «60» border = «1» >

<tr>

<td width= «800»> місце для банера </td>

<td width= «100»> час і дата</td>

</tr>

</table>

</td>

</tr>

<tr>

<td height= «30»> зона горизонтального меню</td>

</tr>

<tr>

<td valign= «top»> зона скролів</td>

</tr>

<tr>

<td height= «30»> фіксована зона контактних даних </td>

</tr>

</table>

</body>

</html>

104а

⇑Приклад 3

Збережіть  розширення файлу.html (наприклад 1.html)

тип файлу текстовий документ в кодуванні Юнікод.

набирати текст краще вручну

 

Приклад4

За допомогою прикладу наведеного нижче ми можемо створити сайт з пяти сторінок. Дальше ми створимо горизонтальне меню і сторінки, зєднані з кожним посиланням. Для того щоб було простіше визначити зони веб–сайту, ми розмалюємо таблиці.

Меню HOME буде посиланням на документ index.html

Продукція produse.html

Про нас despre.html

Зображення imagini.html

Контакти contact.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http–equiv= “Content–Type” content= “text/html; charset=windows-1251 ” >

<title> Назва сайту, або заголовок</title>

</head><body><table width= “900” border= 1  align= center>

<tr>

<td align= center><table width=  100%  height= 60 border = 1 >

<tr>

<td width= 800 bgcolor= “#cc3333” > місце для банера </td>

<td width= 100 bgcolor= “#66ff99” > час і дата</td>

</tr>

</table>

</td>

</tr>

<tr>

<td height= 30 bgcolor= “#cccc99” >

<a href = “index.html” ><strong> HOME </strong></a>

<a href = “produce.html” > ПРОДУКЦІЯ</A>

<a href = “despre.html” >ПРО НАС</a>

<a href = “imagini.html” >ЗОБРАЖЕННЯ</a>

<a href= “contact.html” >КОНТАКТИ </a>

</td>

</tr>

<tr>

<td valign= top bgcolor= “#33CC33” >зона скролів</td>

</tr>

<tr>

<td height= 30 bgcolor = “ff6666” > фіксована зона контактних даних </td>

</tr>

</table>

</body>

</html>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>

<head>

<meta http–equiv= «Content–Type» content= «text/html; charset=windows-1251 » >

<title> Назва сайту, або заголовок</title>

</head>

<body>

<table width= «900» border= 1  align= center>

<tr>

<td align= center>

<table width=  100%  height= 60 border = 1 >

<tr>

<td width= 800 bgcolor= «#cc3333″ > місце для банера </td>

<td width= 100 bgcolor= «#66ff99″ > час і дата</td>

</tr>

</table>

</td>

</tr>

<tr>

<td height= 30 bgcolor= «#cccc99″ >

<a href = «index.html» ><strong> HOME </strong></a>

<a href = «produce.html» > ПРОДУКЦІЯ</A>

<a href = «despre.html» >ПРО НАС</a>

<a href = «imagini.html» >ЗОБРАЖЕННЯ</a>

<a href= «contact.html» >КОНТАКТИ </a>

</td>

</tr>

<tr>

<td valign= top bgcolor= «#33CC33″ >зона скролів</td>

</tr>

<tr>

<td height= 30 bgcolor = «ff6666″ > фіксована зона контактних даних </td>

</tr>

</table>

</body>

</html>

 103а

⇑приклад 4

Збережемо наявний вище код під іменами: produce.html  imagin.html  contact.html index.html despare. html Всі документи HTML повинні бути розміщені в одній директорії. Web–сайт щоб був оформлений належним чином повинен мати в своему складі зєднані між собою інтернет–сторінки. Наприклад index.html містить посилання на produce.html  imagin.html  contact.html index.html  despare.html 

Далі модефікуємо кожен файл нашого сайту, реалізуємо за допомогою тегу strong

Наприклад:

для сторінки index.––

<a href = “index.html” ><strong> HOME </strong></a>

<a href = “produce.html” > ПРОДУКЦІЯ</A>

<a href = “despre.html” >ПРО НАС</a>

<a href = “imagini.html” >ЗОБРАЖЕННЯ</a>

<a href= “contact.html” >КОНТАКТИ </a>

для сторінки produce.html 

<a href = “index.html” > HOME </a>

<a href = “produce.html” > <strong>ПРОДУКЦІЯ</strong></A>

<a href = “despre.html” >ПРО НАС</a>

<a href = “imagini.html” >ЗОБРАЖЕННЯ</a>

<a href= “contact.html” >КОНТАКТИ </a>  

Приклад 5

HTML– сторінка в яку входить (ліва колонка, права колонка і центральна частина) За допомогою прикладу наведеного нижче ми можемо створити сайт з декілька сторінок. Дальше ми створюємо горизонтальне меню і сторінки, зєднані з кожним посиланням. І звичайно цей код зберігаємо під назвою index.html, і створюєио папку для сайте в якій будуть зберігатись всі файли і папки.  Для того щоб було простіше визначити зони веб–сайту, ми розмалюємо таблиці.

  <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http–equiv= “Content–Type” content= text/html; charset=windows-1251″>
<title> Назва сайту, або заголовок</title>

</head>

<body>

<table width= “805” border= “0” align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#ffff00″>
<tr>
<td height =”190″ colspan=”3″align=”center”><h2>Верхня частина-Header</h2></td>
</tr>
<td colspan=”3″>
<!– –>
<table width= “805” border= “0” align=”center” cellpadding= “0” cellspacing=”0″ bgcolor=”#ff0000″>
<tr>
<td height =”40″ align=”center”><h2>Горизонтальний блок навігація</h2></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=”230″ valign=”top” bgcolor=”#d8cba8″>
<div id =”col_left” align=”center” >
<h2>Ліва колонка</h2>
</div>
</td>
<td width=”345″ valign=”top” bgcolor=”#d8cba8″>
<div id =”content” align=”center” >
<h2>Центральна частина</h2>
</div>
</td>
<td width=”230″ valign=”top” bgcolor=”#d8cba8″>
<div id =”col_right” align=”center” >
<h2>Права колонка</h2>
</div>
</td>
</tr>
<tr><td colspan=”3″align=”center” bgcolor=”#00ff00″><h2>Нижня частина-Footer</h2></td>
</tr>
</table>
</body>
</html> 


<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http–equiv= "Content–Type" content= text/html; charset=windows-1251″>
<title> Назва сайту, або заголовок</title>

</head>

<body>

<table width= "805" border= "0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffff00">
<tr>
<td height ="190" colspan="3"align="center"><h2>Верхня частина-Header</h2></td>
</tr>
<td colspan="3">
<!-- -->
<table width= "805" border= "0" align="center" cellpadding= "0" cellspacing="0" bgcolor="#ff0000">
<tr>
<td height ="40" align="center"><h2>Горизонтальний блок навігація</h2></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="230" valign="top" bgcolor="#d8cba8">
<div id ="col_left" align="center" >
<h2>Ліва колонка</h2>
</div>
</td>
<td width="345" valign="top" bgcolor="#d8cba8">
<div id ="content" align="center" >
<h2>Центральна частина</h2>
</div>
</td>
<td width="230" valign="top" bgcolor="#d8cba8">
<div id ="col_right" align="center" >
<h2>Права колонка</h2>
</div>
</td>
</tr>
<tr><td colspan="3"align="center" bgcolor="#00ff00"><h2>Нижня частина-Footer</h2></td>
</tr>
</table>
</body>
</html>

Ashampoo1

                                                                                             ⇑ приклад 5

 

Таблиця 1

Таблиця 2

Таблиця 3

Таблиця 4

Таблиця 5