|
|
| Рядок 1: |
Рядок 1: |
| '''HTML''' ''(англ. '''H'''yper '''T'''ext '''M'''arkup '''L'''anguage)'' - стандартна мова розмітки у цих ваших [[Інтернети|інтернетах]]. Використовується абсолютно всюди(у [[Головна|ФМ]] теж).
| |
|
| |
|
| == На пальцях ==
| |
| Фактично html складається з тегів (по типу ключових слів).
| |
|
| |
| Теги необхідно закривати (<nowiki><tag></tag></nowiki>).
| |
|
| |
| Деякі теги не треба закривати, наприклад <nowiki><img></nowiki>(імпортує на веб-сторінку зображення).
| |
|
| |
| Виглядають вони десь так:
| |
| <br /><code><nowiki><html>, <givno> і.т.д</nowiki></code>.
| |
| <br />Кожен тег має певну функцію, наприклад тег <code><nowiki><i></nowiki></code> робить текст курсивом: <code><nowiki><i>Цей текст буде курсивом</i></nowiki></code>.<br />
| |
| Для верстки веб-сторінок в основному використовують блоки <nowiki><div></nowiki> або таблиці <nowiki><table></nowiki>.
| |
| <br />Ось приклад повноцінної веб сторінки (пробіли розставлені для читабельності) (<nowiki><!-- --></nowiki> - кометарі, які не впливають на веб сторінку.):<br />
| |
| <pre>
| |
| <html><!--Головний тег хтмл, з нього починається все(може ще бути <!DOCTYPE>,
| |
| але вам це знати не треба)-->
| |
| <head><!--Початок голови документу(тут стилі, скрипти і т.д.)-->
| |
| <title>Назва сторінки</title><!--Буде відображатись на вкладці браузера-->
| |
| </head><!-- Кінець голови -->
| |
| <body><!-- Початок тіла документу -->
| |
| <div align="center"><!-- Вирівнювання по центру(<div> - це блок) -->
| |
| Тут основний контент.
| |
| </div>
| |
| </body><!-- Кінець тіла -->
| |
| </html><!-- І кінець документу -->
| |
| </pre><br />
| |
| Ось так.
| |
|
| |
| == Короткий список тегів ==
| |
| (Тут лише <u>основні</u> теги)
| |
|
| |
| {| align="center" class="standard" border="2" cellpadding="2"
| |
| |+
| |
| ! |Тег
| |
| ! |Значення
| |
| ! |Приклад
| |
| |-----
| |
| | <nowiki><html></nowiki>
| |
| | Початок будь-якого документу
| |
| | <nowiki><html>Тут контент...</html></nowiki>
| |
| |-----
| |
| | <nowiki><head></nowiki>
| |
| | «Голова» документу. Тут зазвичай розміщують теги link та [[Скрипт|скрипти]].
| |
| | <nowiki><head>...</head></nowiki>
| |
| |-----
| |
| | <nowiki><body></nowiki>
| |
| | «Тіло» документу. Тут розміщують основний контент(текст, зображення і інше).
| |
| | <nowiki><body>...content...</body></nowiki>
| |
| |-----
| |
| | <nowiki><script></nowiki>
| |
| | У цьому тегу розміщуються скрипти(«сценарії»), які додають веб-сторінці інтерактивності. Як правило написані на [[Javascript]]
| |
| | <nowiki><script>var someFuckingShit="Hello, nigas";alert(someFuckingShit);</script></nowiki>
| |
| |-----
| |
| | <nowiki><link></nowiki>
| |
| | Цей тег використовується для привантаження на веб-сторінку стилів або іконок.
| |
| | <nowiki><link rel="stylesheet" href="styles.css" /><!--стилі...--><link rel="shortcut icon" href="favicon.ico" /><!--..іконка...--></nowiki>
| |
| |-----
| |
| | <nowiki><a></nowiki>
| |
| | Створює посилання на іншу веб-сторінку.
| |
| | <nowiki><a href="нахуй.html(це адрес посилання)">Що буде написано на посиланні</a></nowiki>
| |
| |-----
| |
| | <nowiki><i></nowiki>
| |
| | Робить курсивним текст.
| |
| | <nowiki><i>Цей текст буде курсивом</i></nowiki>
| |
| |-----
| |
| | <nowiki><u></nowiki>
| |
| | Підкреслює текст.
| |
| | <nowiki><u>Цей текст буде підкресленим</u></nowiki>
| |
| |-----
| |
| | <nowiki><s></nowiki>
| |
| | Закреслює текст.
| |
| | <nowiki><s>Закреслений текст</s></nowiki>
| |
| |-----
| |
| | <nowiki><p></nowiki>
| |
| | «Абзац». Нерідко використовується для групування елементів.
| |
| | <nowiki><p>Новий обзац</p></nowiki>
| |
| |-----
| |
| | <nowiki><span></nowiki>
| |
| | Використовується для групування елементів, додання до них стилей. Не найпопулярніший тег.
| |
| | <nowiki><span style="CSS-стиль">Тут цей стиль буде використано</span></nowiki>
| |
| |-----
| |
| | <nowiki><div></nowiki>
| |
| | Теж саме, що й span. Використовується набагато частіше.
| |
| | <nowiki><div style="CSS-style">Тут цей стиль буде використано</div></nowiki>
| |
| |-----
| |
| | <nowiki><img></nowiki>
| |
| | Завантаження зображення на сторінку.
| |
| | <nowiki><img src="адрес_зображення.png" /></nowiki>
| |
| |+
| |
| |}
| |
|
| |
|
| |
|
| |
| == [[CSS]] ==
| |
| '''CSS''' - мова стилів для html, працює за селекторами.
| |
|
| |
| ===Короткий мануал===
| |
| Як вже було сказано, CSS працює за селекторами. Селектором може бути ім'я тега, id блоку і багато чого іншого:<br />
| |
| <pre>#id/*Це коментар. ID - айді блоку чи елемента до якого буде використано
| |
| стилі у фігурних дужках*/{font-weight: bold;/*Це перекладається як "Начіртаніє: Жирнає"*/}</pre>
| |
|
| |
| == "І ШО МЕНІ З ЦИМ РОБИТИ?" ==
| |
| Після створення html-документу у якомусь [[Текстовий редактор|текстовому редакторі]], збережіть його з будь-яким ім'ям, у форматі *.html або *.shtml або *.htm ... І відкрийте у будь-якому браузері, ТА-ДА!!!
| |
|
| |
| ==А ще?==
| |
| А ще в ХТМЛі можна правити - редагувати [[сайт рідного села]], написаний в [[Юкоз]]і (і не лише в Юкозі), О!
| |
| == Посилання ==
| |
| *[http://htmlbook.ru Мануал з хетемеля і цсс]
| |
|
| |
| == Примітки ==
| |
| {{reflist}}
| |
|
| |
| [[Категорія:Мови розмітки]]
| |