Sada možemo staviti tekst s različitim poravnanjima na našu web stranicu:

Moje lične stranice će biti ovdje!

Na njima možete pronaći: - priča o meni i mojim hobijima; - moje fotografije.

Sa jedne od mojih stranica to će biti moguće
pošalji mi email.

3. Alati za kreiranje web stranica

3.1 HTML uređivači

Svako bira svoj alat za kreiranje web stranica. To može biti MS FrontPage ili Macromedia DreamWeaver, Allaire HomeSite ili 1st Page. A neko koristi jednostavan uređivač teksta, na primjer Notepad.

Uređivači teksta mogu se koristiti samo za kreiranje malih stranica, jer imaju mnogo nedostataka: projekti nisu podržani, nema "isticanja" teksta, općenito je izuzetno nezgodno raditi.

Glavni nedostatak MS FrontPage-a je to što generiše veoma veliki HTML kod (previše nepotrebnih stvari), tako da stranice ispadaju velike, što utiče na brzinu učitavanja. Štaviše, kada kreirate web stranice u ovom uređivaču vidite jednu stvar, ali u prozoru pretraživača vidite nešto sasvim drugo. Ispostavlja se da su stranice pomalo krive, pa se za kreiranje visokokvalitetnih web stranica preporučuje korištenje paketa o kojima će biti riječi u nastavku.

Počećemo s popularnim Macromedia DreamWeaverom. Macromedia se smatra liderom u proizvodnji softvera za izradu web stranica, kao i trendseterom u ovoj oblasti.

DreamWeaver 3.0

Ali DreamWeaver je nekoliko koraka ispred drugih WYSIWYG uređivača, prvenstveno zato što generiše veoma čist HTML. DreamWeaver vam omogućava da eliminišete rad koji se ponavlja prilikom kreiranja stranica (na primjer, raspored teksta) korištenjem opcije "snimi sekvencu komandi" ( snimite niz naredbi koje proizvedete, a zatim pritisnite, na primjer, CTRL+P, i DreamWeaver će sve reproducirati u istom nizu.

HomeSite 4.0

Sljedeći editor je HomeSite 4 - za ručno kreiranje stranica, tj. za HTML poznavaoce. Dobijate potpunu kontrolu nad HTML kodom, a moguće je optimizirati svoju stranicu za jedan od tri popularna pretraživača (MSIE, Google Phrome, Opera).

HomeSite sadrži dva glavna načina: Uređivanje i Dizajn. Dizajn mod je vrsta WYSIWYG editora koji proizvodi HTML kod, a ako učitate tuđi HTML kod, HomeSite će sve prepisati na svoj način.

Drugi karakteristična karakteristika HomeSite je njegov "ljepak" sa Dreamweaverom. HomeSite ima dugme "Dreamweaver" i takođe je uključeno kao standard. Međutim, DreamWeaver takođe ima mogućnost da poveže HomeSite kao uređivač za uređivanje HTML koda.

Jedan od najnovijih HTML uređivača je EVR Soft 1st Page v2.

Njegov slogan je "Kreirajte prvoklasne web stranice!" ("Izgradite odlične web stranice!"). Editor sadrži nekoliko modova - Normal, Easy, Advanced/Expert i Hardcore, odnosno možete odabrati svoj nivo i eventualno preći na viši. Još jedna karakteristika je prilično velika kolekcija skripti u JavaScript-u i DHTML-u. Sve je to prilično zgodno podijeljeno u kategorije.

3.2 Grafički uređivači

Kreiranje i optimizacija grafike je složen i hirovit zadatak. Naravno, moguće je kreirati web stranicu bez upotrebe grafike - koristeći fontove, skripte i stilove (CSS) - i bit će lijepa i moderna. Ali konačni izgled dokumenta zavisi od velikog broja različitih faktora, kao što su: širina prozora pretraživača, unapred podešene postavke pretraživač, podrazumevana veličina fonta, naziv i boja. Osim toga, svi pretraživači ne podržavaju sve skripte i stilove. Ako se koristi grafika, posjetitelj vaše stranice će je vidjeti upravo onako kako ste je vi napravili i vidjeti.

Glavna poteškoća rada sa Web grafikom je to propusnost Internet kanala je u većini slučajeva vrlo malo i odmah ćete se suočiti s problemima - kako napraviti grafički fajl male veličine, ali dobra kvaliteta, koje programe i tehnike koristiti pri optimizaciji.

To je upravo ono što je dio o vektorskim i rasterskim grafičkim uređivačima moćan alat obrada slika u sposobnim rukama.

Prije razmatranja vektorskih i rasterskih grafičkih uređivača, trebali biste razumjeti razliku između vektorske i rasterske reprezentacije slike.

Rasterska grafika je mreža (raster), čije se ćelije nazivaju pikseli. Svaki piksel u rasterskoj slici ima striktno definiranu lokaciju i boju, stoga svaki objekat program predstavlja kao skup obojenih piksela. To znači da korisnik, kada radi sa rasterskim slikama, ne radi na određenim objektima, već na grupama piksela koje ih čine.

Rasterske slike pružaju vrlo precizne gradacije boja i tonova, kao i visoke detalje slike, što ih čini optimalnim sredstvom za predstavljanje slika ton-na-ton, kao što su skenirane fotografije.

Za sliku rasterska grafika uvijek se koristi fiksni broj piksela, tj. Kvaliteta rasterske slike direktno zavisi od rezolucije opreme. To znači da svaka promjena slike (rotacija, uvećanje, itd.) dovodi do stalnog izobličenja slike i granice objekata su neravne.

Vektorske slike formiraju se na osnovu matematički opisanih figura zvanih vektori, a izgled slike je određen parametrima vektora. Drugim riječima, vektorska grafika se sastoji od krivulja koje imaju koordinate, boje i drugih parametara, kao i zatvorenih područja ispunjenih određenom bojom. Granice ovih područja su također opisane krivuljama. Datoteka vektorske slike sadrži koordinate i parametre krivulja.

Rezultati obrade vektorske slike ne ovise o rezoluciji opreme, tako da možete proizvoljno mijenjati njihove parametre (veličinu, boju, oblik, itd.) - kvaliteta se neće pogoršati. Vektorska grafika se koristi pri kreiranju digitalnih objekata koristeći male veličine tačaka (veličine fonta) ili objekata kao što su logotipi koji zahtijevaju jasne obrise i neograničenu skalabilnost.

Grafički paketi (uređivači) se također dijele na dva tipa: rasterski i vektorski. Pogledajmo sada najpopularnije od njih.

A) Rasterski grafički uređivači

Microsoft Paint je jednostavan (ili bolje rečeno, najjednostavniji) uređivač uključen kao standard. operativni sistemi Microsoft. Ima skup jednostavnih funkcija (četka, olovka, gumica, itd.) koje vam omogućavaju da kreirate jednostavne slike. Nažalost, praktično je neprikladan za grafičku obradu. Slika koju vidite na desnoj strani je najviše što ovaj uređivač može učiniti.

Adobe Photoshop- danas je ovo najmoćniji paket za profesionalnu obradu rasterske grafike. Ovo je čitav kompleks koji ima brojne mogućnosti za modifikaciju rasterske slike, ima ogroman raspon različitih filtera i efekata, a moguće je povezati alate nezavisnih proizvođača.

Paket nudi, na primjer, alate za obnavljanje oštećenih slika, retuširanje fotografija ili stvaranje najfantastičnijih kolaža koje naša mašta može zamisliti. Sve u svemu, potencijal ovog paketa je zaista ogroman. Počevši od verzije 5.5, paket uključuje program Adobe ImageReady, pružajući ogromne mogućnosti za obradu grafike za WEB (optimizacija slika, kreiranje animirani gifovi, “rezanje” slika na manje, itd.). Moto programera Adobe Photoshopa - "Kamera vašeg uma" - podrazumijeva ne samo tehničku izvrsnost, već i potpunu slobodu kreativnosti, na koju je osoba koja radi s ovim programom jednostavno osuđena.

PhotoPaint- još jedan podjednako poznati grafički uređivač (iz Corel Draw paketa) za obradu rasterske grafike, koji se takmiči sa Adobe Photoshopom. Takođe ima sve potrebne alate za obradu grafike, razne filtere, teksture. Jedina razlika je u jednostavnosti korištenja, interfejsu i brzini primjene filtera - aplikacija je malo sporija.

Slikar- uređivač pruža odlične mogućnosti za oponašanje stvarnih alata za crtanje: grafita, krede, ulja, itd. Takođe vam omogućava da imitirate površinsku teksturu materijala, slikate i kreirate animaciju. Veoma pogodan za razvoj pozadinske slike ili web stranice u slikarskom stilu. Koristeći ovaj program osjećate se kao pravi umjetnik.

Postoji i veliki broj urednika ( Microsoft Photo Editor, Microsoft PhotoDRAW), takođe omogućava realizaciju najjednostavnijih zadataka, ali ne zadovoljava potrebe profesionalaca.

B) Vektorski grafički uređivači

Adobe Illustrator - paket vam omogućava kreiranje, obradu i uređivanje vektorske grafike. U smislu snage je ekvivalentan

rasterski uređivač Adobe Photoshop: ima sličan interfejs, omogućava vam povezivanje različitih filtera i efekata, razume mnoge grafičke formate, čak i takve. cdr (Corel Draw) i. swf (Flash).

CorelDraw- naravno, tako poznati grafički paket ne bi mogao bez alata za obradu vektorske grafike. Paket je skoro jednako moćan kao grafički uređivači Adobe Photoshop i Adobe Illustrator. Pored obrade vektorske grafike, ovaj paket sadrži rasterski grafički procesor (Photo Paint), program za praćenje slika, uređivač fontova, pripremu teksture i kreiranje bar kodova, kao i ogromne kolekcije slika (CorelGallery).

Adobe Streamline- još jedan Adobe proizvod dizajniran za praćenje (prevođenje) rasterske grafike u vektorsku grafiku. Ovo je mali, ali vrlo koristan i moćan proizvod. Posebno korisno ako kreirate web stranice koristeći vektorsku grafiku, kao što je Flash tehnologija.

4. Kreiranje web stranice CMS pomoć Joomla 1.5.7

Glatko, po principu od jednostavnog ka složenom, prelazimo sa statičnih WWW stranica na dinamičke. Da bismo to postigli, potrebno nam je poznavanje web jezika PHP, Jscript, Perl, jQuery i barem jezik strukturiranih upita MySQL. U redu, samo par godina i ti si profesionalac, sposoban da napravi ovakve multifunkcionalne sajtove, u kojima se stranice generišu u hodu, u kojima postoji baza forumskih klijenata, logina, lozinki, identifikacije, autentifikacije, animacija povezivanja i mnogo više.

Ali nije potrebno poznavanje svih jezika da biste napravili dinamičnu multifunkcionalnu web stranicu. Imao sam dovoljno znanja HTML, SCC, PHP, 3Ds Max, Photoshop i SMC Joomla.

Joomla je sistem za upravljanje sadržajem napisan u PHP-u i JavaScript-u, koji koristi MySQL bazu podataka kao skladište. To je besplatni softver koji se distribuira pod GNU GPL licencom.

Glavne karakteristike:

1. Funkcionalnost se može proširiti dodatnim modulima (proširenja, dodaci).

2. Sigurnosni modul za višeslojnu autentifikaciju korisnika i administratora.

3. Sistem šablona olakšava promjenu izgleda stranice.

4. Prilagodljivi izgledi modula, uključujući levi, desni i centralni blok menija.

5. Prednosti sistema uključuju činjenicu da možete sami napisati sve module, komponente, dodatke, šablone, smjestiti ih u strukturirani direktorij ekstenzija ili urediti postojeću ekstenziju po svom nahođenju.

Možete raditi sa Joomlom na hosting serveru na Internetu ( dodatni troškovi, a mnogo toga ovisi i o brzini interneta). Više volim da radim na lokalnom serveru. Za ovo sam izabrao Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 Server na 127.0.0.1 Port 80.

Dakle, instaliran lokalni server. U direktoriju localhost/home/www/ kreirajte folder u koji stavljamo samu Joomlu. Želio bih napomenuti da Joomla ne radi ispravno pod PHP5.3.1. Komponente FireBoard i Kunena foruma stalno proizvode greške na stranici, morate uređivati php fajl. ini i onemogućite poruke o grešci, jer sama akcija obećava nepredviđene okolnosti za stranicu. Iz tog razloga preporučujem odabir PHP verzije 5.2.4, rad je stabilan za sve dodatke, module i komponente. Poslije Joomla instalacije Koristeći pretraživač, kreiramo administratorskog korisnika u MySQL-u i koristimo njegovu prijavu i lozinku za odlazak na admin panel. Zatim morate odabrati predložak za web lokaciju. Na prvi pogled će se činiti da je to vrlo lako, ali ako kopate dublje, uvjerit ćete se da je 80% vremena utrošeno na modernizaciju ovog šablona. Stoga preporučujem da odaberete najprikladniji predložak za vaše potrebe, ne zaboravljajući na module koji će se prikazati. Zatim povezujemo sve funkcionalnosti sajta: registraciju, forum, slajd šou, banere, fajlove za trke, on-line video, audio, uređivanje, sve prikazane stranice. Radimo uglavnom sa Index fajlom. php i šablon. css i naravno konfigurišemo sva povezana proširenja za sebe, kojih ima oko 6000 za Joomla. Slijedi najbolji dio - dizajn web stranice. Korišćenje rastera Photoshop programi i 3Ds Max (potpuno opremljen profesionalni softverski sistem za kreiranje i uređivanje trodimenzionalne grafike i animacije, koju je razvio Autodesk, sadrži najsavremenije alate za umjetnike i multimedijalne stručnjake) kreiramo predložak dizajna. Uredite zaglavlje i učinite da izgleda onako kako želite.

Zaključak

Zbog brzog razvoja web programiranja i stvaranja više CMS-ova, posao web dizajnera je olakšan. Sada, za kreiranje multifunkcionalnog, moćnog dinamičkog web portala, dovoljno je savladati nekoliko programskih jezika (ako dodamo ekstenzije i skripte), biti vješt u grafičkim i rasterskim programima i imati malo inspiracije, inovacije i vještine.

Književnost

1. Kotorev D.V., Kostarev A.F. "PHP 5 ili više kompletan vodič u originalu." Petersburg 2005

2. A. Gončarov "HTML samoučitelj".

3. A. Matrosov, A. Sergeev, M. Chaunin “HTML 4.0 u originalu”

4. Isaacs S. "Dinamički HTML"

5. Bayens J. “Gadgeti za web programiranje”

6. Bursov M.V. itd. "Osnove rada sa Dreamweaver HTML editorom. Edukativni priručnik"

7. Velikhov V. "Priručnik za HTML 4.0"

HTML je jezik za opisivanje strukture web stranica. Stranice kreirane uz njegovu pomoć mogu se pregledati samo pomoću posebnih programa (pretraživača) instaliranih na računarima korisnika.

• Skraćenica HTML je skraćenica za H yper T lok M arkup L anguage (jezik za označavanje hiperteksta).
• Zapamtite, to nije programski jezik, to je jezik za označavanje.
• HTML koristi oznake markup za opisivanje strukture web stranice.

Oznake

HTML oznake su ključne riječi ili znakovi zatvoreni u uglastim zagradama, npr. ,

,

itd. Postoje dvije vrste oznaka: dubl I single(oni se nazivaju i praznima). Upareni tagovi se sastoje od oznake otvaranja i zatvaranja, na primjer: . "/" iza ugaone zagrade označava da je oznaka završna. Pojedinačne oznake sastoje se samo od uvodne oznake, na primjer:
. Oznake ne razlikuju velika i mala slova, tako da se mogu pisati velikim ili malim slovima:

Znači isto kao

Oznake definiraju gdje HTML element počinje i gdje se završava.

Koristeći oznake, pretraživač prepoznaje strukturu i značenje vašeg teksta, na primjer, oni govore pregledniku koji dio teksta je naslov, gdje počinje novi pasus, šta treba naglasiti i gdje postaviti sliku (slika ). Jednom kada pretraživač primi ove informacije, koristi svoja zadana pravila o tome kako prikazati svaki od ovih elemenata.

Napomena: u našoj HTML referenci možete vidjeti zadane stilove za bilo koju oznaku koja vas zanima.

Bez upotrebe HTML oznake pretraživač će jednostavno prikazati kontinuirani tok teksta, bez uvlaka, naslova, pasusa itd. Da bi bilo jasnije, pogledajmo ovo detaljnije koristeći primjere.

Ovako izgleda stranica koristeći oznake za označavanje:

Piće u našem kafiću

Multifruit - 100 rub.

Voćni napitak koji sadrži sokove od narandže i ananasa.

Milkshake - 150 rub.

Kremasti sladoled pomiješan sa voćnom pulpom.

Ista stvar, ali bez upotrebe oznaka:

Piće u našem Multifruit kafiću - 100 rub. Voćni napitak koji sadrži sokove od narandže i ananasa. Milkshake - 150 rub. Kremasti sladoled pomiješan sa voćnom pulpom.

3. Jezik hiperteksta HTML

Hipertekst mora početi riječju i završiti riječju. Riječi u ugaonim zagradama se u HTML-u nazivaju oznakama, a u programiranju deskriptorima. Gotovo sve HTML oznake su uparene - i, i, itd.

Upareni tagovi ističu određeni fragment hiperteksta - “title”, “body” itd. Prvi tag počinje fragment, a drugi ga dovršava. Završni deskriptori prethode imenu znakom razlomka / .

Opća struktura hipertekstovi napisani u HTML jeziku:

hipertekst::= tijelo naslova

title::= naslov

title::= naslov

tijelo::= tekst

Prema HTML pravilima, hipertekstovi moraju imati “naslov” i “tijelo”. Kao publikacije, hipertekstovi mogu i trebaju sadržavati informacije o autorima i nosiocima autorskih prava (stranicama).

Naslov hiperteksta mora sadržavati “naslov”, koji pretraživači prikazuju na samom vrhu ekrana računara. Naslov treba da izrazi glavnu ideju publikacije (stranice). Hipertekst bez naslova je kao članak bez naslova.

“Tijelo” hiperteksta treba da sadrži tekstove, tabele, fotografije i ilustracije. Razlika između elektronskih hipertekstova i običnih papirnatih tekstova je uključivanje hiperlinkova, klikom na koje se preuzimaju novi hipertekstovi.

Primjer hiperteksta i rezultat njegovog prikaza od strane pretraživača na ekranu računara:

Hipertekst: Rezultat:

Rezultat pretraživača je učitavanje i prikaz hiperteksta pohranjenog na web stranici na adresi navedenoj u prozoru pretraživača. Ako je hipertekst prevelik, pretraživač prikazuje dugmad za povlačenje hiperteksta na desnoj ili donjoj strani ekrana.

Veličine kompjuterskih ekrana imaju sljedeći raspon. Minimalna veličina ekrana je 640 x 480 piksela. Druge standardne veličine ekrana su 800 x 600, 1024 x 768 i 1280 x 1024 piksela. Stoga hipertekstovi mogu izgledati drugačije na različitim ekranima.

Opća struktura hiperteksta i njihov prikaz na ekranu računara:

Hipertekst: Rezultat:

Tekstualni dio može se sastojati od redova i pasusa sa i bez naslova, sa listama, tabelama i menijima.

tijelo::- tekst

tekst::= naslov ( tekst ) |

lista(tekst) |

tabela (tekst) |

Naslovi u hipertekstovima su formatirani na sljedeći način:

title::=

Ime

title::=

Ime

title::=

Ime

gdje oznake H2, ..., h6 postavljaju veličinu naslova u odnosu na glavni tekst.

Paragrafi u hipertekstovima počinju deskriptorom

hipertekst |

Idi nova linija a paragrafi su označeni deskriptorom . Kraj paragrafa p> nije obavezan, ali je obavezan kada se koriste parametri u deskriptoru pasusa.

Glavni parametar pasusa je poravnanje - poravnanje tekstova na ekranu računara. Poravnavanje teksta se vrši automatski od strane pretraživača u skladu sa veličinom ekrana računara:

align=center - centrira ekran:

align=left- do lijeve ivice;

align=right - do desne ivice;

align=justify - cijeli ekran.

Za poravnanje pasusa mora se odabrati jedan zajednički stil i primijeniti ga na sve hipertekstove na web mjestu.

Za dizajn hipertekstova, jezik za označavanje HTML ima bogat raspon fontova, stilova i resursa. Najjednostavniji način dizajna je isticanje riječi kako bi se privukla pažnja čitatelja web stranice na pojedine dijelove teksta.

Možete koristiti podebljano ili podvlačenje za isticanje riječi u hipertekstu koristeći sljedeće oznake:

Veliki simboli

bold font

kurziv i>

podvlačenje

precrtavanje

mali znakovi

Isticanje fonta u hipertekstovima je određeno oznakom :fonts::=font teksta>

Parametri fonta - njihova veličina i vrsta. Veličine fonta su određene parametrom size = size.

Veličina je eksplicitno naznačena od 1 do 6, bilo u obliku povećanja +1, +2 ili smanjenja - 1, - 2.

Tip fonta je specificiran parametrom

lice = font

Ovdje je font jedan od standardnih fontova: "Times", "Courier" itd.

Boja fonta je određena parametrom co1og = boja, gdje je boja boja odabranog fragmenta hiperteksta. Na primjer, isticanje teksta crvenom bojom:

font teksta >

Standardni nazivi boja u HTML jeziku:

crveno - crveno, zeleno - zeleno, plavo - plavo, crno - crno,

bijelo - bijelo, zlatno - zlatno, žuto - žuto, itd.

Za dizajn hipertekstova najbolje je za uzor uzeti dobru knjigu ili časopis u izdanju profesionalne izdavačke kuće ili nečiju drugu profesionalno dizajniranu e-knjiga, novine ili web stranicu na internetu.

Jedinstveni stil dizajna važno je svojstvo svake publikacije u knjigama, časopisima i web stranicama. Ubuduće je najbolje pridržavati se prihvaćenog standarda i stila dizajna za cijelo vrijeme izrade i održavanja stranice.

Fragmenti hiperteksta mogu biti locirani na istom sajtu ili na nekoliko sajtova ili čak na nekoliko servera. Vanjske hiperveze označavaju nazive odgovarajućih datoteka na web lokaciji, serveru ili na Internetu:

Opći oblik vanjskih hiperveza je:

gdje je "adresa" adresa hiperteksta unutar stranice ili na drugom Internet serveru.

Primjeri vanjskih hiperveza:

a) adresa web stranice na internetu:

http://bak2.nagod.gu

b) adresa stranice na web stranici:

http: // bak2.nagod.gu / inrogl.html.

c) adresu stranice u folderu sajta;

http://bak2.nagod.gu/tests/test2.html.

testovi 2 a>

Pomoću uređaja hiperlinkova organizovano je postavljanje svih crteža, fotografija i drugih grafičkih ilustracija na sajtove. Da biste to učinili, svi fajlovi sa grafičkim ilustracijama unaprijed su snimljeni na web stranici.

Grafičke datoteke se obično postavljaju na web stranice iu posebnu mapu koja se zove slika. Učitavanje ilustracija na ekrane korisničkih računara obavljaju pretraživači uz pomoć operatera :

Opći oblik operatora za učitavanje grafičkih ilustracija:

Lokacija ilustracija na ekranu računara određena je parametrima poravnanja: align=left - duž lijeve ivice, align=right - duž desne ivice ekrana. Tekst tada teče oko ilustracija s desne strane ili je slijep.

Ilustracije se mogu pritisnuti na gornju ili donju ivicu ekrana, što je podešeno parametrima: align =top - do gornje ivice, align=bottom - do donje ivice ekrana, ili poravnati sa sredinom ekrana - poravnati = sredina.

Za postavljanje ilustracija na ekran računara, njihova širina i visina se mogu navesti u izjavi o učitavanju:

visina:= visina= "visina"

širina:= širina= "dužina"

Dimenzije ilustracija određene su brojem piksela ekrana (u pikselima) ili kao postotak visine ili širine ekrana računara. U potonjem slučaju, ilustracije će imati različite veličine na različitim ekranima. Izračunavanjem položaja ilustracija za minimalne veličine ekrana, možete biti sigurni u njihov položaj na ekranima bilo koje druge veličine.

Veličine ilustracija obično se biraju tako da budu vidljive u cijelosti čak i na ekranima kompjutera minimalne veličine. Ako je kompjuterska dizalica veća, onda će ilustracije zauzeti samo dio.

Hipertekstualne liste su liste sa numerisanjem ili isticanjem elemenata liste. Svi elementi počinju oznakama

Označavanje hiperteksta se koristi za označavanje gdje na ekranu i kako tekst treba biti prikazan i kako su tekstovi koji čine hipertekstualnu bazu podataka povezani jedan s drugim. U ove svrhe se u tekst unose posebni kontrolni znakovi. Tekst sa kontrolnim znakovima pohranjen je u običnom tekstualnom fajlu u ASCII kodovima i može ga obraditi gotovo svaki uređivač teksta.

Jezik za označavanje hiperteksta HTML predložio je Tim Berners-Lee 1989. godine. Do vremena stvaranja Kreiranje HTML-a Postojao je standard za jezik za označavanje štampanih dokumenata - SGML (Standard Generalized Markup Language), koji je uzet kao osnova za HTML. Pretpostavljalo se da će takvo rješenje pomoći korištenje postojećeg softvera za tumačenje novog jezika.

Kao element hipertekstualne baze podataka za HTML odabrana je obična tekstualna datoteka koja se pohranjuje pomoću sistem podataka računarsko operativno okruženje.

Dakle, hipertekstualna baza podataka u WWW konceptu je skup tekstualnih datoteka napisanih u HTML-u, koji definira:

Obrazac za predstavljanje informacija (oznaka);

Struktura povezivanja datoteka između datoteka (hipertekstualne veze). Ovaj pristup pretpostavlja prisustvo još jedne komponente

tehnologija - prevodilac jezika. U WWW-u, funkcije tumača su podijeljene između servera hipertekstualne baze podataka i korisničkog sučelja. Server, pored pristupa dokumentima i obrade hipertekstualnih veza, obavlja i pretprocesnu obradu dokumenata, dok korisnički interfejs tumači jezičke konstrukcije povezane sa prezentacijom informacija.

Godine 1990 pojavila se nulta verzija HTML 0.

Prva verzija (HTML 1.0) imala je za cilj da predstavi jezik kao takav, pri čemu je opis njegovih mogućnosti bio prilično savjetodavne prirode.

Predviđanje je srž svakog sistem trgovanja, tako da vas dobro napisani mogu učiniti divljim bogatim.

Druga verzija (HTML 2.0) je zabilježila praksu korištenja jezičkih konstrukcija i postala standard za izgradnju WWW-a.

Verzija ++ HTML ++ uvela je nove funkcije za predstavljanje naučnih informacija i tabela, poboljšavajući stil rasporeda teksta i slika.

Treća verzija (HTML 3.0) je pojednostavila sve inovacije i formalizirala korisnički interfejs hipertekstualnog distribuiranog sistema.

Godine 1996 pušten nova verzija jezik: HTML 3.2, uključujući alate za kreiranje tabela, konstrukcije Java jezika, mape slika (koje se nalaze na klijentskoj mašini) i nove tipove oblikovanja teksta.

HTML je jezik zasnovan na tekstu u kojem su instrukcije za formatiranje, nazvane oznake, ugrađene u tekst dokumenta.

Proces kreiranja HTML dokumenta sastoji se od uključivanja oznaka unutar neformatiranog teksta koji nosi informacijsko opterećenje.

HTML oznake su nizovi znakova koji počinju znakom manje od (<) и заканчивающиеся знаком “больше” (>).

Većina funkcija oblikovanja u HTML-u specificira logičke stilove, a ne fizičke stilove. Na primjer, oznake naslova, koje obično označavaju veće veličine slova, ne pokazuju koju veličinu treba koristiti. Pretraživač (koji djeluje kao klijentski program) odabire veću veličinu teksta za naslove od uobičajene. Ovaj pristup vam omogućava da se riješite platforme – dokument kreiran na Macintosh-u može koristiti UNIX ili Windows. Loša strana je što dokument izgleda drugačije na različitim platformama.

WWW pretraživači rade prema sljedećim pravilima kada analizirate HTML rečenice:

Razmaci i drugi "nevidljivi" znakovi se zanemaruju;

Sve oznake se mogu podijeliti u grupe: osnovne oznake, oznake za formatiranje, strukturne oznake, pokazivači itd.;

Oznake za formatiranje mogu biti napisane malim i/ili velikim slovima;

Većina oznaka za formatiranje je napisana u parovima. Početna oznaka aktivira ovaj efekat, a završna ga isključuje. Par oznaka se ponekad naziva kontejnerom jer se efekat koji oni uključuju i isključuju pojavljuje na tekstu unutar njih. Na primjer, da biste naznačili da red treba biti ispisan podebljanim znakovima, napisali biste:< B >Ovaj red će biti odštampan podebljanim tekstom

Tekstu unutar završne oznake uvijek prethodi obrnuta kosa crta. Među osnovnim HTML oznakama, izuzeci od ovog pravila su:< BASE >(Osnovne informacije),< BR >(kraj reda),< HR >(horizontalni lenjir), i< IMG >(slika). Ove oznake postoje u jednoj kopiji.

Svaki HTML dokument ima granične oznake:< HTML >I. Ovaj par oznaka sadrži sve ostale oznake na web stranici i sav informativni sadržaj dokumenta. U stvari, oni izjavljuju da je sav sadržaj kontejnera HTML kod. Tag< HTML >mora se nalaziti u prvom redu datoteke i oznaka- u poslednjem.

Svaki HTML dokument sadrži glavu dokumenta i tijelo dokumenta.

Naslov dokumenta identifikuje dokument. Trebalo bi doći odmah nakon oznake< HTML >i početi sa< HEAD >. Naslov se završava oznakom.

Naslov dokumenta mora sadržavati naziv dokumenta i njegov osnovni URL.

Naslov dokumenta nalazi se između oznaka< TITLE >I. Koristi ga pretraživač i Web server. Dužina imena ne bi trebalo da prelazi 40 karaktera. Naslov dokumenta treba da bude informativan i da odražava sadržaj dokumenta kako bi se mogao identifikovati. Ime se pojavljuje u naslovnoj traci Internet Explorera, na listama istorije (History) i „Favorites“.

Osnovni URL mora biti potpun (apsolutan) i sadržavati protokol, Internet adresu računara i naziv datoteke. To je naznačeno u oznaci< BASE HREF = “базовый_URL”>. Svi ostali URL-ovi u dokumentu se mogu specificirati u odnosu na osnovni. Na primjer, ako je osnovni URL: http://www.microsoft.com/products/office/word/datasheets.html i morate navesti URL datoteke funkcija. html koji se nalazi u direktoriju /products/office/excel na istom serveru, možete odrediti: ../excel/features. html umjesto da kucate punu adresu.

Simboli. ./ označava da trebate ići jedan nivo direktorija naviše od osnovne adrese.

Posjedovanje osnovnog URL-a olakšava prijenos dokumenta na drugi server, jer ako su svi ostali URL-ovi u dokumentu relativni, tada je potrebno promijeniti samo ime servera u osnovnom URL-u prilikom prijenosa.

Tijelo dokumenta sadrži sav tekst koji nosi informacije i sve HTML oznake koje se koriste za formatiranje teksta. Tijelo dokumenta počinje odmah nakon zaglavlja i razgraničeno je oznakama< BODY >I.

Primjer HTML-a-dokument:

< TITLE >Ime dokumenta

< BASE HREF = “базовый_URL” >

Oznake koje se koriste u tijelu dokumenta omogućavaju vam da navedete sljedeće elemente za označavanje teksta:

Početak pasusa i kraj reda

Stilovi naslova

Fizički stilovi - logički stilovi

Posebni simboli.

Hipertekstualne veze sastoji se od dva dijela: pokazivača i URL-a. Pokazivač je tekst na koji korisnik mora kliknuti da bi se negdje pomaknuo. URL navodi adresu sa koje će pretraživač preuzeti dokument kada korisnik klikne na pokazivač.

Tekstualni vodiči u grafičkim pretraživačima obično su podvučeni i označeni bojom. U pretraživačima čistog teksta oni se pojavljuju podebljano.

Bilo koji tekst se može koristiti kao indeks, bez obzira na njegovu veličinu i karakteristike oblikovanja. Indeks se može sastojati od nekoliko slova, riječi ili čak redova teksta.

Format indeksa:

< A HREF = “ URL ”>indeksni tekst ,

gdje je slovo A u oznaci< A HREF >znači sidro, a HREF znači hipertekst REFERENCA. Sve između oznaka< A HREF = “ URL ”>Ije indeksni tekst koji se pojavljuje na ekranu podvučenim ili podebljanim fontom.

Drugi kodovi za formatiranje mogu se koristiti zajedno sa hipertekstualnim indeksima. Na primjer:

< A HREF = “ URL ”> < I > ili

< I > < A HREF = “ URL ”>Idite na više detalja

WWW tehnologija

Usluga World Wide Web (WWW) je najpopularnija Internet usluga. WWW je jedinstven informacioni prostor koji se sastoji od stotina miliona međusobno povezanih elektronskih dokumenata pohranjenih na web serverima. Pojedinačni dokumenti koji čine Web nazivaju se web stranice. Grupe tematski objedinjenih Web stranica nazivaju se Web lokacije (Web lokacija) jedan fizički Web server može sadržati dosta Web lokacija, od kojih je svakoj dodeljen poseban direktorijum na hard disku servera.

Web stranice se razlikuju od običnih tekstualnih dokumenata po tome što su dizajnirane bez pozivanja na određeni medij. Na primjer, dizajn Word dokumenta ispisanog na papiru vezan je za parametre ispisanog lista koji ima određenu visinu, širinu i veličinu margine. Elektronski Web dokumenti su dizajnirani da se gledaju na ekranu računara, a ne zna se unapred koji. Stoga web dokumenti ne mogu imati čvrsto formatiranje. Dizajn se vrši tokom njihove reprodukcije na računaru klijenta i radi se u skladu sa postavkama programa koji vrši pregled (pretraživača). Pretraživač prikazuje dokument u skladu sa komandama zapisanim u tekstu web dokumenta. Komande mogu biti napisane ili direktno od strane autora dokumenta, ili implementirane automatskim sredstvima za pripremu Web dokumenata.

Takve komande se zovu oznake. Oznake su zatvorene u zagradama<>. Većina oznaka se koristi u parovima: oznaka za otvaranje i oznaka za zatvaranje.

Složene oznake osim ključna riječ imaju dodatne atribute i parametre. Pravila za pisanje oznaka sadržana su u specifikaciji posebnog jezika za označavanje hiperteksta - HTML (Hyper Text Markup Language). To jest, Web dokument je običan Tekstualni dokument, označen HTML oznakama.

Najvažnija karakteristika web dokumenata su hipertekstualne veze. Hiperveza se može postaviti na bilo koji dio teksta. Upareni tag se koristi za kreiranje hiperveze . Ova oznaka sadrži obavezni HREF atribut, koji specificira URL dokumenta na koji veza upućuje.

Adresa se može specificirati u apsolutnom ili relativnom obliku. Apsolutna adresa počinje protokolom i adresom web stranice. Ovaj unos se koristi kada posjetitelja trebate uputiti na drugu web stranicu i smatra se vanjskom vezom. Kada koristite relativnu adresu, veza navodi samo relativnu putanju pretraživanja za dokument. Ovo pretpostavlja da se koristi isti protokol i ista web stranica, a veza se smatra internom. Interna veza ostaje operativna ako se promijeni adresa web stranice u cjelini (na primjer, na drugi server). Puni format hiperveze uključuje mogućnost povezivanja na određenu lokaciju unutar stranice. Ali to se može učiniti samo za stranice vašeg vlastitog dizajna. Da biste to učinili, mjesto na koje se postavlja veza je označeno posebnim elementom sidra. Sidro se postavlja pomoću uparene oznake sa potrebnim atributom NAME. Vrijednost ovog atributa je proizvoljan niz latiničnih slova i brojeva - naziv sidra. Za povezivanje sa sidrom, ime sidra se pojavljuje na kraju URL-a nakon simbola #.

Glossary

Pretraživač će tražiti dokument na ovom serveru u trenutnoj fascikli

Midi muzika

Pregledač će navigirati do stranice http://www.midi.ru.

Ukupnost ogromnog broja hipertekstualnih dokumenata pohranjenih na WWW serverima čini jedinstveni prostor hiperdokumenata, između kojih je moguće kretanje. Nasumično kretanje između dokumenata naziva se surfanje webom, a svrsishodno kretanje (izvršeno u svrhu pretraživanja potrebne informacije) – Web navigacija.

Hipertekstualna veza između ogromna količina dokumenti pohranjeni na fizički serveri Internet je osnova za postojanje logičkog WWW prostora.

Pogledajmo hardver i softver koji zajedno čine Web.

· Klijenti i serveri. Web server je računar povezan na Internet koji radi poseban program, koji se naziva i web server. Zadaci ovog programa uključuju pohranjivanje, pretraživanje i distribuciju određenih datoteka na webu. Web klijent je pretraživač koji traži datoteke sa Weba. Kada klijentski računar želi pristupiti jednoj od datoteka, zahtjev se šalje web serveru. Server pronalazi navedenu datoteku i šalje je klijent računar ko je poslao zahtev. Hiljade računara koji čine Web predstavljaju širok spektar kombinacija hardvera i softver. Kada klijentski računar zatraži datoteku, ne zna gotovo ništa o pojedinostima servera na kojem je tražena datoteka pohranjena, ili o drugim računarima koji će prenijeti datoteku jedni drugima na njenom putu od servera do klijenta. Da bi takav sistem funkcionisao, mora da koristi skup jezika i protokola koji su nezavisni od hardvera ili operativnog sistema.

· URL-ovi i protokoli za prijenos podataka. Ako su fragmenti dokumenta raštrkani po cijelom svijetu, a želite ga predstaviti korisniku u cjelini, dosljedno uniformni stil dokument" trebat će vam vrlo dobar sistem adresiranja. Svaki fajl na Internetu ima adresu koja se zove URL (Uniform Resource Locator). informacioni resurs). Na primjer, URL web stranice Evropske federacije fudbal - http://ru.uefa.com.

Prvi dio URL-a definira način na koji računalo pristupa datoteci, odnosno komunikacijski protokol. Većini web stranica se pristupa pomoću HTTP protokola (Hypertext Transfer Protocol). Zbog toga se web adresa obično navodi pomoću slova "http", a pretraživači automatski ubacuju ova slova prije web adrese koju korisnik unese. Često dio http:// adrese su izostavljene na početku URL-a.

Sljedeći dio adrese je ime hosta web servera. Sistem imena domena će proslijediti vaš zahtjev web serveru gdje god se on nalazio.

Neki URL-ovi sadrže informacije koje slijede nakon imena hosta web servera. Ovi podaci preciziraju datoteku koju želite pogledati i direktorij u kojem je pohranjena. Ako nazivi direktorija i datoteka nisu specificirani, prikazuje se zadana web stranica za taj web server.

· HTML(Hypertext Markup Language - jezik za označavanje hiperteksta) je univerzalni jezik Weba. Koristi se za raspored stranica na kojima se mogu reproducirati informacije objavljene na webu: tekst, grafika, kao i audio i video informacije.

· Java i JavaScript. Java jezik je dizajniran za slanje malih aplikacija (koji se nazivaju apleti ili Java aplikacije) preko Weba. A JavaScript proširuje mogućnosti HTML-a za ugrađivanje malih programa (ili skripti) u web stranice. Glavna svrha apleta i skripti je da web stranice učine interaktivnijim - umjesto interakcije s udaljenim web serverom, vi stupate u interakciju s apletom i skriptom koji se pokreću na vašem računalu.

Tu su i Java apleti i JavaScript skripti za pravljenje animacija, koje web server šalje preko mreže da bi se izvršili na računaru korisnika; izbjegavaju prijenos okvira animacije preko Interneta. Opisani procesi se obično dešavaju neprimijećeno od strane korisnika.

· VBScript i ActiveX kontrole. VBScript jezik i ActiveX kontrole su standardnim sredstvima podržano Internet pretraživač Explorer.

VBScript je pojednostavljena verzija jezika Visual basic, koju je razvio Microsoft. Može se koristiti za kreiranje skripti koje web stranice čine dinamičnim. Dakle, VBScript je po funkcionalnosti sličan JavaScriptu.

ActiveX kontrole, poput Java apleta, koriste se za ugrađivanje izvršnih programa u web stranice. Kada Internet Explorer naiđe na veb stranicu koja koristi ActiveX kontrole, proverava da li je određena kontrola instalirana na vašem računaru i, ako nije, instalira je.

· XML i drugi napredni Web jezici. XML (Extensible Markup Language) je veoma moćan jezik koji je postavljen da zameni HTML kao jezik za razvoj aplikacija za Web. Za razliku od HTML-a, XML ne sadrži nikakva uputstva o tome kako bi podaci opisani u XML dokumentu trebali biti prikazani. Način na koji su prikazani određen je jezikom opisa stila, koji igra otprilike istu ulogu za XML kao kaskadni listovi stilova za HTML. W3C konzorcij radi sa dvije specifikacije stilova: XSL (Extensible Style Language) i CSS (Cascading Style Sheets). Još jedna fundamentalna razlika između XML-a i HTML-a je u tome što može sadržavati bilo koje oznake koje kreatori XML rječnika smatraju potrebnim da koriste.

Naprednija verzija HTML-a je jezik DHTML (Dynamic HTML), koji uključuje tri komponente - HTML, JavaScript i CSS.

· Grafički objekti. Crteži, crteži, karte, dijagrami i drugo grafičke slike, predstavljen na webu, može imati mnogo formata. Najčešći formati prikaza grafičke informacije su JPEG i GIF.

· Audio i video fajlovi. Web pruža razne audio i video datoteke koje se reproduciraju putem integriranih softverski moduli Pretraživač. Postoje dva načina za prijenos takvih podataka: preglednik ih može ili preuzeti kao cijelu datoteku (tada će se cjelokupna količina informacija morati reproducirati, što će potrajati, budući da su audio datoteke velike, a video datoteke jednostavno ogroman), ili uzmite samo onaj dio datoteke u koji se treba reproducirati ovog trenutka. Druga metoda se zove audio streaming ili video streaming.

HyperText Markup Language(HTML) – jezik za označavanje hiperteksta – namijenjen je pisanju hipertekstualnih dokumenata objavljenih na World Wide Webu.

Hipertekstualni dokument je tekstualna datoteka koja ima posebne oznake koje se nazivaju tagovi, koje pretraživač naknadno prepoznaje i koristi za prikaz sadržaja datoteke na ekranu računara. Koristeći ove oznake, možete istaknuti naslove dokumenata, promijeniti boju, veličinu i stil slova i umetnuti grafike i tabele. Ali glavna prednost hiperteksta u odnosu na obični tekst je mogućnost dodavanja sadržaju dokumenta hiperveze– posebne konstrukcije HTML jezika koje vam omogućavaju da kliknete mišem da vidite drugi dokument.

Postoje dva načina za kreiranje hipertekstualnih dokumenata. Možete koristiti jedan od WYSIWYG HTML uređivača (na primjer, Microsoft FrontPage, itd.), koji ne zahtijevaju posebno poznavanje interne strukture za rad dokument koji se kreira. Ova metoda vam omogućava da kreirate dokumente za WWW bez poznavanja HTML-a. HTML uređivači automatizuju kreiranje hipertekstualnih dokumenata i eliminišu rutinski rad. Međutim, njihove su mogućnosti ograničene, uvelike povećavaju veličinu rezultirajuće datoteke, a rezultat dobiven uz njihovu pomoć ne ispunjava uvijek očekivanja programera. Ali, naravno, ova metoda je nezamjenjiva za početnike u pripremi hipertekstualnih dokumenata.

Alternativa je kreiranje i označavanje dokumenta pomoću običnog uređivača teksta (NotePad). Ovom metodom, HTML komande se ručno ubacuju u tekst. Kreiranjem dokumenata na ovaj način, tačno znate šta radite.

Kao što je već napomenuto, HTML dokument sadrži informacije o znakovima. Jedan dio toga je sam tekst, odnosno podaci koji čine sadržaj dokumenta. drugi - oznake(označne oznake), također se nazivaju markup zastavice, su posebne konstrukcije HTML jezika koje se koriste za označavanje dokumenta i kontrolu njegovog prikaza. Oznake HTML jezika određuju u kom obliku će tekst biti predstavljen, koje njegove komponente će djelovati kao hipertekstualne veze i koje grafičke ili multimedijalne objekte treba uključiti u dokument. Grafičke i audio informacije uključene u HTML dokument pohranjuju se u zasebne datoteke. Preglednici HTML dokumenata (pretraživači) tumače oznake za označavanje i u skladu s tim raspoređuju tekst i grafiku na ekranu. Za datoteke koje sadrže HTML dokumente prihvataju se ekstenzije .htm ili .html.

Velika slova i mala slova oznake se ne razlikuju prilikom snimanja. U većini slučajeva, oznake se koriste u parovima. Par se sastoji od otvaranja (početna oznaka) i završne (završne oznake) oznaka. Sintaksa otvaranja oznake:

<имя_тега [атрибуты]>

Ravne zagrade korištene u opisu sintakse to znače ovaj element možda nedostaje. Ime završne oznake razlikuje se od imena početne oznake samo po tome što mu prethodi kosa crta:

Atributi oznake su napisani u sljedećem formatu:

ime[="vrijednost"]

Navodnici prilikom navođenja vrijednosti argumenta su opcioni i mogu se izostaviti. Za neke atribute vrijednost možda neće biti navedena. Završna oznaka nema atribute.

Radnja bilo koje uparene oznake počinje tamo gdje se naiđe na početnu oznaku i završava kada se naiđe na odgovarajuću završnu oznaku. Često se poziva par koji se sastoji od oznake otvaranja i zatvaranja kontejner, a dio teksta oivičen uvodnim i završnim oznakama je element.

Niz znakova koji čini tekst može se sastojati od razmaka, tabulatora, novih redova, znakova za povratak, slova, interpunkcije, brojeva i specijalni znakovi(na primjer, +, #, $, @), sa izuzetkom sljedeća četiri znaka koja imaju HTML poseban značenje:< (меньше), >(veće od), & (ampersend) i " (dvostruki navodnik). Ako trebate uključiti bilo koji od ovih znakova u svoj tekst, morate ga kodirati posebnim nizom znakova.