View
117
Download
1
Category
Tags:
Preview:
DESCRIPTION
Brief introduction to HTML5+CSS for designers.
Citation preview
INTRODUCTION TOHTML5 + CSS
ramses.cabello@gmail.com @ramsescabello
why the helldo you have to learnHTML5 + CSS ?
why the helldo you have to learnHTML5 + CSS ?
YOU ARE A DESIGNER.
Ok. So now...What is HTML ?
Ok. So now...What is HTML ?
Computers don’t think,but YOU DO!.
HTML is the languageused by you to writewebsites and thereforehelp computerscommunicate.
Computers translateHTML into our languageusing a tool calledBrowser.
What is the structureof HTML language?
<head>HTML islike you.
Website TitleAuthorDescription
<head>HTML islike you.
Website TitleAuthorDescription
<head>
The contentof the web.
<body>
HTML islike you.
HTML islike you.
CSS definesyour style.
HTML islike you.
CSS definesyour style.
Just in case you missed out.
HTML defines the content.
Hello World!
HTML defines the content.CSS defines the style.
Hello World!
before we get started!
1
Get paper& pen
2
Download a greatOpen Source editor
www.brackets.io
3
Have a lot of patience.Learning takes time.
You can do it.
html syntax
<html>
Name of the function
Function starts
Function ends
html syntaxhtml syntaxevery beginninghas an end.
<html>
content
</html>
<body>
<p>Hello</p>
</body>
html syntaxhtml syntaxBE CLEAN!Indent all your code.
<body>
<p>Hello</p>
</body>
html syntaxhtml syntaxBE CLEAN!Indent all your code.
html syntaxSample tag: Paragraphs
<p>Here you would write
all the text from the
paragraph</p>
html syntaxSample tag: Images
<img src=”name.jpg” alt=”” />
html syntaxSample tag: Images
<img src=”name.jpg” alt=”” />
Some HTML tags close themselves.Inside a tag you can have variables.
html syntaxSample tag: Links
<a href=”url” alt=””>
Name of the link
</a>
html online resources
www.google.com
html online resources
http://www.w3schools.com/html/default.asp
html online resources
http://tympanus.net/codrops/
let’s get started!
http://bit.ly/EjemploHTMLProduccionGrafica
Recommended