[Romanian] HTML Internship Course

ACADEMY 2015
Bine ati venit!
- Iszlai Zoltan

Reguli
 Interactivitate
 Nu sunt intrebari stupide
 Respect
 Punctualitate
 Telefon silentios
Pagina 1 din 12

Start
Pagina 2 din 12
• De ce participati la Sysgenic Academy?
• Ati mai lucrat in HTML?
• Ce va place / nu va place la HTML?
Inainte Dupa

Introducere
• Paginile web sunt fisiere text ce contin cod HTML
• HTML – HyperText Markup Language
• Este un limbaj de marcare utilizat pentru crearea paginilor web
ce pot fi afisate intr-un browser (Wikipedia)
• Este o notatie de a descrie
• structura documentului
• formarea documentelor
Pagina 3 din 12

Notiuni de baza (<!doctype)
• Paginile HTML sunt formate din elemente precum <h1>, <p>, <br> si
au extensiile .html
• Fiecare element poate sa aiba unu sau multe atribute si valori:
• <element atribut=“valoare”>…</element>
• <element atribut=”valoare”>
• Versiunea HTML5 se defineste prin <!DOCTYPE HTML>
• Pentru comentarii folosim sintaxa: 
Pagina 4 din 12

Notiuni de baza #2 (<head>)
<!DOCTYPE HTML>
<html>
<head>
<title>Exemplu</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Pagina 5 din 12
Exemplu de cod HTML5:
La <head> putem sa punem:
<meta name=“description" content=“This page is about …">
<link rel=“stylesheet” href=“assets/style.css”>
<script src=“assets/script.js”>

Elemente generale
Pagina 6 din 12
Codul pentru continut il punem in <body>
• Elementele HTML5 noi si semantice sunt:
• <article>, <aside>, <header>, <footer>, <section>, …
• Pentru titluri folosim:
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• La continut putem sa folosim:
• <p>, <span>, <div>, <br>
• Pentru citate folosim:
• <blockquote>, <cite>, <q>
• Pentru linkuri folosim:
• <a href=“#”>…</a>

Notiuni generale
Pagina 7 din 12
• In HTML unele elemente sunt definite ca si elemente block:
• <div>, <p>, <h1>, <table>, …
• Unele elemente sunt definite inline:
• <span>, <b>, <i>, <tt>, <abbr>, <code>
• Divitus and classitus:
• Sa folosim mai multe elemente generale, ca si <div>
s-au sa folosim elemente semantice?
• Id-uri si clase:
• Fiecare element poate sa aiba un id si o definitie de clasa
• Id-urile sunt unice, pot sa contina o singura valoare
• Clasele pot sa aiba mai multe valori
<div id=“news” class=“news-general news-latest”> …. </div>

Liste
Pagina 8 din 12
• Avem la dispozitie 3 tipuri de liste:
Unstyled list:
• <ul>
• <li>Item 1</li><li>Item 2</li>
• </ul>
Ordered list:
• <ol>
• <li>Item 1</li><li>Item 2</li>
• </ol>
Definition list:
• <dl>
• <dt>Coffee</dt>
• <dd>black hot drink</dd>
• <dt>Milk</dt>
• <dd>white cold drink</dd>
• </dl>

Imagini
Pagina 9 din 12
• Pentru a include imagini folosim:
• <img src=“images/blank.jpg” alt=“” width=“” height=“”>
• Pentru a include o harta putem sa folosim elementele:
• <map> si <area>, unde
• <map> defineste o grupare de acoperire a unei imagini:
si <area> defineste o arie de acoperire: cerc, dreptunchi, polygon, …
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Tabele
Pagina 10 din 12
• Pentru tabele folosim elementul <table>
• Pentru randuri: <tr>
• Pentru date folosim: <td>
• Ca si titlu putem sa folosim: <caption>
• Avem si urmatoare elemente care ajuta: <thead>, <tbody>, <tfoot>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Formulare
Pagina 11 din 12
• Se pot adauga formulare cu elementele:
• <form>, <fieldset>, <label>
• Pentru a fi preluate server-side avem elementele care pot contine
continut de la user:
• <input type=“text” …, <textarea …, <select …,
<form method=“post” action=“”>
<fieldset>
<label>
<input type="radio" name="sex" value="male" checked>
Barbat
</label>
<label>
<input type="radio" name="sex" value="female">
Femeie
</label>
</fieldset>
</form>

Resurse suplimentare
Pagina 12 din 12
• Editori de HTML:
• Sublime text: http://sublimetext.com
• Notepad++: http://notepad-plus-plus.org/
• Dreamweaver: http://www.adobe.com/products/dreamweaver.html
• Tutoriale:
• Tuts+: http://tutsplus.com
• Codeademy: http://www.codecademy.com
• Image slicing (editori de imagini):
• Adobe Photoshop
• Adobe Fireworks

[Romanian] HTML Internship Course

Recommended

Recommended

More Related Content

More from Zoltan Iszlai

More from Zoltan Iszlai (16)

[Romanian] HTML Internship Course