Дефинитивниот HTML водич за почетници

Последна промена на 15 Мај 2018

Пред дваесет години, дури и ако сте само хоби блогер, мораше да знаете некои веб кодирање за да се заштитат себе си или да додадете едноставна функција на вашата страница. Но, сега има толку многу уредници и приклучоци на располагање дека дури и знаејќи основите на HTML повеќе не е потребно да направи сајт or кандидира блог.

Проблемот со ова е дека ако не знаете неколку основи, лесно можете да влезете во реални проблеми на вашиот блог и морате да ангажирате скапи инвеститори за да го надминат она што може да биде помал проблем. Не само тоа, туку создавање на промени во вашиот блог, како што се додавање на графичка контрола за текст, бара малку знаење.

И ако имате распоред на содржина не изгледа правилно, HTML-познанието може да ве врати на вистинскиот пат.

Еве некои од нашите верзии на HTML водич за блогери и не-techie онлајн бизнис сопственици.

HTML е 'рбетот на денешниот интернет. Милиони веб-страници заедно го формираа Интернетот. Каде HTML е градежниот блок на сите овие веб-страници.

Q & A за почетници

1-Што е HTML?

HTML е кратенката од Hyper Tлок Markup Lстрав. Тоа е стандарден јазик за обележување содржини за веб-прелистувачи.

HTML е претставен со "Елементи". Елементите се познати и како "Тагови".

2-Зошто е потребен HTML?

Веб-прелистувачите можат само да направат веб-страница кога е напишана на нивниот поддржан јазик. HTML е најчестиот јазик за означување и има највисоко прифаќање на веб-прелистувачи.

Затоа ви треба HTML.

3 - дали е HTML чувствителен на случај?

HTML не е чувствителна на големи букви. Но, најдобрата практика е да напишете HTML со соодветни случаи.

Чекори за создавање на вашата прва HTML датотека

Можете да креирате основни HTML-датотеки со помош на Notepad на вашиот компјутер. Но, тоа ќе биде болно за пишување многу линии на кодови.

Ви треба уредник на кодови. Еден добар уредник на код ќе го олесни пишувањето и организирањето на големи кодови.

Јас го користам и препорачувам Notepad + + (слободен и отворен код) за пишување на веб-јазици. Постојат и други уредници што можете да ги користите Високата Текст, Атом итн

Еве што треба да направите:

  1. Инсталирајте уредувач на код
  2. Отвори го
  3. Креирај нова датотека
  4. Зачувајте го како .html датотека

Подготвен е да одиш!


Нагоре

1- Здраво Светот!

Копирајте го и ставете го следниов код во новата HTML датотека и зачувајте ја. Сега стартувајте го на вашиот веб прелистувач.

Код:

<! DOCTYPE html> <html> <head> <title> Мојата прва веб страница </ title> </ head> <body> <p> Hello World! </ P> </ body> </ html>

излез:

Честитки! Ја создадовте првата HTML-датотека. Вие не треба да го разберете во овој момент. Willе го покриеме наскоро.

Разбирање на структурата на HTML

Секоја HTML датотека има заедничка гол структура. Тука започнува сè. И секоја голема страница на кодови ќе дојде во оваа структура откако ќе се намали.

Затоа, да се обидеме да го разбереме од кодот „Здраво свет!“ Следниве елементи се задолжителни делови за секоја HTML-датотека.

  • <! DOCTYPE html> = Тоа е декларација на прелистувачот дека ова е HTML датотека. Мора да го наведете пред ознаката <html>.
  • <html> </ html> = Ова е корен елемент на HTML датотека. Сè што пишувате оди помеѓу <html> и </ html>.
  • <head> </ head> = Ова е мета информативен дел за прелистувачот. Кодовите внатре во оваа ознака немаат визуелен излез.
  • <body> </ body> = Ова е делот што го прави веб прелистувачот. Она што точно го гледате на веб-страница е рендерирање на шифри помеѓу <body> и </ body>.


Нагоре

2 - HTML тагови

HTML е соработка на стотици различни ознаки. Треба да научите како работат. Исто така треба да бидете сигурни дека тие ги користеле на вистинскиот начин.

HTML таг обично имаат отворање и затворање таг. Тагот за отворање има клучен збор опкружен со помалку од (<) и знак поголем од (>). Завршната ознака има сè исто, но со екстра коса црта (/) по знакот помал од (<).

(2a) Главни тагови

Сите ознаки за глава одат помеѓу <head> и </ head>. Тие содржат мета информации за веб-пребарувач и пребарувачи. Тие во основа немаат визуелен излез.

<title> </ title>

Темата за наслов го дефинира насловот на веб-страница која е видлива на табот на прелистувачот. Овие информации се користат од веб-програми и пребарувачи. Може да имате највисока по еден наслов на HTML датотека.

Код:

<title> Мојата прва веб-страница </ title>
Ознаката за наслов се појавува на врвот на вашиот интернет пребарувач.

<link>

Линкот таг ја поврзува вашата HTML страница со надворешни ресурси. Неговата главна употреба е поврзување на HTML страница со стилови на CSS. Тоа е самозаклучувачка ознака и не е потребна завршница </ link>. Еве rel означува врска со датотеката и src значи изворот.

Код:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<meta>

Мета е уште една само-затворање таг кој обезбедува мета информации на html датотека. Пребарувачите и другите веб-сервиси ги користат овие информации. Мета таговите се задолжителни ако сакате да ја оптимизирате вашата страница за пребарувачите.

Код:

<meta name = "description" content = "Ова е краток опис кој пребарувачите го покажуваат"

<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 </ h4> <h5 > Ова е насловот h5 </ h5> <h6> Ова е заглавие h6 </ h6>

излез:

Форматирање на ознаки

Текстот во html-датотеката може да биде форматиран со користење многу ознаки за форматирање. Ќе биде неопходно кога сакате да истакнете збор или линија од вашата содржина.

Код:

<p> Можете да го потенцирате текстот на многу начини. </ p> <p> Може да <strong> bold </ strong>, <u> подвлечете </ u>, <em> italic </ em>, <марка > означете </ mark>, <под> индекс </ sub>, <sup> надписник </ sup> и многу повеќе! </ p>

излез:

<! - ->

Можете да отклоните некои кодови од рендерирање со користење на ознаката за коментар. Кодот ќе се појави во изворниот код, но нема да биде изречен. Главната употреба на оваа ознака е за креирање документација за html датотеки за идна референца.

Пример:

<! - <p> Можете да коментирате некој код со тоа што ќе ги опкружувате на овој начин. </ p> ->

(2c) Други важни HTML тагови

<a> </ a>

Сидро е непроценлив таг кој се користи речиси насекаде. Нема да гледате некоја веб-страница на интернет без барем една прицврстена врска.

Структурата е иста. Има отворен <a> и затворање дел </ a>. Текстот што сакате да го прицврстите оди помеѓу <a> и </ a>.

Постојат некои атрибути кои дефинираат каде и како корисникот оди по кликнување на него.

  • ahref = "" = Ја дефинира дестинацијата врска. Врската оди помеѓу двојните цитати.
  • target = "" = Се дефинира дали URL-то ќе се отвори во нов табулатор на прелистувачот или во истото јазиче. target = "_ blank" е за новиот таб и целта = "_ само" е за отворање во иста таб.
  • 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 Headquarters во август 2014 "width =" 500 "height =" 375 "/>

излез:

Совети: Сакате да внесете слика што може да се кликне? Завршете го кодот на сликата со ознака <a>. Погледнете како оди.

<ol> </ ol> или <ul> </ ul>

Таг на листа е за креирање на листа на објекти. <ol> стои за нарачани листи (нумерирана листа) и <ul> се за неподредни листи (точки на куршуми).

Ставките од листата во <ol> или <ul> се означени со <li> </ li>. li стои за листа. Можете да имате што повеќе <li> што сакате во тагот родител <ol> или <ul>.

Код:

<p> Ова е листа со нарачки: </ p> <ol> <li> Предмет 1 </ li> <li> Предмет 2 </ li> <li> Точка 3 </ li> </ ol> <p> </ Li> <li> Предмет 1 </ li> <li> Предмет 2 </ li> </ ul>

излез:

<маса> </ табела>

Табела таг е за создавање на табела на податоци. Постојат неколку внатрешни ознаки, кои ги дефинираат заглавјата на табелите, редовите и колоните.

<table> </ table> е кодот на надворешниот родител. Во оваа ознака, <tr> стои за ред на табелата, <td> стои за колоната со табели и <th> стои за насловот на табелата.

Код:

<table> <tr> <th> Име </ th> <th> Возраст </ th> <th> Професија </ th> </ tr> <tr> <td> Jo <td> 27 </ td> td> Businessman </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> Nurse </ td> </ tr> <tr> <td> Simone < / td> <td> 39 </ td> <td> професор </ td> </ tr> </ table>

излез:

Забелешка: Вредностите во првите <tr> се заглавија. Значи, ние користевме <th> што се однесува на задебелен текстуален ефект на текстот.

Групирање табели

Можете да ја проширите функционалноста на табелата користејќи елементи за групирање на табели. Ќе има моменти кога ќе треба да креирате големи маси кои се делат на повеќе страници.

Групирање на податоците од вашата табела во насловот, телото и подножјето, можете да дозволите независно лизгање. Насловот и делот од телото ќе се испечатат на секоја страница каде што вашата табела се шири.

Табличките групи за табели се:

  • <thead> </ thead> = За завиткување на насловите на табелата. Се печати на секоја подели страница од табелата.
  • <tbody> </ tbody> = За зачувување на главните податоци на табелата. Можете да имате што повеќе <tbody> колку што ви требаат. А ознаката <tbody> значи посебна група на податоци.
  • <tfoot> </ tfoot> = За зачувување на информацијата за подножјето на табелата. Се печати на секоја подели страница од табелата.

Забележете дека не е задолжително да се користи групацијата. Можете да го користите за да направите поголеми табели повеќе читливи. Додека некои специјални програмери значително ги користат овие ознаки како CSS Selectors.

Еве како можеме да ја групираме нашата примерна табела во <thead>, <tbody> и <tfoot>:

Код:

<table> <thead> <tr> <th> Име </ th> <th> Возраст </ th> <th> Професија </ th> </ tr> </ thead> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td> Businessman </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> </ td> <td> <td> <td> <td> <td> <td> Вкупно лица: </ td> <td> 39 </ td> </ tr> </ tfoot> </ table>

излез:

<форма> </ форма>

Форма елемент се користи за создавање на интерактивни форми за веб страници. HTML-форма содржи неколку последователни елементи. На пример: <label>, <input>, <textarea> итн.

Акциониот атрибут во форма е многу важен. Таа укажува на страница од страна на серверот или на трета страна за обработка на информациите. За обработка, прво треба да дефинирате метод.

Можете да користите било кој од двата методи, да добиете или објавите. Земете ги испраќате сите информации во формат на URL каде Пошта ги испраќа информациите во телото за пораки.

Постојат многу видови на влез за форми. Основниот тип на внесување е текст. Напишано е како <input type = "text">. Видови може да бидат и радио, поле за избор, е-пошта и сл. Треба да има податочен тип на внесување на дното за креирање копче за доставување.

<label> ознака се користи за создавање етикети и поврзување со влезови. Правилото за поврзување етикети со влезовите е дека имаат иста вредност во "" атрибутот на атрибутот на етикетата и id = "" атрибутот на влез.

Код:

<form action = "#"> <label for = "firstname"> Име: </ label> <input type = "text" id = "firstname"> <br> <label for = "lastname"> Презиме: </ label> <text type id = "bio" rows = "10" cols = "</ label> <input type =" text "id =" lastname " 30 "placeholder =" Внесете ја вашата био овде ... "> </ textarea> <br> <label> Пол: </ label> <<label for =" машко "> Машко </ label> "радио" име = "пол" id = "машки"> <label for = "женски"> женски </ label> <тип на влез = "радио" име = "пол" id = "женски"> <br > <input type = "submit" вредност = "Поднеси"> <форма>

излез:

Забелешка: Јас го посочив акцијата на нула вредност бидејќи не била поврзана со кој било сервер за обработка на информациите.


Нагоре

3- HTML атрибути

Атрибутите се еден вид модификатори за HTML таговите. Тие додаваат нови конфигурации на HTML таговите.

Атрибутот изгледа како attributename = "" и се наоѓа во отворањето HTML таг. Вредноста на атрибутот оди помеѓу двојните наводници.

id = "" и class = ""

id и класа се идентификатори на HTML таговите. Различни имиња се назначени за различни HTML елементи користејќи идентификатори. Можете да користите еден идентификатор на класа за повеќе елементи. Но, не можете да користите еден идентификатор на идентификација за повеќе елементи.

Код:

<h1 class = "heading"> Ова е главниот наслов </ h1>

href = ""

href е за Хипертекст Референца. Тие ги посочуваат корисниците да ги користат врските. <a> <a> <a href="http://www.youtube.com/watch?

Код:

<a href="https://www.google.com/"> Google </ a>

src = ""

src се залага за извор. Го дефинира изворот на медиум или ресурс кој го користите во HTML-датотеката. Изворот може да биде или локална или трета страна.

Код:

</ span>

alt = ""

alt стои за алтернатива. Тоа е бекап текст што доаѓа во употреба кога еден HTML елемент не може да се вчита.

Код:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Седиште на Google" />

style = ""

стилот атрибут често се користи во HTML тагови. Ја извршува работата на CSS во рамките на ознаката HTML. Вашиот стил својства одат меѓу двојни цитати.

Код:

<h2 style = "color: red"> Ова е уште еден наслов </ h2>


Нагоре

4- Кодекс на екранот: Блок vs Вграден

Некои елементи секогаш почнуваат на нова линија и ја земаат целосната достапна ширина. Ова се "Блок" елементи.

На пример: <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>

излез:


Нагоре

5 - Двоен цитат против еден цитат во HTML

Ова прашање е многу очигледно. Што треба да го користите во HTML? Единствен цитат или двоен цитат? Се чини дека луѓето ги користат и двете, но кој е точен?

Во HTML, еден понуда и двоен цитат се исти. Тие не прават никаква разлика во исходот.

Можете да користите некој што сакате. Но мешањето и на страницата на кодови се смета за лоша практика. Треба да бидете во согласност со било кој од нив.


Нагоре

6- Семантички HTML vs не-семантички HTML

Семантички HTML е најновата верзија на HTML, која исто така се нарекува HTML5. Тоа е развиена верзија на не-семантички HTML и XHTML.

Зошто е подобро HTML5? Во претходните верзии, HTML-елементи беа идентификувани од страна на ид / класа имиња. На пример: <div id = "article"> </ div> се смета за статија.

Во HTML5, ознаката <article> </ article> се претставува како статија без потреба од идентификатор за идентификација / класа.

За доброто на HTML5, сега пребарувачите и другите веб апликации можат подобро да ја разберат веб-страницата. Семантичките веб-страници се покажаа подобри за оптимизација.

Еве листа на некои популарни HTML5 тагови:

  • <main> </ main> = Ова е за зачувување на главната содржина што сакате да ја прикажете вашите гледачи.
  • <header> </ header> = Ова е за обележување на заглавието дел од содржина како наслов или автор мета.
  • <article> </ article> = Утврдува корисничка дефинирана или независна содржина на вашите гледачи.
  • <section> </ section> = Може да го групира секој код, како што е заглавјето, подножјето или страничната лента. Може да се каже, тоа е семантичка форма на div.
  • <footer> </ footer> = Ова е местото каде што содржината на подножјето, одрекувањето од одговорност или текстот за авторски права припаѓаат.
  • <аудио> </ аудио> = Тоа ви овозможува да вметнете аудио датотеки без да имате проблем со додатокот.
  • <video> </ video> = Како <аудио>, можете да вметнете видеа користејќи ја оваа ознака без проблеми со приклучокот.

Едноставна структура на HTML5 би изгледала вака:

<Title> Мојата прва веб страница </ title> </ head> <body> <header> <nav> <ul> <head> <html> <head> <meta charset = "utf-8" 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> Copyright 2017 John Doe </ p> p> </ footer> </ body> </ html>


Нагоре

7 - HTML валидација

Повеќето веб професионалци го потврдуваат нивниот код по завршувањето. Зошто е неопходно да се провери кодот кога работи добро?

Постојат две можни причини за потврдување на вашите кодови:

  1. Тоа ќе ви помогне да го направите вашиот код меѓу-прелистувач и крос-платформски компатибилен. Кодот може да не покажува грешка во вашиот тековен прелистувач, но може да биде во друг. Валидацијата на кодот ќе го поправи.
  2. Пребарувачите и другите веб-програми може да престанат да ја лазат вашата страница ако имате грешки во неа. Може да потврдите преку потврда дека немате голема грешка.

W3C Валидаторна е најпопуларна услуга за валидација на код. Тие имаат неколку методи за проверка на кодови. Можете да испратите датотека или директно да го внесете кодот во нивниот валидационен мотор.


Нагоре

8 - други корисни ресурси

HTML е темата која постојано се учи. Повеќе ажурирани верзии на HTML може да дојдат порано. Значи мора да останете ажурирани и да продолжите да вежбате. Пракса е она што аs HTML.

Еве неколку корисни ресурси за вас: