Innhold

• Å trå
• Del 1 av 2: Lære det grunnleggende om HTML
• Del 2 av 2: Læring avansert HTML
• Tips
• Advarsler
• Nødvendigheter

HTML er forkortelsen for Hyper Text Markup Language, det er koden eller Språk som brukes til å lage nettsteder. Det kan se komplisert ut hvis du aldri har programmert før, men å prøve alt du trenger er et enkelt tekstbehandlingsprogram og en nettleser. Du kjenner kanskje igjen noen HTML fra fora, online profiler eller wikiHow-artikler. HTML er en nyttig ressurs for alle som bruker Internett, og det kan ta kortere tid å lære HTML enn man kunne forvente.

Å trå

Del 1 av 2: Lære det grunnleggende om HTML

1. Åpne et HTML-dokument. De fleste tekstbehandlingsprogrammer, inkludert Notisblokk eller Word for Windows og Text Editor for Mac, kan brukes til å lage HTML-dokumenter. Åpne et nytt dokument og velg Fil → Lagre som fra toppmenyen for å lagre dokumentet som en webside, eller endre filtypen fra ".doc", ".rtf" eller noe annet til ".html" eller ".htm ".
   • Du kan nå se en advarsel om at dokumentet ditt blir endret fra RTF (Rich Text Format) til "ren tekst", og at noen formateringsalternativer og bilder ikke lagres riktig. Du kan ignorere denne advarselen; HTML-dokumenter bruker ikke disse alternativene.
   • .html- og .htm-filer er de samme. Det fungerer begge to.
2. Vis dokumentet ditt med en nettleser. Lagre det tomme dokumentet, lukk det, og dobbeltklikk deretter dokumentet på stedet der det ble lagret for å åpne det igjen. Dokumentet ditt skal nå åpnes av nettleseren din som en tom webside. Hvis det ikke fungerer, drar du filikonet til adressefeltet i nettleseren din. Senere, hvis du redigerer HTML-dokumentet ved å følge trinnene i denne artikkelen, vil du fortsette å gå tilbake til nettleseren for å sjekke hvordan endringene i koden ser ut.
   • Merk: nettsiden din er ikke online ennå. Siden er ikke tilgjengelig for andre, og du trenger ikke en fungerende internettforbindelse for å teste den. Du bruker nettleseren din til å "lese" HTML-dokumentet som om det var et nettsted.
3. Forstå hva "tags" er. Tagger er ikke synlige på den endelige nettsiden, slik vanlig tekst kan. Taggene forteller nettleseren din hvordan du skal vise siden og innholdet på siden. Startetiketten inneholder instruksjoner. For eksempel kan den be nettleseren om å vise teksten i fet skrift. Sluttkoden er nødvendig for å fortelle nettleseren hvor instruksjonene gjelder: i dette eksemplet er all tekst mellom start- og sluttkoden fet. Sluttmerker plasseres også i parentes, men en skråstrek følger den første parentesen.
   • Skriv startetiketter i parentes: dette er startdagen>
   • Skriv sluttkoder i parentes, men sett en skråstrek etter den første parentesen: /dette er den avsluttende koden>)
   • Les senere i artikkelen hvordan du skriver funksjonelle koder. I dette trinnet trenger du bare å huske hvilken vei du skal skrive tagger:> og />.
   • I andre HTML-kurs blir koder også referert til som "elementer" og teksten mellom åpning og lukking er også referert til som "elementinnhold".
4. Skriv din første html> -tag. Hvert HTML-dokument starter med et html>tag og slutter med en / html>stikkord. Dette forteller nettleseren at alt mellom disse kodene er skrevet i HTML. Legg til disse kodene i dokumentet:
   • Skrive html> øverst i dokumentet.
   • Trykk på Enter eller returner flere ganger for å gi deg litt plass, og skriv / html>
   • Husk deg alt i denne artikkelen mellom disse to kodene.
5. Gjør hodet> en del av dokumentet. Mellom kodene html> og / html> skriver du en hodet>start tag og a / hode>-end tag. Lag litt mellomrom igjen mellom disse kodene. Alt skrevet mellom disse kodene vil ikke være synlig på selve websiden. Prøv følgende trinn og se om du kan se hvor informasjonen vises:
   • Skriv mellom hodet> og / hodet> kodene: tittel> og / tittel>
   • Mellom kodene tittel> og / tittel> du skriver: Hvordan lære HTML (med bilder) - wikiHow.
   • Lagre dokumentet og åpne det i en nettleser (eller lagre dokumentet og oppdater siden i nettleseren hvis siden fortsatt var åpen). Ser du hva du nettopp skrev øverst på siden, over adresselinjen?
6. Opprett en kropp> seksjon. Alt annet i dette nybegynnerdokumentet er plassert i brødtekst> -delen, og det vises på websiden. Etter taggen / hodet>, men foran taggen / html> du skriver kropp> og / kropp>. Alt vi diskuterer videre i denne artikkelen, plasserer vi mellom kroppskodene. Du bør nå ha et dokument som ser slik ut (uten kuler):
   • html>
   • hodet>
   • tittel> lær HTML - wikiHow / title>
   • / hode>
   • kropp>
   • / kropp>
   • / html>
7. Legg til tekst i forskjellige stiler. Nå er det på tide at du begynner å skrive noe som faktisk vil være synlig i nettleseren! Alt du skriver i kroppskodene vil være synlig i nettleseren etter at du har lagret endringene og oppdatert siden i nettleseren. Skrive ikke noe med skiltene og >fordi nettleseren din tolker det som HTML-instruksjon i stedet for ren tekst. Skriv for eksempel Hei Verden! (Engelsk for "Hello world!", Dette er den globale standardteksten som det første eksemplet i et hvilket som helst programmeringskurs i et bestemt programmeringsspråk) eller noe annet, og sett følgende tagger før og etter teksten og se hva som skjer:
   • em> Hei verden! / em> ser ut som kursiv tekst: Hei Verden!
   • sterk> Hei verden! / sterk> ser ut som fet skrift: Hei Verden!
   • s> Hei verden! / s> ser ut som gjennomstrekt tekst: Hei Verden!
   • sup> Hei verden! / sup> ser ut som overskrift:
   • sub> Hei verden! / sub> ser ut som bildetekst: _{Hei Verden!}
   • Prøv ut kombinasjoner: Hvordan ser em> sterk> Hei verden! / sterk> / em> kom deg ut?
8. Del teksten i avsnitt. Hvis du legger forskjellige tekstlinjer i dokumentet ditt, vil du se at alle linjene er plassert etter hverandre. Du må programmere nye linjer og blanke linjer selv:
   • p> Dette er et eget avsnitt. / p>
   • Denne setningen er på første linje og denne setningen på den neste.
     Dette er den første koden vi kommer over som ikke trenger en sluttkode! Vi kaller en slik tag en tom tag.
   • Lag overskrifter for å gjøre navnene på seksjonene tydelige:
     h1> topptekst / h1>: den største mulige overskriften
     h2> topptekst / h2> (2-nivå topptekst)
     h3> topptekst / h3> (toppteksten på 3 nivåer)
     h4> topptekst / h4> (4-nivå topptekst)
     h5> topptekst / h5> (den minste mulige overskriften)
9. Lær hvordan du lager lister. Det er flere måter å lage lister på en webside. Prøv følgende metoder for å finne ut hva du liker best. Merk at ett par koder er plassert rundt hele listen (for eksempel ul> og / ul> koder for uordnede lister), og at et annet par koder er plassert rundt hvert element i listen, for eksempel li> og / li> .
   • Bruk følgende kode for å lage punktlister:
     ul> li> Ett element / li> li> Et annet element / li> li> Et annet element / li> / ul>
   • Eller denne koden for å lage nummererte lister:
     ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
   • Eller denne koden for å lage en såkalt definisjonsliste:
     dl> dt> Kaffe / dt> dd> - Varm drikke / dd> dt> Melk / dt> dd> - Kald drikke / dd> / dl>
10. Gjør siden din mer attraktiv med nye linjer, horisontale linjer og bilder. Nå er det på tide å begynne å legge til andre ting på siden din. Prøv følgende tagger (bildet må legges ut på nettet slik at du kan bruke en lenke til bildet):
    • Sett inn en linje: br> eller hr>
    • Sett inn bilder: img src = "the_url_of_your_image">
11. Sett inn lenker til andre steder på siden. Du kan også bruke denne koden til å lenke til andre sider og nettsteder, men siden du ikke har et nettsted enda, vil vi fokusere på "ankere", som er spesifikke steder på siden du kan lenke til:
    • Først oppretter du et anker med a> -koden på punktet på siden du vil koble til. Gi ankeret ditt et klart navn som er lett å huske:
      
      a name = "Tips"> Dette er teksten du ankeret rundt./a>
    • Bruk taggen href> for å koble til ankeret ditt eller til en annen webside:
      
      a href = "url til nettsiden eller navnet på ankeret på denne siden"> Skriv teksten eller bildet som vises som lenke her. / en>
    • For å koble til et anker på en annen side, legg til tegnet # etter url, etterfulgt av navnet på ankeret ditt. For eksempel http://www.wikihow.com/HTML-leren#Tips tar deg direkte til "Tips" -delen på denne siden.

Del 2 av 2: Læring avansert HTML

1. Lær om attributter. Attributter plasseres i koden og brukes til å gjøre ytterligere justeringer av "elementinnholdet" mellom start- og sluttkoden. De står aldri alene. De er skrevet på følgende måte: navn = "verdi". Navn representerer navnet på attributtet (for eksempel "farge") og verdi beskriver denne spesielle saken (f.eks. "rød").
   • Hvis du har sett nøye på i forrige del av denne artikkelen, har du allerede møtt attributter. Koden img> bruker attributtet src, bruker et anker attributtet Navn og lenker bruker attributtet href. Du kan fortelle at de er alle størrelser ___='___’ å følge.
2. Eksperimenter med HTML-tabeller. For å lage en tabell eller graf trenger du flere koder:
   • Start med tabellkodene ("tabellen" på engelsk) rundt hele bordet:tabell> / tabell>
   • Plasser tagger rundt innholdet på hver rad: tr>
   • Plasser kolonneoverskrifter på første rad: th>
   • Plasser celler i påfølgende rad: td>
   • Dette er et eksempel på hvordan alt dette kommer sammen:
     
     tabell> tr> th> Kolonne 1: Måned / th> th> Kolonne 2: Penger spart / th> / tr> tr> td> januar / td> td> € 100 / td> / tr> / tabell>
3. Lær de andre kodene som brukes i hodet. Du har allerede lært taggehodet>, som du plasserer i begynnelsen av hvert dokument. I tillegg til tittelen> taggen, kan det være andre tagger i hodeseksjonen:
   • Metakoder brukes til å lage metadata om en webside. Disse dataene brukes av søkemotorer til å kategorisere nettsider. For å gjøre siden din synlig for søkemotorer, kan du plassere en eller flere metakoder (sluttkoder er ikke nødvendig). Hver tag må inneholde nøyaktig ett navneattributt og innholdsattributt, for eksempel: metanavn = "beskrivelse" innhold = "legg her beskrivelse ">; eller meta name = "søkeord" content = "skriv en liste med nøkkelord her, alltid atskilt med komma">
   • link> tags brukes til å koble andre filer til siden. Vanligvis brukt til å knytte CSS-stilark til HTML-sider, er disse sidene konstruert med en annen type kode og brukes til å bestemme den generelle stilen til en side.
   • script> tags brukes til å knytte javascript-filer til HTML-siden. Javascript lar siden endres hvis brukeren gjør noe på siden.
4. Spill med HTML fra eksisterende sider. Å vise kildekoden til nettsider er en fin måte å utvide HTML-kunnskapen din. Høyreklikk på siden og velg "Vis kilde", "Vis sidekilde" eller lignende. Finn ut hva en bestemt tag du ikke kjenner, eller søk på nettet etter svaret.
   • Du kan ikke redigere andres nettsteder, men du kan kopiere HTML-koden til ditt eget dokument og leke med den for å se hva forskjellige justeringer gjør. Merk: fordi mange nettsteder bruker CSS-stilark, vil du kanskje ikke kunne se mange farger eller andre stiler.
5. Lær om HTML ved å lese mer inngående artikler. Det er mange ressurser på internett for å mestre flere HTML-koder som W3Schools eller Codecademy. Det er også mange HTML-bøker tilgjengelig, men sørg for at du bruker en nylig utgave ettersom HTML-standarden endres fra tid til annen. Når du har mestret HTML til et godt nivå, kan du gå til CSS for mer kontroll over utformingen og stilen til websiden din. Etter det er neste trinn vanligvis javascript.

Tips

• Det kan være nyttig å finne en enkel webside på Internett og deretter begynne å rote med koden. Prøv å flytte litt tekst, endre skrift, endre bilder, hva du vil!
• Du kan bruke en notatbok for å skrive ned koden, slik at du har noe å falle tilbake på hvis du ikke husker det et øyeblikk. Du kan også skrive ut denne siden og oppbevare den som referanse.
• XML og RSS brukes i økende grad på nettsteder i våre dager. Koden kan se utilgjengelig for det menneskelige øye, spesielt når den vises i kildekoden, men funksjonaliteten kan være nyttig.
• Merkelappene som brukes i HTML, er ikke store og små bokstaver, men standard er å bruke små bokstaver (som vi gjør i denne artikkelen). Små bokstaver for kodene anbefales på det sterkeste, også for kompatibilitet med XHTML.

Advarsler

• Noen koder brukes ikke lenger og har blitt erstattet av andre koder som gjør det samme, men som ofte har flere alternativer.
• Hvis du vil være sikker på at siden din overholder HTML-standarden, kan du gå til W3-nettstedet for å teste koden din mot gjeldende standard. Mange tagger er blitt foreldede og har blitt erstattet av tags som fungerer bedre i moderne nettlesere.

Nødvendigheter

• Et tekstbehandlingsprogram, for eksempel Notisblokk (Windows) eller Teksteditor (Mac).
• et ark papir eller notatbok (valgfri)
• Et program spesielt designet for å skrive HTML, for eksempel Notepad ++ for Windows eller TextWrangler for Mac (valgfri)