URL For these notes: http://thewc.co/s/nerd-html-css
Susan Buck ([email protected]) / Women's Coding Collective / @WeAreWCC
- All web pages are made up of HTML
- View Source on http://phpwomen.org
- The role of CSS
- Application: Sublime http://sublimetext.com
- Browser based: CodePen http://codepen.io
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.
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.
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 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.
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.
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.
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.
- Create an account at Neocities: https://neocities.org.
- In Neocities, find the option to edit your
index.html
file. - In
index.html
, paste in the code you've created in this class. - View your finished product at
http://your-username.neocities.org