Skip to content

Latest commit

 

History

History
156 lines (94 loc) · 4.06 KB

2014-09-10-nerd-summit-html-css.md

File metadata and controls

156 lines (94 loc) · 4.06 KB
Raw

Intro

URL For these notes: http://thewc.co/s/nerd-html-css

Susan Buck ([email protected]) / Women's Coding Collective / @WeAreWCC

HTML: The code behind web pages

Code Editors

Tag basics

Tags are used to surround content, for example, here's 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'>The Free Encyclopedia</a>

target might specify a link should open in a new tab

<a href='http://google.com' target='_blank'>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

Right now you're the only one that can view your web page— let's change that.

Web hosting gives you a place to store your work online, where the rest of the world can access it.

Example: SiteGround

For this class, we'll use the free web site playground, NeoCities.

  1. Create an account at Neocities: https://neocities.org.
  2. In Neocities, find the option to edit your index.html file.
  3. In index.html, paste in the code you've created in this class.
  4. View your finished product at http://your-username.neocities.org