Crearea unei pagini web. Crearea primei pagini web Pagina web este un document html

Scopul lucrării: familiarizarea elevilor cu conceptele de bază ale limbajului HTML, structura unui document HTML, etichete obligatorii, comentarii, metode de formatare a textului, stiluri fizice și logice și dobândirea deprinderilor în crearea de documente web statice simple.

La orele de laborator, vom folosi editorul de text Notepad pentru a pregăti fișiere HTML și browserul Internet Explorer ca instrument de monitorizare a ceea ce s-a făcut.

Informații teoretice

Concepte de bază

Hipertext- o structură informațională care vă permite să stabiliți conexiuni semantice între elementele de text de pe ecranul unui computer, astfel încât să puteți trece cu ușurință de la un element la altul. În practică, în hipertext, unele cuvinte sunt evidențiate prin sublinierea sau colorarea lor într-o culoare diferită (hyperlink-uri). Evidențierea unui cuvânt indică o legătură între acest cuvânt și un document în care subiectul asociat cuvântului evidențiat este discutat mai detaliat. Un document separat, scris în format HTML, se numește:

document HTML;

document web;

Pagină web.

Astfel de pagini sunt de obicei în format NTM sau HTML.

Un grup de pagini Web aparținând unui autor sau unui corp IEDV și interconectate prin hyperlinkuri comune formează o structură numită nod Web sau site Web. Fiecare pagină HTML are propria URL unică - odpec pe internet.

cadru (Cadru) - un termen care are două sensuri. Prima valoare este zona documentului cu propriile bare de defilare. A doua este o imagine 0DNN0H într-un fișier grafic animat (cadru).

Applet (Applet) - un program transferat pe computerul client în formular dosar separatși lansat când vizualizați o pagină Web.

Script (Scenariul) , sau script, este un program inclus într-o pagină Web pentru a-și extinde capacitățile. În anumite situații, browserul Internet Explorer afișează mesajul: „Permiteți executarea scriptului pe pagină?” În acest caz ne referim la scripturi.

CGI (Comun Poarta de acces Interfață) - un nume general pentru programe care, lucrând pe un server, vă permit să extindeți capacitățile paginilor Web. Fără astfel de programe este imposibil să se creeze pagini Web interactive.

Browser (Browser) - un program pentru vizualizarea paginilor Web.

Element- Design limbaj HTML. Vă puteți gândi la el ca la un container care deține date și vă permite să le formatați într-un anumit mod. Orice pagină Web este un set de elemente. Una dintre ideile principale ale hipertextului este posibilitatea de imbricare a elementelor. De exemplu:

Conținutul elementului, datele pe care elementul le formatează

Etichetă(în engleză etichetă - etichetă, descriptor, etichetă) - marcatorul de început sau de sfârșit al unui element. Etichetele definesc limitele acțiunii elementelor și separă elementele unele de altele. În textul unei pagini Web, etichetele sunt incluse între paranteze unghiulare< >, iar eticheta de final este întotdeauna urmată de o bară oblică. Textul nu se află între aceste paranteze (< >), este complet vizibil atunci când este vizualizat într-un browser. De exemplu:

Conținutul elementului, datele care

formatează un element

Acest text va fi amplasat într-un paragraf separat

Orice pagină Web este un set de elemente. Unul dintre principiile de bază ale HTML este capacitatea de a imbrica un element în altul.

Atribut- parametrul sau proprietatea unui element. Atributele sunt situate în interiorul etichetei de început și sunt separate unele de altele prin spații. Dacă cimentul conține text, atunci atributele pot specifica culoarea și dimensiunea fontului, alinierea paragrafelor de text etc. Dacă elementul conține o imagine, atunci atributele pot specifica dimensiunea imaginii, prezența și dimensiunea unui cadru în jurul imaginii etc.

Acest text va fi aliniat la centrul ecranului

Acest exemplu folosește din nou o etichetă care definește începutul și sfârșitul unui paragraf. Cu toate acestea, eticheta de început conține un atribut de aliniere, care setează alinierea textului în centrul ecranului.

Vă rugăm să rețineți:

Orice informatii utile trebuie să fie între etichetele de început și de sfârșit care indică formatul acestuia;

Toate atributele sunt localizate în eticheta de pornire;

Pentru ușurință în utilizare, puteți scrie eticheta de început cu o literă mare (majusculă) (P), iar eticheta de final cu o literă mică (mică) (/p), deși acest lucru nu este necesar;

Nu toate elementele necesită o etichetă de final (închidere);

Începeți să scrieți fiecare element nou pe o linie nouă. Indentați elementele imbricate (filă). Acest lucru din nou nu este necesar, dar vă va ușura mult munca.

HTML (HyperText Markup Language) este un limbaj special pentru formatarea documentelor text (se mai numește și limbaj de marcare a documentelor - WWW document viewer). HTML este un set destul de simplu de comenzi care descriu structura unui document. HTML vă permite să evidențiați părți logice individuale în text (titluri, paragrafe, liste etc.), să plasați o fotografie sau o imagine pregătită separat pe o pagină Web și să organizați legături pe pagină pentru comunicarea cu alte documente.

HTML nu specifică atribute specifice și precise de formatare a documentului, cum ar fi Microsoft Word. Tipul specific de document este determinat în cele din urmă numai de program - browser pe computerul dvs. Necesitatea unei astfel de abordări este asociată cu eterogenitatea hardware-ului și software calculatoare conectate la internet. HTML nu este, de asemenea, un limbaj de programare, dar paginile web pot include programe încorporate - scenariiîn limbaje și programe Javascript și Visual Basic Script - applet-uriîn limbajul Java.

Din punct de vedere utilizator Windows, O pagină Web este pur și simplu un fișier *.htm sau *.html situat pe un server de Internet, în retea locala sau pe hard diskul mașinii dvs.

Amintiți-vă că HTML nu este un limbaj de programare, este destinat doar pentru marcarea documentelor. Aceste. în esenţă creând Pagina HTML, pur și simplu editați text folosind etichete în același mod ca într-un editor de text obișnuit. Fiecare etichetă are proprietățile sale, dar toate sunt incluse între paranteze unghiulare „”, de exemplu, , .

Toate etichetele din HTML sunt împărțite în două tipuri - asociate și neîmperecheate. Etichetele pereche sunt cele a căror etichetă de deschidere necesită o etichetă de închidere. Etichetele de închidere în HTML sunt notate cu o bară oblică și scrise astfel. Etichetele nepereche nu necesită o etichetă de închidere. Un exemplu de astfel de etichete este eticheta break to the next line
. Există, de asemenea, etichete obligatorii, care trebuie folosite pe toate paginile, și etichete opționale, care sunt folosite după cum doriți.

Când descărcați orice document de pe WWW, textul acestuia în fereastra browserului este afișat într-o formă perfect formatată, ușor de vizualizat. Aceasta înseamnă că paginile WEB nu sunt text obișnuit, dar conțin și unele informații auxiliare pentru a controla prezentarea documentului în fereastra browserului dumneavoastră. Deoarece la dezvoltarea unui document nu este clar pe ce tip de computer îl va vizualiza utilizatorul, paginile WEB nu pot fi pregătite și stocate într-un format dezvoltat pentru o anumită platformă de computer, de exemplu, în formatul Microsoft Word pentru Windows XP. Pentru ca un utilizator care lucrează pe orice tip de computer să vadă un document formatat corespunzător, se folosește limbajul HTML dezvoltat special pentru acest scop.

Dacă lucrați cu un browser, atunci selectați comanda de meniu Vizualizare - Vizualizare cod HTML (Vizualizare - Sursă). Pe ecran va apărea o fereastră cu codul inițial al acestei pagini în HTML.

Fie apăsați CTRL+U

Aspectul paginilor WEB de pe Internet se schimbă adesea. Dar pentru noi în acest moment nu este semnificativ.

HTML - HyperText Markup Language este un set destul de comun de comenzi care descriu structura unui document. Acest limbaj de marcare vă permite să evidențiați părți logice individuale dintr-un document - titluri, paragrafe, tabele, liste etc., dar nu specifică atribute de formatare specifice. Un anumit tip de formatare este determinat de browser însuși atunci când citește un document și browserul însuși este cel care oferă cea mai bună afișare document WEB pe ecranul dvs.

După cum sa menționat anterior, puteți crea pagini WEB utilizând programe speciale de editare care generează automat cod HTML, lucru cu care nu necesită cunoștințe de limbaj de marcare. Dar aceste programe sunt adesea limitate în capacități, conțin erori și adesea produc cod HTML prost care nu funcționează pe toate platformele. Prin urmare, dacă doriți să stăpâniți serios designul WEB și să înțelegeți principiile creării documentelor WEB, nu puteți face fără cunoașterea elementelor de bază ale limbajului HTML, mai ales că crearea paginilor WEB pe acesta nu este deloc dificilă. Poate că este chiar mai ușor decât stăpânirea unui program pentru crearea de pagini HTML.

Limbajul HTML există în mai multe variante sau specificații. Ca și versiunile de produse software, specificațiile sunt numerotate: 2.0, 3.0, 3.2, 4.0. Orice specificație ulterioară reprezintă o extensie și o completare față de cea anterioară. Vom folosi cele mai recente constructe de specificații HTML 4.0 care sunt acceptate ultimele versiuni cele mai comune browsere.

Documentul din fereastra de cod HTML este un document text într-un format special. Toate fișierele în acest format au extensia HTML (.html) sau HTM (.htm). Un document HTML combină text simplu cu elemente de marcare incluse între paranteze unghiulare< и >, de exemplu, , , , . Aceste elemente de marcare se numesc etichete. Etichetele pot fi simple, de deschidere și de închidere și constau din părți ulterioare într-o anumită ordine:

• paranteză unghiulară stângă.

Astfel, eticheta de deschidere, care apare la începutul documentului HTML și marchează începutul acestuia, constă din numele HTML și două paranteze unghiulare< >, iar eticheta situată la sfârșitul documentului WEB, pe lângă părțile desemnate, conține și o bară oblică / semn, adică o etichetă de închidere și care indică sfârșitul documentului. Eticheta înseamnă începutul codului programului de script integrat în document. Această etichetă conține, pe lângă numele scriptului, un atribut de limbă cu valoarea „vbscript”, adică scriptul este scris în limbajul vbscript.

Doar caracterele latine pot fi folosite în etichete și orice caractere pot fi folosite în valorile atributelor. Dacă, de exemplu, caracterele chirilice sunt folosite ca valori de atribut, acestea trebuie să fie cuprinse între ghilimele, de exemplu, name="Section 1".

Limbajul HTML nu face distincție între litere mari și mici, așa că etichetele și sunt echivalente. Dar în 2010, consorțiul w3c, care și-a asumat responsabilitatea de a pune lucrurile în ordine în domeniul specificației limbajului HTML, în cea mai recentă versiune sfătuiește fără încetare scrierea etichetelor cu caractere mici și, cu alte cuvinte, condiții semnificative. Prin urmare, în continuare vom folosi etichetele de scriere cu litere mici.

Majoritatea etichetelor sunt împerecheate: eticheta de deschidere este urmată de o etichetă de închidere corespunzătoare, iar între ele conține text sau alte etichete, de exemplu:

Magazin de carte online Three Steps

În astfel de cazuri, două etichete și partea de document închisă între ele formează un bloc numit element HTML. Unele etichete, de exemplu, sunt simple și nu au o etichetă de închidere. Astfel de etichete sunt ele însele elemente HTML.

Majoritatea etichetelor pot avea unul sau mai multe atribute - caracteristici care dau Informații suplimentare despre modul în care browserul ar trebui să gestioneze eticheta curentă. Dar este posibil să nu existe deloc atribute. Un atribut de etichetă constă dintr-un nume, de exemplu, align, un semn egal = și o valoare, care este specificată printr-un șir de caractere, de exemplu, "center": align="center". Valorile atributelor sunt de obicei cuprinse între ghilimele. Dar dacă aceste valori folosesc doar caractere latine, numere și cratime, atunci ghilimelele pot fi omise, de exemplu: align=center. Dar omiterea ghilimelelor nu este strict recomandată din cauza unui număr de circumstanțe legate de viitoarea integrare a HTML cu JavaScript și limbi. Prin urmare, dezvoltați obiceiul de a scrie imediat atributele între ghilimele.

Fiecare document HTML are o structură specifică, care arată astfel:

…

Structura unui document HTML conține următoarele elemente esențiale:

• etichete și , care marchează începutul și sfârșitul documentului;
• antet delimitat de și ;
• corp delimitat de etichete...

Titlul, delimitat de etichetele și, folosește etichetele ... pentru a defini titlul documentului, care ar trebui să sublinieze conținutul acestuia și să conțină de obicei mai puțin de 5-6 cuvinte. Acest titlu este afișat de browsere în bara de titlu a ferestrei de lucru a programului, iar roboții care compilează indecși pentru motoarele de căutare identifică documentul folosind titlul acestuia.

Pe lângă elementul ..., antetul poate conține elemente ..., de exemplu, pentru a indica informații despre document. Eticheta de deschidere include perechi nume=valoare care descriu caracteristicile documentului, de exemplu, tipul documentului, criptarea acestuia, paternitatea, lista de cuvinte cheie și așa mai departe. Aceste date sunt folosite și de motoarele de căutare la indexarea documentelor.

sau - Comentează documentul. Este ignorat de browser. Comentariul este opțional și poate lipsi.
- identificatorul întregului bloc de comenzi HTML. - Identificator antet document HTML. - identificatorul titlului viewportului. - Această etichetă neîmperechetă este utilizată pentru a indica informații detaliate despre document.

Aliniază textul dintr-un paragraf la stânga.

Aliniază textul dintr-un paragraf la dreapta.

Aliniază textul dintr-un paragraf la centru.

Aliniere completă pe ambele margini ale ecranului. align - atribut de aliniere. Să ne uităm la etichetele listei.

Sunt o modalitate de a afișa vizual informații structurate.

. Listele ordonate sunt folosite pentru a afișa operații secvențiale sau algoritmi. Browserul generează automat numere pentru fiecare articol din listă.- identificatorul listei ordonate. La sfârșitul. Listele neordonate sunt folosite pentru a compila liste atunci când ordinea articolelor nu este importantă. Fiecare element va fi precedat de o pictogramă de listă specială (punct).

- identificatorul listei neordonate. La sfârșitul

Elemente individuale

în listele ordonate și neordonate sunt marcate cu o singură etichetă , iar elementele din listele de definiții sunt etichetate pentru termen și pentru sensul termenului. - identificatorul elementului din lista ordonată și neordonată. Etichetă de final poate fi omis. Listele de definiții oferă o formatare specială, asemănătoare unui dicționar, pentru termeni și descrierile asociate acestora.- identificatorul listei de definiții. La sfârșitul. - identificatorul termenului din lista de definiții.

- identificator al sensului termenului din lista de definiții. Listele de definiții arată astfel: nume de termen 1 definiție de termen 1 definiție de alt termen 1 ..... Utilizarea etichetelor de listă este prezentată în Exemplele 4 și 5. Vizualizați un exemplu cu etichete de listă., dar și experiență de programare. Complexitatea și volumul programelor necesare pentru a crea un anumit site depind de mulți factori, cum ar fi structura, scopul, funcționalitatea, fiabilitatea și sistemul de protecție a site-ului împotriva atacurilor informaționale de la informații „lipicioase” (spam, junk) și viruși.

Tehnologia web (tehnologia hipertext) a făcut posibilă legarea întregului set de documente publicate pe Internet în sistem unificat- WWW. Un document hipertext conține hyperlinkuri. Ele sunt de obicei evidențiate cu culoare și subliniere. Hyperlinkurile permit utilizatorului să acceseze imediat documentul solicitat, indiferent de locația sa fizică. Acest lucru simplifică foarte mult căutarea de informații pe Internet.

Utilizarea defalcării hipertext a unui document text în mod modern sisteme informatice Acest lucru se datorează în mare măsură faptului că hipertextul face posibilă crearea unui mecanism de vizualizare neliniară a informațiilor. În astfel de sisteme, datele nu sunt prezentate ca un flux continuu informații text, ci un set de componente interconectate, care pot fi navigate folosind hyperlink-uri.

Dacă vorbim despre crearea documentelor HTML, atunci ne putem imagina două moduri de a le crea.

Primul este să marcați manual un document existent (sau nou creat). În acest caz, autorul sau editorul adaugă etichete de marcare documentului. Această lucrare poate fi realizată într-un editor de text sau Editor HTML având elemente speciale controale pentru a simplifica introducerea etichetelor. În ambele cazuri, munca se desfășoară folosind limbajul HTML, iar persoana care efectuează această lucrare trebuie să cunoască și să poată utiliza acest limbaj.

Principiile unei alte abordări pot fi înțelese prin studierea funcționării procesoarelor de text. Informațiile despre formatarea documentului pot fi considerate, de asemenea, „markup” adăugate documentului formatat. Cu toate acestea, pentru utilizare procesor de text nu este necesară cunoașterea formatului documentului și a „limbajului de marcare”: modificările afișate pe ecran sunt efectuate în mod automat în document. Acest principiu de potrivire a imaginii de pe ecran cu cea reală se numește WYSIWYG (WYSIWYG) (din engleză What You See Is What You Get (voch yu si is voch yu gat) - What you see is what you get).

Acestea vă permit să creați site-uri web întregi (portale) și să le utilizați pe toate tehnologii moderne. Astfel de editori web sunt destul de potriviti pentru profesioniști. Dacă utilizați MS Office, puteți utiliza FrontPage din acest pachet. Există și Netscape Composer ca parte a Netscape Communicator. De asemenea, puteți utiliza o versiune demonstrativă a editorului web Macromedia HomeSite obținând-o de pe site-ul oficial Adobe: www.adobe.com.

Prima metodă vă permite să creați documente mai universale, de calitate superioară și mai diverse. A doua metodă este mai ușor de învățat, deoarece nu necesită cunoștințe de HTML. Cu toate acestea, în acest caz, instrumentele de formatare sunt folosite în locul instrumentelor de descriere, ceea ce poate duce uneori la consecințe nedorite.

Deci, pentru a crea pagini web veți avea nevoie de un editor de text sau web. Trebuie remarcat faptul că toate editorii web conțin în mod necesar un editor de text acum există editori web număr mare, dar trei sunt recunoscute ca fiind cele mai puternice:

1. Macromedia Dreamweaver (macromedia dreamweaver);

2. Allaire HomeSite (aller home site);

3. Microsoft FrontPage (pagina de font Microsoft).

Acestea vă permit să creați site-uri web întregi (portale) și să utilizați toate tehnologiile moderne. Astfel de editori web sunt destul de potriviti pentru profesioniști. Dacă utilizați MS Office, puteți utiliza FrontPage din acest pachet. Există și Netscape Composer ca parte a Netscape Communicator. De asemenea, puteți utiliza o versiune demonstrativă a editorului web Macromedia HomeSite obținând-o de pe site-ul oficial Adobe: www.adobe.com. Folosind un browser, accesați site-ul specificat în secțiunea Descărcări/Descărcări de încercare și selectați Macromedia, HomeSite.

Puteți utiliza versiunea în limba rusă a FrontPage Express din Internet Explorer localizat - aceasta este o versiune scurtată a FrontPage, dar foarte convenabilă pentru început. Editorul web Visual Workshop este cunoscut și în limba rusă (http://www.snkey.net/download/products/index.html).

Serviciile moderne de internet oferă constructori de site-uri web gata făcute. Să le privim folosind exemplul constructorului de site-uri web „Site-ul meu” (www.narod.yandex.ru). Cu ajutorul acestuia puteți obține spațiu pentru site-ul dvs. web ( pagina de start) și în 5 minute creați-vă propriul site cu poze, fotografii etc.

Procesul de proiectare a site-ului web include trei etape:

1. conectați-vă la constructorul site-ului;

2. înregistrare, atribuirea unui nume de site;

3. proiectarea site-ului folosind spații libere.

Pentru a crea un site web creat de om, unic, sunt necesare alte instrumente web.

În plus față de HTML și constructori de site-uri web, puteți utiliza și alte instrumente de programare a paginilor web. Unul dintre instrumentele de programare a site-ului web este CGI (Common Gateway).

Principiul CGI este simplu și natural: un program pe partea de server primește unele date, le procesează și produce un răspuns sub forma unei pagini web. Aceasta este o apariție foarte comună astăzi și, uneori, nici măcar nu bănuiți că aveți de-a face nu cu o pagină obișnuită, ci cu rezultatul unui script CGI (cod). Regiune utilizarea CGI larg și obiectivele variate. Limbajul de programare în care este scris scriptul trebuie să fie flexibil și, în același timp, puternic, deoarece nu numai că se va lucra constant cu fișierele, ci și cu baza de date, sistemul de operare și serverul web. Cele mai potrivite limbaje pentru programarea CGI sunt C (C++) și Perl. Acesta din urmă este cel mai adesea folosit în aceste scopuri datorită simplității, fiabilității și lărgirii capacităților sale.

Limbajul C este considerat pe drept universal și și-a găsit locul în mediul CGI. Utilizarea sa este firească în elementul său nativ - Unix, pe baza căruia în majoritatea cazurilor este construit un site web.

Pentru programarea CGI se foloseste si limbajul C++, care presupune crearea si distrugerea anumitor obiecte implementate prin clase - in esenta tipuri de date definite de utilizator. Este firesc să se creeze, de exemplu, o clasă Guestbook sau DataBaseEntry care să conțină variabilele și funcțiile necesare. Este de remarcat faptul că aproape toate limbajele de programare noi (Java, JavaScript, Perl) conțin constructe care sunt similare cu constructele C sau sunt copiile lor exacte. Prin urmare, este recomandat să studiați mai întâi această limbă fundamentală.

Perl este un limbaj unic. În primul rând, nu are tipuri de date, ceea ce este benefic pentru scrierea de scripturi CGI. În al doilea rând, o mulțime de construcții sunt preluate de la C. Trebuie remarcat faptul că Perl folosește adesea expresii regulate similare cu cele utilizate în scripturile Unix Shell. Există o buclă convenabilă pentru fiecare și frumoși, de fapt, modificatori de expresie. Perl are o bibliotecă standard care include funcții de căutare, lucru cu un server web, grafică etc. De aici putem concluziona că pentru un programator familiarizat cu Unix, nu va fi dificil să învețe Perl. Pentru a scrie un astfel de program, este suficient să poți lucra cu fișiere din Perl și, puțin, cu variabile de mediu server web.

Procesul de creare a documentelor Web este similar cu programarea și este, de asemenea, predispus la erori. Indiferent de modul în care este creat un document, ar trebui să verificați în mod regulat coerența acestuia cu intenția, examinându-l în browsere diferite. Pentru o evaluare artistică a paginii rezultate, ar trebui să căutați o opinie independentă.

Întrebări pentru autocontrol:

1. Ce înseamnă conceptul de document HTML?

2. Care sunt avantajele acestui tip de document?

3. Ce înseamnă conceptul de „etichetă”?

4. Ce tipuri de etichete există?

5. Ce este inclus în obiectele de gestionare a etichetelor?

www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm

http://dvo.sut.ru/libr/ite/i280levc/index.htm Yu.P. Levchuk, E.P. Ohincenko, A.D. Sotnikov, T.A. Fomenko INFORMATICĂ Partea 2 TEHNOLOGIA INTERNET

1. O pagină web (document HTML) este:

a) un fișier text cu extensia .txt sau .doc;

b) fișier text cu extensia .htm sau .html;

c) un fișier binar cu extensia .com sau .exe;

d) fișier grafic cu extensia .gif sau .jpg.

2. Pentru a vizualiza pagini Web pe Internet, sunt utilizate următoarele programe:

a) Microsoft Word sau Word Pad;

b) Microsoft Access sau Microsoft Works;

c) Internet Explorer sau NetScape Navigator;

d) HTMLPad sau Front Page.

3. Eticheta este:

a) o instrucțiune către browser care indică modul în care trebuie afișat textul;

b) text care utilizează caractere speciale;

c) un pointer către un alt fișier sau obiect;

d) un fragment dintr-un program inclus în pagina web.

4. Hipertextul este:

a) textul este foarte dimensiune mare

b) text care folosește o dimensiune mare a fontului