Bare Bones webside: 10 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:24

I dag skal vi lage en veldig enkel, bare bein webside fra bunnen av. Vi vil snakke om HTML -elementer, styling av nettsiden din (farger, fonter, justering, etc.), og til slutt hvordan du setter inn et bilde på nettsiden din!

På slutten av denne instruksen vil du ha de grunnleggende ferdighetene til å lage en webside fra bunnen av, og oppdage at koding ikke er så vanskelig som det virker!

Trinn 1: Bruke Notisblokk

Vi skal bruke Notisblokk på Windows for å lage vår første webside. Selv om en hvilken som helst tekstredigerer vil gjøre det, kommer notisblokk forhåndsinstallert på Windows-maskiner, så det er et flott utgangspunkt.

For å åpne notisblokken, gå til søkefeltet nederst til venstre på skjermen og skriv inn "Notisblokk". Velg deretter "Notisblokk" -appen som vises i søkeresultatene. Et nytt vindu skal åpnes.

Trinn 2: Legge til det grunnleggende HTML -dokumenttreet

Alle nettsider må følge en standard skjelettstruktur for at nettleseren din (Chrome, Firefox, Edge, Internet Explorer, Safari …) skal kunne behandle og vise nettsiden din.

Dette kalles html -dokumenttreet. I Notisblokk skriver du inn html "elementer" eller "tagger" som vist på skjermbildet. Kopier og lim inn også:

Trinn 3: Lagre som en.html -side

Nå som vi har vår grunnleggende html -struktur i Notisblokk, la oss lagre den slik at vi ikke mister noe arbeid, og slik at vi kan se endringene våre når vi går videre i Instructable.

1. Velg 'File'> 'Save as …' (Skjermbilde 1)
2. Endre filtypen til 'Alle filer' (skjermbilde 2)
3. Gi filen et navn du ønsker. Husk å legge merke til hvor du lagrer dokumentet på datamaskinen din, slik at du kan åpne det senere. MERK: Den viktigste delen av lagringen av denne filen er å legge ".html" til slutten av filnavnet. Dette gjør at datamaskinen din kan gjenkjenne den som en webside. Så hvis du vil gi filen navnet "min_nettside", må du legge til.html på slutten av det, f.eks. "min_webside.html"

Trinn 4: Legge til en tittel på websiden din

Så vi har den grunnleggende html -strukturen som trengs for at nettlesere skal tolke og vise nettsiden vår, men vi har ikke noe innhold. La oss endre det!

Det første vi bør gjøre er å gi en tittel til nettsiden vår. De fleste nettsider har en tittel. Dette er det som vises på fanen i nettleseren din (se skjermbilde). Jeg kommer til å gi websiden min tittelen "Taylors nettsted". For å gjøre dette må vi legge til et "tittel" -element.

Taylors nettsted

På dette tidspunktet vil du legge merke til at hver tag har en "åpning" -tag og en "avsluttende" tag. Som for eksempel

og.

Dette er for å se hvor tittelen starter, og hvor den slutter. Nesten alle html -tagger følger dette, men det er noen unntak.

Trinn 5: Legge til innhold på nettsiden din

Vel, vi har en tittel for nettsiden vår, men vi har fremdeles ikke noe faktisk innhold for den. La oss legge til litt teft!

Vi har lagt til en tittel på nettsiden vår ved hjelp av et "tittel" -element. La oss gi nettsiden vår en stor, oppsiktsvekkende overskrift ved å bruke et "h1" -element som er et overskriftselement.

Taylors nettsted

Velkommen til min webside

Trinn 6: Se på våre endringer så langt

Vi har en tittel, vi har litt innhold. La oss sjekke siden vår for hvordan det kommer så langt.

1. Lagre filen i notisblokken
2. Gå til der du lagret filen og dobbeltklikk på den. Den skal automatisk åpnes i standard nettleser. Ser bra ut!

Trinn 7: Legge til et avsnittstag

Vi har en tittel, en overskrift, la oss nå legge til et avsnitt med litt mer tekst. Elementnavnet for et avsnitt er 'p'. Du kan se bruken nedenfor:

Taylors nettsted

Velkommen til min webside

I dag lærer vi hvordan du lager denne veldig enkle nettsiden!

Merk: Du kan se endringene dine når som helst ved å lagre notisblokk og åpne filen.

Trinn 8: Gi den litt farge

Vi har vår webside rullende rett langs, men det er ganske vanlig. La oss gi avsnittstaggen litt farge!

Vi kan farge forskjellige elementer ved å legge til et "style" -attributt i "p" -taggen som beskrevet nedenfor:

Taylors nettsted

Velkommen til min webside

I dag lærer vi hvordan du lager denne veldig enkle nettsiden!

Trinn 9: Legge til et bilde

Hva er et nettsted uten bilder? La oss legge til et bilde på nettstedet vårt!

Første trinn er å finne et bilde du liker. Jeg brukte google -bilder til å søke etter en golden retriever. Trekk bildet opp og sørg for at nettadressen ender på.jpg,.png,.gif,.jpg, etc.

Når du har valgt bildet ditt, må vi legge det til html -siden ved hjelp av en 'img' -tag. Bildet mitt er:

Legg den til siden din ved hjelp av en 'img' -tag med et' src' -attributt:

Taylors nettsted

Velkommen til min webside

I dag lærer vi hvordan du lager denne veldig enkle nettsiden!

Trinn 10: Se på det endelige produktet

Lagre notisblokkfilen, og åpne det endelige produktet. Du bør se nettsiden din!