De grunnleggende HTML-spørsmålene du bør legge til

De grunnleggende HTML-spørsmålene du bør legge til / programmering

HTML har eksistert lenge, så det er på tide du lærte det grunnleggende. Hva er det, hvordan det fungerer, og hvordan du skriver noen vanlige elementer i HTML.

Før du begynner, sørg for at du leser vår guide til gratis online HTML-redaktører. 5 Beste gratis online-HTML-redaktører for å teste koden. 5 Beste gratis online-HTML-redaktører for å teste koden din For tidspunkter når du bare vil snike rundt med en liten HTML-kodebit Du kan tilpasse det til din smak, en HTML-editor på Internett vil tjene deg bedre. Les mer og de beste nettstedene for kvalitets HTML-eksempler 8 Beste nettsteder for kvalitets HTML-kodingseksempler 8 Best nettsteder for kvalitet HTML-kodingseksempler Det er noen kjempebra nettsteder som tilbyr godt utformede og nyttige HTML-kodende eksempler og opplæringsprogrammer. Her er åtte av våre favoritter. Les mer .

Hva er HTML?

HTML er språket som brukes til å konstruere nettsider. HTML står for Hypertext Markup Language og er enkelt et sett med instruksjoner for nettleseren din. Ved å bruke disse instruksjonene, viser nettleseren hva en nettside skal se ut.

Det er viktig å forstå at det er en markup språk, ikke en programmering Språk. Programmeringsspråk lar deg løse problemer, for eksempel matematiske ligninger, manipulere data eller flytte et videospilltegn.

Du kan ikke skrive noen logikk i HTML. Det handler bare om layout.

Hva ser HTML ut som?

HTML består av flere elementer kjent som “tags”. Etiketter er instruksjoner for styling en bestemt del av nettsiden din. Gå tilbake til konstruksjon, HTML er planene, og tagger er spesifikke funksjoner som vinduer eller dører.

Slik ser en veldig enkel nettside ut i HTML:

  MUO Nettsted    

Etiketter i HTML er forhåndsdefinerte, og angi vanlige funksjoner som bilder, koblinger til andre nettsider, knapper og mer.

De aller fleste tagger må være åpen og lukket. Dette definerer bare noen funksjon, med tekst, bilder eller andre tagger inne i den, og avsluttes deretter definisjonen. Å tenke tilbake til hus, å åpne taggen, er som å si “start vinduet her”, og lukking av taggen er som å si “her er der vinduet slutter”.

HTML-koder vises ikke på nettstedet ditt. Nettleseren din følger instruksjonen, men viser aldri den til noen besøkende. Det er imidlertid ikke hemmelig. Alle kan se på HTML-en din når du publiserer nettsidene dine.

Mens det er et stort antall forskjellige HTML-koder, trenger du ikke å lære dem alle før du kan kode et nettsted. I dag lærer du hvordan du skriver noen vanlige merker, og hva de kan brukes til.

Hva er HTML-taggenattributter?

En siste ting å vite om tagger er egenskaper. Attributter definerer spesielle egenskaper for koder. Hvis koder er vinduer og dører, angir attributter spesifikke bygningsdetaljer. Dette kan være rammens bredde og høyde, om vinduet åpnes, eller døren har en lås.

Attributter er inkludert i åpningstegnet, slik:

Du kan ikke bare lage dine egne koder eller attributter. Attributter og koder er forhåndsdefinert av World Wide Web Consortium (W3C).

Hva er HTML5?

HTML5 er den nyeste versjonen av HTML. Den inneholder flere nye koder, attributter og funksjoner.

Siden HTML er et sett med instruksjoner, tolker forskjellige nettlesere noen ganger det annerledes. En nettleser kan bestemme at vinduer og dører skal males svart med mindre du sier noe annet.

Mens nettlesere endelig har begynt å bli ganske konsistente med hverandre, kan du likevel bli fanget ut noen ganger med helt nye funksjoner. Kanskje Google Chrome har implementert en ny tag, men Microsofts internett Explorer har ennå ikke.

For det meste vil websidene dine sees på alle de store nettleserne, men det er fortsatt verdt å ha en rask test før du publiserer noe, spesielt hvis du bruker nyere koder, som kanskje ikke støttes av alle nettlesere ennå.

Hvis du vil vite mer om HTML5, så ta en titt på vår HTML5 startveiledning Kom i gang med HTML5 Kom i gang med HTML5 Du har hørt om HTML5. Alle bruker det. Det blir heralded som frelseren på internett, slik at folk kan lage rike, engasjerende nettsider uten å ty til bruk av Flash og Shockwave. Les mer .

Slik kommenterer du HTML

Som mange andre språk, markering eller programmering, har HTML muligheten til å “kommentere ut” blokker med markup. En kommentar er noe som ignoreres av nettleseren. Dette kan være et notat for å minne deg på hva denne delen av nettstedet ditt gjør.

Ved å kommentere utmerke, instruerer du nettleseren til å ignorere en eller flere koder. Dette kan være nyttig å fjerne funksjonalitet, eller å skjule et stykke av nettstedet ditt uten å slette koden.

Når en nettleser ser en kommentar, forstår den det som “Ikke bruk disse instruksjonene før jeg sier noe annet”. Kommentarer består av en “åpning” kommentar og a “lukking” kommentar-akkurat som koder.

Her er et eksempel:

 

Kommenteringskode er gjort akkurat på samme måte:

I stedet for en melding legger du merket mellom kommentarmerkene.

Slik legger du inn bilder i HTML

Sette inn bilder i HTML-en din, gjøres med bilde-taggen:

MakeUseOf Logo

Legg merke til hvordan kodenavnet heter img, og det er to attributter. De src Attributt angir hvor du skal finne bildet, og alt tag er en alternativ tekstbeskrivelse, hvis bildet ikke kan lastes av noen grunn.

Bildetiketten trenger ikke lukking, i motsetning til de fleste andre tagger.

Slik endrer du skriften i HTML

Skrifter kan endres ved hjelp av font tag og ansikt Egenskap:

MUO Arial Text

Skriftstørrelsen kan enkelt endres ved hjelp av størrelse Egenskap:

MUO Big Text

Hvis du vil endre skriftfargen, kan dette enkelt gjøres med farge Egenskap:

MUO Rød tekst

Disse egenskapene er unike for font stikkord. Hvis du ønsker å bruke en annen tag, kan du rede koder, ved å plassere den ene i den andre:

MUO Rød tekst

Slik legger du til en lenke i HTML

Lenker kan legges til ved hjelp av en stikkord:

MakeUseOf.com

De href Attributtet er destinasjonen til lenken din.

Hvordan lage et bord i HTML

HTML-tabeller innebærer å nesting flere forskjellige koder. Du må begynne med en bord stikkord:

Legg nå noen rader ved hjelp av tr stikkord:

Til slutt bruker du td tag for å lage tabellceller, som også vil opprette kolonnene:

Det er mulig å gå overbord og gå ganske vill med bordoppsettet ditt, men det er vanligvis best å holde ting enkelt hvis mulig. Tidligere ble bord brukt til å strukturere en nettside, men denne øvelsen er datert og ser forferdelig ut. Hold tabeller bare for å overføre data til leseren.

Bruke CSS med HTML

Disse eksemplene har dekket grunnleggende, men hvis du vil bli veldig kreativ, må du bruke CSS. Cascading Style Sheets gir deg mye større kontroll over ditt nettsteddesign, og lar deg bruke ganske mye kode mellom ulike deler av nettstedet ditt.

Mens vi har opplæringsprogrammer om å lære CSS 5 Babysteg for å lære CSS og bli en Kick-Ass CSS Sorcerer 5 Babysteg for å lære CSS og bli en Kick-Ass CSS Sorcerer CSS er de mest viktige endringswebsider som har sett i det siste tiåret, og det banet vei for adskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer og rask CSS-eksempler 10 Enkle CSS-kodeeksempler Du kan lære om 10 minutter 10 Enkle CSS-kodeeksempler Du kan lære om 10 minutter Vi skal gå over hvordan du lager et inline-stilark slik at du kan øve dine CSS ferdigheter. Da flytter vi på 10 grunnleggende CSS eksempler. Derfra er fantasien din grense! Les mer, det er fortsatt noe oppsett du kan gjøre i HTML.

Hvis du vil skrive CSS sammen med HTML, kan du bruke stil Egenskap. Denne egenskapen bruker bare CSS til taggen den brukes på:

Mens denne måten fungerer bra, vil du finne det vanskelig å vedlikeholde hvis du har mye oppslag som krever lignende styling.

Jo bedre måte er å bruke stil tag, plassert inne i hode stikkord. Her kan du definere CSS for hele siden:

    

Stil-taggen har et attributt på text / css. Dette kreves for å la nettleseren din vite den nøyaktige stilen du kan forvente i taggen.

Den tredje og siste måten å bruke CSS er via en ekstern fil, ved hjelp av link stikkord. Dette kobler HTML til CSS lagret i sin egen fil, noe som er flott hvis du har en stor mengde av det:

Det er flere attributter i bruk her. De rel attributt erklærer lenken som stilark. Typen av “text / css” er igjen definert i type attributt og href Attributtet er hvor du finner den eksterne filen.

Hvordan lager du et nettsted med HTML?

Som du har sett, er HTML egentlig ikke så ille, er det? Ved å bruke noen enkle koder og attributter, kan du raskt sette sammen en nettside, selv om du aldri har skrevet HTML før!

Hvis du ønsker å skrive en komplett nettside, så sørg for at du tar en titt på vår nybegynners veiledning for å lage et nettsted. Hvordan lage et nettsted: For nybegynnere Hvordan lage et nettsted: For nybegynnere i dag, vil jeg lede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke vær redd hvis dette høres vanskelig ut. Jeg vil lede deg gjennom det hvert skritt av veien. Les mer .

Utforsk mer om: CSS, FAQ, HTML, Webutvikling.