Accentsconagua

Begynnernes guide til webdesign Del 1

Kode
Share

Gjennom hele denne serien lærer du hvordan du lager et nettsted ved hjelp av det siste innen webdesignteknikker (HTML5 og CSS3). Denne serien er rettet mot de som har absolutt null tidligere kunnskaper om webdesign.

Også tilgjengelig i denne serien:

  1. Begynnernes guide til webdesign: Del 1
  2. Begynnerveiledningen til webdesign: Del 2
  3. Begynnernes guide til webdesign: Del 3

Moderne nettleser

Siden vi skal lage våre nettsider ved hjelp av de nyeste standardene (HTML5 og CSS3), trenger vi en moderne nettleser som kan forstå det siste innen webteknologi.

Versjoner av Microsofts Internet Explorer-nettleser under IE8 vil ikke kutte den. Hvis du bruker IE7 eller under, laster du ned en av nettleserne nedenfor.

Hvis du allerede bruker en annen nettleser, må du sjekke at den samsvarer med minimumskravene nedenfor for best mulig ytelse.

  • Mozilla Firefox 3+
  • Google Chrome
  • Apple Safari 4+
  • Opera 10+
  • Microsoft Internet Explorer 8

"Hvorfor trenger jeg en bestemt nettleser?" du kan spørre. Vel, siden HTML5 er relativt ny, forstår eldre nettlesere ikke hvordan man leser koden og gjør den riktig til en nettside.

Tekstredigerer

HTML-filer er bare tekstfiler med en. Html-utvidelse, slik at du ikke trenger noen spesialisert eller dyr programvare som Dreamweaver for å lage dem. Faktisk kommer datamaskinen din forhåndsinstallert med programvare som du kan skrive websider i - Notisblokk på Windows, eller 'TextEdit' (i 'vanlig tekstmodus') på Mac.

Mens programvaren er forhåndsinstallert på datamaskinen Vil gjøre, det er langt fra det beste. Jeg anbefaler å laste ned Notepad ++ hvis du er på Windows eller TextWrangler på Mac. Begge programmene er helt gratis og tilbyr en rekke funksjoner som er nyttige for webutviklere, for eksempel syntaksutheving, tabbed filredigering og linjenummering.

For Mac-brukere anbefaler jeg at du kjøper enten TextMate, Coda eller Espresso. Windows-brukere, prøv E-TextEditor.



Introduksjon til HTML

Hvert nettsted på internett er skrevet i Hyper-Text Markup Language (HTML). HTML-språket har vokst og blitt utvidet gjennom årene da nettet har blitt mer vanlige og nettsteder finner seg selv som krever nye funksjoner.

HTML-språket vedlikeholdes av World Wide Web Consortium (W3C), og den nyeste spesifikasjonen er for øyeblikket HTML 5, som har lagt til en rekke nye funksjoner på språket, og bidrar til å bane vei til flere interaktive og funksjonsrike websider.

En enkel HTML-side ser ut som:

    Hei Verden!   
Hei, og velkommen til min hjemmeside.

Ovennevnte kode vil opprette følgende nettside når den åpnes i en nettleser:


HTML er et veldig enkelt språk å lære. Du setter ganske enkelt inn 'tagger' i innholdet ditt, som beskriver hvordan hver bit av innhold skal vises i en nettleser.
For eksempel vil du sette inn koder i siden din der du vil at nye tekstavsnitt skal begynne, for å lage tekst en overskrift i dokumentet, for å sette inn bilder, koblinger til andre sider på nettstedet ditt eller andre steder på Internett osv..

HTML-koder er pakket innvendig < > vinkelbeslag. Ser på det forrige eksempelet, vil du se at alle 'tag' er et par. Vi har på toppen, og på bunnen.
informerer nettleseren om at alt inni taggparet er HTML-kode. De tag forteller nettleseren HTML-innholdet er avsluttet. "Slash" i den siste taggen betegner dette som "closing" -taggen.

MERK: De Linjen må være inkludert øverst på en hvilken som helst HTML5 for at den skal betraktes som «gyldig» kode. Denne linjen forteller nettleserens dokumenttype for resten av siden - med andre ord, hvilken versjon av HTML-dokumentet er merket opp slik at nettleseren kan gjøre det riktig.

De ... seksjonen som følger etter er hvor du plasserer informasjon om nettsiden som ikke vises på hovedsiden, men inneholder metadata om siden din for nettleseren.

Inne i seksjonen, vi har teksten "Hei, Verden!" innpakket innvendig ... tags.
Bokstavelig talt inneholder tittelen på den nåværende nettsiden som brukes av nettleseren for å navngi vinduet / kategorien:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_4.png"><br> <p>Følger <head> delen har vi <body>. Det er her det faktiske innholdet for nettsiden din er plassert. I kroppen har vi en <p> tag med en liten velkomsttekst inni.<br><p> markerer opp et avsnitt på siden din. For eksempel:</p> <pre> <p>En gang i et land langt, langt borte der bodde en prinsesse som levde lykkelig etterpå.</p> <p>Slutten.</p></pre> <p>Merker opp to avsnitt i teksten. Hvis vi skulle se det i en nettleser, ser vi følgende:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_5.png"><br> <p>Du lurer kanskje på hvorfor vi trenger disse <p> og </p> koder for å vise et avsnitt. Vel, hvis vi ikke gjorde det, og skrev nettsiden slik:</p> <pre> En gang i et land langt, langt borte der bodde en prinsesse som levde lykkelig etterpå. Slutten.</pre> <p>Siden vil se slik ut i en nettleser:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_6.png"><br> <p>Som du kan se, ignorerer nettleseren enhver formatering vi lager i filen. Vi kunne skrive vårt eksempel nettside som følger, og det vil vise det samme i nettleseren:</p> <pre> <!doctype html><html><head><title>Hei Verden!

Hei, og velkommen til min hjemmeside

Nettleseren er bare interessert i hva HTML-kodene forteller det å gjøre. Det vil ignorere alle hvite plasser du inkluderer i dokumentet (ekstra mellomrom, faner, nye linjer etc.)

Opprette en enkel nettside


Nå forstår du veldig grunnleggende om HTML, la oss lage vår første nettside! Bildet ovenfor er hva denne siden til slutt vil se ut.

Opprett en ny mappe et eller annet sted på datamaskinen din og kaller det 'html-from-scratch'. Bruk din foretrukne tekstredigerer, opprett en ny blank fil og lagre den i denne mappen som "min første nettside.html".
Skriv inn følgende i filen:

    HTML fra grunnen

Ovenstående er et grunnleggende HTML 5-filoppsett. Vi har erklært dokumenttypen på første linje, åpnet vår og tagger og sett "HTML From Scratch" som tittel for siden. Vi lukker hodet og åpner kroppen.

På linje 7 har vi tatt med en kommentar. Bruk kommentarer for å legge igjen ekstra info i koden din, som ikke vises på din nettside. Merk opp en kommentar ved å pakke inn teksten innvendig tags.

Til slutt lukker vi vår åpne kropp og html-koder for å fullføre dokumentet.

Overskrift

Fjern linje fra kildekoden og skriv ut følgende:

  
HTML fra grunnen

De tag er et nytt element introdusert i HTML5 som eksisterer for å markere og strukturere «overskrift» -delen av en nettside. Overskriften er den øverste delen av en nettside, vanligvis hvor nettstedets navn er.

Før HTML5 brukte vi

og
(eller noe lignende), men jeg vil ikke gå inn i detaljer om eldre spesifikasjoner av HTML som vi lærer den nyeste standarden.

VIKTIG: skal ikke forveksles med . De er begge helt forskjellige tagger.

Inne i vår header inkluderer vi a

stikkord. H1 brukes til å markere hovedrubrikken på siden din (i dette tilfellet navnet på nettstedet vårt). HTML inneholder header-koder fra 1-6, med

å være den største, mest viktige tittelen på siden ned til

.


Navigasjon

Deretter merker vi opp navigasjonsmenyen for nettstedet. Etter avslutningen , skriv ut følgende:

Denne delen av koden kan virke litt skummelt, men la oss slå den ned. Blokken ovenfor markerer opp et navigasjonsområde (