Єдина Країна!

Головне меню

Наша кнопка

Українські уроки про ІТ

Друзі

Підтримка української армії



А що таке HTML?
Написав Dzo   
Четвер, 23 червня 2011 23:26
Переглядів: 8234

Вступна лекція

HTML (HyperText Markup Language) - це мова розмітки гіпертексту (детально про гіпертекс можна прочитати на вікіпедії).

HTML - це не мова програмування. Це форма збереження даних. Чим відрізняється мова програмування від мови розмітки? Глобально - мова програмування програмує дещо на виконання деяких дій, а мова розмітки готує певним чином деякий документ для того, щоб абияка програма могла його використовувати. Розмітка - лишень розмітка і тільки розмітка - ніякого програмування!

Таким чином, створивши HTML-документ, ви передаєте його програмі (здебільше, HTML-документи використовуються для створення веб-сайтів, отже, зазвичай, програма для обробки HTML-документа є браузер (browser - переглядач з англійської)), що обробляє його згідно правил, що в неї запрограмовані. Отже, коли браузер “читає” HTML-документ, то він малює на екрані його вміст, керуючись правилами, що в нього закладені для показу файлів, що розмічені мовою HTML. Певне, трошки заплутано, але це краще, ніж “програмувати” на HTML.

Отже, розглянемо детально.

Уявімо, що ми браузер. З цього і почнеться початок.

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

код номер 1:

<html>
<head>
<title>Any Title</title>
</head>
<body>
<p>This is HTML document</p>

<uf-uf style=”font:bold 20px Verdana”>Uf-Uf</uf-uf>

</body>

</html>

 

 

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

HTML

Перший контейнер, що ми зустріли - контейнер html, що каже нам, що вся інформація, що в ньому міститься (між та ), є розміткою HTML.

HEAD

Йдемо далі. А далі контейнер head (англ. голова), що каже нам, що все, що в цьому контейнері - є службовою інформацію. Службова інформація не виводиться на екран, вона може містити посилання на файли скриптів або стилів, мета-теги та іншу лабуду.

TITLE

В контейнері head ми зчитуємо контейнер title (англ. заголовок), - це заголовок нашої сторінки, тобто те, що буде написано в назві вкладки на браузері. Head закривася тегом , йдемо далі.

BODY

Входимо в контейнер body (англ. тіло) - контейнер, що містить інформацію для виводу на сторінку. Все (ну, майже все), що міститься в ньому ми побачимо, переглядаючи HTML-сторінку.

P

В контейнері body першим йде контейнер p - скорочено від paragraph. Це нам каже, що інформацію всередині цього контейнера треба розмістити за правилами розміщення таких контейнерів, котрі в нас запрограмовані. Зазвичай, параграф має певні відступи згори та знизу і все.

UF-UF

А от далі цікаво.

Тепер ми читаємо контейнер, назва якого в нас не запрограмована. Ми й гадки не маємо, що з ним робити. Це форматування тексту? Скрипт? Стиль? Невідомо. А ще в ньому стиль прописаний style=”font:bold 20px Verdana” . Може, показати просто текст з форматуванням? Чи нічого не показувати? Тут вже залежить від того, який ми браузер. Наприклад, сучасні браузери(Internet Explorer лише 9-ий) покажуть нам текст із форматуванням font:bold 20px Verdana (жирний шрифт Verdana розміру 20 пікселів). Але старі браузери покажуть лише текст, ігноруючи все інше. Тому, поки що краще не зловживати своїми власними тегами, проте, це може комусь і знадобитися. Але це вже тема не ця. Зауважте на майбутнє, що робота зі власними тегами має бути дуже обережною, адже треба враховувати багато різних моментів, що можуть виникнути.

На завершення

На завершення статті, ми створимо HTML-файл та відкриємо його у браузері.

Отже, створіть десь на вашому комп'ютері хвайл з назвою index (це поширена назва початкової сторінки, безліч серверів налаштовуються саме так, тобто, коли ви зайдете на сайт, першим відкриється файл із такою назвою. Але все це налаштовується-переналаштовується, але ці знання вже не входять в пакет HTML). Вкажіть розширення хвайлу html (розширення на Вікіпедії). До речі, ви можете використовувати розширення htm, проте воно вважається застарілим та нерекомендованим.

