Продовжую додавати матеріали про свої перші спроби в веб дизайні, дана сторінка буде присвячена матеріалу, як створити сайт на мові гіпертекстової розмітки HTML. Сайт на мові гіпертекстової розмітки HTML  я вже створив, і створити сайт використовуючи тільки html  в мене получилося. Вийшло  як для мене, не   гірше  ніж сайт створений за допомогою такої спеціальної програми для створення сайтів, як Web Page Maker.

 

Як я вже зазаначав в одній з публікацій, саме коли чомусь навчитись,  настає момент коли хочеться спробувати втілити всі свої старання в результат.

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

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

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

Прописування кодів в файли для сайту, методом  вручну по любому  принесе вам користі, так як це буде вже практика, по зосвоенню  веб–дизайну. А засвоїти повністю матеріал можливо тільки тоді, коли практикуєшся.

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

Мені вже стала в нагоді  знання мови  HTML, за допомогою таких знань, я вніс деякі зміни в своему шаблоні без втручання плагінів, одна з змін це зробив текст обтікаємим навколо картинки.

Переніс   кнопки “Лічильників” в центр,  а посилання  “Я у Гугл+” зробив  так, що відкривається тепер сторінка в новій вкладці. Ну і ще деякі зміни в дизайні, в принципі хто раніше заходив на сайт, то звичайно їх побачить.

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

Перший крок для того щоб зробити сайт на HTML

Ну що-ж починаемо тепер створювати наш сайт, я все почну робити з нуля, і буду записувати саму ту інформацію, яку я вважаю вам буде найлегше  засвоїти. Одне діло коли в самого получиться, інше когось навчити, кожен погодиться що навчити когось важче, ніж самому навчитись.

Ми збираємось створювати сайт

Ми збираємось створювати сайт, не одну сторінку а сайт. Сайт складається не з одного файлу, а з декількох, не з одної сторінки, а декілька. Нам ці  файли потрібно десь розмістити. Звичайно для цього потрібно створити головну папку, куда би ми розміщували наші файли.

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

Тому для того щоб створити сайт, потрібно перш за все створити “головну” папку в яку ми будемо розміщувати наші файли і папки. Першим ділом створюємо папку і даємо назву, бажано на англійський мові.

Назвемо папку “MYSITE”. В цій папці починаємо створювати перший файл, відкриваємо текстовий редактор і копіюємо цей код в (таблиця1).

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

 

Взагалі–то для створення сайту краще використовувати html–редактори а не текстові редактори, в html–редакторах присутня підсвітка коду, а вона допоможе побачити помилки в коді.

Зберігаємо  під назвою Index.html саме так має називатись головна сторінка, розширення повинно бути html. Далі зберігаємо імя файлу Index.html (тип файлу виставляємо “Текстовий документ у кодуванні юнікод якщо користуєтесь WordPad).

Таблиця 1

 


<!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>

 

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

Я взагалі–то рекомендую написати код вручну, не лінуватись. Краще  запамятовуються елементи.

Поміняйте лапки (“”) в тих місцях де це необхідно, передивіться код  фото внизу так має виглядає код в текстовому редакторі Notepad++. В цьому редакторі можна орієнтуватись по кольорах, в ньому присутня підсвітка тексту.

В принципі все повинно відображатись коректно, оскільки я перевірив в двох редакторах про які йшла мова, в WordPad виставляємо при зберіганні розширення html, а в Notepad++ також звісно що, щоб текст відображався правильно, прийшлось ще й поміняти кодування з utf–8 (без–BOM) на ANSI.

 html3html4

⇑так має виглядає код шаблону в текстовому редакторі Notepad++.

 Якщо все виставлено добре тоді має появитись така картинка.

 

Ashampoo_Snap_2015.02.28_17h34m35s_004_Назва сайту- або заголовок - Mozilla Firefox

 

⇒має появитись така картинка

 


 

В першій частині показано на відео як створити самий простенький html – шаблон, з такого простенького шаблону і починається вивчення мови html і засвоєння веб дизайну


А тепер розберемо сам код, коротко яку роль відіграє кожен рядок в коді.

На самому початку документа ми бачимо елемент Doctype, що він означає. Він означає версію HTML, згідно стандарту в кожному документі HTML повинна бути позначена версія яка використовується при кодуванні документа.

