Curs 1 – HTML

Introducere

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce pot fi afisate intr-un browser (sau navigator).
HTML este folosit pentru prezentarea unui continut (text, imagine) intr-o pagina web, furnizeaza mijloacele prin care continutul unui document poate fi structurat si adnotat cu diverse tipuri de metadate si indicatii de redare si afisare. Aceste indicatiile pot varia de la decoratiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori introducerea unei imagini, pana la adaugarea de elemente sofisticate, tabele, harti de imagini, formulare si cod CSS sau scripturi JavaScript.
Metadatele pot include informatii despre titlul si autorul documentului, informatii structurale despre cum este impartit documentul in diferite segmente, paragrafe, liste, titluri etc. si informatii esentiale care permit ca documentul sa poata fi legat de alte documente pentru a forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi citit si editat utilizand un editor de text simplu, editarea si intelegerea paginilor in acest fel necesita cunostinte de HTML, pe care le puteti obtine studiind lectiile din acest curs.
Exista si editoare grafice, de tip WYSIWYG (What You See Is What You Get – „ceea ce vezi este ceea ce obtii”), cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage, care permit ca paginile web sa fie tratate asemanator cu documetele Word si genereaza ele cod HTML pentru continutul paginii, dar aceste programe genereaza un cod HTML care este de multe ori prea incarcat si de proasta calitate.
HTML este de asemenea utilizat in e-mail. Majoritatea aplicatiilor de e-mail folosesc un editor HTML incorporat pentru compunerea e-mail-urilor si un motor de prezentare a e-mail-urilor de acest tip.

Acest curs prezinta elementele de baza ale limbajului HTML si modul de lucru cu acesta, va ajuta sa invatati cum sa creati pagini web folosind aceasta tehnologie.
Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de exemplu Mozilla Firefox, care este gratuit.
Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare exemplu prezentat si creati si altele pornind de la acestea.

Principalele elemente HTML

1. Ce este HTML? (Hypertext Markup Language)

– Este un set de coduri logice care constituie apariţia unui document web si a informatiilor pe care le deţine. Codurile sunt scrise intre „<(paranteza deschisa) si „>(paranteza inchisa), cu toate ca nu sunt chiar paranteze, aşa se numesc si arata aşa: < >.
Exemplu:

<BODY> sau <FONT>

– Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere si un element de închidere distins prin „/” in interiorul parantezei deschise „<„.
Exemplu:

<FONT> … </FONT>

– Primul cuvânt care apare înăuntru „<” se numeşte element sau eticheta HTML si spune browser-ului sa facă ceva, precum <FONT>
– Cuvintele care urmeaza după element in interiorul „< >”se numesc atribute care descriu proprietăţile elementului. Cum ar fi : culoarea, mărimea, etc.
– Atributele sunt separate prin spatiu si urmate de semnul egal „=„, dupa care sunt scrise, intre ghilimele (” „) valorile atributelor.
– Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori.
In urmatorul exemplu elementul este FONT atributul COLOR si valoarea BLUE:

<FONT COLOR=”BLUE„>Acest text va fi albastru</FONT>

2. Structura documentului HTML

– Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor.
– La început un element HTML cuprinde (înconjoară ) datele documentului. Acest element conţine doua sub-elemente principale: HEAD si BODY. In HEAD se poate adauga titlul paginii web si alte elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri CSS. In BODY se adauga continutul documentului care va fi afisat in pagina web.
Exemplu:

<html>
  <head>
    <title>Titlu Documentului</title>
  </head>
  <body>
    Continutul paginii
  </body>
</html>


Structura generala a unui document HTML

<HTML>
    <HEAD> Acesta are si el mai multe sub-elemente:
        <TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se încheie cu </TITLE>
        <BASE> Poate fi folosit pentru a înregistra locaţia documentului in forma URL. (Necesar daca documentul nu este accesat in locaţia lui originala). Se încheie cu </BASE>
        <LINK> Indica o relaţie dintre document si alte obiecte de pe WEB. Se încheie cu </LINK>
        <META>  Aici sunt scrise informaţii cum ar fi tastatura (limbaj) folosita, descrierea si cuvinte cheie care pot fi găsite de motoarele de căutare. Se încheie cu </META>
        <SCRIPT> Conţine oricare din JavaScript sau VB Script. Se încheie cu </SCRIPT>
        <STYLE> Conţine informaţii privind stilul, grafica informaţiilor care vor apărea pe pagina. Se încheie cu </STYLE>
    Aici se încheie elementele adaugate in HEAD
    </HEAD>
    <BODY> Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt incluse in acest element. Aici pot fi puse si elemente cum ar fi: <SCRIPT> </SCRIPT>
Se încheie cu
    </BODY>
    </HTML>

Crearea si editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web, chiar fara a cunoaste limbjul HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text sunt programele de baza, si cele mai folosite, pentru editarea paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare câteva din codurile invizibile ale limbajului HTML, astfel se creaza documente rapid si usor, in plus ocupa foarte putin spatiu si resurse de memorie, acestea insa necesita cunoasterea limbajului HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad, care este folosit si pentru acest curs, dar poate fi utilizat orice editor de text. Pentru începatori si pentru usurinta cu care se lucreaza, eu recomand folosirea aplicatie NotePad sau Notepad++, dar cei avansati pot folosi si altele cum ar fi Dreamweaver.

1. Crearea bazei de început a unui document

Cum ati vazut in Lectia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea unui document HTML.
Pentru început deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web. Aceasta este:

<html>
  <head>
    <title> Titlul </title>
  </head>
  <body>
    Continut
  </body>
</html>

Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completati cu un text reprezentativ ca titlu al documentului dv.; si in BODY un text „Continut”.
Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra meniurilor). La TITLE puteti pune orice text, dar este bine sa scrieti ceva care sa descrie cat mai bine obiectul si continutul paginii deoarece este ceea ce cauta si indexeaza multe portaluri de cautare de pe internet, si indicat, sa nu depaseasca 70 caractere.
Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii, care va fi afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic continut in pagina:

<html>
  <head>
    <title>Discant.ro- Cursuri, Jocuri si Anime</title>
  </head>
  <body>
    <h1>Pagina HTML</h1>
    Lectii, exemple si explicatii.

  </body>
</html>

– <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.
– Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua deschisa cu Notepad si apoi salvati fisierul cu extensia .html. Daca nu stiti deja, pt. a-l salva alegeti la „Save as type” – All Files, apoi la „File name” ii scrieti numele si extensia (ex.: „pagina.html”). Dupa ce a fost salvat fisierul, deschideti-l cu un browser (trebuie sa mearga cu dublu-click pe el).

2. Setarea proprietarilor documentului

– Proprietatile documentului pot fi controlate de atributele elementului BODY, de exemplu cum ar fi culorile pentru fondul paginii, pentru text si diferite faze ale link-urilor.
Culorile sunt setate folosind culorile de baza: rosu, verde si albastru; expresia folosita RGB (Red, Green, Blue), acestea sunt reprezentate ca valori hexadecimale si sunt scrise intre ghilimele (” „), la inceput trebuie adaugat caracterul ‘#‘. Fiecare 2 unitati ale codului reprezinta una din culorile RGB.
De exemplu: #00aa11  reprezinta o culoare care nu are Rosu (00), are Verde (aa) si Albastru mai putin (11).

Elementul BODY

  • – Acestui element ii puteti adauga informatii care sa defineasca culoarea sau imaginea din fondul paginii, textul si culoarea link-urilor.
  • – Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va prezenta culorile standard, de obicei fondul este alb.
  • – Pentru a seta culoare fondului paginii adaugati in eticheta <BODY> atributul BGCOLOR.
  • – Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra:

<body bgcolor=”#0000ff”></body>

  • Culoarea textului
    • – Atributul TEXT  controleaza culoarea textului normal din document.
    • – Acesta va afecta tot textul din document care nu este colorat de alte elemente, cum ar fi link-ul.
    • – Culoarea standard pentru text este Negru.
    • – Iata un exemplu in care culoarea fondului va fi albastru si culoarea textului va fi rosu, atributul TEXT va fi adaugat astfel:

<body bgcolor=”#0000ff” text=”#ff0000″></body>

  • Link-uri (LINK, VLINK si ALINK)
    • – Aceste atribute controleaza culoarea link-ului in diferite stari
        1. LINK – culoarea initiala a link-ului. Standard este albastru
        2. VLINK – culoarea unui link vizitat. Standard este purpuriu.
        3. ALINK – culoarea link-ului in momentul activarii. Standard este rosu.
    • – Modul de setare al acestor atribute este urmatorul:

<body bgcolor=”#ffffff” text=”#ff0000″ link=”#0000ff” vlink=”#ff00ff” alink=”#ffff00″></body>

Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile albastre, link-urile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul activarii va fi galben.

  • Folosirea unei imagini ca fond pentru pagina (background)
    • – Elementul body ofera posibilitatea înlocuiri fondului paginii cu o imagine (Background image). Daca imaginea este mai mica decât dimensiunile paginii atunci imaginea va fi multiplicata pana va acoperi întreg cadru documentului. Este indicat ca imaginea sa fie in format *.gif sau *.jpg. Folosirea unei imagini va da un aspect placut documentului.
    • – Un exemplu de cod HTML cu imagine pentru background este urmatorul:

<body background=”imagine.gif” bgcolor=”#ffffff”></body>

In acest exemplu fondul pagini va fi dat de imaginea fisierului „imagine.gif” si de asemenea am setat BGCOLOR astfel incat in timpul procesului de încarcare a imaginii culoarea fondului va fi alba.


Dupa ce a-ti creat baza de început a unui document si a-ti setat proprietatile, trebuie sa salvati fisierul. Salvarea trebuie facuta intr-un format pe care browser-ul îl poate recunoaste. Extensia standard pentru un fisier care reprezinta o pagina web este „.htm” sau „.html„. De obicei folosesc („.html”).
– Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alegeti din meniul File comanda Save si salvati fisierul cu orice nume doriti dar cu extensia html (sau „htm”) – (La File name: scrieti si numele si extensia „.html”, exemplu: index.html). Daca nu scrieti extensia, NotePad va salva documentul in format „txt„.
– Pentru a vedea documentul ca o pagina web, duceti-va in directorul in care a-ti salvat fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera). Sau deschide-ti browser-ul si din comanda Open deschideti documentul pe care l-ati salvat.
– Pentru a continua munca, a face modificari paginii sau pentru a adauga altceva in documentul HTML, deschideti documentul cu NotePad. Una din metode este sa deschideti aplicatia NotePad si din meniul File alegeti Open apoi gasiti fisierul pe care vreti sa-l modificati si dati clic pe butonul Open. Dupa ce terminati modificarile salvati, astfel daca redeschideti documentul ca o pagina web acesta va fi deschis cu noul format.

Forma generala a unei pagini Web

<html>– marcajul HTML de deschidere – indica faptul ca informatia care urmeaza este scrisa in limbajul HTML
<head>-marcajul HEAD de deschidere – de aici incepe antetul paginii
<title>Titlul paginii</title>– marcajele TITLE – aici se scriu cateva cuvinte despre continutul paginii – aceste cuvinte vor apare pe bara de titlu a browserului; daca pagina este adaugata intr-o lista favorita, ele apar ca nume al paginii.
<meta name = „keywords”
content = „… o lista de cuvinte …”>
<meta name = „description”
content =”… o fraza sugestiva …”>
… alte instructiuni: JavaScript,
CSS, etc. …
– metatag-uri, ajuta motoarele de cautare la indexarea paginii.
– valorile unor atribute, de exemplu „keywords”, trebuie incadrate cu ghilimele duble, drepte ( ” ), cuvintele cheie din atributul content se scriu separate prin virgula, exemplu: content=”cursuri, lectii, jocuri, anime”.
</head>– marcajul HEAD de inchidere – aici se termina antetul paginii; cea ce este in antet nu apare in fereastra browserului
<body>– marcajul BODY de deschidere – incepe corpul documentului, de aici este adaugat continutul care va apare in pagina web
… Continut, etichete HTML …– tot ceea ce apare aici va fi afisat in fereastra browserului
</body>– marcajul BODY de inchidere – indica sfarsitul corpului documentului
</html>– marcajul HTML de inchidere

Instructiunile HTML (numite si controale, marcaje sau tag-uri) incep cu o paranteza unghiulara deschisa < urmata imediat de numele instructiunii, unul sau mai multe atribute ale instructiunii (optional), apoi de o paranteza unghiulara inchisa >.
Majoritatea instructiunilor sunt perechi; cea de inceput se numeste marcaj de deschidere si este de forma:

<nume_instructiune atribut=”valoare_atribut”>

iar cea de sfarsit marcaj de inchidere si nu contine atribute sau spatii; este de forma:

</nume_instructiune>

NU sunt permise spatii decat intre nume de instructiune si atribute. Tot ce se gaseste intre marcajul de deschidere si cel de inchidere va avea caracteristicile elementului respectiv.
Browserul ignora elementele pe care nu le intelege si pe cele scrise gresit.
Exemplu (daca simbolizam spatiul prin _ atunci):

GresitRezultatBineRezultat
<_h2>text</h2>< h2>text<h2> text </h2>text
<_font_size = 6 _ color_=_red> text <_/_font_>< font size = 6 color = red> text < / font ><font_size = 6 _ color = red> text </font>text

Titluri, Paragrafe, Un nou rând, Linie orizontala

1. Titluri <Hx> … </Hx>

  • – Pentru titluri din continutul documentului HTML este indicat folosirea etichetelor <Hx>, (headings) unde ‘x’ este un numar intre 1 si 6.
  • – In cadrul elementului BODY, elementele Headings sunt folosite ca titluri sau pentru o mai buna impartire a continutului paginii.
  • – Mărimea textului înconjurat de elementul Heading variază de la foarte mare, in <H1> pana la foarte mic in <H6>.

Mai jos puteti vedea exemplu:

Cod HTMLCum apare in pagina
<html> 
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

2. Paragraf <p> … </p>

  • – Paragrafele permit sa adaugi text in document astfel incat lungimea de afisare a textului va fi ajustata de marimea deschiderii browser-ului si fiecare paragraf va incepe un nou rând.
  • – Distanta dintre doua paragrafe succesive este mare deoarece browser-ul le afiseaza cu un rând gol intre ele.

Mai jos puteti vedea exemplu:

Cod HTMLCum apare in pagina
<html> 
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>
Paragraf 1 Paragraf 2 Paragraf 3 Paragraf 4

3. Un nou rand <br>

  • – Tag-ul <br> permite sa decizi unde textul va incepe un nou rând, astfel se forteaza începerea unui nou rând.
  • <br> este un Element Gol dar poate sa conţin atribut. <br> nu are si nu cere element de închidere, nu se foloseste </br>

Mai jos puteti vedea exemplu:

Cod HTMLCum apare in pagina
<html> 
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
… </p>
<p>Paragraf 2</p>
</body>
</html>
Heading 1 Paragraf 1
Linie 2
Linie 3
… Paragraf 2

– Elementul <br> foloseşte un singur atribut – CLEAR care poate avea valoarea LEFT, RIGHT sau ALL, si sunt folosite daca este o imagine pe pagina. Atributul CLEAR forţează o linie in jos. Daca o imagine este aşezata in partea stanga a paginii, valoarea LEFT va muta cursorul jos la  prima linie din marginea ştanga.

4. Linie orizontala <hr>

  • – Acest element afiseaza o linie orizontala in document
  • – Acest element nu foloseşte element de închidere [</hr>]
  • – Elementul <hr> foloseste urmatoarele atribute:
    • – SIZE = latimea liniei, in pixeli (standard este 2)
    • – WIDTH = lungii liniei, in pixeli sau procente din lungimea afisarii paginii (standard 100%)
    • – NOSHADE = afiseaza linia fara a avea un aspect 3D
    • – ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau Dreapta paginii ( Standard centru)
    • – COLOR = seteaza culoarea liniei

Mai jos puteti vedea exemplu:

Cod HTMLCum apare in pagina
<html> 
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
… </p>
<hr>
<hr color=”#1111fe” size=”4″ width=”50%”>
<p>Paragraf 2</p>
</body>
</html>
Heading 1 Paragraf 1
Linie 2
Linie 3
… Paragraf 2

Formatul textului

HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe formate cu aspecte grafice diferite.

1. Tag-ul <FONT> … </FONT>

Cu acest element, <FONT>, puteti modifica aspectul textului, cum sunt tipul fontului folosit, marimea si culoarea textului.

  • – Marimea textului poate fi modificata cu elementul FONT si atributul SIZE. Atributul SIZE poate lua valorile numerice de la 1 la 7 si pe langa acestea poate folosi, ca valoare relativa, semnele „+” sau „„. Textul normal (daca nu este specificat acest atribut) are valoarea 3.
  • Exemplu :

<font size=”+2″>Doua mărimi mai mare</font>

  • – Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.
  • Exemplu :

<font face=”Arial Black”>Acesta este tipul de font Arial Black</font>

  • – Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.
  • Exemplu :

<font color=”#00dd00″>Acest text are culoarea verde</font>

2. Bold, Italic, Underline si alte elemente

Elemente des folosite pentru formatul textului sunt:

  • – Bold (ingrosat) <b> … </b>
  • – Italic (inclinat) <i> … </i>
  • – Underline (subliniat) <u> … </u>

Exemple:

<b> Bold </b>
<i> Italic </i>
<u> Underline </u>


Alte elemente folosite pentru formatul textului sunt:

  • <pre> Performated </pre> – Textul incadrat de elementul PRE este prezentat intr-un singur font, oricare ar fi atributul FACE. Spatiile mai lungi si liniile necesare sunt prezentate aşa cum sunt scrise in NotePad, ne mai fiind nevoie de alte elemente adiţionale, cum ar fi <br> pentru o noua linie si &nbsp; &nbsp; pentru mai mult spaţiu intre cuvinte.
  • <em> Accentuare (Emphasis) </em> – Browser-ul de obicei arata aces element ca italic
  • <strong> Strong </strong> – Browser-ul de obicei arata aces element ca bold
  • <tt> Teletype </tt> – Ca si PRE, browser-ul prezinta acesta intr-un singur tip de font, indiferent de fontul ales cu atributul FACE, in interiorul elementului FONT
  • <cite> Citatie </cite> – Reprezinta o citatie din document.


Mai jos puteti vedea câteva exemple de coduri si modul lor de afisare in browser.

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<p><font size=”+1″>O singura marire</font>- normal –
<font size=”-1″>O singura micsorare</font><br>
<b>Bold</b>- <i> Italic </i> – <u> Subliniat </u> –
<font color=”#ff0000″> Colorat </font><br>
<em>Accentut</em> – <strong> Strong </strong> –
<tt>Tele type</tt><br>
<cite> Citatie </cite></p>
</body>
</html>

– In browser va fi afisat asa:

O singura marire- normal – O singura micsorare
BoldItalic – Subliniat – Colorat
AccentutStrong – Tele type
Citatie

3. Alinierea

Câteva elemente pot avea atributul (ALIGN) pentru aliniere, cum ar fi Titlurile <Hx> , Paragraful <p>…</p> si Linia orizontala <hr> . Cele trei valori ale atributului ALIGN sunt: LEFT, RIGHT si CENTER.
Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:

  • <div align=”valoare„> … </div> Poate conţine cele mai multe elemente. Tot ce este poziţionat cu elementul DIV poate fi aliniat oriunde-n pagina, indiferent daca in acel loc se afla si alt ceva (Imagine, Text, …).
  • <center> … </center> Va centra elementele

4. Alte etichete HTML pentru formatul textului

  • <strike> Text taiat </strike>
  • <big> Prezinta textul intr-un font mare </big>
  • <small> Prezinta textul intr-un font mic </small>
  • <sub> Afisaza textul in pozitia subscript </sub>
  • <sup> Aseaza textul in pozitia superscript </sup>


In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>

– In browser va fi afisat asa:

Text taiat
Prezinta textul intr-un font mare
Prezinta textul intr-un font mic
Aseaza textul in pozitia subscript normal Aseaza textul in pozitia superscript


– Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu aplicatii tehnice

  • <dfn> Defineste exemplu de termen inchis </dfn>
  • <code> Folosit pentru extragerea unui cod de program </code>
  • <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp>
  • <kbd> Folosit pentru text care va fi scris de utilizator </kbd>
  • <var> Folosit pentru variabile sau argumente de comenzi </var>


In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<dfn> Definite exemplu de termen inchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
<var> Folosit pentru variabile sau argumente de comenzi </var><br>
</p>
</body>
</html>

– In browser va fi afisat asa:

Definite exemplu de termen inchis
Folosit pentru extragerea unui cod de program
Folosit pentru simple productii de programe, scripturi , etc.
Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi


– Alte elemente pentru formatul textului:

  • <q> … </q> – Folosit pentru citate scurte.
  • <blockquote> … </blockquote> – Folosit pentru incadrarea de citate mai lungi, creaza spatiu pentru text. Pentru a crea mai mult spatiu puteti adauga de mai multe ori acest element.
  • <address> … </address> – Cu acest element se specifica informatii cum ar fi autorul documentului si detalii pentru contact.


In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser.

<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<q>Daca vrei si crezi, orice este posibil.</q>
<blockquote>
Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie. <br>
Aceasta este prima zi din restul vietii tale.
</blockquote>
<center>
<address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W 6A9</address>
</center>
</p>
</body>
</html>

– In browser va fi afisat asa:

Daca vrei si crezi, orice este posibil.

Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie.
Aceasta este prima zi din restul vietii tale. 180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9

Marcatori si numerotare

HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Prin acestea textul este mai usor de citit si evidentiat.

1. Elementele pentru marcatori si numerotare

Un element des folosit in formarea listelor (neordonate) este <ul>.

  • <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.
  • – Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai multe elemente <li> … </li> (list element). Fara atributul „type” specificat in „<ul>” acestea prezintă un marcaj ca un bullet.


Mai jos puteti vedea exemplu.

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 …</li>
<li>List item 2 …</li>
<li>List item 3 …</li>
</ul>
</body>
</html>

– In pagina web apare asa:

  • List item 1 …
  • List item 2 …
  • List item 3 …


– Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)
– Tipul de marcaj care se doreste folosit se introduce prin atributul type in eticheta <ul>
– Exemplu:

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type=”square”>
<li>List item 1 …</li>
<li>List item 2 …</li>
<li>List item 3 …</li>
</ul>
</body>
</html>

– In pagina web apare asa:

  • List item 1 …
  • List item 2 …
  • List item 3 …


Un alt element folosit pentru formarea listelor (ordonate) este <ol>.

  • <ol> … </ol> este un element de numerotare. Elementele din lista sunt numerotate automat.
  • – Impreuna cu <ol> se foloseste <li> … </li>

Iata un exemplu:

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol>
<li>List item 1 …</li>
<li>List item 2 …</li>
<li>List item 3 …</li>
</ol>
</body>
</html>

– In pagina web apare asa:

  1. List item 1 …
  2. List item 2 …
  3. List item 3 …

Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate de atributul „type care este adaugat in elementul <ol>, le puteti vetea mai jos:

  • type=”1″ – stil: 1, 2, 3, …
  • type=”a” – stil: a, b, c, …
  • type=”i” – stil: i, ii, iii, …
  • type=”I” – stil: I, II, III, …

De asemenea se poate specifica numarul de inceput al numerotarii printr-o valoare data atributului start.
Exemplu:

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol type=”a”>
<li>List item 1 …</li>
<li>List item 2 …</li>
<li>List item 3 …</li>
</ol>
– Alta lista:
<ol type=”I” start=”3″>
<li>List item 1 …</li>
<li>List item 2 …</li>
<li>List item 3 …</li>
</ol>
</body>
</html>

– In pagina web apare asa:

  1. List item 1 …
  2. List item 2 …
  3. List item 3 …

– Alta lista:

  1. List item 1 …
  2. List item 2 …
  3. List item 3 …

2. Alte elemente pentru asezarea textului in pagina

Alte elemente pentru asezarea textului sunt: tag-ul <dl>, care cuprinde in el elementele <dt> si <dd>

  • <dl> … </dl> este folosit (impreuna cu „dt” si „dd”) pentru definirea si incadrarea unei liste de definitii.
  • <dt> … </dt> Defineste elementul din lista. Fiecare tip de astfel de element trebuie precedad de unul sau mai multe elemente <dd> … </dd>, folosite pentru descrierea elementului definit.

Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea face o separare mai buna a continutului.
In urmatorul exemplu puteti vedea cum se folosesc aceste elemente :

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<dl>
  <dt>HTML</dt>
    <dd> – Hyper Text Markup Language</dd>
    <dd> – Limbaj pentru pagini web</dd>
  <dt>Dog</dt>
    <dd>dog = caine</dd>
    <dd>animal de casa</dd>
</dl>
</body>
</html>

– In pagina web apare asa:

HTML

– Hyper Text Markup Language

– Limbaj pentru pagini web

Dog

dog = caine

animal de casa


Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare, introducand elementele <ul> si <ol> imbricate (unele in celelalte) impreuna cu elementele <li>
Exemplu:

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type=”square”>
<li> List item 1 … </li>
<li> List item 2 …
    <ol type=”a” start=”3″>
        <li> Alt List item … </li>
        <li> Alt List item … </li>
    </ol></li>

<li> List item 5 … </li>
</ul>
</body>
</html>

– Observati ca tot ce contine „<ol> … </ol>” este adaugat in cadrul unui „<li> </li>”
– In pagina web apare asa:

  • List item 1 …
  • List item 2 …
    1. Alt List item …
    2. Alt List item …
  • List item 5 …

Adaugare Imagini

HTML contine si elemente pentru adaugarea de imagini in pagina web.

1. Formatul imaginilor care pot fi folosite

Cele mai folosite formate pentru imaginile adaugate intr-o pagina HTML sun GIF si JPEG (JPG ; JPE), avantajul acestora este ca imaginile care au aceste extensii au o marime mica (in bytes), avand maximum 256 de culori.
Alte tipuri de formate (folosite mai rar) sunt:

  • PNG, BMP, TIFF, PCX

2. Adaugarea unei imagini intr-o pagina web

Pentru a introduce o imagine intr-un format HTML se foloseşte elementul <img> … </img> împreuna cu urmatoarele atribute :

  • src   – Valoarea acestui atribut determina locatia fisierului care contine imaginea.
  • alt   – La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de unele browsere) sau cand utilizatorul va pozitiona, in browser, mouse-ul peste imagine.
  • align   – Acest atribut permite asezarea imagini in locuri diferite pe pagina. Pot fi folosite urmatoarele optiuni:
    • Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom
  • width   – Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu lungimea originala.
  • height   – Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu inaltimea originala.
  • border   – Prin adaugarea acestui atribut imaginea va aparea înconjurata de un chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.
  • hspace   – Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile orizontale ale imaginii.
  • vspace   – Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in pârtile verticale ale imaginii.

In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o pagina web si cum pot fi folosite atributele :

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<img src=”imagine.jpg” alt=”puteti adauga orice text” align=”top” width=”100″ height=”120″ border=”4″ hspace=”10″ vspace=”7″></img>
</body>
</html>

– In pagina web va aparea:


Incercati singuri mai multe exemple, folosind si alte atribute si valori prezentate mai sus.

Crearea de link-uri

Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de la un document la altul sau la alt site. Sunt foarte importante in crearea de pagini web.
Forma generala pentru crearea unui link este urmatoarea:

  • <a href=”url” title=”Titlu link”>Nume</a>

a este elementul specific pentru crearea link-urilor
href este atributul care marcheaza indicarea adresei link-ului
url este adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.discant.ro)
title este atributul prin care se da un titlu link-ului (un text ascuns, care apare numai cand este pozitionat mouse-ul deasupra link-ului)
Titlu link este textul ascuns care apare cand este pozitionat mouse-ul deasupra link-ului
Nume este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul. In loc de acest text se poate folosi si o imagine, astfel „Nume” va fi inlocuit cu <img src=”nume_imagine.extensie”>

Cand documentul este alcatuit din mai multe cadre se foloseste si atributul target, vezi Cadre / Frame

Culoarea link-urilor poate fi schimbata de următoarele atribute, care trebuie scrise in interiorul elementului <BODY>

  • link=”#0000ff – reprezinta culoarea link-ului in browser.
  • vlink=”#00ffff – reprezinta culoarea link-ului când pagina respectiva a fost / este vizitata.
  • alink=”#ff0000 – reprezinta culoarea link-ului când acesta este activat.
  • Exemplu:

<body bgcolor=”#00ffff” link=”#000000″ vlink=”#ff0000″ alink=”#00ff00″>


Link-urile sunt de doua feluri:

1. Link-uri externe – (sunt cele mai utilizate), care sunt si ele de doua feluri:
      a) Link-uri externe câtre pagini ale aceluiasi site. Pentru acestea URL-ul poate sa nu includa si domeniul site-ului, cum ar fi „http://www.nume.com”, ci se poate folosi doar cale in directoare, numele si extensia documentului la care se face saltul.
      De exemplu:

  • – daca documentul tinta se afla in acelasi director cu fisierul in care se scrie link-ul, codul va fi scris asa:
    • <a href=”nume_fisier.extensie” title=”Titlu link”>Nume</a>
  • – daca documentul tinta se afla intr-un director anterior celui in care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
    • <a href=”../nume_fisier.extensie” title=”Titlu link”>Nume</a>
  • – daca documentul tinta se afla intr-un director din cel care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
    • <a href=”director/nume_fisier.extensie” title=”Titlu link”>Nume</a>

      b) Link-uri externe câtre alte site-uri. Aici, adresa URL din link trebuie sa contina si domeniul (numele site-ului) paginii tinta, codul HTML se va scrie, de exemplu, asa:

  • <a href=”http://www.nume_site/pagina” title=”Titlu link”>Nume</a>


2. Link-uri interne – sunt link-uri câtre alte texte din aceeasi pagina. Se folosesc când pagina respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina.
      – Pentru creare de link-uri interne trebuie urmati urmatorii pasi:

  • 1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul si se afla in aceeasi pagina cu linkul
    • <a name=”cuvant”>Textul tinta</a>
    •   – atributul „name” indica tinta pentru link, e un fel de semn care indica locatia.
    •   – „cuvant” poate fi orice cuvânt, trebuie sa fie unic pentru fiecare link.
    •   – „Textul tinta” este textul unde se face saltul.
  • 2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul câtre textul ales), se scrie urmatorul cod:
    • <a href=”#cuvant”>Nume</a>
    • – aici „cuvant” este acelasi text scris la pasul 1.


Link-urile interne si externe pot fi combinate. Astfel putem face saltul câtre un anumit text aflat intr-o alta pagina. In pagina respectiva se scrie codul de la pasul 1, la textul ales pentru tinta link-ului, iar in pagina in care va fi link-ul se scrie:

  • <a href=”adresa_pagina#cuvant”>Nume</a>

Similar Posts

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *