Indhold

• Trin
• Del 1: Hvordan jeg opdagede HTML
• Råd
• Advarsel
• Hvad du har brug for

HTML (HyperText Markup Language) er et grundlæggende sprog til opbygning af websider. Det blev oprettet som et let og fleksibelt kodningssprog. Næsten alle websteder på Internettet er udviklet med en eller anden form for denne kode (ColdFusion, XML, XSLT). HTML er let at forstå, men du kan fortsætte med at lære om det i lang tid, hvis du er interesseret i dets omfattende funktionalitet. For at tilføje farve og sjov til dit websted kan du lære grundlæggende CSS, så snart du vænner dig til en grundlæggende HTML-side.

Trin

Del 1 af 4: Opbygning af et dokument

1. 

   Åbn en simpel teksteditor. NotePad er en god mulighed og kan downloades gratis. Du kan skrive HTML med de fleste teksteditorer, men mere kompleks software med automatiske formateringsfunktioner kan gøre det vanskeligt at organisere din HTML-side.
   • Brug ikke TextEdit, da det normalt gemmer filen i et format, som din browser muligvis ikke genkender som HTML.
   • Du kan også bruge en online HTML-editor. Dedikerede HTML-redigeringsprogrammer anbefales ikke til begyndere.

2. 

   
   
   Gem en fil som en webside. Vælg Filer → Gem som i menuen øverst. Skift filformat til "Web Page", ".html" eller ".htm". Gem filen, hvor du nemt kan finde den.
   • Der er ingen forskel mellem disse tre muligheder.

3. 

   Åbn filen i en browser. Dobbeltklik på filen, og den åbnes automatisk som en tom webside i din browser. Alternativt kan du åbne en browser som Firefox eller Internet Explorer og derefter bruge Filer → Åbn fil til at vælge dokumentet.
   • Dette websted er ikke online. Det kan kun ses på din computer.

4. 

   
   
   Opdater websiden og se de foretagne ændringer. Skriv følgende i dit tomme dokument: Hej. Gem dokumentet. Opdater den tomme webside i din browser, og ordet "Hej" med fed skrift vises øverst på siden. Når du vil teste din nye HTML under denne vejledning, skal du gemme .htm-dokumentet og derefter opdatere dit browservindue for at se, hvordan HTML kompileres.
   • Hvis du ser ordene ""og"'' Vises i din browser, filen er ikke kompileret korrekt i HTML. Prøv en anden teksteditor eller en anden browser.

5. 

   
   
   Lær tags. HTML-kommandoer er skrevet i "tags", der fortæller browseren, hvordan du kompilerer og viser din webside. De er altid skrevet inde i enkelte citater , og vises ikke på websiden, som du brugte dem i eksemplet ovenfor:
   • er et "startkort" eller "åbent kort". Alt, der skrives efter dette mærke, defineres som "fed" (fed på en webside).
   • er et "slutmærke" eller "lukkemærke", som du kan skelne ved symbolet / tegnet. Det angiver slutningen af ​​fed tekst. De fleste (ikke alle) tags har brug for et slutkode for at fungere, så sørg for at medtage det.

6. 

   Byg dit dokument. Slet alt i dit HTML-dokument. Start forfra med følgende tekst, nøjagtigt som den blev skrevet (minus punkttegn). Denne HTML-kode fortæller browseren, hvilken type HTML du bruger, og at al din HTML placeres inde i tags. og .

7. 

   Tilføj hovedmærkerne (hovedet) og kroppen (kroppen). HTML-dokumenter er opdelt i to dele. Den "øverste" sektion er til speciel information, som sidens titel. Sektionen "body" indeholder hovedindholdet på siden. Føj begge disse sektioner til dit dokument, og husk at medtage slutkoder. Den nyligt tilføjede tekst er fed:

8. 

   Giv din side en titel. De fleste af kortene i hovedafsnittet er uvigtige at lære med en nybegynder. Titelmærket er dog let at bruge og bestemmer, hvad der vises som navnet på browservinduet eller på browserfanen. Placer dine overskriftens start- og slutkoder inde i hovedkoder, og skriv eventuelle overskrifter, du kan lide mellem disse tags:
   reklame

Del 2 af 4: Tekstformatering

1. 

   Føj tekst til din krop. I dette afsnit vil vi kun arbejde med body tags. Den anden tekst vil stadig være i dit dokument, men vi sparer plads ved ikke at gentage den i denne vejledning. Skriv hvad du vil mellem kortene og , og det vises som det første indhold på din side. For eksempel:
   • Jeg fulgte wikiHow-instruktioner for at skrive en HTML-side.

2. 

   Tilføj overskrifter til teksten. Organiser din side med overskriftskoder, som instruerer browseren om at vise tekst mellem dem i en større skriftstørrelse. Disse tags bruges også af søgemaskiner og andre værktøjer til at bestemme, hvad dit websted handler om, og hvordan det er organiseret.
   er den største overskrift, og du kan oprette mindre overskrifter op til
   . Prøv dem på din side:
   • Velkommen til min side.

   • Jeg fulgte wikiHow-instruktioner for at skrive en HTML-side.

   • Mit mål i dag:

   • Gennemførte mål:

   • Lær, hvordan du bruger overskrifter.

   • Uudførte mål:

   • Lær mere tekstformateringskoder.

3. 

   Lær mere tekstformateringskoder. Du har allerede set det "stærke" tag, men der er masser af andre måder at formatere din tekst på. Prøv disse tags eller med flere tags på samme tid for den samme tekststreng. Husk at tilføje afslutningskoder bagpå!
   • Vigtig tekst, vises med fed skrift i browseren.
   • Fremhævet tekst, vist i kursiv i browseren.
   • Tekst lidt mindre end normalt. Denne tekst ændres automatisk, hvis den bruges i en overskrift.
   • Tekst er ikke længere relevant, vises med et bindestreg.
   • Tekst indsættes senere end andre dokumenter, der vises med understregninger.

4. 

   Organiser tekst på din side. Du har måske bemærket, at det ikke er nok at trykke på "enter" -tasten til, at teksten vises på en anden linje. Disse tags kan hjælpe dig med at oprette afsnit og linjeskift eller arrangere din tekst på andre måder:

   • Forkortelse for "afsnit", dette tag holder hele teksten mellem disse tags i et afsnit og adskiller den fra teksten over og under den.

   • 
     Dette tag genererer linjeskift. Føj ikke et slutkode til det, da det ikke forstyrrer noget andet indhold. Brug dette mærke i digte eller adresselinjer, ikke afsnit.

   • Hvis du har brug for at vise teksten meget nøjagtigt, indstiller dette tag teksten indeni den til en skrifttype med fast bredde (hvert bogstav har samme bredde) og giver dig mulighed for at oprette intervaller Blanke og linjeskift som du vil til regelmæssig redigering i stedet for tags.

   • Dette tag definerer typen af ​​tekst, der citeres fra en kilde.

     Du kan beskrive kilden senere med citer kort.

5. 

   Tilføj usynlig billedtekst. Kommentar-tags vises ikke på websiden. De giver dig mulighed for at kommentere dig selv i HTML-dokumentet uden at påvirke indholdet. Tilføj ikke et slutkode.
   • Kortene, der går alene uden at slutte tags, kaldes "tomme tags".

6. 

   Kombiner dem sammen. Den bedste måde at huske disse tags på er at bruge dem på dit websted. Her er et eksempel på kortene i de trin, du hidtil har lært. Prøv at forudsige, hvordan de vises i browseren, og kopier dem derefter til dit dokument, og find ud af det.
   • Velkommen til min hjemmeside.

   • Håber du nyder denne side!

     Jeg lavede det bare til dig.

   • Del 1: Hvordan jeg opdagede HTML

   • Jeg har lært HTML allerede i en totimer, så nu er jeg ekspert.
   reklame

Del 3 af 4: Tilføjelse af links og billeder

1. 

   Lær om attributter. Mærker kan have yderligere oplysninger skrevet inde i dem, kaldet attributter. Disse attributter er repræsenteret af yderligere ord i selve tags i form ejendomsnavn = "specifik værdi". For eksempel kan ethvert HTML-tag have titelattributten:

   • Indledningsafsnittet er her.

     Navngiv afsnittet "Introduktion", som vises, når du holder markøren over afsnittet på websiden.

2. 

   Links til andre websteder. Brug af kort at oprette et hyperlink til enhver anden webside. Indsæt URL'en til den webside, der skal linkes til, ved hjælp af href-attributten. Her er et eksempel, der linker til den webside, du læser:
   • Dine besøgende på dit websted kan klikke på denne tekst for at følge linket.

3. 

   Føj en id-attribut til tagget. En anden attribut, som ethvert HTML-tag kan bruge, er elementet "id". Skriv på ethvert kort id = "vidu" eller brug et navn, der ikke indeholder mellemrum. Det giver ingen synlig effekt, men vi vil bruge det i næste trin.
   • Føj f.eks. Følgende til dit dokument:

     Dette afsnit bruges som et eksempel til at beskrive, hvordan id-attributten fungerer.

4. 

   Link til et element med et bestemt id. Nu kan vi bruge hyperlink-koden, , for at linke til et andet sted på samme side. I stedet for en URL bruger vi symbolet # efterfulgt af den id-værdi, vi vil linke til. For eksempel, Denne tekst vil linke til teksten med id'et "vidu".
   • Alle HTML-værdier er store og små bogstaver. "#VIDU" og "#vidu" linker begge til den samme placering.
   • Hvis din side er kort nok til at vise hele siden på én gang, vil du sandsynligvis ikke bemærke, at der sker noget, når du klikker på linket i din browser. Ændr størrelsen på vinduet, indtil rullepanelet vises, og prøv derefter igen.

5. 

   Tilføj fotos. Kort er et tomt tag, hvilket betyder, at der ikke er behov for et sluttag. Alle de oplysninger, browseren har brug for for at vise billedet, tilføjes ved hjælp af attributter. Her er et eksempel på at vise wikiHow-logoet med en beskrivelse for hver attribut bag:
   • 
   • Ejendomme src = "" fortæller browseren, hvor billedet er. (Bemærk, at udstationering af et foto fra en andens side betragtes som upassende - og billedet forsvinder, når siden ikke længere er aktiv.)
   • Ejendomme stil = "" Det kan gøre mange ting, men vigtigst af alt bruges det til at indstille bredden og højden på et billede i pixels. (Du kan også bruge de separate attributter bredde = "" og højde = "" i stedet, men dette kan føre til underlige størrelsesproblemer, hvis du bruger CSS.)
   • Ejendomme alt = "" er en kort beskrivelse af det billede, som brugeren vil se, om billedet ikke indlæses. Dette betragtes som et krav, da det bruges til skærmlæsere til besøgende, der er blinde.
   reklame

Del 4 af 4: Lær mere Tilføjelse og hentning af dit websted online

1. 

   Bekræft din HTML. HTML-validering kontrollerer for fejl i din kode. Hvis dit websted ikke vises korrekt, kan validering hjælpe dig med at finde den fejl, der forårsager problemet. Det kan også lære dig mere om HTML ved at bestemme, at koden ser godt ud på displayet, men det anbefales ikke længere på grund af nye opdateringer i HTML-standarden. Brug af ugyldig HTML gør dit websted ikke ubrugeligt, men kan forårsage problemer eller vise ustabilt i forskellige browsere.
   • Prøv en gratis online valideringstjeneste fra W3C, eller søg efter et andet HTML 5-valideringsværktøj online.

2. 

   Lær flere tags og attributter. Der er mange andre HTML-tags og attributter og mange steder at lære dem:
   • Prøv w3schools og HTML Dog for flere tutorials og komplette lister over tags.
   • Find en webside, som du kan lide, hvordan den ser ud, og brug derefter din browsers "Vis sidekilde" -funktion til at få HTML-koden selv. Kopier det til dit dokument og studer, hvordan det fungerer.
   • Læs andre artikler og lær om, hvordan du opretter tabeller i HTML, brug metatags for at øge dine chancer for at finde det gennem søgemaskiner eller bruge en division. indstil et område på siden) og span (bruges til at specificere tekstelementets typografi) for at hjælpe med stil gennem CSS.

3. 

   Få dit websted online. Vælg en tjeneste, der er vært for dit websted, og så kan du uploade så mange HTML-sider, som du vil, til dit personlige webdomæne. For at gøre dette skal du bruge FTP-uploadsoftware, men mange webudlejningstjenester tilbyder også denne service.
   • Når du linker til sider eller billeder, der er direkte på dit websted, skal du bruge den fulde adresse. For eksempel, hvis dit domænenavn er www.chuyengiahtmlsieudang.com, så teksten findes i disse tags vil linke til "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"

4. 

   Tilføj typografier med CSS. Hvis din HTML-side ser lidt monoton ud, kan du prøve at lære det grundlæggende i CSS for at tilføje farver, forskellige skrifttyper og bedre kontrol over, hvor elementer placeres. Ved at linke et CSS "stilark" til en HTML-side kan du foretage drastiske ændringer i farten, dynamisk justere stilen for al tekst inden for et givet tag. Du kan lege med det grundlæggende formateringslag lidt her eller dykke ned i mere detaljerede tutorials i HTML Dogs CSS Tutorial.

5. 

   Føj JavaScript til dit websted. JavaScript er et programmeringssprog, der bruges til at tilføje en masse funktionalitet til dine HTML-sider. JavaScript-kommandoerne indsættes mellem start- og slutkoder , og kan bruges til at tilføje interaktive knapper, beregne matematiske problemer og mere. Find ud af mere i w3c-eksemplerne. reklame

Råd

• Doktypedeklarationen (anvendt dokumenttypedeklaration), der bruges i denne vejledning, er "løs HTML 4.0.1 overgangs" (HTML 4.0.1 ikke stram overgang), et let format. for nybegyndere at bruge. Brug () et alternativ til at få browseren til at kompilere den i et strengt HTML 5-format, hvilket er den anbefalede (dog mindre almindelige) standardstil.

Advarsel

• Formålet med HTML er at holde indhold i et globalt format. Det har ingen kontrol over præsentationen af ​​dit websted, såsom baggrundsfarven og den nøjagtige placering af elementerne. Mens der stadig er tags, der giver dig mulighed for at gøre dette, er det en god ide at bruge CSS til at oprette et mere kontrollerbart og konsistent websted.

Hvad du har brug for

• En simpel teksteditor som f.eks.NotePad eller TextEdit
• En webbrowser, for eksempel Internet Explorer eller Mozilla Firefox
• (Valgfrit) En HTML-editor som Adobe Dreamweaver, Aptana Studio eller Microsoft Expression Web