Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. presentsHTML / CSS: Getting toKnow the Face of the WebTOM BOATES@tomboates
  • 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. What is HTML?• HyperText Markup Language• Originally built for structural layout• The lifeblood of the entire web
  • 4. <div>CONTENT</div>what HTML looks likeCONTENT=“div” is imaginary box
  • 5. HTML Structurehtmlhead bodymeta title div divp ul ul imgli li lili li li
  • 6. <div><ul><li>ONE</li><li>TWO</li><li>THREE</li></ul></div>WHAT NESTING looks likeONE= TWOTHREE
  • 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. <element attribute=”value”>html attributesExamples:<div id=”mainContent”><div class=”black”>
  • 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. selector {property: value;property: value;}what CSS looks likediv {width: 100px;padding: 5px;}EXAMPLE
  • 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. 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. hands onMaking a landing page for this class
  • 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. Course TitleCourse TitleINSTRUCTOR NAME