Skip to content

Latest commit

 

History

History
201 lines (139 loc) · 5.83 KB

wk02_day01.md

File metadata and controls

201 lines (139 loc) · 5.83 KB

Week 02, Day 01.

10 / 08 / 2015

What we covered today:

  • Warmup
  • MTA Demos
  • HTML
  • CSS
  • Daisy Smith from WDi5!

Warmup

Scrabble Documented Solution and Readme's

HTML

What is HTML?

  • Stands for Hyper Text Markup Language
  • Currently at Version 5 (as of October 2014)
  • Made up of tags (opening and closing usually), which in turn create elements
<!--    This whole thing is an element      -->
<tagname attribute="attribute_value"></tagname>

<!-- A paragraph tag with two classes, could be selected in CSS using p.default-paragraph.another-class {} -->
<p class="default-paragraph another-class">Some content in here</p>

What does an HTML document need?

<!doctype html> <!-- Always have this - it describes which version of HTML you are using -->
<html>
    <head></head> <!-- This is the meta data of the page, often invisible -->

    <body></body> <!-- This is where the actual content is -->
</html>

Common Elements

Actual Content

<!-- Heading Tags - getting less important the higher the number -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<p></p> <!-- A paragraph tag -->

<!-- An HTML element can have attributes.  Attributes are key value pairs (just like javascript objects) that provide additional information. They look like this. This is a link by the way (or anchor tag) -->
<a href="generalassemb.ly">General Assembly</a>

<img src="" />
<video src=""></video>

<br /> <!-- a new line -->
<hr /> <!-- a horizontal line -->

<button></button>
<input />

<pre></pre> <!-- Preformatted text -->
<code></code>

<textarea></textarea>

<ul> <!-- Unordered list -->
    <li></li> <!-- List item -->
</ul>

<ol> <!-- Ordered list -->
    <li></li>
</ol>

Dividing Content

<div></div> <!-- A division, this is just a way to group content -->
<section></section>
<header></header>
<main></main>
<nav></nav>
<!-- etc. -->

For more information, see here.

Placeholder Stuff

TEXT:

IMAGES:

CSS

What is CSS?

  • Stands for cascading style sheets
  • It defines how HTML elements are to be represented
  • Styles were added to HTML 4
  • Currently at version 3 (CSS3)
selector {
    /* A Declaration */
    property:    value;
}

p {
    color: red;
}

CSS Selectors

Here are the basics of CSS Selectors, for more - go here.

p {} /* Selects all paragraph tags */

p.octocat {} /* Selects all paragraph tags with the class octocat */

.octocat {} /* Selects any tag with the class octocat */

p#octocat {} /* Selects any paragraph tag with the ID octocat */

#octocat {} /* Selects any element with the ID octocat */

* {} /* Selects all elements */

div p {} /* Selects all paragraph tags that are within div tags */

p, a {} /* Selects all p tags and all a tags */

p:hover {} /* Selects all p tags when they are hovered over */

CSS Specificity

Due to CSS's cascading nature, CSS rules will be overwritten. You need to have a bit of a handle on this.

  • 1 point for an elements name
  • 10 points for a selection based on a class
  • 50 points for a selection based on an ID

For more details:

This is a great way to learn selectors.

Floats and Clears

I'm not going to go into this that much - but these two articles will help explain this. For the most part - avoid floats and clears, stick to display: inline-block or inline instead. Only in the case that you need text to wrap around images should this be used.

Homework

Hell is other people's HTML