Hvordan skrive en HTML-side (med bilder) - Tips

Innhold

Fremgangsmåte
Del 1: Hvordan jeg oppdaget HTML
Råd
Advarsel
Hva trenger du

HTML (HyperText Markup Language) er et grunnleggende språk for å bygge websider. Det ble opprettet som et enkelt og fleksibelt kodingspråk. Nesten alle nettsteder på Internett er utviklet med en eller annen form for denne koden (ColdFusion, XML, XSLT). HTML er lett å forstå, men du kan fortsette å lære om det lenge hvis du er interessert i den omfattende funksjonaliteten. For å legge til farger og moro på nettstedet ditt, kan du lære grunnleggende CSS så snart du blir vant til en grunnleggende HTML-side.

Fremgangsmåte

Del 1 av 4: Bygg et dokument

Åpne en enkel tekstredigerer. NotePad er et godt alternativ og kan lastes ned gratis. Du kan skrive HTML med de fleste tekstredigerere, men mer kompleks programvare med automatiske formateringsfunksjoner kan gjøre det vanskelig å organisere HTML-siden.
- Ikke bruk TextEdit, da det vanligvis lagrer filen i et format nettleseren din kanskje ikke gjenkjenner som HTML.
- Du kan også bruke en online HTML-editor. Dedikerte HTML-redigeringsprogrammer anbefales ikke for nybegynnere.
Lagre en fil som en webside. Velg Fil → Lagre som i menyen øverst. Endre filformatet til "Web Page", ".html" eller ".htm". Lagre filen der du enkelt kan finne den.
- Det er ingen forskjell mellom disse tre alternativene.
Åpne filen i en nettleser. Dobbeltklikk på filen, og den åpnes automatisk som en tom webside i nettleseren din. Alternativt kan du åpne en nettleser, som Firefox eller Internet Explorer, og deretter bruke Fil → Åpne fil for å velge dokumentet.
- Dette nettstedet er ikke online. Den kan bare vises på datamaskinen din.
Oppdater nettsiden og se endringene som er gjort. Skriv inn følgende i det tomme dokumentet: Hallo. Lagre dokumentet. Oppdater den tomme nettsiden i nettleseren din, og ordet "Hei" med fet skrift vises øverst på siden. Når du vil teste den nye HTML-en under denne opplæringen, lagrer du .htm-dokumentet, og oppdater deretter nettleservinduet for å se hvordan HTML blir samlet.
- Hvis du ser ordene ""og"'' Vises i nettleseren din, filen er ikke kompilert riktig i HTML. Prøv en annen tekstredigerer eller en annen nettleser.
Lær kodene. HTML-kommandoer er skrevet i "tags" som forteller nettleseren hvordan du skal kompilere og vise websiden din. De er alltid skrevet i enkle sitater
, og vises ikke på websiden slik du brukte dem i eksemplet ovenfor:
- er et "startkort" eller "åpningskort". Alt skrevet etter denne taggen vil bli definert som "fet" (fet på en webside).
- er en "sluttkode" eller "lukkekode", som du kan skille med symbolet / tegnet. Det betegner slutten på fet tekst. De fleste (ikke alle) koder trenger en sluttkode for å fungere, så sørg for å inkludere den.
Bygg dokumentet ditt. Slett alt i HTML-dokumentet. Start på nytt med følgende tekst, nøyaktig slik den ble skrevet (minus punktene). Denne HTML-koden forteller nettleseren hvilken type HTML du bruker, og at all HTML-en din blir plassert inne i kodene. og .
Legg til hodet (hodet) og kroppskodene. HTML-dokumenter er delt inn i to deler. Den "øverste" delen er for spesiell informasjon, som tittelen på siden. "Body" -delen inneholder hovedinnholdet på siden. Legg til begge disse seksjonene i dokumentet, og husk å ta med sluttkodene. Den nylig tilføyde teksten er fet:
Gi siden din en tittel. De fleste kortene i hodeseksjonen er uviktige å lære med en nybegynner. Tittelappen er imidlertid enkel å bruke, og vil avgjøre hva som vises som navnet på nettleservinduet eller i nettleserfanen. Plasser start- og sluttkoder i overskriftene, og skriv eventuelle overskrifter du liker mellom disse kodene:
- Min første HTML-side.
annonse

Del 2 av 4: Tekstformatering

Legg til tekst i kroppen din. For denne delen vil vi bare jobbe med kroppskoder. Den andre teksten vil fremdeles være i dokumentet ditt, men vi sparer plass ved ikke å gjenta den i denne opplæringen. Skriv hva du vil mellom kortene og , og det vil vises som det første innholdet på siden din. For eksempel:
- Jeg fulgte wikiHow-instruksjonene for å skrive en HTML-side.
Legg til overskrifter for teksten. Organiser siden din med overskriftskoder, som instruerer nettleseren om å vise tekst mellom dem i større skriftstørrelse. Disse kodene brukes også av søkemotorer og andre verktøy for å finne ut hva nettstedet ditt handler om og hvordan det er organisert.

er den største overskriften, og du kan opprette mindre overskrifter opp til

. Prøv dem på siden din:
- Velkommen til min side.
- Jeg fulgte wikiHow-instruksjonene for å skrive en HTML-side.
- Målet mitt i dag:
- Fullførte mål:
- Lær hvordan du bruker overskrifter.
- Ufullførte mål:
- Lær mer tekstformateringskoder.
Lær mer tekstformateringskoder. Du har allerede sett den "sterke" koden, men det er mange andre måter å formatere teksten på. Prøv disse kodene, eller med flere tagger samtidig for den samme tekststrengen. Husk å legge til sluttmerker bak!
- Viktig tekst, vises i fet skrift i nettleseren.
- Fremhevet tekst, vises i kursiv i nettleseren.
- Tekst litt mindre enn vanlig. Denne teksten vil automatisk endre størrelse hvis den brukes i en overskrift.
- ~~Tekst er ikke lenger relevant, vises med en hovedtekst.~~
- Tekst settes inn senere enn andre dokumenter, vist med understreker.
Organiser tekst på siden din. Du har kanskje lagt merke til at det ikke er nok å trykke på "enter" -tasten for at teksten skal vises på en annen linje. Disse kodene kan hjelpe deg med å lage avsnitt og linjeskift, eller ordne teksten på andre måter:
- Forkortelse for "avsnitt", vil denne koden beholde all teksten mellom disse kodene i et avsnitt, og skille den fra teksten over og under den.
- Denne koden genererer linjeskift. Ikke legg til en sluttkode til den, da den ikke forstyrrer noe annet innhold. Bruk denne taggen i dikt eller adresselinjer, ikke avsnitt.
- ```
Hvis du trenger å vise tekst veldig nøyaktig, setter denne koden teksten i den til en skrifttype med fast bredde (hver bokstav har samme bredde), og lar deg lage intervaller Blanke og linjeskift som du vil for vanlig redigering i stedet for koder.
```
- Denne taggen definerer typen tekst som er sitert fra en kilde.
  Du kan beskrive kilden senere med sitere kort.
Legg til usynlig tekst. Kommentarmerker vises ikke på websiden. De lar deg kommentere deg selv i HTML-dokumentet uten å påvirke innholdet. Ikke legg til en sluttkode.
- Kortene som går alene uten sluttkoder kalles "tomme koder."
Kombiner dem sammen. Den beste måten å huske disse kodene på er å bruke dem på nettstedet ditt. Her er et eksempel som bruker kortene i trinnene du har lært så langt. Prøv å forutsi hvordan de vil vises i nettleseren, og kopier dem deretter til dokumentet ditt og finn ut.
- Min første HTML-side.
- Velkommen til nettstedet mitt.
- Håper du liker denne siden!
  Jeg lagde det bare for deg.
- Del 1: Hvordan jeg oppdaget HTML
- Jeg har lært HTML allerede i en totimer, så nå er jeg ekspert.
annonse

Del 3 av 4: Legge til lenker og bilder

Lær om attributter. Tagger kan ha tilleggsinformasjon skrevet inne i dem, kalt attributter. Disse attributtene er representert med flere ord i selve kodene, i form eiendomsnavn = "spesifikk verdi". For eksempel kan enhver HTML-tag ha tittelattributtet:
- Introduksjonsavsnittet er her.
  Tittel avsnittet "Introduksjon", som vises når du holder markøren over avsnittet på websiden.
Lenker til andre nettsteder. Bruk av kort for å opprette en hyperkobling til en hvilken som helst annen webside. Sett inn URL-en til websiden du vil koble til ved hjelp av href-attributtet. Her er et eksempel som lenker til websiden du leser:
- De besøkende på nettstedet ditt kan klikke på denne teksten for å følge lenken.
Legg til et id-attributt i koden. En annen attributt som en hvilken som helst HTML-tag kan bruke er "id" -elementet. Skriv på hvilket som helst kort id = "vidu" eller bruk et navn som ikke inneholder mellomrom. Det gir ingen synlig effekt, men vi vil bruke det i neste trinn.
- Legg for eksempel til følgende i dokumentet:
  Dette avsnittet brukes som et eksempel for å beskrive hvordan id-attributtet fungerer.
Lenke til et element med en bestemt id. Nå kan vi bruke hyperkoblingskoden, , for å koble til et annet sted på samme side. I stedet for en URL bruker vi symbolet #, etterfulgt av ID-verdien vi vil koble til. For eksempel, Denne teksten vil lenke til teksten med id "vidu".
- Alle HTML-verdier er store og små bokstaver. "#VIDU" og "#vidu" vil begge koble til samme sted.
- Hvis siden din er kort nok til å vise hele siden på en gang, vil du sannsynligvis ikke merke noe som skjer når du klikker på lenken i nettleseren din. Endre størrelsen på vinduet til rullefeltet vises, og prøv deretter på nytt.
Legg til bilder. Kort er en tom tag, noe som betyr at det ikke er behov for en sluttkode. All informasjonen nettleseren trenger for å vise bildet legges til ved hjelp av attributter. Her er et eksempel for å vise wikiHow-logoen, med en beskrivelse for hvert attributt bak:
- Eiendommer src = "" forteller nettleseren hvor bildet er. (Merk at å legge ut et bilde fra andres nettsted anses som upassende - og bildet vil forsvinne når siden ikke lenger er aktiv.)
- Eiendommer stil = "" Det kan gjøre mange ting, men viktigst av alt brukes det til å stille inn bredden og høyden på et bilde i piksler. (Du kan også bruke de separate attributtene width = "" og height = "" i stedet, men dette kan føre til rare problemer med å endre størrelse hvis du bruker CSS.)
- Eiendommer alt = "" er en kort beskrivelse av bildet som brukeren vil se om bildet ikke lastes inn. Dette anses som et krav, siden det brukes til skjermlesere for besøkende på nettstedet som er blinde.
annonse

Del 4 av 4: Lær mer Legge til og få nettstedet ditt online

Bekreft HTML-en. HTML-validering sjekker for feil i koden din. Hvis nettstedet ditt ikke vises riktig, kan validering hjelpe deg med å finne feilen som forårsaker problemet. Det kan også lære deg mer om HTML ved å bestemme at koden ser bra ut på skjermen, men den anbefales ikke lenger på grunn av nye oppdateringer i HTML-standarden. Bruk av ugyldig HTML gjør ikke nettstedet ditt ubrukelig, men kan føre til problemer eller vises ustabilt i forskjellige nettlesere.
- Prøv en gratis online valideringstjeneste fra W3C, eller søk etter et annet HTML 5-valideringsverktøy online.
Lær mer koder og attributter. Det er mange andre HTML-koder og attributter, og mange steder å lære dem:
- Prøv w3schools og HTML Dog for flere opplæringsprogrammer og komplette lister med koder.
- Finn en webside som du liker slik den ser ut, og bruk deretter nettleserens "Vis sidekilde" -funksjon for å få HTML-koden selv. Kopier det til dokumentet ditt og studer hvordan det fungerer.
- Les andre artikler og lær om hvordan du lager tabeller i HTML, bruk metakoder for å øke sjansene dine for å bli funnet av søkemotorer, eller bruk en divisjon. angi et område på siden) og spenn (brukes til å spesifisere stilen til tekstelementet) for å hjelpe stil gjennom CSS.
Få nettstedet ditt online. Velg en tjeneste for å være vert for nettstedet ditt, og deretter kan du laste opp så mange HTML-sider som du vil til ditt personlige webdomenet. For å gjøre dette må du bruke FTP-opplastingsprogramvare, men mange nettutleietjenester tilbyr også denne tjenesten.
- Når du lenker til sider eller bilder som er direkte på nettstedet ditt, må du bruke hele adressen. For eksempel, hvis domenenavnet ditt er www.chuyengiahtmlsieudang.com, da teksten er i disse kodene vil lenke til "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Legg til stiler med CSS. Hvis HTML-siden din ser litt ensformig ut, kan du prøve å lære det grunnleggende om CSS for å legge til farger, forskjellige skrifttyper og bedre kontroll over hvor elementene plasseres. Hvis du kobler et CSS-"stilark" til en HTML-side, kan du gjøre drastiske endringer mens du dynamisk justerer stilen til all tekst i en gitt tag. Du kan leke litt med det grunnleggende formateringslaget her, eller dykke ned i mer detaljerte opplæringsprogrammer i HTML Dogs CSS-opplæring.
Legg JavaScript til nettstedet ditt. JavaScript er et programmeringsspråk som brukes til å legge til mye funksjonalitet på HTML-sidene dine. JavaScript-kommandoene settes inn mellom start- og sluttkodene , og kan brukes til å legge til interaktive knapper, beregne matematiske problemer og mer. Finn ut mer i w3c-eksemplene. annonse

Råd

Doktypedeklarasjonen (Document Type Declaration used) brukt i denne opplæringen er "løs HTML 4.0.1 overgangs" (HTML 4.0.1 ikke stram overgang), et enkelt format. for nybegynnere å bruke. Bruk () et alternativ for nettleseren å kompilere den i strengt HTML 5-format, som er anbefalt (men mindre vanlig) standardstil.

Advarsel

Hensikten med HTML er å holde innholdet i et globalt format. Den har ingen kontroll over presentasjonen av nettstedet ditt, for eksempel bakgrunnsfargen og den nøyaktige plasseringen av elementene. Selv om det fremdeles er koder som lar deg gjøre dette, er det lurt å bruke CSS til å lage et mer kontrollerbart og konsistent nettsted.

Hva trenger du

En enkel tekstredigerer, som NotePad eller TextEdit
En nettleser, for eksempel Internet Explorer eller Mozilla Firefox
(Valgfritt) En HTML-editor som Adobe Dreamweaver, Aptana Studio eller Microsoft Expression Web