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


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 campus. Learn more from the experts by visiting

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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. ( 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.). ( Emails Tips and Tricks - A collection of posts and articles on what’s up with HTML emails. ( 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. ( - 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! ( - 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. ( out these helpful resources for reference.
  15. 15. Course TitleCourse TitleINSTRUCTOR NAME