S1/C12 Cod HTML (Pedagogie si Teatru)

Tehnologia HTML

Pentru a putea construi o pagina web trebuie indeplinite urmatoarele conditii:
• sa existe un nume domeniu prin care suntem accesati din Internet (de exemplu: www.arteiasi.ro) Numele domeniului se cumpara de la RNC si are extensia .ro Pentru domenii internationale se folosesc nume domenii cu extensia *.com,*.net etc.
• sa existe un server propriu cu adresa IP reala pe care sa poate fi depusa pagina web (Web Hosting) in tehnologia Linux (Apache server, PHP si Mysql), Windows server (Php, Mysql), sau Unix.
• sa existe site-ul propriu-zis format in principal din fisiere de tip html si imagini
Pagina de site se vede in internet prin intermediul unui program care se numeste browser (de exemplu Internet Explorer, Mozilla, Firefox, Opera)
Numele de domenii sunt publice, contituite in servere de nume DNS - Domain Name Server si permit conversia numelui de domeniu in adresa IP de identificare a calculatorului

HTML – notiuni de baza

HTML este un limbaj de descriere a unei pagini web. Textul pentru pagina web este incadrat intr-un numar de etichete pereche ... si are urmatoarea structura:
/* [html>
/* [head>
/* [title>
Titlul paginii
/* [/title>
/* [META NAME="nume" CONTENT="continut">
Ex.1 Link catre un document CSS
/* [link rel="stylesheet" type="text/css" href="fisier_css.css">
/* [/head>
/* [body>
.. continut pagina
/* [/body>
/* [/html>

Cod CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.), care insemna o reducere a codului paginii web, deci un acces mai rapid. Comenzile CSS sunt organizate pe 3 nivele:
- comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:
/* [eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
/* [/eticheta>
- comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete [head] si [/head] conform sintaxei:
/* [style type="text/css">
/*
/* [/style>
- comenzile de nivel 3, sau extern, care contin fisiere cu comenzi CSS, de tip *.css
Exemplu
BODY {
background-color: Navy;
color: White;
font-family: Arial, sans-serif;
}

H2 {
border-bottom: thin solid aqua;
}
H2.emphasis {
font-style: italic;
}
.keyword {
font-weight: bold;
}

Cod HTML
Un document HTML este delimitat de eticheta [html[ ... [/html[ si este format din doua zone:
/* [html>
/* [head>
/*Antet
/* [title> Document HTML [/title>
/* Informatii suplimentare
/* [META NAME=”popescu”, CONTENT=”pagina”>
/* [/head>
-corpul
/* [body bgcolor=green>
/* [font color=black size =12 face=Arial> culoare negru litera [/font>
/* [b> text [/b>
/* /* paragraf */
/* [p align=center> paragraf [/p>
/* titlul document */
/* [h1> titlul [/h1>
/* lista elemente */
/* [ul>
/* [li> catalog
/* [li> revista
/* [/ul>
/* inserare lageturi (link) catre alta pagina */
/* [a href=http://www.arteiasi.ro > text din alta pagina [/a>
/* inserare imagine */
/* [img src=”poza.gif” height=75 width=40 [/img>

/* [/body>
/* [/html>
1. Declararea imaginii care apare in pagina web se face cu sintaxa HTML:

Proprietatile unei imagini sunt
Border - poate fi doar citita si este latimea marginii din jurul imaginii specificata în pixeli
Alt - specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata de browser)
Align - unde sa fie plasata imaginea
Complete - poate fi doar citita si este o valoare booleana care permite sa stim daca imaginea a fost descarcata complet.
Height - inaltimea in pixeli a imaginii
Hspace - se refera la spatiul din dreapta si stanga imaginii (in pixeli)
Lowsrc - specifica un URL al unei imagini ce va fi afisata la o rezolutie scazuta
Name - se foloseste pentru a da nume unei imagini
Src - specifica URL-ul (adresa si numele) imaginii
usemap - eticheta map
Vspace - spatiul dintre partea de sus si de jos a imaginii
Width - latimea in pixeli a imaginii

Elemente HTML
1. Structura documentului HTML
Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor. Elementele principale sunt [head> ….[/head> si [body> … [/body>
Exemplu:
/* [html>
/* [head>
/* [title>Titlu Documentului[/title>
/* [/head>
/* [body>
Continutul paginii
/* [/body>
/*[/html>

2. Elemente de structura generala

/*[HTML>
/* [HEAD> Acesta are si el mai multe sub-elemente:
/* [TITLE> Cuprinde titlul documentului, [/TITLE>
/* [BASE> Cuprinde locaţia documentului in forma URL [/BASE>
/* [LINK> Cuprinde o legatura cu alte obiecte de pe WEB [/LINK>
/* [META> Cuprinde informaţii despre tastatura , cuvinte cheie etc.[/META>
/* [SCRIPT> Conţine programe in limbaj JavaScript [/SCRIPT>
/* [STYLE> Cu informaţii despre stilul de scriere a textului [/STYLE>
/* [/HEAD>
/* [BODY> continutul documentului
.. descrierea paginii
/* [/BODY>
/* [/HTML>
3. Structura elementului BODY
Exista editoare HTML Macromedia Dreamweaver, FrontPage, care scriu direct cod HTML
a) Cod HTML pentru culoarea sau imaginea din fondul paginii, textul si culoarea link-urilor. Pentru culoarea de fond (background) se foloseste atributul BGCOLOR
Exemplu
- culoare de background
/* [body bgcolor="#0000ff">[/body>
- culoarea textului este data de atributul text
/* [body bgcolor="#0000ff" text="#ff0000">[/body>
b) Cod HTML pentru link
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.
Culori posibile
Nume Valoare RGB
Black #000000
Alb #ffffff


Exemplu
/* [body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff" alink="#ffff00">[/body>
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.
c) Cod HTML pentru imaginea ca fond pentru pagina (background)
[body background="imagine.gif" bgcolor="#ffffff">[/body>

d) Titluri [Hx> ... [/Hx>, unde x=1,2,3,4,5,6
Exemplu
/* [html>
/* [head>
/* [title>Titlu documentului[/title>
/* [/head>
/* [body>
/* [h1>Heading 1[/h1>
/* [h2>Heading 2[/h2>
/* [/body>
/* [/html>
e). Paragraf [p> ... [/p>
Exemplu:
/* [html>
/* [head>
/* [title>Titlu [/title>
/* [/head>
/* [body>
/* [p>Paragraf 1[/p>
/* [p>Paragraf 2[/p>
/* [/body>
/* [/html>

f) Un nou rand [br>
Tag-ul
permite sa decizi unde textul va incepe un nou rând, astfel se forteaza începerea unui nou rând.Nu are [/br>
Exemplu
/* [html>
/* [head>
/* [title>Titlu documentului[/title>
/* [/head>
/* [body>
/* [h1>Heading 1[/h1>
/* [p>Paragraf 1[br>
Linie 2

Linie 3

...

/* [p>Paragraf 2[/p>
/* [/body>
/* [/html>
g) Linie orizontala

---

Afiseaza o linie orizontala si nu foloseste
Elementul

---

foloseste urmatoarele atribute:
o - SIZE = latimea liniei, in pixeli (standard este 2)
o - WIDTH = lungimea liniei, in pixeli sau procente din lungimea afisarii paginii (standard 100%)
o - NOSHADE = afiseaza linia fara a avea un aspect 3D
o - ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau Dreapta paginii ( Standard centru)
o - COLOR = seteaza culoarea liniei
h) Formatul textului
HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe formate cu aspecte grafice diferite.
...
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">Mare[/font>
Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.
Exemplu :
/* font Arial Black
Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.
Exemplu :
/* [font color="#00dd00"> culoarea [/font>
Bold (ingrosat) [b> ... [/b>
Italic (inclinat) [i> ... [/i>
Underline (subliniat) [u> ... [/u>

Exemplu:
/* [b> Bold [/b>
/* [i> Italic [/i>
/* [u> Underline [/u>
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>

/* [b>Bold[/b>- [i> Italic [/i> - [u> Subliniat [/u> -
/* [font color="#ff0000"> Colorat [/font>

/* [em>Accentut[/em> - [strong> Strong [/strong> -
/* [tt>Tele type[/tt>[br>
/* [cite> Citatie [/cite>[/p>
/* [/body>
/* [/html>
/* [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
/* [strike> Text taiat [/strike>
/* [ Prezinta textul intr-un font mare [/big>
/* [ Prezinta textul intr-un font mic [/small>
/* [sub> Afisaza textul in pozitia subscript [/sub>
/* [sup> Aseaza textul in pozitia superscript [/sup>
/* [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>
/* [q> ... [/q> - Folosit pentru citate scurte.
/*

...

- Folosit pentru incadrarea de citate mai lungi, creaza spatiu pentru text.
/*

... [/address> - Cu acest element se specifica informatii cum ar fi autorul documentului si detalii pentru contact.
i) listelor neordonate [ul>
/* [li> element din lista [/li>
/* [/ul>

k) liste ordonate [ol>.
/* [li> element din lista [/li>
[/ol>
l)Adaugare Imagini
[img src=”nume.jpg” [/img>
Unde:
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.
Exemplu
/* [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">
/* [/body>
/* [/html>
m) 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.
/* Nume
- 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.marplo.net)
- 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">

m.1) Link-uri externe - (sunt cele mai utilizate), care sunt si ele de doua feluri:
m.1.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.
- 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:
/* Nume
m.1.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:
/* Nume

m.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
/* Textul tinta
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:
/* Nume

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:
/* Nume

r) Harti de imagini
Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi in functie de zona pe care se executa click, browserul poate afisea o alta pagina.
Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "" atributul "usemap" a carui valoare reprezinta numele hartii, apoi se incepe formarea hartii prin elementul:
/*
- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap"
in cadrul acestuia se adauga elemente

- acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care este "impartita" imaginea.

In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2 cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:
/* [img src="poza.jpg" usemap="#map1">
/* [map name="map1">
/* [area shape="rect" coords="9, 120, 56, 149" href="url">
/* [area shape="rect" coords="100, 200, 156, 249" href="url">
/* [/map>