0
presentsHTML / CSS: Getting toKnow the Face of the WebTOM BOATES@tomboates
Good to know...• “standards” are rarely “standards”• No “right way” to do anything (though plenty ofpeople will tell you o...
What is HTML?• HyperText Markup Language• Originally built for structural layout• The lifeblood of the entire web
<div>CONTENT</div>what HTML looks likeCONTENT=“div” is imaginary box
HTML Structurehtmlhead bodymeta title div divp ul ul imgli li lili li li
<div><ul><li>ONE</li><li>TWO</li><li>THREE</li></ul></div>WHAT NESTING looks likeONE= TWOTHREE
Block vs. Inline elementsBLOCK elements have anatural width and height,and “stack” by default.DIV 1DIV 2DIV 3INLINE elemen...
<element attribute=”value”>html attributesExamples:<div id=”mainContent”><div class=”black”>
What is CSS?• Cascading StyleSheet• Supplement to HTML• Designed to manage styling and layout• Central place to manage sty...
selector {property: value;property: value;}what CSS looks likediv {width: 100px;padding: 5px;}EXAMPLE
SELECTING NESTED elementsCSS: div ul li span { ... }Is referencing these elements:<div><ul><li>This is a first <span>SPAN</...
SELECTING with AttributesCSS: p#main span.bold.italic { ... }Is referencing this element:<p id=”main”>I am selecting <span...
hands onMaking a landing page for this class
ResourcesW3 Schools - Lists all HTML elements, what attributes they take and what values are available. Also lists allCSS ...
Course TitleCourse TitleINSTRUCTOR NAME
Upcoming SlideShare
Loading in...5
×

HTML / CSS: Getting to Know the Face of the Web

902

Published on

Learn how to make a web page with an introduction to two of the most essential web coding languages: HTML and CSS. Slides taken from a class taught by Tom Boates at the Intelligent.ly campus. Learn more from the experts by visiting http://intelligent.ly/learn

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
902
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "HTML / CSS: Getting to Know the Face of the Web"

  1. 1. presentsHTML / CSS: Getting toKnow the Face of the WebTOM BOATES@tomboates
  2. 2. Good to know...• “standards” are rarely “standards”• No “right way” to do anything (though plenty ofpeople will tell you otherwise)• Media/OS/Browser matters!
  3. 3. What is HTML?• HyperText Markup Language• Originally built for structural layout• The lifeblood of the entire web
  4. 4. <div>CONTENT</div>what HTML looks likeCONTENT=“div” is imaginary box
  5. 5. HTML Structurehtmlhead bodymeta title div divp ul ul imgli li lili li li
  6. 6. <div><ul><li>ONE</li><li>TWO</li><li>THREE</li></ul></div>WHAT NESTING looks likeONE= TWOTHREE
  7. 7. Block vs. Inline elementsBLOCK elements have anatural width and height,and “stack” by default.DIV 1DIV 2DIV 3INLINE elements don’tcarry a width or height,and don’t displaceelements around them.This is displaying howinline elements getrendered in HTML.
  8. 8. <element attribute=”value”>html attributesExamples:<div id=”mainContent”><div class=”black”>
  9. 9. What is CSS?• Cascading StyleSheet• Supplement to HTML• Designed to manage styling and layout• Central place to manage styles across manyHTML pages• Order of definitions very important• Linked, <head>, inline, user agent
  10. 10. selector {property: value;property: value;}what CSS looks likediv {width: 100px;padding: 5px;}EXAMPLE
  11. 11. SELECTING NESTED elementsCSS: div ul li span { ... }Is referencing these elements:<div><ul><li>This is a first <span>SPAN</span> element.</li><li>This is a second <span>SPAN</span> element.</li><li>This is a third <span>SPAN</span> element.</li></ul></div>
  12. 12. SELECTING with AttributesCSS: p#main span.bold.italic { ... }Is referencing this element:<p id=”main”>I am selecting <span class=”bold italic”>this text</span></p><p>I’m not selecting <span class=”bold italic”>this one</span>.</p>but not <span class=”bold”>this one</span>.
  13. 13. hands onMaking a landing page for this class
  14. 14. ResourcesW3 Schools - Lists all HTML elements, what attributes they take and what values are available. Also lists allCSS selectors and options, and provides all properties and values. (http://www.w3schools.com/)CSS3 Generator - For the more advanced side of you, this tool provides an easy to understand form togenerate the necessary CSS for the effect you’re trying to achieve (shadows, rounded corners, etc.). (http://www.css3generator.com)HTML Emails Tips and Tricks - A collection of posts and articles on what’s up with HTML emails. (http://www.1stwebdesigner.com/tutorials/ultimate-guide-html-emails/)30 Best Practices for CSS - Good list of some of the things I taught as well as some others to keep in mindwhen writing your CSS. (http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/)Wordpress.com - If you’re looking to create a website and have a simpler interface for managing yourcontent than writing every line of HTML/CSS this is for you. Themes are available to completely skin yourwebsite and you can customize images and styles even more with the knowledge you learned here! (http://www.wordpress.com)Google - Honestly almost all I learned I learned from a blog post someone wrote somewhere that I foundafter googling what I needed. The internet is FILLED with helpful information and often you can find a post orarticle explaining how to do what you’re trying to do. (http://www.google.comCheck out these helpful resources for reference.
  15. 15. Course TitleCourse TitleINSTRUCTOR NAME
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×