Opprette en HTML-webside. Hvordan lage en nettside

Bruksanvisning

Alt som en besøkende ser på nettet gjenskapes av nettleseren fra instruksjonene sendt av serveren. Disse instruksjonene er skrevet i HTML (HyperText Markup Language) og filene de er lagret i er merket som htm og html. Du kan lage en slik fil på vanlig måte tekstredigerer– dette vil være det første trinnet i å skape nettsider. Åpne f.eks. standard notisblokk, og opprette tom fil kalt index.html. Når du skriver inn en nettstedsadresse uten å spesifisere en spesifikk side(for eksempel ), først og fremst søk side med akkurat dette navnet - indeks.

HTML-instruksjoner kalles "tags" og hver av dem er omsluttet i parentes som dette:<>. Noen av taggene er paret, det vil si at de består av en åpnings- og lukkebrikker, og informasjon plasseres mellom dem. For eksempel en tag som forteller nettleseren at koden nedenfor er plassert nøyaktig på HTML-språk, Så: Den avsluttende taggen, som indikerer at HTML-koden er fullført på dette tidspunktet, er skrevet slik: Som du kan se, skiller den avsluttende etiketten seg fra åpningsetiketten ved tilstedeværelsen av en skråstrek etter åpningsbraketten (

All koden du legger mellom taggene Og, bør deles inn i to deler - overskriften og hoveddelen av dokumentet. Åpnings- og avslutningshodekodene er skrevet slik: Dette er "service"-delen av siden - informasjon om vinduets tittel, nøkkelord og beskrivelser for søkeroboter, stilbeskrivelser, skript osv. er plassert her. Skriv inn tittelen på sidevinduet i det: Hele teksten til HTML-siden din på dette tidspunktet skal se slik ut:

Etter overskriftsdelen må du plassere tagger som instruksjonene til dokumentets hoveddel vil være vedlagt: Sett inn mellom dem, for eksempel en tag som vises side avsnitt av tekst:

Det er et helt avsnitt med informasjon her!

Ikke alle HTML-språkkoder er sammenkoblet. Noen av dem har alt de trenger inne i åpningstaggen. For slike tagger plasseres den avsluttende skråstreken før den avsluttende braketten. For eksempel end-of-line og "carriage return"-taggen
:

Første linje i avsnittet.


Andre linje i avsnittet.

Alt dette er nok til at nettleseren viser innholdet ditt normalt. side. All sammensatt html-kode skal se slik ut:

Første linje i avsnittet.


Andre linje i avsnittet.

På dette

Hei alle sammen, kjære venner og gjester på bloggen min! Åh. Jeg la akkurat merke til at Yandex ga meg en TIC på 20, selv om den i går var 0. Jeg forstår at TIC egentlig ikke betyr noe lenger, men den er fortsatt veldig hyggelig og gledelig. Vel, generelt ønsket jeg å fortsette den nylig startet serien med artikler om nettstedbygging. Og det første jeg vil begynne med er det grunnleggende om hypertekst-markeringsspråket (ikke programmering!) HTML.

HTML er fortsatt grunnlaget for alt, og selv om du ikke er en kul nettutvikler, men vil gjøre sidene dine på motorer, så vil kunnskap om HTML-språket være et stort og dristig pluss. Derfor vil jeg i min artikkel i dag fortelle deg hvordan du lager et html-nettsted ved å bruke notisblokk.

Selvfølgelig vil det vi skal gjøre i dag neppe kalles et nettsted, så jeg vil si med en gang at i dag vil vi ikke lage en kul nettside, men jeg vil fortelle deg strukturen på hvordan alt skjer med denne metoden for å lage din egen nettressurs. Jeg synes du ikke skal ha noen vanskeligheter. Vi vil ende opp med å lage en veldig grunnleggende nettside til å begynne med. Og hvis du er klar, la oss gå!

For å komme i gang, lag et vanlig tekstdokument eller åpne Notisblokk. For å åpne notisblokk kan du ringe "Kjør"-linjen og skrive inn notisblokk der. Har du åpnet den? Bra gjort!

Ethvert HTML-dokument eller nettsted er merket med spesielle tagger. En tag er et spesielt skilt som forteller nettstedet hvordan det skal vise et bestemt innhold i det. Nå skal jeg ikke dvele ved dette i detalj, siden jeg skal fortelle deg om tagger i min .

La meg bare si at de fleste tagger er paret, det vil si at åpningstaggen plasseres først, og etter at vi har skrevet informasjonen, må vi lukke taggen. Den lukkes på samme måte som den åpnes, bare før den lukkes må du sette et "/"-tegn.

Generelt, for at det skal fungere, må vi sette inn flere nødvendige tagger. La oss se hva de er.

• - dette er hovedtaggen, takket være hvilken vi forteller nettstedet at nå vil vi skrive her i HTML, så ikke bekymre deg. Nettstedet bør starte med det og lukke med det.
• — offisiell informasjon legges inn her, som tittelen på dokumentet, beskrivelse og mange andre. Plasseres umiddelbart etter den åpne taggen .
• — Mellom disse verdiene skriver vi sidetittelen, det vil si at denne tittelen ikke vises i selve innholdet på nettstedet, men i nettleserfanen. Denne typen er plassert mellom
  Og
  .
• — denne taggen er ansvarlig for å vise innhold på nettstedet. Det vil si at alt du skriver mellom disse taggene vil vises på nettsiden.

Jeg føler at ikke alle skjønte alt, og noen satt igjen med rot i hodet, så jeg skal vise dere alt med et levende eksempel.

Levende eksempel

Så lag et tekstdokument og skriv følgende innhold der:

Har du skrevet? Bra gjort! Her ga jeg deg spesifikt informasjonen i form av et bilde, og ikke i form av tekst, slik at du ikke skal kopiere den. Jeg er en skurk, ikke sant?)) La du merke til at merkelappene er nestet inni hverandre som hekkende dukker? Sånn skal det være.

Råd! Prøv å ikke kopiere innholdet, men å skrive det om selv. På denne måten vil du lære alt materialet mye bedre og raskere.

Etter dette lagrer du dokumentet i html-format. For å gjøre dette, når du lagrer, etter at du har navngitt dokumentet ditt, sett en prikk og skriv html. Det vil si at du bør få index.html. Da lagres dokumentet automatisk ikke som et tekstdokument, men som en nettside. Og når du lagrer dokumentet, endre kodingen til UTF-8. Du kan åpne denne filen med hvilken som helst nettleser. La oss gjøre dette og se hva vi har.

Se hvor mye vi skrev, men bare velkomstteksten var igjen i sluttdokumentet. Hvorfor? Ja, fordi taggene i seg selv ikke vises i den endelige versjonen, og den viste informasjonen vises kun mellom taggene kropp. Det er derfor det hele ble slik. Men se, det vi skrev i hodet, eller rettere sagt i tittelen, vises nå i nettleserfanen.

Hvis du vil redigere noe her igjen, trenger du bare å åpne dette allerede lagrede dokumentet igjen i Notisblokk. Generelt sett, vi laget vår første nettside med en notisblokk. Ja ... det er vanskelig å kalle det et nettsted, men i hovedsak er det det. Vi har laget grunnlaget (rammeverket) og laster vi det opp til hostingen vil det allerede vises på Internett.

Men prøv å legge til noen mellomrom og skrive mer tekst, eller bare skriv noen få linjer med tekst og lagre det i samme dokument.

Nå får du tilgang til dette dokumentet ved hjelp av nettleseren din. Hva ser vi? Og faktum er at mellomrom og linjeskift ikke påvirket dokumentet og alt går på én linje. Stygg, ikke sant? Og alt fordi html selv ikke forstår mellomrommene dine (bortsett fra én) eller bindestrekene. For å bryte linjer, må alt merkes med andre tagger, som vi vil snakke om i andre artikler.

Mange vil nok tenke noe sånt som: «Og dette er din nettside? Ja, du falt fra tankene dine." Ja, mine kjære. Denne primitive nettsiden kan også kalles en nettside. Og jeg vil gjenta igjen at poenget med denne artikkelen ikke var å lage et megakult nettsted, men å vise deg grunnlaget for ethvert nettsted, hvordan det ser ut, hvordan alt skjer.

Men ikke bekymre deg. Disse er alle introduksjonstimer. Deretter vil vi dykke dypere og dypere inn i html-markeringen, og vi vil kunne formatere og ordne alt riktig. Generelt vil alt være kult, og vi vil lage en fullverdig nettressurs. Det er bare at alt dette ikke passer inn i en artikkel, og jeg vil heller ikke krølle og forkorte det, ellers vil det vise seg å være søppel.

En spesiell notatbok for webutviklere

Men likevel vil vi ikke lenger bruke dette forhistoriske verktøyet, siden det er en mer praktisk og sofistikert notisblokk for utviklere, og den er helt gratis. Last det ned herfra og installere på den mest vanlige måten.

I fremtiden vil jeg jobbe spesifikt gjennom Notepad++-editoren. Installer det og du vil forstå hvorfor det er praktisk. Det er ingen avanserte innstillinger der, men hvis du plutselig installerte den engelske versjonen, gå til "Preference" -menyen og velg russisk i "Localization" -kolonnen.

Ja, og gå også til "Encoding"-menyen og velg "UTF-8". Vel, umiddelbart lagre denne filen i html-format. For å gjøre dette, velg "Fil" - "Lagre som"-menyen og navngi dokumentindeksen, velg "html"-formatet fra rullegardinlisten. Dette gjøres slik at programmet forstår hva vi gjør og fremhever nødvendige tagger og kommandoer for oss.

Hvorfor kaller jeg til og med sideindeksen? Faktum er at når du går til en hvilken som helst nettside, ser den som standard etter siden index.html eller index.php. Disse filene er generelt akseptert som de viktigste, men generelt kan dette endres på serveren.

Selvfølgelig, hvis du vil lære alt raskt, anbefaler jeg at du ser den nylig utgitte kurs i HTML5 og CSS3. Alt er forklart der i detalj og vist med et live eksempel, i tillegg vil du lære hvordan du lager flere typer nettsider. Totalt sett veldig interessante og informative leksjoner.

Vel, jeg anbefaler at du abonnerer på bloggoppdateringene mine for ikke å gå glipp av de neste leksjonene, så vel som andre interessante ting. Husk også å sjekke ut mine andre bloggartikler. Jeg er sikker på at du vil finne mange av dem nyttige. Generelt ønsker jeg deg lykke til. Vi sees i andre artikler. Ha det!

Med vennlig hilsen, Dmitry Kostin.

Lurer du på hvordan du lager en HTML-side? For å gjøre dette må du bruke flere timer, og du vil vite Og du kan lage din første side på 5 minutter.

HTML står for HyperText Markup Language. Oversatt betyr dette "hypertext markup language". Det er viktig å forstå at HTML ikke er et programmeringsspråk, men et nettstedsmarkeringsspråk.

Alle moderne nettlesere kan gjenkjenne den. De viser deretter informasjonen på en brukervennlig måte, slik forfatteren har tenkt på forhånd.

Dette språket bruker spesielle tagger. Hver tag utfører sin egen funksjon. Det er mange av dem. Ideelt sett må du lære alt. Men for en nybegynner er grunnleggende kunnskap nok.

Grunnleggende HTML

Før du lager en HTML-side, må du vite hva den består av. Det er to konsepter i dette språket: element og tag.

En åpnings- og lukkelapp brukes for å indikere hvor dette elementet begynner og slutter. Det ser slik ut.

<открывающий тег>innhold

Som du kan se, er den eneste forskjellen mellom åpnings- og avslutningskoden "/".

Hele HTML-dokumentet er en samling av disse elementene. Det er visse krav til strukturen til dokumentet. Alt sideinnhold må være mellom to tagger Og. Når du skriver kode, gjør det til en vane å umiddelbart inkludere en åpnings- og avslutningskode.

Husk også at strukturen til HTML-språket har sitt eget hierarki. Ellers kalles det hekking. er den viktigste, siden alle de andre er innenfor den.

HTML har to underordnede elementer:

• ... ;
• .. .

HEAD-blokken indikerer forskjellig serviceinformasjon. Denne informasjonen vises ikke i nettleseren. For eksempel instruksjoner for utviklere, for eventuelle programmer, for roboter og mye mer.

Det viktigste er at det ikke er noe innhold her.

BODY-delen spesifiserer dokumentinnholdet som skal vises til brukeren.

Lær å lage åpne og lukkede tagger umiddelbart, siden det kan være 10 nestede elementer. I tillegg, for enkelhets skyld, anbefales det å rykke inn nestede tagger. For eksempel slik.

Dette gjøres slik at etiketter av lik betydning er på samme nivå, og underordnede etiketter er "inne". Dette gjør det mye enklere å forstå og finne riktig kodebit. Ellers kan du bli forvirret. Men for å spare plass kan selve kroppen gjøres uten fordypninger. Dette gjøres for at alle andre ikke skal ha ekstra innrykk. Det er tilrådelig å skille alt annet.

Hvordan lage en enkel HTML-side

For å skrive kode trenger du en slags editor. Det er mange av dem. Populære er Notepad++ og Adobe Dreamweaver. Du kan også bruke en notisblokk.

Slik ser Notepad++-editoren ut.

Dette er en veldig praktisk redaktør og samtidig gratis. Adobe Dreamweaver ovenfor er en betalt versjon. Forskjellen mellom redaktører designet for skriving og en notisblokk er at spesielle tagger er uthevet. Hvis det ikke er uthevet, har du skrevet det feil.

For at bakgrunnsbelysningen skal matche språket, må det spesifiseres i innstillingene.

La oss se på hvordan du lager en HTML-side i Notisblokk. Det vil si, la oss fullføre den tekniske delen og deretter gå direkte til å studere tagger.

Hvordan lage en webside i HTML Notisblokk

For å begynne, åpne Notisblokk.

Skriv deretter inn det som er angitt i følgende skjermbilde.

Bli vant til å skrive med hendene i stedet for bare å kopiere. Når du skriver med hendene, bør du huske hele merkebasen.

Etter dette kan du åpne filen i en nettleser og beundre resultatet. Du bør nå forstå hvordan du lager en nettside i en HTML-notisblokk.

Verdensomspennende konsortium W3C

Det er en organisasjon som heter W3C, som utvikler og implementerer alle standarder for Internett. Alle nettlesere overholder disse standardene og behandler sideoppmerking (kode) i henhold til disse reglene.

På den offisielle nettsiden til utviklerne av HTML-språket kan du finne en tabell med alle kodene og reglene for deres bruk. I denne artikkelen tar vi for oss de mest grunnleggende.

Du tenker kanskje, hva kan reglene være? Alle de beskrevne taggene har sin egen anbefaling. Det er flere av dem:

• Valgfri tag.
• Forbudt.
• Tom tag.
• Utdatert
• Tapt.

Tagger i HTML

Før du oppretter en HTML-side, må du forstå hva som skal stå i HEAD-tjenestedelen.

HEAD-området inneholder både obligatoriske og valgfrie tagger. Den nødvendige taggen er tittelen. Det er utpekt . Den er tilordnet hele dokumentet. Og det du ser i Googles søkemotorresultater er tittelkoden.

La oss gå videre til BODY-delen. Det er elementer som vises i nettleseren, og det er også de som ikke er det. For eksempel vises ikke kommentarer til brukeren. De kan brukes til notater eller for å gi hint til andre ansatte hvis du jobber i et team.

De er utpekt som

Alt i mellom, anses av programmet som sådan. Vær oppmerksom på at du ikke kan legge inn en kommentar-tag i en annen kommentar-tag. Fordi når du åpner.

Et eksempel på slik hekking:

fortsettelse av den første kommentaren -->

Resultatet i nettleseren blir følgende

fortsettelse av den første kommentaren -->

Her er et stykke vil ikke være synlig. Andre åpningsbrikke