Kako stvoriti vlastitu web stranicu

Osnovna web-lokacija može se izraditi pomoću jezika za označavanje hiperteksta (HTML). Skripte se mogu pisati u Notepadu ili tekstualnom dokumentu ovisno o operativnom sustavu koji koristite. Vrlo osnovni alati za stvaranje web-mjesta počinju s upotrebom HTML oznaka i HTML elemenata . Prvi se često koristi za prenošenje informacija o jedinici sadržaja, a druge se koriste za oblikovanje alata za web-stranicu. Tijekom kodiranja, atributi i vrijednosti HTML-a koriste se za pružanje informacija kao što su položaj, visina itd. Za sadržaj. Osim toga, možete koristiti oznake u boji, oznake slika i HTML oznake podjela da biste stvorili živu web-stranicu.

Kako stvoriti vlastitu web stranicu

  • Što je HTML?
  • zahtjevi
    • Primjer 1:
  • HTML oznake
  • HTML elementi
  • Osnovne HTML oznake za pamćenje
    • Primjer 2
  • HTML atributi i vrijednosti
    • Primjer 3
  • Oznake boja
    • Primjer 4
  • Oblikovanje teksta
    • Primjer 5
  • Oznake HTML odjela
    • Primjer 6
  • Oznake slike
    • Primjer 7
  • Povezujuće oznake
    • Primjer 8
  • Oznake tablice
    • Primjer 9
  • Oznake okvira HTML-a
    • Primjer 10
  • WYSIWYG Softver

Prilikom izrade web-lokacije mnogi ljudi često biraju pomoć web-dizajnera. Međutim, postoje jednostavni načini da sami naučite kako napraviti osnovnu web-lokaciju i oni će biti objašnjeni u ovom članku.

Što je HTML?

Da biste izradili web-lokaciju, morate naučiti osnove HTML-a. HTML je akronim za HyperText Markup Language, koji je programski jezik koji se koristi za stvaranje hipertekstualnih dokumenata na World Wide Webu. Jezik se sastoji od niza kodova i simbola koji će generirati tekst, slike, zvukove, okvire i animacije na stranicama preglednika.

Dva najčešća načina za pokretanje web-lokacije su:

  • Izradite vlastite kodove u jednostavnom uređivaču teksta i spremite ih kao .htm datoteku
  • Korištenje HTML generatora softvera

zahtjevi

Za one koji koriste Windows, započnite s otvaranjem novog dokumenta Notepada .

Za one koji pokreću MAC, otvorite novi SimpleText dokument.

Za korisnike OSX-a, otvorite TextEdit i izvršite sljedeće promjene:

1. Otvorite izbornik "Format" i odaberite "Običan tekst"

2. U izborniku "Uređivanje teksta" otvorite prozor "Postavke" i odaberite opciju "Zanemari naredbe obogaćenog teksta u HTML datotekama".

Primjer 1:

Nakon što imate prazan dokument, možete početi upisivanjem:

Ovo je naslov vaše stranice

Ovdje će se pojaviti svi vaši sadržaji

Bilješka:

1. Uvijek spremite dokumente s .htm ili html nastavkom da biste ih prikazali u web-pregledniku. (npr. index.htm).

2. Da biste uredili izvorni dokument, odaberite opciju "Prikaz" na alatnoj traci u prozoru preglednika i odaberite "Izvor".

3. Ne zaboravite spremiti sve izmjene na dokumentu.

4. Da biste pregledali izmjene dokumenta u prozoru preglednika, osvježite stranicu pomoću tipke F5.

HTML oznake

HTML oznaka definirana je kao oznaka koja se dodaje u HTML dokument kako bi pružila više informacija o sadržaju. Između zagrada postavlja se HTML oznaka i treba joj završnu oznaku. (npr.).

HTML elementi

Elementi su oznake označavanja koje se koriste za formatiranje nekih dijelova web-stranice. Primjer HTML elementa je oznaka koja se koristi za podebljavanje teksta prikazanog u pregledniku.

koristi se da bi Vašem pregledniku rekao da je datoteka sastavljena od HTML kodiranih podataka. se koristi na samom kraju dokumenta kako bi vaš preglednik rekao da HTML sadržaj završava.

sadrži prvi dio dokumenta i nalazi se naslov stranice preglednika. Također može sadržavati naredbe za formatiranje prikaza vašeg preglednika (npr. CSS pozivi). zatim se koristi za prekid ovog odjeljka. Ovaj dio neće biti prikazan u vašem pregledniku.

će se koristiti za označavanje vaše web-lokacije. se stoga koristi za označavanje kraja te naredbe.

definira sav sadržaj koji će biti prikazan u vašem pregledniku.

Osnovne HTML oznake za pamćenje

naslovi

Naslovi se koriste za označavanje predmeta sljedećeg sadržaja na vašoj web stranici. U HTML-u mogu varirati u veličini, od

stavci

Odlomci se koriste za odvajanje blokova teksta na web-stranici. U HTML-u se definiraju pomoću

označiti. Stavak će imati početnu oznaku

i završnu oznaku

,
  • Ovaj odjeljak ima definirane HTML oznake

Prekid redaka

U HTML-u, prelomi redaka NE zahtijevaju završnu oznaku. Dakle, oni su jednostavno definirani s

označiti.

  • Ovaj odjeljak ima definirane HTML oznake

komentari

Komentari su umetnuti u HTML stranicu kako bi dizajner pronašao različite odjeljke na web-stranici. Oni su definirani s označiti. Oznake komentara se ne prikazuju u pregledniku i mogu se koristiti bilo gdje u dokumentu bez utjecaja na format web-stranice.

Primjer 2

Sve o HTML-u

HTML je skraćenica za HyperText Markup Language

HTML atributi i vrijednosti

HTML atributi su informacije koje se dodaju elementima i koje se koriste za uključivanje određene osobine u HTML elemente. HTML atributi uvijek se pišu zajedno s vrijednošću (npr. Name = "value" ) i stavljaju se na početnu oznaku HTML elementa.

Na primjer, ako želite da se zaglavlje smjesti u središte stranice umjesto zadanog prikaza na lijevoj strani, atribut poravnanja možete dodati oznaci:

  • HTML je skraćenica za HyperText Markup Language

    Oznake boja

    Oznake u boji omogućuju vam izmjenu boje teksta koji se prikazuje u prozoru preglednika. je primjer kako promijeniti boju teksta ako to želite.

    U HTML-u možete koristiti i kodove boja za dobivanje određenih boja pomoću heksadecimalnih kodova. Takozvani heksadecimalni tripleti odgovaraju crvenoj, zelenoj i plavoj boji (RGB). Stoga će oznaka u boji u heksadecimalnom obliku izgledati nešto slično , Možete dobiti kodove i imena boja slijedeći ovaj link: //www.computerhope.com/htmcolor.htm

    Oznake u boji možete koristiti i za izmjenu boje pozadine web-lokacije dodavanjem atributa BGCOLOR . Stoga, će promijeniti boju pozadine iz zadane bijele boje.

    Primjer 4

    Sve o HTML-u

    ,

    HTML je skraćenica za HyperText Markup Language

    Bilješka:

    1. Preporučuje se da ne odaberete markantne boje kao što su žuta ili ružičasta za vaš tekst jer te boje imaju smetnje za oči

    2. Također, pokušajte upotrijebiti maksimalno 4 nijanse boje koje odgovaraju atmosferi vaše web-stranice radi boljeg usklađivanja rezultata.

    3. Nemojte napraviti neugodnu boju sličnu ružičastom tekstu na plavoj pozadini za formalne web stranice jer će izgledati čudno.

    Oblikovanje teksta

    Oznake oblikovanja teksta omogućuju vam izmjenu prikaza teksta u prozoru preglednika. Na primjer, da biste podebljali tekst, možete koristiti označiti. (npr. Ovaj tekst će imati podebljan font ). U nastavku se nalazi popis uobičajenih oznaka za oblikovanje teksta koje možete koristiti za izmjenu prikaza teksta:

    1. Podebljana oznaka

    Ovaj tekst će biti podebljan

    2. Kurzivna oznaka

    Ovaj tekst će biti u kurzivu

    3. Podcrtajte oznaku

    Ovaj tekst će biti podcrtan

    4. Naglasite oznaku

    To će naglasiti vaš tekst

    5. Jaka oznaka

    Ovaj tekst će biti jak

    6. Velika oznaka

    Ovo će definirati veliki tekst

    7. Mala oznaka

    Time će se definirati mali tekst

    8. Oznaka indeksa

    Ovaj tekst bit će označen

    9. Nadpisana oznaka

    Ovaj tekst bit će natpisan

    10. Središnja oznaka

    Ovaj tekst bit će centriran

    11. Lijeva oznaka

    Ovaj tekst će se prikazati na lijevoj strani zaslona

    12. Desna oznaka

    Ovaj tekst će se prikazati na desnoj strani zaslona

    13. Oznaka neuređenog popisa

    • Ovo je neuređen popis
    • Ovo je neuređen popis

    14. Naručena oznaka popisa

    1. Ovo je broj 1 na mom popisu
    2. Ovo je broj 2 na mom popisu

    Bilješka:

    1. Te se oznake mogu kombinirati. Ako želite podcrtani podebljani tekst, možete ga koristiti Ovaj tekst će biti podebljan i podvučen

    2. Međutim, uvijek zatvorite prvu oznaku koju ste zadnji put otvorili. U gornjem primjeru, je otvoren PRVO, prije oznaka, ali je zatvorena LAST.

    Primjer 5

    Sve o HTML-u

    ,

    HTML je skraćenica za HyperText Markup Language

    Jezik se sastoji od skupa kodova i simbola koji će generirati:

    • tekst,
    • slike,
    • zvuči,
    • okviri
    • animacije na stranicama preglednika.

    Dva uobičajena načina za pokretanje web-lokacije su:

    1. stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
    2. koristiti softver za generiranje HTML-a.

    Oznake HTML odjela

    Horizontalno pravilo

    Horizontalna pravila koriste se za dijeljenje ili podjelu dijelova vaše web-stranice.


    Oznaka se koristi za stvaranje horizontalne linije i može se mijenjati kako bi se stvorili različiti tipovi linija izmjenom njihove veličine, boje ili širine.

    npr


    ili

    Puna linija


    Oznaka se koristi za stvaranje čvrste linije. Malo se mijenja od horizontalne oznake pravila jer proizvodi liniju bez 3D izreza generiranog od strane
    označiti.

    Primjer 6

    Sve o HTML-u

    ,


    HTML je skraćenica za HyperText Markup Language

    Jezik se sastoji od skupa kodova i simbola koji će generirati:

    • tekst,
    • slike,
    • zvuči,
    • okviri
    • animacije na stranicama preglednika.


    Dva uobičajena načina za pokretanje web-lokacije su:

    1. stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
    2. koristiti softver za generiranje HTML-a.

    Oznake slike

    HTML dokumenti omogućuju vam umetanje slika pomoću oznaka slika. Možete pregledavati sliku s mrežnog URL-a ili s vlastitog računala. Oznaka slike označava "izvor slike"; stoga, put slike treba definirati nakon atributa. Ako se slika nalazi u istoj mapi kao izvorni dokument, nema potrebe da unosite cijeli direktorij putanje.

    npr

    ili ili

    Oznaka poravnanja

    Još jednom, možete upotrijebiti atribut ALIGN za prikaz slike u sredini, desnoj ili lijevoj strani preglednika.

    Eg1

    Napomena: Međutim, može se dogoditi da vaš preglednik ne podržava tu oznaku. Stoga možete upotrijebiti oznaku neposredno prije oznake slike da biste centrirali sliku u pregledniku.

    EG2

    Veličina slike

    Veličina prikazane slike može se promijeniti pomoću atributa WIDTH i HEIGHT. Možete koristiti postotak ili piksele za određivanje veličine slike.

    Eg1

    EG2

    Granična slika

    Ako želite umetnuti obrub na sliku, za to možete upotrijebiti atribut BORDER .

    npr

    Runaround Space

    Runaround prostor odnosi se na prostornu prazninu oko slike. Ovo je vrlo korisna oznaka kada imate tekst oko slike. Definiran je pomoću atributa VSPACE za gornju i donju stranu, a HSPACE atribut se koristi za lijevu i desnu stranu.

    npr

    Primjer 7

    Sve o HTML-u

    ,


    HTML je skraćenica za HyperText Markup Language

    Jezik se sastoji od skupa kodova i simbola koji će generirati:

    • tekst,
    • slike,
    • zvuči,
    • okviri
    • animacije na stranicama preglednika.

    Dva uobičajena načina za pokretanje web-lokacije su:

    1. stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
    2. koristiti softver za generiranje HTML-a.


    Kodovi boja

    Možete koristiti heksadecimalne kodove u boji koje pruža Theodora da biste stvorili vlastitu atmosferu web-lokacije

    Ovo je primjer koji imate s atributom vspace i hspace

    Povezujuće oznake

    U HTML-u oznake za povezivanje koriste se za prelazak s jednog dijela stranice na drugi ili s jedne stranice na drugu. Nazivaju se Interni linkovi ako vam omogućuju da prelazite s jednog odjeljka ili stranice svoje web-lokacije na drugu, a External Link kada otvore novi prozor preglednika s druge web-lokacije. Glavna prednost povezivanja oznaka je u tome što vam omogućuju stvaranje dinamičke web-stranice umjesto stvaranja web-stranice za pomicanje.

    vanjska poveznica

    će prikazati "Web Address Link" kao hipervezu na vašoj web stranici i kada korisnik klikne na tekst, učitat će stranicu www.webaddress.com

    Interna veza

    Postoje dva određena načina umetanja interne veze:

    1. Za prelazak s trenutne stranice na drugu stranicu na istoj web-lokaciji

    2. Za prelazak s trenutnog dijela stranice na drugi odjeljak na istoj stranici.

    Da biste mogli prelaziti iz jednog odjeljka u drugi, najprije trebate dati ime odjeljku tako da ga oznaka može locirati kada se poziva. Na primjer, ako odjeljak o HTML vezama mora biti umetnut u gornji dio web-stranice, odmah iznad naslova "HTML veze", umetnite oznaku , Vrijednost "veze" odnosi se na odjeljak koji se mora nalaziti; stoga, ako se dio web-stranice temelji na mačkama, umetnite oznaku odmah iznad naslova za mačke.

    Nakon ovog postupka, trebali biste također umetnuti vezu iz koje želite skočiti. U ovom primjeru, ako želite skočiti s vrha stranice na lokaciju "HTML veza" koje se nalazi na donjem dijelu stranice, umetnite oznake povezivanja . Pojavit će se tekst "Povezivanje oznaka", a kada korisnik klikne na njega, skočit će s trenutne lokacije na označeni odjeljak.

    Primjer 8

    Sve o HTML-u

    Kodovi boja

    Povezujuće oznake


    HTML je skraćenica za HyperText Markup Language

    Jezik se sastoji od skupa kodova i simbola koji će generirati:

    • tekst,
    • slike,
    • zvuči,
    • okviri
    • animacije na stranicama preglednika.

    Dva uobičajena načina za pokretanje web-lokacije su:

    1. stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
    2. koristiti softver za generiranje HTML-a.


    Kodovi boja

    Možete koristiti heksadecimalne kodove u boji koje pruža Theodora da biste stvorili vlastitu atmosferu web-lokacije

    Ovo je primjer koji imate s atributom vspace i hspace

    Korisno je posjetiti Microsoftovu web-lokaciju klikom na ovaj link


    Povezujuće oznake

    U ovom ćete odjeljku raspravljati o važnosti povezivanja oznaka na vašoj web-lokaciji.

    Bilješka:

    Ovo su samo primjeri kako možete koristiti povezujuće oznake. Naravno, možete promijeniti položaj kako bi Vaša web stranica bila jednostavnija i atraktivnija.

    Ciljni prozor

    Ciljni prozor učitat će povezanu stranicu u drugom prozoru preglednika, tako da korisnik može ostati na trenutnoj stranici vaše web-lokacije i pregledati adresu s hipervezama u drugom pregledniku.

    Oznake tablice

    Umetanje tablica u vašu web stranicu može biti vrlo korisno za prikaz informacija na uredan način. Također će vam omogućiti da preciznije obradite tekst i grafiku.

    Početna oznaka

    se koristi kako bi Vašem pregledniku rekao da tablica na stranici počinje tamo i završava s
    označiti. Također možete mijenjati boju, veličinu i veličinu tablice.

    Veličina tablice može se promijeniti pomoću značajke

    označiti. Možete upotrijebiti piksele ili postotak za promjenu veličine tablice.

    Možete upotrijebiti oznaku

    na primjer, napraviti nevidljiv rub u pregledniku.

    Oznaka se koristi za stvaranje razmaka između teksta i unutarnje linije granice tablice.

    oznaka se koristi za umetanje razmaka između unutarnjeg i vanjskog retka rubova tablice.

    Tablica se sastoji od ćelija koje su definirane stupcima i redovima unutar tablice. Ćelija će biti prostor u koji će se umetnuti vaš sadržaj. Oznaka stupca je definirana kao

    oznake i redovi su definirani kao ioznake. Da biste izmijenili širinu ćelije, možete upotrijebiti i da biste poravnali stupac, umetnite oznaku
    i
    označiti. Veličina može biti postavljena u postocima ili pikselima.

    Također možete poravnati svoje retke i stupce dodavanjem atributa ALIGN u svoje oznake. Dakle, da biste poravnali određeni redak, na primjer, umetnite oznaku

    Da biste poravnali ćeliju, možete koristiti atribut VALIGN .

    će smjestiti ćeliju u gornju sredinu vaše stranice.

    Da biste proširili stupac, možete upotrijebiti oznaku

    da biste odredili broj stupaca koji bi ćelija trebala obuhvatiti. Imajte na umu da je zadana vrijednost postavljena na 1.

    Također, da bi se stanica proširila na više redaka, upotrijebite

    označiti.

    Primjer 9

    Sve o HTML-u

    Kodovi boja

    Oznake tablice

    HTML je skraćenica za HyperText Markup Language

    Jezik se sastoji od skupa kodova i simbola koji će generirati:

    • tekst,
    • slike,
    • zvuči,
    • okviri
    • animacije na stranicama preglednika.

    Dva uobičajena načina za pokretanje web-lokacije su:

    1. stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
    2. koristiti softver za generiranje HTML-a.

    Kodovi boja

    Možete koristiti heksadecimalne kodove boja koje pruža Theodora da biste stvorili vlastitu atmosferu web-lokacije.

    Ovdje možete dodati više teksta.

    Ovdje možete dodati više teksta.

    Ovdje možete dodati više teksta.

    Ovdje možete dodati više teksta.

    Ovdje možete dodati više teksta.

    Oznake tablica

    Ovaj odjeljak dat će vam više pojedinosti o oznakama tablice

    Naslov

    Ovo je još jedan dio sadržaja

    Stupac 1 Stupac 2 Stupac 3
    Pokrivanje ćelija u 3 retka (2. i 3. spajanje) Pokrivanje ćelija u 2 retka (spojena 1. i 2. ćelija) Prva stanica
    2. stanica
    3. stanica
    3. stanica 4. stanica

    Oznake okvira HTML-a

    HTML okviri omogućuju stvaranje nezavisnih prozora unutar web-stranice. Vrlo su korisni jer vam omogućuju prikaz više od jednog dokumenta na web-stranici.

    Da biste koristili okvire, morate imati barem dvije različite .htm datoteke, od kojih će jedna biti nazvana index.htm . Datoteka index.htm bit će prikazana na svim prozorima. Oznaka okvira definirana je kao i tag se koristi za definiranje skupa okvira koji se koriste u datoteci index.htm.

    Primjer 10

    Isprobajte oznake okvira

    će postaviti veličinu redaka koji će biti prikazani u vašem pregledniku.

    će postaviti veličinu stupaca koji će biti prikazani u vašem pregledniku.

    označava okvir i koristi se za povezivanje s glavnim oknom.

    oznaka će se koristiti za postavljanje granice na vaše okvire. Postavljanje na 0 osigurat će kompatibilnost sa svim preglednicima.

    postavit će razmak između najbližih okvira.

    će postaviti širinu prostora na obje strane okvira. Veličina bi trebala biti postavljena u pikselima.

    će postaviti veličinu gornje i donje margine u pikselima.

    tag će moći vertikalni ili horizontalni klizač na vašem okviru. Njegova vrijednost mora biti postavljena na "da", "ne" ili "auto".

    WYSIWYG Softver

    Postoje softverski programi nazvani WYSIWYG (ono što vidite je ono što dobivate), koji kodiraju za vas, no to ne bi trebalo spriječiti učenje minimalnog html koncepta kako bi se izbjegla neugodna iznenađenja! Pomoću ovog softvera stavljate tekst i slike, a softver istovremeno generira odgovarajući HTML kod. Također će olakšati rad na uključivanju animacija ili skripti. Postoje, na primjer:

    Dreamweaver, nije besplatan, ali vrlo opsežan i jednostavan za korištenje s dobro osmišljenim tutorialom

    GoLive Photoshop editor

    Za besplatni WYSIWYG možemo spomenuti:

    • Matizha uzvišeno
    • //bluegriffon.org/pages/DownloadBlueGriffon
    • Maguma studio
    • HTML kit
    • 1. \ T
    Prethodni Članak Sljedeći Članak

    Top Savjeta