!! Для тих, хто намагається створити файл index.html через Windows Explorer, а виходить якась текстова кака. У Windows Explorer стандартно стоїть опція приховання розришення хвайлу, отже, якщо ви обрали(як то роблять багато хто і я(проте, я рідко створюю хвайли через Windows Explorer))  у меню створення хвайлу текстовий документ, а потім просто назвали його index.html, то розширення все рівно залишилося txt. Отже, для шоб змінити це, необхідно піти до налаштування вигляду папки (керівництво на мікросохті).

Після цього необхідно відкрити цей наш хвайл через якийсь текстовий редактор (саме редактор, не текстовий процесор на зразок Microsoft Word або Openoffice.org). Після цього просто скопіюйте код, що я привів раніше (що підписаний код номер 1:) ти вставте в ваш новий файл. Після цього збережіть його та відкрийте через браузер. Правою клавішею, відкрити за допомогою - і оберіть ваш браузер.

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

На цьому вступна лекція з HTML закінчується. Коментуйте, що ясно, що не ясно.

!! Зауважте, я звертаю увагу лише на ввічливі коментарі.

Най щастить!


( 16 Проголосувало )
Коментарі
Добавити новий
Тарас  - Дякую)))   |2012-02-16 16:24:11
Гарний сайт, я в програмуванні не шарю,
але думаю навчитися створювати сайти
Чому б вам не створити книгу в
якій докладно будуть всі статті по порядку,
типу "Програмування сайтів для
чайників"
Адміністратор   |2012-02-20 04:30:08
avatar книгу звичайно можна зробити,але треба
склепати весь матеріал в одну книгу і
стилізувати,)
Коля   |2012-09-13 18:50:56
avatar Допоможіть мемі докладніше вивчити HTML.
Адміністратор   |2012-09-15 14:10:43
avatar Коля, питайтесь, що саме цікавить?
або
напишіть мені у скайп wertomaniak
Влад   |2014-07-14 02:59:09
Вiтаю! Менi дуже сподобалась ця статья, я вже
маю деякi навички в програмуваннi мовою html,
також знаю про всi можливостi створення
сайту... Якщо у вас знайдеться вiльнп
хвилинка, я би хотiв звязатися з вами та
поспiлкуватися, дiзнатися щось нове для
себе, а також щоб ви дали деякi поради))) З
повагою, Влад.
Адміністратор   |2014-07-18 18:25:15
avatar Так звісно, написав вам приватне
повідомлення.
вася  - гарний сайт   |2015-12-17 16:12:52
де можна скачати цю прогу
Адміністратор   |2016-01-01 16:15:40
avatar Яку програму?
Створення HTML можливе в
будь-якому текстовому редакторі.
Можете
завантажити Sublime, для прикладу
Вася   |2016-01-15 17:25:39
"Таким чином, створивши HTML-документ, ви
передаєте його програмі (браузеру) " тобто
після закриття файлу браузер його одразу
читає чи потрібно виконати ще деякі дії?
Адміністратор   |2016-01-25 00:50:40
avatar Передати HTML файл браузеру загалом можна 2
шляхами: передати готовий файл або
згенерувати його мовою програмування.
В
будь-якому випадку, браузер отримавши HTML
файл відображає його без додаткових дій
володимир  - штмл редактор   |2017-01-25 15:14:44
Я колись пробував HTML, це було давно і писав я
все в ручну в блокноті. це не дуже зручно
можете порекомендувати чкийсь редактор для
початківців.чи краще початківцям писати в
блокноті.
Адміністратор   |2017-02-05 13:59:32
avatar Зараз багато популярних і безкоштовних,
н-д:
Notepad++,
Sublime,
Atom.
Залишити коментар
Ім`я:
e-mail:
 
Тема:
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Введіть цей настирливий код
Русская редакция: www.freedom-ru.net & www.joobb.ru

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

Ввійти



Підписка

Хто онлайн?

Немає
На даний момент 105 гостей на сайті

Український рейтинг
TOP.TOPUA.NET