Acum putem pune niște text cu aliniamente diferite pe pagina noastră web:

Paginile mele personale vor fi aici!

Pe ele găsiți: - o poveste despre mine și hobby-urile mele; - fotografiile mele.

Din una din paginile mele va fi posibil
Trimite-mi un email.

3. Instrumente pentru crearea paginilor Web

3.1 Editore HTML

Fiecare își alege propriul instrument pentru a crea pagini web. Acesta ar putea fi MS FrontPage sau Macromedia DreamWeaver, Allaire HomeSite sau 1st Page. Și cineva folosește simplu editor de text, de exemplu Notepad.

Editorii de text pot fi folosiți doar pentru a crea pagini mici, deoarece au multe dezavantaje: proiectele nu sunt acceptate, nu există „evidențierea” textului, în general, este extrem de incomod să lucrezi.

Principalul dezavantaj al MS FrontPage este că generează cod HTML foarte mare (prea multe lucruri inutile), astfel încât paginile se dovedesc a fi mari, ceea ce afectează viteza de încărcare. Mai mult, atunci când creați pagini Web în acest editor vedeți un lucru, dar în fereastra browserului vedeți ceva complet diferit. Paginile se dovedesc a fi oarecum strâmbe, așa că pentru a crea pagini Web de înaltă calitate, se recomandă utilizarea pachetelor care vor fi discutate mai jos.

Vom începe cu popularul Macromedia DreamWeaver. Macromedia este considerat un lider în producția de software pentru crearea de site-uri web, precum și un trendsetter în acest domeniu.

DreamWeaver 3.0

Dar DreamWeaver este cu câțiva pași înaintea altor editori WYSIWYG, în primul rând pentru că generează HTML foarte curat. DreamWeaver vă permite să eliminați munca repetitivă atunci când creați pagini (de exemplu, aspectul textului) prin utilizarea opțiunile „înregistrare secvență de comandă” (înregistrați secvența de comenzi pe care o produceți, apoi apăsați, de exemplu, CTRL+P, iar DreamWeaver redă totul în aceeași secvență.

HomeSite 4.0

Următorul editor este HomeSite 4 - pentru crearea manuală a paginilor, adică. pentru cunoscătorii de HTML. Obțineți control deplin asupra codului HTML și este posibil să vă optimizați pagina pentru unul dintre cele trei browsere populare (MSIE, Google Phrome, Opera).

HomeSite conține două moduri principale: Editare și Proiectare. Modul Design este un fel de editor WYSIWYG care produce cod HTML, iar dacă încărcați codul HTML al altcuiva, HomeSite va rescrie totul în felul său.

Încă unul trăsătură distinctivă HomeSite este „cleiul” său cu Dreamweaver. HomeSite are un buton „Dreamweaver” și este, de asemenea, inclus ca standard. Cu toate acestea, DreamWeaver are și capacitatea de a conecta HomeSite ca editor pentru editarea codului HTML.

Unul dintre cele mai recente editoare HTML este EVR Soft 1st Page v2.

Sloganul lui este „Creați site-uri web de clasa I!” ("Construiți site-uri web grozave!"). Editorul conține mai multe moduri - Normal, Ușor, Avansat/Expert și Hardcore, adică îți poți alege nivelul și eventual să treci la unul superior. O altă caracteristică este o colecție destul de mare de scripturi în JavaScript și DHTML. Toate acestea sunt împărțite destul de convenabil în categorii.

3.2 Editori grafici

Crearea și optimizarea graficelor este o sarcină complexă și capricioasă. Desigur, este posibil să creați o pagină Web fără a utiliza grafică - folosind fonturi, scripturi și foi de stil (CSS) - și va fi frumos și elegant. Dar aspectul final al documentului depinde de un număr mare de factori diferiți, cum ar fi: lățimea ferestrei browserului, presetări browser, dimensiunea fontului implicit, numele și culoarea. În plus, nu toate scripturile și stilurile sunt acceptate de toate browserele. Dacă sunt folosite grafice, atunci vizitatorul paginii dvs. o va vedea exact așa cum ați făcut-o și o va vedea.

Principala dificultate a lucrului cu grafica Web este aceea debitului Canalele de internet, în cele mai multe cazuri, sunt foarte scăzute și vă veți confrunta imediat cu probleme - cum să faceți un fișier grafic de dimensiuni mici, dar calitate bună, ce programe și tehnici să utilizați atunci când îl optimizați.

Exact asta este secțiunea despre editorii grafici vectoriali și raster, care sunt Unealtă puternică procesarea imaginilor în mâini capabile.

Înainte de a lua în considerare editorii de grafică vectorială și raster, ar trebui să înțelegeți diferența dintre reprezentarea vectorială și raster a unei imagini.

Grafică raster este o grilă (raster), ale cărei celule se numesc pixeli. Fiecare pixel dintr-o imagine raster are o locație și o culoare strict definite, prin urmare orice obiect este reprezentat de program ca un set de pixeli colorați. Aceasta înseamnă că utilizatorul, atunci când lucrează cu imagini raster, nu lucrează pe anumite obiecte, ci pe grupurile de pixeli care le alcătuiesc.

Imaginile raster oferă gradații de culoare și tonuri foarte precise, precum și detalii ridicate ale imaginii, făcându-le mijlocul optim de reprezentare a imaginilor ton pe ton, cum ar fi fotografiile scanate.

Pentru imagine grafică raster se folosește întotdeauna un număr fix de pixeli, adică Calitatea unei imagini raster depinde direct de rezoluția echipamentului. Aceasta înseamnă că orice modificare a imaginii (rotație, mărire etc.) duce la o distorsiune constantă a imaginii, iar limitele obiectelor sunt inegale.

Imagini vectoriale sunt formate pe baza unor figuri descrise matematic numite vectori, iar aspectul imaginii este determinat de parametrii vectorilor. Cu alte cuvinte, grafica vectorială consta în curbe care au coordonate, culoare și alți parametri, precum și zone închise umplute cu o anumită culoare. Limitele acestor zone sunt, de asemenea, descrise prin curbe. Fișierul imagine vectorială conține coordonatele și parametrii curbelor.

Rezultatele procesării imaginilor vectoriale nu depind de rezoluția echipamentului, așa că le puteți modifica în mod arbitrar parametrii (dimensiune, culoare, formă etc.) - calitatea nu se va deteriora. Grafica vectorială este utilizată atunci când se creează obiecte digitale folosind dimensiuni mici ale punctelor (dimensiuni ale fontului) sau obiecte precum logo-uri care necesită contururi clare și scalabilitate nelimitată.

Pachetele grafice (editori) sunt, de asemenea, împărțite în două tipuri: raster și vector. Să ne uităm acum la cele mai populare dintre ele.

A) Editori de grafică raster

