HTML er det mye brukte markeringsspråket for å bygge en websidestruktur. Det gir forskjellige tagger som brukes til å legge til forskjellige elementer på websiden som for eksempel , ,
, og . Disse taggene er definert i tekstredigereren og synlig i nettleseren. Denne artikkelen vil diskutere:
Forutsetninger for å opprette et nettsted Hvordan lage en HTML -side? Hvordan bygge HTML -nettsted med kode? Hvordan style HTML -elementer gjennom CSS? Forutsetninger for å opprette et nettsted
Forutsetningene for å opprette et nettsted er:
En tekstredaktør Nettleser Hva er en tekstredigerer?
En tekstredigerer er et dataprogram som tillater brukere å redigere, lagre og skrive ut tekst. Disse redaktørene er ofte kjent som notisblokkprogramvare. Det er flere tekstredaktører, for eksempel:
Notisblokk Visual Studio Code Sublim tekst Merk: Vi vil bruke Visual Studio Code Editor for demonstrasjonen. Brukere kan installere noen av tekstredaktørene i henhold til deres preferanser.
Hvordan lage en HTML -side?
Trinn-for-trinn-prosedyren for å opprette et nettsted i Visual Studio Code er forklart nedenfor.
Trinn 1: Opprett en prosjektmappe
Først må du lage en mappe og navngi den som du vil. For eksempel har vi spesifisert filnavnet som "Html ”. Innenfor denne mappen vil vi lage undermapper og filer for prosjektet vårt:
Trinn 2: Åpne mappe
Åpne prosjektmappen, høyreklikk, og velg deretter "Åpent med kode ”Alternativ fra hurtigmenyen:
Som et resultat vises følgende vindu:
Trinn 3: Lag en ny “.html ”-fil
Opprett en ny fil ved å klikke på det nye filikonet som vist i bildet nedenfor:
Lagre filen med ".html " Utvidelse.
Trinn 4: Legg til HTML -kode
Legg til den nødvendige HTML -koden i filen:
La oss utføre et eksempel for å se hvordan HTML -koden utfører og viser nettstedet på nettleseren.
Hvordan bygge et nettsted i HTML?
For å bygge et nettsted fra bunnen av, kan du sjekke ut de gitte trinnene under.
Trinn 1: Lag en "div" -beholder
I HTML, opprette en div som heter “container ”. Innenfor denne diven vil vi legge til elementer for å opprette et nettsted:
Trinn 2: Legg til "header" og "nav" -elementer
Inne i Div -beholderen, legg en “" stikkord. Hodeelementet inkluderer et bilde og en navigasjonslinje. Mer spesifikt viser navigasjonslinjen en liste over lenker til flere deler av nettstedet vårt:
Trinn 3: Legg til “Seksjonsbanner”
Legg til en "” Tag med klassenavn “banner ”. Denne delen inneholder en
Tag for overskrift:
Trinn 4: Lag "Omus" -delen
Deretter lage en "om oss ”Seksjon som vil inneholde informasjon om nettstedet vårt. La oss lage det ved først å legge til en overskrift med en "
Om oss
Linuxhint er det beste nettstedet på nettet. Herfra kan du lære annerledes
Les mer La oss gå videre mot neste trinn.
Trinn 5: Lag "Ourservices" -delen
Deretter legger du til en seksjon for "Våre tjenester ”. Denne delen vil inneholde tjenesteinformasjonen om nettstedet vårt.
La oss lage det ved å legge til to div i en div som heter “Våre tjenester ”. Den første diven “tjenester ”Vil inneholde tre -div med navnet”service ”Hver med forskjellig informasjon. Hver "service ”Div inneholder med forskjellige attributtverdier,
og knappemerker:
Vi gir kvalitetsopplæring til verden.
Vis tjeneste Vi gir verden kunnskap om nye teknologier.
Vis tjeneste Glad for å hjelpe verden.
Vis tjeneste Trinn 6: Definer “bunntekst” -element
For å lage en bunntekst på nettstedet, bruk "" stikkord. Dette elementet inneholder en tag for å vise innhold med mindre tekst:
(c) Copyright - Alle rettigheter reservert Strukturen på nettstedet vårt er Don. La oss nå flytte til CSS for styling.
Hvordan style HTML -elementer gjennom CSS?
Nå, sjekk ut hvordan vi skal style på nettstedet vårt ved å bruke CSS -egenskaper.
Stil alle elementer (*)
* Stjernen “ * ”Brukes i CSS for å velge alle eller alle typer elementer og bruke følgende egenskaper:
“margin ”Eiendom brukes til å gi plass rundt elementet. “polstring ”Brukes til å gi plass rundt elementets innhold. “Bokstørrelse ”Bestemmer metoden for å beregne elementets samlede høyde og bredde. “Font-familie ”Definerer fontstylingen. Stil “H2” -kode
H2 “ “skriftstørrelse ”Brukes til å stille størrelsen på skriften. “Fontvekt ”Angir tykkelsen på skriften. Stil "seksjon" -element
seksjon Til stil “seksjon ”, Bruk egenskapene under satte egenskaper:
“Padding-top ”Brukes til å gi plass på toppen av innholdet. “Padding-Bottom ”Vil bruke plass nederst i innholdet. Stil "knapp" -element
knapp Hver knapp på nettstedet vårt vil inneholde følgende egenskaper:
“bakgrunnsfarge ”Bruker fargen på bakgrunnen på knappen. “farge ”Eiendom definerer en farge for knappeknappen. “grense ”Eiendom bruker en grense på knappen ved å spesifisere bredde, type og farge. “polstring ”Eiendom brukes til å gi plass rundt innholdet i teksten. “skriftstørrelse ”Setter størrelsen på skriften. “markør ”Angir musepekeren på svevet. Stil “container” div
.container Her:
“Maks bredde ”Eiendom definerer elementets maksimale bredde. “margin ”Eiendom brukes til å gi plass rundt elementet. Stil "header" -kode
Overskrift I følge den gitte kodebiten:
“Padding-top ”Brukes til å gi plass øverst i innholdet. “Padding-Bottom ”Er satt til plass nederst i innholdet. “bakgrunnsfarge ”Er innstilt på å bruke farge på bakgrunnen til elementet. “vise ”Angir visningsatferden. Flexverdien brukes til å lage en fleksibel layout. “Justify-Content ”Vil plassere fleksible elementer i henhold til verdien som er gitt til den. “Align-elementer ”Angir varetilpasningen i en fleksibel beholder. Style “Header
header ul Den uordnede listen over topptaggen er assosiert med følgende egenskaper:
“Listestil ”Brukes til å gi stil på listen. I eksemplet har vi satt verdien som "ingen ”For å fjerne understreken fra listen. “vise ”Eiendom brukes til å spesifisere visningsatferden til taggene. Flexverdien brukes til å lage en fleksibel layout. Stil “A” -kode
header ul li a Ankerelementene i topptaggen er utstyrt med følgende stiler:
“tekstdekorasjon ”Eiendom brukes til å dekorere teksten med forskjellige linjestiler. “polstring ”Brukes til å gi plass rundt hvert ankerkode. “farge ”Eiendommen er satt til å bruke farge på ankerkodens tekst. Stil “banner” div
.banner Div med navn “banner ”Er stylet som følger:
“bakgrunnsbilde ”Denne egenskapen tildeles nettadressen til bakgrunnsbildet. “Bakgrunnsposisjon ”Er bildets posisjon som sentrum. “Bakgrunnsrepetitt ”Eiendom setter bildet som ingen gjentakelse. “bakgrunnsstørrelse ”Er satt som dekselet, noe som betyr at bildet passer til div. “Padding-top ”Gir plass til toppen av innholdet. “Padding-Bottom ”Gir plass nederst i innholdet. Stil “H2” -taggen til Banner Div
.banner h2 De
Tag of the Banner Div brukes med disse egenskapene:
“farge ”Eiendom setter fargen på teksten. “Tekstalign ”Med verdisenteret vil satte teksten som senter justert. “skriftstørrelse ”Eiendom setter elementets skriftstørrelse. Stil “Aboutus” Div
.om oss “.om oss ”Brukes til å få tilgang til klassen omus. “Tekstalign ”Eiendom er satt elementteksten i sentrum.
Stil “H2” og “P” -koder av “Aboutus” Div
.Omus H2,Sett deretter “Padding-Bottom ”Eiendom som“20px ”Til begge
og
Tagger.
Stil “Ourservices” Div
.Våre tjenester Div “Ourservices” er utstyrt med “bakgrunnsfarge " som "#EFEF ”.
Stil “tjenester” div
.Våre tjenester .tjenester Barnet Div “tjenester ”Av overordnede div“Våre evices ”Er stylet med egenskapene beskrevet nedenfor:
“vise ”Eiendom brukes til å angi visningsatferd. Flex -verdien gjør en fleksibel utforming. “Justify-Content ”Eiendom justerer horisontalt elementene til det fleksible elementet. Stil “service” div
.Våre tjenester .service “.Våre tjenester .service ”Henviser til barnets div”service ”Of Parent Div“Våre tjenester ”Div. Hver tjeneste er definert med eiendomsteksten, med verdisenteret.
Stil "knapp" -element
.Ourservices -knappen Eiendommen "margin-topp ”Brukes til å sette plass på toppen av knappelementet.
Stil “bunntekst” -element
bunntekst Bunnteksten er stylet som følger:
“Padding-top ”Er innstilt på å gi plass på toppen av bunnteksten. “Padding-Bottom ”Er innstilt på å gi plass nederst på bunntekstinnholdet. “bakgrunnsfarge ”Er innstilt på å bruke farge på baksiden av bunnteksten. “farge ”Angir fargen på skriften. “Tekstalign ”Er satt som sentrum. Trinn 5: Lagre HTML -fil og åpne den i nettleseren
Lagre HTML -filen ved å bruke tastekombinasjonen "Ctrl+s ”Eller lagre ved å velge“Lagre ”Alternativ fra filmenyen øverst til venstre i redigereren. Høyreklikk deretter i arbeidsvinduet til Visual Studio Code og klikk på "Åpent med live server ”Alternativ fra rullegardinmenyen som vist nedenfor:
Merk: Hvis du ikke har installert Live Server -utvidelsen, følg vårt andre dedikerte innlegg.
Som du kan se, har vi opprettet og stylet nettstedet vårt:
Det handlet om å bygge et nettsted med HTML og CSS -kode.
Konklusjon
Hypertext Markup -språket er standarden for å lage websider. Det er hundrevis av elementer som brukes i HTML -filer. Hvert element brukes til noen spesifikke oppgaver for webapplikasjonen. For å skrive HTML -koden, er det viktig å bruke en tekstredigerer som sublim tekst, Visual Studio Code, Notisblokk ++ eller mer. Denne artikkelen har med hell forklart trinn-for-trinn-prosedyren for å opprette et HTML-nettsted i Visual Studio Code.
