Un limbaj pentru scrierea paginilor web. Crearea de pagini web folosind HTML. Sarcini pentru realizarea independentă

Pentru a implementa funcționalități de diferite tipuri, programatorii web „scriu” site-uri folosind cele adecvate limbaje de marcare web, pentru a maximiza capacitățile interactive ale resursei web. Nu vom pătrunde adânc în jungla terminologiei web, ci doar vă vom ajuta să înțelegeți principalele puncte ale scrierii codului site-ului web care pot apărea în timpul discuției despre proiect și în timpul implementării sale ulterioare.

HTML

HTML este unul dintre cele mai vechi limbaje de programare web, care a apărut în zorii dezvoltării Internetului și s-a impus ca una dintre cele mai simple și mai fiabile metode de programare web. HTML înseamnă Hyper Text Markup Language. Site-urile web create folosind tehnologia HTML sunt în mare parte un set de pagini statice care nu necesită o bază de date.

Tehnologia HTML poate fi potrivită pentru crearea de site-uri mici, ușoare, cu mai multe pagini, a căror funcționalitate nu necesită interactivitate și dinamică.

Ca orice tehnologie, standardul HTML nu stă pe loc, iar astăzi intră în mediul de web design un nou standard numit HTML5. Această tehnologie este foarte tânără, dar oferă oportunități mari în ceea ce privește crearea de site-uri web și vă permite să implementați funcționalități noi, până acum imposibile. Deși tehnologia HTML5 nu a intrat încă pe deplin în domeniul dezvoltării web și nu toate browserele de internet o acceptă încă, programatorii studioului de site iau în considerare influența HTML5 asupra dezvoltării ulterioare a tehnologiilor de internet în viitor și creează site-uri folosind cele mai multe tehnologii web avansate -programare.

PHP

PHP este un limbaj de programare pe partea de server și comunică site-ul cu serverul și baza de date a acestuia. Limbajul PHP în sine nu este responsabil pentru crearea unui site web, iar dacă te uiți la codul de pagină al unei astfel de resurse, vom vedea același HTML, doar intercalate cu cod PHP.

În site-urile PHP, o parte a codului scris în HTML este responsabilă de apariția și afișarea informațiilor, iar PHP, la rândul său, este responsabil pentru dinamica și interactivitatea funcționalității. Datorită simplității, flexibilității și vitezei de operare, limbajul PHP este unul dintre cele mai populare standarde în dezvoltarea web.

În dezvoltarea părții predominante a site-urilor create de studioul site-ului s-a folosit tehnologia PHP, deoarece conectarea unui site la o bază de date folosind cod PHP este o condiție esențială pentru crearea resurselor Internet dinamice, multifuncționale.

FLASH

De fapt, tehnologia în sine culoare nu este un limbaj de programare web, ci este folosit pentru a vizualiza elemente scrise în XML.

Crearea unui site web folosind tehnologia flash este un proces complex și consumator de timp, dar rezultatul merită efortul și banii cheltuiți pentru el. Elementele flash vă permit să vă faceți site-ul web luminos și interactiv. Paginile pline de viață, dinamice, vor lăsa vizitatorilor o impresie de durată a resursei dvs., iar o imagine pozitivă a site-ului dvs. va rămâne în mintea utilizatorilor captivați pentru o lungă perioadă de timp. Imaginea companiei va beneficia doar de utilizarea tehnologiei flash pe resursa sa, deoarece elementele realizate pe flash nu sunt ieftine și sunt considerate de lux.

Dar în orice, după cum se spune, trebuie să știi când să te oprești, iar crearea de site-uri flash nu face excepție. Blocurile flash sunt mult mai grele decât elementele web standard și, prin urmare, durează mai mult pentru încărcare. Și utilizatorilor de rețea, de regulă, nu le place să aștepte. Prin urmare, încredințați crearea site-ului dvs. flash unor profesioniști care îl vor optimiza pentru productivitate maximă.

WAP

WAP (Protocolul de aplicație fără fir) este o tehnologie care vă permite să accesați resursele de Internet direct de pe un dispozitiv mobil.

Principala diferență dintre un site WAP și o resursă obișnuită de internet este că site-ul WAP este „creat” pentru vizualizare pe ecrane mici de telefoane și comunicatoare și, prin urmare, dezvoltarea unui site WAP este supusă unui număr de cerințe și standarde care vizează reducerea greutății portalului WAP a paginii și optimizarea conținutului site-ului special pentru vizualizare în browserul WAP al telefonului.

Site-urile scrise pentru WAP au propriul limbaj de marcare, adaptat special pentru schimbul de informații cu un browser WAP. Și dacă site-urile obișnuite destinate vizionarii de pe computer sunt scrise în mare parte în limbi html, php, Perl, sau xml, apoi standardul WML este folosit pentru a crea site-uri WAP ( Limbajul de marcare fără fir). Printre altele, la dezvoltarea resurselor WAP, se folosește un format de imagine proprietar - WBMP, care face ca pagina WAP să fie cât mai ușoară.

Datorită creșterii constante a pieței de dispozitive mobile, standardele de transfer de date se dezvoltă și între World Wide Web și dispozitivele mobile, astfel că specialiștii site-ului web-studio nu încetează să monitorizeze inovațiile din această industrie a creării site-urilor web și în dezvoltarea dintre site-urile web WAP folosesc întotdeauna cele mai progresive metode și tehnologii avansate.

A.S.P.

A.S.P. (Pagini Active Server) este un mediu deschis de dezvoltare a aplicațiilor web care vă permite să combinați HTML, scripturi și componente de server ActiveX pentru a crea soluții web dinamice și puternice pentru afaceri. Paginile ASP sunt pagini care conțin scripturi executate pe partea serverului.

Perl

Perl (Extragere practică și limbaj de raportare) este un limbaj de programare web universal, interpretat, folosit pentru scrierea scripturilor cgi și a programelor cgi executate pe partea de server și care permite automatizarea funcționării site-ului. Perl este unul dintre cele mai convenabile și răspândite medii pentru crearea de pagini web dinamice, deși recent a fost înlocuit cu tehnologii de internet mai noi. Formatul Perl este o modalitate excelentă de a interacționa cu serverele web prin intermediul CGI ( interfață comună de interacțiune). În prezent, limbajul Perl pierde teren în raport cu analogul său funcțional - PHP.

C+

C, C++- limbaje de programare web utilizate pe scară largă pentru scrierea de scripturi CGI. Acceptat în prezent de majoritatea serverelor. Scripturile scrise în C+ trebuie compilate pe partea serverului.

SSI

SSI (Include partea serverului) - o tehnologie care vă permite să asamblați o pagină web din mai multe scripturi sau fișiere într-un singur întreg funcțional. SSI vă permite să includeți informații de pe partea serverului într-o pagină web care nu este disponibilă prin HTML. În esență, SSI este un fel de analog al include în PHP. Vă permite să implementați elemente comune fiecărei pagini sau unui grup de pagini în codul site-ului, permițându-vă să editați fiecare pagină printr-un singur fișier. Directivele SSI acceptate .shtml, .htmȘi .htmlși sunt scrise în fișierul .htaccess.

Curs „Crearea paginilor Web folosind limbajul HTM L »

Subiectul 1: Noțiuni de bază cu HTML

Scopul limbajului HTML

Web -pagini sunt fișiere speciale scrise în HTML ( Hiper Text Markup Limba – limbaj de marcare hipertext). Sub marcajele se referă la inserarea în text a unor coduri speciale (etichete) care determină modul în care documentul hipertext final ar trebui să fie afișat de un program special - un browser.

Limbajul HTML este destinat creării de fișiere independente de sistem și nu descrie formatul documentului, ci descrie structura acestuia. De exemplu, dacă există un titlu în text, atunci codul HTML indică pur și simplu că fragmentul corespunzător este un titlu. După ce a primit un astfel de cod, programul browser însuși decide ce să facă cu antetul. Poate că îl va afișa într-un font mai mare sau îl va alinia la centrul ecranului. Dacă acest text este redat de un sintetizator de vorbire, sintetizatorul va folosi acest cod pentru a crește volumul și a face pauza necesară.

HTML este un limbaj de calculator, în anumite moduri legat de limbajele de programare. Include reguli destul de stricte care trebuie respectate pentru a obține rezultatele corecte.

Limbajul HTML a apărut simultan cu serviciul World Wide Web și s-a dezvoltat odată cu acesta. Este baza World Wide Web și, în același timp, motivul popularității sale mari.

HTML - dosar

Fișierul HTML este un fișier text cu extensia .htm sau . html Pagina web este stocată ca fișier HTML. Pentru a crea un fișier HTML, pot fi utilizate atât editoare de text simple, cum ar fi Notepad sau Word Pad, cât și editoare Web.

Structura documentului HTML

Un document HTML constă dintr-un document principal și etichete de marcare, care sunt seturi de caractere obișnuite.

Toate documentele HTML au o structură strict definită. Documentul trebuie să înceapă cu o etichetă și să se termine cu o etichetă de închidere corespunzătoare. Această pereche de etichete îi spune browserului că acesta este într-adevăr un document HTML.

Documentul HTML este format din secțiunile de antet și de corp ale documentului, mergand exact in aceasta ordine. Secțiunea de anteturi este inclusă între etichete și și conține informații despre documentul în ansamblu. În special, această secțiune ar trebui să conțină etichete și, între care este plasat titlul „oficial” al documentului.

Textul documentului în sine este localizat în corpul documentului. Corpul documentului este situat între etichete și BODY >. În practică, este posibil să se determine locația acestor etichete principale chiar și în absența lor. Prin urmare, dacă etichetele Și , precum și etichetele lor de închidere corespunzătoare sunt omise, atunci programul browser însuși poate determina locul unde ar fi trebuit să fie localizate. Dar totuși, atunci când creați pagini Web, nu este recomandată omiterea acestor etichete.

Cel mai simplu document HTML valid.

< CAP >

< TITLU >Titlul documentuluiTITLU >

CAP >

< CORP >

CORP >

Etichete HTML

Limbajul HTML constă din indicatori speciali de marcare - etichete. Ele pot fi, de asemenea, numite comenzi, instrucțiuni sau coduri HTML.

O etichetă este o instrucțiune pentru browser care indică modul în care ar trebui să fie afișat textul. Toate etichetele încep cu un simbol mai mic decât (<) и заканчиваются символом «больше» (>). Aceste perechi de simboluri sunt uneori numite paranteze unghiulare. După ce vine unghiul de deschidere cuvânt cheie, definind eticheta.

Fiecare tag din HTML are un scop special. Cazul literelor din numele etichetelor nu contează - puteți folosi fie litere mici, fie litere mari, deși este obișnuit să folosiți litere mari pentru a distinge etichetele de textul normal al documentului.

Există două tipuri de etichete – asociate și neîmperecheate.

Etichete pereche– deschidere și închidere, asemănătoare parantezelor dintr-o expresie algebrică. Acestea afectează textul din punctul în care sunt utilizate până în punctul în care este indicată terminarea lor (etichetele de închidere încep cu o bară oblică (/).

De exemplu, < HTML > HTML >, < P>P>, H 3 >

Etichetele nepereche au un efect unic acolo unde apar, deci nu este nevoie de o etichetă de închidere.

De exemplu,
, ,

Etichetă transportă informații de serviciu despre site-ul Web și nu sunt afișate pe ecranul browserului: acestea sunt informații despre codificarea paginii Web, despre autor, precum și un set de cuvinte cheie de căutare care afișează conținutul site-ului.

Exemplu.

Exemplu de creare a unui tabel

Din exemplu, este clar că pagina folosește codificarea W indows-1251 - cea mai comună astăzi, trebuie doar să inserați această etichetă în acest formular pe pagina dvs. de fiecare dată; autorul paginii – Ivanov Ivan; Această pagină este dedicată animalelor.

Când un document este afișat într-un browser, etichetele în sine nu sunt afișate, dar afectează modul în care este afișat documentul. Dacă din greșeală o etichetă conține un cuvânt cheie care nu se găsește în HTML, eticheta este ignorată în întregime.

Atributele etichetei

Deschiderea etichetelor poate conține adesea atribute care afectează efectul creat de etichetă.

Atributele sunt cuvinte cheie suplimentare separate de cuvântul cheie etichetă și între ele prin spații.

Atributele pot avea valori scrise după semnul egal (=). Este întotdeauna o idee bună să includeți valoarea atributului între ghilimele (single sau duble). Un șir între ghilimele nu trebuie să conțină aceleași ghilimele în sine. Puteți omite ghilimele pentru valorile atributelor care constau numai din următoarele caractere:

caractere ale alfabetului englez;

perioade de timp;
cratime (-).

De asemenea, puteți omite ghilimelele pentru valorile atributelor care constau doar din următoarele caractere (consultați conceptul tehnic ):

caractere ale alfabetului englez ( A-Z, a-z)

cifre ( 0 - 9 )

perioade de timp

cratime ( - )

Prin urmare, LĂȚime=80Și ALIGN=CENTRU- abrevierea permisă pentru WIDTH="80"Și ALIGN="CENTER".
Etichetele de închidere nu conțin atribute.

Exemple. FONT >

Comentarii

Așa cum toate limbajele de programare au capacitatea de a adăuga comentarii (linii de text care nu fac parte din program) într-un program, la fel și HTML. Comentariul începe cu o etichetă specială. Un comentariu poate include orice caracter, cu excepția caracterului mai mare decât (>) și, prin urmare, nu poate include etichete.

Principiul moștenirii etichetelor

Etichete pentru containere.
Știm deja că etichetele constau în cea mai mare parte din două părți - deschiderea (conținând și atribute) și închiderea, adică „sfârșitul” etichetei. Parametrii specificați în etichetă sunt validi doar între începutul și sfârșitul acesteia, adică numai în interiorul etichetei:

<начало 2-го тега>

text text text text text text text text text text text text text text text

<начало 3-го тега>
text text text text text text text text text text text text text text text

<Конец 3-го тега>

<Конец 2-го тега>

<Конец 1-го тега>

Indentările de pe marginea stângă nu sunt aleatorii - sunt setate automat de programe care generează cod HTML pentru a fi mai ușor de citit. Este suficient să înțelegeți că, cu cât o etichetă este mai departe de marginea stângă, cu atât este mai „profundă”, cu atât este mai mare numărul de etichete „senior” care pot acționa asupra ei.

De asemenea, trebuie remarcat faptul că unele atribute ale etichetelor imbricate pot afecta și etichetele de nivel superior, „senior”. De exemplu, acest lucru este tipic pentru tabele imbricate unul în celălalt.
Dacă dimensiunea tabelului intern este setată la 100, atunci masa externă nu poate avea o dimensiune mai mică de 100 pixeli + grosimea cadrului. Astfel, tabelul imbricat pare să îl „extinde” pe cel în care este imbricat. Mai mult, chiar dacă nu are o dimensiune specificată, iar cantitatea de text din el este semnificativă, va extinde tabelul „mai vechi” la dimensiunea necesară pentru a afișa numărul corespunzător de linii de text. Acest lucru se numește „feedback”.

Lucrarea practică nr. 1

„Crearea celor mai simple Web -pagini"

Ţintă:învață să creezi pagini Web în editorul de text Notepad.

Instrucțiuni pentru implementare

Introduceți mai jos structura documentului HTML:

Despre frații noștri mai mici.

Conținutul paginii web va fi postat aici

Salvați fișierul și denumiți-l index.htm.

Deschideți fișierul creat. Veți vedea cum arată fișierul pe care l-ați creat în fereastra browserului.

Închideți browserul.

Reveniți la fișierul salvat în Notepad.

Faceți următoarele modificări: în loc de cuvintele „Conținutul paginii web va fi postat aici”, introduceți următoarele: Aceasta este prima mea pagină .

În linie < TITLU> indicați: „Pagină de pornire (numele și prenumele dumneavoastră).”

Salvați fișierul ca pagina 2.htm.

Vizualizați rezultatul într-un browser și, dacă este necesar, editați fișierul folosind Notepad.

Subiectul 2: Etichete HTML

Etichete fizice și logice de formatare a textului

Formatarea fontului . Există un număr mare de elemente pentru formatarea textului. Puteți formata textul folosind elemente tradiționale: evidențiați fragmentele cu caractere cursive, aldine, selectați un font, dimensiunea și culoarea fontului, aliniați fragmentele de text. Dacă autorului îi lipsesc opțiuni simple pentru formatarea textului, el poate recurge la foi de stil, care extind semnificativ capacitățile de formatare ale limbajului HTML.

Să aruncăm o privire mai atentă la elementele standard ale limbajului HTML care vă permit să formatați textul.

Font- Acestea sunt tabele pentru înlocuirea codului cu o imagine vizibilă.
Fiecare tastă de pe tastatură oferă un cod specific care este recunoscut de sistemul de operare (sistem de operare, în majoritatea cazurilor acesta este Windows sau Linux/Unix).
Astfel, după selectarea unui anumit font, sistemul înlocuiește codul primit de la tastatură cu imaginea unei litere sau pictograme potrivite în tabelul cu caractere de font. Fiecare font este un fișier. Un fișier care conține imagini ale literelor, numerelor și simbolurilor atribuite fiecărui buton. Instalarea unui font înseamnă includerea unui fișier cu tabele de mapare suplimentare în sistem. Sistemele MS Windows folosesc de obicei mai multe fonturi furnizate cu sistemul - acestea sunt:

Arial

curier nou

Comic Sans

Times New Roman

Verdana

Fiecare dintre aceste fonturi este potrivit în designul și stilul său. Cel mai frecvent este Arial. 90% dintre toți vizitatorii paginii dvs. viitoare au toate aceste fonturi. Fiecare font este un fișier independent în folderul Windows/fonts/ *.ttf. Cum să dai unui font un aspect sau altul în HTML?
< FONT >… FONT > definirea tipului, mărimii și culorii fontului. Toate aceste caracteristici sunt definite folosind atributele corespunzătoare.

Mărimea absolută a fontului este specificată de atribut size (mărimea). Acest atribut poate lua valori de la 1 la 7, cu dimensiunea fontului 1 fiind cea mai mică și dimensiunea fontului 7 fiind cea mai mare.
Exemple.

dimensiunea textului 1
dimensiunea textului 2
dimensiunea textului 3
dimensiunea textului 4
dimensiunea textului 5

dimensiunea textului 6
dimensiunea textului 7

Daca conduci mai linistit, vei merge mai departe ONT >.
Primele patru dimensiuni sunt de obicei folosite în design. Orice mai sus este de prost gust și semn de amatorism, pentru că ocupă prea mult spațiu și este greu de citit. Adevărat, există aplicații și pentru dimensiuni mai mari. De exemplu, în dimensiunea a șaptea puteți scrie o literă (prima literă a începutului unui capitol): Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text .
Printre altele, putem alege fontul în sine folosit pentru afișarea textului. Acest lucru este realizat de atribut chip (vedere).

Exemple.Acesta este un font arial cu dimensiunea 3 ONT >
text FONT >
După cum vedem, uh Aceste două atribute - dimensiunea și tipul fontului - pot fi plasate în orice ordine în etichetă :
Puteți utiliza, de asemenea, atributul culoare (culoare). Numele culorii este specificat fie printr-un număr scris în hexazecimal, de exemplu, color="#ff 0000", fie pur și simplu prin numele său scris în engleză, de exemplu, color="red". Exemple. Acesta este un font albastru FONT >
Acesta este un font arial de dimensiune 3, culoare albastru FONT >
Fontul poate fi, de asemenea: cursiv (cursiv), aldine, subliniat, barat, superscript, indice sau o combinație a mai multor dintre aceste tipuri. Acest lucru se realizează, respectiv, cu etichete:
< eu > texteu >
< B >textB >
< U > textU >
< S > text S >
< CINA > text CINA >
< SUB > text SUB >,
precum și combinația lor, de exemplu, <U > text U>B >
Formatarea paragrafelor. În majoritatea documentelor convenționale, principalele secțiuni funcționale sunt anteteȘi paragrafe. Documentele web nu fac excepție. Pentru a desemna paragrafe obișnuite în HTML, se folosește eticheta

…P > (Paragraf). Mai mult, puteți folosi doar eticheta de pornire, de la următorul element

indică nu numai începutul următorului paragraf, ci și sfârșitul celui precedent. În cazurile în care este necesar să indicați sfârșitul unui paragraf, puteți utiliza și o etichetă de final.
Împreună cu eticheta de paragraf, puteți utiliza și atributul alinia:
align =”left” – aliniere la stânga;
align =”dreapta” - aliniere la dreapta;
align =”center” - aliniere la centru.
Exemplu.

Capitolul 1P >

AnimațieP >

pagina 3P >

HTML nu are nicio modalitate de a crea o indentație de paragraf („linie roșie”), astfel încât browserul introduce de obicei o linie goală între paragrafe pentru a face textul lizibil. Dacă trebuie să treceți la o nouă linie fără a crea un paragraf, utilizați o singură etichetă
. Acolo unde este plasat, linia se termină, iar textul rămas este tipărit pe o nouă linie. Această etichetă este convenabilă de utilizat, de exemplu, pentru a scrie poezii într-o coloană:
A aruncat ursulețul pe podea
Au smuls laba ursului
tot nu-l voi părăsi,
Pentru că e bun.
Pe ecranul browserului vom vedea un catren scris în modul standard.

Un mijloc important de a crea separatori în text sunt dungi orizontale-rigle, care separă vizual diferite părți ale documentului unele de altele. O riglă orizontală este creată cu o singură etichetă.. Cu ajutorul ei, este foarte convenabil să împărțiți pagina în părți. Un număr de atribute sunt permise într-o etichetă:

Aliniere

aliniere = „stânga”

aliniere = „centru”

aliniere = „dreapta”

aliniază = „justifică”

Grosimea și lungimea liniei în pixeli.

Dimensiune = 3 (lățimea în pixeli)

lățime= 300 (lungime în pixeli)

lățime= 100% (lungime în procente)

Culoarea liniei

culoare = „roșu”

HTML acceptă șase niveluri de titluri interne ale documentelor. Sunt etichetate cu

…

inainte de

…

.
Titlul de la primul nivel este cel mai mare, iar cel de al șaselea nivel este cel mai mic. Pentru titluri, puteți utiliza atribute de aliniere stânga, centru, dreapta.
Exemplu.Cel mai mare titlu
Cel mai mic antet

Animale de companie

Formatarea logica a textului . În această secțiune, ne vom uita la etichetele care, în efectul lor, sunt foarte asemănătoare cu etichetele care stabilesc dimensiunea, culoarea și stilul fontului. Cu toate acestea, diferența fundamentală este că aceste etichete descriu de fapt proprietățile reale ale textului. Aceasta înseamnă că textul poate apărea diferit în diferite browsere, dar un anumit efect este garantat chiar dacă din anumite motive nu este posibil să se aplice efecte de font. Toate aceste etichete sunt asociate și afectează textul cuprins între etichetele de deschidere și de închidere. Eticheta de închidere este necesară.
Etichetă … folosit pentru citate, titluri de cărți. De obicei afișat cu caractere cursive.
Deoarece limbajul HTML a fost creat de oameni de calculator, un întreg grup de etichete este conceput pentru a reprezenta textul programelor de calculator și rezultatele interacțiunii utilizatorului cu acestea.
Etichetă < COD >… COD > indică textul sursă al unui program de calculator, afișat de obicei într-un font monospațial (cel mai adesea font Courier), adică un font cu dimensiune fixă.
Etichetă < KBD >… KBD > formatează textul care trebuie (sau a fost) introdus utilizând tastatura, de obicei afișat cu caractere aldine cu un singur spațiu. Din engleză tastatură - tastatură
Exemplu.

Pentru a porni Windows, tastați: victorie.
Cod:
Pentru a porni Windows, tastați: win
Etichetă … marchează textul ca exemplu. Folosit pentru a marca textul ieșit de programe. Afișat cu font monospațiu.
Exemplu.
Acesta este un text normal
Etichetă … folosit pentru a evidenția variabile într-o listă de programe. De obicei, acest text este afișat cu caractere cursive. Din engleza var iabil – variabil.
Exemplu.
A, B, C
Cod:
A , B , C var >

Etichetă < E.M. >… E.M. > folosit pentru a evidenția elemente de text (de obicei cu caractere cursive).
Etichetă < PUTERNIC >… PUTERNIC > folosit pentru a evidenția elementele textului mai puternic (în aldine).
Exemplu.
Acesta este un text normal
Și acesta este textul care folosește eticheta .
Deoarece aici se folosește accentul semantic în loc de design, se recomandă utilizarea acestor etichete în loc de etichete Și< B >.

Lucrarea practică nr. 2

“Formatarea textului pe o pagină Web”

Ţintă: aflați cum să formatați fontul și textul pe o pagină Web.

Instrucțiuni pentru implementare

În element< TITLU> indicați numele paginii „P/r Nr. 2”.

Formatați următorul text conform instrucțiunilor (date cu caractere cursive în paranteze), așa cum se arată.

Animale de companie

(titluH 1)

(alinierea la centru)

Câini

(titluH 2)

(alinierea la centru)

Santinele

(aliniere la stânga, bold)

Vânătoare

(aliniat la dreapta, aldine)

Instruire

(alinierea la centru, cursiv aldine)

Locurile de expoziții ale cluburilor

(alinierea la centru, dimensiunea fontului 10, culoarea fontului roșu, fontArial )

Poem

(culoarea fontului albastru, dimensiunea fontului 6, alinierea la centru)

Sunt modest în viață

Nu este nevoie de ovații

Dar ce tare sunt

Mă uit la coajă!

(aliniere la stânga, dimensiunea fontului 6)

Crearea listelor

Liste cu marcatori. O listă diferă de textul obișnuit prin aceea că utilizatorul nu trebuie să se gândească la numerotarea articolelor sale: programul își asumă această sarcină. Dacă lista este completată cu articole noi sau scurtată, numerotarea este ajustată automat. În cazul listelor nenumerotate, programul plasează markeri în fața fiecărui articol: cercuri, dreptunghiuri, romburi sau alte imagini. Ca rezultat, lista capătă o formă lizibilă.

Etichete de creare a listei neordonate:

< LI > UL >
Etichetă

este un fel de cadru pentru listă. Vă permite să separați o listă de alta. Etichetă
reprezintă fiecare articol.
Exemplu.
Vizualizare ecran:
Etichete pentru crearea unei liste numerotate: < O L>< LI > OL >

Liste numerotate. Structura unei liste numerotate este similară cu cea a unei liste nenumerotate. Eticheta este folosită doar pentru încadrare
1. . Fiecare articol este numerotat cu cifre arabe sau romane și litere din alfabetul latin.
Exemplu.

Orez. 6.26. Șablon de pagină web „Computer”

Pagina Web creată trebuie salvată ca fișier sub numele index.htm. De asemenea, puteți utiliza html ca extensie de fișier a unei pagini Web. Se recomandă crearea unui folder special pentru găzduirea site-ului și salvarea tuturor fișierelor site-ului în curs de dezvoltare în acest folder.

Este necesar să se facă distincția între numele fișierului index.htm, sub care pagina Web este stocată în sistemul de fișiere, și numele paginii Web (de exemplu, „Computer”), care este afișat în linia de sus a ferestrei browserului. Numele unei pagini Web trebuie să se potrivească cu conținutul acesteia, deoarece acesta este analizat în primul rând de motoarele de căutare.

Întrebări de control

1. Ce etichete (containere) trebuie să fie prezente într-un document HTML? Care este structura logică a unei pagini Web?

6.10. Sarcina practică. Creați o pagină web goală „Computer” și vizualizați-o într-un browser.

Formatarea textului pe o pagină Web

Până acum pagina noastră nu arată foarte atractiv: font mic negru pe fundal alb. Folosind etichete, puteți seta diferiți parametri de formatare a textului.

Titluri. Dimensiunile fontului titlurilor sunt setate în perechi de etichete de la<Н1>(cel mai mare) până la<Н6>(cel mai mic).

Font. Unele etichete au atribute, care sunt nume de proprietăți care pot lua anumite valori. Folosind eticheta FONT și atributele acesteia, puteți seta opțiunile de formatare a fontului. Atributul FACE vă permite să setați fontul (de exemplu, FACE="Arial"), atributul SIZE - dimensiunea fontului (de exemplu, SIZE=4).

Atributul COLOR vă permite să setați culoarea fontului (de exemplu, C0L0R="albastru"). Valoarea atributului COLOR poate fi specificată fie prin numele culorii (de exemplu, „roșu”, „verde”, „albastru”, etc.) fie prin valoarea sa hexazecimală.

Reprezentarea hexazecimală a culorii folosește formatul RGB „#RRGGBB”, unde primele două cifre hexazecimale specifică intensitatea roșului (roșu), următoarele două - intensitatea verde (verde) și ultimele două - intensitatea albastrului ( albastru). Intensitatea minimă a culorii este specificată de numărul hexazecimal 00, iar cea maximă de FF. De exemplu, culoarea albastră este setată la „#0000FF”.

Alinierea textului. Atributul ALIGN vă permite să setați metoda de aliniere a textului. Alinierea la stânga este setată după cum urmează: ALlGN="stânga", alinierea la dreapta: ALIGN="dreapta", alinierea la centru: ALIGN="centru".

Astfel, culoarea albastră a unui titlu aliniat la centru poate fi setată după cum urmează:

<Н1 ALIGN="center">Computer și software

Linie orizontală. Este recomandabil să separați titlurile de restul conținutului paginii prin linii orizontale folosind o singură etichetă

Paragrafe.Împărțirea textului în paragrafe se face folosind un container<Р>. Când sunt vizualizate într-un browser, paragrafele sunt separate prin spațiere. Pentru fiecare paragraf, puteți seta un anumit tip de aliniere și opțiuni de formatare a fontului.

Pagina de pornire a site-ului. Pagina de pornire a unui site conține de obicei text care descrie pe scurt conținutul acestuia. Să plasăm text pe pagina de pornire a site-ului „Computer”, împărțit în paragrafe cu aliniamente diferite:

<Р ALIGN="left">Pe acest site puteți obține diverse informații despre computer, software-ul acestuia și prețurile componentelor computerului.
<Р ALIGN= "right">Un dicționar de terminologie vă va introduce în termeni informatici și veți putea, de asemenea, să completați un chestionar.

Astfel, pagina de start a site-ului Computer va conține un titlu albastru mare, centrat, separat printr-o linie orizontală de două paragrafe aliniate diferit (Figura 6.27):

<Н1 ALIGN="center">
Computer și software

<Р ALIGN="left">Pe acest site...
<Р ALIGN ="right">Dicționar terminologic
...

Orez. 6.27. Pagina web a computerului cu text formatat

Întrebări de control

1. Ce etichete (containere) sunt folosite pentru a introduce titluri? Formatarea fontului? Introduceți paragrafe?

Sarcini pentru realizarea independentă

6.11. Sarcina practică. Creați o pagină Web pentru computer cu text formatat și vizualizați-o într-un browser.

Inserarea imaginilor în pagini web

Puteți plasa imagini pe pagini Web stocate în fișiere grafice de trei formate - GIF, JPEG și PNG.

Inserarea imaginilor. O etichetă este folosită pentru a insera o imagine cu un atribut SRC care indică locul în care fișierul este stocat pe computerul local sau pe Internet. Dacă fișierul grafic se află pe computerul local în același folder cu fișierul paginii Web, atunci este suficient să specificați doar numele fișierului ca valoare a atributului SRC. De exemplu:

Dacă fișierul se află într-un alt folder de pe acest computer local, atunci valoarea atributului trebuie să fie numele complet al fișierului, inclusiv calea către acesta în sistemul de fișiere ierarhic. De exemplu:

Dacă fișierul se află pe un server la distanță de pe Internet, atunci trebuie specificată adresa de Internet a acestui fișier. De exemplu:

Poziția imaginii față de text. Atributul ALIGN vă permite să poziționați imaginea în raport cu textul în moduri diferite, care pot lua cinci valori diferite: SUS (sus), MEDIU (mijloc), JOS (jos), STÂNGA (stânga) și DREAPTA (dreapta).

Este logic să plasați o imagine a unui computer pe pagina de start a site-ului Computer. Pentru ca imaginea să fie poziționată pe marginea dreaptă a textului, eticheta de inserare a imaginii trebuie să aibă următoarea formă (Fig. 6.28):

Orez. 6.28. Inserarea unei imagini într-o pagină web a computerului

Introduceți text alternativ. Utilizatorii uneori, pentru a economisi timp, dezactivează încărcarea imaginilor grafice în browser și citesc doar texte. Pentru a vă asigura că sensul paginii nu se pierde, în locul imaginii ar trebui să fie afișat text alternativ.

Textul alternativ este afișat folosind atributul ALT, a cărui valoare este text care explică ceea ce ar trebui să vadă utilizatorul în imagine:

Întrebări de control

1. Ce etichetă și atributele sale sunt folosite pentru a insera imagini în paginile Web?

Sarcini pentru realizarea independentă

6.12. Sarcina practică. Inserați o imagine în pagina web Computer și vizualizați-o într-un browser.

Hyperlink-uri pe paginile Web

Dacă pagina Web încărcată în browser se află pe computerul local în același folder, atunci în loc de adresă, indicați pur și simplu numele fișierului, de exemplu:

Dacă pagina Web încărcată în browser se află pe Internet, atunci adresa de Internet este indicată ca adresă, de exemplu:

<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Index de legături

Vedem indicatorul de link atunci când vizualizam o pagină Web într-un browser. Indicatorul de link poate fi text, de obicei albastru și subliniat, sau o imagine cu chenar. Când indicați spre el cu mouse-ul, cursorul său se transformă într-o pictogramă „mână”. Făcând clic pe indicator, veți ajunge la pagina Web specificată în hyperlink.

pentru a vizualiza imaginea în browser:
<А HREF="picture.jpg">Imagine
pentru a lansa playerul încorporat în browser și pentru a reda fișierul de sunet:
<А HREF="sound.wav">Sunet
pentru a salva un fișier pe computerul local folosind managerul de descărcare de fișiere încorporat în browser:
<А HREF="Apxив.ziр">Descărcare fișier

Panoul de navigare a site-ului. Să creăm un folder de site „Computer” și să adăugăm pagini goale „Programe”, „Dicționar”, „Accesorii” și „Chestionar” pe site. Să le salvăm în fișierele numite software.htm, glossary.htm, hardware.htm și anketa.htm în folderul site-ului. Aceste pagini „albe” ar trebui să aibă titluri, dar este posibil să nu aibă încă conținut:

<ТITLЕ>Titlul paginii

Pe pagina de start a site-ului vom plasa hyperlink-uri către fiecare pagină a site-ului. Cel mai convenabil este să selectați numele paginilor către care se face tranziția ca indici de hyperlink.

Plasați indicatorii de hyperlink în partea de jos a paginii într-un nou paragraf pe o singură linie, separându-i cu spații ( ). Această aranjare a hyperlinkurilor este adesea numită bară de navigare.

Să inserăm codul HTML în pagina de pornire a site-ului care creează bara de navigare:

<Р ALIGN="center">
[<А HREF="software . htm">Programe]
[Dicționar]
[Accesorii]
[Chestionar]

Hyperlink către adresa de e-mail. Este utilă crearea unui link pe pagina de start a site-ului către o adresă de e-mail prin care vizitatorii pot contacta administrația site-ului. Pentru a face acest lucru, trebuie să atribuiți o adresă de e-mail atributului de legătură HREF și să o introduceți în container

, care specifică stilul de paragraf utilizat pentru a indica adresa:

<А HREF="mailto:[email protected]">E-mail:
[email protected]

Acum, când faceți clic pe linkul la adresa de e-mail, se va deschide Outlook Express (sau programul dvs. implicit de e-mail), unde se află în linie La care se va indica adresa specificată în link.

Deci, pagina de start creată pentru site-ul Web Computer conține un titlu, o imagine a unui computer, două paragrafe de text, o bară de navigare și un link către o adresă de e-mail (Figura 6.29).

Orez. 6.29. Pagina de pornire gata pentru site-ul web „Computer”.

Întrebări de control

1. Ce etichetă și atributele sale sunt folosite pentru a crea hyperlinkuri?

Sarcini pentru realizarea independentă

6.13. Sarcina practică. Creați o pagină Web „Computer” care conține un panou de hyperlinkuri către alte pagini de pe site și vizualizați-o într-un browser.

Liste pe paginile Web

Destul de des, atunci când plasați text pe pagini Web, este convenabil să utilizați liste în diferite opțiuni:

liste numerotate, unde articolele din listă sunt identificate prin numere;

liste cu marcatori, atunci când elementele listei sunt identificate folosind caractere speciale (marcatori);

liste de definiții, permițându-vă să compilați liste de definiții în așa-numita formă de dicționar.

De asemenea, este posibil să se creeze liste imbricate, iar lista imbricată poate diferi ca tip de cea principală.

Liste numerotate. Lista numerotată se află în interiorul containerului

Liste cu marcatori. O listă cu marcatori se află în interiorul unui container, iar fiecare element al listei este identificat printr-o etichetă< LI >. Folosind atributul TYPE al etichetei

Pe pagina web „Programe” vom plasa o listă numerotată care conține o listă a principalelor tipuri de software de calculator.

Introduceți o listă cu marcatori imbricată în al doilea element al listei numerotate principale (Fig. 6.30).

Lista definițiilor. Lista definițiilor se află în interiorul containerului

și definiții care urmează etichetelor unice

Vom prezenta pagina web „Dicționar” sub forma unui dicționar de termeni informatici (Fig. 6.31):

CPU

Dispozitivul central al unui computer care procesează informații în cod binar.
RAM

Un dispozitiv care stochează programe și date.

Întrebări de control

1. Ce etichete sunt folosite pentru a crea liste numerotate? Liste cu marcatori?

Sarcini pentru realizarea independentă

6.14. Sarcina practică. Creați o pagină Web de programe cu o listă numerotată și o listă cu marcatori imbricată.

6.15. Sarcina practică. Creați o pagină web Dicționar cu o listă de termeni.