Curs HTML
14
ACADEMY 2015 Bine ati venit! - Iszlai Zoltan
-
Upload
zoltan-iszlai -
Category
Technology
-
view
35 -
download
0
Transcript of Curs HTML
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: <!-- comment -->
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
Intrebari?
Sfarsit