Microsoft Paint este un editor simplu (sau mai bine spus, cel mai simplu) inclus ca standard. sisteme de operare Microsoft. Are un set de funcții simple (penie, creion, radieră etc.) care vă permit să creați imagini simple. Din păcate, este practic nepotrivit pentru procesarea grafică. Imaginea pe care o vedeți în dreapta este cel mai mult pe care acest editor poate face.

Adobe Photoshop- astazi acesta este cel mai puternic pachet pentru procesarea grafica raster profesionala. Acesta este un întreg complex care are numeroase posibilități de modificare a unei imagini raster, are o gamă largă de filtre și efecte diferite și este posibil să se conecteze instrumente de la producători independenți.

Pachetul oferă, de exemplu, instrumente pentru restaurarea imaginilor deteriorate, retușarea fotografiilor sau crearea celor mai fantastice colaje pe care le poate imagina imaginația noastră. În general, potențialul acestui pachet este cu adevărat enorm. Începând cu versiunea 5.5, pachetul include programul Adobe ImageReady, oferind oportunități enorme de procesare a graficelor pentru WEB (optimizarea imaginilor, crearea gif-uri animate, „decuparea” imaginilor în altele mai mici etc.). Motto-ul dezvoltatorilor Adobe Photoshop - „Camera of your mind” - implică nu numai excelență tehnică, ci și libertate completă de creativitate, la care o persoană care lucrează cu acest program este pur și simplu condamnată.

PhotoPaint- un alt editor grafic la fel de cunoscut (din pachetul Corel Draw) pentru procesarea graficelor raster, concurând cu Adobe Photoshop. De asemenea, are toate instrumentele necesare pentru procesarea grafică, diverse filtre, texturi. Singura diferență este în ușurința în utilizare, interfața și viteza de aplicare a filtrelor - aplicația este puțin mai lentă.

Pictor- editorul oferă oportunități excelente de emulare a instrumentelor reale de desen: grafit, cretă, ulei etc. De asemenea, vă permite să imitați textura de suprafață a materialelor, să pictați și să creați animație. Foarte convenabil pentru dezvoltare imagini de fundal sau pagini Web în stil pictură. Folosind acest program te simți ca un adevărat artist.

Există, de asemenea, o serie de editori ( Microsoft Photo Editor, Microsoft PhotoDRAW), permițând și implementarea celor mai simple sarcini, dar nesatisfăcând nevoile profesioniștilor.

B) Editori de grafică vectorială

Adobe Illustrator - pachetul vă permite să creați, să procesați și să editați grafică vectorială. Din punct de vedere al puterii este echivalent

editor raster Adobe Photoshop: are o interfață similară, vă permite să conectați diverse filtre și efecte, înțelege multe formate grafice, chiar și așa. cdr (Corel Draw) și. swf (Bliț).

Corel Draw- desigur, un astfel de pachet de grafică binecunoscut nu s-ar putea lipsi de instrumente de procesare a graficelor vectoriale. Pachetul este aproape la fel de puternic ca editori grafici Adobe Photoshop și Adobe Illustrator. Pe lângă procesarea grafică vectorială, acest pachet conține un procesor grafic raster (Photo Paint), un trasor de imagine, un editor de fonturi, pregătirea texturii și crearea codurilor de bare, precum și colecții uriașe de imagini (CorelGallery).

Adobe Streamline- un alt produs Adobe conceput pentru trasarea (traducerea) graficelor raster în grafică vectorială. Acesta este un produs mic, dar foarte util și puternic. Deosebit de util dacă creați pagini Web folosind grafică vectorială, cum ar fi tehnologia Flash.

4. Crearea site-ului web Ajutor CMS Joomla 1.5.7

Lejer, după principiul de la simplu la complex, trecem de la pagini WWW statice la cele dinamice. Pentru a realiza acest lucru, avem nevoie de cunoștințe ale limbilor web PHP, Jscript, Perl, jQueryși cel puțin limbajul de interogare structurat MySQL. E în regulă, doar câțiva ani și ești un profesionist, capabil să realizeze astfel de site-uri multifuncționale, în care pagini sunt generate din mers, în care există o bază de date de clienți de forum, login-uri, parole, identificare, autentificare, animații de conectare și mult mai mult.

Dar nu este necesar să cunoașteți toate limbile pentru a crea un site web multifuncțional dinamic. Aveam suficiente cunoștințe de HTML, SCC, PHP, 3Ds Max, Photoshop și SMC Joomla.

Joomla este un sistem de management al conținutului scris în PHP și JavaScript, folosind ca stocare o bază de date MySQL. Este un software gratuit distribuit sub licența GNU GPL.

Caracteristici principale:

1. Funcționalitatea poate fi extinsă folosind module suplimentare (extensii, pluginuri).

2. Modul de securitate pentru autentificarea pe mai multe niveluri a utilizatorilor și administratorilor.

3. Sistemul de șabloane facilitează schimbarea aspectului site-ului.

4. Aspecte personalizabile ale modulelor, inclusiv blocuri de meniu stânga, dreapta și centrală.

5. Avantajele sistemului includ faptul că puteți scrie singur toate modulele, componentele, pluginurile, șabloanele, le puteți plasa într-un director structurat de extensii sau puteți edita o extensie existentă la discreția dvs.

Puteți lucra cu Joomla pe serverul de găzduire de pe Internet ( Cheltuieli suplimentare, și, de asemenea, foarte mult depinde de viteza Internetului). Prefer să lucrez pe un server local. Pentru asta am ales Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 Server la 127.0.0.1 Port 80.

Deci, instalat server local. În directorul localhost/home/www/, creați un folder în care plasăm Joomla în sine. Aș dori să notez că Joomla nu funcționează corect sub PHP5.3.1. Componentele forumurilor FireBoard și Kunena produc în mod constant erori pe site, trebuie să editați fișier php. ini și dezactivați mesajele de eroare, deoarece acțiunea în sine promite circumstanțe neprevăzute pentru site. Din acest motiv, recomand să alegeți versiunea PHP 5.2.4, lucrul este stabil pentru toate pluginurile, modulele și componentele. După Instalări Joomla Folosind un browser, creăm un utilizator admin în MySQL și îi folosim numele și parola pentru a accesa panoul de administrare. Apoi, trebuie să alegeți un șablon pentru site. La prima vedere va părea că este foarte ușor, dar săpând mai adânc vei fi convins că 80% din timp este alocat modernizării acestui șablon. De aceea, recomand alegerea celui mai potrivit șablon nevoilor dumneavoastră, fără a uita de modulele care urmează să fie afișate. În continuare, conectăm toate funcționalitățile site-ului: înregistrare, forum, diapozitive, bannere, fișiere pentru curse, video on-line, audio, editare, toate paginile afișate. Lucrăm în principal cu fișierul Index. php și șablon. css și bineînțeles că configurăm toate extensiile conectate pentru noi, dintre care sunt aproximativ 6000 pentru Joomla. Urmează partea cea mai bună - designul site-ului web. Folosind raster programe Photoshopși 3Ds Max (profesional cu funcții complete sistem software pentru crearea și editarea de grafică și animație tridimensională, dezvoltată de Autodesk, conține cele mai moderne instrumente pentru artiști și specialiști multimedia) creăm un design șablon. Editați antetul și faceți-l să arate așa cum doriți.

Concluzie

Datorită dezvoltării rapide a programării Web și creării mai multor CMS-uri, munca unui designer web a fost simplificată. Acum, pentru a crea un portal web dinamic, multifuncțional, puternic, este suficient să stăpânești mai multe limbaje de programare (dacă adăugăm extensii și scripturi), să fii priceput în programe grafice și raster și să ai puțină inspirație, inovație și pricepere.

Literatură

1. Kotorev D.V., Kostarev A.F. „PHP 5 sau mai mare ghid completîn original.” Petersburg 2005

2. A. Goncharov „HTML Self-Teacher”.

3. A. Matrosov, A. Sergeev, M. Chaunin „HTML 4.0 în original”

4. Isaacs S. „HTML dinamic”

5. Bayens J. „Game de programare web”

6. Bursov M.V. etc. „Noțiuni de bază pentru lucrul cu editorul HTML Dreamweaver. Manual educațional”

7. Velikhov V. „Manual de HTML 4.0”

HTML este un limbaj pentru descrierea structurii paginilor web. Paginile create cu ajutorul acestuia pot fi vizualizate doar folosind programe speciale (browsere) instalate pe computerele utilizatorilor.

• Abrevierea HTML reprezintă H yper T ext M arkup L limbaj (limbaj de marcare hipertext).
• Amintiți-vă, nu este un limbaj de programare, este un limbaj de marcare.
• Utilizări HTML Etichete marcaj pentru a descrie structura unei pagini web.

Etichete

Etichetele HTML sunt cuvinte cheie sau caractere cuprinse între paranteze unghiulare, de ex. ,

,

etc. Există două tipuri de etichete: dubleazăȘi singur(se mai numesc și goale). Etichetele pereche constau dintr-o etichetă de deschidere și de închidere, de exemplu: . „/” după paranteza unghiulară indică faptul că eticheta este o etichetă de închidere. Etichetele unice constau dintr-o etichetă de deschidere, de exemplu:
. Etichetele nu țin cont de majuscule, așa că pot fi scrise fie cu litere mari, fie cu litere mici:

Înseamnă la fel ca

Etichetele definesc unde începe și unde se termină un element HTML.

Folosind etichete, browserul recunoaște structura și semnificația textului dvs., de exemplu, ele îi spun browserului ce parte a textului este un titlu, unde începe un nou paragraf, ce trebuie subliniat și unde să plasați o imagine (imagine ). Odată ce browserul primește aceste informații, își folosește regulile implicite despre cum să afișeze fiecare dintre aceste elemente.

Notă: în referința noastră HTML puteți vedea stilurile implicite pentru orice etichetă care vă interesează.

Fara folosire Etichete HTML browserul va afișa pur și simplu un flux continuu de text, fără indentări, titluri, paragrafe etc. Pentru a fi mai clar, să ne uităm la asta mai detaliat folosind exemple.

Iată cum arată o pagină folosind etichete de marcare:

Băuturi în cafeneaua noastră

Multifructe - 100 de ruble.

O băutură din fructe care conține sucuri de portocale și ananas.

Milkshake - 150 de ruble.

Inghetata cremoasa amestecata cu pulpa de fructe.

Același lucru, dar fără a folosi etichete:

Băuturi în cafeneaua noastră Multifruit - 100 de ruble. O băutură din fructe care conține sucuri de portocale și ananas. Milkshake - 150 de ruble. Inghetata cremoasa amestecata cu pulpa de fructe.

3. Limbajul hipertext HTML

Hipertextele trebuie să înceapă cu un cuvânt și să se termine cu un cuvânt. Cuvintele din paranteze unghiulare sunt numite etichete în HTML și descriptori în programare. Aproape toate etichetele HTML sunt asociate - și, și, etc.

Etichetele pereche evidențiază un anumit fragment de hipertext - „titlu”, „corp”, etc. Prima etichetă începe fragmentul, iar a doua îl completează. Descriptorii de închidere preced numele cu un semn de fracție / .

Structura generală hipertexte scrise în limbaj HTML:

hipertext::= corpul titlului

titlu::= titlu

titlu::= titlu

body::= text

Conform regulilor HTML, hipertextele trebuie să aibă un „titlu” și un „corp”. Ca publicații, hipertextele pot și ar trebui să conțină informații despre autori și deținătorii drepturilor de autor (site-uri).

Titlul hipertextului trebuie să conțină un „titlu”, care este afișat de browsere pe linia de sus a ecranului computerului. Titlul ar trebui să exprime ideea principală a publicației (pagina). Hipertextul fără titlu este ca un articol fără titlu.

„Corpul” hipertextului ar trebui să conțină texte, tabele, fotografii și ilustrații. Diferența dintre hipertextele electronice și textele obișnuite pe hârtie este includerea de hyperlinkuri, clic pe care provoacă descărcarea de noi hipertexte.

Un exemplu de hipertext și rezultatul afișării acestuia de către un browser pe ecranul unui computer:

Hipertext: Rezultat:

Rezultatul browserului este încărcarea și afișarea hipertextului stocat pe site la adresa specificată în fereastra browserului. Dacă hipertextul este prea mare, browserul afișează butoane de glisare hipertext în partea dreaptă sau inferioară a ecranului.

Dimensiunile ecranelor de computer au următorul interval. Dimensiunea minimă a ecranului este de 640 x 480 pixeli. Alte dimensiuni standard ale ecranului sunt 800 x 600, 1024 x 768 și 1280 x 1024 pixeli. Prin urmare, hipertextele pot arăta diferit pe diferite ecrane.

Structura generală a hipertextelor și afișarea lor pe ecranul unui computer:

Hipertext: Rezultat:

Partea de text poate consta din rânduri și paragrafe cu și fără titluri, cu liste, tabele și meniuri.

corpul textului

text::= titlu ( text ) |

listă(text) |

tabel(text) |

Titlurile din hipertexte sunt formatate după cum urmează:

titlu::=

Nume

titlu::=

Nume

titlu::=

Nume

unde etichetele H2, ..., h6 stabilesc dimensiunea titlurilor în raport cu textul principal.

Paragrafele din hipertexte încep cu un descriptor

hipertext |

Mergi la linie nouă iar paragrafele este indicată de descriptor . Sfârșitul paragrafului p> este opțional, dar este necesar atunci când se folosesc parametrii în descriptorul de paragraf.

Parametrul principal al paragrafelor este alinierea - alinierea textelor pe ecranul computerului. Alinierea textului este efectuată automat de către browsere în conformitate cu dimensiunea ecranului computerului:

align=center - centrați ecranul:

align=left- la marginea stângă;

align=right - la marginea dreaptă;

align=justify - ecran complet.

Pentru a alinia paragrafele, trebuie ales un singur stil comun și aplicat tuturor hipertextelor de pe site.

Pentru proiectarea hipertextelor, limbajul de marcare HTML are o gamă bogată de fonturi, stiluri și resurse. Cel mai simplu mijloc de proiectare este evidențierea cuvintelor pentru a atrage atenția cititorilor site-ului web asupra părților individuale ale textelor.

Puteți folosi aldinul sau sublinierea pentru a evidenția cuvintele în hipertext folosind următoarele etichete:

Simboluri mari

font aldine

cursive i>

subliniere

tricând

personaje mici

Evidențierea fontului în hipertexte este specificată de etichetă :fonts::=font text>

Parametrii fontului - dimensiunea și tipul acestora. Dimensiunile fontului sunt specificate de parametrul size = size.

Mărimea este indicată în mod explicit de la 1 la 6, fie sub forma unei creșteri +1, +2, fie sub formă de scădere - 1, - 2.

Tipul fontului este specificat de parametru

fata = font

Aici fontul este unul dintre fonturile standard: „Times”, „Courier”, etc.

Culoarea fontului este specificată de parametrul co1og = culoare, unde culoarea este culoarea fragmentului de hipertext selectat. De exemplu, evidențierea textului cu roșu:

font text >

Nume standard de culori în limbajul HTML:

roșu - roșu, verde - verde, albastru - albastru, negru - negru,

alb - alb, auriu - auriu, galben - galben etc.

Pentru proiectarea hipertextelor, cel mai bine este să luați ca model o carte sau o revistă bună publicată de o editură profesionistă sau proiectată profesional de altcineva. e-carte, ziar sau site web pe Internet.

Un stil de design unificat este o proprietate importantă a oricărei publicații în cărți, reviste și site-uri web. În viitor, cel mai bine este să respectați standardul acceptat și stilul de design pentru întreaga perioadă de creare și întreținere a site-ului.

Fragmente de hipertexte pot fi localizate pe același site sau pe mai multe site-uri sau chiar pe mai multe servere. Hiperlinkurile externe indică numele fișierelor corespunzătoare de pe site, server sau pe Internet:

Forma generală a hyperlink-urilor externe este:

unde „adresă” este adresa hipertextului din site sau de pe un alt server de internet.

Exemple de hyperlinkuri externe:

a) adresa site-ului web pe internet:

http://bak2.nagod.gu

b) adresa paginii de pe site:

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

c) adresa paginii din folderul site-ului;

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

testele 2 a>

Folosind dispozitivul de hyperlinkuri, se organizează plasarea tuturor desenelor, fotografiilor și altor ilustrații grafice pe site-uri. Pentru a face acest lucru, toate fișierele cu ilustrații grafice sunt preînregistrate pe site.

Fișierele grafice sunt de obicei plasate pe site-uri web și într-un folder separat numit imagine. Încărcarea ilustrațiilor pe ecranele computerelor utilizatorilor este efectuată de browsere cu ajutorul operatorilor :

Forma generală a operatorilor pentru încărcarea ilustrațiilor grafice:

Locația ilustrațiilor pe ecranul computerului este determinată de parametrii de aliniere: align=left - de-a lungul marginii din stânga, align=right - de-a lungul marginii din dreapta a ecranului. Textul curge apoi în jurul ilustrațiilor spre dreapta sau este orb.

Ilustrațiile pot fi apăsate pe marginea de sus sau de jos a ecranului, care este setată de parametrii: align =top - la marginea de sus, align=bottom - la marginea de jos a ecranului sau aliniate la mijlocul ecranului - aliniere = mijloc.

Pentru a poziționa ilustrațiile pe ecranul computerului, lățimea și înălțimea acestora pot fi specificate în declarația de încărcare:

inaltime:= inaltime= "inaltime"

lățime:= lățime= „lungime”

Dimensiunile ilustrațiilor sunt specificate de numărul de pixeli ai ecranului (în pixeli) sau ca procent din înălțimea sau lățimea ecranului computerului. În acest din urmă caz, ilustrațiile vor avea dimensiuni diferite pe diferite ecrane. Calculând amplasarea ilustrațiilor pentru dimensiuni minime de ecran, puteți fi sigur de plasarea lor pe ecrane de orice altă dimensiune.

Dimensiunile ilustrațiilor sunt de obicei alese astfel încât să fie vizibile în întregime chiar și pe ecranele computerelor cu o dimensiune minimă. Dacă macaraua computerului este mai mare, atunci ilustrațiile vor ocupa doar o parte din ea.

Listele hipertext sunt liste cu numerotarea sau evidențierea elementelor listei. Toate elementele încep cu etichete

Marcajul hipertext este utilizat pentru a indica unde pe ecran și cum ar trebui afișat textul și modul în care textele care alcătuiesc o bază de date hipertext sunt legate între ele. În aceste scopuri, în text sunt introduse caractere speciale de control. Textul cu caractere de control este stocat într-un fișier text obișnuit în coduri ASCII și poate fi procesat de aproape orice editor de text.

Limbajul de marcare hipertext HTML a fost propus de Tim Berners-Lee în 1989. Până la momentul creației Creare HTML A existat un standard pentru limbajul de marcare pentru documentele tipărite - SGML (Standard Generalized Markup Language), care a fost luat ca bază pentru HTML. Sa presupus că o astfel de soluție ar ajuta la utilizarea software-ului existent pentru a interpreta noul limbaj.

Ca element al unei baze de date hipertext pentru HTML, a fost selectat un fișier text obișnuit, care este stocat folosind Sistemul de fișiere mediul de operare al computerului.

Astfel, o bază de date hipertext în conceptul WWW este un set de fișiere text scrise în HTML, care definește:

Formular de prezentare a informațiilor (markup);

Structura conexiunilor de fișiere între fișiere (legături hipertext). Această abordare presupune prezența unei alte componente

tehnologie - interpret de limbă. În WWW, funcțiile interpretului sunt împărțite între serverul de baze de date hipertext și interfața cu utilizatorul. Serverul, pe lângă accesarea documentelor și procesarea legăturilor hipertext, efectuează și preprocesarea documentelor, în timp ce interfața cu utilizatorul interpretează constructele de limbaj asociate cu prezentarea informațiilor.

În 1990 a apărut versiunea zero a HTML 0.

Prima versiune (HTML 1.0) a avut ca scop prezentarea limbajului ca atare, unde descrierea capabilităților sale era mai degrabă de natură consultativă.

Prognoza este nucleul oricărui sistem comercial, așa că cele bine scrise te pot face extrem de bogat.

A doua versiune (HTML 2.0) a înregistrat practica utilizării constructelor de limbaj și a devenit standardul pentru construirea WWW.

Versiunea ++ HTML ++ a introdus noi funcții pentru prezentarea informațiilor științifice și a tabelelor, îmbunătățind stilul de aspect al textului și imaginilor.

A treia versiune (HTML 3.0) a simplificat toate inovațiile și a oficializat interfața cu utilizatorul a sistemului distribuit hipertext.

În 1996 eliberată o noua versiune limbaj: HTML 3.2, inclusiv instrumente pentru crearea de tabele, construcții de limbaj Java, hărți de imagine (situate pe computerul client) și noi tipuri de formatare a textului.

HTML este un limbaj bazat pe text în care instrucțiunile de formatare, numite etichete, sunt încorporate în textul documentului.

Procesul de creare a unui document HTML constă în includerea etichetelor în interiorul textului neformatat care poartă o încărcare de informații.

Etichetele HTML sunt secvențe de caractere care încep cu un semn mai puțin decât (<) и заканчивающиеся знаком “больше” (>).

Majoritatea caracteristicilor de formatare din HTML specifică stiluri logice mai degrabă decât stiluri fizice. De exemplu, etichetele de antet, care indică de obicei dimensiuni mai mari ale literelor, nu indică dimensiunea de utilizat. Browserul (care acționează ca un program client) selectează o dimensiune mai mare a textului pentru titluri decât în ​​mod normal. Această abordare vă permite să scăpați de platformă - un document creat pe un Macintosh poate fi folosit de UNIX sau Windows. Dezavantajul este că documentul arată diferit pe diferite platforme.

Browserele WWW funcționează în conformitate cu următoarele reguli atunci când parsează propoziții HTML:

Spațiile și alte caractere „invizibile” sunt ignorate;

Toate etichetele pot fi împărțite în grupuri: etichete de bază, etichete de formatare, etichete structurale, pointeri etc.;

Etichetele de formatare pot fi scrise cu litere mici și/sau mari;

Majoritatea etichetelor de formatare sunt scrise în perechi. Eticheta de deschidere activează acest efect, iar eticheta de închidere îl dezactivează. O pereche de etichete este uneori numită container deoarece efectul pe care îl activează și dezactivează apare pe textul din interiorul lor. De exemplu, pentru a indica faptul că o linie trebuie tipărită cu caractere aldine, ați scrie:< B >Această linie va fi tipărită cu text aldine

Textul din interiorul unei etichete de închidere este întotdeauna precedat de un caracter backslash. Printre etichetele HTML de bază, excepțiile de la această regulă sunt:< BASE >(informatii de baza),< BR >(sfârșitul rândului),< HR >(riglă orizontală) și< IMG >(imagine). Aceste etichete există într-o singură copie.

Fiecare document HTML are etichete de limită:< HTML >Și. Această pereche de etichete conține toate celelalte etichete de pe pagina Web și tot conținutul de informații al documentului. De fapt, ei declară că tot conținutul containerului este cod HTML. Etichetă< HTML >trebuie să fie localizate în prima linie a fișierului și eticheta- în ultimul.

Fiecare document HTML conține un cap de document și un corp de document.

Titlul documentului identifică documentul. Ar trebui să vină imediat după etichetă< HTML >și începe cu< HEAD >. Titlul se termină cu eticheta.

Titlul documentului trebuie să conțină numele documentului și adresa URL de bază.

Titlul documentului este situat între etichete< TITLE >Și. Este folosit de browser și server web. Lungimea numelui nu trebuie să depășească 40 de caractere. Titlul documentului trebuie să fie informativ și să reflecte conținutul documentului, astfel încât să poată fi identificat. Numele apare în bara de titlu a Internet Explorer, în listele de istorie (Istoric) și „Favorite”.

Adresa URL de bază trebuie să fie completă (absolută) și să conțină protocolul, adresa computerului de Internet și numele fișierului. Este indicat în etichetă< BASE HREF = “базовый_URL”>. Toate celelalte URL-uri din document pot fi specificate în raport cu cea de bază. De exemplu, dacă adresa URL de bază este: http://www.microsoft.com/products/office/word/datasheets.htmlși trebuie să specificați adresa URL a fișierului de caracteristici. html aflat în directorul /products/office/excel de pe același server, puteți specifica: ../excel/features. html în loc să tastați adresa completă.

Simboluri. ./ indică faptul că trebuie să mergeți cu un nivel de director în sus față de adresa de bază.

Având o adresă URL de bază, este mai ușor să transferați un document pe un alt server, deoarece dacă toate celelalte URL-uri din document sunt relative, atunci numai numele serverului din URL-ul de bază trebuie schimbat la transfer.

Corpul documentului conține tot textul care conține informații și toate etichetele HTML folosite pentru a formata textul. Corpul documentului începe imediat după antet și este delimitat de etichete< BODY >Și.

Exemplu de HTML-document:

< TITLE >Numele documentului

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

Etichetele utilizate în corpul documentului vă permit să specificați următoarele elemente de markup text:

Începutul paragrafului și sfârșitul rândului

Stiluri de titlu

Stiluri fizice - stiluri logice

Simboluri speciale.

Link-uri hipertext constă din două părți: un pointer și o adresă URL. Un indicator este un text pe care utilizatorul trebuie să facă clic pentru a se muta undeva. URL-ul specifică adresa de la care browserul va descărca documentul atunci când utilizatorul face clic pe indicator.

Ghidurile de text din browserele grafice sunt de obicei subliniate și codificate cu culori. În browserele de text pur, acestea apar cu caractere aldine.

Orice text poate fi folosit ca index, indiferent de dimensiunea și caracteristicile de formatare. Indexul poate consta din mai multe litere, cuvinte sau chiar linii de text.

Format index:

< A HREF = “ URL ”>text index ,

unde este litera A din etichetă< A HREF >înseamnă ancora, iar HREF înseamnă REFERINȚĂ hipertext. Totul dintre etichete< A HREF = “ URL ”>Șieste textul index care apare pe ecran cu font subliniat sau aldine.

Alte coduri de formatare pot fi utilizate împreună cu indecșii hipertext. De exemplu:

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

< I > < A HREF = “ URL ”>Accesați mai multe detalii

Tehnologia WWW

Serviciul World Wide Web (WWW) este cel mai popular serviciu de Internet. WWW este un singur spațiu de informații format din sute de milioane de documente electronice interconectate stocate pe servere Web. Documentele individuale care alcătuiesc Web-ul se numesc pagini Web. Grupurile de pagini Web unite tematic sunt numite site-uri Web (site Web). Un server Web fizic poate conține destul de multe site-uri Web, fiecăruia fiind atribuit un director separat pe hard disk-ul serverului.

Paginile web diferă de documentele text obișnuite prin faptul că sunt concepute fără referire la un anumit mediu. De exemplu, designul unui document Word tipărit pe hârtie este legat de parametrii foii tipărite, care are o anumită înălțime, lățime și dimensiunea marginii. Documentele electronice Web sunt concepute pentru a fi vizualizate pe ecranul unui computer și nu se știe dinainte care dintre ele. Prin urmare, documentele Web nu pot avea formatare rigidă. Designul se realizează în timpul redării acestora pe PC-ul clientului și se realizează în conformitate cu setările programului care efectuează vizionarea (browserul). Browserul afișează documentul în conformitate cu comenzile scrise în textul documentului Web. Comenzile pot fi scrise fie direct de autorul documentului, fie implementate prin mijloace automate de pregătire a documentelor Web.

Astfel de comenzi se numesc tag-uri. Etichetele sunt incluse în paranteze<>. Majoritatea etichetelor sunt folosite în perechi: o etichetă de deschidere și una de închidere.

Etichete complexe, cu excepția cuvânt cheie au atribute și parametri suplimentari. Regulile de scriere a etichetelor sunt cuprinse în specificația unui limbaj special de marcare hipertext - HTML (Hyper Text Markup Language). Adică, un document Web este obișnuit Document text, marcat cu etichete HTML.

Cea mai importantă caracteristică a documentelor Web sunt legăturile hipertext. Un hyperlink poate fi setat la orice bucată de text. O etichetă asociată este utilizată pentru a crea un hyperlink . Această etichetă conține un atribut HREF obligatoriu, care specifică adresa URL a documentului către care trimite linkul.

Adresa poate fi specificată în formă absolută sau relativă. O adresă absolută începe cu protocolul și adresa site-ului Web. Această intrare este folosită atunci când trebuie să direcționați vizitatorul către un alt site Web și este considerată un link extern. Când utilizați o adresă relativă, linkul specifică doar calea de căutare relativă pentru document. Aceasta presupune că se utilizează același protocol și același site Web, iar linkul este considerat intern. O legătură internă rămâne operațională dacă adresa site-ului Web în ansamblu se modifică (de exemplu, către un alt server). Formatul complet de hyperlink include posibilitatea de a face link la o anumită locație dintr-o pagină. Dar acest lucru se poate face numai pentru paginile cu propriul design. Pentru a face acest lucru, locul în care este plasată legătura este marcat folosind un element de ancorare special. Ancora este setată folosind o etichetă asociată cu atributul NAME necesar. Valoarea acestui atribut este o succesiune arbitrară de litere și numere latine - numele ancorei. Pentru a conecta la o ancoră, numele ancorei apare la sfârșitul adresei URL, după simbolul #.

Glosar

Browserul va căuta documentul pe acest server în folderul curent

Muzică midi

Browserul va naviga la site-ul http://www.midi.ru.

Totalitatea unui număr imens de documente hipertext stocate pe serverele WWW formează un spațiu unic de hiperdocumente, între care este posibilă mișcarea. Mișcarea aleatorie între documente se numește navigare pe Web și mișcare intenționată (efectuată în scopul căutării informatie necesara) – Navigare web.

Legătură hipertext între o sumă imensă documentele stocate pe servere fizice Internetul este baza pentru existența spațiului logic WWW.

Să ne uităm la hardware-ul și software-ul care alcătuiesc împreună Web-ul.

· Clienti si servere. Un server web este un computer conectat la Internet care rulează program special, numit și server web. Sarcinile acestui program includ stocarea, căutarea și distribuirea anumitor fișiere pe Web. Clientul Web este un browser care solicită fișiere de pe Web. Când un computer client dorește să acceseze unul dintre fișiere, o solicitare este trimisă la serverul web. Serverul găsește fișierul specificat și îl trimite computer client care a trimis cererea. Miile de computere care alcătuiesc Web-ul reprezintă o mare varietate de combinații de hardware și software. Când un computer client solicită un fișier, nu știe practic nimic despre detaliile serverului pe care este stocat fișierul pe care îl caută sau despre celelalte computere care vor transfera fișierul unul către celălalt pe drumul său de la server la client. . Pentru ca un astfel de sistem să funcționeze, trebuie să utilizeze un set de limbi și protocoale care sunt independente de hardware sau sisteme de operare.

· URL-uri și protocoale de transfer de date. Dacă fragmente dintr-un document sunt împrăștiate în întreaga lume și doriți să le prezentați utilizatorului ca întreg, consecvent stil uniform document" veți avea nevoie de un sistem de adresare foarte bun. Fiecare fișier de pe Internet are o adresă numită URL (Uniform Resource Locator). resursă informațională). De exemplu, adresa URL a site-ului web al Federației Europene fotbal - http://ru.uefa.com.

Prima parte a URL-ului definește metoda prin care computerul accesează fișierul, adică protocolul de comunicare. Majoritatea paginilor web sunt accesate folosind protocolul HTTP (Hypertext Transfer Protocol). Acesta este motivul pentru care o adresă web este de obicei specificată folosind literele „http”, iar browserele introduc automat aceste litere înainte de adresa web pe care o introduce utilizatorul. Adesea parte Adresele http:// sunt omise la începutul adresei URL.

Următoarea parte a adresei este numele de gazdă a serverului web. Sistemul de nume de domeniu va redirecționa cererea dvs. către serverul web oriunde se află.

Unele adrese URL conțin informații după numele de gazdă a serverului web. Aceste date indică fișierul pe care doriți să-l vizualizați și directorul în care este stocat. Dacă nu sunt specificate nume de director și fișiere, este afișată pagina web implicită pentru acel server web.

· HTML(Hypertext Markup Language - limbajul de marcare hipertext) este limbajul universal al Web-ului. Este folosit pentru a pune la dispoziție pagini pe care pot fi reproduse informații postate pe Web: text, grafică, precum și informații audio și video.

· Java și JavaScript. Limbajul Java este conceput pentru a trimite aplicații mici (numite applet-uri sau aplicații Java) pe Web. Și JavaScript extinde capacitățile HTML pentru a încorpora programe mici (sau scripturi) în pagini web. Scopul principal al applet-urilor și scripturilor este de a face paginile web mai interactive - în loc să interacționați cu un server web la distanță, interacționați cu applet-ul și scriptul care rulează pe computer.

Există și applet-uri Java și scripturi JavaScript pentru construirea de animații, acestea sunt trimise de serverul web prin rețea pentru a fi executate pe computerul utilizatorului; ei evită transmiterea cadrelor de animație prin Internet. Procesele descrise apar de obicei neobservate de utilizator.

· controale VBScript și ActiveX. Limbajul VBScript și controalele ActiveX sunt mijloace standard sprijinit motor de cautare Explorator.

VBScript este o versiune simplificată a limbajului Visual Basic, dezvoltat de Microsoft. Poate fi folosit pentru a crea scripturi care fac pagini web dinamice. Astfel, VBScript este similar ca funcționalitate cu JavaScript.

Controalele ActiveX, cum ar fi appleturile Java, sunt folosite pentru a încorpora programe executabile în paginile Web. Când Internet Explorer întâlnește o pagină web care utilizează controale ActiveX, verifică dacă controlul specific este instalat pe computer și, dacă nu, îl instalează.

· XML și alte limbaje web avansate. XML (Extensible Markup Language) este un limbaj foarte puternic care este setat să înlocuiască HTML ca limbaj pentru dezvoltarea de aplicații pentru Web. Spre deosebire de HTML, XML nu conține instrucțiuni despre cum ar trebui să fie afișate datele descrise în documentul XML. Modul în care sunt afișate este determinat de limbajul de descriere a stilului, care joacă aproximativ același rol pentru XML ca foile de stil în cascadă pentru HTML. Consorțiul W3C lucrează cu două specificații pentru foi de stil: XSL (Extensible Style Language) și CSS (Cascading Style Sheets). O altă diferență fundamentală între XML și HTML este că poate conține orice etichetă pe care creatorii dicționarului XML le consideră necesare.

O versiune mai avansată a HTML este limbajul DHTML (Dynamic HTML), care include trei componente - HTML, JavaScript și CSS.

· Obiecte grafice. Desene, desene, hărți, diagrame și altele imagini grafice, prezentat pe Web, poate avea mai multe formate. Cele mai comune formate de afișare informatii grafice sunt JPEG și GIF.

· Fișiere audio și video. Web-ul oferă o varietate de fișiere audio și video care sunt redate prin integrat module software browser. Există două modalități de a transfera astfel de date: browserul poate fie să le descarce ca un întreg fișier (apoi va trebui reprodusă întreaga cantitate de informații, ceea ce va dura mult timp, deoarece fișierele audio sunt mari, iar fișierele video sunt pur și simplu imens), sau luați doar acea parte a fișierului, care trebuie reprodusă în acest moment. A doua metodă se numește streaming audio sau streaming video.

Limbajul de marcare hipertext(HTML) – limbaj de marcare hipertext – este destinat redactării documentelor hipertext publicate pe World Wide Web.

Document hipertext este un fișier text care are mărci speciale numite etichete, care sunt ulterior recunoscute de browser și utilizate de acesta pentru a afișa conținutul fișierului pe ecranul computerului. Folosind aceste semne, puteți evidenția titlurile documentelor, puteți schimba culoarea, dimensiunea și stilul literelor și puteți introduce grafice și tabele. Dar principalul avantaj al hipertextului față de textul obișnuit este capacitatea de a adăuga conținutul unui document hiperlinkuri– construcții speciale de limbaj HTML care vă permit să faceți clic pe mouse pentru a vizualiza un alt document.

Există două moduri de a crea documente hipertext. Puteți utiliza unul dintre editorii HTML WYSIWYG (de exemplu, Microsoft FrontPage etc.), care nu necesită cunoștințe speciale ale structurii interne pentru a lucra cu documentul în curs de creare. Această metodă vă permite să creați documente pentru WWW fără cunoștințe de HTML. Editorii HTML automatizează crearea de documente hipertext și elimină munca de rutină. Cu toate acestea, capacitățile lor sunt limitate, măresc foarte mult dimensiunea fișierului rezultat, iar rezultatul obținut cu ajutorul lor nu satisface întotdeauna așteptările dezvoltatorului. Dar, desigur, această metodă este indispensabilă pentru începătorii în pregătirea documentelor hipertext.

O alternativă este crearea și marcarea unui document folosind un editor de text obișnuit (NotePad). Cu această metodă, comenzile HTML sunt inserate manual în text. Prin crearea documentelor în acest fel, știi exact ce faci.

După cum sa menționat deja, un document HTML conține informații despre caractere. O parte a acestuia este textul în sine, adică datele care formează conținutul documentului. O alta - Etichete(etichete de markup), numite și steaguri de marcare, sunt constructe speciale de limbaj HTML folosite pentru a marca un document și a controla afișarea acestuia. Tag-urile de limbaj HTML sunt cele care determină sub ce formă va fi prezentat textul, care dintre componentele sale vor acționa ca link-uri hipertext și ce obiecte grafice sau multimedia ar trebui incluse în document. Informațiile grafice și audio incluse într-un document HTML sunt stocate în fișiere separate. Vizualizatoarele de documente HTML (browsere) interpretează steaguri de marcare și aranjează textul și graficele pe ecran în consecință. Pentru fișierele care conțin documente HTML, sunt acceptate extensiile .htm sau .html.

Litere mari și literă mică etichetele nu diferă la înregistrare.În cele mai multe cazuri, etichetele sunt folosite în perechi. Perechea constă dintr-o etichetă de deschidere (etichetă de început) și una de închidere (etichetă de final). Sintaxa etichetei de deschidere:

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

Parantezele drepte utilizate în descrierea sintaxei înseamnă că acest element poate lipsi. Numele etichetei de închidere diferă de numele etichetei de deschidere doar prin aceea că este precedat de o bară oblică:

Atributele etichetelor sunt scrise în următorul format:

nume[="valoare"]

Ghilimele când se specifică valoarea argumentului sunt opționale și pot fi omise. Pentru unele atribute, este posibil să nu fie specificată o valoare. Eticheta de închidere nu are atribute.

Acțiunea oricărei etichete asociate începe acolo unde este întâlnită eticheta de deschidere și se termină când este întâlnită eticheta de închidere corespunzătoare. Adesea se numește o pereche formată dintr-o etichetă de deschidere și de închidere recipient, iar partea de text mărginită de etichetele de deschidere și de închidere este element.

Secvența de caractere care alcătuiește textul poate consta din spații, tab-uri, linii noi, întoarceri de cărucior, litere, semne de punctuație, numere și caractere speciale(de exemplu, +, #, $, @), cu exceptia următoarele patru personaje având HTML special sens:< (меньше), >(mai mare decât), & (ampersend) și „ (ghilimele duble). Dacă trebuie să includeți oricare dintre aceste caractere în text, trebuie să îl codificați cu o secvență specială de caractere.