OpenHatch wiki

Github and Website Workshop/HTML CSS review

< Github and Website Workshop
Revision as of 05:53, 18 February 2015 by imported>Auria

This is an HTML/CSS reference for the Github and Website Workshop.

Below you can find some of the foundational concepts of how HTML and CSS work, which we expect you to have a general understanding of for this workshop.

The Big Picture of a Website

  • HTML - Markup language to transfer data
  • CSS - Adding styles to the content
  • Javascript - Dynamic interactions with the web page (not a part of this workshop)


HTML

  • Content is written as elements in tags
  • Things in <> called tags, usually have opening and closing
  • HTML contains the static content of your page which do not change


HTML Skeleton

Start with the following format: 

<!DOCTYPE html>
<html>
<head>
	<title> </title>
</head> 
<body> 
	<header></header>
	<main></main>
	<footer></footer>
</body>
</html>

Head

  • Contains information about the HTML page (ex. <title>, <meta>)

Body

  • The actual content of your page (ex. images, text, links)
  • Contains a:
    • header tag (for header bar)
    • main tag (where the main stuff goes)
    • footer tag

In the main tab, Information can be organized with headings, and paragraphs, which help organize blocks of text

Helpful tags

  • <p>Paragraphs</p>
  • <h1>Heading 1</h1> and headings with higher numbers are smaller
  • <a href="http://www.website.ca">Links</a>
  • <img src="http://web-images.com/img/insert-picture-from-url.jpg"/>
  • <img src="/my-project/image-from-file-path.jpg"/>
  • unordered lists

<ul>
  <li>Make cool things</li>
  <li>Solve problems</li>
  <li>Etc.<li>
 </ul>

  • ordered lists

 <ol>
   <li>Step 1</li>
   <li>Step 2</li>
   <li>Step 3<li>
 </ol>

  • Remember - Tags can exist within other tags! For example - an image that links to a page

<a href="http://www.google.ca">
  <img src="http://angelgao.com/img/About/2.jpg"/>
</a>


CSS

  • CSS = Cascading Style Sheets
  • CSS makes HTML pretty by styling it
  • we tell our html file to use our stylesheet "style.css" by including this line in the <head> tag (remember to have the href equal the name of your stylesheet)
    • note this tag closes itself - no opening and closing tag

<link type="text/css" rel="stylesheet" href="style.css"/>

You can add style by referring to

  • the HTML tag

body{
    background-color: <COLOUR CODE>;
    width: 100%;
    height: 100%;
}

Retrieved from "https://wiki.openhatch.org/wiki/Github_and_Website_Workshop/HTML_CSS_review?oldid=15796"