В нас виставлена весія html 4.01 Рекомендують любий HTML–документ починати з рядка DOCTYPE  версія HTML, який містить визначення типу документа DTD

Transitional означає перехідний тип HTML 4.01 цей тип більшість рекомендують, включає в себе всі елементиі атрибути які ви зможите використовувати в документі HTML навіть устарівші і небажані.

 

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

 

<!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 » >

Більш детальніше по декларації документа HTML ви зможите переглянути читаючи публікацію “Базова структура документа HTML” перейшовши за цим посиланням. http://ruszura.in.ua/vse-pro-html/bazova-struktura-dokumenta-html.html

Наступний рядок після декларації і  це тег  <html>,  це самий головний тег, його можна порівняти з корінням для дерева “html тег — це корінь для всіх остальних тегів”. Всі остальні основні теги знаходяться всередині тегу <html>.

Наступні після тегу <html> вставляються ще два тега. Це <head> і <body>, іх також можна вважати основними. Іхнім батьківським тегом вважається тег <html>. Якщо тег <html> видалити то сторінка в браузері відкриється пустою.

Всередині цих двох тегів входять інші теги, іх  називають нащадками.

В тег <head> входить його нащадки це теги <meta> <title>  <link>, вони більш широко використовувані, інші <base> <style> <script>.  використовуються рідко,

<style> коли підключаємо SCC–каскадна таблиця стилів,

<script> якщо бажаємо розмістити скрипт в області <head>, або різні кнопки за призначенням.

<meta> Використовується для того, щоб визначити ключові слова, які використовує пошукова система, вони потрібні пошуковій системі для покращення якості результатів пошуку. Також використовуються в якості технологій SEO. Це каталог метаінформації.

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

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

<title> це обовязковий елемент заголовку веб-сторінки використовується для індентифікації документа, і показує коротку інформацію про документ.

Елемент  “title” потрібен також для того щоб в вікні браузера вивести назву нашого сайту. Тому назву сайту поміщаємо між тегами <title></title>, після чого вона буде виводитись в браузері. В вікні браузера буде показаний той напис, який ви пропишите між тегами <title></title>

<title>Zura-syte</title>

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

В тег <body> входить ще більше нащадків, якщо ми будемо створювати  наприклад “список”. Тоді прописуємо атрибут <ol.> а його нащадком буде  тег< li>

Якщо візьмем тег <body> то його нащадком буде тег <ol>. Всі теги які знаходяться в середині іншого тегу називаються його нащадками.

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

Першим що ви бачите в коді сторінки в нижче  тегу <body> атрибут “table” , слово “table” з англійської означає таблиці, спочатку створюють головну таблицю, яка визначить розмір сайту.

Якщо писати сторінку на одній мові html, без підключення scc–каскадних таблиць стилей, то сторінки сайту складається з головноі таблиці, в котру входять додаткові таблиці, для того щоб розділити на області в котрі буде входити інформація. І рядки які розміщують в середині таблиць.

Починається таблиця з тегу <table>, він служить контейнером для елементів, які визначають вміст таблиці, і атрибутів <tr> служить для сворення рядка таблиці,і <td>для створення ячейки таблиці.

Всі елементи і атрибути до сворення таблиці ви можите передивитись за посиланням: 

http://ruszura.in.ua/html.html

Подивіться ще раз код сторінки і шаблон html на картинці, яки в нього  на даний момент вигляд, як ви бачите він складається з частин ( верхня частина, горизонтальний блок навігації, ліва колонка, центральна частина, права колонка, нижня частина), для кожної з чих частин створена додаткова таблиця.

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

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

Можна також перейти на ту сторінку клацнувши на кнопку з назвою ” HTML” ще раз скопіюєте код в (таблиці 1), збережіть і відкрийте сторінку в браузері, подивіться що саме помінялось, в загальному запамятайте які теги і атрибути за що відповідають.

Слова “align”  “width”  “height’  “border”  “cellpadding” “cellspacing”  — бажано запамятати їх значення, оскільки вам часто прийдеться з ними працювати, коли будете створювати різні форми, або робити зміни в кодах шаблону.

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

user_97

 


Продовжуємо, наступний крок, перш за все що потрібно зробити це дати і прописати назву нашому сайту. Назви прописуються  між тегами, <title></title> Вказавши назву, і зберігши зміни, після перезапуску сторінки, в нас появиться назва сторінки, назву можна буде прочитати в верху, у вкладці

<title> Назва сайту, або заголовок</title>. прописуємо назву, після чого в нас появиться замість тексту “Назва сайту або заголовок” назва сторінки, яка буде читатись замість цього тексту в вікні сторінки, це буде назва сторінки (якщо не прописувати назву, тоді в нас залишиться текст “Назва сайту, або заголовок”) саме цей текст буде відображатись в вікні браузера, замість назви вашого сайту.

Наступне коли ми визначились з назвою нашого документа, і прописали назву в тезі “title”, тоді переходимо до блоку “head. Що нам потрібно зробити в цьому блоці, тут  буде розміщуватись шапка сайту, навігаційне меню, і т.д.

Другий крок по створенню сайту на мові HTML.

Визначаємось спочатку якою в нас буде шапка нашого сайту, вона повинна знаходиться в розділі “head”. Прикрасити розділ “head”, можна таким чином, або  поміняти колір з жовтого на той який вам подобається, або розмістити в розділі “head” посилання на фото. Саме картинка на яку ви вкажите, буде відображатись в розділі “head”. Я вирішив помісти в розділ рисунок.

Як його помістити. Створюємо папку в середині головної папки  MYSITE і назвем папку для фото “images” в  цій  в майбутньому можна розміщувати всі ваші фото.

Далі вибираємо фото, і розміщуємо фото в щойно створеній папці “images”.  Даємо назву файлу картинці, або поміняємо назву файлу  на простішу для зручності, наприклад дамо назву цифрою “1”. А можна і не міняти, а назву файлу прописати в коді,  як кому зручніше.

Я вважаю краще поміняти назву на простішу, мені так зручніше, потім потрібно прописати посилання в коді.

<img src= "images/595615.jpg" width= "817" height= "550" >

Коли все готово, тоді прописуємо рядок коду вище, щоб в “шапці сайту” в вас появилась картинка, звичайно що звертаєту увагу щоб назва і розширення картинки в рядку коду співпадало з вашою, і підганяєте розміри атрибутами “width” і “height”.

<img src = “images/595615.jpg” width = “805” height = “550” > в області перед закриваючим тегом </td>

Розмір width = “805” виставляємо щоб підігнати фото під розмір ширини нашого сайту. В вас має получитись такий вид, щоб картинка співпадала по ширині з іншими частинами, зверху прописана назва сторінки, вона пригодиться в майбутньому коли додавати якийсь з скриптів, наприклад скрипт який відображає дату, або годину.

Дальше коротенькі вказівки які стосуються того,  що означають кожна частинка в рядку коду.

<img src = ⇒ застосовують для того, щоб вказати шлях де знаходиться картинка, коли прописується посилання на картинку вказується на початку рядка коду саме (<img src =)

“images/595615.jpg”  images назва папки де розміщена картинка

