Læring af HTML

Indhold

At træde
Del 1 af 2: Lær det grundlæggende i HTML
Del 2 af 2: At lære avanceret HTML
Tips
Advarsler
Nødvendigheder

HTML er forkortelsen for Hyper Text Markup Language, det er koden eller Sprog som bruges til at oprette websteder. Det kan se kompliceret ud, hvis du aldrig har programmeret før, men at prøve det, alt hvad du behøver, er et simpelt tekstbehandlingsprogram og en internetbrowser. Du genkender muligvis noget HTML fra fora, online profiler eller wikiHow-artikler. HTML er en nyttig ressource for alle, der bruger internettet, og det kan tage kortere tid at lære HTML, end man kunne forvente.

At træde

Del 1 af 2: Lær det grundlæggende i HTML

Åbn et HTML-dokument. De fleste tekstbehandlingsprogrammer, inklusive Notepad eller Word til Windows og Text Editor til Mac, kan bruges til at oprette HTML-dokumenter. Åbn et nyt dokument, og vælg Filer → Gem som fra topmenuen for at gemme dit dokument som en webside, eller skift filtypen fra ".doc", ".rtf" eller andet til ".html" eller ".htm ".
- Du kan muligvis nu se en advarsel om, at dit dokument ændres fra Rich Text Format (RTF) til "almindelig tekst" -format, og at nogle formateringsmuligheder og billeder ikke gemmes korrekt. Du kan ignorere denne advarsel; HTML-dokumenter bruger ikke disse indstillinger.
- .html- og .htm-filer er de samme. Det fungerer begge.
Se dit dokument med en browser. Gem dit tomme dokument, luk det, og dobbeltklik derefter på dokumentet på det sted, hvor det blev gemt, for at åbne det igen. Dit dokument skal nu åbnes af din browser som en tom webside. Hvis det ikke virker, skal du trække filens ikon til adresselinjen i din browser. Senere, hvis du redigerer dit HTML-dokument ved at følge trinene i denne artikel, fortsætter du med at gå tilbage til browseren for at kontrollere, hvordan ændringerne i koden ser ud.
- Bemærk: din webside er ikke online endnu. Siden er ikke tilgængelig for andre, og du har ikke brug for en fungerende internetforbindelse for at teste den. Du bruger bare din browser til at "læse" HTML-dokumentet, som om det var et websted.
Forstå hvad "tags" er. Mærker er ikke synlige på den endelige webside, som normal tekst kan. Mærkerne fortæller din browser, hvordan du viser siden og indholdet på siden. Startmærket indeholder instruktioner. For eksempel kan den bede browseren om at vise teksten med fed skrift. Slutkoden er nødvendig for at fortælle browseren, hvor instruktionerne gælder: i dette eksempel er al tekst mellem start- og slutkode med fed skrift. Slutkoder placeres også inden for parenteser, men en skråstreg følger den første parentes.
- Skriv startkoder i parentes: dette er startdagen>
- Skriv slutkoder i parentes, men sæt en skråstreg efter den første parentes: /dette er det afsluttende mærke>)
- Læs senere i artiklen, hvordan du skriver funktionelle tags. I dette trin skal du bare huske, hvilken vej du skal skrive tags:> og />.
- I andre HTML-kurser kaldes tags også som "elementer", og teksten mellem åbning og lukning af tags kaldes også "elementindhold".
Skriv dit første html> -tag. Hvert HTML-dokument starter med en html>tag og slutter med et / html>tag. Dette fortæller browseren, at alt mellem disse tags er skrevet i HTML. Føj disse tags til dit dokument:
- Skrive html> øverst i dit dokument.
- Hit enter eller returner flere gange for at give dig selv plads, og skriv derefter / html>
- Husker dig alt i denne artikel mellem disse to tags.
Lav hovedet> del af dit dokument. Mellem tags html> og / html> skriver du en hoved>start tag og en / hoved>-end tag. Lav noget mellemrum igen mellem disse tags. Alt der er skrevet mellem disse tags vil ikke være synligt på selve websiden. Prøv følgende trin og se om du kan se, hvor oplysningerne vises:
- Skriv mellem hovedet> og / hovedet> tags: titel> og / titel>
- Mellem tags titel> og / title> du skriver: Sådan lærer du HTML (med billeder) - wikiHow.
- Gem dokumentet, og åbn det i en browser (eller gem dokumentet, og opdater siden i browseren, hvis siden stadig var åben). Kan du se, hvad du lige har skrevet øverst på siden over adresselinjen?
Opret en body> sektion. Alt andet i dette begynderdokument placeres i afsnittet brødtekst> og vises på websiden. Efter tag / head>, men foran tag / html> du skriver krop> og / krop>. Alt, hvad vi diskuterer yderligere i denne artikel, placerer vi mellem body tags. Du skal nu have et dokument, der ser sådan ud (uden punkttegn):
- html>
- hoved>
- titel> lære HTML - wikiHow / title>
- / hoved>
- krop>
- / krop>
- / html>
Tilføj tekst i forskellige stilarter. Nu er det på tide, at du begynder at skrive noget, der rent faktisk vil være synligt i browseren! Alt, hvad du skriver i body tags, vil være synlig i browseren, når du har gemt ændringerne og opdateret siden i browseren. Skrive ikke noget med skiltene og >fordi din browser fortolker det som HTML-instruktion i stedet for almindelig tekst. Skriv for eksempel Hej Verden! (Engelsk til "Hello world!", Dette er den globale standardtekst som det første eksempel i ethvert programmeringskursus i et bestemt programmeringssprog) eller noget andet, og sæt følgende tags før og efter teksten og se hvad der sker:
- em> Hej verden! / em> ligner kursiv tekst: Hej Verden!
- stærk> Hej verden! / stærk> ligner fed tekst: Hej Verden!
- s> Hej verden! / s> ligner gennemstreget tekst: ~~Hej Verden!~~
- sup> Hej verden! / sup> ligner overskrift:
- sub> Hej verden! / sub> ligner billedtekst: _{Hej Verden!}
- Prøv kombinationer: Hvordan ser em> stærk> Hej verden! / stærk> / em> Gå ud?
Opdel din tekst i afsnit. Hvis du lægger forskellige tekstlinjer i dit dokument, vil du se, at alle linjer placeres efter hinanden. Du skal selv programmere nye linjer og tomme linjer:
- p> Dette er et separat afsnit. / p>
- Denne sætning er på første linje og denne sætning i den næste.
  Dette er det første mærke, vi støder på, der ikke har brug for et slutmærke! Vi kalder en sådan tag en tom tag.
- Opret overskrifter for at gøre navnene på sektionerne klare:
  h1> header / h1>: den største mulige header
  h2> header / h2> (header på 2 niveauer)
  h3> header / h3> (3 niveau header)
  h4> header / h4> (4 niveau header)
  h5> header / h5> (den mindste mulige header)
Lær hvordan man laver lister. Der er flere måder at oprette lister på en webside. Prøv følgende metoder for at finde ud af, hvad du bedst kan lide. Bemærk, at et par tags er placeret rundt om i hele listen (f.eks. Ul> og / ul> tags for ikke-ordnede lister), og at et andet par tags er placeret omkring hvert element på listen, såsom li> og / li> .
- Brug følgende kode til at oprette punktlister:
  ul> li> Én vare / li> li> En anden vare / li> li> En anden vare / li> / ul>
- Eller denne kode for at oprette nummererede lister:
  ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
- Eller denne kode for at oprette en såkaldt definitionsliste:
  dl> dt> Kaffe / dt> dd> - Varm drikke / dd> dt> Mælk / dt> dd> - Kold drikke / dd> / dl>
Gør din side mere attraktiv med nye linjer, vandrette linjer og billeder. Nu er det tid til at begynde at tilføje andre ting til din side. Prøv følgende tags (billedet skal placeres online, så du kan bruge et link til billedet):
- Indsæt en linje: br> eller hr>
- Indsæt billeder: img src = "the_url_of_your_image">
Indsæt links til andre steder på siden. Du kan også bruge denne kode til at linke til andre sider og websteder, men da du endnu ikke har et websted, fokuserer vi på "ankre", som er specifikke steder på siden, som du kan linke til:
- Opret først et anker med a> -koden på det punkt på den side, du vil linke til. Giv dit anker et klart navn, der er let at huske:
  
  a name = "Tips"> Dette er teksten, hvor du placerer dit anker. / en>
- Brug tag href> til at linke til dit anker eller til en anden webside:
  
  a href = "url på websiden eller navnet på ankeret på denne side"> Skriv teksten eller billedet vist som link her. / en>
- For at linke til et anker på en anden side skal du tilføje # tegnet efter url'en efterfulgt af navnet på dit anker. For eksempel fører http://www.wikihow.com/HTML-leren#Tips dig direkte til afsnittet "Tips" på denne side.

Del 2 af 2: At lære avanceret HTML

Lær om attributter. Attributter placeres i koden og bruges til at foretage yderligere justeringer af "elementindholdet" mellem start- og slutkode. De står aldrig alene. De er skrevet på følgende måde: navn = "værdi". navn repræsenterer navnet på attributten (f.eks. "farve") og værdi beskriver denne særlige sag (f.eks. "rød").
- Hvis du har set nøje i den forrige del af denne artikel, har du allerede stødt på attributter. Tagget img> bruger attributten src, bruger et anker attributten navn og links bruger attributten href. Du kan fortælle, at de er alle i størrelse ___='___’ at følge.
Eksperimenter med HTML-tabeller. For at lave en tabel eller graf har du brug for flere tags:
- Start med bordkoder ("tabel" på engelsk) omkring hele bordet:tabel> / tabel>
- Placer tags omkring indholdet af hver række: tr>
- Placer kolonneoverskrifter i første række: th>
- Placer celler i fortløbende rækker: td>
- Dette er et eksempel på, hvordan alt dette kommer sammen:
  
  tabel> tr> th> Kolonne 1: Måned / th> th> Kolonne 2: Penge gemt / th> / tr> tr> td> januar / td> td> € 100 / td> / tr> / tabel>
Lær de andre tags, der bruges i hovedafsnittet. Du har allerede lært taghovedet>, som du placerer i begyndelsen af hvert dokument. Ud over titlen> tag kan der være andre tags i hovedafsnittet:
- Metatags bruges til at oprette metadata om en webside. Disse data bruges af søgemaskiner til at kategorisere websider. For at gøre din side synlig for søgemaskiner kan du placere et eller flere metatags (slutkoder er ikke nødvendige), hvert tag skal indeholde nøjagtigt en navneattribut og indholdsattribut, for eksempel: meta navn = "beskrivelse" indhold = "sæt her beskrivelse ">; eller meta name = "nøgleord" content = "skriv en liste med nøgleord her, altid adskilt med et komma">
- link> tags bruges til at linke andre filer til siden. Disse sider bruges typisk til at knytte CSS-stilark til HTML-sider, og disse sider er konstrueret med en anden type kode og bruges til at bestemme den samlede stil på en side.
- script> tags bruges til at knytte javascript-filer til HTML-siden. Javascript tillader siden at ændre sig, hvis brugeren gør noget på siden.
Spil med HTML fra eksisterende sider. Visning af kildekoden på websider er en fantastisk måde at udvide din HTML-viden på. Højreklik på siden og vælg "Vis kilde", "Vis sidekilde" eller lignende. Find ud af, hvad et bestemt tag, du ikke kender, gør, eller søg online efter svaret.
- Du kan ikke redigere andres websteder, men du kan kopiere HTML-koden til dit eget dokument og lege med den for at se, hvad forskellige justeringer gør. Bemærk: Da mange websteder bruger CSS-stilark, kan du muligvis ikke se mange farver eller andre stilarter.
Lær om HTML ved at læse mere dybtgående artikler. Der er mange ressourcer på internettet til at mestre flere HTML-tags som W3Schools eller Codecademy. Der er også mange HTML-bøger til rådighed, men sørg for at du bruger en nylig udgave, når HTML-standarden ændres fra tid til anden. Når du har mestret HTML til et godt niveau, kan du henvende dig til CSS for at få mere kontrol over designet og stilen på din webside. Derefter er det næste trin normalt javascript.

Tips

Det kan være nyttigt at finde en simpel webside på Internettet og derefter begynde at rode med koden. Prøv at flytte lidt tekst, ændre skrifttypen, ændre billederne, hvad du vil!
Du kan bruge en notesbog til at skrive koden ned, så du har noget at falde tilbage på, hvis du ikke kan huske det et øjeblik. Du kan også udskrive denne side og opbevare den som reference.
XML og RSS bruges i stigende grad på websteder i dag. Koden kan se utilgængelig ud for det menneskelige øje, især når den ses i kildekoden, men funktionaliteten kan være nyttig.
De tags, der bruges inden for HTML, er ikke store og små bogstaver, men standard er at bruge små bogstaver (som vi gør i denne artikel). Små bogstaver til tags anbefales stærkt, også for kompatibilitet med XHTML.

Advarsler

Nogle tags bruges ikke længere og er blevet erstattet af andre tags, der gør det samme, men har ofte flere muligheder.
Hvis du vil sikre dig, at din side overholder HTML-standarden, skal du gå til W3-webstedet for at teste din kode mod den nuværende standard. Mange tags er blevet forældede og er blevet erstattet af tags, der fungerer bedre i moderne browsere.

Nødvendigheder

Et tekstbehandlingsprogram, såsom Notesblok (Windows) eller Teksteditor (Mac).
et ark papir eller notesbog (valgfri)
Et program specielt designet til at skrive HTML, såsom Notepad ++ til Windows eller TextWrangler til Mac (valgfri)