Kokonaisen Verkkosivuston Rakentaminen HTML:llä
Pyyhkäise näyttääksesi valikon
Olemme nyt käyneet läpi HTML:n ydinkäsitteet ja olemme valmiita rakentamaan kokonaisen yhden sivun portfolioverkkosivun alusta alkaen.
Voit kokeilla rakentaa sen itse tai seurata tätä vaiheittaista opasta, jossa on koodi jokaiseen osaan.
Vaiheittainen opas
1. Verkkosivun rakennesuunnitelma
Portfolio-sivumme sisältää:
- Ylätunniste: sivuston otsikko ja navigointilinkit;
- Tietoa: lyhyt esittely sivun omistajasta;
- Portfolio: projektit kuvineen, otsikoineen ja lyhyine kuvauksineen;
- Yhteystiedot: lomake vierailijoille yhteydenottoa varten;
- Alatunniste: tekijänoikeus sekä yhteys-/sosiaalisen median linkit.
2. Rakenna sisältö semanttisella HTML:llä
Luo uusi index.html-tiedosto ja lisää perusrakenne käyttäen <!DOCTYPE html>, <html>, <head> ja <body>.
index.html
3. Ylätunnisteosio
Lisää <header>, jossa on omistajan nimi, sekä <nav>, joka sisältää linkit About-, Portfolio- ja Contact-osioihin.
index.html
4. Tietoa-osio
Luo <section id="about">, jossa on otsikko ja lyhyt kappale omistajasta.
index.html
5. Portfolio-osio
Lisää <section id="portfolio">, joka luettelee projektit kuvien, otsikoiden ja lyhyiden kuvausten kanssa.
index.html
6. Yhteystieto-osio
Luo <section id="contact">, jossa on yksinkertainen yhteydenottolomake, joka kerää nimen, sähköpostin ja viestin.
index.html
7. Alatunnisteosio
Viimeistele sivu käyttämällä <footer>-elementtiä, joka sisältää tekijänoikeustekstin sekä linkit sosiaaliseen mediaan, puhelimeen ja sähköpostiin.
index.html
Bonus
Sivun ulkoasun parantamiseksi voidaan liittää CSS-tiedosto ja muotoilla HTML-koodia. CSS hallitsee värejä, välistyksiä, fontteja ja asettelua, mikä auttaa samaa rakennetta näyttämään huomattavasti viimeistellymmältä.
Vertaa tässä vaiheessa, miltä sivu näyttää pelkällä HTML:llä ja miten se muuttuu, kun perus CSS-tyylit lisätään.
index.html
index.css
Tässä on linkki valmiiseen verkkosivustoon, joka rakennettiin tässä luvussa: Julian verkkosivusto
Mitä olet rakentanut
Olet luonut kokonaisen verkkosivun HTML:llä, jossa on rakenne, sisältö ja peruselementit.
Mitä puuttuu
Sivusi toimii, mutta näyttää hyvin yksinkertaiselta. HTML määrittelee rakenteen, ei ulkoasua.
Mitä seuraavaksi
Sivun tyylittelyyn tarvitset CSS:ää lisätäksesi värejä, asettelua ja visuaalista viimeistelyä.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
