Як вивчити HTML

Відеоролик: Как выучить HTML & CSS? Самый аху##### способ!

Зміст

кроки
Частина 1 з 2: Вивчення основ HTML
Частина 2 з 2: Високий рівень рівень HTML
Поради
попередження
Що вам знадобиться

HTML - це скорочення від англійського Hyper Text Markup Language (Мова гіпертекстової розмітки). Це код, або мову, на якому створюється базова розмітка сайтів. Якщо ви ніколи не програмували, вивчення може здатися складним, але насправді все, що вам потрібно, щоб почати навчання, - це найпростіший текстовий редактор і інтернет-браузер. Можливо, ви навіть дізнаєтеся деякі приклади HTML-розмітки, які траплялися вам на інтернет-форумах, кастомізованих користувальницьких сторінках або в статтях wikiHow. HTML - корисний інструмент для будь-якого користувача інтернету, а вивчення його основ займе менше часу, ніж ви думаєте.

кроки

Частина 1 з 2: Вивчення основ HTML

1 Відкрийте документ HTML. Більшість текстових редакторів (Блокнот або Notepad ++ для Windows, TextEdit для Mac, gedit для GNU / Linux) можна використовувати для створення файлів HTML. Створіть новий документ, і збережіть його за допомогою Файл → Зберегти як в форматі веб-сторінки або змініть розширення файлу на .html або .htm замість .doc, .rtf або іншого розширення.
- Може з'явитися попередження, що файл буде збережений як «простий текст» замість формату RTF або що форматування і зображення не будуть збережені. Це нормально; для HTML ці опції і не потрібні.
2 Відкрийте створений файл в браузері. Збережіть порожній файл, знайдіть його на комп'ютері і відкрийте подвійним клацанням миші. У браузері повинна відкритися порожня сторінка. Якщо цього не відбулося, перетягніть файл в адресний рядок вашого браузера. У процесі редагування HTML-файлу ви зможете оновлювати цю сторінку, щоб подивитися зміни.
- Зверніть увагу, що таким чином ви не створюєте сайт в інтернеті. У інших людей не буде доступу до цієї сторінки, і вам не потрібно інтернет-з'єднання, щоб тестувати свою локальну сторінку. Браузер просто інтерпретує HTML-код, «читаючи» його, як ніби це веб-сайт.
3 Зрозумійте, що таке теги розмітки. На відміну від звичайного тексту, теги не відображаються на сторінці. Замість цього вони вказують браузеру, яким чином відображати сторінку і її вміст. «Хто відкриває» тег містить інструкцію. Наприклад, він може повідомляти браузеру, що текст повинен відображатися як напівжирний. Також потрібен «закриває» тег, який показує браузеру, де закінчується дія інструкції. В даному прикладі текст між відкриває і закриває тегами відобразиться в напівжирному зображенні. Теги записуються всередині знаків нерівності, але закриває тег починається з косою риси.
- Хто відкриває тег записується між знаками нерівності: відкриває тег>
- У закриває тезі перед дескриптором (назвою) тега ставиться коса риса: /закриває тег>
- Читайте далі, щоб дізнатися про використання різних тегів. Для цього кроку досить запам'ятати формат запису. Теги записуються між знаками нерівності:> і />
- У деяких самовчитель HTML теги називають елементами, а текст між відкриває і закриває тегами називають вмістом елемента.
4 Наберіть в редакторі тег html>. Кожен файл HTML повинен починатися з тега html> і закінчуватися тегом / Html>. Ці теги вказують браузеру, що весь вміст між тегами написано на мові HTML. Додайте ці теги в свій документ:
- Часто файли HTML починаються з рядка ! DOCTYPE html>, Яка означає, що браузери повинні розпізнавати весь файл як HTML. Цей рядок не є необхідною, проте може допомогти у вирішенні проблем сумісності.
- наберіть html> вгорі документа.
- Натисніть Enter або Return кілька разів, щоб створити кілька порожніх рядків, потім наберіть / Html>
- Пам'ятайте, що весь код, який ви будете створювати, дотримуючись цієї статті, потрібно буде писати між цими двома тегами.
5 Створіть у файлі секцію head>. Між тегами html> і / html> створіть відкриває тег head> і закриває тег / Head>. Додайте кілька порожніх рядків між ними. Вміст, записане між тегами head> і / head>, не відображається на самій сторінці. Виконайте наступні дії і ви побачите, для чого потрібен цей тег:
- Між тегами head> і / head> напишіть title> і / Title>
- Між тегами title> і / title> напишіть Як вивчити HTML - wikiHow.
- Збережіть зміни і відкрийте файл в браузері (або поновіть сторінку, якщо файл вже відкритий). Бачите текст, який відобразився в назві сторінки над адресним рядком?
6 Створіть секцію body>. Всі інші теги і текст в цьому прикладі записуються в секції body, вміст якої відображається на сторінці. після закриває тега / head>, але до тега / html> додайте теги body> і / Body>. До кінця цієї статті працюйте з секцією body. Ваш файл повинен виглядати приблизно так:
html>
head>
title> Як вивчити HTML - wikiHow / title>
/ Head>
body>
/ Body>
/ Html>
7 Додайте текст, використовуючи різні стилі. Настав час додати даний вміст сторінки! Все, що ви напишете між тегами body, відобразиться на сторінці після поновлення в браузері. Не використовуйте символи або >, Оскільки браузер спробує інтерпретувати вміст як тег замість тексту. Напишіть Всім привіт! (Або що захочете), потім спробуйте додати ці теги до тексту і подивіться, що вийде:
- em> Всім привіт! / em> виділяє текст "курсивом": Всім привіт!
- strong> Всім привіт! / strong> виділяє текст "напівжирним": Всім привіт!
- s> Всім привіт! / s> закреслює текст: ~~Всім привіт!~~
- sup> Всім привіт! / sup> відображає шрифт у вигляді верхнього індексу:
- sub> Всім привіт! / sub> відображає шрифт у вигляді нижнього індексу: _{Всім привіт!}
- Спробуйте різні теги разом. Як буде виглядати em> strong> Всім привіт! / strong> / em>?
8 Розділіть текст на абзаци. Якщо ви спробуєте написати кілька рядків тексту в файлі HTML, то помітите, що розриви рядків не відображаються в браузері. Щоб розділити текст на абзаци, потрібно додати теги:
- p> Це окремий абзац. / p>
- Після цієї пропозиції слід розрив рядка br> перед початком цього рядка.
  Це перший тег, який не потребує закриває тега. Такі теги називаються «порожніми».
- Створіть заголовки, щоб показати назви розділів:
  h1> текст заголовка / h1>: Найбільший заголовок
  h2> текст заголовка / h2> (Заголовок другого рівня)
  h3> текст заголовка / h3> (Заголовок третього рівня)
  h4> текст заголовка / h4> (Заголовок четвертого рівня)
  h5> текст заголовка / h5> (Найменший заголовок)
9 Навчіться створювати списки. Є кілька способів створення списків на веб-сторінці. Спробуйте наведені нижче варіанти і вирішите, який вам більше подобається. Зверніть увагу, що одна пара тегів потрібна для списку в цілому (наприклад ul> і / ul> для маркованого списку), а кожен елемент списку виділяється іншою парою тегів, наприклад li> і / li>.
- Маркований список:
  ul> li> Перший рядок / li> li> Другий рядок / li> li> І так далі / li> / ul>
- Нумерований список:
  ol> li> Один / li> li> Два / li> li> Три / li> / ol>
- Список визначень:
  dl> dt> Кава / dt> dd> - гарячий напій / dd> dt> Лимонад / dt> dd> - холодний напій / dd> / dl>
10 Зверстати сторінку, використовуючи розриви рядків, Горизонтальні лінії, і картинки. Настав час додати на сторінку щось крім тексту. Спробуйте наступні теги або перейдіть по посиланнях, щоб отримати більше інформації. Використовуйте онлайн-хостинг для створення посилання на картинку, яку ви хочете розмістити:
- Горизонтальна лінія: hr>
- Вставити картинку: img src = "посилання на картинку">
11 Додайте посилання. Ви можете використовувати ці теги для створення гіперпосилань на інші сторінки і сайти, але оскільки у вас ще немає веб-сайту, зараз ви навчитеся створювати «якірні» посилання, тобто посилання на конкретні місця на сторінці:
- Створіть якір тегом a> в тому місці сторінки, на яке ви хочете послатися. Придумайте зрозуміле і запам'ятовується назва:
  
  a name = "Поради"> Текст, на який ви посилаєтеся. / a>
- Використовуйте тег href>, щоб створити відносне посилання або посилання на зовнішній ресурс:
  
  a href = "посилання на сторінку або назва якоря всередині сторінки"> Текст або зображення, які будуть служити посиланням. / a>
- Щоб послатися на відносне посилання іншої сторінки, додайте знак # після основної посилання і назва якоря. Наприклад, https://ru.wikihow.com/выучить-HTML#Советы посилається на розділ рад цієї сторінки.

Частина 2 з 2: Високий рівень рівень HTML

