Pagina web html este. Crearea paginilor Web. Învățarea limbajului HTML. Elemente pagini web: antet

Înainte de a începe călătoria noastră prin tutorialele despre construirea de site-uri web cu HTML și CSS, este important să înțelegem diferențele dintre cele două limbi, sintaxa fiecărei limbi și o terminologie de bază.

Ce este HTML și CSS?

HTML (HyperText Markup Language) definește structura conținutului și semnificația acestuia prin definirea conținutului, cum ar fi, de exemplu, titluri, paragrafe sau imagini. CSS (Cascading Style Sheets) sau Cascading Style Sheets este un limbaj de prezentare conceput pentru a proiecta aspectul conținutului folosind, de exemplu, fonturi sau culori.

Aceste două limbi, HTML și CSS, sunt independente unul de celălalt și ar trebui să rămână așa. CSS nu ar trebui să fie scris în interiorul unui document HTML și invers. Ca regulă generală, HTML va reprezenta întotdeauna conținutul, iar CSS va defini întotdeauna stilul acestuia.

Cu această înțelegere a diferenței dintre HTML și CSS, să ne aprofundăm în HTML mai detaliat.

Termeni HTML de bază

Înainte de a începe să lucrați cu HTML, este posibil să întâlniți termeni noi și adesea ciudați. Pe toți îi veți cunoaște mai detaliat în timp, dar deocamdată ar trebui să începeți cu cei trei termeni HTML de bază - elemente, etichete și atribute.

Elemente

Elementele specifică modul de definire a structurii și conținutului obiectelor dintr-o pagină. Unele dintre elementele utilizate în mod obișnuit includ mai multe niveluri de titluri (definite ca elemente cu

inainte de

) și paragrafe (definite ca

); articolele pot fi adăugate la listă ,

, , Și și multe altele.

Elementele sunt identificate folosind paranteze unghiulare<>, în jurul numelui elementului. Deci elementul va arăta astfel:

Etichete

Adăugarea de paranteze unghiulare< и >creează ceea ce este cunoscut ca o etichetă în jurul unui element. Etichetele apar cel mai adesea în perechi de etichete de deschidere și de închidere.

Eticheta de început marchează începutul unui element. Este format din simbol<, затем идёт имя элемента и завершается символом >; De exemplu,

.

Eticheta de sfârșit marchează sfârșitul unui element. Este format din simbol< с последующей косой чертой и именем элемента и завершается символом >; De exemplu,

.

Conținutul dintre etichetele de început și de sfârșit este conținutul acelui element. Linkul, de exemplu, va avea o etichetă de deschidere și eticheta de închidere. Ceea ce este între aceste două etichete va fi conținutul link-ului.

Deci, etichetele de link ar arăta cam așa:

...

Atribute

Atributele sunt proprietăți folosite pentru a furniza Informații suplimentare despre element. Cele mai comune atribute includ atributul id, care identifică elementul; atributul de clasă, care clasifică elementul; atributul src, care specifică sursa conținutului încorporat; și atributul href, care specifică o legătură către resursa aferentă.

Atributele sunt definite în eticheta de deschidere după numele elementului. În general, atributele includ un nume și o valoare. Formatul pentru aceste atribute constă din numele atributului urmat de un semn egal, urmat de valoarea atributului între ghilimele. De exemplu, element cu atributul href ar arăta astfel:

Shay Howe

Demonstrarea termenilor HTML de bază

Acest cod va afișa textul „Shay Howe” pe o pagină web și când se va face clic pe acest text, va duce utilizatorul la http://shayhowe.com. Elementul link este declarat cu o etichetă de pornire și eticheta de închidere text care include, precum și atributul și valoarea adresei link-ului declarat cu href="http://shayhowe.com" în eticheta de deschidere.

Orez. 1.01. Sintaxa HTML schema include elementul, atributul și eticheta

Acum că știți ce sunt elementele, etichetele și atributele HTML, să aruncăm o privire împreună la prima noastră pagină web. Dacă ceva pare nou aici, nu vă faceți griji - îl vom descifra pe măsură ce mergem.

Personalizarea structurii unui document HTML

Documentele HTML sunt documente cu text simplu salvate cu extensia .html mai degrabă decât .txt. Pentru a începe să scrieți HTML, mai întâi aveți nevoie editor de text care este convenabil de utilizat. Din păcate, acest lucru nu include Microsoft Word sau Pagini, deoarece acestea sunt editori complexe. Cele mai populare două editoare de text pentru scrierea HTML și CSS sunt Dreamweaver și Sublime Text. Alternative gratuite Consultați și Notepad++ pentru Windows și TextWrangler pentru Mac.

Toate documentele HTML conțin o structură obligatorie care include următoarele declarații și elemente: , , Și .

Declarație tip document sausituat chiar la începutul unui document HTML și spune browserelor ce versiune de HTML este utilizată. Din moment ce vom folosi ultima versiune HTML, tipul nostru de document va fi pur și simplu. După aceea vine elementul indicând începutul documentului.

Interior element definește partea de sus a documentului, inclusiv diverse metadate (informații însoțitoare despre pagină). Conținut în interiorul unui element nu apare pe pagina web în sine. În schimb, poate include titlul documentului (care apare în bara de titlu a ferestrei browserului), link-uri către orice fișiere externe sau orice alte metadate utile.

Tot conținutul vizibil al paginii web va fi în element . Structura unui document HTML tipic arată astfel:

Salut Lume!

Salut Lume!

Aceasta este o pagină web.



Demonstrarea structurii unui document HTML

Acest cod arată documentul, începând cu declararea tipului de document,, urmat imediat de element . Interior go elemente Și . Element conține codificarea paginii prin intermediul etichetei și titlul documentului prin element . Element <body>include antetul prin element <h1>și un paragraf de text prin<р>. Deoarece atât titlul, cât și paragraful sunt imbricate în element <body>, sunt vizibile pe pagina web.</p><p>Când un element se află în interiorul altui element, cunoscut și sub numele de element imbricat, este o idee bună să-i adăugați umplutură pentru a menține structura documentului bine organizată și lizibilă. În codul anterior, ambele elemente <head>Și <body>imbricat și deplasat în interiorul elementului <html>. Structura de umplutură pentru elemente continuă cu noi elemente adăugate în interior <head>Și <body> .</p><h3>Elemente cu auto-închidere</h3><p>În exemplul anterior, elementul <meta>a fost singura etichetă care nu includea o etichetă de închidere. Nu vă faceți griji, asta a fost făcut intenționat. Nu toate elementele constau din etichete de deschidere și de închidere. Unele elemente pur și simplu primesc conținut sau comportament prin atribute din cadrul aceleiași etichete. <meta>este unul dintre aceste elemente. Conținutul elementului <meta>în exemplu este atribuit utilizând atributul și valoarea set de caractere. Alte elemente tipice de auto-închidere includ:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Structura turnată, realizată cu o declarație de tip document<!DOCTYPE html>și elemente <html> , <head>Și <body>, este destul de comun. Dorim să păstrăm această structură a documentului la îndemână, deoarece o vom folosi frecvent atunci când creăm noi documente HTML.</p><h3>Validarea codului</h3><p>Indiferent cât de atent ne scriem codul, greșelile sunt inevitabile. Din fericire, atunci când scriem HTML și CSS, avem validatori pentru a ne verifica munca. W3C oferă validatoare HTML și CSS care scanează codul pentru erori. Validarea codului nostru nu numai că ne ajută să redăm corect în toate browserele, dar ne ajută și să învățăm cele mai bune practici atunci când scriem cod.</p><h2>La practică</h2><p>În calitate de designeri web și dezvoltatori front-end, avem luxul de a participa la o serie de conferințe grozave dedicate meșteșugului nostru. Vom organiza propria noastră conferință de stiluri și vom crea un site web pentru aceasta în timpul lecțiilor următoare. Ca aceasta!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Să comutăm puțin, să ne depărtăm de HTML și să aruncăm o privire la CSS. Amintiți-vă, HTML definește conținutul și structura paginilor noastre web, în ​​timp ce CSS definește stilul și aspectul lor vizual.</p><h2>Termenii de bază CSS</h2><p>Pe lângă termenii HTML, există câțiva termeni CSS de bază cu care va trebui să vă familiarizați. Acești termeni includ selectori, proprietăți și valori. Ca și în terminologia HTML, cu cât lucrați mai mult cu CSS, cu atât acești termeni devin a doua natură pentru dvs.</p><h3>Selectoare</h3><p>Când adăugați elemente la o pagină web, acestea pot fi stilate cu CSS. Un selector determină ce element sau elemente din HTML să vizeze și să le aplice stiluri (cum ar fi culoarea, dimensiunea și poziția). Selectorii pot include o combinație de valori diferite pentru a selecta elemente unice, în funcție de cât de specifici vrem să fim. De exemplu, dorim să selectăm fiecare paragraf dintr-o pagină sau să selectăm doar un anumit paragraf.</p><p>Selectorii sunt de obicei asociați cu o valoare de atribut, cum ar fi un id sau o valoare de clasă, sau un nume de element, cum ar fi <h1>sau<р> .</p><p>În CSS, selectoarele sunt asociate cu acolade () care includ stilurile aplicate elementului selectat. Acest selector vizează toate elementele <span><p>P(...)</p><h3>Proprietăți</h3><p>Odată ce un element este selectat, proprietatea determină stilurile care îi vor fi aplicate. Numele proprietăților vin după selector, în acolade () și imediat înainte de două puncte. Există multe proprietăți pe care le putem folosi, cum ar fi fundalul, culoarea, dimensiunea fontului, înălțimea și lățimea și alte proprietăți adăugate în mod obișnuit. În codul următor, definim proprietățile de culoare și dimensiunea fontului care se aplică tuturor elementelor <span><p>P (culoare: ...; dimensiunea fontului: ...; )</p><h3>Valori</h3><p>Până acum, am selectat elementul doar prin selector și am determinat ce stil am dori să-i aplicăm prin intermediul proprietăților. Acum putem seta comportamentul acestei proprietăți printr-o valoare. Valorile pot fi specificate ca text între două puncte și punct și virgulă. Mai jos selectăm toate elementele <p >Și setați valoarea proprietății color la portocaliu și valoarea proprietății font-size la 16 pixeli.</p><p>P (culoare: portocaliu; dimensiunea fontului: 16px; )</p><p>Pentru a testa, în CSS setul nostru de reguli începe cu un selector, urmat imediat de acolade. În cadrul acestor acolade sunt declarații care constau din perechi de proprietăți și valori. Fiecare declarație începe cu o proprietate, urmată de două puncte, valoarea proprietății și, în final, de un punct și virgulă.</p><p>O practică obișnuită este de a schimba o pereche de proprietăți și valori în acolade. Ca și în cazul HTML, indentarea ajută la menținerea codului nostru organizat și clar.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Orez. 1.03. Structura de sintaxă CSS include selector, proprietăți și valori</p><p>Cunoașterea câțiva termeni de bază și a sintaxei CSS generale este un început excelent, dar mai avem câteva puncte de învățat înainte de a sărim în profunzime. În special, trebuie să aruncăm o privire mai atentă asupra modului în care funcţionează selectoarele în CSS.</p><h2>Lucrul cu selectori</h2><p>Selectoarele, așa cum am menționat mai devreme, indică elementele HTML care vor fi stilate. Este important să înțelegeți pe deplin cum să utilizați selectoarele și cum funcționează acestea. Primul pas ar trebui să fie să cunoaștem <a href="https://5visa.ru/ro/obrazovanie/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">tipuri variate</a> selectoare. Vom începe cu cei mai de bază selectori: selectoare de tip, clase și identificatori.</p><h3>Selectoare de tip</h3><p>Selectorii de tip vizează elemente după tipul lor. De exemplu, dacă vrem să vizam toate elementele <div>trebuie să folosim selectorul div. Următorul cod arată selectorul de tip pentru elemente <div>, precum și HTML-ul corespunzător.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Clase</h3><p>Clasele vă permit să selectați un element în funcție de valoarea atributului clasei. Selectorii de clasă sunt puțin mai specifici decât selectorii de tip, deoarece selectează un anumit grup de elemente, mai degrabă decât toate elementele de același tip.</p><p>Clasele vă permit să aplicați același stil mai multor elemente simultan, folosind aceeași valoare a atributului de clasă pentru mai multe elemente.</p><p>În CSS, clasele sunt notate cu un punct de început urmat de valoarea atributului de clasă. Selectorul de clasă de mai jos selectează toate elementele care conțin valoarea minunată a atributului de clasă, inclusiv elementele <div>Și <span><p>Minunat (...)</p><p> <div class="awesome">...</div> </p><h3>Identificatori</h3><p>Identificatorii sunt chiar mai precisi decât clasele, deoarece vizează doar un element unic la un moment dat. Așa cum selectorii de clasă folosesc valoarea atributului de clasă, identificatorii folosesc valoarea atributului id ca selector.</p><p>Indiferent de tipul de element redat, valoarea atributului id poate fi folosită o singură dată pe pagină. Dacă ID-urile sunt prezente, atunci acestea ar trebui rezervate pentru elementele importante.</p><p>În CSS, identificatorii sunt notați cu un simbol hash în față, urmat de valoarea atributului id. Aici id va selecta doar elementul care conține atributul id cu valoarea shayhowe .</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Selectoare suplimentare</h3><p>Selectoarele sunt extrem de puternice, iar cele descrise mai sus sunt printre cele mai comune selectoare pe care le întâlnim. Aceste selectoare sunt doar începutul. Există multe selectoare avansate și sunt ușor disponibile. Odată ce vă simțiți confortabil cu ele, nu vă fie teamă să vă uitați și la unele dintre cele mai avansate.</p><p>Bine, să începem să punem totul cap la cap. Adăugăm elemente în pagină în interiorul HTML-ului nostru, apoi putem selecta acele elemente și le putem stila cu CSS. Acum să conectăm punctele dintre HTML și CSS, astfel încât cele două limbi să funcționeze împreună.</p><h2>conexiune CSS</h2><p>Pentru a face CSS-ul nostru să vorbească cu HTML-ul nostru, trebuie să îndreptăm spre fișierul CSS din HTML. Este o practică bună să includem toate stilurile noastre într-un singur fișier extern care este indicat în interiorul elementului. <head>documentul nostru HTML. Folosirea unui CSS extern ne permite să aplicăm aceleași stiluri pe tot site-ul și să facem rapid modificări.</p><h3>Alte opțiuni pentru adăugarea CSS</h3><p>Alte opțiuni pentru includerea CSS includ utilizarea stilurilor inline și inline. Puteți vedea aceste opțiuni în viața reală, dar sunt, în general, descurajate, deoarece fac actualizările site-ului greoaie și greoaie.</p><p>Pentru a crea foaia noastră de stil externă, dorim din nou să folosim editorul de text selectat pentru a crea unul nou. <a href="https://5visa.ru/ro/ustanovka-i-nastrojjka/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">fisier text</a> cu extensia .css. Fișierul nostru CSS trebuie să fie salvat în același folder sau subdosar ca fișierul nostru HTML.</p><p>În interiorul unui element <head>element aplicat <link>, care definește relația dintre fișierele HTML și CSS. Deoarece ne conectăm la CSS, folosim atributul rel cu valoarea foii de stil pentru a indica relația lor. În plus, atributul href este folosit pentru a indica locația sau calea către fișierul CSS.</p><p>În următorul exemplu de document HTML, elementul <head>indică un fișier de stil extern.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Pentru ca CSS să fie redat corect, valoarea căii a atributului href trebuie să se potrivească direct cu locul în care este salvat fișierul CSS. În exemplul anterior, fișierul main.css este stocat în aceeași locație cu fișierul HTML, cunoscut și sub numele de folder rădăcină.</p><p>Dacă fișierul CSS se află într-un subdosar, atunci valoarea atributului href ar trebui să corespundă acelei căi în consecință. De exemplu, dacă fișierul nostru main.css a fost salvat într-un subdosar numit foi de stil, atunci valoarea atributului href ar fi stylesheets/main.css . Aici, o bară oblică (sau bară oblică) este folosită pentru a indica mutarea într-un subdosar.</p><p>Pe <a href="https://5visa.ru/ro/proshivka/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">acest moment</a> paginile noastre încep să prindă viață, încet, dar sigur. Încă nu am aprofundat prea mult în CSS, dar poate ați observat că unele elemente au stiluri pe care nu le-am declarat în CSS. Este browserul care își impune propriile stiluri preferate acestor elemente. Din fericire, putem suprascrie aceste stiluri destul de ușor, ceea ce vom face în continuare cu o resetare CSS.</p><h2>Folosind CSS Resetare</h2><p>Fiecare browser are propriile stiluri implicite pentru <a href="https://5visa.ru/ro/problemy/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">diverse elemente</a>. Cum <a href="https://5visa.ru/ro/navigatory/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Google Chrome</a> afișează titluri, paragrafe, liste și așa mai departe, poate diferi de modul în care o face <a href="https://5visa.ru/ro/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">Internet Explorer</a>. Resetarea CSS a devenit utilizată pe scară largă pentru a asigura compatibilitatea între browsere.</p><p>Reset CSS preia toate elementele HTML de bază cu un stil dat și oferă un stil consecvent în toate browserele. Aceste resetări includ, de obicei, eliminarea dimensiunilor, umpluturii, marginilor sau stilurilor suplimentare pentru a reduce aceste valori. Deoarece cascada CSS funcționează de sus în jos (mai multe despre asta în curând) - resetarea noastră ar trebui să fie în vârful stilului nostru. Acest lucru asigură că aceste stiluri sunt citite mai întâi și atât. <a href="https://5visa.ru/ro/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">browsere diferite</a> va lucra dintr-un punct de referință comun.</p><p>Există o mulțime de resetări CSS diferite disponibile pentru a fi aplicate, toate au propriile lor <a href="https://5visa.ru/ro/sovety/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">punctele forte</a>. Una dintre cele mai populare de către Eric Meyer, resetarea lui CSS este adaptată pentru a include noi elemente HTML5.</p><p>Dacă te simți puțin aventuros, există și Normalize.css de Nicholas Gallagher. Normalize.css nu se concentrează pe utilizarea unei resetari hard pe toate elementele majore, ci pe setarea stilurilor comune pentru acele elemente. Acest lucru necesită o înțelegere mai profundă a CSS, precum și să știți ce doriți de la stiluri.</p><h3>Compatibilitate și testare crossbrowser</h3><p>După cum am menționat mai devreme, diferitele browsere redă elementele diferit. Este important să recunoașteți valoarea compatibilității și a testării între browsere. Site-urile nu trebuie să arate exact la fel în toate browserele, dar ar trebui să fie aproape. Ce browsere doriți să susțineți și în ce măsură este o decizie pe care va trebui să o luați în funcție de ceea ce este mai bine pentru site-ul dvs.</p><p>Există câteva lucruri de care trebuie să țineți cont atunci când scrieți CSS. Vestea bună este că este realizabil și necesită puțină răbdare pentru a stăpâni.</p><h2>La practică</h2><p>Să ne întoarcem la locul unde am rămas ultima dată pe site-ul nostru de conferințe și să vedem cum putem adăuga niște CSS.</p><ol><li>În dosarul nostru de stiluri-conferință, să creăm un nou folder numit assets. Aici vom stoca toate elementele pentru site-ul nostru web, cum ar fi stilurile, imaginile, videoclipurile etc. Pentru stilurile noastre, să continuăm și să adăugăm un alt folder de foi de stil în dosarul de active.</li><li>Folosind un editor de text, creați un fișier nou numit main.css și salvați-l în folderul foi de stil pe care tocmai l-am creat.</li><p>Privind fișierul index.html din browser, putem vedea că elementele <h1>Și <p>Conține deja stilul implicit. În special, au o dimensiune unică a fontului și spațiu în jurul lor. Folosind resetarea lui Eric Meyer, putem atenua aceste stiluri, permițând fiecăruia să pornească de la aceeași bază. Pentru a face acest lucru, aruncați o privire pe site-ul său, copiați codul și lipiți-l în partea de sus a fișierului nostru main.css.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licență: niciuna (domeniu public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video (margine: 0; umplutură: 0; chenar: 0; dimensiune font: 100%; font: moștenire; aliniere verticală: linie de bază ; ) /* Resetarea rolului de afișare HTML5 pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) tabel (border- colaps:c colaps; distanță-limită: 0; )</p><li>Fișierul nostru main.css începe să prindă contur, așa că haideți să-l includem în fișierul nostru index.html. Deschideți index.html într-un editor de text și adăugați un element <link>V <head>, imediat după element <title> .</li><li>Pentru că indicăm stiluri prin element <link>adăugați un atribut rel cu o valoare de foaie de stil .</li><p>Vom include, de asemenea, un link către fișierul nostru main.css folosind atributul href. Amintiți-vă, fișierul nostru main.css este salvat în folderul foi de stil, care se află în folderul assets. Deci, valoarea atributului href, care este calea către fișierul nostru main.css, ar trebui să fie assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Conferinta de stiluri

Este timpul să ne testăm munca și să vedem cum se potrivesc HTML și CSS. Deschiderea fișierului index.html (sau reîmprospătarea paginii dacă este deja deschisă) în browser ar trebui să arate un rezultat ușor diferit față de cel anterior.

Orez. 1.04. Site-ul nostru Styles Conference cu resetare CSS

Demo și cod sursă

Mai jos puteți vizualiza site-ul Styles Conference în starea sa actuală, precum și descărcare sursă site-ul momentan.

rezumat

Deci, totul este bine! Am făcut câțiva pași mari în acest tutorial.

Gândiți-vă, acum cunoașteți elementele de bază ale HTML și CSS. Pe măsură ce continuăm și petreci mai mult timp scriind HTML și CSS, vei deveni mult mai confortabil să lucrezi cu aceste două limbi.

Amintiți-vă că am luat în considerare următoarele:

  • Diferența dintre HTML și CSS.
  • Introducere în elementele, etichetele și atributele HTML.
  • Configurarea structurii primei pagini web.
  • Introducere în selectoarele, proprietățile și valorile CSS.
  • Lucrul cu selectoare CSS
  • Pointer către CSS din HTML.
  • Importanta resetarii CSS.

Acum să aruncăm o privire mai atentă la HTML și să cunoaștem puțin semantica.

Resurse și link-uri

  • Termeni HTML obișnuiți prin Scripting Master
  • Termeni și definiții CSS prin Impressive Webs
  • Instrumente CSS: Resetați CSS prin Eric Meyer

Majoritatea conținutului de pe Internet sunt pagini web. Acesta este, din punct de vedere istoric, primul tip de documente destinate plasării în spațiul rețelei virtuale, dar încă își păstrează relevanța și practic nu are formate concurente. Care este structura paginilor web? Ce instrumente de dezvoltare web sunt folosite pentru a le crea?

Ce este o pagină Web?

„Enumeră elementele de bază ale unei pagini Web”, ne spune un examinator la o oră de informatică. Ce putem să-i spunem ca răspuns? În primul rând, să vorbim despre ce este în principiu o pagină web.

Conform definiției general acceptate în rândul specialiștilor IT, acesta este un document care se dorește a fi deschis într-un program specializat - un browser și care conține date pentru afișarea pe ecranul unui computer a diferitelor conținuturi utile folosind tipul adecvat de software - texte, link-uri, grafice, videoclipuri, muzică etc. etc. O pagină web este un document text. Datele relevante pentru browser sunt litere, cifre și Simboluri speciale, folosit ca elemente de limbaj de marcare - HTML. Cu ajutorul acestuia, creatorul paginii web „explica” browserului cum să afișeze acest sau acel conținut pe ecran.

Locul și rolul paginilor web în structura site-urilor

Putem spune că o pagină Web este componenta principală a unui site web? Acest lucru este parțial adevărat. Cu toate acestea, așa cum am menționat mai sus, o pagină web este doar un document text. Site-ul, de regulă, conține, de asemenea, imagini, videoclipuri și alte elemente multimedia. O pagină web nu le poate conține, dar în structura sa poate conține link-uri către ele. Astfel, o pagină web poate fi numită componenta principală a site-ului în ceea ce privește rolul principal în afișarea conținutului virtual către utilizatori.

În cazuri rare, desigur, documentul în cauză va fi singura componentă a site-ului - dacă dintr-un motiv oarecare nu prevede afișarea de elemente grafice, video și alte elemente multimedia. În special, primele site-uri - când au apărut pentru prima dată limbajele de marcare ale paginilor web - nu includeau conținutul corespunzător. În fața ochilor utilizatorului a fost doar text și link-uri.

Principiul folosirii hipertextului

Deci, o pagină web este un document întocmit în limbaj HTML, care este folosit pentru a marca hipertextul. Dar ce este acest fenomen? Ce este hipertextul? Fără să aprofundăm prea mult în teorie, observăm că acesta este un text care, într-un fel sau altul, vă permite să obțineți acces rapid la altul prin link-uri. Într-o carte obișnuită, acest lucru este imposibil - există „text simplu”. Pentru a avea acces la pagina dorită, cititorul trebuie să facă mai multe flip-uri, după ce a citit în prealabil conținutul sau notele de subsol. În modul „hipertext”, partea principală a muncii este realizată de computer - datorită informațiilor reflectate în elementele HTML ale paginii.

Dacă un profesor de informatică ne spune „Enumerați elementele principale ale unei pagini Web”, atunci putem începe corect să vorbim despre componentele documentului corespunzător, care sunt create folosind limbajul de marcare HTML. Prin urmare, pentru început, să ne uităm la câteva puncte teoretice referitoare la HTML.

Structura limbajului HTML: etichete

Cum citește un browser datele necesare despre o pagină web dintr-un document HTML? Foarte simplu.

Elemente esentiale limba dată sunt etichete. În cele mai multe cazuri, sunt împerecheate - există una de deschidere și una de închidere. Primele sunt notate folosind doar paranteze unghiulare. Cele doua sunt similare, dar a doua paranteză este precedată de o bară oblică - simbolul /. Browserul este capabil să le recunoască și, prin urmare, afișează conținutul paginilor web fără probleme în conformitate cu algoritmii creați de dezvoltatorul documentului.

Eticheta de deschidere este de obicei scrisă cu majuscule, eticheta de închidere este scrisă cu litere mici. Acesta este un standard care a devenit stabilit printre profesioniștii IT. Browserul va recunoaște cu siguranță comanda HTML în orice literă, dar dezvoltatorii web sunt sfătuiți totuși să respecte schema de scriere a etichetelor marcate. Acest lucru va facilita, de exemplu, completarea unei pagini web de către alți specialiști.

Atribute

Alte elemente importante ale limbajului HTML sunt atributele. Cu ajutorul lor, creatorul unei pagini web poate seta proprietățile conținutului - de exemplu, înălțimea fontului, culoarea, poziția față de pagină. Același lucru este valabil și pentru imagini, videoclipuri și alte componente multimedia. Atributele sunt scrise în eticheta de deschidere.

Conţinut

Între etichetele de deschidere și de închidere se află următoarea componentă cheie a unei pagini web, conținutul. Acesta este, de fapt, chiar conținutul care ar trebui să fie afișat în fața utilizatorului pe ecran. Poate fi text, link, imagine, video sau alt element multimedia.

Elementele paginii web

„Deci enumerați elementele de bază ale unei pagini Web, în ​​sfârșit!” – repetă profesorul. „Cu plăcere”, îi răspundem noi. Ce este inclus în structura tipului de documente luate în considerare? Să fim de acord că vom lua în considerare acest aspect în contextul elementelor HTML ale paginii web. Adică afișarea lor în browser - ceea ce vede utilizatorul pe ecran - ne va interesa într-o măsură mai mică. Faptul este că algoritmii HTML corespunzători, pe baza cărora programul afișează conținutul în același mod, pot fi diferiți. Și aceasta este particularitatea limbajului HTML: imaginea dorită pe pagina Web poate fi afișată căi diferite. În același timp, ele pot fi fie echivalente în ceea ce privește costurile forței de muncă ale creatorului paginii web, fie pot implica o cantitate diferită de efort și timp pentru implementarea lor.

Elemente pagini web: antet

Elementele standard ale unei pagini Web, oricât de surprinzător ar suna, sunt prezente în număr foarte mic. De fapt, există doar două dintre ele - antetul și corpul documentului. Cu toate acestea, fiecare dintre ele poate avea o structură destul de complexă.

Care este specificul antetului? Este situat chiar în partea de sus a paginii web. HTML-ul care generează titlul presupune de obicei că doar textul este „criptat”, dar dacă este necesar, în elementul corespunzător pot fi plasate și mici inserții grafice. Și asta, de fapt, este tot ce se poate spune despre titlu. S-ar părea că rolul său în structura documentului corespunzător este nesemnificativ. Dar nu este. Titlurile paginilor web sunt foarte importante în ceea ce privește indexarea site-urilor în motoarele de căutare - Yandex, Google. Acest element trebuie să fie pe deplin relevant pentru conținutul paginii web, precum și specificul tematic al site-ului.

Cum este captat titlul unei pagini web folosind HTML? Foarte simplu. Mai întâi se scrie eticheta de deschidere, care arată întotdeauna ca HEAD cu paranteze unghiulare, apoi conținutul titlului, după aceea, eticheta de închidere. Ele sunt scrise, desigur, chiar în partea de sus a documentului web.

Titlul unui document web poate include o serie de elemente suplimentare. Uneori, formatul unei pagini Web poate necesita afișarea textului într-o anumită codificare. Cum să vă asigurați că documentul web îndeplinește acest criteriu? Foarte simplu. Structura antetului documentului ar trebui să conțină algoritmi HTML care indică browserului să folosească o anumită codificare a limbii - de exemplu, chirilic. Comenzile corespunzătoare sunt plasate în eticheta META, care, ca și altele, poate fi de deschidere și de închidere.

Corpul principal al paginii web

Corpul principal al unui document web se deschide cu eticheta BODY și se închide cu elementul corespunzător, care include o bară oblică. În același timp, poate exista un număr mare de comenzi suplimentare ale limbajului de marcare hipertext între etichetele de deschidere și de închidere. Acest lucru se datorează faptului că partea principală a paginii web conține conținutul său util - texte, link-uri, grafice, videoclipuri, diverse formulare de completat.

Fiecare dintre tipurile de conținut respective are propriile etichete. Structura părții principale a unui document web poate conține comenzi HTML care pot fi utilizate și pentru a formata text, de exemplu, dând fontului o anumită culoare, dimensiune și alte proprietăți.

Să aruncăm o privire la specificul unor etichete HTML utilizate în mod obișnuit. De fapt, ele formează și elementele principale ale paginii web.

Etichete HTML de bază

Deci, pentru a studia în detaliu care sunt elementele unei pagini Web, să studiem mai detaliat esența etichetelor HTML de bază. Am enumerat deja unele dintre ele mai sus - în special cele cu care browserul citește anteturile paginilor web și determină unde se află corpul principal al documentului.

Eticheta P este destul de comună. Ea, ca și alte elemente similare ale limbajului de marcare hipertext, poate fi de deschidere și de închidere. Această etichetă vă permite să formatați un singur paragraf al unui document. Puteți, de exemplu, să setați un anumit tip de font sau o culoare pentru acesta. Totuși, acest lucru se face cu ajutorul unei etichete suplimentare - FONT. În același timp, acesta va fi plasat în interiorul celui care indică limitele paragrafului - acest lucru vă va permite să nu distribuiți comanda HTML care reflectă tipul de font preferat către alte elemente ale paginii web.

Tabelele sunt create folosind eticheta TABLE. Folosind atributele corespunzătoare, puteți determina numărul necesar de coloane și rânduri, puteți stabili lățimea acestora, specificul chenarelor, dimensiunea și culoarea fontului textului din tabel.

Responsabil pentru procesarea imaginilor de către browser. De asemenea, puteți plasa în el diverse atribute care reglementează dimensiunea imaginii, poziția acesteia pe pagină.

Legăturile către alte documente sau fișiere web sunt indicate cu ajutorul etichetei A. De regulă, în interiorul acestuia sunt situate atribute care indică faptul că structura paginii web este un hyperlink. Aceasta indică documentul, fișierul sau site-ul către care duce.

O etichetă comună este FRAMESET. Cu acesta, puteți împărți spațiul unei pagini web în mai multe zone - cadre. În fiecare dintre ele este posibilă separarea documentelor web. Adică, cadrele vă permit să plasați corect două sau mai multe pagini pe același ecran în același timp.

Povestea despre elementele cheie ale paginilor web și povestea ulterioară despre mijloacele de formatare a acestora folosind limbajul HTML - ceva de genul acesta va fi algoritmul răspunsului nostru la întrebarea pe care ne-a pus-o examinatorul. Dacă ne-a contactat, spunând „enumeră elementele principale ale paginii Web”, atunci noi, folosind metodologia adecvată, vom avea toate șansele să dezvăluim subiectul. Adică prin termenul „elemente” putem înțelege componentele cheie ale structurii unui document web, sau tipurile de conținut – text, imagini, tabele, cadre, link-uri pe care webmasterul le formează folosind un instrument precum limbajul HTML.

Specificul instrumentelor de dezvoltare web

Pe lângă ceea ce s-a spus, putem clarifica că există un număr mare de etichete și atribute furnizate de standardele HTML. Pe lângă HTML, dezvoltatorii web pot folosi instrumente suplimentare de formatare pentru documentele hipertext. De exemplu, cu JavaScript puteți crea pagini Web dinamice - adică acelea în care conținutul este actualizat constant (atât datorită acțiunilor utilizatorului însuși, cât și în conformitate cu algoritmii pre-scriși în scripturi).

Ar fi util să adăugăm că un dezvoltator web poate folosi limbaje de programare cu drepturi depline în munca sa, cum ar fi, de exemplu, Perl, PHP, Java, Python, cu ajutorul cărora devin posibilitățile de lucru cu documente hipertext. chiar mai larg. Necesitatea acestui lucru se poate datora faptului că domeniile de aplicare a tehnologiilor web astăzi sunt foarte diferite. Sarcinile cu care se confruntă dezvoltatorii moderni pot fi destul de complexe. De exemplu, uneori este necesară traducerea paginilor Web scrise în rusă în engleză. În acest caz, setul de instrumente al dezvoltatorului va fi cel mai divers.

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.

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

Informații teoretice

Noțiuni de bază

Hipertext- o structură informațională care vă permite să stabiliți relații semantice între elementele textului de pe ecranul unui computer în așa fel încât să puteți face cu ușurință tranziții de la un element la altul. În practică, în hipertext, unele cuvinte sunt evidențiate prin subliniere sau colorare într-o culoare diferită (hyperlink-uri). Evidențierea unui cuvânt indică prezența unei legături a acestui cuvânt cu un document în care subiectul asociat cuvântului evidențiat este luat în considerare mai detaliat. Un singur document HTML se numește:

document HTML;

Document web

Pagină web.

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

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

cadru (cadru) este un termen cu două sensuri. Prima valoare este zona documentului cu barele sale de defilare. A doua este o imagine 0DNN0H în fișierul grafic de animație (cadru).

Applet (applet) - un program care este transferat pe computerul client ca fișier separat și lansat la vizualizarea unei pagini Web.

Script (Scenariul) , sau script, este un program inclus într-o pagină Web pentru a-și îmbunătăți capacitățile. Browserul Internet Explorer în anumite situații afișează mesajul: „Permiteți scripturi pe pagină?”. În acest caz, sunt înțelese scripturi.

CGI (Uzual Poarta de acces Interfață) - denumirea generală a programelor care, lucrând pe 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- construirea limbajului HTML. Vă puteți gândi la el ca la un container care conț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 capacitatea de a cuibări elemente. 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 domeniul de aplicare al 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ă. Text care nu se află între aceste paranteze (< >) este vizibil în întregime atunci când este vizualizat într-un browser. De exemplu:

<Начальный тег>Conținutul elementului, datele care

formatează elementul

<Р>Acest text va fi î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 elementului. 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 seta culoarea și dimensiunea fontului, alinierea paragraf textși așa mai departe. Dacă elementul conține o imagine, atunci atributele pot seta dimensiunea imaginii, prezența și dimensiunea cadrului din jurul imaginii etc.

<Р align="center">Acest text va fi aliniat la centrul ecranului

În acest exemplu, există din nou o etichetă care definește începutul și sfârșitul unui paragraf. Cu toate acestea, eticheta de început conține atributul align, care setează alinierea textului în centrul ecranului.

Notă:

Orice informație utilă trebuie să fie între etichetele de început și de sfârșit care indică formatul acesteia;

Toate atributele sunt localizate în eticheta de pornire;

Pentru comoditate, 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ă. Elementele imbricate sunt indentate (tab). Din nou, acest lucru nu este necesar, dar vă va ușura mult munca.

O pagină Web este un document special formatat care poate include text, grafică, hyperlinkuri, audio, animație și video.

Mai multe pagini web care împărtășesc o temă, un design și legături comune și sunt de obicei situate pe același server web formează un site web.

Site web ait (din engleză. site-ul web: web- „web, rețea” și site-ul- „loc”, literal „loc, segment, parte în rețea”) - un set documente electronice(fișiere) unei persoane sau organizații în rețea de calculatoare, combinate sub o singură adresă (nume de domeniu sau adresă IP).

Toate site-urile alcătuiesc împreunăWorld Wide Web, unde comunicarea (web) unește segmente de informații ale comunității mondiale într-un singur întreg - o bază de date și comunicații la scară planetară. Pentru accesul direct al clienților la site-urile de pe servere a fost dezvoltat un protocol special http .

Un site web este structurat ca o revistă care conține informații despre un subiect sau problemă. La fel cum o revistă este alcătuită din pagini tipărite, un site Web este alcătuit din pagini Web generate de computer.

Programul care afișează o pagină web se numește browser web.

Crearea site-urilor Web este implementată folosind limbajul de marcare al documentelor hipertext HTML. Tehnologia HTML este că caracterele de control (etichete) sunt inserate într-un document cu text simplu și, ca rezultat, obținem o pagină Web. Browserul, la încărcarea unei pagini Web, o prezintă pe ecran în forma specificată de etichete.

HTML permite:

Formatarea textului

include imagini, multimedia în document;

Acest limbaj creează legături hipertext către alte pagini Web.

HTML este folosit pentru a crea conținutul informativ al unui fișier și pentru a defini structura și formatul paginilor Web. Deoarece fișierele HTML sunt fișiere text simplu, un astfel de fișier poate fi trimis practic la orice computer.

Pentru a crea pagini Web, se folosesc editori de text simpli care nu includ caractere de control al formatării textului în documentul creat. Ca un astfel de editor în Windows, puteți utiliza aplicație standard"Caiet".

De obicei, un fișier de pagină Web are extensia .html sau .htm.

În plus, există multe tehnologii în care pașii principali pentru crearea site-urilor sunt deja automatizați, rămâne doar să faceți modificări în conformitate cu subiectul lor.

Vizualizarea unei pagini HTML este la fel de simplă ca introducerea adresei URL a acesteia în bara de adrese a browserului Web și apoi urmărirea hyperlinkurilor. Dar aceasta este tocmai problema principală - cum să aflați adresa paginii? Cel mai adesea se întâmplă să știi ce trebuie să găsești, dar să nu știi exact unde să cauți. Pentru a rezolva această problemă, există motoare de căutare speciale. Din punctul de vedere al utilizatorului, sistem de căutare este un site normal pagina principala care conține link-uri către alte site-uri împărțite pe titluri („Sport”, „Afaceri”, „Computere”, etc.). În plus, motorul de căutare permite utilizatorului să introducă mai multe cuvinte cheie și returnează link-uri către paginile care conțin acele cuvinte cheie.

site web

Website (eng. Website, de la web - web și site - „loc”) - un set de documente ale unei persoane sau organizații private unite sub o singură adresă într-o rețea de calculatoare. În mod implicit, se presupune că site-ul se află pe Internet. Toate site-urile de internet formează în mod colectiv World Wide Web. Protocolul HTTP a fost special conceput pentru accesul direct al clientului la site-uri web de pe servere. Site-urile web sunt altfel cunoscute ca reprezentarea pe Internet a unei persoane sau organizații. Când spun „propria ta pagină de pe Internet”, înseamnă un întreg site web sau o pagină personală ca parte a site-ului altcuiva. Pe lângă site-urile web de pe Internet, sunt disponibile și site-uri WAP pentru telefoane mobile.

Inițial, site-urile web erau colecții de documente statice. În prezent, majoritatea se caracterizează prin dinamism și interactivitate. Pentru astfel de cazuri, experții folosesc termenul de aplicație web - gata pachete software pentru a rezolva problemele site-ului. O aplicație web face parte dintr-un site web, dar o aplicație web fără date este doar din punct de vedere tehnic un site web.

În cele mai multe cazuri, pe Internet, un site web corespunde unui nume de domeniu. Tocmai conform nume de domenii site-urile sunt identificate în retea globala. Sunt posibile și alte opțiuni: un site pe mai multe domenii sau mai multe site-uri sub un singur domeniu. De obicei, mai multe domenii folosesc site-uri mari (portale web) pentru a separa logic diferitele tipuri de servicii furnizate (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Există, de asemenea, cazuri frecvente de alocare de domenii separate pentru tari diferite sau limbi. De exemplu, google.ru și google.fr sunt în mod logic un site Google în diferite limbi, dar din punct de vedere tehnic sunt site-uri diferite. Combinarea mai multor site-uri sub un domeniu este tipică pentru hosting gratuit. Pentru a identifica site-urile din adresă, după specificarea gazdei, există un tilde și numele site-ului: example.com/~my-site-name/.




Top