Skip to content

Latest commit

 

History

History
148 lines (93 loc) · 3.87 KB

2015-07-23-common-impact.md

File metadata and controls

148 lines (93 loc) · 3.87 KB

Beginner HTML & CSS for Nonprofits

Thursday, July 23, 2015 2:30-4:30pm

URL For these notes: http://thewc.co/s/common-impact

Live broadcast: http://thewc.co/live

Susan Buck / Women's Coding Collective / @WeAreWCC

Patricia Vaccaro-Coburn / Common Impact / @CommonImpact

Survey: http://goo.gl/LSrcFA

HTML: The code behind web pages

Code Editors

Tag basics

Tags are used to surround content, for example, a heading tag:

<h1>Welcome to Susan's Web Site</h1>

The forward slash in the second tag indicates it's the end tag.

More tags: MDN Element reference

Practice: Add a heading and a subheading in the HTML panel of CodePen.

Tag teamwork

Some tags work together with other tags.

An <ul> (unordered list) tag teams up with <li> (list item) tags

Here are some of my favorite web sites:

<ul>
  <li>Google</li>
  <li>Women's Coding Collective</li>
  <li>Mozilla Developer Network</li>
</ul>

Practice: Add a list of your three favorite websites below your headings.

Links

Some start tags have attributes to describe information about that element.

Example, the <a> element (anchors i.e., links) has the href attribute which dictates where a link should go.

<a href='http://wikipedia.org'>Wikipedia: The Free Encyclopedia</a>

target might specify a link should open in a new tab

<a href='http://wikipedia.org' target='_blank'>Wikipedia: The Free Encyclopedia</a>

Practice: Edit your unordered list so that each of your favorite web sites includes a link to that website.

Images

Images have a src attribute to specify the image's location.

<img src='kitten.png'>

The alt attribute is required for non-decorative images:

<img src='kitten.png' alt='An adorable kitten'>

Practice 1: Find an image on Wikipedia of your favorite animal.

Right click on that image and find the option to copy the image URL.

  • Chrome: Copy Image URL
  • Firefox: Copy Image Location
  • Safari: Copy Image Address

On your page, use this URL to display the image in an <img> element.

Example:

<img alt='Adorable kitten' src='http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/340px-Kitten_in_Rizal_Park%2C_Manila.jpg'>

Practice 2: Using the letters from http://lettergame.s3.amazonaws.com/details.html, spell out your name on your page.

Adding style

CSS stands for Cascading Style Sheets.

CSS is a way to describe how the content on your page should look.

In the CSS Panel of CodePen, add the following CSS code:

body {
	background-color:orange;
	color:white;
}

h1 {
	font-family:Georgia;
}

img {
	border:1px solid black;
	padding:5px;
}

CSS is made up of property:value pairs assigned to HTML elements.

These property:value pairs are called declarations.

CSS reference list

Practice:

  • Change the background-color of the h1 elements to yellow.
  • Add 5px of padding to the image.
  • Add one other style property from the reference list to any of the elements on your page.

Going live