Die definitiewe HTML-gids vir beginners

Laaste opgedateer op 15 Mei 2018

Twintig jaar gelede, selfs as jy net 'n stokperdjie-blogger was, moes jy 'n paar webkodering ken om jouself te beskerm of om 'n eenvoudige funksie by jou webwerf te voeg. Maar nou is daar soveel redakteurs en invoegtoepassings beskikbaar dat selfs die basiese beginsels van HTML nie meer nodig is nie maak 'n webwerf or hardloop 'n blog.

Die probleem met hierdie is dat as jy nie 'n paar basiese kenmerke ken nie, kan jy maklik in die werklike probleme in jou blog raak en moet jy 'n duur ontwikkelaar aanstel om 'n klein probleem op te los. Nie net dit nie, maar om veranderinge aan jou blog te skep, soos om 'n persoonlike teks widget toe te voeg, benodig 'n bietjie kennis.

En as u inhoudsopmaak ervaar, lyk dit nie reg nie, HTML-kennis kan u weer op die regte spoor kry.

Hier is 'n paar van ons HTML-riglyne vir bloggers en nie-tegnologie-aanlyn-sake-eienaars.

HTML is die ruggraat van vandag se internet. Miljoene webwerwe het saam die internet gevorm. Waar HTML die bousteen van al hierdie webwerwe is.

Beginner se vrae en vrae

1- Wat is HTML?

HTML is die afkorting van Hyper Text Markup Language. Dit is die standaard taal om inhoud vir webblaaiers te merk.

HTML word voorgestel deur "Elements". Elemente staan ​​ook bekend as "Tags".

2- Hoekom is HTML nodig?

Web blaaiers kan slegs 'n webwerf lewer wanneer dit in hul ondersteunde taal geskryf is. HTML is die mees algemene opmaak taal en het die hoogste aanvaarding vir webblaaiers.

Daarom het u HTML nodig.

3- Is HTML hoofletter sensitief?

HTML is nie hoofletter sensitief nie. Maar die beste praktyk is om HTML met behoorlike gevalle te skryf.

Stappe om jou eerste HTML-lêer te skep

U kan 'n basiese HTML-lêer skep met die Notepad op u rekenaar. Maar dit sal pynlik wees om baie lyne kodes te skryf.

Jy benodig 'n Kode-redigeerder. 'N Goeie kode-redakteur maak dit makliker om groot kodes te skryf en te organiseer.

Ek gebruik en beveel aan Notepad + + (gratis en oopbron) vir die skryf van web tale. Daar is ander redakteurs wat jy mag gebruik Sublime teks, Atom ens.

Hier is wat jy moet doen:

  1. Installeer 'n kode redakteur
  2. Maak dit oop
  3. Skep 'n nuwe lêer
  4. Stoor dit as 'n. Html-lêer

Jy is gereed om te gaan!


Gaan Top

1-Hello World!

Kopieer en plak die volgende kode in jou nuwe HTML-lêer en stoor dit. Begin dit nou op jou webblaaier.

kode:

<! DOCTYPE html> <html> <head> <title> my eerste webblad </ title> </ head> <body> <p> Hallo wêreld! </ P> </ body> </ html>

Uitgawe:

Geluk! U het u heel eerste HTML-lêer geskep. U hoef dit nie op hierdie punt te verstaan ​​nie. Ons sal dit binnekort dek.

Verstaan ​​HTML struktuur

Elke HTML-lêer het 'n gemeenskaplike naakte struktuur. Dit is waar alles begin. En elke groot bladsy van kodes sal na hierdie struktuur kom nadat dit afgewerk is.

Laat ons dit dus probeer verstaan ​​vanuit die “Hello World!” -Kode. Die volgende elemente is die verpligte dele vir elke HTML-lêer.

  • <! DOCTYPE html> = Dit is 'n verklaring aan die leser dat dit 'n HTML-lêer is. U moet dit spesifiseer voor die <html> -tag.
  • <Html> </ html> = Dit is die hoof element van 'n HTML-lêer. Alles wat jy skryf, gaan tussen <html> en </ html>.
  • <Head> </ head> = Dit is die meta inligting deel vir 'n blaaier. Kodes in hierdie tag het geen visuele uitset nie.
  • <Body> </ body> = Dit is die deel wat 'n webblaaier lewer. Wat jy presies op 'n webwerf sien, is die lewering van kodes tussen <body> en </ body>.


Gaan Top

2-HTML-etikette

HTML is die samewerking van honderde verskillende etikette. Jy moet leer hoe hulle werk. Jy moet ook seker maak dat hulle hulle op die regte manier gebruik het.

HTML-etikette het gewoonlik 'n opening en 'n sluitingsteken. Die openingsetiket het die sleutelwoord omring deur 'n minder as (<) en 'n groter as (>) teken. Die afsluitingsetiket het alles dieselfde, maar 'n ekstra vorentoestreep (/) na die minder as (<) teken.

(2a) Hoofletters

Al die koptekens gaan tussen <head> en </ head>. Hulle bevat meta inligting vir webblaaier en soekenjins. Hulle het basies geen visuele uitset nie.

<Title> </ title>

Title tag definieer die titel van 'n webblad wat sigbaar is op die blaaier oortjie. Hierdie inligting word gebruik deur webprogramme en soekenjins. U kan die hoogste een titel per HTML-lêer hê.

kode:

<title> My eerste webblad </ title>
Titel-tag verskyn bo-op jou blaaier.

<Skakel>

Link-tag koppel jou HTML-bladsy met eksterne bronne. Die belangrikste gebruik daarvan is die koppeling van HTML-bladsy met CSS style sheets. Dit is 'n self-sluitende tag en het nie die einde nodig nie </ link>. Hier staan ​​rel vir verhouding met die lêer en src beteken die bron.

kode:

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

<Meta>

Meta is nog 'n self-sluitende tag wat meta-inligting van 'n html-lêer verskaf. Soekenjins en ander webdienste gebruik hierdie inligting. Metatags is 'n moet as jy jou bladsy vir soekenjins wil optimaliseer.

kode:

<meta name = "description" content = "Dit is die kort beskrywing wat soekenjins wys"

<script> </ script>

Die script-kode word gebruik om 'n bediener-kant-skrif in te sluit of 'n skakel na 'n eksterne skriflêer te maak. Dit kan twee eienskappe in die openingsteken hê. Een is die tipe en die ander is die bron (src).

kode:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

Noscript-etiket werk wanneer skrifte in 'n webblaaier gedeaktiveer word. Dit maak 'n bladsy verenigbaar met diegene wat nie skrifte in hul webblaaiers toestaan ​​nie.

kode:

<Noscript> <p> Ag Skripte is gedeaktiveer. </ P> </ noscript>

(2b) Liggaamsmerke

Al die liggaamsmerke gaan tussen <body> en </ body>. Hulle het visuele uitsette. Dit is waar die meeste werk gedoen word. U moet hierdie etikette gebruik om u hoofbladinhoud te struktureer.

<h1> </ h1> na <h6> </ h6>

Dit is die opskrifte. Die belangrikste opskrif is gemerk met <h1> en die minste belangrik met <h6>. U moet dit in die korrekte hiërargie gebruik.

kode:

<h1> Hierdie is 'n h1-opskrif </ h1> <h2> Hierdie is 'n h2-opskrif </ h2> <h3> Hierdie is 'n h3-opskrif </ h3> <h4> Hierdie is 'n h4-opskrif </ h4> <h5 > Hierdie is 'n h5-opskrif </ h5> <h6> Hierdie is 'n h6-opskrif </ h6>

Uitgawe:

Formatering Tags

Teks in 'n HTML-lêer kan geformateer word deur gebruik te maak van baie formatering-etikette. Dit sal nodig wees as u 'n woord of reël uit u inhoud wil uitlig.

kode:

<p> U kan u teks op baie maniere uitlig. </ p> <p> U kan <strong> vet </ strong>, <u> onderstreep </ u>, <em> kursief </ em>, <punt > merk </ mark>, <sub> subskripsie </ sub>, <sup> superscript </ sup> en meer! </ p>

Uitgawe:

<! - ->

Jy kan sekere kodes van rending afwyk deur van die kommentaar tag gebruik te maak. Die kode sal in die bronkode verskyn maar sal nie gelewer word nie. Die hoofgebruik van hierdie tag is om dokumentasie van html-lêers te skep vir toekomstige verwysing.

voorbeeld:

<! - <p> U kan enige kode opmerk deur dit so te omring. </ p> ->

(2c) Ander belangrike HTML-etikette

<a> </a>

Anker is 'n waardevolle tag wat amper oral gebruik word. U sal geen webblad aanlyn sien sonder ten minste een anker skakel.

Die struktuur is dieselfde. Dit het 'n opening <a> en 'n sluitingsdeel </ a>. Die teks wat jy wil anker, gaan tussen <a> en </a>.

Daar is sekere eienskappe wat bepaal waar en hoe die gebruiker gaan nadat hy daarop geklik het.

  • ahref = "" = Dit definieer die bestemmings skakel. Die skakel gaan tussen die dubbele aanhalingstekens.
  • target = "" = Dit bepaal of die URL sal oopmaak in 'n nuwe blaaier-oortjie of in dieselfde oortjie. target = "_ blank" is vir die nuwe blad en teiken = "_ self" is vir die opening in dieselfde oortjie.
  • rel = "" = Dit definieer die verhouding van die huidige bladsy met die gekoppelde bladsy. As u nie die gekoppelde bladsy vertrou nie, kan u rel = 'nofollow' definieer.

kode:

<p> <a target="_blank" href="https://www.google.com/"> Klik hier </a> om na Google te gaan. Dit sal in 'n nuwe oortjie oopmaak. </ P> <p> <a target="_self" href="https://www.google.com/"> Klik hier </a>. Dit sal jou ook na Google neem, maar sal op die huidige oortjie oopmaak. </ P>

Uitgawe:

<img />

Prentjie-tag is nog 'n belangrike tag sonder dat jy nie baie beeldgebaseerde webwerwe kan voorstel nie.

<img /> is 'n self-sluitende tag. Dit hoef nie die tradisionele sluiting soos </img> te hê nie. Daar is 'n paar eienskappe wat u moet ken voordat u dit korrek kan gebruik.

  • src = "" = Dit is vir die definisie van die bron skakel van die prent. Plaas die skakel reg tussen die dubbele aanhalings.
  • alt = "" = Dit staan ​​vir alternatiewe teks. As u prent nie laai nie, sal hierdie teks gebruikers 'n idee gee oor die ontbrekende prent.
  • width = "" = Dit definieer die breedte van 'n prent in pixels.
  • Hoogte = "" = Dit definieer die hoogte van 'n prent in pixels.

voorbeeld:

<p> Dit is die Googleplex in Augustus 2014. </ p> <p> Hierdie prent het 'n breedte van 500 pixels en 'n hoogte van 375 pixels. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Google se hoofkwartier in Augustus 2014 "width =" 500 "height =" 375 "/>

Uitgawe:

Wenke: Wil jy 'n klikbare prent inbring? Wikkel die prent kode met 'n <a> tag. Kyk hoe dit gaan.

<ol> </ ol> of <ul> </ ul>

Lysetiket is vir die skep van 'n lys items. <ol> staan ​​vir geordende lyste (genommerde lys) en <ul> staan ​​vir ongeordende lyste (koeëlpunte).

Die lysitems binne die <ol> of <ul> is gemerk met <li> </ li>. li staan ​​vir lys. U kan soveel <li> hê as u wil in die ouer <ol> of <ul> tag.

kode:

<p> Hierdie is 'n bestel lys: </ p> <ol> <li> Item 1 </ li> <li> Item 2 </ li> <li> Item 3 </ li> </ ol> <p> Hierdie is 'n ongeordende lys: </ p> <ul> <li> Item 1 </ li> <li> Item 2 </ li> <li> Item 3 </ li> </ ul>

Uitgawe:

<Table> </ table>

Tabeletiket is vir die skep van 'n tabel van data. Daar is 'n paar innerlike vlakmerke wat tabelopskrifte, rye en kolomme definieer.

<table> </ table> is die buitenste ouer kode. In hierdie etiket staan ​​<tr> vir tabelry, <td> staan ​​vir tabelkolom en <th> staan ​​vir tabelopskrif.

kode:

<table> <tr> <th> Naam </ th> <th> Ouderdom </ th> <th> Beroep </ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td> Seksman </ td> </ td> <td> <td> <td> <td> <td> <td> <td> / td> <td> 26 </ td> <td> Professor </ td> </ tr> </ table>

Uitgawe:

Nota: Waardes binne die eerste <tr> is opskrifte. Dus, ons het <th> gebruik wat vet teks effek op die teks het.

Tabelgroepering

U kan die funksionaliteit van 'n tafel uitbrei deur tabelgroeperingselemente te gebruik. Daar sal tye wees wanneer jy groot tafels moet skep wat in verskeie bladsye verdeel word.

As u tabel data in hoofletter, liggaam en voetskrif groepeer, kan u onafhanklike blaai toelaat. Die kop- en liggaamsdeel sal druk op elke bladsy waar u tafel gespan het.

Die tabelgroeperingsetikette is:

  • <thead> </ thead> = Vir die invul van die opskrifte van 'n tafel. Dit druk op elke gesplete bladsy van die tafel.
  • <tbody> </ tbody> = Om die hoofdata van 'n tafel in te vou. Jy kan soveel <tbody> hê as wat jy nodig het. 'N <tbody> -tag beteken 'n aparte groep data.
  • <tfoot> </ tfoot> = Vir die invul van die voetskrifinligting van 'n tafel. Dit druk op elke gesplete bladsy van die tafel.

Let asseblief daarop dat dit nie verpligtend is om groepering te gebruik nie. U mag dit gebruik om groter tafels meer leesbaar te maak. Terwyl sommige spesiale ontwikkelaars hierdie merkers merkbaar gebruik as CSS Selectors.

Hier is hoe ons ons voorbeeldige tabel kan groepeer in <thead>, <tbody> en <tfoot>:

kode:

<table> <thead> <tr> <th> Naam </ th> <th> Ouderdom </ th> <th> Beroep </ th> </ tr> </ thead> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td> Verpleegster </ td> <td> <td> <td> <td> <td> td </ td> <td> <td> <td> <td> <td> <td> <td> </ td> </ td> </ td> Totale Persone: </ td> <td> 26 </ td> </ tr> </ tfoot> </ table>

Uitgawe:

<Form> </ form>

Vorm element word gebruik om interaktiewe vorms vir webblaaie te skep. 'N HTML-vorm bevat verskeie opeenvolgende elemente. Byvoorbeeld: <label>, <invoer>, <textarea> ens.

Die aksie-kenmerk in vorm is baie belangrik. Dit dui op 'n bediener- of 'n derdeparty-bladsy vir die verwerking van die inligting. Vir verwerking moet jy eers 'n metode definieer.

Jy kan een van twee metodes gebruik, kry of pos. Kry stuur al die inligting in die URL-formaat waar Post die inligting in die boodskapliggaam stuur.

Daar is baie soorte insette vir vorms. Die baie basiese insette is teks. Dit is geskryf as <invoer tipe = "teks">. Tipes kan ook radio, boks, e-pos en so aan wees. Daar moet 'n ingevoerde tipe invoer wees onderaan vir die skep van 'n stuurknoppie.

<label> -tag word gebruik om etikette te skep en met insette te assosieer. Die reël om etikette met die insette te assosieer, is dat dieselfde waarde vir = "" kenmerk van etiket en id = "" kenmerk van insette het.

kode:

<form action = "#"> <label for = "first name"> Vir Naam: </ label> <invoer type = "teks" id = "voornaam"> <br> <etiket vir = "achternaam"> Naam: </ label> <invoer type = "teks" id = "achternaam"> <br> <etiket vir = "bio"> Kort Bio: </ label> <textarea id = "bio" rows = "10" cols = " 30 "placeholder =" Vul jou bio hier in ... "> </ textarea> <br> <label> Geslag: </ label> <br> <label for =" man "> Man </ label> <input type = "radio" naam = "gender" id = "manlik"> <br> <label for = "female"> Vroulik </ label> <input type = "radio" name = "gender" id = "female"> <br > <input type = "submit" value = "Submit"> <form>

Uitgawe:

Nota: Ek het aksie aangedui op 'n nulwaarde omdat dit nie aan enige bediener gekoppel is om die inligting te verwerk nie.


Gaan Top

3-HTML-eienskappe

Eienskappe is een tipe wysigings vir HTML-tags. Hulle voeg nuwe konfigurasies by die HTML-etikette.

'N Attribuut lyk soos attributename = "" en sit in die opening HTML tag. Die waarde van die attribuut gaan tussen die dubbele aanhalings.

id = "" en klas = ""

id en klas is die identifiseerders van HTML tags. Verskillende name word aangewys aan verskillende HTML-elemente deur gebruik te maak van identifiseerders. U kan een klas identifiseerder gebruik vir verskeie elemente. Maar jy kan nie een id-identifiseerder vir verskeie elemente gebruik nie.

kode:

<h1 class = "heading"> Dit is die hoofletter </ h1>

href = ""

href staan ​​vir Hypertext Reference. Hulle verwys gebruikers na verwysings skakels. Ankermerk <a> gebruik href om gebruikers na 'n bestemmings-URL te stuur.

kode:

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

src = ""

src staan ​​vir bron. Dit definieer die bron van 'n media of hulpbron wat u in die HTML-lêer gebruik. Die bron kan óf plaaslike of derdeparty-URL wees.

kode:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

alt staan ​​vir alternatief. Dit is 'n rugsteun-teks wat gebruik word wanneer 'n HTML-element nie kan laai nie.

kode:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Google se hoofkwartier" />

style = ""

styl kenmerk word dikwels gebruik in HTML tags. Dit is die taak van CSS binne die HTML-tag. Jou stilerings-eienskappe gaan tussen die dubbele aanhalings.

kode:

<h2 style = "color: red"> Dit is 'n ander titel </ h2>


Gaan Top

4-Kode Vertoon: Blok vs Inlyn

Sommige elemente begin altyd op 'n nuwe lyn en neem die volle beskikbare wydte. Dit is "Blok" elemente.

Ex: <div>, <p>, <h1> - <h6>, vorm ens.

Sommige elemente neem slegs die nodige ruimte in en begin nie op 'n nuwe reël nie. Dit is 'Inline'-elemente.

Ex: <a>, <span>, <br> <strong>, <img> ens.

U sal blokelemente van inlyn moet onderskei wanneer u CSS-style sal gebruik. In hierdie HTML-gids is dit nie baie nodig nie.

kode:

<! DOCTYPE html> <html> <head> <title> My eerste webblad </ title> </ head> <body> <h2> Hierdie is 'n H2-opskrif. Dit het 'n blokvertoning. </ H2> <h2> Dit is 'n ander </ u> H2-opskrif. Hier het die onderstreep-tag Inline-vertoning. </ H2> </ body> </ html>

Uitgawe:


Gaan Top

5- Dubbelkwotasie vs enkel kwotasie in HTML

Hierdie vraag is baie duidelik. Wat moet jy in HTML gebruik? Enkele kwotasie of dubbele kwotasie? Mense lyk albei te gebruik, maar watter een is korrek?

In HTML is enkelaanhaling en dubbelaanhaling dieselfde. Dit maak nie 'n verskil in die uitset nie.

Jy kan enigeen wat jy verkies, gebruik. Maar om beide in 'n bladsy van kodes te meng, word beskou as 'n slegte praktyk. U moet konsekwent wees met enige van hulle.


Gaan Top

6-Semantiese HTML vs Nie-semantiese HTML

Semantiese HTML is die nuutste weergawe van HTML, wat ook HTML5 genoem word. Dit is die ontwikkelde weergawe van nie-semantiese HTML en XHTML.

Hoekom is HTML5 beter? In vorige weergawes is HTML-elemente geïdentifiseer volgens id / klas name. Byvoorbeeld: <div id = "article"> </ div> is beskou as 'n artikel.

In HTML5 verteenwoordig die <article> </ article> -kode homself as 'n artikel sonder enige ID / klas identifiseerder.

Ter wille van HTML5 kan nou soekenjins en ander webtoepassings 'n webblad beter verstaan. Semantiese webwerwe het bewys dat dit beter is vir SEO.

Hier is 'n lys van 'n paar gewilde HTML5-tags:

  • <hoof> </ main> = Dit is vir die verpakking van die hoofinhoud wat jy jou kykers wil wys.
  • <header> </ header> = Dit is vir die nasien van die koptekst van 'n inhoud soos titel of outeur-meta.
  • <article> </ article> = Dit spesifiseer 'n gebruiker-gedefinieerde of onafhanklike inhoud aan jou kykers.
  • <section> </ section> = Dit kan enige kode soos kop-, voet- of sidebar groepeer. Jy kan sê, dit is die semantiese vorm van 'n div.
  • <footer> </ footer> = Dit is waar u inhoud van die voetstuk, vrywaring of kopieregtipe behoort.
  • <audio> </ audio> = Dit stel u in staat om klanklêers in te voer sonder om enige pluginprobleem te hê.
  • <video> </ video> = Soos <audio>, kan jy video's insit met hierdie tag sonder plugin probleme.

'N Eenvoudige HTML5-struktuur lyk soos volg:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> My eerste webblad </ title> </ head> <body> <header> <nav> <ul> < li> Menu 1 </ li> <li> Menu 2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2> Dit is die titel van die artikel </ H2> <p> Geplaas deur John Doe </ p> </ header> <p> Die inhoud van die artikel gaan hier </ p> </ article> </ main> <footer> <p> Kopiereg 2017 John Doe </ p> </ footer> </ body> </ html>


Gaan Top

7-HTML-validering

Die meeste van die webpersoneel bevestig hulle kode nadat hulle dit voltooi het. Hoekom is dit nodig om 'n kode te bevestig wanneer dit goed werk?

Daar is twee moontlike redes vir die validering van u kodes:

  1. Dit sal u help om u kode kruisblaaier en kruisplatform-versoenbaar te maak. Die kode wys dalk nie 'n fout in u huidige blaaier nie, maar dit mag dalk in 'n ander een wees. Kode validering sal dit regmaak.
  2. Soekenjins en ander webprogramme kan dalk ophou om die bladsy te soek as u foute ervaar. U kan deur middel van die bevestiging bevestig dat u nie 'n groot fout het nie.

W3C Validator is die gewildste diens vir kode validering. Hulle het verskeie metodes vir die validering van kodes. Jy kan óf 'n lêer laai of die kode direk in die validasie-enjin invoer.


Gaan Top

8- Ander nuttige hulpbronne

HTML is 'n leerderonderwerp. Meer opgedateerde weergawes van HTML kan vroeër kom. So moet jy op hoogte bly en oefen. Praktyk is wat aces HTML.

Hier is 'n paar nuttige hulpbronne vir jou: