Web Design Basic - Curs 1 - Introducere in HTML v01

2013 Cursurile Varilogic. Toate drepturile rezervate.
Varilogic Public
Web Design Basic
1. Introducere n HTML
1
YM! daniel_condurachi | daniel.condurachi@varilogic.ro
contact@varilogic.ro | www.varilogic.ro |www.facebook.com/varilogic
2013 Cursurile Varilogic. Toate drepturile rezervate. Varilogic Public
Platforma Varilogic
http://academy.varilogic.ro/
2
Cu cine?
3
www.danielcondurachi.com
Date generale
Curs structurat 5 capitole
Diplom de participare/absolvire
Documentaie de curs PDF
Aplicaii reale/din experiena mea de lucru
4
Pentru cine?
curs generalist/introductiv
job HTML-ist
nu programatori web
Web Design Advanced (PHP, MySQL)

cunotine minime
limba englez
operare PC
5
Ce?
Website funcional
HTML & CSS
unelte utile
standarde
principii SEO
6
Cum?
Laborator 2 ore
Clarificri curs anterior
Prezentare teoretic (necesar: caiet de notie)
Lucru practic
Sesiune ntrebri i rspunsuri
Tem pentru acas
Examen absolvire
test gril
28/40 ntrebri
maxim 3 ori
teme & restane
Proiect
o sptmn
folosind informaiile nvate n curs, inclusiv 960 grid system
7
Cnd
1. HTML & Unelte utile & Standarde
structura unei pagini web
programe utile & formatare
elemente de baza & imagini & linkuri & liste
W3C
2. HTML avansat & SEO
tabele
formulare & butoane
elemente & caractere speciale
XHTML & HTML5
principii SEO
8
Cnd?
3. CSS & Unelte utile & Standarde
elemente de baza & componente
etichete HTML & stiluri CSS
structur
text & fundal & culori
W3C
4. CSS avansat
layout: element + padding + border + margin
float & dimensiuni
poziionare: moduri, raport,
pseudo-clase & pseudo-elemente
prioriti
CSS3
browsere
5. Finalizare website
organizare & structur
verificatori de cod
9
Azi ce?
Grid system
Interaciune cu clientul
Wireframing
HTML

10
De ce grid system
rapid & uor & ordonat
suprafa de lucru structurat
totui nu e plictisitor
nu neaprat simetric
11
Grid system - cum
www.960.gs
Big ol DOWNLOAD button
12 / 16 / 24 coloane
12
Interaciune cu clientul
montaj/recondiionare/curaare
parchet/faian

13
Elemente necesare & prioritizare prima pagin
1. logo
2. contact
3. free quote
4. descriere separata pt instalare, reparaii, curare
5. ultimul job
6. testimonial
7. search
8. social links
9. cupon
10. zone deservite

14
Meniu
1. about
2. services
3. testimonials
4. gallery
5. contact
15
Wireframing
pe hartie
sau http://www.balsamiq.com/products/mockups

16
Ce este HTML
Hyper Text Markup Language
limbaj descriere pagini web
etichete de marcare
istoric
HTML - 1991
HTML+ - 1993
HTML 2.0 - 1995
HTML 3.2 - 1997
HTML 4.01 1999
HTML5 - 2012
17
Etichete de marcare (tags)
cuvinte cheie ncadrate de 
pereche
un paragraf
simple
 
excepii

<!DOCTYPE html>
18
Document HTML5 minim
<!DOCTYPE html>
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
Continutul documentului...
</body>
</html>

http://www.w3schools.com/html
19
Paragraf
textul paragrafului

 - trecere pe rnd nou
<hr> - linie orizontal
textul de ngroat - ngroat
textul de nclinat - nclinat
textul de subliniat - subliniat
textul micsorat - folosit pt copyright i comentarii
<blockquote>citat</blockquote>

20
Imagini
<img src=cale alt=descriere [opional] />
id
class
style
nlime height = valoare n pixeli sau procente
laime width = valoare n pixeli sau procente
specific faptul c imaginea este parte a unei image-map (imagine cu zone
active/click-uibile): ismap=ismap
<img src="w3html.gif" alt="W3Schools.com ismap="ismap" />
definire zone click-uribile din imagine - usermap: #nume-zon
<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>
URL ctre descriere pe lung - longdesc: URL
<img src="w3html.gif" alt="W3Schools.com" longdesc="w3s.txt" />

21
Link-uri
<a href=link title=nume pagin[opionale] >text link</a>
id
class
style
relaia dintre pagina curent i legtur rel = valoare
nofollow specific ca motorul de cutare sa nu urmreasc linkul
relaia dintre link i pagina curent rev = valoare
unde se va deschide noua pagin target = valoare
_blank o nou fereastr sau tab de browser
_top n zona principal a noii pagni

relativ relativ la locaia focumentului
absolut n funie de locaia pe HDD
22
Titluri
<h1>titlul</h1>
h1, h2, h3, h4, h5
23
twitter fotografiasi | YM! daniel_condurachi | daniel.condurachi@varilogic.ro
contact@varilogic.ro | www.varilogic.ro |www.facebook.com/varilogic
24

Web Design Basic - Curs 1 - Introducere in HTML v01

Î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

Web Design Basic - Curs 1 - Introducere in HTML v01

Încărcat de

Drepturi de autor:

Formate disponibile

2013 Cursurile Varilogic. Toate drepturile rezervate.

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