Hvordan lage ditt eget nettsted

Et grunnleggende nettsted kan utformes ved hjelp av HyperText Markup Language (HTML). Skriptene kan skrives i Notisblokk eller et tekstdokument avhengig av hvilket operativsystem du bruker. De aller grunnleggende verktøyene for å lage et nettsted starter med bruk av HTML- koder og HTML- elementer . De tidligere blir ofte brukt til å formidle informasjon om innholdet av innholdet, og sistnevnte brukes til å formatere verktøy for nettsiden. Under kodingen brukes HTML- attributter og verdier for å gi informasjon som plassering, høyde etc. for innholdet. I tillegg til disse kan man bruke fargekoder, bildekoder og HTML- divisjonskoder for å skape en levende nettside.

Hvordan lage ditt eget nettsted

  • Hva er HTML?
  • Krav
    • Eksempel 1:
  • HTML-tagger
  • HTML-elementer
  • Grunnleggende HTML-merker å huske
    • Eksempel 2
  • HTML-attributter og verdier
    • Eksempel 3
  • Fargeetiketter
    • Eksempel 4
  • Tekstformatering
    • Eksempel 5
  • HTML Divisjon Tags
    • Eksempel 6
  • Bildetiketter
    • Eksempel 7
  • Linking Tags
    • Eksempel 8
  • Bordetiketter
    • Eksempel 9
  • HTML Frame Tags
    • Eksempel 10
  • WYSIWYG-programvare

Når du lager et nettsted, velger mange ofte å få en webdesigner for å få hjelp. Det er imidlertid enkle måter å lære å lage en grunnleggende nettside selv, og de vil bli forklart i denne artikkelen.

Hva er HTML?

For å opprette et nettsted må du lære grunnleggende om HTML. HTML er akronym for HyperText Markup Language, som er programmeringsspråket som brukes til å lage hypertekstdokumenter på World Wide Web. Språket består av et sett med koder og symboler som vil generere tekst, bilder, lyder, rammer og animasjon på nettleserens sider.

To vanlige måter å starte nettstedet ditt på er:

  • Opprette dine egne koder i en enkel tekstredigerer og lagre dem som en .htm-fil
  • Bruke HTML generator programvare

Krav

For de som bruker Windows, start ved å åpne et nytt Notisblokkdokument .

For de som kjører MAC, åpne et nytt SimpleText- dokument.

For OSX- brukere, åpne TextEdit og gjør følgende endringer:

1. Åpne "Format" -menyen og velg "Vanlig tekst"

2. Åpne menyen "Tekstredigering", åpne "Innstillinger" -vinduet og velg alternativet "Ignorer rike tekstkommandoer i HTML-filer".

Eksempel 1:

Når du har ditt tomme dokument, kan du starte med å skrive inn:

Dette er tittelen på siden din

Dette er hvor alt innholdet ditt vil vises

Merk:

1. Lagre dokumentene dine alltid med en .htm eller html-utvidelse for å vise dem i nettleseren din. (f.eks. index.htm).

2. For å redigere kildedokumentet, velg "Vis" -alternativet på verktøylinjen i nettleservinduet og velg "Kilde".

3. Ikke glem å lagre alle endringer som er gjort i dokumentet ditt.

4. For å se endringene som er gjort i dokumentet i nettleservinduet, oppdater siden ved hjelp av F5-tasten.

HTML-tagger

En HTML-kode er definert som en markering som legges til i et HTML-dokument for å gi mer informasjon om innholdet. En HTML-kode er satt inn mellom parentes og trenger en lukkerkode. (f.eks.).

HTML-elementer

Elementer er merketapper som brukes til å formatere enkelte deler av en nettside. Et eksempel på et HTML-element er taggen, brukes til å driste teksten som vises i nettleseren.

brukes til å fortelle nettleseren at filen består av HTML-kodede data. brukes i slutten av dokumentet for å fortelle nettleseren din at HTML-innholdet slutter der.

inneholder den første delen av dokumentet og er der tittelen på nettlesersiden din blir funnet. Det kan også inneholde kommandoene som brukes til å formatere visningen av nettleseren din (f.eks. CSS-samtaler). Brukes deretter til å avslutte denne delen. Denne delen vil ikke bli vist i nettleseren din.

vil bli brukt til å merke nettstedet ditt. er derfor brukt til å indikere slutten av den kommandoen.

definerer alt innhold som vil bli vist i nettleseren din.

Grunnleggende HTML-merker å huske

overskrifter

Overskrifter brukes til å angi emnet for følgende innhold på websiden din. I HTML kan de variere i størrelse, fra

avsnitt

Avsnitt brukes til å skille mellom tekstblokker i websiden din. I HTML er de definert med

stikkord. Et avsnitt vil ha en åpningskode

og en avsluttende kode

.
  • Denne delen har definert HTML-koder

Line Breaks

I HTML, trenger ikke linjeskift en lukkekode. Derfor er de ganske enkelt definert med

stikkord.

  • Denne delen har definert HTML-koder

kommentarer

Kommentarer legges inn på en HTML-side for å finne de forskjellige seksjonene på en nettside av designeren. De er definert med stikkord. Kommentar-koder vises ikke i nettleseren, og kan derfor brukes hvor som helst i dokumentet uten å påvirke formatet på nettsiden.

Eksempel 2

Alt om HTML

HTML er akronym for HyperText Markup Language

HTML-attributter og verdier

HTML-attributter er informasjon lagt til elementene og brukes til å inkludere en bestemt egenskap for HTML-elementene. HTML-attributter skrives alltid sammen med en verdi (f.eks. Navn = "verdi" ) og legges til startkoden til et HTML-element.

Hvis du for eksempel vil at overskriften skal plasseres midt på siden din i stedet for å bli vist til venstre som standard, kan du legge til justeringsattributtet til taggen:

  • HTML er akronym for HyperText Markup Language

    Fargeetiketter

    Fargekoder gir deg mulighet til å endre fargen på teksten som vises i nettleservinduet. er et eksempel på hvordan du endrer tekstfargen hvis du ønsker å gjøre det.

    I HTML kan du også bruke fargekoder for å skaffe bestemte farger ved å bruke heksadesimale koder. Såkalte heksadecimale tripper samsvarer med fargene rød, grønn og blå (RGB). Derfor vil fargekoden i heksadesimale se ut som noe . Du kan få fargekoder og navn ved å følge denne lenken: //www.computerhope.com/htmcolor.htm

    Du kan også bruke fargekoder for å endre bakgrunnsfargen på nettstedet ditt ved å legge til BGCOLOR- attributtet. Derfor vil endre bakgrunnsfargen fra standard hvit.

    Eksempel 4

    Alt om HTML

    .

    HTML er akronym for HyperText Markup Language

    Merk:

    1. Det anbefales ikke å velge slående farger som gul eller rosa for teksten din, da disse fargene pleier å være forstyrrende for øynene

    2. Prøv også å bruke maksimalt 4 litt matchende fargetoner som samsvarer med atmosfæren på nettstedet ditt for et bedre harmoniseringsresultat.

    3. Ikke gjør klossete fargekombinasjoner som rosa tekst på en blå bakgrunn for formelle nettsteder, da det vil se merkelig ut.

    Tekstformatering

    Tekstformateringskoder lar deg endre tekstvisningen i nettleservinduet. For eksempel, til fet skrift, kan du bruke stikkord. (f.eks. Denne teksten har en fet skrift ). Nedenfor er listen over de vanlige tekstformateringskodene du kan bruke til å endre tekstvisningen:

    En fet etikett

    Denne teksten kommer i fet skrift

    2. Kursiv merkenavn

    Denne teksten vil være kursiv

    3. Understrekk Tagg

    Denne teksten vil bli understreket

    4. Legg merke til Tag

    Dette vil understreke teksten din

    5. Sterk merkelapp

    Denne teksten vil være sterk

    6. Big Tag

    Dette vil definere stor tekst

    7. Small Tag

    Dette vil definere liten tekst

    8. Abonnementstegn

    Denne teksten blir abonnert

    9. Overskrift Tag

    Denne teksten vil bli overskrevet

    10. Sentermerke

    Denne teksten vil bli sentrert

    11. Venstre tag

    Denne teksten vil vises på venstre side av skjermen

    12. Høyre Merk

    Denne teksten vises i høyre side av skjermen

    13. Ikke-ordnet listemerking

    • Dette er en uordnet liste
    • Dette er en uordnet liste

    14. Ordnet listemerking

    1. Dette er nummer 1 på listen min
    2. Dette er nummer 2 på listen min

    Merk:

    1. Disse kodene kan også kombineres. Hvis du vil ha en understreket fet tekst, kan du bruke Denne teksten vil bli fet og understreket

    2. Lukk alltid den første merket du har åpnet sist. I eksemplet ovenfor, er har blitt åpnet FØRST, før tag, men har blitt stengt sist.

    Eksempel 5

    Alt om HTML

    .

    HTML er akronym for HyperText Markup Language

    Språket består av et sett med koder og symboler som vil generere:

    • tekst,
    • Bilder,
    • lyder,
    • rammer
    • animasjon på webleser sidene dine.

    To vanlige måter å starte nettstedet ditt er enten:

    1. å lage dine egne koder i en enkel tekstredigerer og lagre dem som en .htm-fil. eller
    2. bruk en HTML generator programvare.

    HTML Divisjon Tags

    Horisontal regel

    Horisontale regler brukes til å dele eller dele deler av nettsiden din. De


    tag brukes til å lage en horisontal linje og kan endres for å lage forskjellige typer linjer ved å endre størrelse, farge eller bredde.

    Eg


    eller

    Solid linje

    De


    tag brukes til å lage en solid linje. Det endrer litt fra den horisontale regelen taggen som den produserer linjen uten 3D cutout generert av
    stikkord.

    Eksempel 6

    Alt om HTML

    .


    HTML er akronym for HyperText Markup Language

    Språket består av et sett med koder og symboler som vil generere:

    • tekst,
    • Bilder,
    • lyder,
    • rammer
    • animasjon på webleser sidene dine.


    To vanlige måter å starte nettstedet ditt er enten:

    1. å lage dine egne koder i en enkel tekstredigerer og lagre dem som en .htm-fil. eller
    2. bruk en HTML generator programvare.

    Bildetiketter

    HTML-dokumenter gjør det mulig å sette inn bilder ved å bruke bilde koder. Du kan enten bla gjennom et bilde fra en nettadresse eller fra din egen datamaskin. Bildetiketten står for "bilde kilde"; Derfor bør bildebanen defineres etter attributtet. Hvis bildet er funnet i samme mappe som kilde dokumentet, er det ikke nødvendig for deg å legge inn hele banekatalogen.

    Eg

    eller eller

    Justeringsmerke

    Igjen kan du bruke ALIGN- attributtet til å vise bildet enten i midten, høyre eller venstre side av nettleseren din.

    EG1

    Merk: Det kan imidlertid hende at nettleseren din ikke støtter denne taggen. Du kan derfor bruke taggen like før bildetagget for å sentrere bildet i nettleseren.

    EG2

    Bildestørrelse

    Størrelsen på det viste bildet kan endres ved å bruke WIDTH og HEIGHT-attributten. Du kan enten bruke prosentpoeng eller piksler for å formatere bildet ditt.

    EG1

    EG2

    Bildegrense

    Hvis du vil sette inn en ramme til bildet ditt, kan du bruke BORDER- attributtet til å gjøre det.

    Eg

    Runaround Space

    Forløp mellomrom refererer til mellomrom mellom bildet. Dette er en veldig nyttig kode når du har tekst rundt bildet ditt. Den er definert ved hjelp av VSPACE- attributtet for topp- og bunnsidene, og HSPACE- attributtet brukes til venstre og høyre side.

    Eg

    Eksempel 7

    Alt om HTML

    .


    HTML er akronym for HyperText Markup Language

    Språket består av et sett med koder og symboler som vil generere:

    • tekst,
    • Bilder,
    • lyder,
    • rammer
    • animasjon på webleser sidene dine.

    To vanlige måter å starte nettstedet ditt er enten:

    1. å lage dine egne koder i en enkel tekstredigerer og lagre dem som en .htm-fil. eller
    2. bruk en HTML generator programvare.


    Fargekoder

    Du kan bruke heksadesimale fargekoder levert av Theodora for å lage din egen nettsideatmosfære

    Dette er eksemplet du har med vspace- og hspace-attributtet

    Linking Tags

    I HTML brukes linkekoder til å hoppe fra en seksjon av siden til en annen eller fra en side til en annen. De kalles interne linker hvis de tillater deg å hoppe fra en seksjon eller din egen nettside til en annen og ekstern link når de åpner et nytt nettleservindu fra et annet nettsted. Den største fordelen ved å knytte koder er at de tillater deg å lage et dynamisk nettsted i stedet for å lage en rullende nettside.

    Ekstern lenke

    viser "Webadresselink" som en hyperkobling i websiden din, og når brukeren klikker på teksten, laster den inn siden www.webaddress.com

    Intern Link

    Det er to spesifikke måter å sette inn en intern lenke på:

    1. Å hoppe fra den nåværende siden til en annen side på samme nettside

    2. Å hoppe fra den nåværende delen av siden til en annen seksjon på samme side.

    For å kunne hoppe fra en seksjon til en annen, bør du først gi et navn til delen slik at taggen kan finne den når den blir kalt. Hvis for eksempel avsnittet om HTML-koblinger må settes inn i den øvre delen av nettsiden, rett over "HTML Links" -overskriften, sett inn taggen . "Linker" -verdien vil referere til delen som må være plassert; dermed hvis en del av nettsiden din er basert på katter, sett inn koden like over overskriften for katter.

    Etter denne prosessen, bør du også sette inn lenken du vil hoppe fra. I dette eksemplet, hvis du vil hoppe fra toppen av siden til plasseringen av "HTML-koblinger" som er funnet nederst på siden, sett inn Linking Tags . Den hyperkoblede teksten "Linking Tags" vises og når brukeren klikker på den, hopper de fra deres nåværende sted til den angitte delen.

    Eksempel 8

    Alt om HTML

    Fargekoder

    Linking Tags


    HTML er akronym for HyperText Markup Language

    Språket består av et sett med koder og symboler som vil generere:

    • tekst,
    • Bilder,
    • lyder,
    • rammer
    • animasjon på webleser sidene dine.

    To vanlige måter å starte nettstedet ditt er enten:

    1. å lage dine egne koder i en enkel tekstredigerer og lagre dem som en .htm-fil. eller
    2. bruk en HTML generator programvare.


    Fargekoder

    Du kan bruke heksadesimale fargekoder levert av Theodora for å lage din egen nettsideatmosfære

    Dette er eksemplet du har med vspace- og hspace-attributtet

    Du kan finne en nyttig å besøke Microsofts nettsted ved å klikke på denne linken


    Linking Tags

    Denne delen vil diskutere betydningen av å koble til tagger på nettstedet ditt.

    Merk:

    Dette er bare eksempler på hvordan du kan bruke koblingskodene. Du kan selvfølgelig endre sin plassering for å gjøre nettstedet ditt mer brukervennlig og attraktivt.

    Målvindu

    Målvinduet laster den koblede siden i et annet nettleservindu, slik at brukeren kan være på nettsiden din nåværende side og vise den hyperkoblede adressen i en annen nettleser.

    Bordetiketter

    Sette inn tabeller på nettstedet ditt kan være svært nyttig å vise informasjonen på en ordnet måte. Det vil også gi deg mulighet til å håndtere tekst og grafikk mer presist.

    Åpningstaggen

    brukes til å fortelle nettleseren at tabellen på siden starter der og slutter med
    stikkord. Du kan også endre farge, størrelse og grense størrelse på bordet ditt.

    Bordets størrelse kan endres ved å bruke

    stikkord. Du kan enten bruke piksler eller prosentandelen til å endre størrelsen på tabellen.

    Du kan bruke taggen

    for eksempel å lage en usynlig grense i nettleseren din.

    De

    tag brukes til å lage et mellomrom mellom teksten og den indre linjen av bordets kantlinje.

    De

    tag brukes til å sette inn et mellomrom mellom den indre og ytre linjen av bordets grenser.

    Et bord består av celler som er definert av kolonnene og radene i tabellen. En celle vil være det rommet hvor innholdet ditt vil bli satt inn. Kolonnekoden er definert som

    koder og radene er definert som ogtags. For å endre cellebredden, kan du bruke og for å justere en kolonne, sett inn taggen
    og
    stikkord. Størrelsen kan enten angis i prosent eller i piksel.

    Du kan også justere radene og kolonnene ved å legge til ALIGN-attributtet i kodene dine. Derfor, for å justere en bestemt rad, for eksempel, sett inn taggen

    For å justere cellen din, kan du bruke attributtet VALIGN .

    vil plassere cellen til øvre senter på siden din.

    For å spenne en kolonne kan du bruke taggen

    å angi antall kolonner som cellen skal strekke seg over. Merk at standardverdien er satt til 1.

    Også, for å spenne en celle til en rekke rader, bruk

    stikkord.

    Eksempel 9

    Alt om HTML

    Fargekoder

    Bordetiketter

    HTML er akronym for HyperText Markup Language

    Språket består av et sett med koder og symboler som vil generere:

    • tekst,
    • Bilder,
    • lyder,
    • rammer
    • animasjon på webleser sidene dine.

    To vanlige måter å starte nettstedet ditt er enten:

    1. å lage dine egne koder i en enkel tekstredigerer og lagre dem som en .htm-fil. eller
    2. bruk en HTML generator programvare.

    Fargekoder

    Du kan bruke Hexadecimal Color Codes levert av Theodora for å lage din egen nettsideatmosfære.

    Mer tekst kan legges til her.

    Mer tekst kan legges til her.

    Mer tekst kan legges til her.

    Mer tekst kan legges til her.

    Mer tekst kan legges til her.

    Bordetiketter

    Dette avsnittet gir deg mer informasjon om tablettkoder

    Overskrift

    Dette er en annen del av innholdet

    Kolonne 1 Kolonne 2 Kolonne 3
    Cellspenning i 3 rader (2. og 3. fusjonert) Cellebelastning i 2 rader (første og andre celle fusjonert) 1. Cell
    Andre celle
    Tredje celle
    Tredje celle 4. Cell

    HTML Frame Tags

    HTML-rammer lar deg lage uavhengige vinduer på en nettside. De er veldig nyttige da de lar deg vise mer enn ett dokument på en nettside.

    For å gjøre bruk av rammene må du ha minst to forskjellige .htm-filer, hvorav en vil bli kalt index.htm . Index.htm filen vil være hvor alle vinduene vil bli vist. Ramme-taggen er definert som og tag brukes til å definere settet med rammer som brukes i index.htm filen.

    Eksempel 10

    Prøv rammekoder

    vil sette opp størrelsen på radene som vil bli vist i nettleseren din.

    vil sette opp størrelsen på kolonnene som vil bli vist i nettleseren din.

    De tag vil navngi rammen og brukes til å koble dem til hovedvinduet.

    tag vil bli brukt til å sette en ramme til rammene dine. Setter den til 0 vil sikre at den blir kompatibel med alle nettlesere.

    vil sette en mellomrom mellom de nærmeste rammene.

    vil sette breddeplassen på begge sider av rammene. Størrelsen skal settes i piksler.

    vil angi størrelsen på topp og bunn i piksler.

    De tag vil kunne vertikale eller horisontale rullefeltet på rammen din. Verdien må enten settes til "ja", "nei" eller "auto".

    WYSIWYG-programvare

    Det er programmer som kalles WYSIWYG (det du ser er det du får), som koder for deg, men dette bør ikke stoppe deg fra å lære et minimum av html-konsepter for å unngå ubehagelige overraskelser! Med denne programvaren legger du teksten og bildene, og programvaren genererer den tilsvarende HTML-koden samtidig. Det vil også gjøre arbeidet enklere å inkludere animasjoner eller skript. Det er for eksempel:

    Dreamweaver, ikke gratis, men veldig omfattende og enkel å bruke med en godt designet opplæring

    GoLive Photoshop editor

    For gratis WYSIWYG kan vi nevne:

    • Matizha sublime
    • //bluegriffon.org/pages/DownloadBlueGriffon
    • Maguma studio
    • HTML-sett
    • 1. side 2000
    Forrige Artikkel Neste Artikkel

    Beste Tips