HTML / CSS
Class Description
This is a beginner level class that will teach you how to write valid HTML/CSS from scratch, explaining the concepts behind it, and using free Open Source Tools to write and preview code. You’ll be able to put your own simple website together using nothing but a free text editor, your browser and Photoshop to edit your images for the web.
This class will give you a firm foundation and understanding of how web pages and sites are put together, teach you how to write your own code, how to test your pages in different browsers and make you comfortable editing HTML/CSS in already existing web pages. This class will also teach you where to look for help when you get stuck or want to learn things on your own when the class is over, and also give you X-Ray vision on the web, teaching you how to peek at the structure of any page on the web to see how it was made.
Many times when we design a site or page in Dreamweaver, Word or another web design program we end up with something that looks the way we want to but don’t understand how it is made, which makes it hard to fix things when problems arise. This class emphasises the code underlying the web page, giving you a firmer understanding of the principles behind the web. At the end of this class you’ll be able to code yourself, as well as put HTML/CSS on your resume.
1st Session
During class we’ll cover some basic html tags.
Homework:
- 1. review the HTML tutorials at w3schools.org,
from HTML HOME until HTML Lists. - 2. Make a web page named myname.html (i.e. mine would be sebastian.html) with the following:
-
- a page title (goes in the header section);
- a heading (i.e h1)*
- a subheading (i.e h4)
- a paragraph which contains: ( p )
- regular text
- one bold word or sentence ( strong )
- a sentence in italics ( em)
- a link to a website that opens on the same window ( a )
- a link that opens in a different window or tab. ( a, look up the “target” atrribute in the links section )
- an image ( img )
- an image that is a link ( a + img );
- a table
- an unordered list with three items ( ul and li )
*relevant tags in parenthesis,
if you need to look them up, check out the tag list in the same w3schools page
Please bring the html page to class
Please remember to include the image(s) in the same folder as the html file.
2nd Session
Introduction to CSS
Homework
- review the CSS tutorials at w3schools.org,
from CSS HOME until CSS Pseudo-class.
(skip CSS Outline and CSS Tables, and if you are feeling ambitious, check out CSS Image Gallery and CSS Image Opacity) - Make a style sheet named myname.css (i.e. mine would be sebastian.css) and save it on the same folder where you saved last week’s assignment (myname.html).
On your html page from last week:
- link to your stylesheet in the head section
On your stylesheet:
- select the body tag and
- give your page a background color
- select the font-family and font-size for your page (it will be inherited by all elements inside the body). Web Safe Fonts.
- select your heading (h1) and subheader (h4, or whatever you used) and
- select your paragraph (p) and
- set text-align to justify
- give it a margin-left of however many pixels you want
- select your link (a) and
- take out the default underline (text-decoration)
- change the color of your links
- make a different hover state (a:hover);
- select your images (img) and
- resize your image (width and height)
- give them a border of 0 (this will get rid of that annoying outline around the image link)
- select your list (ul) and
- set the list-style-type to none
- give your ul a dark background color
- select your list items (li) and
- change the text color to a light color
- set them to float: left
- give them a margin-right of 10px.
- (remember that if you want things to NOT float, you should use clear:left, for example if you have anything after your list and it is floating).
- save your files and bring them to class
3rd Session
We covered How to optimize images for the web, as well as some more CSS working methods, the difference between fixed and fluid layouts, and the difference between Block and Inline display styles in CSS, Also, we learned how to identify CSS elements in other people’s pages using the Web Developer Toolbar. Lastly, we learned how to check how our site looks in other browsers using netrenderer and browsershots.
Homework: Making your own site:
- Go to CSS Easy, copy the code from one if the layouts and paste it into Smultron.
- Save the file as myname.html
- Select the Internal stylesheet (from <style> to </style>), and paste the css onto a new file in Smultron. (don’t forget to delete the <style> tags);
- Save that stylesheet as myname.css
- Link myname.html to myname.css
***
- Now that you have your html file and your stylesheet set, you have free range to insert content as you like, but I’ll be checking for the following
***
- That your page has a <title>
- That you include at least one image (i’ll be checking that it’s optimized, and the right size. meaning not resized using css)
- That you insert a list of links, this will be your navigation, you don’t have to make the extra pages if you don’t want to. here’s an example of how to make a horizontal menu from a list ( <ul> + <li> )
- That you use the float property, if you are lost, here’s a tutorial.
- That you properly assign either class or id identifiers to HTML tags, and select them Using CSS.
- That you steal a neat trick from CSS Zen Garden, as we discussed in class.
***
Feel free to add anything else to your page (background images, font-styles, borders, etc etc)
Good Luck!
4th Session
We went over the homework, and covered how to identify specific HTML and CSS in your page using The web developers toolbar, as well as forms, input fields, radio buttons, checkboxes submit buttons. Lastly we covered some sources for mp3 players, etc. Lastly we covered a few options for Content Management Systems if you want to have a robust site in the future.
It was a fun class, email me if you have any qestions in the future.