HTML

HTML & CSS
basics
BY BELEAN COSMIN
Cuprins
HTML
CSS
HTML
HTML este prescurtarea de la Hyper Text Mark-up Language este un limbaj
de marcare utilizat pentru crearea paginilor web ce pot fi afiate ntr-un
browser .
Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html
sau .htm.
n marea lor majoritate aceste etichete sunt pereche, una de deschidere
<eticheta> i alta de nchidere </eticheta>
Structura unui document HMTL

Toate paginile HTML incep cu eticheta <html> si se termina cu eticheta
</html>.
In interiorul acestor etichete gasim perechea <head> </head> si perechea
<body> </body>.
Zona head contine titlul paginii intre etichetele <title> si </title>, descrieri
de tip <meta>, stiluri pentru formatarea textului, scripturi si linkuri catre
fisiere externe (de exemplu scripturi Javascript, fisiere de tip CSS. Exemplu
link catre un fisier CSS <link rel="stylesheet" type="text/css"
href=main.css">.
Zona body gazduieste practic toate etichetele afisate de browser pe ecran.
Structura unui document HMTL

<html>
<head>
<title>Titlu</title>
</head>
<body>
Continut pagina
</body>
</html>
Orice document HTML este marcat de

eticheta <HTML>
Tag-ul <head> contine titlul paginii html si link-uri catre
fisiere externe, ex: link catre fiseire CSS, JavaScript, etc/
Tag-ul <title> contine numele site-ului care va fii afisat
in browser
Tag-ul <body> contine etichetele HTML si continutul
documentului care va fi afisat in pagina web, practic continutul
propriu-zis a paginii web.
Fiecare tag HTMl incepe cu sintagma <nume_tag> si
se incheie </nume_tag>
Headings
Pentru titluri din continutul documentului HTML este indicat folosirea etichetelor <Hx>,
(headings) unde 'x' este un numar intre 1 si 6, reprezentand marimea fontului
Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading
<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading
</body>
</html>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragrafe
Paragrafele permit adaugarea unui 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
rnd. Este marcat de tag-urile <p>Text </p>
Formatare text
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
Link-uri & Imagini

Link-urile permit utlizatorilor navigarea catre o alta pagina web.
Definirea unui link: <ahref="url">link text</a>
Exemplu <a href = "http://www.dvse.ro">Apasati aici</a>
Imaginile sunt definite folosind tag-ul <img>:
<imgsrc="url"alt="some_text">
Atributul src specifica adresa web sau path-ul unde se afla imaginea.
Atributul alt furnizeaza un text daca imaginea nu poate fi afisata din diverse
motive (conexiune lenta, eroare aparuta in src-ul imaginii, etc)
Liste
Listelesunt un mod simplu de organizare a informatiei si pot fi neordonate,
ordonate si de definitii
Liste neordonate
Aceste liste sunt delimitate de etichetele<ul> si </ul> iar elementele de<li>
si </li>
Liste ordonate
Aceste liste sunt delimitate de etichetele<ol> si </ol> iar elementele de<li>
si </li>.
DIV-uri & SPAN-uri

Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de
continut pot fi manipulate pentru fiecare in mod separat.
Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un
context, putand fi folosit si ca o "clasa" cu CSS. Singur nu are nici un efect
vizual poropriu si nu foloseste nici un atribut HTML special.
Chiar daca folosite singure, DIV si SPAN nu au nici un efect major, in
combinatie cu CSS pot crea aspecte grafice importante. Pentru aceasta,
ambele pot folosi atributulstyle(cu proprietati CSS) ori
atributeleidsauclassca identificator pentru stiluri CSS.
Formulare HTML
Formularulesteunul dintre cele mai importante unete folosite de un
webmaster pentru a obtine informatii importante despre un internaut,
informatii precum email, nume, adressa, telefon sau orice alte informatii.
Campuri de text
type- Determina tipul campului de text. De exemplu: text, trimite, sau
parola.
name- Atribuie un nume campului pentru a pute face referire la el mai tarziu
size- Seteaza marimea campului.
maxlength- valoarea maxima de caractere ce pot fi introduse
Checkbox-uri & Radiobutton-uri

Butoanele Radiosunt foarte populare, utile si usor de folosit. Cel mai
intalnit exemplu a fi o intrebare cu multiple variante de raspuns. Atributele
care ar trebui cunoscute sunt urmatoarele:
value- specifica ceea ce va fi trimis in cazul in care un user selecteaza un
anume buton. Doar o singura valoare va fi trimisa.
name- decide carui set de butoane apartine butonul selectat.
Cu ajutorulCheckBox-urilor userul are posibilitatea de a alege unul, doua
sau mai multe variante de raspuns. Atributelenamesivaluese folosesc la
fel ca si pentru butoanele radio.
Dropdown-uri lists
Un alt model de formular este meniul
"dropdown". Acesta va fi afisat ca si un camp,
care va afisa o lista atunci cand este executat
un clik asupra lui.
Tabele
Tagul <table> este folosit pentru a deschide un
tabel. Inauntrul acestui tag vom gasi alte doua
taguri tipice <tr> (liniile tabelului), <td>
(coloanele tabelului), <th> celulele header-ului
tabelului.
CSS Cascading Style Sheets

CSS, prescurtarea de laCascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de
exemplu formatare text, background sau aranjare in pagina, etc.).
Intr-un fisier HTML, in sectiunea <head> se va specifica link-ul catre fisierul CSS: <link rel="stylesheet"
type="text/css" href=main.css">
Atributele indica urmatoarele:
rel- fisierul este tip styleshhet
type- tip text ce contine comenzi CSS
href- fisierul sau adresa fisierului CSS.
Comenzile CSS de nivel 1 sauinlinesunt 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>
Este permisa folosirea comentariilor in CSS ca si in HTML:
/* Acesta este un comentariu in CSS */
Id & Class
IdsiClasssunt comenzi care dau unei formatari CSS un nume.
Elementul idse aplica unui style de format o singura data sau
la o singura eticheta HTML, plasandu-se unnumeacelui style.
<div id = nume>
Elementul classeste similar cuiddar, spre deosebire de
acesta poate fi folosit de mai multe ori sau pentru zone mai mari.
<div class = nume>
Toate elementele care fac parte dintr-un id sau o clasa vor fi
formatate in acelasi fel.
Id & Class
Desi atat#idcat si.classse pot folosi pentru a da stil unui
element html. In practica, se foloseste in acest scop doar
atributulclass. Atributulid este folosit in general in javascript,
pentru a localiza un element html si executa actiuni asupra lui.
Pe de alta parte atributulidtrebuie sa fie unic in pagina. Asta
inseamna ca nu poate exista un alt element html cu acelasiid.
Prezenta mai multor elemente cu acelasiid, poate genera erori
javascript si un cop html invalid.
Sintaxa CSS
body { background-color: #efefef; font-size: 20px}

h3 { font-family:Arial }
p { background-color:rgb(255,0,0); }
div { background-color: black; }
Formatarea textului
Culoare
body { color: #ffff00 sau Yellow; }
h1 { color: red; }
p { color: rgb(255,0,0); }
Alinierea textului
#dvsero {text-align: center }
Transformarea textului in CSS
p { text-transform: uppercase; }
p { text-transform: lowercase; }
p { text-transform: capitalize; }
.dvsero {text-align: left}
Formatarea textului
Font si familii de fonturi exista 2 familii de fonturi: Sans si Sans Serif
p { font-style: normal; }
.clasa { font-style: italic; }
#id { font-weight: bold; }
Marimea textului
h1 { font-size: 30px; }
h2 { font-size: 20px; }
p { font-size: 12px; }
CSS Layout display property

Proprietatea display specifica daca/cum un element HTML este afisat.
Cele mai importante valori sunt: block si inline;
Un element cu proprietatea display:block va fi afisat tot timpul pe un rand nou si va
lua maximum latimii disponibile.
Exemple de elemente block:
<div>; <h1> - <h6>; <p>; <form>; <header>; <footer>; <section>
Un element cu proprietatea display:inline nu va fi afisat pe o linie noua si va lua
doar latimea necesara:
Exemple de elemente block: <span>; <a>; <img>
Incadrarea continutului
margin- distanta intre border si marginea paginii
border- marginea si cutia care incadreaza
continutul
>padding- distanta intre border si continut
content- continutul propriu-zis (text, imagini, etc)
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
Selectarea elementelor HTML

Exemple de selectie a elementelor HTML.
div p {
background-color:yellow; } -> selecteaza si formateaza fiecare <p> care
se afala in <div>.
div + p {
font-family: Comic Sans; } -> stilizeaza primul element <p> aflat imediat
dupa <div>.
h1, h2, h3, h4{
font-family: Arial; } -> formateaza elementele h1,h2,h3,h4
Selectarea elementelor HTML

<div id=dvsero">
<p>Apple<p>
#dvsero p:nth-child(2) {
color:blue }
<p>Mango<p>
</div>
<ul>
<li>Mere</li>
<li>Prune</li>
<li>Banane</li>
<li>Struguri</li>
</ul>
ul li:nth-child(3) { font-size:15px; }
Va multumesc!

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

HTML & CSS

Structura unui document HMTL

Structura unui document HMTL

Orice document HTML este marcat de

Link-uri & Imagini

DIV-uri & SPAN-uri

Checkbox-uri & Radiobutton-uri

CSS Cascading Style Sheets

body { background-color: #efefef; font-size: 20px}

.dvsero {text-align: left}

CSS Layout display property

Selectarea elementelor HTML

Selectarea elementelor HTML

S-ar putea să vă placă și