- Q & A для початківців
- 2 Чому HTML потрібен?
- 3 Чи є HTML-регістр чутливим?
- Кроки для створення першого файлу HTML
- 1 Hello World!
- Розуміння структури HTML
- 2 HTML-теги
- (2a) Основні теги
- <title> </ title>
- <Посилання>
- <META>
- <script> </ script>
- <noscript> </ noscript>
- (2b) Теги тіла
- <h1> </ h1> до <h6> </ h6>
- форматування тегів
- <! - ->
- (2c) Інші важливі HTML-теги
- <Img />
- <Ol> </ ol> або <ul> </ ul>
- <Таблиця> </ table>
- групування груп
- <Form> </ form>
- 3-HTML-атрибути
- id = "" і class = ""
- HREF = ""
- SRC = ""
- альт = »»
- стиль = "»
- 4 Відображення коду: Блок проти Inline
- 5 Подвійна цитата проти однієї лапки в HTML
- 6 Семантичний HTML проти НЕ-семантичного HTML
- Ось список деяких популярних тегів HTML5:
- 7- HTML Validation
- 8- Інші корисні ресурси
Наша взаимовыгодная связь https://banwar.org/
Двадцять років тому, навіть якщо ви просто блогер хобі, вам потрібно знати деякі веб-кодування, щоб захистити себе чи додати просту функцію на ваш сайт. Але тепер є так багато редакторів і плагінів, що навіть знання основ HTML більше не потрібно зробити сайт or запустити блог .
Проблема в тому, що, якщо ви не знаєте кількох основ, ви можете легко потрапити в справжню проблему в своєму блозі і змушені наймати дорогого розробника, щоб виправити те, що може бути незначною проблемою. Не тільки це, але і створення змін у вашому блозі, таких як додавання користувацького текстового віджета, вимагає невеликого знання.
І якщо ви відчуваєте макет контенту, не виглядає правильним, знання HTML може повернути вас в потрібне русло.
Ось деякі наші версії HTML-керівництва для блогерів і власників інтернет-бізнесу, не пов'язаних з технологією.
HTML є основою сучасного Інтернету. Мільйони сайтів разом сформували інтернет. Де HTML є будівельним блоком всіх цих сайтів.
Q & A для початківців
1 Що таке HTML?
HTML - це абревіатура H Yper T Ext M Arkupe L anguage. Це стандартна мова для тегів вмісту веб-браузерів.
HTML представлений «Елементами». Елементи також відомі як «Теги».
2 Чому HTML потрібен?
Веб-браузери можуть відображати тільки веб-сайт, коли він написаний на їх підтримуваному мовою. HTML є найбільш поширеною мовою розмітки і має найвище визнання для веб-браузерів.
Ось чому вам потрібен HTML.
3 Чи є HTML-регістр чутливим?
HTML не чутливий до регістру. Але найкраще написати HTML з правильними випадками.
Кроки для створення першого файлу HTML
Ви можете створити базовий файл HTML, використовуючи Блокнот на вашому комп'ютері. Але буде боляче писати багато рядків кодів.
Вам потрібен редактор коду. Хороший редактор коду спростить запис і організацію великих кодів.
Я використовую і рекомендую Notepad ++ (Безкоштовно і з відкритим вихідним кодом) для написання веб-мов. Існують і інші редактори, які ви можете використовувати як Sublime Text , атом і так далі
Ось що вам потрібно зробити:
- Установка редактора коду
- Відкрийте його
- Створити новий файл
- Збережіть його як .html-файл
Ви готові до роботи!
Go Top
1 Hello World!
Скопіюйте та вставте наступний код в новий HTML-файл і збережіть його. Тепер запустіть його в своєму веб-браузері.
код:
<! DOCTYPE html> <html> <head> <title> Моя перша веб-сторінка </ title> </ head> <body> <p> Hello World! </ P> </ body> </ html>
висновок:
Congrats! Ви створили свій найперший HTML-файл. Вам не потрібно розуміти це в даний момент. Ми розповімо про це найближчим часом.
Розуміння структури HTML
Кожен HTML-файл має загальну голу структуру. Тут все починається. І кожна велика сторінка кодів прийде в цю структуру після обрізки вниз.
Отже, давайте спробуємо зрозуміти це з коду «Hello World!». Наступні елементи є обов'язковими частинами для кожного файлу HTML.
- <! DOCTYPE HTML> = Це оголошення для браузера, що це HTML-файл. Ви повинні вказати його перед тегом <html>.
- <html> </ html> = Це кореневий елемент HTML-файлу. Все, що ви пишете, знаходиться між <html> і </ html>.
- <head> </ head> = Це метаінформаціонная частина для браузера. Коди всередині цього тега не мають візуального виведення.
- <body> </ body> = Це та частина, яку робить веб-браузер. Те, що ви точно бачите на веб-сайті, - це рендеринг кодів між <body> і </ body>.
Go Top
2 HTML-теги
HTML - це співпраця сотень різних тегів. Вам потрібно дізнатися, як вони працюють. Ви також повинні переконатися, що вони правильно використовували їх.
HTML-теги зазвичай мають відкриває і закриває теги. У відкритому тезі ключове слово оточене символом менше (<) і значком більше (>). Закриває тег має все те ж саме, але додатковий косою рисою (/) після знака менше (<).
(2a) Основні теги
Всі теги заголовка знаходяться між <head> і </ head>. Вони містять метаінформацію для веб-браузера та пошукових систем. У них немає візуального виведення.
<title> </ title>
Тег Title визначає назву веб-сторінки, яке відображається на вкладці браузера. Ця інформація використовується веб-програмами і пошуковими системами. Ви можете мати найвищий один заголовок для HTML-файлу.
код:
<Title> Моя перша веб-сторінка </ title> 
Тег заголовка відображається поверх вашого браузера.
<Посилання>
Посилання тега пов'язує вашу HTML-сторінку з зовнішніми ресурсами. Його основне призначення - пов'язувати HTML-сторінку з таблицями стилів CSS. Це самозакривних тег і не потребує завершення </ link>. Тут rel означає відношення до файлу, а src означає джерело.
код:
<Link rel = "stylesheet" type = "text / css" src = "style.css">
<META>
Meta - це ще один самозакривних тег, який надає метаінформацію html-файлу. Ці пошукові системи використовують пошукові системи та інші веб-служби. Мета-теги є обов'язковими, якщо ви хочете оптимізувати свою сторінку для пошукових систем.
код:
<Meta name = "description" content = "Це короткий опис, яке пошукові системи показують"
<script> </ script>
Тег script використовується для включення сценарію на стороні сервера або створення посилання на зовнішній файл сценарію. Він може мати два атрибута в відкриваючому тезі. Один з них - тип, а інший - джерело (src).
код:
<Script type = "text / javascript" src = "scripts.js"> </ script>
<noscript> </ noscript>
Тег Noscript працює, коли сценарії відключені в веб-браузері. Це робить сторінку сумісної з тими, хто не підтримує скрипти в своїх веб-браузерах.
код:
<NoScript> <p> На жаль! Сценарії відключені. </ P> </ noscript>
(2b) Теги тіла
Всі теги тіла йдуть між <body> і </ body>. У них є візуальні виходи. Ось де велика частина роботи виконується. Ви повинні використовувати ці теги для структурування вмісту головної сторінки.
<h1> </ h1> до <h6> </ h6>
Це теги заголовків. Найважливіший заголовок відзначений <h1> і найменш важливим з <h6>. Ви повинні використовувати їх в правильній ієрархії.
код:
<H1> Це заголовок h1 </ h1> <h2> Це заголовок h2 </ h2> <h3> Це заголовок h3 </ h3> <h4> Це заголовок h4 </ hXXUM </ hXXUM> Це заголовок h4 </ h5> <h5> Це заголовок h5 </ h6>
висновок:
форматування тегів
Текст в html-файлі може бути відформатований з використанням багатьох тегів форматування. Це необхідно, якщо ви хочете виділити слово або рядок зі свого контенту.
код:
<P> Ви можете виділити свій текст різними способами. </ P> <p> Ви можете <strong> жирним шрифтом </ strong>, <u> підкреслити </ u>, <em> курсив </ em>, <mark> mark </ mark "," sub> subscript </ sub>, <sup> superscript </ sup> і інші! </ P>
висновок:
<! - ->
Ви можете відхилити деякі коди від розриву з допомогою тега comment. Код буде відображатися у вихідному коді, але не буде доступний широкому. Основне використання цього тега - створення документації html-файлів для подальшого використання.
приклад:
<! - <p> Ви можете прокоментувати будь-який код, оточивши їх таким чином. </ P> ->
(2c) Інші важливі HTML-теги
<a> </a>
Якір - безцінний тег, який використовується майже всюди. Ви не побачите жодної веб-сторінки в Інтернеті, не маючи хоча б однієї прив'язки.
Структура така ж. У цього є відкриття <a> і заключна частина </a>. Текст, який ви хочете прив'язати, знаходиться між <a> і </a>.
Є деякі атрибути, які визначають, де і як користувач йде після натискання на нього.
- ahref = "" = Він визначає цільове посилання. Посилання йде між подвійними лапками.
- target = "" = Він визначає, чи буде URL-адресу відкриватися на новій вкладці браузера або на тій же вкладці. target = "_ blank" для нової вкладки, а target = "_ self" - для відкриття на тій же вкладці.
- rel = "" = Визначає ставлення поточної сторінки до пов'язаної сторінці. Якщо ви не довіряєте пов'язаної сторінці, ви можете визначити rel = "nofollow".
код:
<P> <a target="_blank" href="https://www.google.com/"> Натисніть тут </a>, щоб перейти в Google. Він відкриється в новій вкладці. </ P> <p> <a target="_self" href="https://www.google.com/"> Натисніть тут </a>. Він також приведе вас в Google, але відкриється на поточній вкладці. </ P>
висновок:
<Img />
Ідентифікатор зображення - ще один важливий тег, без якого ви не можете уявити багато сайтів на основі зображень.
<Img /> - це самозакривних тег. Це не потребує традиційного закриття як </ img>. Є деякі атрибути, які вам потрібно знати, перш ніж ви зможете використовувати його правильно.
- src = "" = Це для визначення вихідної посилання зображення. Помістіть посилання прямо між подвійними лапками.
- alt = "" = Це означає альтернативний текст. Коли ваш образ не завантажується, цей текст дасть користувачам уявлення про недостатньому зображенні.
- width = "" = Він визначає ширину зображення в пікселях.
- Висота = "" = Визначає висоту зображення в пікселях.
приклад:
<P> Це Googleplex в серпні 2014. </ p> <p> Це зображення має ширину 500 пікселів і висоту 375 пікселів. </ P> <img src = "https: //upload.wikimedia. Org / wikipedia / commons / 0 / 0E / Googleplex-Patio-Aug-2014.JPG" alt = "Штаб-квартира Google в серпні 2014" width = "500" height = "375" />
висновок:
Поради: Хочете вставити клікабельно зображення? Оберніть код зображення тегом <a>. Подивіться, як це відбувається.
<Ol> </ ol> або <ul> </ ul>
Тег списку призначений для створення списку елементів. <Ol> позначає впорядковані списки (нумерований список), а <ul> позначає невпорядковані списки (точки маркера).
Елементи списку всередині <ol> або <ul> помічені тегом <li> </ li>. li означає список. Ви можете мати стільки <li>, скільки хочете всередині батьківського тега <ol> або <ul>.
код:
<P> Це впорядкований список: </ p> <ol> <li> Item 1 </ li> <li> Item 2 </ li> <li> Item 3 </ li> </ ol> <p> Це невпорядкований список: </ p> <ul> <li> Item 1 </ li> <li> Item 2 </ li> <li> Item 3 </ li> </ ul>
висновок:
<Таблиця> </ table>
Тег таблиці призначений для створення таблиці даних. Існує кілька тегів внутрішнього рівня, які визначають заголовки, рядки і стовпці таблиці.
<Table> </ table> - це зовнішній батьківський код. У цьому тезі <tr> позначає рядок таблиці, <td> позначає стовпець таблиці, а <th> позначає заголовок таблиці.
код:
<Таблиця> <tr> <th> ім'я </ th> <th> вік </ th> <th> професія </ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td> Бізнесмен </ td> </ tr> <tr> <td> Керол </ td> <td> 26 </ td> <td> Медсестра </ td> </ tr> <tr> <td> Симона < / td> <td> 39 </ td> <td> Професор </ td> </ tr> </ table>
висновок:
Примітка. Значення всередині першого <tr> є заголовками. Таким чином, ми використовували <th>, який застосовує напівжирний текстовий ефект до тексту.
групування груп
Ви можете розширити функціональність таблиці, використовуючи елементи угруповання таблиці. Будуть часи, коли вам потрібно створити великі таблиці, які розбиваються на кілька сторінок.
Угруповання даних таблиці у вигляді заголовка, тіла і нижнього колонтитула дозволяє вирішити незалежну прокрутку. Частина заголовка і тіла буде друкуватися на кожній сторінці, на якій розміщена ваша таблиця.
Тегами угруповання таблиць є:
- <thead> </ thead> = Для обгортання заголовків таблиці. Він друкує кожну розбиту сторінку таблиці.
- <tbody> </ tbody> = Для обгортання основних даних таблиці. У вас може бути стільки <tbody>, скільки вам потрібно. Тег <tbody> означає окрему групу даних.
- <tfoot> </ tfoot> = Для обгортання нижнього колонтитула таблиці. Він друкує кожну розбиту сторінку таблиці.
Зверніть увагу, що необов'язково використовувати угруповання. Ви можете використовувати його, щоб зробити великі таблиці більш легкими для читання. Хоча деякі спеціальні розробники помітно використовують ці теги в якості селекторів CSS.
Ось як ми можемо згрупувати нашу ілюстровану таблицю в <thead>, <tbody> і <tfoot>:
код:
<Таблиця> <thead> <tr> <th> ім'я </ th> <th> вік </ th> <th> професія </ th> </ tr> </ thead> <tbody> <tr> <td> Джон </ td> <td> 27 </ td> <td> Бізнесмен </ td> </ tr> <tr> <td> Керол </ td> <td> 26 </ td> <td> Медсестра </ td td> </ tr> <tr> <td> Simone </ td> <td> 39 </ td> <td> Professor </ td> </ tr> </ tbody> <tfoot> <tr> <td > Всього людина: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>
висновок:
<Form> </ form>
Елемент форми використовується для створення інтерактивних форм для веб-сторінок. Форма HTML містить кілька послідовних елементів. Наприклад: <label>, <input>, <textarea> і т. Д.
Атрибут дії в формі дуже важливий. Він вказує на серверну або сторонню сторінку для обробки інформації. Для обробки вам необхідно спочатку визначити метод.
Ви можете використовувати будь-який з двох методів, отримати або відправити. Отримує відправку всієї інформації в форматі URL, де Post відправляє інформацію в тексті листа.
Існує безліч типів введення для форм. Самий основний тип введення - текст. Він записується як <input type = "text">. Типи також можуть бути радіо, прапорець, електронна пошта і т. Д. Для створення кнопки відправки повинен бути введений тип введення внизу.
Тег <label> використовується для створення міток і зв'язування їх з входами. Правило зіставлення міток зі входами має те ж значення в атрибуті for = "" мітки і id = "" атрибута введення.
код:
<Form action = "#"> <label for = "firstname"> Ім'я: </ label> <input type = "text" id = "firstname"> <br> <label for = "lastname"> Прізвище: </ label> <input type = "text" id = "lastname"> <br> <label for = "bio"> Коротка біографія: </ label> <textarea id = "bio" рядки = "10" cols = "30" placeholder = "Введіть свою біографію тут ..."> </ textarea> <br> <label> Пол: </ label> <br> <label for = "male"> Male </ label> <input type = "радіо "ім'я =" підлогу "id =" чоловік "> <br> <мітка для =" жінка "> жінка </ label> <input type =" radio "name =" підлогу "id =" жінка "> <br> < input type = "submit" value = "Submit"> <form>
висновок:
Примітка. Я вказав дію на нульове значення, тому що він не був підключений до будь-якого сервера для обробки інформації.
Go Top
3-HTML-атрибути
Атрибути - це один тип модифікаторів для HTML-тегів. Вони додають нові конфігурації в теги HTML.
Атрибут виглядає як attributename = "" і знаходиться в розпочатому тезі HTML. Значення атрибута знаходиться між подвійними лапками.
id = "" і class = ""
id і class є ідентифікаторами тегів HTML. Різні імена призначаються різним HTML-елементів з використанням ідентифікаторів. Ви можете використовувати один ідентифікатор класу для декількох елементів. Але ви не можете використовувати один ідентифікатор ідентифікатора для декількох елементів.
код:
<H1 class = "heading"> Це основна назва </ h1>
HREF = ""
href означає гіпертекстове посилання. Вони вказують користувачам посилання на посилання. Якірний тег <a> використовує href для відправки користувачам цільового URL.
код:
<a href="https://www.google.com/"> Google </a>
SRC = ""
src позначає джерело. Він визначає джерело носія або ресурсу, який ви використовуєте в файлі HTML. Джерелом може бути локальний або сторонній URL.
код:
<Img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />
альт = »»
alt означає альтернативу. Це резервний текст, який використовується, коли елемент HTML не може завантажуватися.
код:
<Img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Головний офіс Google" />
стиль = "»
атрибут стилю часто використовується в тегах HTML. Він виконує роботу CSS в тезі HTML. Ваші властивості стилю йдуть між подвійними лапками.
код:
<H2 style = "color: red"> Це ще один заголовок </ h2>
Go Top
4 Відображення коду: Блок проти Inline
Деякі елементи завжди починаються з нового рядка і мають повну доступну ширину. Це елементи «Block».
Приклад: <div>, <p>, <h1> - <h6>, форма і т. Д.
Деякі елементи займають лише необхідний простір і не починаються з нового рядка. Це «вбудовані» елементи.
Приклад: <a>, <span>, <br>, <strong>, <img> і т. Д.
Вам потрібно буде відрізняти елементи блоку від вбудованого, коли ви будете використовувати стилі CSS. У цьому HTML-керівництві це не дуже необхідно.
код:
<! DOCTYPE html> <html> <head> <title> Моя перша веб-сторінка </ title> </ head> <body> <h2> Це заголовок H2. Він має відображення блоку. </ H2> <h2> Це <u> інший </ u> заголовок H2. Тут тег підкреслення має вбудоване відображення. </ H2> </ body> </ html>
висновок:
Go Top
5 Подвійна цитата проти однієї лапки в HTML
Це питання дуже очевидний. Що ви повинні використовувати в HTML? Одинарна лапки або лапки Люди, схоже, використовують обидва варіанти, але який з них правильний?
В HTML одинарні та подвійні лапки однакові. Вони не мають ніякого значення у висновку.
Ви можете використовувати будь-якого, кого ви вважаєте за краще. Але змішання на сторінці кодів вважається поганою практикою. Ви повинні відповідати будь-якому з них.
Go Top
6 Семантичний HTML проти НЕ-семантичного HTML
Семантичний HTML - це остання версія HTML, яка також називається HTML5. Це розроблена версія не семантичного HTML і XHTML.
Чому HTML5 краще? У попередніх версіях елементи HTML були ідентифіковані іменами id / class. Наприклад: <div id = "article"> </ div> вважається статтею.
У HTML5 тег <article> </ article> представляє себе як статтю без необхідності ідентифікатора id / class.
Для HTML5 тепер пошукові системи та інші веб-додатки можуть краще зрозуміти веб-сторінку. Семантичні веб-сайти довели свою ефективність для SEO.
Ось список деяких популярних тегів HTML5:
- <головна> </ main> = Це для упаковки основного контенту, який ви хочете показати своїм глядачам.
- <header> </ header> = Це призначено для маркування частини заголовка вмісту, наприклад, метаданих заголовка або автора.
- <стаття> </ article> = Визначає користувальницький або незалежний контент для ваших глядачів.
- <розділ> </ section> = Він може групувати будь-який код, такий як верхній, нижній колонтитул або бічна панель. Ви можете сказати, що це семантична форма div.
- <footer> </ footer> = Тут знаходиться контент нижнього колонтитула, відмова від відповідальності або авторський текст.
- <audio> </ audio> = Він дозволяє вставляти аудіофайли без будь-яких проблем з плагінами.
- <video> </ video> = Like <audio>, ви можете вставляти відео за допомогою цього тега без проблем з плагінами.
Проста структура HTML5 буде виглядати так:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Моя перша веб-сторінка </ title> </ head> <body> <header> <nav> <ul> <li > Меню 1 </ li> <li> Меню 2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2> Це заголовок статті </ h2> <p> Автор John Doe </ p> </ header> <p> Зміст статті можна знайти тут </ p> </ article> </ main> <footer> <p> Авторські права 2017 John Doe </ p> </ footer> </ body> </ html>
Go Top
7- HTML Validation
Більшість веб-професіоналів підтверджують свій код після його завершення. Чому необхідно перевіряти код, коли він працює нормально?
Існують дві можливі причини для перевірки ваших кодів:
- Це поможет вам сделать ваш крос-браузер и крос-платформні сумісність. Код может НЕ відображатіся у Вашому поточному браузері, но может буті и в ІНШОМУ. Перевірка коду виправив его.
- Пошукові системи і інші веб-програми можуть перестати сканувати вашу сторінку, якщо в ній є помилки. Ви можете підтвердити за допомогою перевірки, що у вас немає серйозних помилок.
W3C Validator є найбільш популярним сервісом для перевірки коду. У них є кілька методів для перевірки кодів. Ви можете завантажити файл або безпосередньо ввести код в свій механізм перевірки.
Go Top
8- Інші корисні ресурси
HTML - це постійно вивчалася тема. Пізніші версії HTML можуть з'явитися раніше. Тому вам потрібно постійно оновлюватися і продовжувати практикувати. Практика - це те, що таке HTML.
Ось деякі корисні ресурси для вас:
Чи є HTML-регістр чутливим?Чому HTML потрібен?
Чи є HTML-регістр чутливим?
Що ви повинні використовувати в HTML?
Одинарна лапки або лапки Люди, схоже, використовують обидва варіанти, але який з них правильний?
Чому HTML5 краще?
Чому необхідно перевіряти код, коли він працює нормально?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
