HTML & CSS Basics PDF

HTML & CSS basics
BY BELEAN C OSM IN
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>
Orice document HTML este marcat de eticheta <HTML>
<head>
Tag-ul <head> contine titlul paginii html si link-uri catre fisiere externe, ex:
link catre fiseire CSS, JavaScript, etc/
<title>Titlu</title>
Tag-ul <title> contine numele site-ului care va fii afisat in browser
</head>
<body>
Tag-ul <body> contine etichetele HTML si continutul documentului care va fi

afisat in pagina web, practic continutul propriu-zis a paginii web.
Continut pagina
</body>
</html>
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>
Heading 1
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
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: <a href="url">link text</a>

Exemplu <a href = "http://www.dvse.ro">Apasati aici</a>
Imaginile sunt definite folosind tag-ul <img>:
<img src="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
Listele sunt 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 atributul style (cu proprietati CSS)
ori atributele id sau class ca identificator pentru stiluri CSS.
Formulare HTML
Formularul este unul 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 Radio sunt 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 ajutorul CheckBox-urilor userul are posibilitatea de a alege unul, doua sau mai multe
variante de raspuns. Atributele name si value se 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 la Cascading 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 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>
Este permisa folosirea comentariilor in CSS ca si in HTML:
/* Acesta este un comentariu in CSS */
Id & Class
Id si Class sunt comenzi care dau unei formatari CSS un nume.
Elementul id se aplica unui style de format o singura data sau la o singura
eticheta HTML, plasandu-se un nume acelui style. <div id = nume>
Elementul class este similar cu id dar, 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 #id cat si .class se pot folosi pentru a da stil unui element html. In
practica, se foloseste in acest scop doar atributul class. Atributul id este folosit in
general in javascript, pentru a localiza un element html si executa actiuni asupra
lui.
Pe de alta parte atributul id trebuie sa fie unic in pagina. Asta inseamna ca nu

poate exista un alt element html cu acelasi id. Prezenta mai multor elemente cu
acelasi id, 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">
#dvsero p:nth-child(2) {
<p>Apple<p>
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 & CSS Basics PDF

Încărcat de

Informații document

Titlu original

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 & CSS Basics PDF

Încărcat de

Drepturi de autor:

Formate disponibile

HTML & CSS basics

Structura unui document HMTL

Structura unui document HMTL

Orice document HTML este marcat de eticheta <HTML>

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

Fiecare tag HTMl incepe cu sintagma <nume_tag> si se incheie

Link-uri & Imagini

Definirea unui link: <a href="url">link text</a>

DIV-uri & SPAN-uri

Checkbox-uri & Radiobutton-uri

CSS Cascading Style Sheets

Pe de alta parte atributul id trebuie sa fie unic in pagina. Asta inseamna ca nu

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