Assignment #1A
HTML with Styles
withstyles.html

 

 

 

   Objective: You will be able to create a basic web page, using HTML code, that includes a variety of text styles created with an internal style sheet and in-line styles.
 

The Steps
Open a new TextWrangler document.

Save it as withstyles.html.

Internal Style Sheet

In the head part of the document, somewhere between <head> and </head>, type the following:

<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #990099;
background-color: #99CC00;
}
-->
</style>

What this does is to change the "body" tag. Cascading Style Sheets (CSS), or styles, are like a language of their own, used together with HTML to format your web pages. There are books and websites devoted to CSS.

http://www.w3schools.com/css/css_intro.asp

http://www.css-ref.com/

Change at least 5 tags on your page, including <body> (use the example shown but change the values) and <a> (change the color of links).

In addition to font and color attributes, try changing things like text-align, border, text-decoration, etc.

Inline Styles

In your aboutme.html page, you changed the style of a tag using an inline style. For example, you typed <p style="....">.

Add at least three inline styles to withstyles.html.

Try using an inline style to change the style of a tag you altered in your Internal Style Sheet. For example, if you changed the properties of the <a> tag in your Internal Style Sheet (above), now change one of the link tags inline (type <a href="...." style="....">) in a different way than you changed it in the Internal Style Sheet.

What happens?

 

The Assignment

1. Create your withstyles.html page, so that:

  • The webpage can be viewed using a web browser.
  • The webpage includes at least 3 altered tags in an Internal Style Sheet.
  • The webpage includes at least 2 altered tags using Inline Styles.
  • The webpage includes at least 2 links, one of which is to aboutme.html.

To Do More
Create your withstyles.html page, so that:

  • The webpage includes 2 more altered tags in an Internal Style Sheet.
  • The webpage includes at least 1 more altered tag using Inline Styles.
  • The webpage includes at least 1 tag that has been altered in BOTH the Internal Style Sheet and Inline.
  • The webpage includes a description of what occurs when a tag is altered in BOTH the Internal Style Sheet and Inline.

To Wow Yourself

 

back to the top