Example Member

This is an example Hack Harris member page, to showcase things you can do in HTML, CSS, and JavaScript.

##Overview

The structure of a web page is built in HTML (Hypertext Markup Language. The style of a webpage comes from CSS (Cascading Stylesheets).

Pro-tip: Build your webpage in HTML first, then style it in CSS. If you do both at the same time, you will trip yourself up.

##Fun with HTML HTML consists of elements that contain content inside them. An element looks like this: <div> This stuff is inside the div element </div>

The element is opened using < > angle brackets, and closed using </ > angle brackets with a slash after the first bracket.

Some elements:

<div> Contains standard content or other elements

This text is inside a div
<p> Contains text in a paragraph format

This text is in a paragraph
<br> makes a line break.

Some text
Some more text
<em> Makes the text inside italic

This text has italic words
<b> Makes the text inside bold

Some of this text is bold
<a href="http://harrisschool.uchicago.edu">Harris School</a> Creates a hyperlink to the Harris School website

Harris School
<img src="bbq.jpg"> inserts the image located at “/bbq.jpg” (in your member folder). You don’t need to close this tag

Here are some images of DiPP - just copy in the URL to one you like!
<h1> - <h6> Makes the text into title text (bigger). You can use any number 1-6: 1 is largest

Title 1

Title 4

A good HTML reference can be found here. A great free online course in HTML and CSS can be found here.

##Fun with CSS CSS provides your webpage with style. You should have your CSS in an external file in your member folder - and link it at the bottom of your index.html file as follows:

<link rel="stylesheet" href="me.css">

The syntax for CSS is as follows:

selector {
  property: value;
  property: value;
}

selector is one of your HTML elements, like div or a, without the < >. property is a property like color, which changes the font color. value is something like #AC1F24, which is red.

You can also use classes and IDs as your selectors. These are set in your HTML as follows:

<div class="target">
    <p>Some text</p>
    <p id="this-one">The text I want to change</p>
    <p>Some other text</p>
</div>

And selected as follows:

.target {
  color: #AC1F24;
}
.target p {
    color: #999;
}
#this-one {
    color: blue;
}

This will make all text red, then make any text inside paragraphs gray, then make the text inside the paragraph with the ID of “this-one” blue.

Here are some CSS properties you can change:

color: #AC1F24; sets the text color using a hexadecimal value.
font-size: 1.2em; changes the text size (1em is normal size)
background-color: #eee; makes the element’s background light gray
margin-left: 20px; adds a margin, or space, of 20 pixels to the left of the element. You can also use margin-top, margin-right, and margin-bottom
cursor: pointer; makes the mouse a pointer (hand) when it is over the element. A value of default is the regular arrow

You can also set CSS to take effect when you’re doing something to the element by adding to the last selector, e.g.

a:hover {} will select links when they’re hovered over
a:active {} will select links when the mouse is clicked on them
a:visited {} will select links that have been clicked on before

A good CSS reference can be found here.

Example Member

Title 1

Title 4