595615.jpg  назва фото і розширення, (розширення потрібно виставляти правильно, тому–що рисунок не буде відображатись якщо в нього розширення  jpg а виставити замість jpg  розширення png.

width=”805″ height=”550″  підганяємо під розмір, ширину висоту міняючи цифри, якщо необхідно.

Там де в коді було написано текст  “Верхня частина Header” я поміняв на слова “Zura–syte”, в кінцевому підсумку в верхній частині по центру зявилась назва сайту.

2html

⇑ фото в розділі “head”

Далі я вирішив  в області head  розділити  картинку і головне горизонтальне меню білою стрічкою як на  фото внизу.

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

В папці шаблону мусить бути присутній подібний файл. На такому файлі як за звичай, розташовують кнопки горизонтального меню. І в папці для картинок, в більшості випадків назва такої папки з перших трьох букв “img”, і можуть закінчуватись на “e” або “es” або “in”

Щоб вивести любий рисунок на екран, потрібно на нього прописати посилання в коді.

<img src= "images/nav.png" height= "27" >

Білу стрічку див на (таблицю 1) я розміщую в області “Горизонтальний блок навігації”.

3html

⇑розділити білою стрічкою

В рядку <td height = “40” align= “center” ><h2>Горизонтальний блок навігації</h2></td> видаляємо (<h2>Горизонтальний блок навігації</h2>), і між ними прописуємо наше посилання на рисунок. 

<td height = “40” align= “center” >
<img src= “images/nav.png” height= “26.6” >

розмір висота height= “26.6” підганяємо під розмір вашого сайту.

Коли рисунок готовий в нас зявиться красива стрічка, яка повинна розділити шапку, від головного меню, в майбутньому на цю картинку накладутся кнопки з назвами сторінок, за допомогою стилей CCS.

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

Під рядком коду <td height =”40″ align=”center”><img src= “images/nav.png” height= “27” >, який вказує на картинку. Тоді назва сторінки відобразиться нижче білої стрічки, якщо над рядком коду тоді буде відобржатись вище. По суті, великого значення вище чи нижче зараз не має, оскільки в подальшому всерівно прийдеться щось переправляти, міняти і т.д. 

Отож нижче код  створюємого головного горизонтального меню. 

Нижче картинки “Біла стрічка” я вирішив зробити головне меню, прописавши код посилань, і створивши для посилань сторінки.

<a href="index.html"><strong>Головна</strong></a>
<a href="video.html">Мої відео</a>
<a href="href.html">Посилання</a>
<a href="imagin.html">Фото</a>
<a href="despre.html">Про мене</a>
<a href="contact.html">Контакти</a>
<a href="programs.html">Програми</a>

Ви можите прописати свої назви сторінки, і свою кількість сторінок.

Що тепер робимо, я використовую завжди такий метод, просто копіюю файл “index.html”, і створюю поруч інший файл. У нас з’явиться таким чином ще один файл, правда з назвою “Копія index”, потім створюю ще один але вже “Копія 2 index” і т. д. Так створюємо необхідну кількість сторінок на сайті.

Потім міняємо назву “Копія index” на назву сторінки. Бажано сторінку називати на латиниці, наприклад сторінку з посиланнями назвати “href.html” а не “Посилання.html”.

Наприклад прописуючи посилання на сторінку <a href= “href.html” >Посилання</a> і файл сторінки зберігаємо за назвою   “Зберегти як”  → як “href” а не як “Посилання”.

Так само всі остальні сторінки, копіюємо, зберігаємо, а потім міняємо назву, а можна зразу “Зберегти як”. Тепер перевіряємо, якщо всі відкриваються сторінки, тоді вони готові для заповненя.

Можна додати тег <strong> щоб назва відкритої сторінки виділялась жирною, в зоні горизонтального меню.

Але тег <strong> потрібно прописувати, наприклад візьмемо сторінку “index.html”, прописують <strong> тільки в посиланні на “index” а не на “video” або “contact” і т.п..

Наприклад на  “index.html”  прописуемо <strong> тільки в посилання на  “index” а не на  “video” і т.д.

<a href= “index.html” ><strong>Головна</strong></a>⇒ коли відкриємо сторінку, тоді назва “Головна” в горизонтальному меню буде виділятись жирним шрифтом.

<a href= “video.html” ><strong>Мої відео</strong></a>⇒ коли відкриємо сторінку, тоді назва “Відео” в горизонтальному меню буде виділятись жирним шрифтом.

Всі похожі дії проводимо для кожної сторінки. Далі залишається все перевірити, як відкриваються сторінки, і просто оформити кожну нами вибрану сторінку.

 

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


Почнемо з “Контакти”

user_97

 


 

Форма відравки  “Контакти”

Ця частина сторінки буде присвячена створенню “Контактної форми”. У цій частині, написано як створити саму простеньку контактну форму, відправити повідомлення одною тільки формою без скрипта буде не можливо,  про скрипт який потрібний для того щоб відправити повідомлення з самої форми, можна знайти в категорії “Все про РНР” в одній з публікацій .

Для створення контактної форми, спочатку створюємо  файл в головній або ще називають в кореневій папці сайту, у файлі який відноситься до головної сторінки “index.html” прописуємо посилання на цей файл, щоб зєднати сторінку контактну форму, з головною сторінкою, далі робляться такі ж самі дії з усіма іншими сторінками на сайті, для того щоб ми могли перейти на сторінку “Контакти” з любої сторінки.

З яких полів складається  “Контактна форма” поля для “імені”, “прізвища”, “тексту”, а також деякі додаткові елементи які можуть вам знадобитися, це “пароль”, “чібокси”, “радіокнопки”, кнопки “відправити”, “скинути” (ця кнопка повністю очищає всю написану інформацію), а таккож кнопка  “варіант вибору”.

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

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

В іншому випадку лист не відправиться, ну і звичайно що потрібно бути написати простенький скрипт, мовою програмування РНР, для того щоб отримати результат відправника. Не має сенсу якщо ви лише починаєте засвоювати дану галузь, вникати ще й в мову РНР, html — це те чого на початку цілком вистачає. 

Отож, починаємо прописувати коди для сторінки “contact.html” за допомогою редактора Notepad ++, працюючи з цим редактором, більшість застосовують його для не складних операцій, таких як, простенькі зміни в коді.

Цей редактор швидко запускається, не нагружає систему. Тому звісно що доцільніше для таких завдань застосувати  Notepad ++, ніж очікувати поки всі модулі завантажить РНР Storm.

Більшість з нас користувалися контактною формою, тому думаю що відомо як вона працює.

контактна форма, нижче на фото, ми можемо створити таку написавши код мовою html. У формі вказують свої дані, пишуть текст повідомлення, ну і для зручності отримувачу листів вказуємо тему повідомлення.

1gf

Але відправити ці дані на сервер ми не зможемо, щоб відправити ці дані потрібна інша мова, це мова програмування РНР. Вона спеціально призначена для серверів, і її розуміють тільки сервера.

Для того щоб відправити ці дані на сервер,  необхідно зєднати документ “contact.html” написаний на мові розмітки тексту HTML з мовою програмування РНР

Можна або створити в нашій папці MYSITE файл з розширенням РНР, або поміняти розширення файлу contact.html на розширення “contact.рнр”.  Якщо, а вірніше в нашому випадку не має сенсу міняти розширення файлу на “рнр”, оскільки на даному етапі засвоення цієї галузі, ми практикуємось щоб краще засвоїти html.

Щоб передивлятись результат сторінки на html після змін в коді, сторонні сервери нам не потрібні. Можна наперед створити такий файл, і назвати файл formdata.php. І в такому файлі будуть записані спеціальні інструкції, які будуть стосуватись відправки даних. Це ті дані, які після обробки скрипта, повинні потрапити до отриувача.

Пропишемо рядок коду, для того щоб зєднати сторінку “contact.рнр” з файлом formdata.php.

Для цього  створюємо між тегами <body> </body> парний тег <form></form>. Це можна сказати свого роду контейнер, в середині якого розміщуються всі необхідні поля, для заповнення контактної форми.

В тезі <form> присутні спеціальні атрибути, які нам необхідно вказати.

Атрибут “action” який відповідає за те, куди потрібно відправити форму.

Атрибут “method” метод яким ми будемо відправляти форму. Методів існує два це “get” і “post”.

А також якщо на сторінці є декілька форм, тоді необхідно дати назву формі. За це відповідає атрибут “name”.

 

код щоб зєднати сторінку з файлом formdata.php.

<form action= “formdata.php” method= “post” name= “form1” >

 

<form action="formdata.php" method="post" name="form1">

Сторінка зєднана, далі приступаємо до створення наступних елементів, це поля для введення імені, фамілії, тексту, а також додаткові елементи це чібокси, радіокнопки, кнопки вибору варіантів.

Починаємо створювати  три поля, одне з де що більшими розмірами, це поле для введення тексту в код якого ми додамо кількість знаків “cols” і кількість рядків “rows” , можна ще одне добавити для того щоб вказати тему повідомлення “Тема”.

Це “імя”, “фамілія”, “текст” “тема”, і “поле для почтової адреси”.

Всі поля, для відправки даних починаються з тега <input> далі вказуємо тип type= “text” і назву поля  name= “yourname”

<input type= “text” name= “firstname” >

Всі ті самі дії для кожного поля (які ми хочимо щоб були присутнні в формі “імя”  “фамілія” “поле для почтової адреси”)  копіюєм рядок, і потім міняємо де що  хначеннях.

Міняємо назву в атрибуті “name”.  Ми можемо вказати довжину поля якщо додамо атрибут “size”.

Для того щоб створити поле для введення “Паролю”, нам потрібно прописати тип  type=”password”.

Для текстового поля вказуємо тег парний тег “textarea” потім звичайно атрибут “type” і також необхідно вказати кількість знаків “cols” і кількість рядків “rows”.

Також при необхідності в перших трьох полях також можна задати кількість символів, які допускаються для введення в полі.

Для цього додаємо атрибут maxlength = “12” в лапках вказуємо кількість символів. Досить корисний атрибут, пригодитись може для поля “Імя” або для “Пароля”.

Коли ми захочимо обмежити допустиму кількість введених символів для імені, тоді не можна буде ввести більше символів, чим вказано в лапках, а саме більше дванадцяти символів, оскільки імен з такою кількостю символів не буває.

Або для “Паролю”, також затосовуть цей атрибут, якщо бажаемо виставити допустиму кількість введених символів.

<input type="text" maxlength="число">
<input type="password" maxlength="число">

Нижче приклад коду для “Імені”  “Фамілії” “Паролю” “Текстового поля”


<h2>Імя</h2>
<input type="text" name="firstname">
<h2>Фамілія</h2>
<input type="text" name="firstname" size="30">
<h2>Пароль</h2>
<input type="password" name="parol" size="30">
<h2><p>Введіть текст</p></h2>
<textarea name="text" cols="30" rows="6"></textarea>

Додаткові елементи

Радіокнопки можуть виикористовуватись для відповіді на якесь запитання. Де потрібна коротка відповідь.в середині поля форми. Через них ми можемо вказувати варіанти відповіді “Так” чи “Ні”.

<h2>Радіокнопи</h2>
<label><input type="radio" name="radio">Так</label>
<label><input type="radio" name="radio">Ні</label>
<label><input type="radio" name="radio">Утримався</label>

Чекбокси це альтернатива радіокнопків про-те вони дозволяють не тільки  виділити  елемент, але і коротко описати елемент, якщо радіокнопками можна виділити дві або три відповіді, то за допомогою  чекбоксів декілька. Можуть пригодитись якщо необхідно виділити всі варіанти а не один.

Наприклад стануть в нагоді якщо необхідно вказати які програми ви хочити завантажити. Біля кожного чекбоксу вказати назву, де потім можна вибрати одну або декілька.

<h2>Чебокси</h2>

<label><input type="checkbox" name="ez">1</label>

<label><input type="checkbox" name="ez">2</label>

<label><input type="checkbox" name="ez">3</label>

Елемент “select” ще один елемент “Вибору”. Після створення такої форми вибору появляється випадаючий список.

<h2>Варіанти вибору</h2>
<p>
<select name="sleep">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</p>

Елементи створення кнопок, звичайна кнопка щоб відправити дані, і кнопка щоб очистити всі дані які були написані при заповнені форми.

<p><input type="reset" name="batton1"><input type="submit" name="batton1"></p>
<H3>Приклад кнопок 1</H3>

html5

⇑сторінка Контакти

Також на Zura — Blog знаходиться публікація про те як створювати контактну форму, і деякі додаткові елементи до неї, ви можите прочитат в публікації  “Створюємо контактну форму для сторінки написаній на HTML” , для цього потрібно клацнути і  перейти за посиланням.

Код даної форми самий простенький, адже мета це спробувати на практиці створити саму просту форму відправки, в мережі можна знайти не один готовий шаблон для контактної форми,  якщо комусь з вас потріббний такий шаблон їх знайти не проблема.

Як і не тяжко любий шаблон форми підігнати під свою сторінку, правда за умовою якщо відомі значення тегів і атрибутів. В ЗАГАЛЬНОМУ потрібно просто знати мову розмітки тексту html. Вона зовсім не тяжка для засвоення, потрібно всього то запамятати, для чого використовують той чи інший тег і атрибут.  

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

Як створити  повністю робочу контактну форму, такі матеріали також є в наявності на Zura — Blog, знайти їх можна як і на сторінці, підвівши курсор миші в головному меню в верхній панелі сайту на “HTML” , і з випадаючого списку вибрати сторінку з назвою “Створюємо контактну форму з допомогою рнр – скрипта”, а також знайти і в  публікаціях які стосуються контактної форми.

Наступні матеріали про створення сторінок для сайту  розміщені на другій сторінці.


 

В третій частині показано на відео як створити саму простеньку форму відправки повідомлень, а також показано як додати додаткові елементи, скориставшись кодами на цій сторінці



user_97

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