HTML&CSS - 1st step

HTML & CSS

Mihai Oniţa

2/18

HTML: Hyper Text Markup Language Limbaj de marcare care permite afişarea paginilor Web şi a altor informaţii într-un browser (client Web)

CSS: Cascading Style Sheets Standard pentru formatarea elementelor unui document HTML

JavaScript Limbaj de scripting utilizat pentru a aduce interactivitate şi funcţionalitate site-urilor Web

Nu are nimic de a face cu Java!!!

3/18

4/18

5/18

6/18

Streaming video

Dispozitive mobile

Persoane cu dizabilităţi

Firefox Opera

Chrome

Internet Explorer

Clienți Web

7/18

Dezvoltare Web Tutoriale http://www.w3schools.com, http://www.lynda.com Resurse Web http://www.cssauthor.com/ Template, icoane, logo http://browsershots.org/ PSD templates http://psdstyle.net/ PSD templates http://www.xoops-theme.com/ PSD templates http://www.blazrobar.com/ PSD templates http://wedesignpixel.com/ Adobe Dreamweaver http://www.adobe.com/products/dreamweaver.html Kompozer http://kompozer.net/ Notepad 2 http://www.flos-freeware.ch/notepad2.html Editor HTML http://www.pagebreeze.com/ Editor CSS gratuit http://www.ucware.com/juststyle/#download Editor CSS Menu http://purecssmenu.com/ Editor CSS gratuit http://www.ucware.com/ Editor XHTML gratuit http://xstandard.com/ Validare document XHTML http://validator.w3.org/ FireShot (debug) https://addons.mozilla.org/en-US/firefox/addon/5648 Web Kit Web Inspector http://www.webkit.org/ Google Analytics http://www.google.com/analytics/ Analiza trafic http://www.alexa.com/

http://www.w3schools.com/

http://www.lynda.com/

http://www.cssauthor.com/

http://browsershots.org/

http://psdstyle.net/

http://www.xoops-theme.com/

http://www.blazrobar.com/

http://wedesignpixel.com/

http://www.adobe.com/products/dreamweaver.html

http://kompozer.net/

http://www.flos-freeware.ch/notepad2.html

http://www.pagebreeze.com/

http://www.ucware.com/juststyle/

http://purecssmenu.com/

http://www.ucware.com/juststyle/

http://xstandard.com/

http://validator.w3.org/

https://addons.mozilla.org/en-US/firefox/addon/5648



http://www.webkit.org/

http://www.google.com/analytics/

http://www.alexa.com/

8/18

Framework & site creator http://getbootstrap.com http://phonegap.com http://html5boilerplate.com http://www.weebly.com http://www.wix.com

Alegerea culorii într-o aplicaţie Web Color Scheme Designer http://colorschemedesigner.com Kuler http://kuler.adobe.com Color Match Remix http://colormixers.com HTML Color Picker http://www.w3schools.com/tags/ref_colorpicker.asp ColorZilla https://addons.mozilla.org/enUS/firefox/addon/colorzilla Înregistrare şi găzduire site Web http://www.godaddy.com http://www.bluehost.com http://www.inregistrare-domenii.ro http://www.rotld.ro

http://getbootstrap.com/

http://phonegap.com/

http://html5boilerplate.com/

http://www.weebly.com/

http://www.wix.com/

http://colorschemedesigner.com/

http://kuler.adobe.com/

http://colormixers.com/

http://www.w3schools.com/tags/ref_colorpicker.asp

https://addons.mozilla.org/enUS/firefox/addon/colorzilla

http://www.godaddy.com/

http://www.bluehost.com/

http://www.inregistrare-domenii.ro/



http://www.rotld.ro/

9/18

Editare imagini Adobe Photoshop http://www.photoshop.com/products Gimp http://www.gimp.org Sumo Paint http://www.sumopaint.com Pixlr editor http://pixlr.com FotoFlexer Image Editor http://fotoflexer.com Aviary Photo Editing API http://www.aviary.com

Motoare de căutare http://www.google.com http://www.ask.com http://www.alltheweb.com http://search.aol.com/aol/webhome http://www.seekport.com http://www.picsearch.com

Imagini online http://www.sxc.hu http://www.istockphoto.com http://www.dreamstime.com http://www.imageafter.com http://www.flickr.com/creativecommons http://img.photobucket.com http://www.123rf.com

Photoshop 1001 Free Fonts http://www.1001freefonts.com Pensule, forme etc: http://www.brusheezy.com

http://www.photoshop.com/products

http://www.gimp.org/

http://www.sumopaint.com/

http://pixlr.com/

http://fotoflexer.com/

http://www.aviary.com/

http://www.google.com/

http://www.ask.com/

http://www.alltheweb.com/

http://search.aol.com/aol/webhome

http://www.seekport.com/

http://www.picsearch.com/

http://www.sxc.hu/

http://www.istockphoto.com/

http://www.dreamstime.com/

http://www.imageafter.com/

http://www.flickr.com/creativecommons

http://img.photobucket.com/

http://www.123rf.com/

http://www.1001freefonts.com/

http://www.brusheezy.com/

10/18

Editare şi conversie video Adobe Premiere http://www.adobe.com/products/premiere.html DVD Video Soft Free Studio http://www.dvdvideosoft.com Wondershare http://www.wondershare.com Xilisoft Video Converter http://www.xilisoft.com Video Download Helper https://addons.mozilla.org/en-US/firefox/addon/3006 Captură ecran şi video Adobe Captivate http://www.adobe.com/products/captivate.html Camtasia Studio http://www.techsmith.com/camtasia.html Replay Media Catcher http://www.replaymediacatcher.org Replay Video Capture http://www.applian.com/replay-video-capture Înregistrări audio Sound Forge http://www.sonycreativesoftware.com/soundforge Adobe Audition http://www.adobe.com/products/audition.html

http://www.adobe.com/products/premiere.html

http://www.dvdvideosoft.com/

http://www.wondershare.com/

http://www.xilisoft.com/


http://www.adobe.com/products/captivate.html

http://www.techsmith.com/camtasia.html

http://www.replaymediacatcher.org/

http://www.applian.com/replay-video-capture

http://www.sonycreativesoftware.com/soundforge

http://www.adobe.com/products/audition.html

11/18

assets

about.html

code

css

images

audio-video

scripts

root

contact.html

index.html

12/18

13/18

<html>

<head>

<meta name=“keywords” content=“sandwich”>

<link href=“styles/style2.css” type=text/css rel=stylesheet>

<script src=“script/stylescript.js” type=“text/javascript”></script>

<title>Index of /</title>

</head>

<body>

<h1> This is a sandwich </h1>

<img src=“images/sandwich.jpg>

<p> I love food </p>

</body>

</html>

14/18

selector declarație

proprietate valoare

Selector de tip

Selector de clasă

Selector id

Selector universal

15/18

16/18

index.html

17/18

main.css

18/18

Surse bibliografice Tutoriale video lynda.com HTML Essential Training Bill Weinman Web Design Fundamentals James Williamson HTML5 First Look James Williamson

HTML&CSS - 1st step

Education