Elemente de pagini web

Partea 1. Limba HTML

1. Ce conține pagina Web?

Cum este aranjat fișierul HTML

Aici este cel mai simplu document HTML:

Exemplul 1

Acesta este cel mai simplu exemplu de document HTML.







Acest fișier * .htm poate fi deschis atât în ​​Notepad, cât și în Netscape. După salvarea modificărilor în Notepad, faceți clic pe butonul Reîncărcare din Netscape pentru a vedea aceste modificări implementate în documentul HTML.

A fost introdusă o indentare suplimentară pentru lizibilitate, dar în HTML acest lucru nu este necesar. Browserele ignoră caracterele terminale și spațiile multiple din fișierele HTML. După cum puteți vedea din exemplu, toate informațiile despre formatarea documentului sunt în fragmentele sale, încheiate între semnele "<" и ">"Un astfel de fragment (de exemplu, ) se numește o etichetă sau o etichetă (în eticheta engleză). Majoritatea etichetelor sunt asociate (ca paranteze de deschidere și închidere), adică pentru fiecare etichetă de deschidere a formularului există o etichetă de închidere a formularului cu același nume, dar cu adăugarea "/". O astfel de pereche de etichete este uneori numită un container în care este localizat un anumit conținut.

Literele mari și mici nu diferă, de exemplu
,
și
egal și în egală măsură, traducerea forțată a unei linii în text. Adesea, acțiunea etichetelor este ușor de înțeles pentru cei care cunosc limba engleză:

- Bold (cu caractere aldine) - Italic (cursive),

- Punctul (paragraful).

Multe etichete, pe lângă nume, pot conține atribute-elemente care oferă informații suplimentare despre modul în care browserul ar trebui să proceseze eticheta curentă. În cel mai simplu document, cu toate acestea, nu există un singur atribut.

În prezent, începe o trecere treptată la un limbaj de markup hipertext - XHTML, care este deja susținut de dezvoltatorii unor browsere. Această limbă extinde în mod semnificativ capacitățile limbii HTML 4, însă este mai solicitantă în ceea ce privește sintaxa. Pentru compatibilitate suplimentară cu XHTML, este de dorit 1) numele etichetelor și atributelor să fie scrise cu litere mici și 2) valoarea atributelor ar trebui întotdeauna să fie cuprinsă în ghilimele.

Etichetele necesare

etichetă trebuie să deschidă un document HTML și eticheta trebuie să o completeze.

Pereche de etichete . indică începutul și sfârșitul antetului documentului. Pe lângă numele documentului (vedeți etichetele mai jos), această secțiune poate include informații despre serviciu.</p> <p>Totul între etichete <title> și , interpretat de browser ca nume de document, este afișat în bara de titlu a ferestrei și imprimat în colțul din stânga sus al fiecărei pagini când este imprimat pe imprimantă. Vă recomandăm un nume care să nu depășească 64 de caractere.

Pereche de etichete . indică începutul și sfârșitul corpului documentului HTML în care este localizat conținutul documentului.

Vizualizați etichetele , unde i este o cifră de la 1 la 6 (-

.
) descriu rubricile a șase nivele diferite. Înălțimea primului nivel - cel mai mare, cel de-al șaselea - cel mai mic.

Tot ceea ce este încheiat între

și

, este perceput ca un singur paragraf. Tag-uri și

poate conține atributul align (de la "aliniere" în engleză), de exemplu:

Alinierea titlului la centru

sau

paragraful aliniat parțial

Iată un alt exemplu de document HTML:

Buna ziua!

Acesta este un exemplu ușor mai complex de document HTML

Acum știm că paragraful poate fi aliniat nu numai la stânga,

dar și în centru

sau în dreapta.

- introduceți o imagine.

Ultimele două etichete conțin atribute în afară de propriul nume. De exemplu, pentru a insera o imagine în document în etichetă , este necesar atributul src = "filename.gif". Adesea atributele sunt opționale și servesc la clarificarea aspectului elementului.

Acum știți suficient pentru a crea singur documente HTML simple. Pentru a vă îmbunătăți documentul HTML simplu, luați în considerare formatarea paragrafului.

2. Faceți textul în interiorul paragrafului

Etichete necorespunzătoare

Există etichete care nu respectă cele două reguli de bază ale HTML: ele nu sunt corelate și unele (-sequences) sunt introduse numai cu litere mici.

Odată într-o zi rece a iernii

Stau în spatele gratiilor într-o groapă umedă.

Mă uit - se ridică încet în sus

Vulturul în captivitate este tânăr.

Și marșul este important, într-o ordine calmă,

Tatăl meu trist, fluturându-și aripile,

