Week 2 | Feb. 8, 2016

HTML & Wireframes

HTML & Page Setup

In terminal, navigate to your website's root directory. Use mkdir to create a new directory called week2 to house this week's exercises. Then use touch to make the hompage for this directory.

What is HTML?

  • Stands for Hyper-Text Markup Language
  • It is a language for 'writing' or 'describing' web pages. Those pages are then 'read' by your browser.
  • HTML is a semantic or language - some tags have default styles but most do not

Valid HTML

HTML with the proper syntax. Most modern browers will interpret invalid HTML correctly, but it is not a good idea to leave it that way - your page might not look correct in other browers, older browers, on mobile or in newer versions of browsers. Think of it as using bad grammer.

Tags

  • The heart of any markup language
  • Each tag is a keyword surrounded by angle brackets: <p>
  • Most tags come in pairs and need to be closed. Closing tags look like this: </p>
  • The basic setup of any HTML content: 
    <tagname>content</tagname>

Attributes

  • Each tag can also have multiple attribtes that provide more information for the browser.
  • Attributes are defined in the opening tag.
  • They are defined properties with a value that you set. Values can be urls, numbers or names you make up to differentiate one tag from another.
  • EX:
  • <h2 class="subhead"></h2>
  • <div data-index="22"></div>

Standard Page Setup

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>

</html>

DOCTYPE

  • Declared at the beginning of your page
  • Within the doctype you will declare that the page is in HTML and which version you are using
  • There have been a handful of versions of HTML, we'll be sticking with HTML5: <!DOCTYPE html>

Add to your Week 2 homepage

  • DOCTYPE, html, head and body tags
  • Page title to your <head>

GIT WORKSHOP

Wireframes

Definition

A sketch of your web page and what information goes on it. It groups your content, defines the hierarchy of information and how much space each part takes up.

More Examples »

Why We Use Them

Wireframes help us to think through and define which pieces of information are most important and help us commicate that to users through space and layout. It is helpful to work out these questions before you being coding.

Translating into Code

You can think of each HTML element or tag as a box. Your layouts are built by arranging your boxes on the page. You can envision each box of a wireframe as a separate HTML element.

Exercise

Go to NPR.org. On a piece of paper, draw out a wireframe for this page.

HTML Text Tags

All text on your page should fall inside of one the following categories.

Heading Tags

  • There are six level of heading tags in HTML.
  • The first is <h1>. There should only be one on your page.
  • Subheads are <h2>.
  • The rest are <h3>, <h4> and so on.

Paragraph Text

In most cases, nearly all the body text on your pages should be inside <p></p> tags. This ads a line break and space between paragraphs by default.

Strong & Emphasis

  • To indicate importance, you can use <strong> or <b>. Text will display bold by default.
  • To emphasize a word that slightly changes the meaning of a sentance, use <em> or <i>. Text will be italic by default.
  • There are subtle differences, but most of the time you will want to use <strong> and <em> as they refer specifically to how the word is understood.

Breaks

  • To insert a line break, use <br /> after the text.
  • To insert a divider, use <hr />.

Unordered List

  • Use to make a bulleted list of items that have no particular order.
  • Your items should be inside a set of <ul></ul> tags.
  • Each item should be enclosed inside <li></li>
  • <ul><li>List Item Here.</li></ul>

Ordered List

  • Use to make a list of numbered items.
  • Your items should be inside a set of <ol></ol> tags.
  • Each item should be enclosed inside <li></li>
  • <ol><li>List Item Here.</li></ol>

Exercise

Using the theme "My Favorite Books" - add the following to your Week 2 page:

  • A headline
  • A paragraph of text (you can use dummy text)
  • A divider under your paragraph.
  • A list with three items.

HTML Links

  • The Tag: <a></a>
  • The Attribute: href
  • Structure: <a href="URL">LINK TEXT</a>

Absolute URL

A full URL that points towards a web page that is not the one you are linking from.

<a href="http://nytimes.com">NY Times</a>

Relative URL

A URL pointing to a file or directory on your site. You do not need to specify the domain in these URLs.

<a href="about.html">About Me</a>

Anchor URL

A URL pointing to an element within a page.

<a href="#contact">Contact Form</a>

Email

A link that opens a user's default email program and fills in your specified email address.

<a href="mailto:me@gmail.com">Email Me!</a>

Open in New Tab

You can use the target attribute to have a link open in a new tab or window.

<a href="http://facebook.com" target="_blank">Facebook</a>

Exercise

Add a link to your page allowing users to email you.

HTML Images

Gif

Best type for images with fewer and bolder colors. Good for illustrations and graphics.

JPG

Best type for images with many colors. Best to use for photographs.

PNG

Transparent background. Typically used for graphics and icons.

Storing Images

Once you have cropped, sized and saved your images as the correct type, place your image file in a directory named images.

Image Tag

  • The Tag: <img />
  • The Attribute: src
  • Structure: <img src="images/logo.gif" />

Exercise

Create an images directory in your site. Grab an image from your computer or a Google image search and save it to your images directory. Then use the img tag to add it to your page.

HTML Containers

Block Element

Block level elements always appear to start on the same line.

Examples: <h1>, <p>, <li>

The DIV

A block-level container element used to group sections of content

<div><p>Content goes here</p></div>

Inline Element

Inline elements always appear to start on the same line.

Examples: <a>, <em>, <img>

The SPAN

An inline container element used to group elements on the same line, usually text.

<span>Sentence text</span> goes here.

The ID Attribute

An attribute used to identify the content and target using CSS. IDs can only be used once on a page.

<div id="navigation"></div>

The Class Attribute

An attribute used to identify content and target multiple elements at once using CSS. Classes can be used many times on a page.

<div class="section"></div>

HTML Comments

Make Notes

Use this syntax to make notes for yourself on your page. When formatted correctly, comments will appear gray in your text editor.

<div></div><!--END SECTION-->

Hide Code

You can also use the same syntax to hide code that you don't want to show on your page but you still want to keep in your file.

<!-- <div>Hide this box.</div> -->

Exercise

Add a comment to your page

Editing in the Console

Open the Console

One of the best ways to start troubleshooting is to check your console. Open up your website in a browser and open the developer tools. Your console provides a place for you to inspect the HTML and styles (both defined and computed) on the page.

Exercise

Open up your Week 2 page in Chrome. Use cmd + alt + i or right click and select Inspect Element to open up the developer tools. Under the Elements tab you can look through the markup on your page (or any page).

Assignments

Readings

Add To Your Homepage

  • Go back to your index.html page and make sure you have the correct page setup for your project, including: DOCTYPE, html, head and body
  • Add the following tags and content to your homepage: title, a headline "My Assignments" in an h1, and start an unordered list with a link to your Week 2 directory.

Wireframe

Draw out a wireframe for your Week 2 homepage for creating a list of your favorite books (or movies or musicians or periodicals). Use this page as a guide for the kind of information you will need to include. At minimum include a title and description for the page and a title, author name, description and image for each item.

  • Draw on paper
  • Use Photoshop, InDesign or Google Draw
  • Use an online tool or app like mockingbird or Lovely Charts
  • If you draw on paper, you can hand in in-class. If you have a digital file, save in your website to commit via GIT.

HTML Practice

Translate your wireframe into code on your Week 2 homepage. You can alter the content we added in class. Add actual content but don't worry about the design (everything will be stacked) - concentrate on using the appropriate markup for your content.

GIT

When you are finished with your work on your homepage and in Week 2, use your add, commit and push commands to upload your repo. Complete this by next Monday.

Have a great week!