HTML

Матеріал з Драматика
Перейти до навігації Перейти до пошуку

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


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 і відкрий його у будь-якому браузері. ТА-ДА!

А ще?

А ще в ХТМЛі можна правити - редагувати сайт рідного села, написаний в Юкозі (і не лише в Юкозі), о!

Див. також

Посилання