HTML Hypertext Markup Language 3_RO_2018.pdf · HTML Hypertext Markup Language . HTML . reprezinta . un set de coduri standardizate, numite tag-uri (etichete), care au fost . derivate

HTML Hypertext Markup

Language

HTML reprezinta un set de coduri standardizate, numite tag-uri (etichete), care au fost derivate din standardul SGML. HTML definește și descrie structura unei pagini web și

este utilizat pentru a pregăti documentele pentru World Wide Web.

Filename: sample.html <H1>A Sample Web Page</H1> <H2>Containing a photo of a waterfall…</H2> <P> <img src=“picture.gif”> <P> HTML consists of <I>standardised</I> codes that are used to define the structure of information that makes up a web page. <P> HTML tags are used to place images, create hypertext links, make text bold, and more!!

Unde?

Cum?

Un fisier HTML

HTML files

Establishing the extension type for HTML files, built with the Notepad program

Fisierele HTML pot avea extensiile html, htm sau shtml. Continutul lor poate fi vizualizat cu un editor de text foarte simplu, cum ar fi Notepad.

The launching file when running a site is usually index.html

Etichetele - Tag-urile Parantezele unghiulare contin instructiuni pentru browser-ul ce va prezenta textul din fisirul HTML. Aceste instructiuni sunt numite tag-uri (etichete).

Parantezele unghiulare pot sa contina si atribute. Acestea sunt separate printr-un spatiu liber si ofera informatii suplimentare despre felul in care trebuie indeplinite diverse actiuni de catre browser.

În general, instrucțiunile determina modificarea textului într-o zonă limitată, motiv pentru care multe tag-uri au o pereche pentru anularea actiunii indeplinite, semnalată de prezența caracterului slash (/). Etichetele de inchidere trebuie folosite cu grija, astfel incat perechile de tag-uri sa nu se intersecteze. Exemplu:

<tag1>

text1

<tag2> text2 </tag2>

</tag1>

Structura

Structura unui fisier HTML <html>

<head>

Zona in care sunt scrise informatii generale despre continutul paginii HTML (titlul paginii, cuvinte cheie definite pentru motoarele de cautare, date despre autorul paginii) .

</head>

<body>

Zona care contine informatia ce trebuie prezentata.

</body>

</html>

Comenzi generale <! commentary> poate fi citit numai daca fisierul HTML este deschis cu un editor, deoarece browser-ul il ignoră.

<head> deshide zona antet din fisier, unde sunt scrise date ce nu vor fi afisate de catre browser, deoarece reprezinta date generale despre sit (ex. cuvinte cheie pentru motoarele de cautare), despre programul cu care a fost creat sit-ul etc..

</head> arata sfarsitul zonei antet.

<title>name</title> indica numele ferestrei in care browser-ul afiseaza informatia paginii web.

<body> defineste locul de unde incepe continutul paginii web. Poate fi insotit de atribute care impun cadrul general al prezentarii.

</body> indica locul unde se incheie actiune parametrilor pentru zona principala, body.

Atribute Exemple de atribute:

· background=“file name image"

Setează ca fundal imaginea indicata de numele de fișier respectiv.

· bgcolor="#hhhhhh"

Setează o culoare ca fundal. Următorul diapozitiv va afișa indicații cu privire la alegerea culorilor.

· text="#hhhhhh"

Setează culoarea textului pentru zonele în care nu avem alte specificații.

· link="#hhhhhh"

Setează culoarea link-urilor care nu au fost accesate. Culoarea aleasa implicit este albastru.

· vlink="#hhhhhh"

Setează culoarea link-urilor vizitate. Culoarea aleasa implicit este violet.

Colorarea Sistemul utilizat pentru a defini culorile este sistemul RGB, care specifică, pentru fiecare culoare, cantitatea de roșu, verde și albastru.

Fiecare culoare este identificată printr-un cod hexazecimal de 6 cifre, dintre care primele două reprezinta cantitatea de roșu, cele doua din mijloc - verde, iar ultimele două - albastru.

Nume culoare

Cod hexazecimal

Nume culoare

Cod hexazecimal

01 aqua #00FFFF 09 navy #000080 02 black #000000 10 olive #808000 03 blue #0000FF 11 purple #800080 04 fuchsia #FF00FF 12 red #FF0000 05 gray #808080 13 silver #C0C0C0 06 green #008000 14 teal #008080 07 lime #00FF00 15 yellow #FFFF00 08 maron #800000 16 white #FFFFFF

Randuri

NU POT fi introduse randuri goale prin simpla apasare a tastei Enter. Ele se introduc prin folosirea unor etichete speciale:

<p> adauga un paragraf nou (si separa printr-un spatiu liber noul paragraf de urmatorul)

</p> se foloseste la sfarsitul unui paragraf

<br> se foloseste pentru a introduce o pauza (se trece la un nou rand, fara a lasa un spatiu intre randuri, pe orizontala)

<hr> traseaza o linie orizontală egală cu lățimea paginii. Dimensiunile liniei pot fi controlate prin folosirea atributelor width=“value” pentru lungime si size=“value” pentru grosime. Valorile pot reprezenta pixeli (puncte de pe ecran) sau procente (din dimensiunea ecranului).

Linii orizontale

<hr>

<hr width=‘‘50‘‘ size= ‘‘10‘‘ >

<hr width=‘’50%‘‘ size= ‘‘3‘‘ >

Tabele HTML Tabelele reprezinta modalitatea de baza prin care putem aseza informatia intr-un anumit loc pe ecran. Construirea unui tabel se face rand cu rand si celula cu celula, prin intermediul mai multor etichete

<table> arata inceputul descrierii unui tabel

<tr> adauga un rand nou

<td> mesaj </td> creeaza o celula noua pe randul curent, al carui continut este mesaj. Mesajul poate fi un text, o imagine sau chiar un spatiu liber.

<th> message </th> alternativa pentru <td> cand scriem numele coloanelor

</tr> arata sfarsitul randului curent

</table> arata incheierea descrierii tabelului

Tabele HTML– exemplul 1

Exemplu de tabel cu margini vizibile:

<table border="2">

<tr>

<td> celula 1,1 </td>


</tr>

<tr>



</tr>

</table>

Exemplu de tabel cu margini vizibile si o anumita marime a celulelor:

<table border="1" width="300">

<tr>



</tr>

<tr>



</tr>

</table>

Tabele HTML– exemplul 2

Alinierea pe orizontala

Alinierea pe orizontala a obiectelor dintr-o pagină Web se poate face prin introducerea atributului align in tag-uri precum body, table, tr, td:

align=”left” aliniere la stanga

align=”center” aliniere pe centru

align=”right” aliniere la dreapta

Efectul de aliniere se reflecta asupra domeniului de actiune al etichetei pe care o insoteste. De exemplu, daca insoteste o eticheta table, tabelul va fi aliniat in pagina, iar daca insoteste o eticheta td, va fi aliniat continutul celulei.

Pentru alinierea pe centru putem folosi direct etichetele:

<center> aliniaza pe centru ceea ce urmeaza

</center> anuleaza efectul de aliniere pe centru

Modificare font-urilor

<font> ce tip de scris ar trebui să utilizeze browser-ul, ales prin atributele :

face=”name font” tipul font-ului

size=”dimension” sunt disponibile 7 marimi, 1 fiind cea mai mica si 7 cea mai mare. Pot fi folosite si valori relative, cele cu plus (+1, +2, +3, +4) crescand dimensiunea, iar cele cu minus (-1, -2, -3) scazand-o.

Se considera ca 3 este valoarea prestabilita in mod normal. Daca valorile scrise depasesc intervalul 1-7, browser-ul rotunjeste automat valorile pentru a le incadra in acel interval.

color=”#hhhhhh” culoare font-ului

</font> incheie efectul etichetei font folosite anterior

FOLOSIREA UNOR SIMBOLURI SPECIALE

Titluri - headings

<hi>text</hi> In loc de i se folosesc valorile 1, 2, 3, 4, 5, 6, valoarea 1 fiind dimeniunea maxima, iar 6 – dimensiunea minima. Browser-ele scriu ingrosat textele scrise ca heading.

Example de scriere ca titlu:

<h1>text scris cu H1 </h1>






Text

<b>text</b> scriere ingrosata - bold

<i>text</i> scriere cursiva - italic

<u>text</u> text subliniat

<tt>text</tt> text de tip teletype (seamana cu masina de scris)

<pre>text</pre> text preformatat, ce trebuie afisat asa cum a fost scris

<sup>text</sup> text sub forma de exponent – superscript

<sub>text</sub> text sub forma de indice - subscript

Crearea de liste

<ul> incepe o lista nenumerotata (neordonata - unordered)

</ul> incheie o lista nenumerotata

<ol> incepe o lista numerotata (ordonata - ordered)

</ol> incheieo lista numerotata

<li> introduce un nou rand in lista de elemente (list item)

</li> eticheta optionala pentru inchiderea randului curent

<dl> incepe o lista cu definitii

</dl> incheie o lista cu definitii

<dt> introduce un nou termen intr-o lista cu definitii

<dd> defineste termenul introdus in lista (definition definition)

Liste ordonate si neordonate

Examplu de lista neordonata:

<ul>

<li> termenul A

<li> termenul C

<li> termenul G

<li> termenul B

</ul>

Examplu de lista ordonata (numerotata):

<ol>

<li> termenul A

<li> termenul C

<li> termenul G

<li> termenul B

</ol>

Examplu de lista de definitii

<dl>

<dt> termenul A

<dd> definirea termenului A

<dt> termenul C

<dd> definirea termenului C

</dl>

Inserarea de imagini <img src= “image address"> NU ARE eticheta de inchidere!

Stabilirea dimensiunilor imaginii:

width=“width” si height=“height”

Daca vrem ca imaginea sa aiba o margine, putem folosi atributul border=“dimensiunea in pixeli a grosimii marginii”

•Imaginea se poate gasi in acelasi loc ca fisierul html sau poate fi la o adresa din Internet.

•Dacă imaginea este în același folder ca și fișierul HTML, este suficient sa folsim numele de fișier pentru a adresa imaginea. În caz contrar, este necesar să se precizeze în mod corect calea către fișier și apoi sa se indice numele fișierului. Cand scriem calea de acces, trebuie folosit caracterul / pentru separarea numelor de foldere.

•Este recomandabil să se utilizeze adresarea relativă și nu cea absolută.

Legaturi intre fisiere

<a href=”file name”> ”text” </a>

In general fisierele catre care se fac legaturi sunt fisiere html. Atunci când sunt menționate alte tipuri de fișiere, programul capabil sa deschida acel fișier este lansat automat de catre sistemul de operare.

Exemplu de conectarea la pagina de prezentare a Universității de Medicină și Farmacie din Craiova : <a href=http://www.umfcv.ro> Vizitati www.umfcv.ro </a>


Zona de acțiune a mouse-ului poate fi suprafața unei imagini. Pentru a realiza acest mod de legare trebuie folosita o combinatie intre tag-ul <a> și tag-ul <img>:

<a href="name1"> <img src=“image name"> </a>

name1 – indica locul spre care se face saltul (in aceeai pagina, folosind simbolul # sau spre alta pagina, indicata printr-un URL)

Image name – indica imaginea (numele unui fisier sau URL) asupra careia vom actiona cu mouse-ul.

Tag-ul img se poate utiliza cu oricare dintre parametrii prezentati anterior la introducerea de imagini.

Legaturi <a name=”name1”>”name2” </a>

Prin “name1” definim locul in care vom face saltul. Aceste caractere nu sunt vizibile in pagina. Din acest motiv, putem folsi (daca dorim) un alt sir de caractere, “name2”, prin care evidentiem locul unde putem face un salt.

Eticheta <a> care initiaza saltul are urmatoarea forma:

<a href=#”name”> ”text” </a>

Semnul # indica faptul ca avem de-a face cu un salt in aceeasi pagina.

Sirul de caractere “name” indica unul dintre locurile definite prin <a name=”…

Legaturi - exemplu <table width="400", align=center>

<tr>

<td> <a href=#p1> 1. </a> </td>

<td> <a href=#p2> 2. </a> </td>

<td> <a href=#p3> 3. </a> </td>

</tr>

</table>

.............

<a name=p1> 1. </a>

......<a name=p2> 2. </a>

......

<a name=p3> 3. </a>


Pentru un salt intr-un anumit loc din interiorul unui alt fisier, instructiunea: <a href=”file name”> ”text” </a> devine <a href=”file name”# ”name1” > ”text” </a> Sirurile de caractere “file name”, ”name1”, ”text” au fost definite anterior in diapozitivul despre saltul in cadrul aceleiasi pagini.

Documents

HTML Hypertext Markup Language 3_RO_2018.pdf · HTML Hypertext Markup Language . HTML . reprezinta . un set de coduri standardizate, numite tag-uri (etichete), care au fost . derivate