Če ste karkoli podobni meni, preden sem začel delati pri IMPACT-u, verjetno ne veste veliko o HTML, CSS, kodiranju ali razvoju spletnih mest.

Morda poznate nekaj elementov kodiranja, vendar ste se želeli naučiti nekaj več, ali pa morda sploh ne veste, da HTML pomeni Hyper Text Markup Language. (Ali si?) 

Na srečo sem zaradi mojih zadnjih dveh let in pol tukaj postal nekakšen koder… amater (ne morem reči “strokovnjak”, ker bodimo resnični; ne znam zgraditi spletne strani ali česa podobnega).

Osnovni HTML je postal moja pridobljena veščina, večinoma zaradi dejstva, da HubSpot uporabljam vsak dan, vendar je eden največjih razlogov, zakaj sem se naučil nekaterih od teh kod, ta, da sem bil utrujen od postavljanja najpreprostejših vprašanj razvijalcem – in Prepričan sem, da so se me tudi oni naveličali.

Če se znajdete v istem čolnu kot jaz, objavljate bloge, upravljate spletna mesta in drugo, upam, da vam lahko naslednje osnovne kode HTML nekoliko olajšajo dan.

 Pridružite se trenerjem IMPACT za poglobljeno raziskovanje nove teme vsak mesec v naši seriji brezplačnih virtualnih dogodkov.

21 osnov HTML, ki bi jih moral poznati vsak nerazvijalec

1. Naslovi

Naslovi so morda ena najlažjih kod za učenje in če upoštevamo, kako  pomembni so za vaš SEO , je to dobra stvar. Obstaja šest različnih vrst, kot je prikazano spodaj. Če želite ustvariti naslov, preprosto zavijte svoje besedilo v oznake naslovov po vaši izbiri:

2. Odstavki

Kakšen bi bil lep naslov brez odstavka, ki bi podrobneje razložil sporočilo? Če želite dobiti odstavek, kot je ta, ki ga berete zdaj, preprosto zavijte besedilo v oznake <p>, kot je prikazano v spodnjem primeru, in ga ne pozabite zapreti z oznako </p>!

<p>Hej, jaz sem odstavek!</p>

Hej, jaz sem odstavek!

3. Povezave

Inbound marketing ni nič brez povezovanja vaše že tako odlične vsebine z drugimi ustreznimi članki in deli spletnega mesta. Poskusite povezati besedo ali frazo v svojem odstavku z naslednjo kodo <a>:

<a href=”https://perc.ddns.net/p/”>Obiščimo čudovito spletno mesto IMPACT!</a>

To se čudežno spremeni v: Obiščimo čudovito spletno mesto IMPACT!

Del stavka kode href določa naslov ciljnega spletnega mesta, na katerega želite, da vodi vaša povezava.

4. Slike

To je zabavno. Slike izboljšajo vse, vaša vsebina pa postane bolj privlačna za bralca. Vstavite sliko, kot je ta:

<img class=”leni” data-src=”https://cdn2.hubspot.net/hubfs/145335/Cute-Puppy.jpg” alt=”Cute-Puppy” style=”width:500px;height:333px; “>

Oznaka slike je prazna, ker vsebuje samo atribute, zato je ni treba zapreti. Zgoraj navedeni atributi vključujejo “src” ali URL slike. Vključil sem tudi nadomestno besedilo slike (pomembno za namene SEO) in nekaj lastnosti sloga (širina in višina).

Svojo sliko lahko prilagodite, kakor želite. Oh, in za vse ljubitelje kužkov zunaj – kot sem jaz – tukaj je dejanska slika, ki sem jo kodiral zgoraj:

5. Prelom vrstice

Tudi prelom vrstice je prazen element, zato ga ni treba zapreti. Prelom vrstice je v bistvu namerni presledek med dvema vrsticama besedila, ustvarjen z <br>.

<p>Pod ta stavek postavite prelom vrstice.
<br>
Nad tem stavkom postavite prelom vrstice.</p>

Pod ta stavek postavite prelom vrstice

Nad tem stavkom postavite prelom vrstice.

Ko je zgornji HTML pretvorjen, lahko ugotovite, da je med prvo in drugo vrstico manj prostora v primerjavi z ločevanjem dveh odstavkov z oznakama <p>. Dodajanje preloma vrstice pomaga ohranjati stavke znotraj istega odstavka v različnih vrsticah.

6. Drzen in močan

Če želite narediti nekaj drznega, obstajata dva elementa kode, ki delujeta. Vendar mi moji razvijalci pravijo, da se <strong> uporablja veliko več kot <b>. Ne pozabite zapreti oznake <strong>! </strong>

<strong>Odebeli cel stavek!</strong>
Ali pa samo <strong>odebeli</strong> eno besedo!

Odebeli cel stavek!
Ali samo krepko eno besedo!

7. Ležeče in poudarjeno

Ležeče in poudarjeno besedilo je podobno krepkemu in močnemu besedilu. Obstajata dva elementa kode, vendar se eden uporablja pogosteje kot drugi. V tem primeru bo deloval <i>, pogosteje pa se uporablja <em>.

<em>Ta stavek je zelo eleganten.</em>

Ta stavek je super fancy.

8. Podčrtano

Krepko, ležeče in zdaj podčrtano. Ta je prav tako enostaven kot drugi dve. Preprosto zavijte besedilo, ki ga želite podčrtati, v oznake <u>, kot je ta .

<u>Poglejte, lahko podčrtamo!</u>

Poglejte, lahko podčrtamo!

9. Urejeni seznami

Obstaja razlika med urejenim in neurejenim seznamom. Urejen seznam vsebuje številke, medtem ko neurejen seznam vsebuje točke. Oba sledita isti strukturi, vendar se ena črka spremeni.

Tukaj je kodni stavek za urejen seznam. <ol> je celoten “urejen seznam”, medtem ko je <li> “element seznama.” Na seznam lahko vključite toliko elementov, kot jih potrebujete.

10. Neurejeni seznami

Za preklop z urejenega seznama na neurejen seznam je potrebna samo ena sprememba črke.

11. Nadnapis

Če želite v svoje besedilo vstaviti obliko nadnapisa, ovijte besedilo, za katerega želite, da je nadpisano, v oznake ^. Na koncu boste imeli ^{nekaj takega.}

Blagovne znamke morajo biti napisane v nadpisu^TM.

Blagovne znamke morajo biti zapisane v nadnapisu ^TM .

12. Subscript

Če znate nadpisati, bi morali znati tudi podpisati. Samo uporabite _oznake, da dobite _{takšno besedilo.}

Včasih so citati napisani v indeksu.

Včasih so _citati napisani v indeksu.

13. Vodoravna črta

Ali želite razdeliti dele strani ali članka? Poskusite z vodoravno črto! Samo uporabite prazen element (ni ga treba zapreti), <hr>.

Vstavi vodoravno črto med mano in 2. stavkom.
<hr>
Živjo, jaz sem 2. stavek.

 

Vstavi vodoravno črto med mano in 2. stavkom.

---

 

Živijo, jaz sem 2. stavek.

14. Označeno ali poudarjeno besedilo

Stavim, da niste vedeli, da lahko označite besedilo prek kode HTML, kajne? To je tako kul in tako enostavno. Zavijte besedilo, ki ga želite označiti, v <mark> oznake </mark>, tako da dobitekul poudarjena funkcija.

Označite samo <mark>najpomembnejše opombe</mark>.

Poudarite lenajpomembnejše opombe.

15. Izbrisano (prečrtano) besedilo

Če želite na svojem besedilu prikazati učinek navzkrižnega prehoda (morda ste ustvarili seznam opravil in želite vsako sproti prečrtati), za to obstaja koda. Poskusite prečrtati celotne stavke ali celo samo eno besedo z uporabo oznak <del>. </del>

<del>Nahrani psa.</del>
<del>Napiši članek na mojem blogu.</del>
Pripravi večerjo.

Nahrani psa.
Napiši članek v mojem blogu.
Narediti večerjo.

16. Kratki in dolgi citati

Do zdaj se morda sprašujete, kako vse svoje primere dam v besedilno polje. No, presenečenje! Tudi za to obstaja koda. Pravzaprav se imenuje blok citat ali dolg citat. Spodaj lahko vidite razliko med dolgim ​​in kratkim citatom (običajni narekovaji).

<blockquote>Vse to besedilo bo v narekovajih kot ostali primeri.</blockquote>
<q>To citiram, ker to povem na glas.</q>

Vse to besedilo bo v narekovajih, kot ostali primeri.
To citiram, ker to povem na glas.

17. Nastavitev določene pisave

Naslednjih nekaj bo nekoliko težavnejših, zato poskusite ostati z mano. Zdaj, ko veste, kako ustvariti naslov, odstavek in stilizirano besedilo, vam bo koristno vedeti, da lahko preprosto spremenite pisavo z elementom “družina pisav”.

Ne pozabite na vse majhne podrobnosti, kot so enačaj, narekovaji in podpičje. Oglejte si spodnje primere.

<h4 style=”font-family:Georgia;”>To glavo želim spremeniti v pisavo Georgia.</h4>

<p style=”font-family:Verdana;”>Ta odstavek želim spremeniti v pisavo Verdana.</p>

To glavo želim spremeniti v pisavo Georgia.

Ta odstavek želim spremeniti v pisavo Verdana.

18. Nastavitev določene barve besedila

Ta uporablja isto vrsto kode kot prejšnji primer, vendar namesto družine pisav uporabite »barvo«. Eksperimentirate lahko z dejanskimi barvami (modra, rdeča, oranžna itd.) ali pa vstavite šestnajstiške barve, da besedilo prilagodite svoji blagovni znamki.

<p style=”color:blue;”>Nebo je danes res modro.</p>
<p style=”color:#ff471a;”>Ogenj je rdečkasto-oranžen.</p>

Nebo je danes res modro.

Ogenj je rdečkasto-oranžen.

19. Nastavitev določene velikosti besedila

Tudi ta uporablja isto osnovno logiko kode, vendar uporablja element “velikost pisave.” Velikost pisave navedite v slikovnih pikah ali px.

<p style=”font-size:36px;”>Ta odstavek naj bo pisava velikosti 36.</p>
<p style=”font-size:12px;”>Ta odstavek naj bo pisava velikosti 12.</p>

Velikost pisave tega odstavka naj bo 36.

Naj bo ta odstavek velikosti 12 pisave.

20. Nastavitev posebne poravnave besedila

Levo, na sredini, desno ali poravnano. Kako vam je všeč vaše besedilo? Naredite ga poljubno s funkcijo »text-align«.

<p style=”text=align:center;”>Ta odstavek mora biti na sredini.</p>
<p style=”text-align:right;”>Ta odstavek mora biti poravnan desno.</p>

Ta odstavek mora biti na sredini.

Ta odstavek mora biti desno poravnan.

21. Mize

Najboljše sem prihranil za konec! No, ne vem, če je najboljši, ampak mislim, da je prekleto kul. Koda HTML za ustvarjanje tabele lahko postane precej zapletena, a če se naučite osnov, ne bi smeli imeti prevelikih težav.

Spodaj vam bom pokazal, kako ustvariti preprosto tabelo.

Zaradi lažjega razumevanja <tr> pomeni vrstico tabele, <td> pa podatke tabele. Upoštevajte, da lahko spremenite pisavo, velikost besedila, barvo besedila, poravnavo besedila in drugo.

Začni kodirati!

21 kod, o katerih ste pravkar prebrali, je odličnih, s katerimi lahko začnete vaditi in razvijate svoje veščine HTML. Ko se boste tega naučili, kot sem prepričan, da si lahko predstavljate, se morate naučiti še milijon. Odličen vir, ki ga lahko uporabite za nadaljevanje izobraževanja, je Codeacademy , spletna interaktivna platforma za kodiranje.

Če želite, da pokrijemo še kaj drugega, na primer stilizacijo tabele, spreminjanje barve, pisave ali velikosti posameznih besed ali besednih zvez v vaših odstavkih ali povezovanje slik, se obrnite na nas!