Html: відмінності між версіями
Створена сторінка: '''HTML''' ''(англ. '''H'''yper '''T'''ext '''M'''arkup '''L'''anguage)'' - стандартна мова розмітки у цих ваших [[Інтерн... |
м →Короткий список тегів: стильові правлення |
||
| (Не показані 9 проміжних версій 4 користувачів) | |||
| Рядок 2: | Рядок 2: | ||
== На пальцях == | == На пальцях == | ||
Фактично html складається з тегів (по типу ключових слів). Теги необхідно закривати(<nowiki><tag></tag></nowiki>)Деякі теги не треба закривати, наприклад <nowiki><img></nowiki>(імпортує на веб-сторінку зображення). Виглядають вони десь так: | Фактично html складається з тегів (по типу ключових слів). | ||
Теги необхідно закривати (<nowiki><tag></tag></nowiki>). | |||
Деякі теги не треба закривати, наприклад <nowiki><img></nowiki>(імпортує на веб-сторінку зображення). | |||
Виглядають вони десь так: | |||
<br /><code><nowiki><html>, <givno> і.т.д</nowiki></code>. | <br /><code><nowiki><html>, <givno> і.т.д</nowiki></code>. | ||
<br />Кожен тег має певну функцію, наприклад тег <code><nowiki><i></nowiki></code> робить текст курсивом: <code><nowiki><i>Цей текст буде курсивом</i></nowiki></code>.<br /> | <br />Кожен тег має певну функцію, наприклад тег <code><nowiki><i></nowiki></code> робить текст курсивом: <code><nowiki><i>Цей текст буде курсивом</i></nowiki></code>.<br /> | ||
Для верстки веб-сторінок в основному використовують блоки <nowiki><div></nowiki> або таблиці <nowiki><table></nowiki>. | Для верстки веб-сторінок в основному використовують блоки <nowiki><div></nowiki> або таблиці <nowiki><table></nowiki>. | ||
<br />Ось приклад повноцінної веб сторінки(пробіли розставлені для читабельності)(<nowiki><!-- --></nowiki> - кометарі, які не впливають на веб сторінку.):<br /> | <br />Ось приклад повноцінної веб сторінки (пробіли розставлені для читабельності) (<nowiki><!-- --></nowiki> - кометарі, які не впливають на веб сторінку.):<br /> | ||
<pre> | <pre> | ||
<html><!--Головний тег хтмл, з нього починається все(може ще бути <!DOCTYPE>, але вам це знати не треба)--> | <html><!--Головний тег хтмл, з нього починається все(може ще бути <!DOCTYPE>, | ||
але вам це знати не треба)--> | |||
<head><!--Початок голови документу(тут стилі, скрипти і т.д.)--> | <head><!--Початок голови документу(тут стилі, скрипти і т.д.)--> | ||
<title>Назва сторінки</title><!--Буде відображатись на вкладці браузера--> | <title>Назва сторінки</title><!--Буде відображатись на вкладці браузера--> | ||
| Рядок 20: | Рядок 27: | ||
</pre><br /> | </pre><br /> | ||
Ось так. | Ось так. | ||
== Короткий список тегів == | |||
(Тут лише <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]] == | ||
| Рядок 32: | Рядок 102: | ||
Після створення html-документу у якомусь [[Текстовий редактор|текстовому редакторі]], збережіть його з будь-яким ім'ям, у форматі *.html або *.shtml або *.htm ... І відкрийте у будь-якому браузері, ТА-ДА!!! | Після створення html-документу у якомусь [[Текстовий редактор|текстовому редакторі]], збережіть його з будь-яким ім'ям, у форматі *.html або *.shtml або *.htm ... І відкрийте у будь-якому браузері, ТА-ДА!!! | ||
==А ще?== | |||
А ще в ХТМЛі можна правити - редагувати [[сайт рідного села]], написаний в [[Юкоз]]і (і не лише в Юкозі), О! | |||
== Посилання == | == Посилання == | ||
*[http://htmlbook.ru Мануал з хетемеля і цсс] | *[http://htmlbook.ru Мануал з хетемеля і цсс] | ||
Поточна версія на 21:42, 14 червня 2011
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 - мова стилів для html, працює за селекторами.
Короткий мануал
Як вже було сказано, CSS працює за селекторами. Селектором може бути ім'я тега, id блоку і багато чого іншого:
#id/*Це коментар. ID - айді блоку чи елемента до якого буде використано
стилі у фігурних дужках*/{font-weight: bold;/*Це перекладається як "Начіртаніє: Жирнає"*/}
"І ШО МЕНІ З ЦИМ РОБИТИ?"
Після створення html-документу у якомусь текстовому редакторі, збережіть його з будь-яким ім'ям, у форматі *.html або *.shtml або *.htm ... І відкрийте у будь-якому браузері, ТА-ДА!!!
А ще?
А ще в ХТМЛі можна правити - редагувати сайт рідного села, написаний в Юкозі (і не лише в Юкозі), О!