HTML-opetusohjelma (aloittelijoille)

HTML-opas aloittelijoilleHaluatko oppia HTML-koodia?


Se kuulostaa loistavalta idealta. Tästä syystä olemme laatineet tämän HTML-opetusohjelman aloittelijoille.

Nykyään maailmassa on vähintään 1,7 miljardia verkkosivustoa. Käytännössä kaikki nämä sivustot käyttävät HTML: ää tavalla tai toisella.

P.S: Jos et halua oppia HTML: ää ja aloittaa verkkosivustosi rakentamista heti ilman koodausta, katso tämä opas: Kuinka luoda verkkosivusto ILMAISEKSI (ilman HTML-opiskelua).

Johdanto HTML: ään


Mikä on HTML?

Mikä on HTMLHTML, lyhenne sanoista HyperText Markup Language, on tietokonekieli verkkosivustojen ja verkkosovellusten luomiseen. Koostuu pääasiassa koodisarjoista, jotka yleensä kirjoitetaan tekstitiedostoon ja tallennetaan HTML-muodossa. HTML-kielellä kirjoitettu koodi kääntyy kauniiksi, hyvin muotoiltuksi tekstiksi tai yhdistelmäksi tekstiä ja mediaa selaimen kautta tarkasteltuna.

Brittiläinen fyysikko Tim Berners-Lee kehitti HTML: n ensimmäisen kerran vuonna 1990, ja siitä lähtien se on käynyt läpi niin monia muutoksia, että viimeisimmällä versiolla voidaan saavuttaa paljon enemmän kuin mitä kuvitteltiin mahdollista, kun kieli keksittiin ensimmäisen kerran.

Tässä opetusohjelmassa käydään läpi HTML-kielen perusteet ja kaikki mitä sinun tarvitsee tietää aloittaaksesi HTML: n aloittelijana.

HTML-versiot

Ensinnäkin kaikkien HTML-versioiden nopea purkaminen HTML-keksinnän jälkeen.

  • HTML 1.0: Tämä oli HTML-sivustoversio ja kielen ensimmäinen julkaisu.
  • HTML 2.0: Tämä versio otettiin käyttöön vuonna 1995. Se kehittyi vähitellen, mikä mahdollisti lisäominaisuudet, kuten lomakepohjaisen tiedoston lataamisen, taulukot, asiakaspuolen kuvakartat ja kansainvälistymisen..
  • HTML 3.2: Tim Berners-Lee perusti vuonna 1994 World Wide Web -konsortion (W3C) yrittääkseen varmistaa standardien kehittämisen Internetissä. Vuoteen 1997 mennessä he julkaisivat HTML 3.2: n..
  • HTML 4.0: Myöhemmin vuonna 1997 W3C julkaisi HTML 4.0 – version, joka otti käyttöön monia selainkohtaisia ​​elementtityyppejä ja määritteitä.
  • HTML 4.0 julkaistiin myöhemmin uudelleen pienillä muokkauksilla vuonna 1998.
  • HTML 4.01: Joulukuussa 1999 julkaistiin HTML 4.01.
  • XHTML: Eritelmät otettiin käyttöön vuonna 2000, ja sitä suositeltiin käytettäväksi yhteisenä standardina HTML 4.01: n kanssa. Se sisälsi XML-koodin varmistaakseen koodin oikean kirjoittamisen ja ohjelmointikielten välisen yhteentoimivuuden.
  • HTML5: W3C julkaisi HTML5: n suosituksena lokakuussa 2014 ja julkaisi myöhemmin HTML 5.1: n marraskuussa 2016.

HTML-editorin valitseminen

Valitse HTML-editoriJos aiot luoda verkkosivuja HTML-muodossa, tarvitset HTML-editorin. HTML-editorilla on useita etuja.

Hyvä HTML-editori pitää koodisi puhtaana ja organisoituna. Se havaitsee myös, kun avaat uuden tunnisteen, ja sulkee sen automaattisesti, jotta sinulla ei ole viallista koodia ja vähentää kirjoitusten määrää. Suurin osa HTML-toimittajista antaa tänään mahdollisuuden esikatsella verkkosivusi nähdäksesi miltä se näyttää web-selaimella heidän WYSIWYG-ominaisuuden avulla.

On monia ilmaisia ​​ja maksettuja HTML-editoijia, alla on joitain suosituimmista vaihtoehdoista, joista voit valita:

HTML: n perusrakenteet


Kun olet päättänyt käytettävästä HTML-editorista, seuraava askel on ymmärtää HTML: n rakennuspalikoita. Kun koodataan HTML-muodossa, on välttämätöntä ymmärtää nämä rakennuspalikat. Ne sisältävät tunnisteet, määritteet ja elementit. Tarkastellaan niitä alla:

Johdanto tunnisteisiin

Kun olet HTML-muodossa, sinun on ensin ymmärrettävä tageja. Pohjimmiltaan tunnisteet erottavat normaalin tekstin HTML-koodista.

Seurauksena on, että HTML: n kohdalla tunnisteet erottavat toisistaan ​​sen, näytetäänkö asiakirjasi tavallisena tekstinä vai “muunnetuna tekstinä”, joka on pohjimmiltaan tekstikoodi, joka näyttää näyttävän sarjan asioita (hyperlinkit, kuvat, media tai muut) muotoilumenetelmät) sen perusteella, mitä tagien perusteella näytetään.

Katsotaanpa esimerkiksi sanaa “Hän on poika”:

  • Tavallisessa tekstimuodossa saat: Hän on poika.
  • Lihavoidussa tekstimuodossa saat: Hän on poika

Saavuttaaksesi lihavoidussa muodossa joudut käyttämään tag.

Tekemällä teksti lihavoituna html-muodossa

Raaka-HTML-muodossa meillä on Hän on poika jonka selain sitten kääntää seuraavaksi: Hän on poika.

”Hän on poika” voisi myös tulla esiin kursivoituna.

Tämä saavutetaan käyttämällä tag.

tekstin tekeminen kursivoituna html-muodossa

Meillä on: Hän on poika joka sitten tulee esiin nimellä Hän on poika.

Hyperlinkitetty saavutetaan käyttämällä tag.

tekstin tekeminen hyperlinkkeiksi HTML-muotoon

Raaka HTML-muodossa meillä on: Hän on poika, joka osoittaa olevansa poika.

Tunnisteiden tulisi ymmärtää muutamia asioita:

  • Tunnisteet ovat käytännössä HTML: n rakennuspalikka – et voi tehdä HTML: tä ilman tunnisteita! Jos olet kiinni mitä tunnistetta käytetään, tutustu HTML-jaksotaulukkoomme.
  • Lähes jokaisen avoimen tunnisteen on oltava suljettu. Muista, että on olemassa poikkeuksia. Esimerkki tunnisteesta, jota ei tarvitse sulkea, on tyhjä tunniste, kuten rivinvaihto:
    .
  • Tunnisteet sisältyvät vähemmän kuin (““<”) and greater than (“>”) Kulmakiinnike. Sulkevat tunnisteet sisältävät loppuviivan, joka tulee ennen tunnisteen sulkemista. Esimerkki avoimesta tunnisteesta: . Esimerkki suljetusta tunnisteesta .
  • Jokainen HTML-tiedosto alkaa avaustunnisteella ja päättyy sulkevaan etikettiin. HTML-tiedoston ensimmäisen rivin tulisi ilmoittaa asiakirjan tyyppi, jotta selain tietää, mitä HTML-makua käytät. Siksi näet, että HTML-sivut alkavat ””Ennen HTML-koodin alkamista.

Ennen sisällön lisäämistä suurin osa HTML-tiedostoista näyttää periaatteessa seuraavalta:

HTML--

Seuraava osa tunniste sisältää yleensä tietoja asiakirjasta, kuten sen otsikon, sisällönkuvauskentät ja mistä CSS-tiedosto löytyy – sisältöä, joka ei ole näkyvissä suoraan selainsivulla. Jakso “ ja”(Jota edustamme nimellä“ PÄÄSISÄLTÖ ”) on HTML-tiedoston pääsisältö, jonka katsoja näkee selaimessa. Tämä sisältää kaiken ensimmäisestä kappaleesta hyperlinkkeihin ja muotoiluun multimediaan ja kaikkeen muuhun.

Johdatus alkuaineisiin

johdanto elementteihin

HTML-muodossa ”elementti” koostuu avaamisesta ja sulkemisesta sekä tunnisteiden välisestä sisällöstä.

Kohdassa “Hän on poika”(Lihavoitu) esimerkki, meillä on tämä HTML: Hän on poika. Teksti ”Hän on poika” on avoimen ja suljetun tunnisteen ympäröimä. Kaikki, mukaan lukien avaintunniste, sisältö ja suljetunniste, ovat elementti.

Kun tunniste avataan, sisältö otetaan käyttöön ja tunniste suljetaan, meillä on elementti.

Elementti voi olla perusmuodossa tai monimutkaisessa muodossa. Miksi? Koska kaikki avoimen ja sulkevan tunnisteen sekä näiden tunnisteiden välillä on osa. Se tarkoittaa, että meillä voi olla elementtejä elementissä. Nykyisessä esimerkissämme “hän on poika” (Hän on poika) on elementti.

Huomaat, että sanoimme aiemmin, että HTML-asiakirjat sisältävät tag ennen sisällön alkamista. Sisältö voi sisältää satoja erilaisia ​​elementtejä, mutta kaikki nämä elementit ovat osa kehon elementtiä (koska runkoelementti on avoin, sisältää sisältöä ja suljetaan sitten).

Johdanto ominaisuuksiin

Vaikka HTML-asiakirjat käyttävät periaatteessa tunnisteita kaikkeen, haluamme joskus välittää lisätietoja elementin sisällä. Tässä tapauksessa käytämme attribuuttia. Attribuuttia käytetään määrittelemään elementin ominaisuudet, sitä käytetään elementin aukkotunnisteessa. Attribuutit koostuvat nimestä ja arvosta.

Huomaa, että määritteen arvo sijoitetaan lainausmerkin sisään muotoa käyttämällä Sinun teksti.

esimerkki määritteestä

esimerkki:

Hän on poika

Tässä esimerkissä opastamme, että ”Hän on poika” on kohdistettu asiakirjan keskelle.

HTML-koodin käytön aloittaminen


HTML-käytön aloittaminenMikäli aloitat? Jos oletetaan, että haluat luoda oman HTML-perussäädöksesi tänään? Sivunimikkeiden luomisesta lomakkeiden luomiseen opastamme sinut alla oleviin ohjeisiin HTML-käytön aloittamisesta.

HTML-koodin luominen elementti

Kun luot HTML-asiakirjaa, yksi ensimmäisistä luotavista asioista on elementti. Tämä sisältää metatiedot (tai tiedot HTML-asiakirjasta). Tämä sisältää tietoja, kuten merkistö, asiakirjan otsikko, asiakirjan tyylit, skriptit jne.

Jotkut sisällyttää otsikko, joka luodaan tag.</p><p><strong>esimerkki</strong>:</p><pre><title>Tämä on sivumme otsikko

Tämä otsikko näkyy selain-välilehdessä. Se indeksoidaan myös sivun otsikkona, kun hakukoneiden robotit indeksoivat verkkosivustosi.

Tähän sisältyy myös elementti, jota käytetään usein määrittämään tiedot, joita hakukoneet voivat kuvata luetteloidensa sisällön. Tähän sisältyy kuvaus, avainsanat, tekijän tiedot jne elementti määrittelee myös HTML-asiakirjan käyttämän merkkisarjan.

Otsikoiden luominen HTML-muodossa

luomalla otsikot html-tiedostoon

Otsikoilla on tärkeä rooli verkkosivuston onnistumisessa. Ensinnäkin niiden avulla lukijoiden on helppo skannata sivujesi sisältöä. Toiseksi, ja mikä tärkeintä, ne kommunikoivat verkkosivujen rakenteen hakukoneille ja vaikuttavat siksi usein siihen, kuinka sisältösi sijoitetaan hakukoneiden tuloksiin.

Tästä huolimatta on tärkeää välttää otsikkotunnisteiden käyttämistä tekstin suurentamiseksi tai lihavoimiseksi. On olemassa muita tunnisteita, joita voidaan käyttää siihen (joita käsittelemme myöhemmin tässä osiossa). Sen sijaan otsikkotunnisteita tulisi käyttää yksinomaan rakenteisiin.

HTML-koodissa on kuusi otsikkotunnistetta:

että
, kanssa

tunniste, joka osoittaa tärkeimmän otsikon ja
merkki, joka osoittaa vähiten tärkeän otsikon.

Luo otsikoita yksinkertaisesti päätämällä luomasi otsikon, avaa otsikko tavallisella otsikkotunnisteella ja muista aina sulkea tunnisteet, kun olet valmis.

Esimerkki HTML-otsikoista:

  • Tämä on ensimmäinen HTML-otsikkosi

    (suurin)

  • Tämä on toinen HTML-otsikkosi

  • Tämä on kolmas HTML-otsikkosi

  • Tämä on neljäs HTML-otsikkosi

  • Tämä on viides HTML-otsikkosi
  • Tämä on kuudes HTML-otsikkosi

Kappaleiden luominen

kappaleiden luominen HTML-muodossa

Seuraava askel on aloittaa kappaleiden luominen. Kappaleita voidaan luoda

tag.

esimerkki:

Tämä on ensimmäinen kappaleesi.

Tämä on toinen kappale, ja luot useita muita kappaleita.

Muista, että HTML-kirjoittaminen eroaa huomattavasti puhtaan tekstin kirjoittamisesta. Siksi, jos hajotat tekstiä HTML: ssä aloittamatta uutta kappaletta, sillä ei ole väliä, milloin selain näyttää tekstiä. Sen sijaan haluat käyttää rivinvaihtoa, jota edustaa
tag.

esimerkki:

Tämä on uusi kohta. Ja haluan käyttää useita uusia linjoja. Joten hajotan sen.

Tämä ei tule esiin seuraavasti:

Tämä on uusi kohta.
Ja haluan käyttää useita uusia linjoja.
Joten hajotan sen.

Sen sijaan se tulee ulos seuraavasti:

Tämä on uusi kohta. Ja haluan käyttää useita uusia linjoja. Joten hajotan sen.

Joten miten hajotat tekstit uusiksi riveiksi, jotta ne näyttäisivät näin:

Tämä on uusi kohta.
Ja haluan käyttää useita uusia linjoja.
Joten hajotan sen.

Käyttämällä rivinvaihtoa.

esimerkki:

Tämä on uusi kohta.
Ja haluan käyttää useita uusia linjoja.
Joten hajotan sen.

Tästä huolimatta on tärkeää huomata, että linjan katkeaminen (
) -tagi on tyhjä tunniste, joten sinun ei tarvitse sulkea sitä.

Tekstin alustaminen HTML-muodossa

muotoilla teksti HTML-muodossa

Seuraava vaihe on muotoilla teksti HTML-muodossa. Tässä voit ilmoittaa, haluatko tekstisi lihavoidun, kursivoidun, alleviivatun, alamerkityn, ylämerkityn jne. Tämä on perusopas, joten tämä osa ei ole loppukäsittely muotoilulle. Sen sijaan sisällytetään vain joitain perustunnisteita. Muiden muotoilumuotojen käyttö on yksinkertaista – etsi vain haluamasi tunniste ja siirry eteenpäin:

Lihavoituna: Hän on poika tulee esiin nimellä Hän on poika

Kursivointi: Hän on poika tulee esiin nimellä Hän on poika

Tekstin alleviivaus: Hän on poika tulee esiin nimellä Hän on poika. On syytä huomata, että tunniste poistettiin HTML 4.01: stä ja määritettiin uudelleen edustamaan tyylillisesti erilaista tekstiä HTML5: ssä. Tämän seurauksena on suositeltavaa käyttää alleviivattua tekstiä CSS: n avulla. Koska tämä artikkeli on perusopas, pidämme sitä yksinkertaisena.

Käyttämällä alaindeksiä: Hän on poika tulee esiin nimellä Hän on poika

Yläindeksin käyttö: Hän on poika tulee esiin nimellä Hän on poika

Muiden tunnisteiden osalta, joita voidaan käyttää muotoiluun, kannattaa ehkä tutustua resurssin lopussa olevaan sanastoon, johon olemme sisällyttäneet runsaasti osuvia HTML-tunnisteita.

Tilatut ja järjestämättömät luettelot

Ennemmin tai myöhemmin joudut luomaan luetteloita. Listat voidaan tilata (ts. Numeroida) tai järjestää (ts. Numeroimatta).

Tässä on esimerkki tilatusta luettelosta:

  1. Kohta 1
  2. Kohta 2
  3. Kohta 3

Näin voit luoda sen:

  1. Kohta 1
  2. Kohta 2
  3. Kohta 3

Tässä on esimerkki järjestämättömästä luettelosta:

  • Kohta 1
  • Kohta 2
  • Kohta 3

Näin voit luoda sen:

  • Kohta 1
  • Kohta 2
  • Kohta 3

Jos se ei ole jo ilmeistä. Tässä on erittely:

  • tunnistetta käytetään osoittamaan jokainen luettelon kohde. Kun luot luetteloa, voit käyttää
      tag ilmoittaa tilattu luettelo (“o” = tilattu ja “l” = luettelo) tai