Innhold
- Hva er HTML?
- Tekstredigerere
- Notisblokk og TextEdit
- Braketter
- Atom
- Sammenligning av tekstredigerer
- Lag en HTML-fil
- Vis filen din i en nettleser
- Forklaring av koden
- Takk for at du leser
- Hjelp meg å få en bedre ide om hvor leserne mine står med HTML
Bret har skrevet HTML i mer enn 10 år, han er også dyktig i CSS, JavaScript og React. Bret er for tiden ansatt i TCN
Hva er HTML?
HTML står for Hypertext Markup Language. HTML er ikke et språk i tradisjonell forstand, men i den forstand at det er et verktøy laget av nøkkelord og kommandoer som programmerere bruker for å kommunisere med datamaskiner. HTML brukes av webdesignere til å lage nettsteder som Facebook, Twitter og HubPages. Disse eksemplene bruker også forskjellige andre verktøy, men for noen som først lærer om å designe nettsteder, er HTML det første verktøyet de bør lære seg å bruke.
Tekstredigerere
For å kunne skrive HTML, trenger du en tekstredigerer. En tekstredigerer er forskjellig fra programmer som Word som er designet for å skrive bøker eller essays. Programmer som Word har nyttige verktøy som avsnittstyling og auto-caps, men disse verktøyene er ikke nyttige for å skrive HTML. faktisk kan de gjøre det veldig vanskelig å gjøre det. Bruk aldri Word til å skrive HTML. På den annen side har tekstredigerere ofte verktøy designet spesielt for programmering. Det er mange tekstredigerere der ute, men jeg vil fokusere på de tre som jeg har brukt mest.
Notisblokk og TextEdit
Notisblokk, eller TextEdit hvis du bruker en mac, er sannsynligvis den mest grunnleggende en tekstredigerer får, og det er veldig enkelt å lage og redigere en HTML-fil med et av disse programmene. Ulempen er at verken Notepad eller TextEdit tilbyr noen nyttige verktøy for å skrive HTML, men hvis du bare vil skrive noe raskt og enkelt, vil en av disse være tilstrekkelig for å få jobben gjort.
Braketter
Braketter er et godt valg for nybegynnere. Det er bare litt vanskeligere å lære å bruke enn Notepad / TextEdit, og det har den ekstra fordelen at det ble laget HTML og CSS i tankene. Braketter inneholder mange verktøy som er nyttige når du skriver HTML, for eksempel automatisk komplettering av forslag, nåværende linjemarkør, direkte forhåndsvisning og brakettmarkering. Hvis du er usikker på hva disse verktøyene er eller gjør, er det greit, bare vet at de vil være veldig nyttige for deg i fremtiden hvis du velger å fortsette å bruke HTML. For alle som jobber med enkel HTML og CSS, er dette redaktøren jeg vil anbefale.
Atom
Atom er en veldig tilpassbar tekstredigerer. den har mange nyttige verktøy, og den kan brukes til mange programmeringsspråk i tillegg til HTML. Dessverre kan den enormt tilpassbare naturen være overveldende hvis du er ny i programmeringen. Jeg brukte Atom i mange prosjekter selv, og jeg liker det veldig bra som redaktør, men hvis du er ny i programmering eller bare gjør grunnleggende HTML og CSS, vil jeg anbefale en av de to andre redaktørene. Når det er sagt, vil jeg fremdeles oppfordre deg til å prøve Atom etter at du har blitt mer kjent med programmering eller har tenkt å gjøre et mer avansert prosjekt.
Sammenligning av tekstredigerer
| Program | Læringskurve | Nyttige verktøy |
|---|---|---|
Notisblokk / TextEdit | Minimal | Ingen |
Braketter | Liten | Nyttige verktøy for HTML |
Atom | Kan være overveldende | Mange avanserte verktøy |
Lag en HTML-fil
Når du har valgt en redaktør, åpner du den og oppretter en ny fil, og lagrer den som index.html (alle små bokstaver). ".Html" forteller nettlesere at denne filen inneholder HTML, og navnet "indeks" forteller nettleserne at dette vil være hjemmesiden din som standard startside. Du kan faktisk åpne denne filen i nettleseren din nå og se den, men det ville bare være en tom side, så la oss legge til litt tekst i den! Gå videre og kopier og lim inn teksten nedenfor i index.html-filen.
! DOCTYPE html> html lang = "no"> head> / head> body> Hello World !! VELKOMMEN TIL NETTSIDEN MIN !! / body> / html>
Vis filen din i en nettleser
Jeg vil forklare hva hver linje betyr, men la oss først se hvordan nettstedet ditt ser ut. Fortsett og lagre filen igjen. For å åpne filen din i en nettleser, høyreklikk på filen og velg "åpne med", og velg deretter nettleseren din (se bildet nedenfor).
Nettleseren din skal åpne opp til en side som ligner på bildet nedenfor.
Gratulerer, du har opprettet et enkelt nettsted! Det ser kanskje ikke ut som mye nå, men alle nettsteder begynner i det små. med litt mer tid og krefter, kan vi gjøre det til noe mye penere.
Forklaring av koden
Nå ville jeg ikke vært en veldig god lærer hvis jeg ikke forklarte koden vi nettopp brukte, så la oss gå videre og hoppe rett inn i den. Åpne filen din igjen, så går vi over koden linje for linje. Hvis filen din åpnes i en nettleser når du prøver å klikke den, høyreklikker du filen og velger "åpne med" igjen, men denne gangen velger du redigeringsprogrammet i stedet for en nettleser.
Denne første linjen forteller ganske enkelt nettleseren hvilket programmeringsspråk filen er i.
! DOCTYPE html>
Disse to linjene kalles åpnings- og lukkekoder. En åpningskode forteller nettleseren når en bestemt del av nettstedet ditt begynner, og de avsluttende kodene forteller hvor den vil ende. Det er tradisjonelt å legge inn linjer som er plassert mellom samsvarende koder, slik at teksten din blir lettere å forstå. ved å trykke på fanen på tastaturet, vil du lage et innrykk på den valgte linjen. Disse spesifikke kodene kalles HTML-tagger, og de forteller nettleseren at alt mellom dem er HTML. "Lang =" no "-delen er slik at nettleseren vet å forvente at den indre teksten skal være på engelsk.
html lang = "no"> / html>
Dette er hodetegnene. Tekst plassert mellom disse kodene vises ikke på nettstedet ditt. Denne delen er hvor koden går som forteller nettleseren hva nettstedets tittel er, hvor du kan få stylingsverktøy som spesielle skrifter, og hvor faneikonet for nettstedet ditt er lagret. For dette prosjektet vil vi la denne delen være tom.
hode> / hode>
Alt du vil skal vises på nettstedet ditt, vil du plassere mellom disse kroppskodene. Dette vil være "kroppen" til nettstedet ditt.
kropp> / kropp>
Dette er ren tekst. all ren tekst plassert i kroppskodene dine vises på nettstedet. Noen spesielle karakterer som "&" vises ikke på nettstedet ditt, men de er mulig å vise ved hjelp av tegnreferanser. For eksempel vil "Tom & Jerry" se ut som "Tom & Jerry" på nettstedet ditt.
Hei Verden!! VELKOMMEN TIL NETTSIDEN MIN !!
Alt i alt kan disse verktøyene brukes til å lage et enkelt nettsted.
! DOCTYPE html> html lang = "no"> head> / head> body> Hello World !! VELKOMMEN TIL NETTSIDEN MIN !! / body> / html>
Takk for at du leser
Takk for at du leser denne artikkelen. Hvis du har spørsmål, kan du legge igjen en kommentar nedenfor. Jeg hjelper mer enn gjerne med eventuelle problemer du måtte ha med dette prosjektet eller med HTML generelt. I tillegg er her noen lenker til noen av de mer nyttige nettstedene for HTML.
- HTML veiledning
Godt organisert og lett å forstå opplæringsveiledninger for nettbygging med mange eksempler på hvordan du bruker HTML, CSS, JavaScript, SQL, PHP og XML.
- Lær HTML - Gratis interaktiv HTML-veiledning
LearnHTML.org er en gratis interaktiv HTML-opplæring for folk som raskt vil lære HTML.
- Gratis opplæring om HTML, CSS og PHP - Bygg din egen nettside - hjemmesiden - HTML.net
Gratis opplæring om HTML, CSS og PHP - Bygg din egen nettside - Gratis opplæring om HTML, CSS og PHP - Bygg din egen nettside
Hjelp meg å få en bedre ide om hvor leserne mine står med HTML
Denne artikkelen er nøyaktig og sann etter best forfatterens viten. Innholdet er kun for informasjons- eller underholdningsformål og erstatter ikke personlig rådgivning eller profesjonell rådgivning i forretningsmessige, økonomiske, juridiske eller tekniske forhold.
