html / css: getting to know the face of the web
DESCRIPTION
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/learnTRANSCRIPT
![Page 1: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/1.jpg)
presents
HTML / CSS: Getting to Know the Face of the Web
TOM BOATES@tomboates
![Page 2: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/2.jpg)
Good to know...• “standards” are rarely “standards”
• No “right way” to do anything (though plenty of people will tell you otherwise)
• Media/OS/Browser matters!
![Page 3: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/3.jpg)
What is HTML?• HyperText Markup Language
• Originally built for structural layout
• The lifeblood of the entire web
![Page 4: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/4.jpg)
<div> CONTENT</div>
what HTML looks like
CONTENT=“div” is imaginary box
![Page 5: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/5.jpg)
HTML Structure
html
head body
meta title div div
p ul ul img
li li lili li li
![Page 6: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/6.jpg)
<div> <ul> <li>ONE</li> <li>TWO</li> <li>THREE</li> </ul></div>
WHAT NESTING looks like
ONE= TWO
THREE
![Page 7: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/7.jpg)
Block vs. Inline elementsBLOCK elements have a natural width and height, and “stack” by default.
DIV 1DIV 2DIV 3
INLINE elements don’t carry a width or height,
and don’t displace elements around them.
This is displaying how inline elements get rendered in HTML.
![Page 8: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/8.jpg)
<element attribute=”value”>
html attributes
Examples:
<div id=”mainContent”>
<div class=”black”>
![Page 9: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/9.jpg)
What is CSS?• Cascading StyleSheet
• Supplement to HTML
• Designed to manage styling and layout
• Central place to manage styles across many HTML pages
• Order of definitions very important
• Linked, <head>, inline, user agent
![Page 10: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/10.jpg)
selector { property: value; property: value;}
what CSS looks like
div { width: 100px; padding: 5px;}
EXAMPLE
![Page 11: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/11.jpg)
SELECTING NESTED elements
CSS: 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>
![Page 12: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/12.jpg)
SELECTING with Attributes
CSS: 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>.
![Page 13: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/13.jpg)
hands onMaking a landing page for this class
![Page 14: HTML / CSS: Getting to Know the Face of the Web](https://reader034.vdocument.in/reader034/viewer/2022052507/558d25b7d8b42a27638b45f1/html5/thumbnails/14.jpg)
ResourcesW3 Schools - Lists all HTML elements, what attributes they take and what values are available. Also lists all CSS 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 to generate 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 mind when 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 your content than writing every line of HTML/CSS this is for you. Themes are available to completely skin your website 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 found after googling what I needed. The internet is FILLED with helpful information and often you can find a post or article explaining how to do what you’re trying to do. (http://www.google.com
Check out these helpful resources for reference.