În cizme mari, în haine de piele de oaie,

Sângele alunecos de alimente sub fereastră.

- linia orizontală. Poate include atributul de dimensiune, care determină grosimea și / sau lățimea liniei - lățimea liniei (în pixeli sau procente). De exemplu:





sunt secvențe. Simbolurile "<" и ">"sunt percepute de browsere ca fiind începutul și sfârșitul etichetelor HTML. Pentru a afișa aceste caractere pe ecran, introduceți -securitate (secvența isseip). Browserul afișează mesajul "<", когда встречает в тексте последовательность < (less than – меньше, чем). Знак ">"este codificată de o secvență gt; (mai mare decât - mai mult decât). Caracterul "" (ampersand) este codificat printr-o secvență - Citate dublă (") -" Toate literele trebuie să fie cu litere mici (adică mici), punct și virgulă sunt secvențe.

Formatarea fontului

HTML permite două abordări ale selecției fonturilor de fragmente de text. Puteți specifica direct modul în care fontul ar trebui să fie pe o parte a textului, care este, schimba stilul fizic al textului. Și puteți marca un fragment de text ca având un stil diferit de cel logic, lăsând interpretarea stilului în browser.







Prin stilul fizic este acceptat să însemne o instrucțiune directă către browser pentru a modifica fontul curent. De exemplu, orice dintre etichete și , vor fi scrise cu caractere aldine. Text între etichete și va fi scris într-un font oblic. Textul plasat între etichete și , va fi scris într-un font care simulează o mașină de scris, adică având o lățime de caractere fixă.

Eticheta font specifică dimensiunea și culoarea fontului textului (nu este recomandat). atribute:

Dimensiune - stabilește dimensiunea fontului. Dimensiunea implicită este 3. Valorile sunt: ​​a) mărimea fixă ​​de la 1 la 7; b) schimbarea relativă a "+1" și "-3" este de o mărime mai mare și de trei mai mică. Puteți specifica dimensiunile în puncte - pt, pixeli - px.

Face - definește o listă de nume de fonturi delimitate prin virgulă. Culoare - culoarea textului. exemple: VERDE

Fonturi precum Arial, Helvetica, sans-serif sunt numite proporțional tocate; Georgia, Times New Roman, serif - proporțional cu serifurile (serif); Curier, fonturi cu monofonie (litere de aceeași lățime) cu serifi.

Când se utilizează stiluri logice, nu se știe în avans ce vor vedea utilizatorii. Diferitele browsere reprezintă aceleași etichete ale stilurilor logice în diferite moduri. Unele browsere afișează textul normal în loc de stilul logic. Următoarele stiluri logice sunt distribuite: . - de la accentul englezesc - accent, . - accent puternic, . - un fragment din textul sursă, . - mesaj eșantion, . - pentru a indica ce trebuie să introduceți de la tastatură, . - pentru scrierea numelor de variabile.

3. Aspectul documentului

După cum am văzut deja, puteți structura documentul folosind titluri și paragrafe. În plus, paragrafele pot fi organizate în liste.

Liste neordonate:
    .

Text între etichete

    și
, este percepută ca o listă neumerată. Fiecare element de listă nou începe cu o etichetă
  • .

    De exemplu, pentru a crea o astfel de listă:

    aveți nevoie de acest text HTML:

  • Ivan;
  • Daniel;
  • alb mare

    Notă: eticheta

  • nu există nici o etichetă de închidere a perechilor.

    Listele numerotate:
      .

    Listele numerotate sunt aranjate în același mod ca și cele neumerate, dar în loc de simbolurile care alocă un element nou, se utilizează cifre. Dacă modificați exemplul anterior:

  • Ivan;
  • Daniel;
  • alb mare

    Iată lista:

    Un element din orice listă poate include o listă întreagă de orice fel. Numărul de nivele de cuibărit nu este limitat în principiu, însă nu trebuie să abuzați de liste imbricate. Listele nivelate sunt convenabile atunci când se pregătesc diferite planuri și tabele de conținut.

    Textul formatat: 
    .

    Navigatorii ignoră de obicei spații multiple și caractere de la sfârșitul liniei. Cu toate acestea, textul dintre etichete 

     și
    (din preformatatul englez - preformatat), afișat de browserul de pe ecran ca atare - cu toate spațiile, caracterele tab și sfârșitul liniei.

    Construirea de legături hipertext

    Cea mai importantă caracteristică a limbajului HTML este capacitatea de a include link-uri către alte documente din documente. Puteți folosi textul sau graficele ca referință.

    1. la un fișier HTML la distanță sau la orice fișier care nu este un document HTML,
    2. la un anumit punct (etichetă) din documentul HTML curent.

    Un exemplu de link către un alt document HTML care vă permite să mergeți la un alt fișier.

    După ce numele fișierului este 5.htm, între butoanele> și <. указывается текст (5 класс), на котором производится щелчок для перехода на этот файл.

    În legătura înaintea numelui etichetei (pn) puneți simbolul #. Între> și <располагается текст (Понедельник), на котором производится щелчок для перехода по ссылке.

    tag-ul: luni

    4. Plasarea informațiilor. tabele

    Cum funcționează masa?

    Până acum, ne-am ocupat de documente în care exista doar un "flux" de text. În practică, uneori trebuie să aranjați textul în mai multe coloane. Masa poate ajuta în acest sens. În plus, un tabel format dintr-o singură celulă poate selecta în mod eficient o piesă de text pe care doriți să atrageți atenția cititorului.

    În tabelul cu dispozitive este cel mai ușor de înțeles exemplul.

    Exemplul 10

    Un tabel poate avea un antet
    Prima coloană A doua coloană

    Tabelul începe cu eticheta

    și se termină cu o etichetă
    . Un tabel poate avea un antet (. ), deși nu este obligatorie. Fiecare rând din tabel începe cu o etichetă și se termină cu o etichetă . Conținutul celulelor este cuprins între etichete .

    Etichete atribute
    • align - setează poziția tabelului în raport cu câmpurile documentului. Valorile valide sunt: ​​align = "left" - aliniere din stânga, centru - centru, dreapta - dreapta.
    • lățimea este lățimea mesei. Acesta poate fi specificat în pixeli (de exemplu, lățimea = 400) sau ca procent din lățimea paginii (de exemplu, lățimea = 80%).
    • border - stabilește lățimea marginii exterioare a mesei și a celulelor în pixeli (de exemplu, border = 1). Dacă atributul nu este setat, tabelul este afișat fără limită.
    • spațiale de celule este distanța dintre celulele adiacente din tabel în pixeli și celuloză este distanța dintre cadrul celular și textul în pixeli (de exemplu, celuloză = 10).

    Etichete atribute

    • alinierea - alinierea orizontală a textului în celulele liniei.
    • valign - alinierea verticală a textului în celulele liniei. Valorile valide sunt: ​​valign = sus - aliniere în partea de sus, mijloc - centru, partea de jos.

    Etichete atribute

    • alinierea și alinierea - alinierea orizontală și verticală a textului în celulă.
    • lățime și înălțime - lățimea și înălțimea celulei în pixeli (de exemplu, înălțimea = 40).
    • acum - conținutul celulei ar trebui să fie afișat într-o singură linie.
    • colspan - stabilește "span" al celulei orizontal. rowspan - dimensiunea verticală a celulei. De exemplu, colspan = 3 înseamnă că celula se extinde la trei coloane și rowspan = 2 - celula are două linii.

    Dacă celula mesei este goală, nu se trage un cadru în jurul acesteia. Dacă este necesar un cadru, puteți introduce un spațiu în celulă -   (spațiu fără spargere). Celula va fi goală, dar cu un cadru în jurul ei. O celulă de tabelă poate conține un alt tabel.

    Partea 2. Foi de stil cascadă (CSS)

    1. Concepte CSS de bază

    După cum știm deja, HTML este o colecție de obiecte container, cum ar fi

    .

    , , .
    și altele. Pentru fiecare astfel de obiect, sunt definite regulile de afișare pe o pagină web, cu alte cuvinte, stilul. Etichetele HTML standard corespund unui set de stiluri încorporate care sunt utilizate în mod implicit. Fiecare stil specifică un set de proprietăți obiect.

    Tehnologia CSS (Cascading Stylesheets - Cascading Style Sheets) vă permite să suprascrie unele dintre aceste proprietăți.

    De exemplu, pentru a defini culoarea elementelor "h1" ca albastru, este suficient să scrieți:

    Regula "CSS" de mai sus este formată din două părți:

    Selectorul ("h1") și definiția ("culoare: albastru").

    De asemenea, definiția cuprinde două părți: proprietățile ("culoarea") și valorile ("albastru").

    Exemplul de mai sus afectează numai una dintre proprietăți, dar este deja o foaie de stil. Împreună cu alte stiluri, va determina forma finală a întregului document. Lista de selectori, proprietăți și valorile posibile ale acestora este definită în specificația HTML.

    Conectarea stilurilor la un fișier HTML

    Foaia de stil trebuie să fie conectată la textul HTML. De exemplu:







    Articole similare

    Pagina anterioară

    Pagina următoare

    Trimiteți-le prietenilor: