Introduction to HTML and CSS




April 17, 2013

P V

What is a website?


  • Content  - HTML
  • Styling- CSS
  • Behavior- Javascript

These elements are separated: web design goes by the heuristic of "separation of presentation and content."

More Artistic View...

Websites as actors.

  • HTML : script. What to say, etc.
  • CSS: all the work that the costume designers, make-up people, etc. do.
  • Javascript: stage directions. Where and when to move, how to respond do audience (user) input.

Main point: they are done separately!

HTML


Stands for HyperText Mark-up Language

HTML files have (surprise!) a .html suffix.

How to create these pages?

What to Write .html Files In?


Any plain-text editor will do. 

If you want to go fancy, use any of the following:
  • VIM
  • Sublime Text 2
  • BBEdit

Most code editors have an HTML mode in them.

Warning! WYSIWYG Editors


WYSIWYG = What You See Is What You Get

  • Adobe Dreamweaver
  • BlueGriffon

May seem like a quick start...but will slow you down a lot in the long run.

Structure of HTML


The "Markup" part of HTML - need to tell the browser what is what on the page.

Tags!

2 possible formats:

<p>I am a paragraph!</p>
<br/>

Basics


All HTML files start with a declaration of being an HTML file:
<!DOCTYPE html>
All contents will be inside an <html> tag 
<html>
</html>
2 parts: directions (head) and content (body). 
<html>
    <head>
    </head>
    <body>
    </body>
</html>

Head Contents


<head> tags contain general info the browser should know about your webpage:

Title: top of browser window/tab (<title> tag) 
<title>Website Creation</title>

Additional files to use, i.e. stylesheets (will see with CSS!) 
<link rel="stylesheet" href="style.css" />

Body


Rule of thumb: everything needs to be enclosed in tags (good practice and allows for styling). 
<p>I'm a little teapot, short and stout.</p> // paragraph
...little teapot, <br /> short and stout...  // line-break
<h1>Random Poetry</h1>                       // header
...for good teas, look <a>here</a>           // link

<img />                                      // image

<div>I'll be styled nicely soon!</div>       // styling

Tag attributes


What if we want to get more specific?
All tags allow for attributes that modify tag properties. 
<a href="http://wikipedia.org">Wikipedia</a>

 <img src="https://www.google.com/images/srpr/logo4w.png" />
Always of the form name="value"

Since most of your styling should be done in a separate, CSS, file, the only href, id, class, src tags should be used.

class & id Tags


Special tags that give an ID and a class to an element (surprise!)
  • At most 1 element per id!
  • Any number of elements per class.

Both used for styling. 
<p id="teapot" class="poem">I am a little teapot, <br /> shortand stout.</p>

Pro tip: to link to a section with the ID "idName" on your webpage directly, add #idName to the end of the URL!

CSS


Stands for Cascading Style Sheets

Saved with a .css suffix.

Just like HTML, can be edited with anything that allows plain-text editing. Your HTML editor should work well.

Remember to use plain-text!

Linking CSS


In order for an HTML file to use a CSS file, need to link in the head of the HTML:
<html>
<head>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
Remember to have the CSS and HTML in the same folder or to fix the path accordingly!

Structure of CSS


CSS is centered around the elements that are being styled.

Format:
element{
    property : value ;
    different-property: 42;
}another{
   property: something;
}
HTML has triangle brackets, CSS has figure brackets.
HTML has equality sign and quotes, CSS has colon. 

What can we style?

Note the different prefixes!
  • Elements of particular type (paragraphs, headers)
p{ 
    font-size: 18px;
}
  • ID's
    • #teapot{
    background-color: yellow;
}
  • Classes
    • .poem{
   border: 1px black solid;
}

    Bit more space, please!

    Each element is like a "box."

    Use margin to separate the block from things outside
    Use padding to move contents away from edges of block

    Margin & Padding Example

    There are several ways to declare margin / padding:
    .poem{
    padding: 20px 10px 5px 30px; // top right bottom left
    margin: 10px 5px;            // top/bottom right/left
}
    Goes in a clock-wise direction!
    h2{
    padding: 11px;               // 11px in all directions
    margin-left: 3px;
    margin-bottom: 0;
}
    Use whichever way makes more sense.

    But other properties?


    Possible to style whatever comes to your mind.

    For a good reference, look at: 

    I want to be specific!


    Possible to nest CSS selectors: for example, want to style paragraphs only in a specific div.
    #comments p{
    font-style: italic;
}

    I want to be more specific!


    Pseudo-selectors: be more picky about what you want to style. 

    Useful when there is a logical structure to the styling and you find yourself repeatedly styling similar things.
    .poem:first-letter{
    color: red;
}
    a:hover{
    font-weight: bold;
}
    Fancy, may be easier to use with jQuery.

    Where to next?


    Learn more advanced HTML & CSS, depending on what you want. 

    Javascript is the third sibling in the family. Get to know him!

    Questions?


    Github: liviro




    Thank you!

    intro to html and css

    By liviro

    Made with Slides.com

    intro to html and css

    • 1,940

    More from liviro