Crearea unei pagini web simple
În această secțiune, ilustrăm pe un exemplu concret cum să scriem o pagină web simplă în limba de programare HTML.
Etapa inițială de creare a unei pagini web simple
Ce am făcut acum poate fi numit marcajul preliminar al celei mai simple pagini web. Până în prezent, pagina noastră nu conține nicio informație și dacă o salvați în această formă, atunci când o deschideți în fereastra browserului de Internet, această fereastră va fi goală.
Și textul pe care l-am introdus este trei perechi de etichete de documente HTML. Rețineți că majoritatea etichetelor HTML sunt utilizate în perechi: prima etichetă este denumită etichetă de deschidere, iar a doua etichetă este numită eticheta de închidere. Toate etichetele de închidere au o bifurcă la început (de exemplu, în figura 2.3, etichetele de închidere sunt.) Și.
Etichete și sunt concepute pentru a identifica documentul HTML. Eticheta de deschidere a acestei perechi se află întotdeauna la începutul codului programului, iar eticheta de închidere se află la sfârșitul codului. Cu alte cuvinte, eticheta pornește codul de program al paginii și se termină cu eticheta.
ATENȚIE Pereche de etichete și este un atribut necesar pentru orice document HTML.
Utilizând o pereche de etichete, numele paginii web este identificat. Cu alte cuvinte, tot textul introdus între aceste etichete va fi ulterior afișat în bara de titlu a browserului de Internet.
Salvați datele introduse într-un fișier cu o extensie (presupunem că fișierul nostru va fi sunat). Pentru aceasta, executați comanda meniului principal (această comandă este de asemenea apelată prin apăsarea unei combinații de taste), apoi în fereastra deschisă specificăm calea de salvare și numele fișierului.
Acum, adăugați codul documentului nostru HTML, adăugând titlul paginii web și textul principal între etichetele corespunzătoare. Să sunăm pagina noastră. și ca textul principal pe care îl introducem (Figura 2.4).
Adăugarea unei pagini antet și a textului corpului în cod
Salvați acum modificările efectuate utilizând comanda din meniul principal sau apăsând combinația de taste. Apoi deschideți pagina noastră în fereastra browserului. Dacă totul se face corect, ar trebui să arate așa cum este arătat în Fig. 2.5.
Pagina de testare din fereastra browserului de Internet
După cum puteți vedea în figură, titlul paginii care apare în partea de sus a ferestrei browserului de Internet și textul său principal corespund complet codului programului. Vă puteți felicita pentru aceasta: tocmai ați creat cea mai simplă pagină Web.
Acum vom finaliza pagina noastră web pentru a oferi o imagine mai ergonomică. Mai întâi, folosind etichetele și. vom scrie titlul textului pe pagină. Pentru a face acest lucru, vom completa codul programului așa cum se arată în Fig. 2.6.
Adăugarea titlului textului la codul programului
Acordați atenție - etichetele și textul dintre ele sunt amplasate în interiorul etichetelor și. precum și înaintea textului principal.
Acum, să facem să apară cuvântul în italică, iar cuvintele să fie boldate. În acest scop, perechile de etichete sunt atribuite, respectiv, și. Ca urmare a efectuării adăugărilor necesare, codul sursă al paginii noastre web ar trebui să arate așa cum este prezentat în Fig. 2.7.
Adăugați italic și îndrăzneț
Acum modificați culoarea de fundal a paginii. Pentru a face acest lucru, aplicăm atributul de etichetă. Rețineți că acest atribut este opțional: dacă nu este utilizat, culoarea de fundal implicită va fi albă (după cum am putut vedea deja). Să facem ca culoarea de fundal a paginii noastre să fie galbenă, adăugând codul de program așa cum este arătat în Fig. 2.8.
Modificați culoarea de fundal a unei pagini Web
Dacă doriți, putem schimba culoarea fontului, făcând-o, de exemplu, albastră. Pentru a face acest lucru, din nou, vom modifica ușor codul nostru de program utilizând atributul etichetei pentru aceasta. Acest atribut nu este, de asemenea, obligatoriu: în cazul în care nu este utilizat, culoarea implicită a fontului va fi neagră (în acest caz am putea fi deja siguri).
Pentru ca culoarea fontului să devină albastră, codul pentru pagina noastră web ar trebui să arate ca cel prezentat în Fig. 2.9.
Modificați culoarea fontului unei pagini Web
Acum salvăm toate modificările făcute și deschidem pagina noastră web în fereastra browserului. Rezultatul acțiunilor efectuate este prezentat în Fig. 2.10.
Pagină web după modificările efectuate
După cum puteți vedea în figură, în conformitate cu modificările din codul de program, cuvântul este scris în caractere cursive, cuvântul - cu caractere aldine, iar deasupra textului principal a apărut un titlu. În plus, culoarea de fundal a fundalului paginii și culoarea fontului pe care textul se afișează sunt modificate.
Pagina care trebuie deschisă prin referință
Se va apela fișierul acestei pagini în exemplul nostru. Aici nu includem codul sursă, deoarece cunoștințele existente sunt deja destul de suficiente pentru a le crea fără a fi necesare instrucțiuni. Această pagină trebuie deschisă după ce adăugăm un hyperlink la pagina pe care tocmai am experimentat-o (a se vedea Figura 2.10).
Vom pune ambele fișiere (și) într-un singur director. Pentru a crea un hyperlink către o pagină. schimbați codul paginii așa cum se arată în Fig. 2.12.
Pe parcurs, vom cunoaște o altă etichetă HTML. O caracteristică caracteristică a acestei etichete este că nu este utilizată individual, ci individual. Cu alte cuvinte, nu există nici o etichetă de deschidere și închidere, este una. Această etichetă este destinată introducerii unei rupturi de linie (din cuvântul englez "break"). După această etichetă, textul va continua de pe noua linie.
În acest exemplu, am adăugat o nouă linie la codul paginii, astfel încât după cuvânt se introduce o etichetă.
În ceea ce privește legătura, se formează într-o nouă linie de text. Iată codul:
Apoi urmează cuvântul textului, care, de fapt, va fi o legătură (în cazul nostru, acest cuvânt), iar după ce va merge eticheta de închidere.
Ca urmare a modificărilor efectuate, pagina noastră web va arăta ca cea prezentată în Fig. 2.13.
După cum puteți vedea în figură, o nouă frază a apărut pe pagina noastră. care începe cu o nouă linie. Și ultimul cuvânt al acestei fraze este un hyperlink. Notă - în mod prestabilit, hyperlink-urile din text sunt evidențiate. Dacă totul se face corect, după ce faceți clic pe acest link, o pagină se va deschide (a se vedea Figura 2.11).
Facem din pagina noastră un hyperlink către portalul popular www.mail.ru. Pentru a face acest lucru, corectam codul programului asa cum este aratat in Fig. 2.14.
În exterior, aspectul paginii web nu se schimbă - va arăta exact la fel ca în Fig. 2.13. Dar dacă faceți clic pe link. atunci pagina principală a portalului www.mail.ru se va deschide ca rezultat.
Astfel, în această secțiune, am analizat un exemplu specific al pașilor de bază pentru crearea unei pagini web simple. Cu toate acestea, pentru a studia mai detaliat posibilitățile limbajului HTML, este necesar să se familiarizeze cu etichetele sale principale. Unii dintre noi știm deja, dar în realitate sunt multe altele. Acest lucru va fi discutat în secțiunea următoare.
Trimiteți-le prietenilor: