Indhold

• Trin
• Del 1 af 2: Lær HTML Basics
• Del 2 af 2: Avanceret HTML
• Tips
• Advarsler
• Hvad har du brug for

HTML er en forkortelse for engelsk Hyper Text Markup Language (hypertekstmarkeringssprog). Dette er koden eller sproget, hvor den grundlæggende markering af websteder oprettes. Læring kan virke skræmmende, hvis du aldrig har programmeret, men i virkeligheden er alt, hvad du behøver for at komme i gang, en grundlæggende tekstredigerer og internetbrowser. Du kan endda genkende nogle eksempler på HTML -markup, som du er stødt på på internetfora, tilpassede tilpassede sider eller wikiHow -artikler. HTML er et nyttigt værktøj for enhver internetbruger, og at lære det grundlæggende vil tage mindre tid, end du tror.

Trin

Del 1 af 2: Lær HTML Basics

1. 1 Åbn et HTML -dokument. De fleste tekstredigerere (Notesblok eller Notesblok ++ til Windows, TextEdit til Mac, gedit til GNU / Linux) kan bruges til at generere HTML -filer. Opret et nyt dokument, og gem det ved hjælp af Fil → Gem som i websideformat, eller rediger filtypen til .html eller .htm i stedet for .doc, .rtf eller en anden udvidelse.
   • Du modtager muligvis en advarsel om, at filen gemmes som "ren tekst" i stedet for RTF -format, eller at formatering og billeder ikke gemmes. Dette er fint; for HTML er disse muligheder ikke nødvendige.
2. 2 Åbn den genererede fil i en browser. Gem den tomme fil, find den på din computer, og dobbeltklik på den for at åbne den. En tom side skal åbne i browseren. Hvis det ikke gør det, skal du trække filen til adresselinjen i din browser. Når du redigerer HTML -filen, kan du opdatere denne side for at se ændringerne.
   • Bemærk, at du på denne måde ikke opretter et websted på Internettet. Andre mennesker har ikke adgang til denne side, og du behøver ikke en internetforbindelse for at teste din lokale side. Browseren fortolker simpelthen HTML -koden og "læser" den som om det var et websted.
3. 3 Forstå, hvad markup tags er. I modsætning til almindelig tekst vises tags ikke på siden. I stedet fortæller de browseren, hvordan siden og dens indhold skal vises. "Åbning" -mærket indeholder instruktioner. For eksempel kan den fortælle browseren, at teksten skal vises som fremhævet... Det har også brug for et "slut" -tag for at vise browseren, hvor instruktionen slutter. I dette eksempel vises teksten mellem start- og slut -tags med fed skrift. Mærker skrives inde i ulige tegn, men slutmærket starter med et skråstreg fremad.
   • Åbningsmærket er skrevet mellem ulighedstegnene: åbningsmærke>
   • I det afsluttende mærke placeres et skråstreg foran tagbeskrivelsen (navn): /slutmærke>
   • Læs videre for at finde ud af, hvordan de forskellige tags bruges. Til dette trin skal du bare huske optageformatet. Der skrives tags mellem ulighedstegnene:> og />
   • I nogle øvelser kaldes HTML -tags for elementer, og teksten mellem åbnings- og lukningskoder kaldes elementindhold.
4. 4 Skriv html> tag i editoren. Hver HTML -fil skal starte med et tag html> og slut med et mærke / html>... Disse tags fortæller browseren, at alt indhold mellem tags er i HTML. Føj disse tags til dit dokument:
   • Ofte starter HTML -filer med linjen ! DOCTYPE html>hvilket betyder, at browsere skal genkende hele filen som HTML. Denne linje er ikke nødvendig, men den kan hjælpe dig med at fejlfinde kompatibilitetsproblemer.
   • Urskive html> øverst i dokumentet.
   • Tryk på Enter eller Return flere gange for at oprette flere tomme linjer, og skriv derefter / html>
   • huske på, at det hele koden, du vil oprette i denne artikel, skal skrives mellem disse to tags.
5. 5 Opret et hoved> sektion i filen. Mellem html> og / html> tags skal du oprette et åbningstag hoved> og lukkemærket / hoved>... Tilføj nogle tomme linjer mellem dem. Indhold skrevet mellem head> og / head> tags vises ikke på selve siden. Følg disse trin, og du vil se, hvad dette tag er til:
   • Mellem tagene head> og / head> skal du skrive titel> og / titel>
   • Mellem titlerne> og / titel> skal du skrive Sådan lærer du HTML - wikiHow.
   • Gem dine ændringer, og åbn filen i en browser (eller opdater siden, hvis filen allerede er åben). Kan du se teksten i sidetitlen over adresselinjen?
6. 6 Opret en brødtekst> sektion. Alle andre tags og tekst i dette eksempel er skrevet i brødteksten, hvis indhold vises på siden. Efter lukkemærke / hoved>, men Før tag / html> tilføj tags krop> og / krop>... I resten af ​​denne artikel skal du arbejde med kropssektionen. Din fil skal se sådan ud:
   html>
   hoved>
   title> Sådan lærer du HTML - wikiHow / title>
   / hoved>
   krop>
   / krop>
   / html>
7. 7 Tilføj tekst ved hjælp af forskellige stilarter. Det er tid til at tilføje det virkelige indhold til siden! Alt, hvad du skriver mellem brødteksterne, vises på siden, efter at den er opdateret i browseren. Brug ikke symboler eller >som browseren vil forsøge at fortolke indholdet som et tag i stedet for tekst. Skrive Hej! (eller hvad du nu vil), prøv derefter at tilføje disse tags til teksten og se, hvad der sker:
   • em> Hej alle! / em> gør teksten "kursiv": Hej!
   • stærk> Hej alle! / stærke> gør teksten "fed": Hej!
   • s> Hej alle! / s> gennemsigtig tekst: Hej!
   • sup> Hej alle! / sup> viser skrifttypen som et overskrift:
   • sub> Hej alle! / sub> viser skrifttypen som et abonnement: _Hej!
   • Prøv forskellige tags sammen. Hvordan det vil se ud em> strong> Hej alle! / strong> / em>?
8. 8 Opdel teksten i afsnit. Hvis du prøver at skrive flere tekstlinjer i en HTML -fil, vil du bemærke, at linjeskift ikke vises i browseren. For at opdele tekst i afsnit skal du tilføje tags:
   • p> Dette er et separat afsnit. / p>
   • Denne sætning efterfølges af et linjeskift br> før starten af ​​denne linje.
     Dette er det første tag, der ikke kræver et sluttag. Disse tags kaldes "tomme" tags.
   • Opret overskrifter for at vise sektionstitlerne:
     h1> overskriftstekst / h1>: største titel
     h2> overskriftstekst / h2> (overskrift på andet niveau)
     h3> overskriftstekst / h3> (overskrift på tredje niveau)
     h4> overskriftstekst / h4> (overskrift på fjerde niveau)
     h5> overskriftstekst / h5> (mindste titel)
9. 9 Lær at oprette lister. Der er flere måder at oprette lister på en webside. Prøv nedenstående muligheder, og beslut dig for, hvilken du bedst kan lide. Bemærk, at der er brug for et par tags på listen som helhed (f.eks. Ul> og / ul> for en punktliste), og hvert listeelement fremhæves med et andet par tags, f.eks. Li> og / li>.
   • Punktliste:
     ul> li> Første linje / li> li> Anden linje / li> li> Og så videre / li> / ul>
   • Nummereret liste:
     ol> li> En / li> li> To / li> li> Tre / li> / ol>
   • Definitionsliste:
     dl> dt> Kaffe / dt> dd> - varm drikke / dd> dt> Lemonade / dt> dd> - kold drink / dd> / dl>
10. 10 Layout siden ved hjælp af linjeskift, vandrette linjer og Billeder. Det er tid til at tilføje noget andet end tekst til siden. Prøv følgende tags eller følg linkene for at få flere oplysninger. Brug en online hosting service til at oprette et link til det billede, du vil sende:
    • Vandret linje: hr>
    • Indsæt billede: img src = "billedlink">
11. 11 Tilføj links. Du kan bruge disse tags til at oprette hyperlinks til andre sider og websteder, men da du ikke har et websted endnu, lærer du nu, hvordan du opretter ankerlinks, det vil sige links til bestemte steder på en side:
    • Opret et anker med a> -tagget, hvor du vil linke på siden. Kom med et klart og mindeværdigt navn:
      
      et navn = "Tips"> Teksten, du linker til. / a>
    • Brug href> -tagget til at oprette et relativt link eller link til en ekstern ressource:
      
      a href = "link til siden eller ankernavnet på siden"> Tekst eller billede, der fungerer som linket. / a>
    • Hvis du vil linke til et relativt link på en anden side, skal du tilføje et # -tegn efter hovedlinket og navnet på ankeret. For eksempel https://da.wikihow.com/learn-HTML#Tips links til afsnittet tips på denne side.

Del 2 af 2: Avanceret HTML

1. 1 Lær attributterne at kende. Attributter skrives inde i mærket, hvilket angiver yderligere oplysninger. Attributternes format er som følger: navn = "værdi", hvor titel definerer en attribut (f.eks. farve for en farveattribut), og værdien angiver dens værdi (f.eks. rød for rød).
   • Attributter er faktisk blevet brugt i det foregående afsnit om grundlæggende HTML. Img> -tagget bruger attributten src, relative linkankre bruger attributten navnog linkene bruger attributten href... Som du allerede har bemærket, er alle attributter skrevet i formatet ___='___’.
2. 2 Eksperimenter med HTML -tabeller. Oprettelsen af ​​et bord indebærer brug af forskellige tags. Du kan eksperimentere eller læse mere detaljerede instruktioner.
   • Opret tabelmærker:tabel> / tabel>
   • Omfatt indholdet af hver række i tabellen i tags: tr>
   • Kolonneoverskriften er defineret af tagget: th>
   • Celler i efterfølgende linjer: td>
   • Et eksempel på brug af disse tags:
     
     tabel> tr> th> Kolonne 1: måned / th> th> Kolonne 2: besparelser / th> / tr> tr> td> januar / td> td> 5000 rubler / td> / tr> / tabel>
3. 3 Lær de ekstra overordnede tags. Du har allerede lært head> -tagget, der kommer i begyndelsen af ​​hver html -fil. Udover titel> tag, er der andre tags til denne sektion:
   • Metatags, der indeholder metadatabruges af søgemaskiner til at indeksere webstedet. For at gøre dit websted lettere at finde i søgemaskiner, skal du bruge et eller flere meta> tags til at åbne (det er ikke nødvendigt at lukke tags).Brug en attribut og en værdi pr. Tag: meta name = "description" content = "page description">; eller meta name = "keywords" content = "komma adskilte søgeord">
   • Link> tags, der peger på tredjepartsfiler, f.eks. Typografiark (CSS), som er oprettet ved hjælp af en anden type kodning og giver dig mulighed for at ændre HTML-siden ved hjælp af farve, tekstjustering og mange andre funktioner.
   • Scriptet> tags, der bruges til at vedhæfte JavaScript -filer til siden. Disse filer er nødvendige for at ændre siden interaktivt (som reaktion på brugerhandlinger).
4. 4 Eksperimenter med HTML -koden for andre websteder. At se kildekoden for andre websider er en fantastisk måde at lære HTML på. Du kan højreklikke på siden og vælge Vis kilde eller noget lignende i topmenuen i din browser. Prøv at finde ud af, hvad et ukendt tag gør, eller søg på Internettet efter oplysninger om det.
   • Selvom du ikke kan redigere andres websteder, kan du kopiere kildekoden til din fil for senere at eksperimentere med tags. Bemærk, at CSS -markering muligvis ikke er tilgængelig, og farver og formatering kan se anderledes ud.
5. 5 Begynd at udforske mere detaljerede guider. Der er mange websteder på Internettet dedikeret til HTML -tags, såsom W3Schools eller HTMLbook. Der er også papirbøger til salg, men prøv at finde den nyeste udgave, efterhånden som standarderne ændrer sig og udvikler sig. Endnu bedre, mestre CSS for at have meget mere kontrol over layoutet og udseendet af dit websted. Efter at have lært CSS lærer webdesignere normalt JavaScript.

Tips

• Notepad ++ er et fantastisk gratis program, der ligner almindelig Notesblok, men du kan gemme og teste din kode i din browser online. (Det understøtter også næsten ethvert sprog - HTML, CSS, Python, JavaScript og så videre.)
• Find en simpel side på nettet, gem koden på din computer, og eksperimenter med den. Prøv at flytte tekst, ændre skrifttype, udskifte billeder - uanset hvad!
• Du kan beholde en notesbog, hvor du skriver tags, så du altid har dem ved hånden. Du kan også udskrive denne side og henvise til den.
• Når du skriver kode, skal du gøre det omhyggeligt, så du og andre mennesker kan forstå det. Brug! - Indsæt kommentar her -> for HTML -kommentarer: de vil ikke blive afspejlet på siden, men vil være synlige i kodedokumentet.
• XML og RSS vinder popularitet. Koden til sider, der indeholder XML- og RSS -teknologier, er vanskeligere for en uerfaren bruger at læse og forstå, men disse værktøjer er ganske nyttige.
• Markeringstags i HTML er store og små bogstaver, men vi anbefaler kun at bruge små bogstaver (som i eksemplerne i denne artikel) til både standardisering og XHTML-kompatibilitet.

Advarsler

• Nogle tags har været ude af brug i løbet af de sidste par år og er blevet erstattet af nye, der giver den samme eller nogle yderligere effekter.
• Hvis du gerne vil teste din side, skal du gå til W3 -webstedet og tjekke de moderne HTML -krav. HTML -standarder ændres over tid, og nogle tags erstattes af nye, der fungerer bedre i moderne browsere.

Hvad har du brug for

• En tekstredigerer, f.eks. Notesblok (Windows) eller TextEdit (Mac)
• Papir / notesblok (ikke nødvendigt)
• HTML -editor såsom Notepad ++ (Windows) eller TextWrangler (Mac) (ikke nødvendigt)