HTML-tutorial (for begyndere)

HTML-tutorial til begyndereVil du lære noget HTML?


Det lyder som en god idé. Derfor har vi sammensat denne HTML-tutorial til begyndere.

Der er mindst 1,7 milliarder websteder i verden i dag. Næsten alle disse websteder bruger HTML på den ene eller den anden måde.

P.S: Hvis du ikke ønsker at lære HTML og begynde at opbygge dit websted med det samme, uden at kræve kodning, skal du se på denne guide: Sådan oprettes et websted GRATIS (uden at lære HTML).

Introduktion til HTML


Hvad er HTML?

Hvad er HTMLHTML, et akronym for HyperText Markup Language, er et computersprog til oprettelse af websteder og webapplikationer. Består hovedsageligt række koder, der normalt er skrevet i en tekstfil og gemmes som HTML, oversættes kode skrevet på HTML-sproget til en smuk, formateret tekst eller en kombination af tekst og medier, når de ses i en browser.

HTML blev først udviklet af den britiske fysiker Tim Berners-Lee i 1990, og den har gennemgået så mange udviklinger siden da, at den seneste version kan opnå langt mere, end man forestillede sig, da sproget først blev opfundet.

I denne tutorial vil vi gennemgå det grundlæggende i HTML-sproget og alt hvad du behøver at vide for at komme i gang med HTML som en begynder.

HTML-versioner

Først en hurtig gennemgang af alle HTML-versionerne, siden HTML blev opfundet.

  • HTML 1.0: Dette var barebones-versionen af ​​HTML og den allerførste udgivelse af sproget.
  • HTML 2.0: Denne version blev introduceret i 1995. Den udviklede sig gradvist, hvilket gjorde det muligt ekstra muligheder inklusive form-baseret fil upload, tabeller, billedkort på klientsiden og internationalisering.
  • HTML 3.2: I et forsøg på at sikre udviklingen af ​​standarder for World Wide Web blev World Wide Web Consortium (W3C) grundlagt af Tim Berners-Lee i 1994. I 1997 offentliggjorde de HTML 3.2.
  • HTML 4.0Senere i 1997 frigav W3C HTML 4.0 – en version, der vedtog mange browserspecifikke elementtyper og attributter.
  • HTML 4.0 blev senere udgivet med mindre redigeringer i 1998.
  • HTML 4.01: I december 1999 blev HTML 4.01 frigivet.
  • XHTML: Specifikationerne blev introduceret i 2000, og det blev anbefalet at blive brugt som fællesstandard med HTML 4.01. Det inkorporerede XML for at sikre, at koden er korrekt skrevet og for at sikre interoperabilitet mellem programmeringssprog.
  • HTML5: W3C offentliggjorde HTML5 som en anbefaling i oktober 2014 og frigav senere HTML 5.1 i november 2016.

Valg af din HTML Editor

Vælg HTML-editorHvis du overvejer at oprette websider i HTML, har du brug for en HTML-editor. Der er flere fordele ved at bruge en HTML-editor.

En god HTML-editor holder din kode ren og organiseret. Det vil også registrere, når du åbner et nyt tag og automatisk lukker det for at undgå, at du har en buggy-kode og som et resultat reducerer, hvor meget indtastning du skal gøre. De fleste HTML-redaktører i dag giver dig mulighed for at forhåndsvise din webside for at se, hvordan det vil se ud i en webbrowser ved hjælp af deres WYSIWYG-funktion.

Der er mange gratis og betalte HTML-redaktører, herunder er nogle af de øverste muligheder, du kan vælge imellem:

Grundlæggende byggesten af ​​HTML


Når du har besluttet den HTML-editor, du vil bruge, er det næste trin at forstå byggestenene til HTML. Når du koder i HTML, er det vigtigt at forstå disse byggesten. De inkluderer tags, attributter og elementer. Vi vil tage et grundlæggende kig på dem nedenfor:

Introduktion til tags

Når du er i HTML, er den første ting, du har brug for at forstå, tags. I det væsentlige adskiller tags normal tekst fra HTML-kode.

Når det kommer til HTML, udgør tags derfor forskellen mellem, om dit dokument vises som almindelig tekst eller “transformeret tekst”, som stort set er en tekstkode, der ser ud til at vise en række ting (hyperlinks, billeder, medier eller andet metoder til formatering) baseret på, hvad det instrueres om at vise, baseret på tags.

Lad os se på ordet “Han er en dreng” som eksempel:

  • I almindeligt tekstformat får du: Han er en dreng.
  • I fed tekstformat får du: Han er en dreng

For at opnå det, vi har i det dristige format, skal du bruge tag.

gør tekst fed i HTML

I rå HTML har vi Han er en dreng som browseren derefter oversætter til dette: Han er en dreng.

”Han er en dreng” kunne også komme kursiveret ud.

Dette opnås ved hjælp af tag.

at lave tekst kursiveret i html

Vi har: Han er en dreng som derefter kommer ud som Han er en dreng.

Hyperlinket opnås ved hjælp af tag.

at gøre tekst hyperlinket i html

I rå HTML har vi: Han er en dreng, der viser, som Han er en dreng.

Der er et par ting, du skal forstå om tags:

  • Tags er praktisk taget byggestenen til HTML – du kan ikke HTML uden tags! Hvis du sidder fast på hvilket tag du skal bruge, skal du huske at tjekke vores periodiske HTML-tabel.
  • Næsten hvert åbent tag skal være lukket. Husk, at der er undtagelser. Et eksempel på et tag, der ikke skal lukkes, er et tomt tag, såsom linjeskift:
    .
  • Mærker findes i mindre end (“<”) and greater than (“>”) Vinkelbeslag. Lukningskoder indeholder en baglæns skråstreg, der bliver før navnet på tagget lukkes. Eksempel på et åbent tag: . Eksempel på et lukket tag .
  • Hver HTML-fil begynder med åbningskoden og slutter med det afsluttende tag. Den første linje i HTML-filen skal angive dokumenttypen, så browseren ved, hvilken HTML-smag du bruger. Dette er grunden til, at du ser HTML-sider starte med “”Inden HTML-koden begynder.

Før indhold tilføjes, ser de fleste HTML-filer dybest set sådan ud:

HTML--

Det afsnit, der følger efter tag indeholder normalt oplysninger om dokumentet, så som dets titel, metatags, og hvor man kan finde dens CSS-fil – indhold, der ikke er synligt direkte på browsersiden. Sektionen mellem “ og”(Som vi repræsenterede med“ HOVEDINHOLD ”) er hvor hovedindholdet i HTML-filen, som fremviseren vil se i browseren, er placeret. Dette inkluderer alt fra første afsnit til hyperlinks til formatering til multimedia og alt andet.

Introduktion til elementer

introduktion til elementer

I HTML består et “element” af åbnings- og lukningskoden samt indholdet mellem koderne.

I “Han er en dreng”(Med fed) eksempel har vi dette i HTML: Han er en dreng. Teksten “Han er en dreng” er omgivet af et åbent og lukket tag. Alt, inklusive åbningskoden, indholdet og det tætte tag er et element.

Når et tag åbnes, introduceres indhold, og tagget lukkes, vi har et element.

Et element kan være i en grundlæggende form eller i en kompleks form. Hvorfor? Fordi alt imellem et åbent tag og et lukningskode samt disse tags er et element. Det betyder, at vi kan have elementer i et element. I vores nuværende eksempel, “han er en dreng” (Han er en dreng) er et element.

Du vil bemærke, at vi tidligere sagde, at HTML-dokumenterne indeholder tag, før indholdet begynder. Indholdet kan indeholde hundreder af forskellige elementer, men alle disse elementer er en del af “krop” -elementet (da kropselementet er åbent, indeholder indhold og derefter lukkes).

Introduktion til attributter

Mens HTML-dokumenter stort set bruger tags til alt, ønsker vi undertiden at kommunikere yderligere oplysninger inde i et element. I dette tilfælde bruger vi en attribut. Attributten bruges til at definere egenskaberne ved et element, det bruges i åbningskoden til elementet. Attributter består af et navn og en værdi.

Bemærk, at værdien af ​​en attribut er placeret i et anførselstegn ved hjælp af formatet Din tekst.

eksempel på en attribut

Eksempel:

Han er en dreng

I dette eksempel instruerer vi, at ”Han er en dreng” er på linje midt i dokumentet.

Kom godt i gang med HTML


Kom godt i gang med HTMLHvis du antager, at du vil oprette dit eget grundlæggende HTML-dokument i dag, hvordan kommer du i gang? Fra oprettelse af sidetitler til oprettelse af formularer, vi vil lede dig gennem, hvordan du kommer i gang med HTML nedenfor.

Oprettelse af HTML Element

Når du opretter et HTML-dokument, er en af ​​de første ting, du vil oprette, den element. Dette indeholder metadata (eller data om HTML-dokumentet). Dette inkluderer information som tegnsættet, dokumenttitel, dokumentformater, scripts osv.

Nogle af elementerne i inkluderer titlen, der er oprettet med tag.</p><p><strong>Eksempel</strong>:</p><pre><title>Dette er vores sidetitel

Denne titel vises på browserfanen. Det er også, hvad der indekseres som titlen på siden, når søgemaskinens bots gennemsøger dit websted.

Dette inkluderer også element, som ofte bruges til at specificere information, som søgemaskiner kan bruge til at beskrive indholdet i deres lister. Dette inkluderer beskrivelse, nøgleord, forfatteroplysninger osv element specificerer også tegnsættet, som HTML-dokumentet bruger.

Oprettelse af overskrifter i HTML

oprette overskrifter i html

Overskrifter spiller en vigtig rolle i succes på et websted. For det første gør de det let for læsere at scanne indholdet på dine sider. For det andet, og måske mere vigtigt, kommunikerer de strukturen på dine websider til søgemaskiner og påvirker derfor ofte, hvordan dit indhold rangeres i resultaterne af søgemaskinerne.

Når det er sagt, er det vigtigt at undgå at bruge overskrifttags for at gøre din tekst stor eller fed. Der er andre tags, der kan bruges til det (som vi får vist senere i dette afsnit). I stedet skal overskriftskoder kun bruges til struktur.

Der er seks overskrifttags i HTML:

til
, med

mærke, der angiver den vigtigste overskrift og
mærke, der angiver den mindst vigtige overskrift.

For at oprette overskrifter, skal du blot bestemme, hvilken overskrift du opretter, åbne overskriften med det almindelige overskrifttag, og husk altid at lukke tags, når du er færdig.

Eksempel på HTML-overskrifter:

  • Dette er din første HTML-overskrift

    (den største)

  • Dette er din anden HTML-overskrift

  • Dette er din tredje HTML-overskrift

  • Dette er din fjerde HTML-overskrift

  • Dette er din femte HTML-overskrift
  • Dette er din sjette HTML-overskrift

Oprettelse af afsnit

oprette afsnit i HTML

Det næste trin er at begynde at oprette afsnit. Afsnit kan oprettes med

tag.

Eksempel:

Dette er dit første afsnit.

Dette er dit andet afsnit, og du opretter mange flere afsnit.

Husk, at skrivning i HTML er meget forskellig fra at skrive i ren tekst. Derfor, hvis du opdeler tekst i HTML uden at starte et nyt afsnit, betyder det ikke rigtig noget, når teksten vises af browseren. I stedet vil du bruge en linjeskift, der er repræsenteret af
tag.

Eksempel:

Dette er et nyt afsnit. Og jeg vil bruge et antal nye linjer. Så jeg bryder det op.

Dette kommer ikke ud som følgende:

Dette er et nyt afsnit.
Og jeg vil bruge et antal nye linjer.
Så jeg bryder det op.

I stedet for kommer det sådan ud:

Dette er et nyt afsnit. Og jeg vil bruge et antal nye linjer. Så jeg bryder det op.

Så hvordan opdeler du tekster i nye linjer, så de ser sådan ud:

Dette er et nyt afsnit.
Og jeg vil bruge et antal nye linjer.
Så jeg bryder det op.

Ved at bruge linjeskift.

Eksempel:

Dette er et nyt afsnit.
Og jeg vil bruge et antal nye linjer.
Så jeg bryder det op.

Når det er sagt, er det vigtigt at bemærke, at linjeskiftet (
) -tagget er et tomt tag, så du behøver ikke at lukke det.

Formatering af tekst i HTML

formatering af tekst i HTML

Det næste trin er at formatere din tekst i HTML. Det er her du kan angive, om du vil have din tekst til at komme ud med fed skrift, kursiveret, understreget, underskrevet, overskrevet osv. Dette er en grundlæggende vejledning, så dette afsnit vil ikke være alt-til-alt-til-formatering. I stedet inkluderer vi kun nogle grundlæggende formateringskoder. Processen til brug af andre formateringsformater er enkel – find bare det ønskede tag, og gå videre:

Brug af fed: Han er en dreng kommer ud som Han er en dreng

Brug af kursiv: Han er en dreng kommer ud som Han er en dreng

Understregning af tekst: Han er en dreng kommer ud som Han er en dreng. Det er værd at bemærke, at tag blev udskrevet i HTML 4.01 og blev omdefineret til at repræsentere stilistisk forskellig tekst i HTML5. Som et resultat anbefales det at bruge CSS til at indikere tekst, der skal understreges. Da denne artikel er en grundlæggende guide, holder vi den enkel.

Brug af abonnement: Han er en dreng kommer ud som Han er en dreng

Brug af superscript: Han er en dreng kommer ud som Han er en dreng

For andre tags, der kan bruges til at formatere, kan du måske tage et kig på ordlisten i slutningen af ​​denne ressource, hvor vi har inkluderet masser af relevante HTML-tags.

Bestilte og uordnede lister

Før eller senere bliver du nødt til at oprette lister. Lister kunne bestilles (dvs. nummereret) eller ikke sorteret (dvs. unummereret).

Her er et eksempel på en ordnet liste:

  1. Punkt 1
  2. Punkt 2
  3. Konto 3

Sådan opretter du det:

  1. Punkt 1
  2. Punkt 2
  3. Konto 3

Her er et eksempel på en ikke-ordnet liste:

  • Punkt 1
  • Punkt 2
  • Konto 3

Sådan opretter du det:

  • Punkt 1
  • Punkt 2
  • Konto 3

Hvis det ikke allerede er indlysende. Her er en oversigt:

Det

  • tag bruges til at indikere hvert element på listen. Når du opretter en liste, kan du bruge
      tag for at indikere en ordnet liste (“o” = bestilt og “l” = liste) eller