Kako stvoriti vlastitu 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
nasloviNaslovi 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
- Ovo je broj 1 na mom popisu
- 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:
- stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
- koristiti softver za generiranje HTML-a.
Oznake HTML odjela
Horizontalno praviloHorizontalna 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
iliPuna 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:
- stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
- 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:
- stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
- 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:
- stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
- 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
i oznake i redovi su definirani kaoi oznake. Da biste izmijenili širinu ćelije, možete upotrijebitioznač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
i da biste poravnali stupac, 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:
- stvoriti vlastite kodove u jednostavnom uređivaču teksta i spremiti ih kao .htm datoteku. ili
- 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
Top Savjeta