Curs 1

Curs 1
a. Tag-uri de baza + atribute XHTML: html, head, title, body, p, span, h1-h5, hr,
br, a, select, table, ul-li, dl-dt-dd, div, form, script, link, style
<!DOCTYPE html>
<html>
<head> 
<title>Pagina simpla<title> 
</head>
<body>
<p>Continutul paginii se pune aici. Aici se pun si tabele, formulare,
link-uri, text, liste. </p>
</body>
</html>
- DOCTYPE ii spune browserului tipul fisierului de interpretat

- In tag-ul body se pune continutul paginii
Tag-urile p, span, h1, h6, hr, br

<html>
<head>
<title>Tag-urile p, span, h1, h6, hr, br</title>
</head>
<body>
<p>Some text 1</p> 
<span>Some text 2</span> 
<h1>Un titlu</h1> 
<h6>Un titlu cu font mai mic</h6> 
<hr /> 
<br /> 

</body>
</html>
p = paragraf (aliniat)
h1-h6 = header 1-6
hr = horizontal line
br = break line (linie noua)
Link ce duce spre pagina de la google.

<a href="http://www.google.com">Da click aici</a>
a = anchor; tag folosit pentru punerea unui link pe pagina

href = atribut al tag-ului <a> in care se pune pagina spre care vrem sa fie dus
userul cand da click pe link
Link ce duce spre pagina de la google si se deschide intr-un nou tab.
<a href="http://www.google.com" target="_blank">Da click aici</a>
target = atribut al tag-ului <a> a carui valoare modifica modul in care se deschide
pagina spre care duce link-ul
Lucrul cu tabele
<html>
<head>
<title>O alta pagina</title>
</head>
<body>
<table>
<caption>Masini de vanzare</caption> 
<thead> 

<tr> 
<th>Marca</th> 
<th>Culoare</th>
<th>An</th>
<th>Pret</th>
</tr>
</thead>
<tbody> 
<tr> 
<td>Audi</td>
<td>verde</td>
<td>2000</td>
<td>5000 euro</td>
</tr>
<tr> 
<td>BMW</td>
<td>alb</td>
<td>2010</td>
<td>12000</td>
</tr>
</tbody>
</table>
</body>
</html>
- In tag-ul <caption> se pune titlul tabelului

- tr = table row
- th = table header
- td = table data
Lista neordonata simpla

<ul>
<li>Blugi</li>
<li>Camasi</li>
<li>Pantofi</li>
<li>Umbrele</li>
</ul>
Crearea unui meniu folosind o lista neordonata
<ul>
<li><a href="blugi.html">Blugi</a></li>
<li><a href="camasi.html">Camasi</a></li>
<li><a href="pantofi.html">Pantofi</a></li>
<li><a href="umbrele.html">Umbrele</a></li>
</ul>
Nested lists (lista in lista; e o structura care poate sa fie folosita la crearea
de meniuri drop-down)
<ul>
<li>Placi video
<ul>
<li>GIGABYTE GeForce GTX 750 Ti OC2 WindForce 2X 2GB DDR5 128-
bit</li>
<li>GIGABYTE GeForce GTX 960 OC WindForce 2X 4GB DDR5 128-bit
HDMI</li>
</ul>
</li>
<li>Procesoare
<ul>
<li>Intel Skylake, Core i7 6700K 4.0GHz box</li>
<li>Procesor Intel Skylake, Core i5 6500 3.20GHz box</li>
<li>Procesor Intel Haswell Refresh, Core i5 4460 3.2GHz box</li>
</ul>
</li>
<li>Carcase
<ul>
<li>Carcasa Zalman Z3 Plus</li>
<li>Carcasa Deepcool Tesseract BF black</li>
<li>Carcasa Inter-Tech K-2 GTS black</li>
<li>Carcasa Segotep AND Black-Red</li>
</ul>
</li>
<li>Monitoare
<ul>
<li>Monitor LED BenQ Gaming XL2411Z 24 inch 1ms Black 144Hz</li>
<li>Monitor LED Philips 223V5LSB/00 21.5 inch 5ms black</li>
</ul>
</li>
</ul>
Definition lists
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
- dl = definition list
- dd = definition data
- dt = definition term
Lucrul cu tag-ul div. Acest tag este folosit mai mult pentru impartire paginii in
sectiuni. De obicei un div contine multe alte tag-uri in interiorul sau.
<html>
<head>
</head>
<body>
<div> 
Large div
<div> 

Small div 1
</div>

Small div 2
</div>
</div>
</body>
</html>
- Atributul "method" - felul in care e transmis formularul

- The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
Adaugarea de imagini
<img src="imagine.jpg" width="300" height="500" />
<img src="imagine.png" width="120" height="120" />
<img src="imagine.gif" width="800" height="500" />
Meta tags
Redirectare pagina (dupa 5 sucunde suntem dusi pe w3.org)

<meta http-equiv="refresh" content="5; url=http://www.w3.org" /> 
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>
<body>
<div> 
Large div

Small div 1
</div>

Small div 2
</div>
</div>
</body>
</html>
Tag-ul HTML5 hgroup

<html>
<head>
</head>
<body>
<hgroup> //contine doar h tags
<h1>Text 1</h1>
<h2>Text 2</h2>
</hgroup>
</body>
</html>
Adaugarea de text preformatat in pagina

<pre>some
text
</pre>
Linie orizontala
<hr width="45%" size="4" align="center" noshade>
Lista ordonata
<ol start="5" type="I"> (Lista ordonata cu cifre romane)
Table cell cu atribute

<td rowspan="" colspan="">
Adaugarea unui link pe pagina

<a href="a.html" target="nume.html">Some text</a>
<input type="" size="30" maxlength="25" />

<input type="radio" name="orice" value="orice" checked />
Trimitere de email
Cu link
i. <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
ii. mailto with content:
<a href="mailto:?subject=look at this website&body=Hi,I found this website
and thought you might like it http://www.geocities.com/wowhtml/">tell a friend</a>
Exista si atribute html care au legatura cu javascript

- Evenimentul onsubmit
<form ... onsubmit="return verifica(this)"> 
...
</form>
- Evenimentele onmouseover, onmouseout

<a onmouseover="f(img1.jpg)" onmouseout="f(img2.jpg)">Hover here!</a>
Go to labels
<a name="top"></a>
...
<a href="#top">Back to top</a>
Valori ale lui DOCTYPE pt. XHTML

i. strict
If you are planning to use Cascading Style Sheet (CSS) strictly and avoiding to
write most of the XHTML attributes, then it is recommended to use this DTD. A
document conforming to this DTD is of the best quality.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ii. transitional
If you are planning to use many XHTML attributes as well as few Cascading Style
Sheet properties, then you should adopt this DTD and you should write your XHTML
document accordingly.
compatibil cu browsere mai vechi - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
iii. frameset
You can use this when you want to use HTML Frames to partition the browser window
into two or more frames.
pt documente cu frame-uri - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Includerea de fisiere CSS in pagina

<link rel="stylesheet" type="text/css" href="style.css" />
Includerea de fisiere javascript in pagina

<script type="text/javascript" src="fisier.js"></script>
Adaugarea de cod Javascript direct in pagina fara a utiliza un fisier separat

<script type="text/javascript">
// JavaScript code here
</script>
Alte tag-uri in care se poate pune text

<html>
<head>
</head>
<body>
<em>Emphasized text<em>
<strong>Strong text</strong>
</body>
</html>
Adaugarea de imagini
<img src="imagine.png" title="" />
De memorat
tag = parte de baza HTML care intra in compozitia unei pagini HTML
atribut = parte optionala a unui tag care poate modifica modul in care browserul
interpreteaza un tag; are forma atribut="valoare"
a = anchor (link)
href = atribut al lui <a> a carui valoare e pagina spre care e dus userul cand se
da click pe link
p = paragraf; folosit pentru adaugarea de text pe pagina; fiecare text din cadrul
unui tag <p> apare pe o linie noua
span = folosit pentru adaugarea de text pe pagina; fiecare text din cadrul unui tag
<span> nu apare pe o linie noua
h1 = titlu de dimensiune mare (header principal)
h6 = titlu sau subtitlu de dimensiune mai mica (header mai mic)
br = break (new line)
hr = horizontal line
select = utilizat pt crearea de liste drop-down cu mai multe optiuni
option = folosit pentru a adauga optiunile unui select
table = folosit pentru crearea unui tabel
form = folosit pentru crearea de formulare pe pagini (ex. formular de login,
inregistrare, plata cu cardul)
ul = unordered list (utilizari: meniuri, galerie foto, altele)
li = list item (element al unei liste)
dl = definition list (e o lista cu definitii)
dt = definition term (termen cu dd langa el)
dd = definition data
link = tag folosit pentru includerea de fisiere CSS in pagina
style = adaugarea de CSS in cadrul paginii (se poate doar in tagul head)
img = adaugarea unei imagini pe pagina (locul unde se afla imaginea si numele ei se
adauga in atributul "src")
input = tag folosit pentru a primi date de la utilizator; este de mai multe feluri:
text, password, radio, checkbox, submit, file, etc.; contine in mod obligatoriu si
atributul name
method = atribut ce apare pe tag-ul form; este folosit pentru a specifica metoda
prin care sa fie transmis formularul (get sau post)
action = atribut al tag-ului form care retine locul unde va fi procesat formularul
(de obicei valoarea lui este numele unui fisier ce contine cod de programare)
img = tag pt adaugarea de imagini
src = atributul source

Curs 1

Î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

Curs 1

Încărcat de

Drepturi de autor:

Formate disponibile

Curs 1

- DOCTYPE ii spune browserului tipul fisierului de interpretat

Tag-urile p, span, h1, h6, hr, br

<h1>Un titlu</h1> <!-- header 1 tag - text boldat de dimensiune mare

<hr />

<br />

Link ce duce spre pagina de la google.

a = anchor; tag folosit pentru punerea unui link pe pagina

<thead>

- In tag-ul <caption> se pune titlul tabelului

Lista neordonata simpla

<div>

<div>

- Atributul "method" - felul in care e transmis formularul

Redirectare pagina (dupa 5 sucunde suntem dusi pe w3.org)

<div>

<div>

Tag-ul HTML5 hgroup

Adaugarea de text preformatat in pagina

Table cell cu atribute

Adaugarea unui link pe pagina

<input type="" size="30" maxlength="25" />

Exista si atribute html care au legatura cu javascript

- Evenimentele onmouseover, onmouseout

Valori ale lui DOCTYPE pt. XHTML

Includerea de fisiere CSS in pagina

Includerea de fisiere javascript in pagina

Adaugarea de cod Javascript direct in pagina fara a utiliza un fisier separat

Alte tag-uri in care se poate pune text

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