Termeni

Iată câțiva termeni pe care îi veți întâlni mai jos.

1. www- cunoscuta abreviere a World Wide Web, sinonim pentru Internet.
2. web este abrevierea pentru World Wide Web.
3. Pagină web- un document separat (un fișier text pregătit într-un mod special) stocat pe Internet.
4. browser web- software necesar pentru afișarea unei pagini web.
5. Site-ul web- un set de pagini web deținute de același proprietar.
6. Pagina principala- pagina principală (de titlu) a site-ului.
7. URL- Uniform Resource Locator, folosit pentru a specifica adresa unei pagini din WWW.
8. server web- un computer cu software special pe care trebuie plasate pagini web pentru a putea fi văzute pe Internet.

Ce este hipertextul?

Principalul avantaj al WWW-ului este crearea de documente hipertext, iar dacă sunteți interesat de orice articol dintr-un astfel de document, atunci doar „împingeți”-l cu cursorul pentru a obține informațiile necesare. De asemenea, este posibil să se facă legături într-un document către altele scrise de alți autori sau chiar localizate pe un alt server. Unul dintre principalele avantaje ale WWW față de alte mijloace de căutare și transmitere a informațiilor este „multi-media”. În WWW, puteți vedea text și imagine, sunet și animație pe o singură pagină în același timp. Puteți citi foarte pe scurt despre istoria hipertextului pe site-ul lui Artemy Lebedev.

Ce este HTML?

HTML înseamnă H yper T ext M arkup L unghi, adică limbaj de marcare hipertext. Acesta este standardul prin care documentele web sunt redate de browsere. După cum sugerează și numele, HTML este o metodă de marcare a textului simplu, astfel încât browserul să afișeze informațiile în formatul corect. Fișierele care conțin text cu marcaj html trebuie să aibă extensia htm sau html.

Comenzile din limbajul HTML se numesc tag-uri (tag), ele indică ce operație trebuie efectuată, de exemplu, afișarea textului, trasarea unei linii sau utilizarea graficelor. Etichetele conținute în text pot schimba fonturile, stilurile și pot crea efecte speciale. Acest lucru vă permite să oferiți o interfață grafică interesantă atunci când afișați un fișier text standard. Pe lângă schimbarea stilului textului, HTML îi spune și browserului când un anumit text dintr-o pagină ar trebui considerat un link hipertext, unde să insereze elemente grafice și speciale, să trimită comenzi prin e-mail și alte caracteristici de accesibilitate.

HTML nu este un limbaj de programare în sensul deplin al cuvântului. Are un format specific, care este standardul mondial. Acest standard se numește Definirea tipului de document(Definiția tipului de document) sau DTD. Versiunea 1.0 a fost primul DTD HTML care a fost introdus pe web. Apoi a fost creată versiunea 2.0 pentru WWW, mai atentă. Acum standardul este HTML versiunea 4.0.

Structura comenzilor HTML

Comenzile HTML (etichete) sunt incluse între paranteze unghiulare:

<название_команды>- pornire comanda

câmpul de comandă

- sfârşitul comenzii

Standardul limbajului HTML necesită prezența etichetei de sfârșit de comandă, dacă nu este menționat altfel.

Prima comandă dintr-un document html este comanda , respectiv, ultima comandă va fi -(pronunţat "nu html").

În general, structura unui document html arată astfel:

acestea. Există două secțiuni distincte: („cap”) și ("corp").

COMETARIU. Limbajul HTML nu face distincție între majuscule și minuscule. Comenzile de limbă pot fi tastate atât cu litere mari, cât și cu litere mici, de ex. echipă este echivalent cu comanda sau .
Dacă browserul nu acceptă comanda, pur și simplu o ignoră.

Prima linie a unui document html este o comandă de utilitate care permite browserului să identifice tipul de document (DOCTYPE) ca document în standardul HTML 4.0 definit de IETF (Internet Engineering Task Force). Această linie indică, de asemenea, DTD-ul corespunzător (Declarație de tip document - descriere tip document): documentul este PUBLIC (adică nu depinde de setările sistemului) și limba documentului este rusă (RU).

În partea de cap a documentului html există o comandă care afișează numele paginii în titlul ferestrei browser (bara albastră din partea de sus a ferestrei):

Textul real care ar trebui să fie în documentul html este plasat între comenzi și, de exemplu:

Bun venit la HTML!

Pentru a vedea cum va arăta acest exemplu în browser, trebuie să copiați totul în Notepad, să salvați fișierul sub numele primer.htm, iar apoi în Explorer faceți clic pe numele fișierului - ca urmare, acest document html se va deschide automat în fereastra Internet Explorer:

Atribute

Comenzile pot avea parametri apelați atribute. Atributele modifică execuția unei comenzi, sunt plasate imediat după numele comenzii, între paranteze unghiulare și au următorul format:

ATTRIBUTE="valoare_atribut"

Dacă attribute_value constă dintr-un singur cuvânt, atunci ghilimelele nu sunt necesare. Dacă valoarea_atributului conține spații sau caractere non-alfabetice, sunt necesare ghilimele.

Dacă o comandă are mai multe atribute, acestea sunt separate prin spații:

<название_команды

attribute1="valoare_atribut1"

attribute2="valoare_atribut2">

Ca exemplu de atribute, luați în considerare comanda , care setează codificarea Windows pentru literele alfabetului rus și se află strict în interior secțiune :

Dacă comanda săriți, atunci sunt posibile situații când pe ecranul browserului în loc de litere rusești va apărea „krakozyabry”. Și când utilizați această comandă, acest lucru nu se va întâmpla!

Editore HTML

Toate documentele html sunt scrise ca text simplu, astfel încât pot fi create și editate în orice editor de text, cum ar fi Notepad. Dar este mult mai convenabil să folosești editori html specializati, de exemplu UltraEdit(licentiat) sau Smart Web Builder(gratuit).

În aceste editoare, toate comenzile din limbajul HTML sunt afișate într-o culoare, iar atributele comenzilor în alta. În timp ce doar textul va fi negru. Din acest motiv, dacă un nume de comandă (sau un atribut) este scris greșit, acesta va fi afișat cu negru, ca textul normal.

Colorează în documentul html

Echipă are mai multe atribute.

Atributul bgcolor= vă permite să setați culoarea de fundal a paginii:

Această pagină are un fundal galben.

Culoarea poate fi specificată în două moduri:

• Specificarea numelui culorii selectate.
• Prin specificarea unui număr de culoare ca raport de nuanțe de roșu, verde și albastru (Roșu-Verde-Albastru=RGB).

Numărul RGB al unei culori este specificat fie prin trei numere hexazecimale (HEX) din două cifre (numărul trebuie să fie precedat de semnul #), fie folosind funcția încorporată rgb(), fiecare dintre ale cărei trei argumente poate varia de la de la 0 la 255, de exemplu: rgb(153,102,255). Fiecare număr din intervalul () determină intensitatea culorii corespunzătoare.

De exemplu, numărul de culoare „#FF0000”=rgb(255,0,0) corespunde culorii roșii (roșu), deoarece are intensitatea maximă pentru componenta roșie, iar componentele verde și albastru au valori egale la zero. În mod similar, numărul „#00FF00”=rgb(0,255,0) corespunde cu Verde (Verde), iar numărul „#0000FF”=rgb(0,0,255) corespunde cu Albastru.

Există 16 nume standard de culori acceptate de Windows:

	Negru = "#000000"		Verde = "#008000"
	Argint = „#C0C0C0”		tei = "#00FF00"
	Gri = „#808080”		Măsline = "#808000"
	Alb = „#FFFFFF”		Galben = „#FFFF00”
	Maroon = "#800000"		Marină = „#000080”
	Roșu = „#FF0000”		Albastru = „#0000FF”
	Violet = "#800080"		Teal = "#008080"
	Fucsia = "#FF00FF"		Aqua = "#00FFFF"

Pe lângă aceste 16 nume de culori, există și un tabel extins de culori. Numele de culori din acest tabel pot fi folosite, dar este încă mai sigur să setați numărul RGB. Cert este că, deși sarcina Roșu-Verde-Albastru vă permite teoretic să afișați „un milion” de culori, de fapt totul este determinat de placa video și monitorul pe care le folosește clientul.

La crearea unei imagini pentru publicare pe Internet, principala problemă este reproducerea corectă a culorilor pe diferite tipuri de computere, monitoare și browsere. Când browserul nu poate reda corect o anumită culoare, preia o altă culoare sau amestecă mai multe culori învecinate. Uneori, culoarea poate fi înlocuită cu ceva complet nepotrivit. Prin urmare, a fost dezvoltată așa-numita paletă de culori „sigură”. Când utilizați culori din această paletă, puteți fi sigur că fiecare culoare va fi redată corect și fără distorsiuni. Oricare dintre cele 216 culori ale paletei „sigure” poate fi folosită pentru grafică, text și fundal. Paleta este formată din 32 de combinații din 6 nuanțe de roșu, verde și albastru.

Titluri

HTML are șase nivele de titluri, numerotate de la 1 la 6 (antetul de la primul nivel este cel mai mare). Comparativ cu textul normal, titlurile sunt îngroşate automat.

Sintaxa antetului:

Cel mai mare titlu, centrat

Titlu de mărime medie, poziționat ca?

Cel mai mic antet

aici h este comanda antetului în sine ( antet), iar un număr de la 1 la 6 determină dimensiunea antetului,
align= - un atribut care specifică locația titlului pe ecran:
align=left - plasați în stânga (acceptat implicit, adică nu puteți specifica)
align=center - centrați fereastra
align=right - plasați în partea dreaptă a ferestrei browserului.

paragrafe

Comanda Paragraf

Are, de asemenea, un atribut align=, care, pe lângă cele trei valori de mai sus, poate avea și valoarea justify:

care stabilește alinierea marginii drepte a textului pe ecran (cum se face în acest text).

Spre deosebire de documentele create în editorul Word, rupturile de rând nu sunt esențiale în documentele html. O întrerupere de linie poate apărea în orice spațiu din fișierul sursă și va fi ignorată de vizualizator. De exemplu:

Capitolul 1

Bun venit la HTML!

Vă va spune cum și cum să nu faceți pagini web.

Nu este atât de greu.

În fișierul sursă, cele două propoziții din primul paragraf sunt pe două rânduri diferite. Browserul ignoră această întrerupere de linie și începe doar un nou paragraf după comandă

Folosind comanda
puteți trece la un rând nou fără a începe un nou paragraf (în majoritatea browserelor, paragrafele sunt marcate cu linii goale suplimentare). De exemplu, linia

Facultate
unde învățăm

Spațiu care nu se rupe

Deoarece browserul ignoră întreruperile de linie în fișierul html, unde o linie de pe ecran se termină de fapt și începe alta depinde de dimensiunea fontului de pe ecranul clientului. În plus, browserul ignoră orice număr de spații între cuvinte - toate spațiile sunt înlocuite cu unul singur. Prin urmare, dacă doriți să puneți mai multe spații la rând, așa-numitele caracter primitiv„spațiu care nu se întrerupe” care începe cu ampersand (&) și se termină cu punct și virgulă: (prescurtare pentru Spațiu fără pauză).

Primitivele de caractere sunt sensibile la majuscule și minuscule: NU POATE fi folosite în locul lui.

De exemplu, linia

Facultatea unde studiem

va arăta astfel pe ecran:

Deoarece browserul rupe linia la un spațiu, este posibil ca, de exemplu, inițialele să rămână pe o linie, iar numele de familie să se „mute” pe alta. Pentru a preveni acest lucru, între inițiale și nume de familie trebuie să se așeze un spațiu care nu se rupe.

În tipografia rusă, există reguli stricte pentru plasarea caracterului spațiu care nu se sparge.

Caracter de spațiu care nu se rupe(o notăm ca ) este stabilită în următoarele cazuri.

1. Înainte de liniuță:
   Acesta este un exemplu
   acestea. O liniuță nu are voie să înceapă o linie decât dacă este începutul unei propoziții de vorbire directă.
2. Între două inițiale și inițiale și prenume:
   I. I. Ivanov
   acestea. opțiune fără spații deloc: I.I. Ivanov - categoric inacceptabil!
3. Între un semn numeric (#) sau un semn de paragraf (§) și următoarele cifre:
   Nr. 7, § 3
   și iată opțiunea fără spațiu: Nr. 7 - cea mai tipică greșeală grosolană!
4. Între număr și următoarea unitate de măsură:
   Secolul al XVIII-lea, 10 kg, 2000
5. Între abreviere și prenume:
   domnule Petrov
6. După abrevieri geografice:
   Novosibirsk, r. Ob

Schimbarea textului

Pentru a afișa text cu o ușoară deplasare la dreapta (din partea stângă a ecranului), cum ar fi poezia, utilizați comenzile:

Facultate
unde învățăm

va arăta astfel pe ecran:

Liste

Astăzi, listările pot fi văzute pe aproape fiecare pagină web. Există mai multe formate de listă care vă permit să evidențiați anumite informații în text standard. Într-un paragraf obișnuit, textul se încadrează de la rând la rând. Textul din liste arată diferit. Elementele din listă sunt indentate din margini, separate de restul paragrafelor din text și, în plus, marcate sau numerotate.

Când sunt utilizate corect, listele fac cantități mari de informații ușor de citit și foarte vizibile. Listele pot fi imbricate unele în altele, formând o structură complexă. Puteți, de exemplu, să utilizați o listă pentru a organiza link-uri.

Există trei tipuri principale de liste: liste cu marcatori (nenumerotate), liste numerotate și liste de definiții. Sunt similare prin aceea că toate pun fiecare articol pe o linie nouă și puteți evidenția textul dorit. Principala diferență între tipurile enumerate este metoda de numerotare și structură.

listă cu puncte

Cea mai des folosită este o listă neordonată sau cu marcatori. Fiecare articol dintr-o astfel de listă începe cu o pictogramă în miniatură.

O listă cu marcatori este specificată de comenzi (Lista neordonată), iar elementele de listă dintre comenzi sunt specificate folosind comanda

(ListItem).

De exemplu, lista

Sisteme numerice

• nepozițională
  
• pozițional
  

va arata asa:

Comanda Listă

are atributul type=, care stabilește tipul de marker pentru elementele listei:
- cerc negru (valoare implicită)

- cerc de lumină

- pătrat

Dacă o listă este imbricată în alta, atunci tipul de marcator se schimbă automat:

Sisteme numerice





• nepozițională

• egipteanul antic

• român

• slavona veche

• pozițional

• babilonian

• indian

  Pe ecran arată așa:

  lista numerotata

  O listă numerotată este foarte asemănătoare cu o listă cu marcatori. Singura diferență este că într-o listă numerotată, numerele sau literele secvențiale sunt plasate automat în fața fiecărui articol în loc de marcatori grafici. Datorită acestui fapt, nu trebuie să formați manual numărul fiecărui element din listă.

  Lista numerotată este specificată cu ajutorul comenzilor

  (Lista ordonată) și
  . Ca și într-o listă cu marcatori, fiecare articol este specificat de comandă
• , de exemplu:

  Sisteme numerice

  
  
  
  
  1. nepozițională
     
  2. pozițional
     

  va arata asa:

  După cum puteți vedea, nu există numere (1, 2) lângă elementele din listă din fișierul sursă.

  În mod implicit, listele HTML sunt numerotate automat cu cifre arabe - 1, 2, 3 și așa mai departe. Puteți specifica o altă metodă de numerotare, cum ar fi literele (majuscule sau mici) sau cifrele romane. Pentru a schimba tipul de numerotare implicit, adăugați la comandă

  tip= atribut.

  Următoarele sunt cinci moduri posibile de numerotare:

  : numerotare numerică standard - 1, 2, 3, ...
  
  : litere mari - A, B, C, D, ...
  
  : litere mici - a, b, c, d, ...
  
  : cifre romane - I, II, III, IV, V, ...
  
  : cifre romane minuscule - i, ii, iii, iv, v, ...

  Dacă doriți ca numerotarea listei să înceapă de la un anumit număr, trebuie să adăugați la comandă

  de asemenea, atributul start=, de exemplu,
  .

  listă imbricată

  Sisteme numerice

  
  
  
  
  1. nepozițională
     
     
     1. egipteanul antic
        
     2. român
        
     3. slavona veche
        

  2. pozițional
     
     
     4. babilonian
        
     5. indian
        

     pe ecran arata asa:

     Lista de definiții

     Deși nu sunt la fel de frecvent utilizate ca listele cu marcatori sau numerotate, listele de definiții pot fi, de asemenea, utile în unele cazuri. Lista de definiții pentru fiecare articol oferă nu una, ci două rânduri, care pot fi utile atunci când furnizați informații suplimentare.

     Listele de definiții arată puțin diferit față de alte tipuri de liste. Pentru a seta lista în sine, se folosesc comenzile

     (Lista de definiții) și

     . În acest caz, două comenzi sunt folosite pentru a descrie fiecare element din listă, nu una. Echipă
     (Termen de definiție) specifică un singur element, adică termenul definit și comanda
     (Descrierea definiției) - restul informațiilor care sunt afișate pe următoarea linie indentată. A doua linie de informații se numește definiție.

     Exemplu de lista de definiții:

     
     

     MMF
     

     Facultatea de Mecanica si Matematica.
     

     POTRIVI
     

     Facultatea de Tehnologia Informaţiei.
     

     Salut! În articolul de astăzi, voi încerca să prescriu cele mai elementare și utile informații pentru cei care încearcă să înțeleagă limbajul de marcare hipertext HTML. Îi vom afla scopul, recenzia va descrie principalele etichete și comenzi ale limbajului HTML și principiile de lucru cu acesta. Din articol veți afla de ce și cum să utilizați HTML în practică atunci când lucrați cu un blog sau un site web.

     Principalele scopuri și obiective ale HTML

     Nu cu mult timp în urmă am fost pe blogul meu. Din acesta puteți învăța cum să utilizați CSS pentru a schimba aspectul paginii site-ului, stilul acesteia. Acum să ne ocupăm de elementele de bază ale aspectului HTML pentru începători.

     HTML este limbajul de marcare hipertext al unei pagini web, care vă permite să setați structura acesteia, să desemnați elementele sale principale pentru browser. Deci, de exemplu, încadrând textul paginii în anumite etichete html, puteți aranja paragrafe, liste, tabele. Acestea. cu ajutorul html-ului, îl explicăm browserului și, în consecință, acesta va afișa structura paginii pe care am setat-o ​​pentru utilizator.

     HTML este un instrument pentru așa-numita dezvoltare a site-ului web front-end. Ce inseamna asta? Cu siguranță ați auzit de mai multe ori că există astfel de concepte în mediul de creare a site-ului precum front-end și back-end. Deci, dezvoltarea front-end (front-end) include instrumente și limbi care sunt responsabile pentru afișarea site-ului direct către utilizator. Este afișat folosind diferite browsere (Internet Explorer, Opera, Mozilla, Chrome etc.). Citește despre. Browserele înțeleg bine HTML și CSS și transformă informațiile primite într-o formă ușor de utilizat.

     Dezvoltarea back-end se bazează pe limbaje server-side, cum ar fi PHP. Folosind codul PHP, datele site-ului sunt recunoscute de server și apoi transferate în browser după ce codul a fost convertit de un interpret special. Acestea. browserul primește cumva site-ul sub formă de markup HTML și stiluri CSS. Puteți vizualiza codul sursă al site-ului, de exemplu, în . Nu este întotdeauna posibil să determinați în ce limbaj de programare este scris un site din codul sursă, dar veți vedea coduri de stil CSS și etichete HTML indiferent.

     De unde să începi să înveți HTML?

     Dacă sunteți serios să învățați această limbă, atunci vă sfătuiesc să descărcați imediat o carte detaliată cu recenzii bune sau cursuri video. Pentru a începe, puteți viziona acest videoclip:

     Cea mai nouă versiune a limbajului HTML, care depășește cu mult doar marcarea structurii textului, este HTML5. În plus, în comparație cu HTML4, cea mai recentă versiune are multe etichete noi, semantica s-a schimbat.

     Dar, în acest articol, vom lua în considerare în continuare cea de-a patra versiune obișnuită a limbajului HTML și etichetele sale principale. Pentru a face acest lucru, să analizăm structura de bază a paginii HTML, precum și ierarhia etichetelor. Dacă nu știți de unde să începeți să învățați HTML, atunci informațiile de mai jos vă vor oferi o înțelegere de bază a principiilor de lucru cu limbajul de marcare hipertext.

     Pentru a crea un document html, vom folosi un editor convenabil.

     Primul lucru de declarat este tipul de document cu un link către secțiunea corespunzătoare:

     1 2	„https://www.w3.org/TR/html4/loose.dtd”>

     Acum să creăm o pagină index.html simplă cu următoarele comentarii:

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

     „https://www.w3.org/TR/html4/loose.dtd”> <html> <cap> <meta http-equiv = „Content-Type” content = „text/html; charset=utf-8” / > <titlu > Titlul paginii</titlu> <styletype="text/css"> </stil> </cap> <corp> <h1 > Titlul #1 al paginii</h1> <div class="block1"> </div> <h2 > Subtitlul 2</h2> <div class="block2"> Bloc al doilea de pagină</div> </corp> </html>

     Titlul #1 al paginii

     Primul bloc al paginii cu un paragraf. A doua linie a blocului din paragraf

     Subtitlul 2

     Bloc al doilea de pagină

     Ca rezultat, următoarea pagină este afișată în browser la deschiderea acestui fișier index.html:

     Să analizăm componentele sale mai detaliat.

     Cadrul documentului este etichetele: html, head, body. Și toate celelalte sunt incluse în eticheta html:

     1 2 3 4 5 6

     <html> <cap> </cap> <corp> </corp> </html>

     În consecință, eticheta html anunță deschiderea pentru citire și închiderea documentului html ( - eticheta de deschidere- eticheta de inchidere).

     Cap - acesta este „capul” documentului, acesta include informații care nu vor fi afișate în corpul documentului. În consecință, corpul este „corpul” documentului sau partea sa vizibilă.

     In cap specificam codificarea (charset=utf-8) si titlul paginii. Apoi, pentru opțiunea de mai sus, conectăm stilurile folosind eticheta

     În cazul nostru, suntem blocuri de stil blok1 și blok2. Am creat aceste blocuri în interiorul etichetelor body folosind etichetele

     , pentru care a fost stabilită clasa corespunzătoare (class=”blok1”). Astfel, am asociat numele clasei cu stilul acesteia.

     După cum puteți vedea în captură de ecran, primul bloc blok1 are o umplere galbenă, în timp ce blok2 este încadrat și culoarea textului său este albastră. Setăm toate acestea folosind stiluri css conectate folosind eticheta de stil html.

     Acordați atenție designului: