Hvis du vil blive webmaster og lære hvordan man opretter en hjemmeside, kan du finde udsigten til at få styr på HTML ganske skræmmende.

Dette er noget, der dog ikke kan undgås, da langt størstedelen af ​​webstedets landingssider, du besøger, vil være skrevet og struktureret ved hjælp af HTML-elementer. Faktisk er HTML nu brugt af mere end 74 % af alle kendte websteder, mens dette sprog også hjælper med at forbedre alt fra designet af dit websted til kvaliteten af ​​det indhold, det indeholder.

I denne guide vil vi udforske de grundlæggende principper for HTML og dets potentielle anvendelser, før vi ser på eksempler på de enkelte elementer, som du bruger, når du koder din hjemmeside.

Hvad er HTML?

I enkle vendinger, HTML repræsenterer standardopmærkningssproget til oprettelse af websider online. Det står for Hyper Text Markup Language, og dets mest primære funktion er at etablere struktur, layout og præsentation af individuelle landingssider. Selvom webbrowsere ikke direkte viser HTML-sprog, spiller det en afgørende rolle i at hjælpe med at skabe et synligt, tilgængeligt og brugervenligt websted.

HTML er også understøttet af en række individuelle elementer, som gradvist bygger websider, strukturerer præsentationen af ​​indhold og bringer din hjemmeside til live. Disse elementer er skabt og indeholdt i 'tags', som definerer alternative dele af indhold såsom overskrifter, afsnit og lignende eksempler.

Vi vil udforske disse elementer og deres konstruktion mere detaljeret nedenfor, mens vi også ser på, hvordan de kan tilpasses til at introducere farver, links og variabel typografi til din hjemmeside.

Hvor bruges HTML?

Som vi kan se, er den mest almindelige applikation til HTML designet af de individuelle landingssider, der udgør din hjemmeside. Dette er ikke den eneste anvendelse af det populære kodningsværktøj, men forståelsen af ​​dets yderligere anvendelser vil hjælpe dig med at få mest muligt ud af sproget som ny webmaster. Så her er nogle af de yderligere måder, hvorpå HTML kan anvendes:

• Opret tilpassede elementer på en eksisterende side. Hvis du har tænkt dig at tillade blogindlæg kommentarer eller offentliggørelse af brugergenereret indhold på dit websted, kan du bruge HTML-kodefragmenter til at aktivere dette. Disse elementer vil gøre det muligt for brugere at fremhæve søgeord, indlejre links og formatere kommentarer afhængigt af de begrænsninger, du har indført som moderator.
• Opret yderligere indhold til e-mail. E-mail bruger også HTML som sprog for rige tekstbeskeder, som indeholder links, tekst og en række andre elementer, som ikke kan vises i almindelig tekst alene. Så hvis du ønsker at dele en e-bog, der relaterer til dit websted via e-mail, kan du bruge HTML til at optimere virkningen af ​​dit budskab.
• Forstå offline hjælpedokumenter, der er installeret på din computer. Interessant nok bruges HTML som formatet til computerbaserede hjælpedokumenter, der er tilgængelige offline. Grundlæggende kendskab til HTML kan derfor hjælpe dig med at forstå problemer med din hardware og løse dem hurtigere, hvilket igen kan sikre, at du er i stand til at gendanne din hjemmeside hurtigere i tilfælde, hvor den er gået offline.

HTML-sidestruktur

Før du kan bygge en HTML-side, skal du have det grundlæggende på plads.

Typisk vil en side bestå af tre strukturelle elementer:

1. header: Overskriften indeholder indhold, der er relevant for alle sider på dit websted, såsom et logo eller webstedsnavn og et navigationssystem. Overskriften ses på hver side.
2. Hovedlegeme: Dette optager det største område på en webside. Den indeholder indhold, der er specifikt for den side, der vises.
3. footer: Sidefodsindhold omfatter normalt kontaktoplysninger, en leveringsadresse eller juridiske meddelelser. Ligesom sidehovedet vises sidefoden på hver side, men den er placeret nederst.

Sådan ser disse grundlæggende strukturelle elementer ud, når de kommer sammen:

Her er et andet eksempel, hvor man bruger header-tags og paragraf-tag til at strukturere indhold æstetisk. Derudover har vi indsat et footer-tag for indhold under hoveddelen af ​​en side:

HTML-tags

Udgangspunktet for enhver HTML-kode er individuelle tags, som kan bruges til at skabe alle afgørende elementer og hjælpe med at strukturere dine websider.

Nedenfor vil vi tage et kig på de mest almindelige tags, før vi undersøger, hvordan de kan udnyttes til at generere specifikke elementer på siden:

Overskriftskoder

Alle online dokumenter, inklusive websider, begynder med en overskrift. Disse er konstrueret ved hjælp af HTML-tags, hvor sproget i øjeblikket tillader op til seks elementer i varierende størrelse, som også gør det muligt for dig at strukturere dit indhold med yderligere titler, undertekster og fremhævede linjer med fed tekst. For at starte din overskrift skal du blot sætte den relevante tekst foran , , , , eller tag afhængig af den ønskede størrelse.

Du skal derefter anvende et afsluttende tag i slutningen af ​​overskriften for at indkapsle teksten, og vil blive vist som følger i HTML-format:

Når det er bekræftet, vil dette oversættes til følgende æstetik på dit websteds landingsside:

Her er de forskellige størrelser af de variable overskrifter tydelige at se, ligesom det er det faktum, at browseren tilføjer en linje før og efter overskriften. Du vil også bemærke, at det afsluttende tag i slutningen af ​​overskriftsteksten har en lidt anderledes æstetik, men vil dække dette i det følgende kapitel, da vi ser på at bruge tags til at definere specifikke elementer.

Afsnitsmærker

Et lignende princip anvendes på startafsnitstags, som er afbildet af . Dette giver dig mulighed for at strukturere dit indhold og opdele det i relevante afsnit, hvilket igen udmønter sig i en lettere og mere problemfri læseoplevelse. Endnu en gang tag skal placeres i begyndelsen af ​​den relevante tekst, før den alternative afsluttende tag anvendes i slutningen for at fuldende effekten. I modsætning til overskriftstags er der dog ingen numeriske forskellige, der kan ændre størrelsen på teksten i afsnittet.

Uden for HTML-formatet vil dette opdele teksten som følger på din færdige webside:

Linjeskift-tags

De første eksempler repræsenterer de mest basale HTML-tags, men der er andre, der bruger et andet format og alternative afslutningsmuligheder. Tag f.eks. linjeskift, som skaber en skelnen, hvor tekstlinjer brydes og fortsættes på den følgende linje. Der er en kerneforskel mellem linjeskift og afsnit inden for HTML, da mens sidstnævnte er standardblokelementer, der indeholder tekst, skaber førstnævnte adskillelse inden for en eksisterende element.

På grund af dette repræsenterer linjeskift et tomt element i HTML og er derfor ikke defineret af hverken åbne- eller lukketags. I stedet er de afbildet af tag, som kan indsættes i eksisterende elementer til at opdele tekst og potentielt fremhæve vigtige oplysninger. Det enkelte mellemrum mellem karakteren og skråstregen fremad er afgørende, da tagget ellers ikke kan genkendes i HTML-format.

Når det er anvendt, vil dette opdele teksten som følger:

Som du kan se, kan du anvende linjeskift, så ofte du vil i et eksisterende afsnitselement, så længe de tilføjer værdi og gør informationen lettere at fordøje. Du vil også se, at de indledende og afsluttende afsnits-tags forbliver uændrede, med linjeskift-tags, der bruges til at ændre layoutet af teksten inkluderet i.

Dette er et af eksemplerne på, hvordan HTML-tags kan bruges til at ændre eksisterende elementer, hvilket spiller en nøglerolle i at definere det visuelle layout af dine websider og indhold.

Horisontale linjer

På samme måde er der andre tags, der kan bruges inden for element eller for yderligere at adskille tekst på din webside. En af de mest brugte er tag, som hjælper med at skabe et tomt element, der tegner en visuel, vandret linje mellem alternative sektioner af et onlinedokument. Du vil måske placere en linje mellem to tekster, for eksempel for at genfokusere læseren eller blot introducere et nyt visuelt element. Sådan laver du sådan en pause i HTML:

Her fremhæver bruddet mellem hr-tegnene og den fremadgående skråstreg konstruktionen af ​​et tomt element, mens der endnu en gang ikke kræves noget lukketag for at fuldføre effekten. Dette vil skabe følgende visualisering:

Billed-tags

Billedtags repræsenterer også tomme elementer i HTML, hvilket igen betyder, at de ikke har et afsluttende tag. Da de kun indeholder attributter, der vedrører URL'en på det billede, som du indlejrer på webstedet, defineres de blot af tag i begyndelsen af ​​elementet. Disse kan placeres hvor som helst på din hjemmeside, selvom det er usædvanligt at inkludere dem i eksisterende elementer såsom afsnit eller overskrifter. Her er, hvordan et typisk HTML-billedtag vil præsentere sig selv:

Du bør også angive alternativ tekst til dit billede, som hjælper folk med at se det i tilfælde af langsomme indlæsningstider eller brug af skærmlæser. På denne måde, hvis browseren ikke kan finde et billede, vil den vise værdien af ​​den alternative attribut til seerne. Dette bruger endnu en gang billedtagget, men inkluderer et andet sæt attributter:

HTML-elementer

Tidligere har vi set på, hvordan simple HTML-tags bruges til at definere on-page-elementer, mens vi også undersøgte, hvordan de kan tilpasses yderligere ved at bruge tomme elementer, der indeholder billed- og linjeskift-tags. Dette hjælper os med at forstå forholdet der eksisterer mellem tags og elementer, og hvordan de kan bruges til at definere forskellige typer indhold på din hjemmeside.

Mens alle aspekter af HTML-sproget er repræsenteret af et tag, skal et defineret element, der inkluderer indhold, have både et start- og et afsluttende tag. Så overskrifter og afsnit er HTML-elementer, fordi de bruger start- og afsluttende tags til at indkapsle og udvide den relevante tekst. I modsætning hertil indeholder tomme elementer enten attributter eller slet intet indhold, hvilket gør det muligt at bruge dem i eksisterende elementer uden behov for et afsluttende tag.

Definition af HTML-elementer

Når du bruger eksempler som overskrifter og afsnit, er den korrekte anvendelse af start- og luk-tags afgørende. Det er startmærket (f.eks eller ), der definerer det pågældende element, for eksempel, mens det afsluttende tag sikrer, at dette element ikke fortsættes på tværs af resten af ​​websiden. Hvis du undlader at bruge lukningen tag i slutningen af ​​det ønskede afsnit, for eksempel, vil teksten vises i en enkelt blok, der er uskøn og ekstremt svær at læse.

Alle afsluttende tags er identiske med starttags, bortset fra at førstnævnte har en skråstreg foran de relevante tegn. Så i tilfælde af en overskrift, vil det afsluttende tag være , mens du altid vil bruge til afsnit for at definere bruddet i teksten. Dette kræver opmærksomhed på detaljer under kodning, og det er vigtigt at bemærke, når du programmerer overskrifter, at det tal, du bruger (såsom h1 eller h1), anvendes i både start- og sluttags.

Brug af indlejrede HTML-elementer

På dette stadium er det tydeligt at se, at HTML-dokumenter og websider er dannet af et træ af forskellige elementer, som fungerer som byggestenene for en række aktiver. Vi har også set på, hvordan disse elementer kan dannes og bruges til at strukturere onlineindhold, og vi vil fortsætte dette nu ved at se på indlejrede HTML-elementer.

Ligesom tomme elementer og enkeltstående tags (som kan inkorporeres i definerede HTML-elementer, såkaldte indlejrede elementer kan også rummes i indhold såsom overskrifter og afsnit. Disse omfatter eksempler som fed og kursiv bogstaver og understreget tekst, mens de kan anvendes til at tilføje personlighed til dit indhold og trække læserens øje til specifikke interessepunkter.

Fed, kursiv og gennemstreget tekst i HTML

Lad os sige, at du vil fremhæve et ord i et eksisterende afsnitselement. Du kan opnå dette ved at gøre det fed ved at bruge simple tags inden for standarden element. Ved at bruge HTML programmerer du dette som følger:

Her har det indlejrede element både et start- og et afsluttende tag, som hver følger et lignende format som dem, der er knyttet til overskrifter og afsnit. De kan bruges problemfrit i eksisterende elementer, og i dette tilfælde vil det give følgende resultater:

Lad os nu sige, at du også gerne vil ændre typografien af ​​dette ord, så det også er kursiv. Dette kan opnås ved blot at tilføje et andet indlejret element, som skal kodes sådan:

Som du kan se, er start- og afsluttende kursiv-tags simpelthen blevet indarbejdet i element. Dette vil nu transformere indholdet i elementet, så det ser ud som følger:  

Selvfølgelig kan du beslutte, at du foretrækker at fremhæve dette ord på en anden måde. Du kan derfor bruge et alternativt indlejret element, såsom gennemstregning (som er repræsenteret af tags og . Disse tags kan anvendes på samme måde i element, der vises som følger i HTML:

I dette tilfælde vises teksten som følger på dit dokument eller din destinationsside:  

Dette giver et indblik i elementer, der kan dannes af tags, som igen definerer strukturen på dine websider og det indhold, de indeholder. Ikke kun dette, men tomme og indlejrede elementer kan også bruges til at definere dit indhold yderligere.

HTML-attributter

Hvis tags er byggeklodserne, der konstruerer og definerer elementer, så kan HTML-attributter bruges til at tilpasse deres karakteristika (såsom stil, farve og sprog. Alle HTML-elementer har kerneattributter, som giver kerneoplysninger og altid er specificeret i stat-tagget . De har en tendens til at komme i par, så de vil ofte vises i følgende format: navn = "værdi."

Enkelt sagt repræsenterer navnet den egenskab, du vil indstille, mens værdien relaterer sig til de specifikke kriterier, som du ønsker at inkorporere.

Der er et stort antal attributter, der kan anvendes på dine HTML-elementer, men de, der er mest relevante for nye webmastere, er:

'lang'-attributten

Den mest grundlæggende egenskab definerer dokumentets sprog og dets elementer. Det erklæres ved hjælp af 'lang'-attributten, og selvom det let kan overses, har det fordelen af ​​at gøre indholdet mere tilgængeligt for skærmlæsere og søgemaskiner. Det vil normalt blive præsenteret i begyndelsen af ​​dokumentet i følgende format:

Efter lang-attributten angiver de to første bogstaver sproget (som er engelsk i dette tilfælde). Efter bindestregen etablerer de næste to bogstaver dialekten, selvom dette ikke vil være til stede for alle sprog. Det er vigtigt, at du får denne egenskab rigtigt, hvis du skal nå ud til dit publikum.

Attributten 'align'

Vi har allerede berørt formatet af HTML-attributter (navn=”værdi”), og den bedste udformning af dette sker, når du forsøger at tilpasse indholdet i dine elementer. Du kan beslutte at centrere alle afsnit på en bestemt side, for eksempel, hvor justeringen er den egenskab, du ønsker at indstille. Efterfølgende er 'center' værdien af ​​attributten, selvom du har valget mellem at justere din tekst til venstre eller højre.

Dette vil justere din elementer i midten af ​​siden, og skab et ensartet layout, der passer til din hjemmesides specifikke karakter (se nedenfor):

'href'-attributten

Hvis du skal bygge en synlig hjemmeside, er det vigtigt, at du inddrager både indgående og udgående links. Opbygning af en linkportefølje, der inkluderer backlinks til interne landingssider, er også en holdbar strategi, så du bliver nødt til at lære, hvordan du koder disse i HTML.

HTML-links er defineret med tagget, som inkluderer destinationslinket sammen med den tilknyttede ankertekst, der skal indeholde URL'en. Det er 'href'-attributten, der angiver webstedsadressen, men denne er indarbejdet som en del af starttagget. Det er kodet i HTML som følger:

Dette fremhæver tydeligt forskellen mellem start- og sluttagget og vil oversætte som følger på din landingsside:

Attributten 'farve'

Dette er endnu en vigtig egenskab, da brugen af ​​farver kan puste liv i din hjemmeside og samtidig være med til at skabe vigtige kontraster og en stærk designæstetik. I HTML kan en farve specificeres ved at bruge dens navn, selvom det også er muligt at bruge en RGB- eller en HEX-værdi for at nå dette mål. Den førstnævnte mulighed er dog den nemmeste at følge, mens den også kan anvendes på overskrifter, afsnit og andre elementer på din side.

Dette er en stilattribut, hvor dit valg af farve repræsenterer den værdi, du gerne vil indstille. Når du f.eks. anvender farven rød på hovedoverskriften, ser det sådan ud:

Når det er anvendt, vil dette element blive vist som følger på dit websted:

Endnu en gang er der en klar skelnen mellem start- og afslutningstags, der definerer elementet, mens dette er en af ​​de nemmeste egenskaber at anvende i HTML. Det fremhæver også yderligere navnet = "værdiformatet af HTML-attributter, hvilket gør processen med at lære og anvende disse meget nemmere på hele dit websted.

Test det selv

Med en grundlæggende forståelse af HTML og dets individuelle elementer er næste trin at gennemføre nogle simple projekter og anvende din teoretiske viden til at løse praktiske udfordringer.  

I øvelsen, der er beskrevet nedenfor, har vi vist en tekst undtagen og bedt om at formatere forskellige aspekter ved hjælp af HTML. Brug guiden og alt det, du har lært indtil nu, til at fuldføre udfordringen, mens du forbereder dig på at kode din egen hjemmeside.

spørgsmål:

1. Udfyld header-elementet med det korrekte afsluttende tag.
2. Gør overskriften fed.
3. Indsæt en vandret linje under overskriften.
4. Brug farveegenskaben og skyggen 'Tak for besøget' i grøn
5. Indsæt dette hyperlink (https://www.w3schools.com/html/) i ankerteksten "Få flere oplysninger".
6. Forrest på siden skal du bruge formatet name=”værdi” til at venstrejustere afsnittene

HTML sprog statistik og fakta

1. HTML-, hoved- og kropselementerne har været en del af HTML-specifikationen siden midten af ​​1990'erne, og indtil for få år siden var de de primære elementer, der blev brugt til at give struktur til HTML-dokumenter. Situationen har dog ændret sig dramatisk i de sidste par år, da HTML5 har tilføjet en række nye tags, der kan bruges til at tilføje rig semantisk betydning til strukturen af ​​et HTML-dokument.
2. HTML-dokumenter er påkrævet for at starte med en dokumenttypeerklæring (uformelt en "doctype"). I browsere hjælper doctype med at definere gengivelsestilstanden. HTML5 definerer ikke en DTD; Derfor er doctype-erklæringen i HTML5 enklere og kortere.
3. Mobilbrowsere har fuldt ud overtaget HTML5, så det er lige så nemt at skabe mobilklare projekter som at designe og konstruere til deres mindre touchscreen-skærme - derfor populariteten af ​​Responsive Design. Der er nogle gode metatags, som også giver dig mulighed for at optimere til mobilen.  
4. 78 % af indholdsudviklerne er enige om, at strukturen er egnet til at skabe mobile apps, og 68 % siger, at den er egnet til at designe alle slags apps.
5. HTML5 kommer også med en række fantastiske API'er, der giver dig mulighed for at opbygge en bedre brugeroplevelse og en mere stærk, mere dynamisk webapplikation - her er en hurtig liste over indbyggede API'er:
   • Træk og slip (DnD)
   • Offline lagerdatabase
   • Administration af browserhistorik
   • Dokumentredigering
   • Tidsindstillet medieafspilning
6. HTML5 er ikke kontrolleret af én virksomhed. En af dens bedste funktioner ligger i, at det er en åben standard. Udviklere har friheden til at lade deres kreativitet flyde og tilføje så mange funktioner og funktioner, som de overhovedet kan.
7. Sammenlignet med andre browsere sørger hver Google Chrome-opdatering for at inkludere understøttelse af HTML5. Derudover er YouTubes standardafspiller nu HTML5, og Googles Flash-annoncer bliver nu konverteret til HTML5.
8. Brug af HTML5 af udviklere (efter region):
   • Nord- og Latinamerika – 70 %
   • Sydamerika – 61 %
   • ASPAC – 60 %
   • Australien - 60%
   • Europa – 59 %
   • Afrika – 50 %

Konklusion

Mens HTML først blev skabt så sent som i 1991 (med den første version af kodningssproget efterfølgende lanceret i 1995), er det hurtigt blevet et afgørende værktøj i design af funktionelle og visuelt tiltalende hjemmesider. HTMLs indflydelsesniveau fortsætter også med at udvikle sig, og den seneste iteration (HTML5) bliver overtaget af et stigende antal websteder over hele kloden.

I denne henseende er det at lære de grundlæggende elementer i HTML, og hvordan man anvender dem, det vigtigste trin, du vil tage for at etablere et vellykket, synligt og i sidste ende konkurrencedygtigt websted.