Html+css course Module Introduction: Terminology, Syntax, Structure, Coding Practices

HTML+CSS course Module 1. Introduction: Terminology, Syntax, Structure, Coding Practices

HTML and CSS: Agenda

• Differences
• Terms
• Syntax
• Structure
• Linking together

Background – how Internet works

Web browser
Web server
3. Transfers HTML, CSS, etc.
2. Generates
4. Renders
1. Asks something

Background – how Internet works

Web browser
Open HTML
Render HTML

HTML & CSS: first look

• HTML is a hyper text markup language created to give content structure and meaning. 
• CSS, or cascading style sheets, is a presentation language created to give content style and appearance.

Example: HTML element
…
is used to

display few words on a web page, CSS selects

this element to determine its appearance.

Your long-term goal

• http://bl.ocks.org/

D3.JS library: JavaScript renders SVG elements inside XHTML file and uses CSS to style SVG.

HTML versions & declaration

Version	Year
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2012

Declare HTML5:
Browser can only display an HTML page 100% correctly if it knows the HTML type and version used

HTML Terms: elements

• Elements:

h1, h2, h3, h4, h5, h6, p, a, div, span, strong, em, etc.

• Tags are decorating elements:
• some text — content inside opening and closing tags.
• 
  — the void elements are area, base, br, col, hr, img, input, link, meta, param, etc.
• Attributes:
• Visit us!

General HTML document

Hello World

This is a website
with br element

Visit us!

Hello World

This is a website
with br element
Visit us!