Miten luoda oma verkkosivusto

Perus- sivusto voidaan suunnitella käyttämällä HTML-koodia. Skriptit voidaan kirjoittaa Muistioon tai tekstiasiakirjaan käyttämäsi käyttöjärjestelmän mukaan. Ensimmäisiä käytetään usein välittämään tietoa sisällön yksiköstä ja jälkimmäisiä käytetään muotoilemaan verkkosivun työkaluja. Koodauksen aikana HTML- määritteitä ja -arvoja käytetään informaation, kuten sijoittelun, korkeuden jne., Tuottamiseen. Näiden lisäksi voidaan käyttää väritunnisteita, kuvalappuja ja HTML- jako-tunnisteita elävän verkkosivun luomiseen.

Miten luoda oma verkkosivusto

  • Mikä on HTML?
  • vaatimukset
    • Esimerkki 1:
  • HTML-tunnisteet
  • HTML-elementit
  • Muistettavat HTML-tunnisteet
    • Esimerkki 2
  • HTML-määritteet ja -arvot
    • Esimerkki 3
  • Väritunnisteet
    • Esimerkki 4
  • Tekstin muotoilu
    • Esimerkki 5
  • HTML-divisioonamerkinnät
    • Esimerkki 6
  • Kuvan tunnisteet
    • Esimerkki 7
  • Tunnisteiden linkittäminen
    • Esimerkki 8
  • Taulukon tunnisteet
    • Esimerkki 9
  • HTML-kehyksen tunnisteet
    • Esimerkki 10
  • WYSIWYG-ohjelmisto

Kun luot verkkosivuston, monet ihmiset valitsevat usein web-suunnittelijan apua. On kuitenkin olemassa yksinkertaisia ​​tapoja oppia, miten voit tehdä perussivuston itse, ja ne selitetään tässä artikkelissa.

Mikä on HTML?

Jos haluat luoda verkkosivuston, sinun täytyy oppia HTML: n perusteet. HTML on HyperText-merkintäkielen lyhenne, joka on ohjelmointikieli, jota käytetään luomaan hypertext-dokumentteja World Wide Webissä. Kieli koostuu joukosta koodeja ja symboleja, jotka tuottavat selaimen sivuille tekstiä, kuvia, ääniä, kehyksiä ja animaatioita.

Kaksi yleistä tapaa käynnistää sivustosi ovat:

  • Omien koodien luominen yksinkertaiseen tekstieditoriin ja niiden tallentaminen .htm-tiedostoksi
  • HTML-generaattoriohjelmiston käyttäminen

vaatimukset

Jos käytät Windowsia, aloita avaamalla uusi Muistio- asiakirja.

Niille, joilla on MAC, avaa uusi SimpleText- asiakirja.

OSX- käyttäjille, avaa TextEdit ja tee seuraavat muutokset:

1. Avaa "Format" -valikko ja valitse "Plain Text"

2. Avaa "Tekstin muokkaus" -valikossa "Asetukset" -ikkuna ja valitse vaihtoehto "Ohita rikkaiden tekstikomentojen HTML-tiedostot".

Esimerkki 1:

Kun sinulla on tyhjä asiakirja, voit aloittaa kirjoittamalla:

Tämä on sivusi otsikko

Tässä on kaikki sisältösi

Huomautus:

1. Tallenna asiakirjat aina .htm- tai html-laajennuksella, jotta ne näkyvät Web-selaimessasi. (esim. index.htm).

2. Voit muokata lähdeasiakirjaa valitsemalla selaimen ikkunassa työkaluriviltä "Näytä" -vaihtoehdon ja valitsemalla "Lähde".

3. Älä unohda tallentaa kaikkia asiakirjan muutoksia.

4. Jos haluat tarkastella asiakirjassa tehtyjä muutoksia selainikkunassa, päivitä sivu F5-näppäimellä.

HTML-tunnisteet

HTML-tunniste määritetään merkintänä, joka lisätään HTML-dokumenttiin, jotta saat enemmän tietoa sisällöstä. HTML-tunniste asetetaan sulkujen väliin ja tarvitsee sulkemisen. (esimerkiksi ).

HTML-elementit

Elementit ovat merkintöjä, joita käytetään joidenkin verkkosivun osien muotoiluun. Esimerkki HTML-elementistä on tunniste, jota käytetään selaimessa näkyvän tekstin lihavoittamiseen.

kerrotaan selaimellesi, että tiedosto koostuu HTML-koodatuista tiedoista. käytetään asiakirjan loppupuolella kertomaan selaimellesi, että HTML-sisältö päättyy sinne.

sisältää asiakirjan ensimmäisen osan ja missä selaimen sivun nimi löytyy. Se voi sisältää myös komentoja, joita käytetään selaimen näytön alustamiseen (esim. CSS-puhelut). käytetään tämän jakson lopettamiseen. Tätä osaa ei näytetä selaimessasi.

käytetään sivustosi merkitsemiseen. siten käytetään osoittamaan kyseisen komennon loppua.

määrittelee kaiken sisällön, joka näytetään selaimessasi.

Muistettavat HTML-tunnisteet

otsikot

Otsikoita käytetään osoittamaan Web-sivun seuraavan sisällön aihe. HTML: ssä ne voivat vaihdella kooltaan

kappaleissa

Kappaleita käytetään erottamaan Web-sivusi tekstilohkot. HTML: ssä ne määritellään

tag. Kappaleessa on avainsana

ja sulkumerkki

.
  • Tässä osassa on määritelty HTML-tunnisteet

Linjan rikkoutuminen

HTML: ssä rivinvaihto EI edellytä sulkemista. Näin ollen ne määritellään yksinkertaisesti

tag.

  • Tässä osassa on määritelty HTML-tunnisteet

Kommentit

Huomautuksia lisätään HTML-sivulle, jotta sen suunnittelija etsii verkkosivun eri osiot. Ne on määritelty tag. Kommentti-tunnisteita ei näytetä selaimessa, ja niitä voidaan siten käyttää missä tahansa asiakirjan kohdassa vaikuttamatta verkkosivun muotoon.

Esimerkki 2

Kaikki HTML: stä

HTML on HyperText-merkintäkielen lyhenne

HTML-määritteet ja -arvot

HTML-attribuutit ovat elementteihin lisättäviä tietoja, joita käytetään sisältämään tietty ominaisuus HTML-elementteihin. HTML-määritteet kirjoitetaan aina yhdessä arvon kanssa (esim. Nimi = "arvo" ) ja ne asetetaan HTML-elementin aloitusmerkkiin.

Jos esimerkiksi haluat, että otsikko sijoitetaan sivun keskelle sen sijaan, että se näytetään vasemmalla oletusarvoisesti, voit lisätä kohdistuksen määritteen tunnisteeseen:

  • HTML on HyperText-merkintäkielen lyhenne

    Väritunnisteet

    Väritunnisteiden avulla voit muokata selaimen ikkunassa näkyvän tekstin väriä. on esimerkki tekstin värin muokkaamisesta, jos haluat tehdä niin.

    HTML: ssä voit myös käyttää värikoodeja saadaksesi tiettyjä värejä käyttämällä heksadesimaalikoodeja. Ns. Heksadesimaaliset tripletit vastaavat punaisia, vihreitä ja sinisiä (RGB) värejä. Näin ollen heksadesimaalissa oleva värilappu näyttää jotain . Voit saada värikoodit ja nimet seuraavasti: //www.computerhope.com/htmcolor.htm

    Voit myös käyttää väritunnisteita verkkosivustosi taustavärin muuttamiseen lisäämällä BGCOLOR- määritteen. Siten, muuttaa taustavärin oletusvalkoisesta.

    Esimerkki 4

    Kaikki HTML: stä

    .

    HTML on HyperText-merkintäkielen lyhenne

    Huomautus:

    1. On suositeltavaa, että tekstissä ei näy silmiinpistäviä värejä, kuten keltaisia ​​tai vaaleanpunaisia, koska nämä värit ovat yleensä häiritseviä silmiin

    2. Yritä myös käyttää enintään 4 hieman vastaavaa värisävyä, jotka vastaavat sivustosi ilmapiiriä paremman harmonisoinnin aikaansaamiseksi.

    3. Älä tee hankalia värejä kuin vaaleanpunainen teksti sinisellä pohjalla virallisille verkkosivustoille, koska se näyttää outolta.

    Tekstin muotoilu

    Tekstin muotoilutunnisteiden avulla voit muokata tekstinäyttöä selainikkunassa. Voit esimerkiksi käyttää tekstin lihavointia käyttämällä tag. (esim. Tällä tekstillä on lihavoitu fontti ). Alla on luettelo yleisistä tekstimuotoilutunnisteista, joita voit käyttää tekstinäytön muuttamiseen:

    1. Lihavoitu merkki

    Tämä teksti on lihavoitu

    2. Kursivoitu tunniste

    Tämä teksti on kursivoitu

    3. Alleviivaa tunniste

    Tämä teksti on alleviivattu

    4. Korosta tunniste

    Tämä korostaa tekstiäsi

    5. Vahva tunniste

    Tämä teksti on vahva

    6. Big Tag

    Tämä määrittää suuren tekstin

    7. Pieni tunniste

    Tämä määrittää pienen tekstin

    8. alaindeksin tunniste

    Tämä teksti tilataan

    9. Superscript-tunniste

    Tämä teksti korvataan

    10. Keskitä tunniste

    Tämä teksti keskitetään

    11. Vasen tunniste

    Tämä teksti näkyy näytön vasemmalla puolella

    12. Oikea merkki

    Tämä teksti näkyy näytön oikeassa reunassa

    13. Järjestämättömän listan tunniste

    • Tämä on järjestämätön lista
    • Tämä on järjestämätön lista

    14. Tilattujen luettelojen tunniste

    1. Tämä on numero 1 luettelossani
    2. Tämä on numero 2 luettelossani

    Huomautus:

    1. Nämä tunnisteet voidaan myös yhdistää. Jos haluat alleviivatun lihavoidun tekstin, voit käyttää sitä Tämä teksti on lihavoitu ja alleviivattu

    2. Sulje kuitenkin aina ensimmäinen avattu tunniste. Edellä olevassa esimerkissä on avattu ENSIMMÄINEN ennen tunniste, mutta se on suljettu LAST.

    Esimerkki 5

    Kaikki HTML: stä

    .

    HTML on HyperText-merkintäkielen lyhenne

    Kieli koostuu joukosta koodeja ja symboleja, jotka tuottavat:

    • teksti,
    • kuvia,
    • kuulostaa,
    • kehyksiä
    • animaatio selaimesi sivuilla.

    Kaksi yleistä tapaa käynnistää sivustosi ovat joko

    1. luoda omia koodeja yksinkertaisessa tekstieditorissa ja tallentaa ne .htm-tiedostoksi. tai
    2. käyttää HTML-generaattoriohjelmistoa.

    HTML-divisioonamerkinnät

    Horisontaalinen sääntö

    Horisontaalisia sääntöjä käytetään jakamaan tai jakamaan verkkosivusi osia.


    tagia luodaan vaakasuora viiva ja sitä voidaan muuttaa luomaan erilaisia ​​rivejä muuttamalla niiden kokoa, väriä tai leveyttä.

    Esimerkiksi


    tai

    Yhtenäinen viiva


    tagia luodaan kiinteä viiva. Se muuttaa hieman horisontaalisen säännön tunnisteesta, koska se tuottaa linjan ilman 3D-katkaisua, jonka
    tag.

    Esimerkki 6

    Kaikki HTML: stä

    .


    HTML on HyperText-merkintäkielen lyhenne

    Kieli koostuu joukosta koodeja ja symboleja, jotka tuottavat:

    • teksti,
    • kuvia,
    • kuulostaa,
    • kehyksiä
    • animaatio selaimesi sivuilla.


    Kaksi yleistä tapaa käynnistää sivustosi ovat joko

    1. luoda omia koodeja yksinkertaisessa tekstieditorissa ja tallentaa ne .htm-tiedostoksi. tai
    2. käyttää HTML-generaattoriohjelmistoa.

    Kuvan tunnisteet

    HTML-asiakirjojen avulla voit lisätä kuvia käyttämällä kuvatunnisteita. Voit joko selata kuvaa online-URL-osoitteesta tai omalta tietokoneeltasi. Kuvan tunniste tarkoittaa "kuvalähdettä"; näin ollen kuvan polku tulisi määritellä määritteen jälkeen. Jos kuva löytyy samasta kansiosta kuin lähdeasiakirja, sinun ei tarvitse syöttää koko polun hakemistoa.

    Esimerkiksi

    tai tai

    Kohdistustunniste

    Voit vielä kerran käyttää ALIGN- attribuuttia näyttämään kuvan joko selaimen keskellä, oikealla tai vasemmalla puolella.

    EG1

    Huomautus: Selaimesi ei kuitenkaan tue tätä tunnistetta. Voit siis käyttää tagia juuri ennen kuvasanaa keskittääksesi kuvan selaimeen.

    EG2

    Kuvan koko

    Näytettävän kuvan kokoa voidaan muuttaa käyttämällä WIDTH- ja HEIGHT-määritteitä. Voit käyttää kuvan kokoa joko prosentteina tai pikseleinä.

    EG1

    EG2

    Kuvaraja

    Jos haluat lisätä kuvan reunaan, voit käyttää BORDER- attribuuttia.

    Esimerkiksi

    Runaround Space

    Suorakulmainen tila viittaa tilaa ympäröivään avaruusaukkoon. Tämä on erittäin hyödyllinen tunniste, kun kuvan ympärillä on tekstiä. Se määritetään käyttämällä VSPACE- attribuuttia ylä- ja alareunassa ja HSPACE- attribuuttia käytetään vasemmassa ja oikeassa reunassa.

    Esimerkiksi

    Esimerkki 7

    Kaikki HTML: stä

    .


    HTML on HyperText-merkintäkielen lyhenne

    Kieli koostuu joukosta koodeja ja symboleja, jotka tuottavat:

    • teksti,
    • kuvia,
    • kuulostaa,
    • kehyksiä
    • animaatio selaimesi sivuilla.

    Kaksi yleistä tapaa käynnistää sivustosi ovat joko

    1. luoda omia koodeja yksinkertaisessa tekstieditorissa ja tallentaa ne .htm-tiedostoksi. tai
    2. käyttää HTML-generaattoriohjelmistoa.


    Värikoodit

    Voit käyttää Theodoran toimittamia heksadesimaalisia värikoodeja luomaan oman verkkosivustosi tunnelman

    Tämä on esimerkki, joka sinulla on vspace- ja hspace-attribuutin kanssa

    Tunnisteiden linkittäminen

    HTML: ssä käytetään linkitunnisteita hypätäksesi sivun yhdestä osasta toiseen tai yhdeltä sivulta toiselle. Niitä kutsutaan sisäisiksi linkeiksi, jos niiden avulla voit siirtyä osiosta tai omalta verkkosivulta toiselle ja ulkoiselle linkille, kun ne avaavat uuden selainikkunan toisesta sivustosta. Tunnisteiden linkittämisen tärkein etu on, että voit luoda dynaamisen verkkosivuston vierityssivun luomisen sijaan.

    Ulkoinen linkki

    näyttää Web-osoitteen linkin hyperlinkkinä verkkosivullesi ja kun käyttäjä napsauttaa tekstiä, se lataa sivun www.webaddress.com

    Sisäinen linkki

    Sisäisen linkin lisääminen on kaksi tapaa:

    1. Voit siirtyä nykyiseltä sivulta toiseen samaan sivustoon

    2. Voit siirtyä sivun nykyisestä osasta toiseen saman sivun osaan.

    Jotta voit siirtyä osiosta toiseen, sinun on ensin annettava osalle nimi, jotta tunniste voi paikantaa sen, kun sitä kutsutaan. Jos esimerkiksi HTML-linkkejä koskeva osa on lisättävä verkkosivun yläosaan, vain HTML-linkkien otsikon yläpuolelle, aseta tunniste . "Linkit" -arvo viittaa osioon, joka on sijoitettava; jos siis verkkosivusi osa perustuu kissoihin, aseta tunniste juuri kissan otsikon yläpuolella.

    Tämän prosessin jälkeen sinun pitäisi myös lisätä linkki, josta haluat hypätä. Tässä esimerkissä, jos haluat siirtyä sivun yläosasta sivun alareunassa olevaan "HTML-linkkien" sijaintiin, lisää Linking Tags . Hyperlinkitetty teksti "Linking Tags" tulee näkyviin ja kun käyttäjä napsauttaa sitä, ne siirtyvät nykyisestä sijainnistaan ​​ilmoitettuun osaan.

    Esimerkki 8

    Kaikki HTML: stä

    Värikoodit

    Tunnisteiden linkittäminen


    HTML on HyperText-merkintäkielen lyhenne

    Kieli koostuu joukosta koodeja ja symboleja, jotka tuottavat:

    • teksti,
    • kuvia,
    • kuulostaa,
    • kehyksiä
    • animaatio selaimesi sivuilla.

    Kaksi yleistä tapaa käynnistää sivustosi ovat joko

    1. luoda omia koodeja yksinkertaisessa tekstieditorissa ja tallentaa ne .htm-tiedostoksi. tai
    2. käyttää HTML-generaattoriohjelmistoa.


    Värikoodit

    Voit käyttää Theodoran toimittamia heksadesimaalisia värikoodeja luomaan oman verkkosivustosi tunnelman

    Tämä on esimerkki, joka sinulla on vspace- ja hspace-attribuutin kanssa

    Microsoftin verkkosivustosta on hyötyä napsauttamalla tätä linkkiä


    Tunnisteiden linkittäminen

    Tässä osiossa kerrotaan, miten tärkeää on linkittää linkit sivustossasi.

    Huomautus:

    Nämä ovat vain esimerkkejä siitä, miten voit hyödyntää linkitysmerkkejä. Voit tietysti muuttaa niiden sijoittelua, jotta sivustosi olisi käyttäjäystävällisempi ja houkuttelevampi.

    Kohde-ikkuna

    Kohdeikkuna lataa linkitetyn sivun toiseen selainikkunaan, jotta käyttäjä voi pysyä Web-sivuston nykyisellä sivulla ja tarkastella hyperlinkkiä osoitteen toisessa selaimessa.

    Taulukon tunnisteet

    Taulukkojen lisääminen sivustoosi voi olla erittäin hyödyllistä näyttää tiedot asianmukaisesti. Sen avulla voit myös käsitellä tekstiä ja grafiikkaa tarkemmin.

    Avainsana

    käytetään kertomaan selaimellesi, että sivun taulukko alkaa ja päättyy
    tag. Voit myös muokata taulukon väriä, kokoa ja reunakokoa.

    Taulukon kokoa voidaan muuttaa käyttämällä

    tag. Voit käyttää taulukon kokoa käyttämällä pikseleitä tai prosenttiosuutta.

    Voit käyttää tunnistetta

    esimerkiksi tehdä näkymätön raja selaimessasi.

    tagia käytetään välilyönnin muodostamiseen tekstin ja taulukon reunan sisäisen viivan välille.

    tunnistetta käytetään lisäämään välilyönti pöydän reunojen sisä- ja ulkolinjan väliin.

    Taulukko koostuu soluista, jotka ovat taulukon sarakkeiden ja rivien määrittelemiä. Solu on tila, johon sisältö lisätään. Sarakkeen tunniste on määritelty

    tunnisteet ja rivit määritellään jatunnisteita. Voit muuttaa solun leveyttä käyttämällä ja kohdista sarake asettamalla merkki
    ja
    tag. Koko voidaan asettaa joko prosentteina tai pikselinä.

    Voit myös kohdistaa rivit ja sarakkeet lisäämällä tunnisteisiin ALIGN-määritteen. Jos haluat kohdistaa tietyn rivin esimerkiksi asettamalla tunnisteen

    Voit kohdistaa solun käyttämällä attribuuttia VALIGN .

    sijoittaa solun sivun yläreunaan.

    Voit kattaa sarakkeen käyttämällä tagia

    asettaa sarakkeiden lukumäärän solun. Huomaa, että oletusarvo on 1.

    Voit myös käyttää solua useisiin riveihin käyttämällä

    tag.

    Esimerkki 9

    Kaikki HTML: stä

    Värikoodit

    Taulukon tunnisteet

    HTML on HyperText-merkintäkielen lyhenne

    Kieli koostuu joukosta koodeja ja symboleja, jotka tuottavat:

    • teksti,
    • kuvia,
    • kuulostaa,
    • kehyksiä
    • animaatio selaimesi sivuilla.

    Kaksi yleistä tapaa käynnistää sivustosi ovat joko

    1. luoda omia koodeja yksinkertaisessa tekstieditorissa ja tallentaa ne .htm-tiedostoksi. tai
    2. käyttää HTML-generaattoriohjelmistoa.

    Värikoodit

    Voit käyttää Theodoran toimittamia heksadesimaalisia värikoodeja luomaan oman verkkosivustosi tunnelman.

    Lisää tekstiä voi lisätä tähän.

    Lisää tekstiä voi lisätä tähän.

    Lisää tekstiä voi lisätä tähän.

    Lisää tekstiä voi lisätä tähän.

    Lisää tekstiä voi lisätä tähän.

    Taulukon tunnisteet

    Tässä osiossa kerrotaan lisää taulukon tunnisteista

    otsikko

    Tämä on toinen osa sisältöä

    Sarake 1 Sarake 2 Sarake 3
    Solun ulostulo kolmessa rivissä (toinen ja kolmas yhdistetty) Solun ulostulo kahdessa rivissä (1. ja 2. solu yhdistetty) 1. solu
    2. solu
    Kolmas solu
    Kolmas solu 4. solu

    HTML-kehyksen tunnisteet

    HTML-kehysten avulla voit luoda itsenäisiä ikkunoita verkkosivun sisällä. Ne ovat erittäin hyödyllisiä, koska niiden avulla voit näyttää useamman kuin yhden asiakirjan verkkosivulla.

    Jos haluat käyttää kehyksiä, sinulla on oltava vähintään kaksi eri .htm-tiedostoa, joista yksi on nimeltään index.htm . Index.htm- tiedosto on, jossa kaikki ikkunat tulevat näkyviin. Kehysmerkki on määritelty ja tunnistetta käytetään määrittämään index.htm-tiedostossa käytettävät kehykset.

    Esimerkki 10

    Kokeile kehyksen tunnisteita

    määrittää selaimesi näytettävien rivien koon.

    määrittää selaimesi näytettävien sarakkeiden koon.

    tunniste nimeää kehyksen ja sitä käytetään linkittämään ne pääikkunaan.

    tagia käytetään rajaamaan kehykset. Sen asettaminen arvoon 0 varmistaa, että se on yhteensopiva kaikkien selainten kanssa.

    asettaa lähimpien kehysten välisen tilan.

    asettaa leveysalueen kehysten molemmille puolille. Koko tulisi määrittää pikseleinä.

    asettaa ylä- ja alareunan koon pikseleinä.

    tunniste pystyy runkoosi pystysuoraan tai vaakasuuntaiseen vierityspalkkiin. Sen arvon on oltava joko "kyllä", "ei" tai "auto".

    WYSIWYG-ohjelmisto

    On ohjelmistoja, joita kutsutaan WYSIWYG: ksi (mitä näet, mitä saat), jotka koodaavat sinulle, mutta tämä ei saisi estää sinua oppimasta vähintään html-käsitteitä epämiellyttävien yllätysten välttämiseksi! Tämän ohjelmiston avulla voit laittaa tekstin ja kuvat ja ohjelmisto tuottaa vastaavan HTML-koodin samanaikaisesti. Se helpottaa myös animaatioiden tai skriptien sisällyttämistä työhön. On esimerkiksi:

    Dreamweaver ei ole ilmainen, mutta erittäin kattava ja helppokäyttöinen ja hyvin suunniteltu opetusohjelma

    GoLive Photoshop -editori

    Vapaa WYSIWYG voi mainita:

    • Matizha ylevä
    • //bluegriffon.org/pages/DownloadBlueGriffon
    • Maguma-studio
    • HTML-paketti
    • 1. sivu 2000
    Edellinen Artikkeli Seuraava Artikkeli

    Top Vinkkejä