CS

W1

31

Ste

ven

B

att

ilan

a

1

CSW 131 – Supplement CSW 131 – Supplement 11

(X)HTML / CSS (X)HTML / CSS Not Covered or in BookNot Covered or in Book

Prepared by Prof. B. for use withPrepared by Prof. B. for use withTeach Yourself Visually Web DesignTeach Yourself Visually Web Design

by Ron Huddleston, Wileyby Ron Huddleston, Wiley

CS

W1

31

Ste

ven

B

att

ilan

a

2

Using Breaks Using Breaks (NOT IN BOOK / COVERED)(NOT IN BOOK / COVERED)

The simple break tag The simple break tag <br /> <br /> forces a new line on the web forces a new line on the web page where ever it is used. It is considered an “page where ever it is used. It is considered an “empty empty elementelement” thus has one combined opening / closing tag.” thus has one combined opening / closing tag.

First download First download supp1.zipsupp1.zip into into downloadsdownloads subfoldersubfolder copy & paste supp1zip into class_work subfolder extract (unzip) supp1.zip, which becomes subfolder

supp1 into class_work subfolder

Open index.html in Visual Web Developer (in Visual Studio)Select File | Open | Web Site…Select your Project folder, then open index.html

On a new line before the On a new line before the “Back to top” link “Back to top” link type:type:<h4>Visit us:</h4><h4>Visit us:</h4><p>1313 Mockingbird Way<br />Truth or Consequences, NM <p>1313 Mockingbird Way<br />Truth or Consequences, NM

07901</p>07901</p> Save Save index.html index.html and view it in a browser.and view it in a browser.

CS

W1

31

Ste

ven

B

att

ilan

a

3

Add a Horizontal Rule Add a Horizontal Rule (NOT IN BOOK / COVERED)(NOT IN BOOK / COVERED)

You can quickly add a line (horizontal rule) to any web You can quickly add a line (horizontal rule) to any web page using the page using the <hr /> <hr /> tag. Like <br />, this is tag. Like <br />, this is considered an “considered an “empty elementempty element” thus has one ” thus has one combined opening / closing tag.combined opening / closing tag.

Continuing on Continuing on index.htmlindex.html, on a new line before , on a new line before <h4> <h4> type:type:

<hr /><hr /> Save Save index.html index.html and view it in a browser.and view it in a browser. Note: More customized lines or other forms of Note: More customized lines or other forms of

breaking up a page are commonly used over <hr />. breaking up a page are commonly used over <hr />. When used, they should be styled using CSS.When used, they should be styled using CSS.

CS

W1

31

Ste

ven

B

att

ilan

a

4

Favorite Icon [Cool Notice] Favorite Icon [Cool Notice] (NOT IN BOOK / COVERED)(NOT IN BOOK / COVERED)

You can create and use your own You can create and use your own favorite iconfavorite icon, which will appear , which will appear next to the URL in the address window, in favorites, etc. Small files next to the URL in the address window, in favorites, etc. Small files in in .gif.gif., ., .jpg.jpg, , .png.png, or , or .ico.ico should work, but should work, but the best / most reliable the best / most reliable is a .ico fileis a .ico file. You can . You can create your own image, then easily convert it create your own image, then easily convert it to .ico formatto .ico format..

Go to Go to http://tools.dynamicdrive.com/favicon/, then click browse and , then click browse and select select favicon.pngfavicon.png from your class_work images folder. from your class_work images folder.

Click Click Create IconCreate Icon, then click , then click Download FavIcon Download FavIcon and and place it in your place it in your class_work images folderclass_work images folder..

Continuing on Continuing on index.htmlindex.html, on a new line before opening , on a new line before opening <style… <style… type:type:

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> icon" /> [link to favicon (on one line)][link to favicon (on one line)]

Save Save index.html index.html and view it in a IE, Chrome, and FF browsers.and view it in a IE, Chrome, and FF browsers. Other file types code: Other file types code:

favicon.gif" type="image/gif" />favicon.gif" type="image/gif" />favicon.jpg" type="image/jpg" />favicon.jpg" type="image/jpg" />favicon.png" type="image/png" /> favicon.png" type="image/png" />

CS

W1

31

Ste

ven

B

att

ilan

a

5

Safe Color Shorthand Safe Color Shorthand (NOT IN BOOK / COVERED)(NOT IN BOOK / COVERED)

Remember the use of the Remember the use of the Web Safe Palette Web Safe Palette is still common. is still common. It is made up of 216 colors, using 6 shades of three It is made up of 216 colors, using 6 shades of three primaries using primaries using 0000, , 3333, , 9999, , CCCC, , FFFF. .

Color safe shorthand can be used accordingly:Color safe shorthand can be used accordingly: Drop duplicates in pairs

e.g., #000066 becomes #006; #990000 becomes #900; and#33FFCC becomes #3FC

ConverselyConversely, you can add the 3 digits back to a shorthand , you can add the 3 digits back to a shorthand color to look up the actual hexadecimal (6-digit) color.color to look up the actual hexadecimal (6-digit) color.

CS

W1

31

Ste

ven

B

att

ilan

a

6

Fixed Position [Cool Notice] Fixed Position [Cool Notice] (NOT IN BOOK / COVERED)(NOT IN BOOK / COVERED)

Using fixed position, you can keep your web page header and or Using fixed position, you can keep your web page header and or navigation bar at the top of your page even when user scrolls:navigation bar at the top of your page even when user scrolls:

Continuing on Continuing on index.htmlindex.html, on a new line after , on a new line after <body> <body> type:type:

<div id="navbar"><div id="navbar"><img src="images/demologo.gif"/><img src="images/demologo.gif"/></div> </div> And on a new line before And on a new line before </style> </style> type:type:#navbar#navbar{{padding-left: 0;padding-left: 0;position: fixed;position: fixed;top: 0;top: 0;}} Edit Edit h1 h1 & & bodybody styles: styles:

[h1][h1] margin-top: margin-top: 55px55px;;[body][body] background-position: 550px background-position: 550px 5050px;px;

Save Save index.html index.html and view it in a browser, and and view it in a browser, and scrollscroll to see the to see the effect.effect.

CS

W1

31

Ste

ven

B

att

ilan

a

7

More on Fixed Position [Cool Notice] More on Fixed Position [Cool Notice] (NOT IN BOOK / (NOT IN BOOK / COVERED)COVERED)

Fixed position can also Fixed position can also fix a background and center an image fix a background and center an image on a pageon a page (in addition to keeping your web page header and or (in addition to keeping your web page header and or navigation bar at the top of your page even when user scrolls:navigation bar at the top of your page even when user scrolls:

Here is how we will edit Here is how we will edit index.htmlindex.html, with the , with the body body CSS style:CSS style: First, comment out the 4 background- property value pairs Copy & paste background-image (on one line) then EDIT as

follows:

background-image: url("images/flowers.gif") fixed center no-repeat #FFC955;

You can also play around with these to check effects, e.g., You can also play around with these to check effects, e.g., change change center toto 250px 50px, etc., etc.

Save Save index.html index.html and view it in a browser, and and view it in a browser, and scrollscroll to see the to see the effect.effect.

Change imageChange image to to gopher25.jpggopher25.jpg. Save and view . Save and view index.htmlindex.html in in browser.browser.

CS

W1

31

Ste

ven

B

att

ilan

a

8

Centering an Element Centering an Element (NOT IN BOOK / COVERED)(NOT IN BOOK / COVERED)

As you will recall, text-align: center; will center text within As you will recall, text-align: center; will center text within an element on a page. We can also simply an element on a page. We can also simply center any center any element (element (as long as the width is specified)as long as the width is specified), by adding these , by adding these two lines within the element’s CSStwo lines within the element’s CSS::

margin-left: auto;margin-left: auto;

margin-right: auto;margin-right: auto;

Try this with the CSS for Try this with the CSS for pp

Save Save index.html index.html and view it to see the effect.and view it to see the effect.

NOTENOTE: You should make a note to yourself regarding : You should make a note to yourself regarding the the difference between difference between aligning TEXTaligning TEXT VS VS an ELEMENT on a an ELEMENT on a pagepage..

CS

W1

31

Ste

ven

B

att

ilan

a

9

Eliminate Border Around Linked Image Eliminate Border Around Linked Image (NOT IN BOOK / (NOT IN BOOK / COVERED)COVERED)

The problem with using images as links as there is a default The problem with using images as links as there is a default blue border (to show it is a link) . To remove this border, we blue border (to show it is a link) . To remove this border, we can use the CSS property value pair can use the CSS property value pair border: none;border: none;

Within Within index.html index.html for the for the Gopher.jpgGopher.jpg hyperlink image, we hyperlink image, we can use can use border: none;border: none; by creating CSS for the element by creating CSS for the element imgimg, , OR we can add it to the OR we can add it to the .floatleft.floatleft class that already exists: class that already exists:

Try it both ways (within the Try it both ways (within the stylestyle tags) tags)

Save Save index.html index.html and view it to see the effect – the blue and view it to see the effect – the blue border around the hyperlink image is gone.border around the hyperlink image is gone.

NoteNote: take a good look at the : take a good look at the floatleftfloatleft class – it should give class – it should give you some go ideas for your web pages. And remember, you some go ideas for your web pages. And remember, there often multiple ways to make your web pages have the there often multiple ways to make your web pages have the look you want (on any browser).look you want (on any browser).

CS

W1

31

Ste

ven

B

att

ilan

a

10

To Do ListTo Do List

Be ready for Quiz 2 Be ready for Quiz 2 (if we haven’t taken it yet)(if we haven’t taken it yet)!! Read Chapter 7Read Chapter 7 Revisit what we did in classRevisit what we did in class

Be careful as we do not follow book Remember, MUCH more detail about anything Remember, MUCH more detail about anything

we cover is:we cover is: at w3.org the Appendices of your book

DOCUMENT Your Project DOCUMENT Your Project We are reviewing your progress this week. Remember, websites about one of your

passions is usually a winner.