1 Зустрітися з атрибутами. Атрибути записуються всередині тега, вказуючи на додаткову інформацію. Формат атрибутів такої: назва = "значення", де назва визначає атрибут (наприклад, color для атрибута кольору), а значення вказує на його значення (наприклад, red для червоного кольору).
- Атрибути насправді вже застосовувалися в попередньому розділі основ HTML. Тег img> використовує атрибут src, Якоря відносних посилань використовують атрибут name, А посилання використовують атрибут href. Як ви вже помітили, всі атрибути записуються в форматі ___='___’.
2 Експериментуйте з таблицями HTML. Створення таблиці припускає використання різних тегів. Ви можете поекспериментувати, або прочитати більш детальну інструкцію.
- Створіть теги таблиці:table> / table>
- Вміст кожного рядка таблиці укладіть в теги: tr>
- Тема стовпчика визначається тегом: th>
- Осередки в наступних рядках: td>
- Приклад використання цих тегів:
  
  table> tr> th> Стовпець 1: місяць / th> th> Стовпець 2: заощадження / th> / tr> tr> td> Січня / td> td> 5000 рублів / td> / tr> / table>
3 Вивчіть додаткові теги секції head. Ви вже вивчили тег head>, що йде спочатку кожного файлу html. Крім тега title>, є й інші теги для цієї секції:
- Мета-теги, в яких містяться метадані, Використовувані пошуковими системами для індексації сайту. Щоб ваш сайт легше знаходився в пошукових системах, використовуйте один або кілька відкривають тегів meta> (закривають теги не потрібні).Використовуйте по одному атрибуту і значенням на тег: meta name = "description" content = "опис сторінки">; або meta name = "keywords" content = "ключові слова, розділені комами">
- Теги link>, провідні на сторонні файли, наприклад на таблиці стилів (CSS), які створюються за допомогою іншого типу кодування і дозволяють змінити HTML-сторінку за допомогою кольору, вирівнювання тексту і багатьох інших функцій.
- Теги script>, які використовуються для прикріплення до сторінці файлів JavaScript. Ці файли потрібні для зміни сторінки в інтерактивному режимі (у відповідь на дії користувача).
4 Експериментуйте з кодом HTML інших сайтів. Відмінним способом вивчення HTML стане перегляд вихідного коду інших веб-сторінок. Ви можете натиснути правою кнопкою миші на сторінці і вибрати «Подивитися вихідний код» або щось подібне в верхньому меню браузера. Спробуйте визначити, що робить незнайомий тег, або пошукайте інформацію про нього в інтернеті.
- Хоча ви і не можете редагувати чужі сайти, ви можете скопіювати початковий код в свій файл, щоб потім поекспериментувати з тегами. Зверніть увагу, що розмітка CSS може бути недоступна, і кольору і форматування можуть виглядати по-іншому.
5 Розпочніть вивчення більш докладних настанов. В інтернеті є багато сайтів, присвячених тегам HTML, наприклад W3Schools або HTMLbook. У продажу є і паперові книги, але постарайтеся знайти актуальне видання, оскільки стандарти змінюються і розвиваються. Ще краще освоїти CSS, щоб в набагато більшому ступені контролювати розмітку і зовнішній вигляд сайту. Після вивчення CSS Вебдизайнер зазвичай вивчають JavaScript.

Поради

Notepad ++ - відмінна безкоштовна програма, схожа на звичайний Блокнот, але ви можете зберігати і тестувати свій код в браузері в онлайн-режимі. (Вона також підтримує практично будь-яку мову - HTML, CSS, Python, JavaScript і так далі).
Знайдіть в мережі якусь просту сторінку, збережіть код до себе на комп'ютер і поекспериментуйте з ним. Спробуйте перемістити текст, змінити шрифт, замінити зображення - все що завгодно!
Ви можете завести блокнот, куди будете записувати теги, щоб завжди мати їх під рукою. Також можете роздрукувати цю сторінку і звірятися з нею.
Коли ви пишете код, робіть це акуратно, щоб і ви, і інші люди могли його зрозуміти. Використовуйте! - Insert comment here -> для коментарів в HTML: вони не будуть відображатися на сторінці, але буде видно в документі з кодом.
XML і RSS знаходять все більшу популярність. Код сайти можуть містити матеріали технології XML і RSS, недосвідченому користувачу складніше прочитати і зрозуміти, але ці інструменти дуже корисні.
Теги розмітки в HTML не залежать від регістра, проте рекомендується використовувати тільки малі літери (як в прикладах в цій статті) - як з метою стандартизації, так і для сумісності з XHTML.

попередження

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

Що вам знадобиться

Текстовий редактор, наприклад Блокнот (Windows) або TextEdit (Mac)
Папір / блокнот (не обов'язково)
HTML-редактор, наприклад Notepad ++ (Windows) або TextWrangler (Mac) (не обов'язково)