html / css – basics
DESCRIPTION
HTML / CSS – Basics. Why the heck are we doing this ?. HTML. HyperText Markup Language. CSS. Cascading Style Sheets. Reasons to learn HTML and CSS. Presentation. Content. Structure. Layout / Design. I have some content , how do I structure it ?. - PowerPoint PPT PresentationTRANSCRIPT
HTML / CSS – Basics
Why the heck are we doing this?
HTMLHyperText Markup Language
CSSCascading Style Sheets
Reasons to learn HTML and CSSHTML CSS
Content PresentationStructure Layout / DesignI have some content, how do I structure it?
I have the content and the structure, how do I make it look good?
Appreciate the logic in this. Change the look of everything efficiently.
HTML Document – Basic Structure
You always need this:<html> Start of document<head> Start of Head</head> End of Head<body> Start of Body</body> End of Head
</html> End of document
HTML – Source and Surface
Source code What the browser displays is actually:
Rules
• Always close tags. Always! No matter what.• Some tags can not be nested in others.
<h1><p></p></h1>
• A nested tag must be closed before a parent tag is closed.<p><span></p></span><p><span></span></p>
HTML – Basic tags
<p></p> a paragraph<h1></h1> heading of the first order<h2>-<h6> more headings<ul></ul> an unordered list<ol></ol> an ordered list<li></li> a list item<a></a> the anchor tag<img /> an image object
HTML – Hierarchy
<html>
<head> <body>
<p> <h1> <div> <ol> <ul><span> <li> <a> <img>
HTML – Hierarchy
<html>
<head> <body>
<p> <h1> <div> <ol> <ul><span> <li> <a> <img>
HTML – Hierarchy
<html>
<head> <body>
<p> <h1> <div> <ol> <ul><span> <li> <a> <img>
HTML – Basic attributes
<a href="">Some Text</a>the hypertext reference, turning “Some Text” into a link
<img src="" alt="" />an image object is not complete if the source is not given and an alternative text is missing
Absolute vs. Relative Links
<a href="http://www.google.com/"> Some Text</a>an absolute reference
<a href="page2.html">Some Text</a>a relative reference
Relative links revisited
<a href="page2.html">Some Text</a>file in the same directory
<a href="pages/page2.html">Some Text</a>file in a sub-directory called pages
Relative links revisited 2
<a href="../page2.html">Some Text</a>file in the parent directory
<a href="../pages/page2.html">Some Text</a>file in a sub-directory of the parent directory
dw
HTML – Special tags
<div></div> a division<span></span> special segments<strong></strong> make it bold<em></em> make it italics<br /> line break<hr /> horizontal line<blockquote> a block of quote</blockquote>
Want more?
http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
http://www.selfhtml.org/
http://www.w3schools.com/html/
Want more?
http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
http://www.selfhtml.org/
http://www.w3schools.com/html/
For those of you not good at remembering stuff.
Want more?
http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
http://www.selfhtml.org/
http://www.w3schools.com/html/
For those of you who want to know all the details.
Want more?
http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
http://www.selfhtml.org/
http://www.w3schools.com/html/
For those of you who like to try out things.
Want more?
http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
http://www.selfhtml.org/
http://www.w3schools.com/html/