Upload
in-a-rocket
View
839
Download
0
Tags:
Embed Size (px)
DESCRIPTION
http://inarocket.com Learn HTML5 fundamentals as fast as possible. Basic work overflow, document structure, essential tags, text formatting, links, ordered and unordered lists, images, tables, forms, etc.
Citation preview
HTMLat rocket speed
FOR BEGINNERS
inarocket.com
inarocket.com - Learn HTML at rocket speed
WHAT DO YOU NEED TO START
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
inarocket.com - Learn HTML at rocket speed
WHAT DO YOU NEED TO START: FOLDERSCreate the folders that will contain the web project on your computer. !
projectname: • img • css • js
projectname
img
car.png
css
js
Here you can save the HTML files that you will create in this course.
Important rules for naming folders and files. • Never use spaces. • Never use special characters (%, *, +, etc.). • Avoid uppercases.
(for this course put an image in this folder, please)
inarocket.com - Learn HTML at rocket speed
WHAT DO YOU NEED TO START: EDITOR
Editor: pre-installed
You can just use any text editor preinstalled in your computer.
Notepad TextEdit Gedit
Editor: additional
There are other editors but you won't need their advanced features for this course.
Sublime Text Atom
inarocket.com - Learn HTML at rocket speed
WHAT DO YOU NEED TO START: BROWSER
Browser: pre-installed
You can just use any preinstalled browser in your computer.
Explorer Safari Firefox
Browser: additional
There are other browsers that you can also install in your computer.
Chrome Firefox Opera
Hello world!
inarocket.com - Learn HTML at rocket speed
WHAT IS HTML
+HTMLContent structure
JAVASCRIPTContent behavior
CSSContent presentation +
inarocket.com - Learn HTML at rocket speed
WHAT IS HTML
H T M LHyperText Markup Language
HTML is a markup language, not a programming language
inarocket.com - Learn HTML at rocket speed
MARKUP STRUCTURE
<p>I’m a paragraph</p>ContentOpening
TagClosing
Tag
Element
HTML tags are not case sensitive
inarocket.com - Learn HTML at rocket speed
DOCUMENT STRUCTURE
body
head
html
Use head to include information about the document (e. g. title, language). But for the title, head content is not shown to users.
Use body to include all the content (text, images, links, tables, etc.) you want to show to your users.
inarocket.com - Learn HTML at rocket speed
DOCUMENT STRUCTURE
body
head
html
Editor (what you should write)
<!doctype html> <html> <head> </head> <body> </body> </html>
inarocket.com - Learn HTML at rocket speed
HELLO WORLD!
<!doctype html> <html> <head> </head> <body> Hello world! </body> </html>
Editor (what you should write)
Save as index.html
Browser
Hello world!
(what you should view)
Open index.html in your browser
inarocket.com - Learn HTML at rocket speed
BASIC WORKFLOW
index.html
EDITOR BROWSERe.g. Notepad e.g. Firefox
Texts
inarocket.com - Learn HTML at rocket speed
HEADERS
<h1> <h2> <h6><h3> <h4> <h5>
Very important
Less important
inarocket.com - Learn HTML at rocket speed
HEADERS
Browser
Tim Berners-Lee<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> </body> </html>
Editor
inarocket.com - Learn HTML at rocket speed
PARAGRAPHS
Browser
Tim Berners-Lee Sir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.
<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> <p>Sir Timothy John "Tim" Berners-‐ Lee is a British computer scientist, best known as the inventor of the World Wide Web.</p> </body> </html>
Editor
Spaces
inarocket.com - Learn HTML at rocket speed
SPACES:
The character entity stands for “non breaking space”
Inserts a single space into your content
inarocket.com - Learn HTML at rocket speed
SPACES:
Browser
Hello world!<!doctype html> <html> <head> </head> <body> <p>Hello world!</p> </body> </html>
Editor
Three spaces
inarocket.com - Learn HTML at rocket speed
SPACES: <br>
<br>
HTML elements with no content are called empty elements and they have no closing tag in HTML5
Inserts a line break into your content
inarocket.com - Learn HTML at rocket speed
SPACES: <br>
BrowserEditor
<!doctype html> <html> <head> </head> <body> <p>Sir Timothy John "Tim" Berners-‐ Lee is a British computer scientist, <br>best known as the inventor of the World Wide Web.</p> </body> </html>
Sir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.
inarocket.com - Learn HTML at rocket speed
SPACES: <hr>
<hr>
HTML elements with no content are called empty elements and they have no closing tag
Inserts a horizontal line and can be used to separate content
inarocket.com - Learn HTML at rocket speed
SPACES: <hr>
Browser
Tim Berners-Lee !
Sir Timothy John "Tim" Berners- Lee is the inventor of the World Wide Web.
<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> <hr> <p>Sir Timothy John "Tim" Berners-‐ Lee is the inventor of the World Wide Web.</p> </body> </html>
Editor
Images
inarocket.com - Learn HTML at rocket speed
IMAGES
<img src=“car.png” alt=“Car”>TAG Attribute Attribute
The value of alt can be read by screen readers and is shown when an HTML element cannot be displayed
inarocket.com - Learn HTML at rocket speed
IMAGES
BrowserEditor
Tim Berners-Lee !
!
!
!
!
!
Sir Timothy John "Tim" Berners- Lee is a British computer scientist, best known as the inventor of the World Wide Web.
<!doctype html> <html> <head> </head> <body> <h1>Tim Berners-‐Lee</h1> <img src=“img/berners-‐lee.png” alt=“Tim Berners-‐Lee”> <p>Sir Timothy John "Tim" Berners-‐ Lee is a British computer scientist, best known as the inventor of the World Wide Web.</p> </body> </html>
Links
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
image1.png
image1.png
img
javascript1.js
javascript2.js
js
list.html
catalog.pdf
index.htmlproducts.html services.html jobs.html contact.html
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
Browser
Jobs<a href=“jobs.html”>Jobs</a>
Editor
Opens the link when clicked
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
image1.png
image1.png
img
javascript1.js
javascript2.js
js
list.html
catalog.pdf
index.htmlproducts.html services.html jobs.html contact.html
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
Browser
PDF list<a href=“pdf/list.html”>PDF list</a>
Editor
Opens the link when clicked
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
image1.png
image1.png
img
javascript1.js
javascript2.js
js
list.html
catalog.pdf
index.htmlproducts.html services.html jobs.html contact.html
inarocket.com - Learn HTML at rocket speed
LINKS: INTERNAL
Browser
Home<a href=“/index.html”>Home</a>
Editor
Opens the link when clicked
(list.html)
inarocket.com - Learn HTML at rocket speed
LINKS: EXTERNAL
Browser
Wikipedia<a href=“http://wikipedia.org”> Wikipedia</a>
Editor
Opens the link when clicked
Lists
inarocket.com - Learn HTML at rocket speed
LISTS: UNORDERED
Browser
• Spielberg • Coppola • Scorsese
<ul> <li>Spielberg</li> <li>Coppola</li> <li>Scorsese</li> </ul>
Editor
li = list item.
inarocket.com - Learn HTML at rocket speed
LISTS: ORDERED
Browser
1. Usain Bolt - Gold 2. Yohan Blake - Silver 3. Justin Gatlin - Bronze
<ol> <li>Usain Bolt -‐ Gold</li> <li>Yohan Blake -‐ Silver</li> <li>Justin Gatlin -‐ Bronze</li> </ol>
Editor
inarocket.com - Learn HTML at rocket speed
LISTS: NESTED
Browser
• Red • Light • Dark
• Green • Blue
<ul> <li>Red <ul> <li>Light</li> <li>Dark</li> </ul> </li> <li>Green</li> <li>Blue</li> </ul>
Editor
inarocket.com - Learn HTML at rocket speed
LISTS: DESCRIPTION
Browser
W3C Is the main international standards organization for the World Wide Web. HTML Is the standard markup language used to create web pages.
<dl> <dt>W3C</dt> <dd>Is the main international standards organization for the World Wide Web.</dd> <dt>HTML</dt> <dd>Is the standard markup language used to create web pages.</dd> </dl>
Editor
Tables
inarocket.com - Learn HTML at rocket speed
TABLES: BASIC
tbody
thead
table
tfoot
tr
tr
tr
tr
td td td
td td td
td td td
th th th
td td tdtr
inarocket.com - Learn HTML at rocket speed
TABLES: BASIC
<table> <thead> <tr> <th>2014</th><th>2015</th> </tr> </thead> <tfoot> <tr> <td>Total: 3</td><td>Total: 5</td> </tr> </tfoot>
Editor
<tbody> <tr> <td>1</td><td>2</td> </tr> <tr> <td>2</td><td>3</td> </tr> </tbody> </table>
inarocket.com - Learn HTML at rocket speed
TABLES: BASIC
Browser
2014 2015
1 2
2 3
Total: 3 Total: 5
Forms
inarocket.com - Learn HTML at rocket speed
NOTICE
Sorry for the inconvenience.
This presentation is a work in progress.