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

Înainte de a începe călătoria noastră prin lecțiile de construire a site-urilor web HTML și CSS, este important să înțelegem diferențele dintre cele două limbi, sintaxa fiecărei limbi și unele terminologii de bază.

Ce sunt HTML și CSS?

HTML (HyperText Markup Language) definește structura conținutului și semnificația acestuia, definind conținut precum titluri, paragrafe sau imagini. CSS (Cascading Style Sheets) este un limbaj de prezentare creat pentru a stila 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.

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, probabil că veți întâlni niște termeni noi și adesea ciudați. Veți deveni mai familiar cu toți în timp, dar pentru moment 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

); Puteți include elemente în 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 elementului. Etichetele apar cel mai adesea în perechi de etichete de deschidere și de închidere.

Eticheta de deschidere marchează începutul elementului. Este format dintr-un simbol<, затем идёт имя элемента и завершается символом >; De exemplu,

.

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

.

Conținutul care apare între etichetele de deschidere și de închidere 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 vor 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 un atribut href, care specifică o legătură către resursa asociată.

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 va arăta astfel:

Shay Howe

Demonstrarea termenilor HTML de bază

Acest cod va afișa textul „Shay Howe” pe o pagină web și, atunci când faceți clic pe acest text, utilizatorul va ajunge la http://shayhowe.com. Elementul link este declarat folosind o etichetă de deschidere și eticheta de închidere care acoperă textul, precum și atributul și valoarea adresei linkului declarate prin href="http://shayhowe.com" în eticheta de deschidere.

Orez. 1.01. Sintaxa HTML sub formă de schiță include element, atribut și etichetă

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

Personalizarea structurii documentului HTML

Documentele HTML sunt simple documente text salvate cu extensia .html mai degrabă decât .txt. Pentru a începe să scrieți HTML, aveți nevoie mai întâi de un editor de text pe care să vă simțiți confortabil. 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 de asemenea, Notepad++ pentru Windows și TextWrangler pentru Mac.

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

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

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), linkuri către orice fișiere externe sau orice alte metadate utile.

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

Salut Lume!

Salut Lume!

Aceasta este o pagină web.



Demonstrarea structurii documentului HTML

Acest cod arată documentul, începând cu declarația tipului de document,, apoi apare imediat elementul . Interior vin elemente Și . Element conține codificarea paginii prin intermediul etichetei și titlul documentului prin element . Element <body>include titlul prin element <h1>și un paragraf de text prin<р>. Pentru că 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 ca imbricat, este o idee bună să-l indentați pentru a menține structura documentului bine organizată și lizibilă. În codul anterior ambele elemente <head>Și <body>imbricat și deplasat în cadrul elementului <html>. Structura de indentare pentru elemente continuă cu elemente noi 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, acest lucru a fost făcut intenționat. Nu toate elementele constau din etichete de deschidere și de închidere. Unele elemente primesc pur și simplu conținut sau comportament prin atribute dintr-o singură etichetă. <meta>este unul dintre aceste elemente. Conținutul elementului <meta>în exemplu este atribuit folosind atributul charset și o valoare. 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>Structură redusă realizată folosind o declarație de tip de document<!DOCTYPE html>și elemente <html> , <head>Și <body>, este destul de comun. Dorim să păstrăm această structură de document convenabilă, deoarece o vom folosi des atunci când creăm noi documente HTML.</p><h3>Validarea codului</h3><p>Indiferent cât de atent ne scriem codul, erorile 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. Revizuirea codului nostru nu numai că ajută la redarea corectă în toate browserele, dar ajută și la predarea celor mai bune practici la scrierea codului.</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 pe parcursul următoarelor lecții. 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 de la 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. La fel ca în terminologia HTML, cu cât lucrați mai mult cu CSS, cu atât acești termeni devin a doua natură.</p><h3>Selectoare</h3><p>Când adăugați elemente la o pagină web, acestea pot fi stilate folosind 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 combinate cu acolade (), care includ stilurile care sunt 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 chiar î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 doar un element printr-un selector și am determinat ce stil am dori să-i aplicăm prin proprietăți. 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 culoare la portocaliu și valoarea proprietății dimensiune font la 16 pixeli.</p><p>P (culoare: portocaliu; dimensiunea fontului: 16px; )</p><p>Pentru a testa acest lucru, în CSS setul nostru de reguli începe cu un selector, urmat imediat de acolade. Aceste acolade conțin declarații formate din perechi de proprietăți și valori. Fiecare declarație începe cu o proprietate, urmată de două puncte, valoarea proprietății și, în final, un punct și virgulă.</p><p>O practică comună este schimbarea perechilor de proprietăți și valori în interiorul acoladelor. 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 acoperit înainte de a ne arunca î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/installation-and-configuration/kak-postavit-otpechatok-palca-na-meizu-5c-obzor-meizu-m5c-dostupnyi.html">tipuri variate</a> selectoare. Vom începe cu cei mai de bază selectori: selectoare de tip, clasă și identificator.</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 aceleași stiluri diferitelor elemente simultan, folosind aceeași valoare a atributului de clasă pentru mai multe elemente.</p><p>În CSS, clasele sunt reprezentate de un punct de început urmat de valoarea atributului de clasă. Selectorul de sub clasă selectează toate elementele care conțin valoarea atributului de clasă minunată, 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 afișat, valoarea atributului id poate fi folosită o singură dată pe o pagină. Dacă ID-urile sunt prezente, atunci acestea ar trebui rezervate pentru elementele importante.</p><p>În CSS, identificatorii sunt reprezentați de un simbol hash în față, urmat de valoarea atributului id. Aici id-ul 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 lucruri 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 disponibile și sunt ușor disponibile. Odată ce vă simțiți confortabil cu ele, nu vă fie teamă să le verificați pe 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 folosind CSS. Acum să conectăm punctele dintre HTML și CSS pentru a face ca cele două limbi să funcționeze împreună.</p><h2>Conectarea 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. O bună practică este să includem toate stilurile noastre într-un singur fișier extern, care este indicat în cadrul elementului <head>documentul nostru HTML. Utilizarea unui CSS extern ne permite să aplicăm aceleași stiluri pe tot site-ul și să facem modificări rapide.</p><h3>Alte opțiuni pentru adăugarea CSS</h3><p>Alte opțiuni pentru încorporarea CSS includ utilizarea stilurilor interne și inline. Este posibil să întâlniți aceste opțiuni în realitate, dar ele sunt, în general, descurajate, deoarece fac ca actualizarea site-urilor să fie greoaie și greoaie.</p><p>Pentru a crea foaia de stil externă, dorim din nou să folosim editorul de text ales pentru a crea un nou <a href="https://5visa.ru/ro/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">fisier text</a> cu extensia .css. Fișierul nostru CSS ar trebui 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 o valoare de foaie de stil pentru a indica relația lor. În plus, atributul href este folosit pentru a indica locația sau calea fișierului CSS.</p><p>În următorul exemplu de document HTML, elementul <head>indică către 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 stocat 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 este situat într-un subdosar, atunci valoarea atributului href trebuie să corespundă în mod corespunzător acelei căi. 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. Aceasta folosește o bară oblică (sau bară oblică) pentru a indica mutarea într-un subdosar.</p><p>Pe <a href="https://5visa.ru/ro/firmware/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 rescrie aceste stiluri destul de ușor, ceea ce vom face în continuare folosind o resetare CSS.</p><h2>Folosind resetarea CSS</h2><p>Fiecare browser are propriile stiluri implicite pentru <a href="https://5visa.ru/ro/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">diverse elemente</a>. Cum <a href="https://5visa.ru/ro/installation-and-configuration/ispolzovanie-rasshireniya-chrome-to-mobile-dlya-otpravki-stranicy-na-mobilnoe.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>. Pentru a asigura compatibilitatea între browsere, resetarea CSS a devenit utilizată pe scară largă.</p><p>O resetare CSS preia toate elementele HTML de bază cu un stil dat și oferă un stil consecvent în toate browserele. Aceste resetări implică, de obicei, eliminarea dimensiunilor, umpluturii, marginilor sau stilurilor suplimentare care scad aceste valori. Deoarece cascada CSS funcționează de sus în jos (veți afla 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/program/sohranenie-parolya-vkontakte-v-raznyh-brauzerah-kak-sohranit-stranicu-v.html">browsere diferite</a> va începe să lucreze 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/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">punctele forte</a>. Unul dintre cele mai populare de la 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 creat de Nicholas Gallagher. Normalize.css nu se concentrează pe utilizarea unei resetari hard pentru toate elementele de bază, ci pe setarea stilurilor comune pentru acele elemente. Acest lucru necesită o înțelegere mai profundă a CSS, precum și cunoașterea a ceea ce ați dori să obțineți din stiluri.</p><h3>Compatibilitate și testare între browsere</h3><p>După cum am menționat mai devreme, diferitele browsere redă elementele diferit. Este important să recunoaștem importanța compatibilității și a testării între browsere. Site-urile nu ar trebui 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ă va trebui să luați o decizie în funcție de ceea ce este mai bine pentru site-ul dvs.</p><p>Există mai multe lucruri la care trebuie să acordați atenție atunci când scrieți CSS. Vestea bună este că poți face totul și este nevoie doar de puțină răbdare pentru a le 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 resursele pentru site-ul nostru web, cum ar fi stiluri, imagini, videoclipuri etc. Pentru stilurile noastre, să continuăm și să adăugăm un alt folder de foi de stil în dosarul assets.</li><li>Folosind un editor de text, să creăm un nou fișier numit main.css și să-l salvăm în folderul foi de stil pe care tocmai l-am creat.</li><p>Privind fișierul index.html din browser putem observa 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: colaps; distanță-limită: 0; )</p><li>Fișierul nostru main.css începe să prindă contur, așa că haideți să-l conectăm la fișierul 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>Deoarece indicăm stiluri prin element <link>adăugați un atribut rel cu foaia de stil valoare .</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 verificăm munca și să vedem cum funcționează împreună 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ă și, de asemenea, puteți descărca 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.

Pentru a recapitula, am acoperit următoarele:

  • Diferența dintre HTML și CSS.
  • Introducere în elementele, etichetele și atributele HTML.
  • Configurarea structurii primei pagini web.
  • Introducere în selectoare, proprietăți și valori 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ă ne familiarizăm puțin cu 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

Cea mai mare parte a conținutului prezentat pe Internet sunt pagini web. Acesta este, din punct de vedere istoric, primul tip de document destinat plasării într-un spațiu de rețea virtuală, dar încă rămâne relevant și practic nu are formate concurente. Care este structura paginilor web? Ce instrumente de dezvoltare web sunt folosite pentru a crea?

Ce este o pagină Web?

„Enumerați elementele principale ale unei pagini Web”, ne spune examinatorul într-o lecție de informatică. Ce putem să-i spunem ca răspuns? În primul rând, vom vorbi despre ce este o pagină web în principiu.

Conform definiției general acceptate în rândul specialiștilor IT, acesta este un document care este destinat a fi deschis într-un program specializat - un browser și care conține date pentru afișare pe ecranul computerului folosind tipul adecvat de software cu conținut util variat - texte , link-uri, grafică, videoclipuri, muzică și etc. O pagină web este Document text. Datele corespunzătoare 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 poate conține link-uri către ele în structura sa. Astfel, pagina web poate fi numită componenta principală a site-ului în ceea ce privește rolul său dominant în afișarea conținutului virtual în fața utilizatorilor.

Î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 web - când au apărut pentru prima dată limbajele de marcare a paginilor web - nu includeau conținut relevant. În fața ochilor utilizatorului existau doar text și linkuri.

Principiul folosirii hipertextului

Deci, o pagină Web este un document compilat 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. Acest lucru este imposibil într-o carte obișnuită - există „text simplu”. Pentru a accesa pagina dorită, cititorul trebuie să facă mai multe ture, citind mai întâi cuprinsul sau notele de subsol. În modul hipertext, cea mai mare parte a muncii este realizată de computer, folosind informații reflectate în elementele HTML ale paginii.

Dacă un profesor de informatică ne spune: „Enumerați elementele principale ale unei pagini web”, atunci putem începe destul de corect să vorbim despre componentele documentului corespunzător care sunt create folosind limbajul de marcare HTML. Prin urmare, mai întâi, 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 a acestei limbi- acestea sunt etichete. În cele mai multe cazuri, sunt împerecheate - există una de deschidere și una de închidere. Primele sunt indicate folosind doar paranteze unghiulare. Cele doua sunt similare, dar înainte de a doua paranteză există 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 cu litere mici. Acesta este un standard care a devenit stabilit printre specialiștii IT. Browserul va recunoaște, desigur, comanda HTML în orice literă, dar dezvoltatorii web sunt sfătuiți totuși să adere la schema de scriere a etichetelor marcate. Acest lucru va face mai ușor, de exemplu, pentru alți specialiști să îmbunătățească pagina web.

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 acestuia, 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. Acesta poate fi text, un link, o imagine, un videoclip sau un alt element multimedia.

Elemente de pagină web

„Așadar, enumerați elementele principale ale unei pagini web, în ​​sfârșit!” – repetă profesorul. „Cu plăcere”, îi răspundem noi. Ce este inclus în structura tipului de document luat î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 o caracteristică a limbajului HTML: imaginea dorită pe o pagină Web poate fi afișată căi diferite. În același timp, acestea pot fi fie echivalente în ceea ce privește costurile de muncă ale creatorului paginii web, fie necesită 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 prezentate în cantități foarte mici. De fapt, există doar două dintre ele - titlul și corpul principal al documentului. În același timp, fiecare dintre ele poate avea o structură destul de complexă.

Care sunt specificul titlului? Este situat chiar în partea de sus a paginii web. Codul HTML care formează antetul are de obicei scopul de a „cripta” doar textul, 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 asta nu este adevărat. Titlurile paginilor web sunt foarte semnificative din punctul de vedere al indexării site-urilor în motoarele de căutare - Yandex, Google. Acest element trebuie să fie complet 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, este scrisă eticheta de deschidere, care arată întotdeauna ca HEAD cu paranteze unghiulare, apoi conținutul antetului, apoi 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 vă puteți asigura că documentul dvs. web îndeplinește acest criteriu? Foarte simplu. Algoritmii HTML trebuie plasați în structura antetului documentului, indicând 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.

Partea principală a paginii web

Partea principală a documentului web se deschide cu eticheta BODY și se închide cu elementul corespunzător, inclusiv o bară oblică. Mai mult, între etichetele de deschidere și de închidere poate exista un număr mare de comenzi suplimentare pentru limbajul de marcare hipertext. 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 corespunzătoare de conținut are propriile etichete. Structura părții principale a unui document web poate conține comenzi HTML, care sunt, de asemenea, folosite pentru a formata textul - de exemplu, dând fontului o anumită culoare, dimensiune și alte proprietăți.

Să ne uităm la specificul unor etichete HTML utilizate în mod obișnuit. De fapt, ele formează elementele principale ale unei pagini 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 prezentat deja unele dintre ele mai sus - în special cele cu ajutorul cărora browserul citește anteturile paginilor web și determină unde se află partea principală a 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. Cu toate acestea, acest lucru se face folosind o etichetă suplimentară - FONT. În acest caz, va fi plasat în interiorul celui care marchează limitele paragrafului - acest lucru va împiedica distribuirea comenzii 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, marginile specifice, 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 și 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 există atribute care indică faptul că există un hyperlink în structura paginii web. În acest caz, se indică documentul, dosarul sau site-ul către care duce.

O etichetă comună este FRAMESET. Cu ajutorul acestuia, puteți împărți spațiul unei pagini web în mai multe zone - cadre. În fiecare dintre ele puteți utiliza documente web separate. Adică, cadrele vă permit să poziționați corect două sau mai multe pagini pe un ecran în același timp.

O poveste despre elementele cheie ale paginilor web și o poveste ulterioară despre mijloacele de formatare a acestora folosind limbajul HTML - aproximativ acesta va fi algoritmul pentru răspunsul nostru la întrebarea pe care ne-a pus-o examinatorul. Dacă a venit la noi spunând „enumerați elementele principale ale unei pagini Web”, atunci noi, folosind metodologia adecvată, vom avea toate șansele să descoperim 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 generează folosind un instrument precum limbajul HTML .

Specificul instrumentelor de dezvoltare web

Pe lângă ceea ce s-a spus, putem explica 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 folosind 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. Provocările 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, instrumentele dezvoltatorului vor fi foarte diverse.

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, dobândirea deprinderilor în crearea de documente Web statice simple.

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

Informații teoretice

Noțiuni de bază

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

document HTML;

document web;

Pagină web.

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

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

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

Applet (Applet) - un program transferat pe computerul client 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 extinde capacitățile. În anumite situații, browserul Internet Explorer afișează mesajul: „Permiteți executarea scriptului pe pagină?” În acest caz ne referim la scripturi.

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

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

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

<Начало элемента>Conținutul elementului, datele pe care elementul le formatează

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

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

formatează un element

<Р>Acest text va fi amplasat într-un paragraf separat

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

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

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

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

Notă:

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

Toate atributele sunt localizate în eticheta de pornire;

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

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

Începeți să scrieți fiecare element nou pe o linie nouă. Indentați elementele imbricate (filă). 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 au o temă, un design și legături comune și, de obicei, rezidă pe același server web, formează un site web.

Site web (din engleză. site-ul web: web- „web, rețea” și site-ul- „loc”, literal „loc, segment, parte a rețelei”) - o colecție documente electronice(dosare) unei persoane sau organizații în rețea de calculatoare, unite sub o singură adresă (nume de domeniu sau adresă IP).

Toate site-urile împreună constituieWorld wide web, unde comunicarea (web) unește segmente de informații din comunitatea mondială într-un singur întreg - o bază de date și comunicații la scară planetară. A fost dezvoltat special un protocol pentru accesul direct al clienților la site-urile de pe servere HTTP .

Un site web este structurat ca o revistă care conține informații despre un anumit subiect sau problemă. Așa cum o revistă este formată din pagini tipărite, un site Web este format din pagini Web de computer.

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

Site-urile web sunt create folosind limbajul de marcare a documentelor hipertext HTML. Tehnologia HTML constă în inserarea caracterelor de control (etichete) într-un document text obișnuit și ca rezultat obținem o pagină Web. La încărcarea unei pagini Web, browserul o prezintă pe ecran în forma specificată de etichete.

HTML vă permite să:

· formatarea textului;

· include imagini și multimedia în document;

· Folosind această limbă, sunt create legături hipertext către alte pagini Web.

HTML este folosit pentru a crea conținut de informații despre fișiere și pentru a defini structura și formatul paginilor Web. Deoarece fișierele HTML sunt doar fișiere text simplu, un astfel de fișier poate fi trimis la aproape 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 acțiunile de bază ale creării site-urilor web sunt deja automatizate; tot ce rămâne este să faci modificări în conformitate cu subiectul tău.

Pentru a vizualiza o pagină HTML, introduceți pur și simplu adresa URL a acesteia în bara de adrese a browserului dvs. Web și apoi urmați hyperlinkurile. 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 unde să cauți exact. Pentru a rezolva această problemă, există motoare de căutare speciale. Din punctul de vedere al utilizatorului, sistem de căutare- acesta este un site obișnuit pe pagina principala care conține link-uri către alte site-uri, defalcate pe categorii („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

Un site web (site în engleză, de la web - web și site - „loc”) este o colecție 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 dezvoltat special pentru ca clienții să acceseze direct site-urile de pe servere. Site-urile web sunt altfel numite 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 făcută 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.

În cele mai multe cazuri, pe Internet, un site web corespunde unui nume de domeniu. Exact 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 sunt folosite de 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 în care sunt alocate domenii separate pentru tari diferite sau limbi. De exemplu, google.ru și google.fr sunt în mod logic site-uri Google în limbi diferite, 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, adresa conține o tildă și numele site-ului după gazdă: example.com/~my-site-name/.




Top