HTML on perusta lähes kaiken Internetissä. Se on Internetin sisällön kulmakivi, ja se on ollut jo vuosikymmeniä. Ilman vankka ymmärrys HTML, kaikki mitä teet WordPress tai muita web suunnittelu ja kehitys on kitukasvuinen. Onneksesi, on liuta perus HTML-koodeja, että jokainen WordPress käyttäjä aloittelijasta veteraani käyttää lähes päivittäin. Hajotetaan ne ja saadaan sinut ajan tasalle.
Tilaa Youtube-kanavamme
mikä on HTML?
tässä pikaversio: HTML tulee sanoista hypertext markup language eli se ei ole aivan ohjelmointikieli. HTML Ei komentoa tietokoneen ajaa asioita kautta script. Sen sijaan se ottaa tekstin, joka sinulla on sivulla, ja se merkitsee sen ylös. Kursivointi, lihavointi, linjaus, koko ja niin edelleen. HTML antaa myös mahdollisuuden sisällyttää kuvia ja linkkejä, ja HTML5: llä uusin versio manipuloi niitä ja tekstiä jännittävillä uusilla tavoilla.
HTML-koodi sisältyy lippuihin ja on melko helppolukuinen. Yksinkertainen HTML-sivu saattaa näyttää tältä:
selaimessa renderoituna se näyttäisi tältä:
kuten näette, HTML ei ole niin hämmentävää. Itse asiassa, vaikka et ole koskaan nähnyt mitään HTML-koodia ennen, Lyön vetoa, että voit selvittää, mitä kukin näistä tageista tarkoittaa vain asiayhteyden. Kun tämä pois tieltä, katsotaanpa yleisin, perus HTML-koodit, että voit käyttää koko uran Webissä.
lihavoitu
kun paketoit tekstin <strong> tageihin, käsket selainta lihavoimaan tekstin. Voit käyttää myös yksinkertaisesti <b>, mutta kun Google ja muut hakukoneet suosivat semanttista koodausta, olet turvallisempi <vahvoilla>
You can make <strong>text bold</strong> by using this tag.
kursivointi
< Em> tarkoittaa painotusta, ja se on semanttinen tapa käyttää kursivointia HTML: ssä. Tähän voi käyttää myös <i>.
You can put <em>text in italics<em> by using this tag.
alleviivaus
sama pätee < u> ja alleviivaus. Yleensä tämä saa hyvin vähän käyttöä, koska linkit ovat alleviivattu ja alleviivattu teksti, jota ei voi klikata, antaa huonon käyttökokemuksen.
You can <u>underline</u> by using this tag.
otsikot
muista käyttää niitä hierarkkisessa järjestyksessä. Google haluaa sinun peittävän otsikoita, joten muista käyttää <h2> vain alle <h1>, ei alle <h3>.
vaikka useimmilla sivuilla on vain yksi <h1>, Google ei enää rankaise sinua siitä, että sinulla on enemmän. Pitää vain muistaa, että käyttämällä <h1> Nollaa pesä sivun (tai ainakin sen osan).
<h2>H2 is the most commonly used header tag.</h2>
kaikki HTML-elementtien otsikot tällä sivulla ovat H2.
Kuva
kuvien lisääminen on yksi HTML: n hyödyllisimmistä asioista. Se mursi Internetin brutalistisista tyyleistään ja tielle, jossa se on tänä päivänä. Sinun tarvitsee vain saada haluamasi kuvan URL-osoite ja laittaa yksi <img src> (standing for image source tag. Näin:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
huomaa, että kuvan tunnistetta ei tarvitse sulkea, eikä lainausmerkkejä tarvita kuvan näyttämiseen. Monet ihmiset käyttävät niitä edelleen, jotta koodi olisi luettavampi.
< alt > attribuutti on teksti, joka näkyy esteettömyystarkoituksessa, ja se on myös hakukoneiden indeksoima. Ihmisille, joilla on näytönlukijoita ja muita laitteita, alt-teksti on ehdottoman välttämätöntä käyttää Internetiä. Se on aina paras käytäntö on vaihtoehtoinen teksti kuvia.
Linkit
OK. Linkki. Linkkien kanssa tapahtuu paljon. Tai pikemminkin linkeillä voi tehdä paljon. Yksinkertaisimmillaan sen yhdistää <a href> tagilla. <a> osoittaa, että se on linkki, ja <href> on kirjaimellisesti hypertekstiviittaus (URL), johon linkität.
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
suljet linkkikoodin pelkällä numerolla </a>, ja voit käyttää minkä tahansa tekstin välissä. Se on itse klikattava linkki ja sitä kutsutaan ankkuritekstiksi.
se kääntää sivulla näin: linkin Divi-sivullemme, ja tämä on ankkuriteksti.
lisäksi voi pesiä myös HTML-koodia. Kuvan voi klikata lisäämällä linkkilippujen väliin <img src> – tunnisteen.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
voit katsoa, miten klikattava kuvalinkki tekee tästä:
lisää Link-attribuutteja
voit myös sisällyttää linkeille melko paljon erilaisia attribuutteja, joten ne käyttäytyvät tietyillä tavoilla (kuten piilottamalla URL-osoitteesi viittaajalta tai avaamalla linkin uuteen ikkunaan). Osa hyödyllisimmistä on
- rel osoittaa jonkinlaista suhdetta Linkille ja sen kohteelle. Kuten noreferrer estää läheteliikenteen jäljittämisen sinuun.
- kohde kertoo selaimelle, mihin linkki avataan: _blank avaa sen esimerkiksi tyhjällä välilehdellä.
- nofollow kulkee RELin mukana ja kertoo hakukoneille, ettei kohdesivustolle kannata välittää mitään linkkimehua. Tämä on hyvä, kun linkitetään kiistanalaiseen sisältöön ja niin edelleen. Se myös estää ihmisiä roskapostittamasta linkkejä kommenteissasi, ja tekee siitä niin, että sisältöäsi voidaan pitää puolueettomana, koska et tarjoa mitään muuta bonusta kuin näkyvyyttä ja klikkauksia.
niitä on enemmän, mutta nuo ovat niitä, joita näet todennäköisesti useimmin.
yliviivattu teksti
jos olet kuin minä, joskus sinun on haluttava vitsailla murtuneilla sanoilla. Tai ehkä sinun täytyy merkitä asioita pois luettelosta (tai poistaa, kuten koodi itse sanoo). Tai mitään muuta, että sinun pitäisi olla rivi käynnissä tekstiä.
silloin käytetään < del> noin tekstiä, jonka haluaa iskeä läpi. Joillekin ihmisille tämä on uskomattoman yleinen koodi, kun taas toiset eivät ehkä koskaan käytä sitä. Siitä huolimatta se on helppo muistaa.
You can use <del>this code</del> for strikethrough text in HTML.
luettelot
luettelot ovat toinen merkittävä osa verkkosisältöä nykyään. Ne eivät ainoastaan anna sinulle tonneittain valkoista tilaa ja hajota tekstin seiniä, vaan ne myös antavat sinun järjestää ajatuksesi sulaviksi paloiksi.
on olemassa kahdenlaisia luetteloita, joita voi tehdä perus HTML-koodeilla. Järjestetyt luettelot, jotka on numeroitu 1, 2, 3 ja niin edelleen. Järjestämättömät luettelot käyttävät numeroiden sijasta luoteja tai symboleja (riippuen sivuston suunnittelusta).
jokainen lista paketoidaan joko <ul> tai < ol> järjestämättömille tai järjestetyille listoille. Ja jokainen luettelossa oleva esine tulee kääriä < li>.
ja nämä koodit tekevät näin osoittaakseen eron:
- tämä on osa järjestämätöntä listaa.
- niin on tämäkin.
- näin laadit tilatun listan.
- tämä on linkki luettelossa.
- ja tämä linkkiteksti on lihavoitu, mutta tämä osa ei ole.
listoilla voi myös pesiä muita koodeja. Joten voit lihavoida tekstiä, lisätä linkkejä, ja niin edelleen.
Block-lainaukset
sinun on jossain vaiheessa WordPress-uraasi lainattava jonkun muun verkkosivustoa. Siinä kohtaa <lohkokakkonen> astuu kuvaan. Ympäröi vain mitä tahansa tekstiä, jonka kopioit / liität (ja määrität) <blockquote> avaus-ja sulkemistagit, ja olet valmis menemään.
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
tältä se näyttää sivulla:
tämä teksti ilmestyy erityinen muotoilu osoittaa, että se on lainaus.
kappaleet
kappale HTML on tavallaan outo. Riippuen käyttämästäsi CMS: stä ja rakentajasta, se saattaa automaattisesti tehdä jokaisen rivin katkeamisen erillisenä kappaleena. WordPress tekee tämän, kun kirjoitat HTML. Kaikki ei kuitenkaan tee niin. Jos siis haluat pitää kappaleet erillään, eikä niissä ole tekstiseinää, kääri jokainen <p>. Tämän jälkeen selain osaa näyttää jokaisen tekstilohkon erillisenä kappaleena yhden jatkuvan lohkon sijaan. Oletuksena selaimet eivät huomioi rivikatkoja, ellei toisin mainita.
<p>This is my first paragraph.</p><p>This is my second paragraph.</p>
rivit ja viivat katkeavat
saatat haluta muita erotteluja kappaleidesi ja osioidesi välille. Silloin voi käyttää <hr> ja <br/> tageja.
<hr> työntää erotinjohdon sinne, missä se on. Monet ihmiset käyttävät tätä erottamaan widgetit sivupalkissa tai suuria osia web-sivun.
<br/> tagi on viivamurtuma. <br/> keskellä <p> voi rikkoa viivan menemättä uuteen kappaleeseen (Blockin tyylittelyn ja organisaation vuoksi). <br/> on itsestään sulkeutuva tunniste, eli sen sisällä ei voi olla sisältöä. Tämä näkyy koodin lopussa olevalla vinoviivalla.
vaikka voit käyttää sitä hajottaa tekstiä ja kappaleita lisäämällä ne minne haluat taukoja, se ei ole hyvä käytäntö päästä, ja kun saat enemmän kehittyneitä HTML ja CSS ja JavaScript, sinun täytyy kohdistaa kohta Elementti tehdä tiettyjä asioita. Voit lukea lisää erosta täältä.
paketointi
HTML on ehdottoman välttämätöntä, jotta voi olla vuorovaikutuksessa Internetin kanssa. Jokainen käyttää niitä samalla tavalla, olitpa aloittamassa web kehitys ja suunnittelu tai veteraani päivinä ennen JavaScript oli asia. Käytämme edelleen perus HTML-koodeja kaikkien sivustojemme perustusten pyörittämiseen. Riippumatta siitä, kuinka hieno sivusto on tai kuinka edistyneitä sen ominaisuudet ovat, kun linkki katkeaa tai asiat ovat rohkeita, joiden ei pitäisi olla, tulet silti kaivelemaan ympärillesi nähdäksesi, ovatko <a href> tai <strong> tagit kunnossa.
mitkä ovat käytetyimmät HTML-peruskoodisi nykyään?
artikkeli featured image by enterlinedesign /. com