Back to the Basics - 2 - HTML & CSS

BACK TO THE BASICS:
HTML
November 2014

What we are covering today?
• Markup Language & DOM, part 1
• HTML
• CSS
• Rehash
• All presentation layer
Presentation
Header
Status –or–
Method & URI

Markup Language
• Annotation-based formatting of a document
• Annotations exist in a syntactically distinguishable
manner, separating them from the text.
SGML/HTML/XML : <html>…</html>
TEX : $-b pm sqrt{b^2 - 4ac} over 2a$
bye
Scribe : @Heading(The Beginning)
@Begin(Quotation)
Let's start at the very beginning.
@End(Quotation)

DOM, part 1
• Tree structure of Nodes
• Hierarchical layout of elements – Boxes inside boxes
WINDOW
DOCUMENT
FORM ANCHOR

HTML
• Hypertext Markup Language
• Current Standard: 5
• HTML 4.01 -> XHTML 1.1 ->HTML 5

HTML
• Self Terminating Tags:
<link href=“styles.css” rel=“stylesheet”/>
• Full Tags:
<script src=“functions.js” type=“text/javascript”></script>

HTML
• Anatomy of a Tag
• Delimiters (<>)
• Element Type (div)
• Attributes
• Attirbute Key
• Attribute Value
• Content
<div class=“named”>content</div>

HTML
• Basic Document:
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Title</h1>
<p>This is a document</p>
</body>
</html>

HTML
• A few basics
<html>
<head>
<body>
<script>
<link>
<meta>
<style>
<div>
<span>
<p>
<a>
<strong>
<em>
<u>
<pre>
<ul>
<ol>
<li>
<img>
<hr>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

HTML
• 5 : Elements to support the state of the web
<article>
<aside>
<bdi>
<details>
<dialog>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<menuitem>
<meter>
<nav>
<progress>
<rp>
<rt>
<ruby>
<section>
<summary>
<time>
<wbr>
<datalist>
<keygen>
<output>
<canvas>
<svg>
<audio>
<embed>
<source>
<track>
<video>

CSS - Cascading Style Sheets
• Redefining how the markup language will be displayed
• Breaking the “Boxes inside boxes” idea & embracing
layers

CSS
• Cascading & Hierarchical priority
• Defined by series of selectors
tagname
.classname
#uniqueid
[attr=“value”]
:pseudo-class
::content-definition
(filter)

CSS
• Anatomy of a Definition
.selector, #another-selector, tag.third-selector#butonlyifhasid {
Style-attribute: value;
}
• Selector
• Style Definition
• Attribute seperated from value by colon
• Ended with semi colon
• Attributes with predefined values or structured
definitions

CSS
• Related to HTML by the selector
<div class=“classname” id=“element217291”>Content</tagname>
<span class=“classname”>Content</othertag>
<p id=“element20140102”>Content</p>
p, div { color: orange; }
#element217291 { color: white; }
.classname { background-color: black; }
div.classname { text-decoration: underline; }

CSS
• CSS 3 is current but not fully supported
• Reset CSS – Making Browsers and Elements Behave
(a little bit more…)
http://www.cssreset.com/
• Browsers are not created equal
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;

Rehash
• Structure
• Definition
• Presentation and Interpretation of Content
• Becomes more important with Javascript

Always the Final Thoughts
• Stay Informed
• Experiment
• Don’t be afraid

Questions?
tsxcom+slidehare@gmail.com

Additional Reference
• Dive into HTML 5: http://diveintohtml5.info/
• HTML 5 Test: http://html5test.com/
• Markup Validation: http://validator.w3.org/
• CSS Zen Garden: http://www.csszengarden.com/
• Quirks Mode: http://www.quirksmode.org/css/
• CSS Lint: http://csslint.net/

Credits
• Icons: http://iconmonstr.com/
• Wikipedia:
• DOM:
http://en.wikipedia.org/wiki/Document_Object_Mod
el
• Markup language:
http://en.wikipedia.org/wiki/Markup_language

Back to the Basics - 2 - HTML & CSS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Back to the Basics - 2 - HTML & CSS

Similar to Back to the Basics - 2 - HTML & CSS (20)

Recently uploaded

Recently uploaded (20)

Back to the Basics - 2 - HTML & CSS