Sunteți pe pagina 1din 20

Html sau HyperText Markup Language este unul dintre

cele mai vechi limbaje de programare web. Acesta st la baza


crerii unui site web.

Prima pagina web !!!!!


Copiaz urmtorul cod HTML n notepad.
<html>
<head>
</head>
<body><h2>Prima mea pagina web!</h2>
</body>
</html>
Salveaz fiierul cu numele index.html

Pentru a putea vedea pagina, va trebui s foloseti un browser.


Browser-ele sunt programele de internet care interpreteaz
codurile HTML, asemntoare cu acele pe care le-ai copiat i
salvat n notepad. Acestea transforma codul HTML ntr-o pagin
web care poate fi citit de orice internaut. Cele mai folosite
browsere sunt:
- Internet Explorer
- FireFox
- Opera
Vizualizarea primei pagini
Pentru a putea vizualiza pagina web, trebuie s deschizi fiierul
"index.html" ntr-un browser.

- Tag - folosit pentru a specifica regiuni ale documentului HTML,


pe care le va interpreta ulterior browser-ul. Tag-urile vor avea
aceasta nfiare: <tag>
- Element - este un tag complet, avnd un <tag> de deschidere i
unul de nchidere </tag>.
- Atribut - este folosit pentru a modifica valoarea unui element in
HTML. De obicei un element are mai multe atribute.
Deocamdat trebuie doar s reii c un tag este o comand pe care
browser-ul o interpreteaz, c un element este un tag complet, iar
un atribut personalizeaz i modific un element n HTML.

O pagin web are n componen dou elemente de baz.


<html>
<body>
Coninutul paginii va fi aici
</body>
</html>
Primul tag se numeste <html> i este cel care i spune browser-ului c a
nceput un cod n HTML. Cel de-al doilea tag <body> spune
browser-ului c aici ncepe partea vizibil sau coninutul paginii
HTML. nchiderea tag-urilor n HTML </body> i </html>.
"/" este pus naintea numelui tag-ului i spune browserului c ar dori s
ncheie respectiva funcie.
Deci <tag> este folosit pentru a ncepe o funcie, iar </tag> pentru a o
ncheia.

Un document HTML ntotdeauna va ncepe i se va termina cu


un tag <html> i respectiv </html>.
Elementul <head> este cel care urmeaz. "Head" nu are nici o
funcie vizibila(se pot insera aici printre altele coduri Javascript
sau CSS)
Ceea ce vei scrie ntre cele dou tag-uri title (<title> i </title>)
va putea fi vizualizat ca i numele browser-ului, de obicei n
partea din stnga sus. Alturat avem i codul sursa:
<html>
<head>
<title> Prima mea pagina web!</title>
</head>
</html>

Elementul <body>
Elementul body este cel care definete nceperea
coninutului paginii propriu-zise (titluri paragrafuri
fotografii ,muzica i orice altceva).
Body ncapsuleaz tot coninutul paginii.
<html>
<head>
<title> Prima mea pagina web!</title>
</head>
<body>
Salut Gsc! Aici voi pune mai trziu con inutul!
</body>
</html>

<body>Acioneaz ca o capsula asupra coninutului.


<p>Paragraf</p>
<h2>Titlu (heading)</h2>
<b>Ingroat (bold)</b>
<i>Inclinat (italic)</i>
<u>underline</u>
</body>
Exceptii - Tag-uri care nu au nevoie de nchidere
Cel mai simplu exemplu este "linebreak"
<br/>
Line break se folosete pentru a spune browser-ului c
vrem s coboram cu o linie mai jos, fr ns a ncheia
paragraful.

Dac vrei s aliniezi n mod diferit anumite elemente ale


pagini tale, atunci ai la dispozi ie atributul align. Poi alinia
la stnga (left), dreapta (right) , la mijlocul (center),la ambele
margini(justify). Prin default elementele se aliniaz la stnga
<html>
<head>
<title> Alinierea paragrafelor </title>
</head>
<body>
<p align=center>Este primavara!</p>
</body>
</html>

Attribute Options Function

align right, left, center , justify -Aliniere orizontal


valign top, middle, bottom -Aliniere vertical
bgcolor numeric, hexidecimal, sau valoare RGB- Un background n
spatele elementului
background URL- O imagine n spatele elementului
id Definit de user Numete un element care se va folosi cu CSS
class Definit de user- Clasific un element care se va folosi cu CSS
width Valoare numerica -Specifica limea unui tabel, imagine sau
csue de tabel.
height Valoare numerica -Specific nlimea unui tabel, imagine sau
csue de tabel.
title Definit de user "Pop-up". Afieaz un titlu pentru un element
stabilit.

<p>
<font size="5">Acesta este un font de marime 5 </font>
</p>
<font color="#990000">This text is hexcolor #990000
</font> <br />
<font color="red">This text is red</font>
<p>
<font face="Bookman Old Style, Book Antiqua,
Garamond">This paragraph has had its font...</font> <p>

Tipuri de liste
<ol> va afisa o lista ordonata
<ul> una neordonata cu atributul type(circle,square, disc)
<dl>lista de definitii.

Foloseste tag-ul <ol>pentru a incepe o lista ordonata. Prin


punerea <li></li> (list item) intre tagurile <ol> si </ol>
semnalizezi browser-ului elementele listei.
<h4 align="center">Obiective</h4>
<ol>
<li>Sa gasesc o slujba </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>

tag-ul<img/>
Atributul "src" este prescurtarea pentru "source"
(sursa)- se foloseste pentru a indica locatia fotografiei.
Atributul "alt" este folosit pentru a afisa un text in locul
imagini, in cazul in care browser-ul pentru un oarecare
motiv nu poate afisa imaginea sau in cazul in care un
user are deselectata functia "ShowImage".
Ex.:
<img src="http://example.com/folder/image.jpg"
alt="Imagine Albastra "/>

Pentru a stabili inaltimea si latimea unei imagini sunt


folosite atributele height si widith.
<img src="../img/image.jpg" alt="Imagine Albastra"
width="100" height="50" />
Alinierea orizontala si verticala a unei imagini
Se folosesc atributele align si valign.
1. Align (orizontal)- right- left- center
2.Valigh (vertical) - top- bottom - center
Folosirea imaginilor ca link
<a href="http://www.tutorialehtml.com">
<img src="../img/image.jpg"> </a>

Exemplu:
<p>Acesta este primul paragraf ...</p>
<p>
<img src="../img/image.jpg" align="left">
Acesta este cel de al doilea paragraf...
</p>
<p>Acesta este cel de al treilea paragraf...</p>

Tagul <table> este folosit pentru a deschide un tabel.


Inauntrul acestui tag se gasesc alte doua taguri tipice
<tr> (liniile tabelului) si <td> (coloanele tabelului).
<table border="5">
<tr>
<td>un text</td>
<td> alt text</td>
</tr>
<tr>
<td>text pe randul 2
</td>
<td>alt text pe randul 2
</td>
</tr>
</table>

Border-defineste grosimea liniilor care inconjoara tabelul


Width-latimea tabelului-poate fi data in procent fata de
latimea ferestrei browserului width=50% sau in pixeli
width=500
Height-inaltimea tabelului
Align-left,right,center
Valign-pozitia verticala a textului in celula-top, middle,
bottom,baseline
Rules- modul in care vor fi trasate liniile care separa celulele
tabelului-none, rows,cols,all
Bgcolor-culoarea de fond comuna tuturor celulelor
Border color-culoarea liniilor

Color Hexa
aqua #00FFFF green #008000 navy #000080 silver #C0C0C0
black #000000 gray #808080 olive #808000 teal #008080
blue #0000FF lime #00FF00 purple #800080 white #FFFFFF
fuchsia #FF00FF maroon #800000 red #FF0000 yellow
#FFFF00

Link-uri text.Pentru a seta inceputul si sfarsitul unei ancore


se poate folosi <a></a>.
<a href="http://www.tutorialehtml.com" target="_blank"
>Zizix Tutoriale </a>
Target-uri de link-Atributul target spune browser-ului daca
trebuie sa deschida noua pagina intr-o noua fereastra sau in
aceeasi fereastra.
target=" _blank" Deschide o noua fereastra
_self" Deschide pagina in aceeasi fereastra
_parent" Deschide noua pagina intr-un frame superior
linkului
_top" deschide noua pagina in acelasi browser anuland
toate frame-urile

<a href=http://www.ls-infomat.ro/index.html><img
src=ls.bmp></a>
Link-uri de download
<a href="http://www.tutorialehtml.com/htmlT/text.zip">
Text Document</a>
Link-uri de e-mail
<a href="mailto:cineva@exemplu.com?subject=Nelamuriri
" >Nelamuriri aici </a>