Basiese HTML-gids vir dummies

Laas op 17 November 2021 opgedateer


Twintig jaar gelede, al was u net 'n stokperdjieblogger, moes u 'n webkodering ken om uself te beskerm of 'n eenvoudige funksie op u webwerf te voeg. Maar nou is daar soveel redakteurs en inproppe beskikbaar dat selfs die basiese beginsels van HTML nie meer nodig is nie.

Die probleem hiermee is dat as u nie 'n paar basiese beginsels ken nie, u maklik probleme in u blog kan ondervind en 'n duur ontwikkelaar moet huur om 'n klein probleem op te los. Nie net dit nie, maar ook om veranderinge aan u blog aan te bring, soos om 'n aangepaste tekswidget by te voeg, verg 'n bietjie kennis.

HTML-kode.
HTML “kodes”.

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 die internet van vandag. Miljoene webwerwe vorm saam die internet. Waar HTML die bousteen van al hierdie webwerwe.

Voordat ons begin ...

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 "elemente". Elemente staan ​​ook bekend as 'Tags'.

2. Waarom 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 hooflettergevoelig?

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!

Voorbeeld van kode-redakteur Atom
Kode-redakteur - Atom

1. Hallo Wêreld!

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

kode:

My eerste webblad Hello Wêreld!

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 uit die “Hello World!” Verstaan. kode. Die volgende elemente is die verpligte onderdele vir elke HTML-lêer.

  • = Dit is 'n verklaring aan die blaaier dat dit 'n HTML-lêer is. U moet dit spesifiseer voor die tag.
  • = Dit is die hoofelement van 'n HTML-lêer. Alles wat u skryf, gaan tussen en .
  • = Dit is die meta inligting deel vir 'n blaaier. Kodes in hierdie tag het geen visuele uitset nie.
  • = Dit is die deel wat 'n webblaaier lewer. Wat u presies op 'n webwerf sien, is die weergawe van kodes tussen en .

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 slotmarkering. Die aanvangsplaatjie het die sleutelwoord omring deur 'n teken minder as (<) en 'n groter as (>) teken. Die sluitplaatjie het alles dieselfde, maar 'n ekstra voorwaartse skuinsstreep (/) na die minder as (<) teken.

(2a) Hoofletters

Al die kopplaatjies gaan tussenin en . Dit bevat meta-inligting vir webblaaier en soekenjins. Hulle het basies geen visuele uitvoer nie.

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:

My eerste webblad
Titelplaatjie - HTML-voorbeelde
Titel-tag verskyn bo-op jou blaaier.

Skakelmerk skakel u HTML-bladsy met eksterne bronne. Die belangrikste gebruik daarvan is die koppeling van HTML-bladsy met CSS-stylblaaie. Dit is 'n selfsluitende etiket en het nie die einde nodig nie . Hier staan ​​rel vir die verhouding met die lêer en src beteken die bron.

kode:

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="This is the short description that search engines show"

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:

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:

Helaas! Skripte is gedeaktiveer.

(2b) Liggaamsmerke

Al die lyfmerke gaan tussenin en . Hulle het visuele uitsette. Dit is hier waar die meeste werk gedoen word. U moet hierdie etikette gebruik om u inhoud van u hoofblad te struktureer.

aan

Dit is die opskrifmerke. Die belangrikste opskrif is gemerk met en die minste belangrik met . U moet dit in die regte hiërargie gebruik.

kode:

Dit is 'n h1-opskrif Dit is 'n H1-opskrif Dit is 'n h1-opskrif Dit is 'n h2-opskrif Dit is 'n h2-opskrif Dit is 'n h2-opskrif

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:

U kan u teks op baie maniere uitlig. U kan vet , onderstreep , kursief , merk , intekenaar , opskrif en meer!

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:

You can comment out any code by surrounding them in this way -->

(2c) Ander belangrike HTML-etikette

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 en 'n afsluitende deel . Die teks wat u wil anker, gaan tussen en .

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.
  • teiken = ”“ = Dit definieer of die URL in 'n nuwe blaaier-oortjie of in dieselfde oortjie sal oopmaak. target = ”_ blank” is vir die nuwe oortjie en target = ”_ self” is om in dieselfde oortjie oop te maak.
  • 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:

Klik hier om na Google te gaan. Dit word in 'n nuwe oortjie oopgemaak. Klik hier . Dit sal u ook na Google neem, maar sal op die huidige blad oopgemaak word.

Uitgawe:

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

is 'n selfsluitende etiket. Dit hoef nie die tradisionele sluiting soos . 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.
  • breedte = ”“ = Dit definieer die breedte van 'n prent in pixels.
  • Hoogte = ”“ = Dit definieer die hoogte van 'n prent in pixels.

voorbeeld:

Dit is die Googleplex in Augustus 2014. Hierdie beeld het 'n breedte van 500 pixels en 'n hoogte van 375 pixels.

Uitgawe:

Wenke: Wil u 'n klikbare prentjie invoeg? Draai die beeldkode met 'n etiket toe. Kyk hoe dit gaan.

of

Lysetiket is om 'n lys met items te skep. staan ​​vir geordende lyste (genommerde lys) en staan ​​vir ongeordende lyste (kolpunte).

Die lysitems binne die of is gemerk met . li staan ​​vir lys. Jy kan soveel hê soos u binne die ouer wil hê of tag.

kode:

Dit is 'n geordende lys: Item 1 Item 2 Item 3 Dit is 'n ongeordende lys: Item 1 Item 2 Item 3

Uitgawe:

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

is die buitenste ouer-kode. In hierdie merker, staan ​​vir tafel ry, staan ​​vir tafelkolom en staan ​​vir tafelkop.

kode:

Naam Ouderdom Beroep Jo 27 Sakeman Carol 26 Verpleegster Simone 39 Professor

Uitgawe:

Nota: Waardes binne die eerste is opskrifte. So, ons het gebruik wat vet tekseffek op die teks toepas.

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:

  • = Vir die invul van die opskrifte van 'n tafel. Dit druk op elke gesplete bladsy van die tafel.
  • = Vir die verpakking van die hoofdata van 'n tabel. Jy kan soveel hê soos u benodig. A tag beteken 'n aparte groep data.
  • = 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 voorbeeld tabel kan groepeer in , en :

kode:

Naam Ouderdom Beroep John 27 Sakeman Carol 26 Verpleegster Simone 39 Professor Totale persone: 3

Uitgawe:

Vormelement word gebruik vir die skep van interaktiewe vorms vir webblaaie. 'N HTML-vorm bevat verskeie opeenvolgende elemente. Byvoorbeeld:, , 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 invoer vir vorms. Die baie basiese invoer tipe is teks. Dit staan ​​geskryf as . Tipes kan ook radio, regmerkie, e-pos, ensovoorts wees. Daar moet 'n invoer tipe invoer wees om 'n stuurknoppie te skep.

tag word gebruik om etikette te skep en dit aan insette te koppel. Die reël om etikette met die insette te assosieer, is dat dieselfde waarde in = = "" kenmerk van etiket en id = "" kenmerk van invoer is.

kode:

Eerste naam: Van: Kort bio: Geslag: Manlik Vroulik

Uitgawe:

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

3. HTML-eienskappe

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

'N Kenmerk lyk soos attribuutnaam =' 'en sit in die eerste HTML-tag. Die waarde van die kenmerk 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:

Dit is die hooftitel

href = ””

href staan ​​vir Hypertext Reference. Hulle wys gebruikers op verwysingsskakels. Ankerplaatjie gebruik href om gebruikers na 'n bestemmings-URL te stuur.

kode:

Google

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:

alt = ""

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

kode:

styl = ””

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:

Dit is 'n ander titel

4. Kodevertoning: Blokkeer vs Inline

Sommige elemente begin altyd op 'n nuwe lyn en neem die volle beskikbare breedte. Dit is 'blokkeer' elemente.

Bv: , , - , vorm ens.

Sommige elemente neem slegs die vereiste ruimte in en begin nie op 'n nuwe lyn nie. Dit is 'Inline'-elemente.

Eks: ,, ,,, 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:

My eerste webblad Dit is 'n H2-opskrif. Dit het blok vertoon. Dit is nog 'n H2-opskrif. Hier is die onderstreepskerm Inline vertoon.

Uitgawe:

5. Dubbele aanhaling teenoor enkele aanhaling 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.

6. Semantiese HTML versus 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.

Waarom is HTML5 beter? In vorige weergawes is HTML-elemente geïdentifiseer deur ID / klasname. Byvoorbeeld: is beskou as 'n artikel.

In HTML5, tag verteenwoordig homself as 'n artikel sonder dat 'n ID / klas-identifiseerder nodig is.

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:

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

'N Eenvoudige HTML5-struktuur lyk soos volg:

My eerste webblad Spyskaart 8 Spyskaart 1 Dit is die titel van die artikel Geplaas deur John Doe Die inhoud van die artikel verskyn hier Kopiereg 2 John Doe

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.

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: