6. Hypertext Markup Language
Hypertext Markup Language describes:
- Structure
- Content
- Typographic hierarchy
- Rudimentary style (bold, italics, etc.)
What is HTML?
7. HTML Document
It might feel chaotic and unstructured …
But the entire content of the page exists here.
8. Cascading Style Sheets
- Separates style from content
- Easier to change formatting and update an entire Web site
- Eliminates page load
- Flexible design
- Better user accessibility for search bots and screen readers
- Allows you to design for multiple browsers and multiple Operating
System (Linux, PC or Mac) environments
What is CSS?
10. -HTML is used for content and structure
-HTML houses scripting languages and behaviors
-CSS separates style from content
-CSS helps screen readers and users with disabilities read real content
HTML vs. CSS Review
Speaking of accessibility …
26. Open a text editor:
Text Wrangler, Text Edit or even Word is fine.
27. Save a new document as ‘index.html’
You just created a homepage.
And added content.
28.
29. HTML has open and close brackets,
which are called tags:
<b>Content goes here</b> Result: Content goes here
<i>Content goes here</i> Result: Content goes here
For a complete list, go to W3Schools.org
<font color=”blue”>Content</font> Result: Content
30.
31. Declare a ‘DOCTYPE’
DOCTYPE tells browsers which set of rules or semantics to use, what types of
tags are allowed and how strictly to follow it. XHTML 1.0 Transitional is now one of
the most common ‘DOCTYPEs’ to declare.
For a complete list, go to W3.org
32. Create an HTML tag
- Defines the document as <html>
- Make sure to add open and close tag
- End of the document </html>
33. Create an HEAD tag
- Defines header information
- Contains meta data and links to external files (such as CSS)
38. Create a CSS file
- Create a new file called styles.css
39. Link HTML to CSS
Make sure that the name of the folder matches up
40. Add a BODY tag to the HTML page
Defines content area of the Web page
41. Let’s start adding content!
Between <body></body> tags, you can start to add other tags, such as
paragraphs <p></p> and headlines <h1></h1>
42. You’ve got a page …
But it looks kind of boring, right?
43. CSS Basics
p {color:#666666;}
Result: Content becomes grey
p {color:#666666;font-weight:900;}
Result: Content becomes grey and heavy bold
Target HTML tags with ‘selectors’ in CSS.
Attribute style information between the brackets.
