Vaikka sivustoillamme on nykyään monia erilaisia tekniikoita, kaksi tärkeintä tiedostoa koko Internetissä ovat HTML ja CSS. Kyllä, jos tarvitset jotain monimutkaista, tarvitset myös lisää tekniikoita. Mutta jos haluat vain luoda yksinkertaisen henkilökohtaisen verkkosivun, HTML ja CSS ovat kaikki mitä tarvitset.
Johdatus perusasioihin
Tämä on HTML:n ja CSS:n aloittelijaopas, joka näyttää, kuinka voit luoda yksinkertaisen sivuston mahdollisimman nopeasti. Tulokset eivät välttämättä ole ”standardien mukaisia”. Ja sinun on luettava jonkin verran itse, jos haluat muokata ja laajentaa sitä. Mutta se on sivusto ja toimii ”kuten sen pitäisi” useimmissa selaimissa.
Koska tilaa on paljon, emme sukeltaa liian syvälle verkkokehityksen ja -suunnittelun kaikkiin osa-alueisiin. Sen sijaan opastamme sinut vaiheiden läpi siirtyäksesi nollasta täysin toimivalle verkkosivulle ja selitämme, mitä kaikki prosessissa tekee.
Kaksi tarpeellista tiedostoa
Nykyaikainen sivusto koostuu monista tiedostoista, mutta kaksi niistä on tärkeintä: HTML- ja CSS-tiedosto. HTML-tiedosto määrittää sivun elementit ja rakenteen. CSS-tiedosto määrittää näiden elementtien ulkoasun.
Molemmat ovat pohjimmiltaan tyypillisiä tekstitiedostoja, jotka sisältävät erityisesti jäsenneltyä tekstiä. Et tarvitse mitään erityistä ohjelmaa niiden luomiseen tai säätämiseen: mikä tahansa ”yksinkertainen” tekstieditori käy. ”Yksinkertaisella” tarkoitamme tyypillistä muistilehtiötyyppistä sovellusta, emme LibreOfficen editoria tai Microsoft Words -ohjelmaa, joka voisi ”rikastaa” tekstiä millään tavalla.
Ensimmäinen askel on luoda työpöydällesi uusi kansio, jossa on kaksi tyhjää tekstitiedostoa. Nimeä toinen niistä ”index.html” ja toinen ”style.css”.
Määritä työtilasi
Suorita suosikkiselaimesi ja lataa siihen HTML-tiedosto joko valitsemalla ”Tiedosto -> Avaa” tai vetämällä ja pudottamalla tiedosto sen ikkunaan.
Avaa sekä HTML- että CSS-tiedosto suosikkimuistilehtiötyyppisessä tekstieditorissasi.
Mahdollisuus tarkastella kaikkia kolmea ikkunaa samanaikaisesti on kätevin tapa työskennellä. Jos sinulla ei ole kahta näyttöä niiden levittämiseksi, suosittelemme ikkunoiden järjestämistä alla olevan kuvan mukaisesti.
”Kiinnitä” selainikkunasi näytön toiselle puolelle niin, että se peittää puolet siitä (pystysuoraan)4 ja aseta kaksi muistioikkunaa toiselle puolelle, toinen toisensa alle.
Rakennuspalikoita
Kirjoita jotain muistilehtiöön HTML-tiedoston kanssa ja tallenna muutokset. Päivitä seuraavaksi selainikkuna painamalla F5. Näet heti kirjoittamasi tekstin näkyviin selainikkunaan.
Onnittelut ensimmäisen sivustosi luomisesta! Emmekä vitsaile, koska Internetin ensimmäiset sivustot eivät eronneet ulkonäöltään juurikaan juuri luomistasi. Tärkeintä oli silloin itse sisältö.
HTML:n avulla voit ”merkitä kukin sisältö” käyttämällä tiettyä ”koodisarjaa”. Jotkut tärkeimmistä ovat:
html: Tarkoittaa html-dokumenttia. Pitäisi olla jokaisen html-tiedoston alussa.body: Kaikki selaimessa näkemäsi sisältö sisältyy tähänbodytag. Se edustaa html-asiakirjan visuaalista puolta.p: Tekstikappaleimg: kuvata href: Linkit verkko-osoitteisiindiv: Asettaa ”laatikon” minkä tahansa sisällön ympärille, jonka voit sitten ”tyylitellä” CSS:llä.
Sisällön ”määrittelemiseksi” se on yleensä suljettava samalla koodilla, jossa on pieni ero alussa ja lopussa. Esimerkiksi tekstikappale määritellään seuraavasti:
<p>Standard Text Paragraph</p>
”
” tarkoittaa, että ”seuraava on kappale” ja ”
”, että ”kappale päättyy tähän”. Korvaamalla ”p”:llä ”div” molemmissa tapauksissa määrität laatikon, joka ympäröi sisällön sen sijaan, että ”merkitisit sen kappaleeksi”.
Huomaa, että poikkeuksia on: elementit, kuten kuvat (img) ja jakoviivat (hr), eivät vaadi ”sulkukoodia”.
Muuta ja päivitä
Korvaa kaikki HTML-tiedostosi seuraavalla:
<html> <body> <div id="header">HEADER</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </body> </html>
Päivitä selaimesi (F5), niin näet sanat HEADER, CONTENT ja FOOTER näkyvät peräkkäin. Loimme juuri kolme näkymätöntä, itsenäistä ”div”-laatikkoa. Jokainen niistä sisältää yhden sanan.
Jotta voisimme määrittää niiden ulkoasun CSS:n avulla, määritimme jokaiselle avainsanan, ”identiteetin” (koodissa ”id=name”), joka vastaa niiden sisältöä: ylä-, sisältö- ja alatunniste. Kaikilla verkkosivun elementeillä voi olla tällainen alias, joka on asetettu joko ”luokkaksi” tai ”tunnukseksi”. Luokat määrittelevät aliakset kohteille, jotka näkyvät useita kertoja samalla verkkosivulla, kuten kappaleet, linkit jne. Tunnukset määrittävät aliakset elementeille, jotka näkyvät vain kerran kullakin sivulla, kuten sivuston nimessä tai logossa.
Todellista sisältöä
Poista sana ”HEADER” div-koodien välistä – muuttamatta niiden rakennetta – ja kirjoita sen sijaan sivustollesi haluamasi nimi.
Tee sama SISÄLTÖ-kohdalle, mutta sen sijaan, että kirjoitat vain tekstiä, muista myös merkitä jokaisen kappaleen alku ja loppu, kuten näimme aiemmin. Korvaa ”SISÄLTÖ” kahdella tai kolmella tekstikappaleella.
Nyt on aika puhua myös linkeistä. Jos haluat muuntaa minkä tahansa tekstisi lauseen linkiksi, rakenna se seuraavasti:
<a href="ADDRESS">TEXT</a>
Voit kopioida ja liittää tämän ja korvata ”OSOITE” sanalla ”mihin haluat linkin osoittavan” ja ”TEKSTI” lauseella, joka näkyy sivustossasi. Linkimme alatunnisteessamme olevan lauseen verkkosivustoomme, jossa on seuraava:
<a href="https://www.maketecheasier.com">Make Tech Easier</a>
Korvaa lopuksi sana ”FOOTER” omalla nimelläsi, pienellä lauseella, joka osoittaa, kuka on suunnitellut tai omistanut sivuston tai mitä tahansa muuta haluat.
Tallenna muutokset ja päivitä selaimesi nähdäksesi ne siellä.
Sinulla on tyyli (.CSS)
Minkä tahansa verkkosivun ensimmäinen elementti on pää. Siitä löydämme yleensä koodin, joka määrittää sivuston identiteetin, sen nimen, luojan ja kielen sekä kaikki tekniikat – HTML:ää lukuun ottamatta. – käytetty siinä. Siellä on suurin osa linkeistä ulkoisiin JavaScript- ja CSS-tiedostoihin. Lisää yksi sivustollesi lisäämällä seuraava HTML-tiedostosi yläosaan heti html tag:
<head> </head>
Jotta voit muotoilla verkkosivun elementtejä CSS:llä, sinun on ladattava CSS-tiedosto HTML:n sisältä. Ja tämä tarkoittaa sen sisällyttämistä ”päähän”. Seuraava osoittaa, että HTML-sivu ”linkittää” ”tyylitaulukko”-tiedostoon, jonka tyyppi on ”text/css”. nimeltä ”style.css”:
<link rel="stylesheet" type="text/css" href="style.css">
Kopioi ja liitä koodimme sellaisena kuin näet sen pään ”sisään” eli ”” alle ja ”” yläpuolelle. Tallenna muutokset ja kiinnitä huomiosi CSS-tiedostoon. Kirjoita sinne seuraava:
body {} #header, #content, #footer {} #header, #footer {} #header {} #content {} #footer {} img {}
Todellinen sivusto
CSS tai Cascading Style Sheets ovat yksinkertaisesti näyttösääntöjoukkoja, jotka vastaavat Web-sivun tiettyjä elementtejä. CSS:n avulla voimme tyylillä ”missä” ja ”miten” kaikki näkyy verkkosivulla.
Edellisessä vaiheessa otimme käyttöön tyhjiä sääntöjä kaikille sivumme elementeille. Katsotaan nyt, kuinka voimme lisätä niihin parametreja, jotka määrittävät niiden ulkonäön.
Aloita rungosta, joka sisältää kaiken verkkosivustollasi. Muokkaa sitä seuraavasti:
body { width: 100%; position: relative; margin: 0; padding: 0; }
Yllä olevat säännöt sanovat, että haluamme sivustomme peittävän selainikkunan koko leveyden (leveys: 100 %), että emme halua sen olevan minkään etäisyyden päässä selainikkunan reunoista (marginaali: 0), emmekä haluat sen ympärille tyhjän tilan (täyte: 0).
Kaikki elementin säännöt tulee sulkea hakasulkeisiin ja jokaisen säännön lopussa tulee olla ”;” kuten seuraavat:
#Element_ID { RULE 1; RULE 2; RULE 3; }
Jatka päivittämällä ”#header, #content, #footer” CSS:si seuraavaan:
#header, #content, #footer { float: left; position: relative; }
Tällä sanot, että kaikkien kolmen elementin aseman tulee noudattaa joitain yhteisiä sääntöjä: jokaisen tulee olla ”suhteellinen” edelliseen ja ”noudatettava” sitä (float: left). Riippumatta koosta, muodosta, ulkonäöstä tai mistä tahansa muusta tekijästä, jokainen niistä ”työntää” seuraavaa elementtiä, eivätkä ne koskaan mene päällekkäin.
Päivitä #header, #footer seuraavilla, jotta verkkosivusi näyttää enemmän todelliselta sivustolta:
#header, #footer { width: 100%; height: 100px; background: rgba(0,0,0,0.9); color: rgba(255,255,255,0.9); text-align: center; font-size: 12px; }
Yllä oleva määrittelee sen, että haluamme sekä ylä- että alatunnisteen olevan 100 % leveä, 100 pikseliä korkea ja että niissä näkyvä teksti on 3em kooltaan ja keskellä.
Tausta- ja värisäännöt määrittävät vastaavasti, minkä värin koko ylä- ja alatunniste ”div box” tulee olemaan ja minkä värin niissä mahdollisesti oleva teksti on. “RGBA” asettaa värin punaisen – vihreän – sinisen värisekoitusstandardin perusteella. Jokaisen värin arvo voi olla 0–255, ja eri punaisten, vihreiden ja sinisten arvojen yhdistelmät mahdollistavat minkä tahansa värin näyttämisen. Viimeinen numero vastaa läpinäkyvyyttä. Joten RGBA(255,0,0,0,5) antaisi meille läpikuultavan punaisen, kun taas RGBA(50,50,255,1) antaisi kirkkaan ja ”kiinteän” sinisen.
Viimeistele keskittymällä sivuston perussisältöön. Määrittele sen ulkonäkö seuraavasti:
#content { width: 80%; background: rgba(255,255,255,0.9); color: rgba(0,0,0,0.9); margin: 0 10%; }
Tallenna kaikki muutokset uudelleen ja päivitä selainikkuna nähdäksesi ne.
Kuvan muotoilu
Jos haluat lisätä kuvia sivustollesi, sinun on palattava HTML-tiedostoon. Kirjoita sinne sisällön ”sisällä”, mutta ennen ensimmäistä kappaletta:
<img src="/PATH/FILE.JPG" alt="TEXT">
Missä ”PATH” ja ”FILE.JPG” ovat minkä tahansa verkossa tai paikallisesti saatavilla olevan kuvan ”sijainti” ja tiedostonimi, ja ”TEKSTI” on kuvaus siitä, mitä se edustaa esteettömyystarkoituksiin.
Jos yrität tallentaa ja tarkistaa muutokset tämän lisäyksen jälkeen, huomaat, että sivustosi on epämuodostunut. Ongelma korjataan, kun luot CSS-säännöt kuvien näyttämiselle verkkosivustollasi.
Palaa CSS-tiedostoon ja ilmoita, kuinka haluat kaikkien kuvien (img) tasattavan vasemmalle muiden elementtien kulkua seuraten (float: vasen ja sijainti: suhteellinen).
Jotta et ylitä sivun rajoja, määritä, kuinka haluat niiden leveyden olevan itse sivun enimmäisleveys (leveys: 100 %). Jotta kuvat eivät kosketa tekstiäsi, lisää pystymarginaali ylä- ja alaosaan. Tuloksen pitäisi näyttää tältä:
img { float: left; position: relative; width: 100%; margin: 5px 0; padding: 0; }
Viimeistele lisäämällä toinen kuva, tällä kertaa vasemmalle tai oikealle tasattuna. Kuten ennenkin, sinun tulee ensin palata HTML-koodiin ja liittää sinne linkki kuvaasi, kuten näimme aiemmin. Erona on, että sinun on lisättävä elementtiin ”luokka”, tunniste. Sitten määrität CSS-näyttösäännöt sille ja muille elementeille, joihin sama luokka on ”liitetty”.
Nimesimme luokkamme ”alignright”, koska haluamme, että kaikki objektit, joihin se on liitetty, näkyvät sivun oikealla puolella.
Yritä luoda koodi itse. Lisää an .alignright {} luokka ”style.css”-tiedostossasi ja luo sitten säännöt, joiden pitäisi tyylillä se. CSS-koodin tulee määrittää, että haluamme elementtien kelluvan sivun oikealle puolelle ja olevan 46 % leveä (leveys: 46 %). Emme halua kuvien koskettavan tekstiä, joten meidän tulee myös lisätä niiden ympärille 2 %:n väli, jaettuna 1 %:n marginaaliksi (etäisyys mistä tahansa muusta elementistä) ja 1 %:lla täyte (jokin ”ylimääräinen tyhjä tila elementin ympärille” ”).
Siksi sääntöjemme tulisi määrittää, että kaikki kuvat, joissa on a .alignright liitteenä oleva luokka vie 46 % sivun leveydestä, plus 1 % marginaalin kummallekin puolelle sekä 1 % täyteaineen kummallekin puolelle. Se kaikki lisää jopa 50 % – tasan puolet sivun leveydestä. Tuloksen pitäisi näyttää jokseenkin tältä:
img.alignright { float: right; width: 46%; margin: 1%; padding: 1%; }
Seuraava sivu
Ensimmäinen verkkosivusi on valmis ja täysin toiminnassa. Oppimalla lisää sekä HTML:stä että CSS:stä voit rikastuttaa sen sisältöä, lisätä uusia elementtejä ja parantaa sen ulkonäköä. Yritä seuraavaksi kopioida ja nimetä HTML-tiedosto uudelleen, muokata sen sisältöä ja linkittää jokainen uusi sivu muihin.
Ei kuulosta liian vaikealta, vai mitä? Tervetuloa verkkokehitykseen: kopioimalla, muokkaamalla ja linkittämällä eri sivuja linkkien kautta, olet luonut ensimmäisen täydellisen, ”kunnollisen” monisivuisen sivustosi!
Kuvan luotto: Pluks pennut, Pluks pennut, IMG_20171124_142629
Tue työtämme ❤️
Jos pidit tästä artikkelista, harkitse tipin antamista, jotta voimme jatkaa laadukkaan sisällön julkaisemista.
