HTML: відмінності між версіями
Перейти до навігації
Перейти до пошуку
(Сторінка очищена) Мітка: Очищення |
м (rollbackEdits.php mass rollback) Мітка: Відкіт |
||
| (Не показано 4 проміжні версії 4 користувачів) | |||
| Рядок 1: | Рядок 1: | ||
{{Stub}} | |||
'''HTML''' ''(англ. '''H'''yper '''T'''ext '''M'''arkup '''L'''anguage)'' - стандартна мова розмітки у цих ваших [[Інтернети|інтернетах]]. Використовується абсолютно всюди, навіть у Драматиці, безосе! | |||
== На пальцях == | |||
Фактично html складається з тегів (по типу ключових слів). | |||
Теги необхідно закривати (<nowiki><tag></tag></nowiki>). | |||
Деякі теги не треба закривати, наприклад <nowiki><img></nowiki>(імпортує на веб-сторінку зображення). | |||
Виглядають вони десь так: | |||
<code><nowiki><html>, <givno> і.т.д</nowiki></code>. | |||
Кожен тег має певну функцію, наприклад, тег <code><nowiki><i></nowiki></code> робить текст курсивом: <code><nowiki><i>Цей текст буде курсивом</i></nowiki></code>. | |||
Для верстки веб-сторінок в основному використовують блоки <nowiki><div></nowiki> або таблиці <nowiki><table></nowiki>. | |||
Ось приклад повноцінної веб сторінки (пробіли розставлені для читабельності) (<nowiki><!-- --></nowiki> - кометарі, які не впливають на веб сторінку.): | |||
<pre> | |||
<html><!--Головний тег хтмл, з нього починається все(може ще бути <!DOCTYPE>, | |||
але вам це знати не треба)--> | |||
<head><!--Початок голови документу(тут стилі, скрипти і т.д.)--> | |||
<title>Назва сторінки</title><!--Буде відображатись на вкладці браузера--> | |||
</head><!-- Кінець голови --> | |||
<body><!-- Початок тіла документу --> | |||
<div align="center"><!-- Вирівнювання по центру(<div> - це блок) --> | |||
Тут основний контент. | |||
</div> | |||
</body><!-- Кінець тіла --> | |||
</html><!-- І кінець документу --> | |||
</pre> | |||
Ось так. | |||
== Короткий список тегів == | |||
(Тут лише <u>основні</u> теги) | |||
{| align="center" class="wikitable" 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 блоку і багато чого іншого: | |||
<pre>#id/*Це коментар. ID - айді блоку чи елемента до якого буде використано | |||
стилі у фігурних дужках*/{font-weight: bold;/*Це перекладається як "Начіртаніє: Жирнає"*/}</pre> | |||
== І що мені з цим робити? == | |||
Після створення html-документу у текстовому редакторі, збережи його з будь-яким ім'ям у форматі *.html або *.shtml або *.htm і відкрий його у будь-якому браузері. ТА-ДА! | |||
==А ще?== | |||
А ще в ХТМЛі можна правити - редагувати [[сайт рідного села]], написаний в [[Юкоз]]і (і не лише в Юкозі), о! | |||
== Див. також == | |||
*[[BBcode]] | |||
*[[Як написати статтю]] | |||
== Посилання == | |||
*[https://www.w3schools.com/html/default.asp Мануал з хетемеля] | |||
*[https://www.w3schools.com/css/default.asp Ще один мануал, але з цсс] | |||
{{Айті|що=<!DOCTYPE html><html><head><titile>Твоя мама</title></head><body><p>Я їбав твою маму</p></body></html>}} | |||
Поточна версія на 03:59, 21 листопада 2022
|
HTML (англ. Hyper Text Markup Language) - стандартна мова розмітки у цих ваших інтернетах. Використовується абсолютно всюди, навіть у Драматиці, безосе!
На пальцях
Фактично html складається з тегів (по типу ключових слів).
Теги необхідно закривати (<tag></tag>).
Деякі теги не треба закривати, наприклад <img>(імпортує на веб-сторінку зображення).
Виглядають вони десь так:
<html>, <givno> і.т.д.
Кожен тег має певну функцію, наприклад, тег <i> робить текст курсивом: <i>Цей текст буде курсивом</i>.
Для верстки веб-сторінок в основному використовують блоки <div> або таблиці <table>.
Ось приклад повноцінної веб сторінки (пробіли розставлені для читабельності) (<!-- --> - кометарі, які не впливають на веб сторінку.):
<html><!--Головний тег хтмл, з нього починається все(може ще бути <!DOCTYPE>,
але вам це знати не треба)-->
<head><!--Початок голови документу(тут стилі, скрипти і т.д.)-->
<title>Назва сторінки</title><!--Буде відображатись на вкладці браузера-->
</head><!-- Кінець голови -->
<body><!-- Початок тіла документу -->
<div align="center"><!-- Вирівнювання по центру(<div> - це блок) -->
Тут основний контент.
</div>
</body><!-- Кінець тіла -->
</html><!-- І кінець документу -->
Ось так.
Короткий список тегів
(Тут лише основні теги)
| Тег | Значення | Приклад |
|---|---|---|
| <html> | Початок будь-якого документу | <html>Тут контент...</html> |
| <head> | «Голова» документу. Тут зазвичай розміщують теги link та скрипти. | <head>...</head> |
| <body> | «Тіло» документу. Тут розміщують основний контент (текст, зображення тощо). | <body>...content...</body> |
| <script> | У цьому тегу розміщуються скрипти («сценарії»), які додають веб-сторінці інтерактивності. Зазвичай написані на Javascript | <script>var someFuckingShit="Hello, nigas";alert(someFuckingShit);</script> |
| <link> | Цей тег використовується для привантаження на веб-сторінку стилів або іконок. | <link rel="stylesheet" href="styles.css" /><!--стилі...--><link rel="shortcut icon" href="favicon.ico" /><!--..іконка...--> |
| <a> | Створює посилання на іншу веб-сторінку. | <a href="нахуй.html(це адрес посилання)">Що буде написано на посиланні</a> |
| <i> | Робить курсивним текст. | <i>Цей текст буде курсивом</i> |
| <u> | Підкреслює текст. | <u>Цей текст буде підкресленим</u> |
| <s> | Закреслює текст. | <s>Закреслений текст</s> |
| <p> | «Абзац». Нерідко використовується для групування елементів. | <p>Новий абзац</p> |
| <span> | Використовується для групування елементів, додання до них стилей. Не найпопулярніший тег. | <span style="CSS-стиль">Тут цей стиль буде використано</span> |
| <div> | Теж саме, що й span. Використовується набагато частіше. | <div style="CSS-style">Тут цей стиль буде використано</div> |
| <img> | Завантаження зображення на сторінку. | <img src="адрес_зображення.png" /> |
CSS
CSS - мова стилів для HTML.
Короткий мануал
CSS працює за селекторами. Селектором може бути ім'я тега, id блоку і багато чого іншого:
#id/*Це коментар. ID - айді блоку чи елемента до якого буде використано
стилі у фігурних дужках*/{font-weight: bold;/*Це перекладається як "Начіртаніє: Жирнає"*/}
І що мені з цим робити?
Після створення html-документу у текстовому редакторі, збережи його з будь-яким ім'ям у форматі *.html або *.shtml або *.htm і відкрий його у будь-якому браузері. ТА-ДА!
А ще?
А ще в ХТМЛі можна правити - редагувати сайт рідного села, написаний в Юкозі (і не лише в Юкозі), о!
Див. також
Посилання
| |||||||||||||||||||
