В цьому розділі будуть розміщені приклади HTML– кодів, які найчастіше використовуються в HTML– сайтах. Більше матеріалу про мову гіпертекстової розмітки можна переглянути тут.
Або перейти на категорію Все про HTML
Приклад 1
Звичайна HTML– сторінка, можна використовувати для вивчення мови гіпертекстової розмітки HTML.
<html>
<head> <title> Назва сайту, або заголовок</title> </head> <body> 1. Набирати текст кода в текстовоиу редакторі, також необхідно враховувати правила синтаксиса (не забувати закривати теги) 2.Вибираєм в меню Файл–зберегти як. 3.В відкритому вікні вибираємо місце для збереження файлу (наприклад– створіть папку і назвіть mysite) 4.В рядку імя файла прописуємо імя файлу з розширенням .html (рекомендую годовну сторінку назвати index.html 5.Натисніть кнопку зберегти
</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>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>
⇑Приклад 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>
⇑Приклад 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>
⇑приклад 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″> </head> <body> <table width= “805” border= “0” align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#ffff00″> |
<!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>
⇑ приклад 5