CSW131 Steven Battilana 1 CSW 131 – Supplement 1 (X)HTML / CSS Not Covered or in Book Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley

CSW131 Steven Battilana 2 Using Breaks (NOT IN BOOK / COVERED) The simple break tag forces a new line on the web page where ever it is used. It is considered an “empty element” thus has one combined opening / closing tag. The simple break tag forces a new line on the web page where ever it is used. It is considered an “empty element” thus has one combined opening / closing tag. First download supp1.zip into downloads subfolder First download supp1.zip into downloads subfolder 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 “Back to top” link type: On a new line before the “Back to top” link type: Visit us: Visit us: 1313 Mockingbird Way Truth or Consequences, NM Mockingbird Way Truth or Consequences, NM Save index.html and view it in a browser. Save index.html and view it in a browser.

CSW131 Steven Battilana 3 Add a Horizontal Rule (NOT IN BOOK / COVERED) You can quickly add a line (horizontal rule) to any web page using the tag. Like, this is considered an “empty element” thus has one combined opening / closing tag. You can quickly add a line (horizontal rule) to any web page using the tag. Like, this is considered an “empty element” thus has one combined opening / closing tag. Continuing on index.html, on a new line before type: Continuing on index.html, on a new line before type: Save index.html and view it in a browser. Save index.html and view it in a browser. Note: More customized lines or other forms of breaking up a page are commonly used over. When used, they should be styled using CSS. Note: More customized lines or other forms of breaking up a page are commonly used over. When used, they should be styled using CSS.

CSW131 Steven Battilana 4 Favorite Icon [Cool Notice] (NOT IN BOOK / COVERED) You can create and use your own favorite icon, which will appear next to the URL in the address window, in favorites, etc. Small files in.gif.,.jpg,.png, or.ico should work, but the best / most reliable is a.ico file. You can create your own image, then easily convert it to.ico format. You can create and use your own favorite icon, which will appear next to the URL in the address window, in favorites, etc. Small files in.gif.,.jpg,.png, or.ico should work, but the best / most reliable is a.ico file. You can create your own image, then easily convert it to.ico format. Go to then click browse and select favicon.png from your class_work images folder. Go to then click browse and select favicon.png from your class_work images folder. Click Create Icon, then click Download FavIcon and place it in your class_work images folder. Click Create Icon, then click Download FavIcon and place it in your class_work images folder. Continuing on index.html, on a new line before opening <style… type: Continuing on index.html, on a new line before opening <style… type: [link to favicon (on one line)] [link to favicon (on one line)] Save index.html and view it in a IE, Chrome, and FF browsers. Save index.html and view it in a IE, Chrome, and FF browsers. Other file types code: favicon.gif" type="image/gif" /> favicon.jpg" type="image/jpg" /> favicon.png" type="image/png" /> Other file types code: favicon.gif" type="image/gif" /> favicon.jpg" type="image/jpg" /> favicon.png" type="image/png" />

CSW131 Steven Battilana 5 Safe Color Shorthand (NOT IN BOOK / COVERED) Remember the use of the Web Safe Palette is still common. It is made up of 216 colors, using 6 shades of three primaries using 00, 33, 99, CC, FF. Remember the use of the Web Safe Palette is still common. It is made up of 216 colors, using 6 shades of three primaries using 00, 33, 99, CC, FF. Color safe shorthand can be used accordingly: Color safe shorthand can be used accordingly: Drop duplicates in pairs e.g., # becomes #006; # becomes #900; and #33FFCC becomes #3FC Conversely, you can add the 3 digits back to a shorthand color to look up the actual hexadecimal (6-digit) color. Conversely, you can add the 3 digits back to a shorthand color to look up the actual hexadecimal (6-digit) color.

CSW131 Steven Battilana 6 Fixed Position [Cool Notice] (NOT IN BOOK / COVERED) Using fixed position, you can keep your web page header and or navigation bar at the top of your page even when user scrolls: Using fixed position, you can keep your web page header and or navigation bar at the top of your page even when user scrolls: Continuing on index.html, on a new line after type: Continuing on index.html, on a new line after type: </div> And on a new line before type: And on a new line before type:#navbar{ padding-left: 0; position: fixed; top: 0; } Edit h1 & body styles: [h1] margin-top: 55px; [body] background-position: 550px 50px; Edit h1 & body styles: [h1] margin-top: 55px; [body] background-position: 550px 50px; Save index.html and view it in a browser, and scroll to see the effect. Save index.html and view it in a browser, and scroll to see the effect.

CSW131 Steven Battilana 7 More on Fixed Position [Cool Notice] (NOT IN BOOK / COVERED) Fixed position can also fix a background and center an image on a page (in addition to keeping your web page header and or navigation bar at the top of your page even when user scrolls: Fixed position can also fix a background and center an image on a page (in addition to keeping your web page header and or navigation bar at the top of your page even when user scrolls: Here is how we will edit index.html, with the body CSS style: Here is how we will edit index.html, with the body CSS style: First, comment out the 4 background- property value pairs You can also play around with these to check effects, e.g., change to, etc. 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., change center to 250px 50px, etc. Save index.html and view it in a browser, and scroll to see the effect. Save index.html and view it in a browser, and scroll to see the effect. Change image to gopher25.jpg. Save and view index.html in browser. Change image to gopher25.jpg. Save and view index.html in browser.

CSW131 Steven Battilana 8 Centering an Element (NOT IN BOOK / COVERED) As you will recall, text-align: center; will center text within an element on a page. We can also simply center any element (as long as the width is specified), by adding these two lines within the element’s CSS: As you will recall, text-align: center; will center text within an element on a page. We can also simply center any element (as long as the width is specified), by adding these two lines within the element’s CSS: margin-left: auto; margin-right: auto; Try this with the CSS for p Try this with the CSS for p Save index.html and view it to see the effect. Save index.html and view it to see the effect. NOTE: You should make a note to yourself regarding the difference between aligning TEXT VS an ELEMENT on a page. NOTE: You should make a note to yourself regarding the difference between aligning TEXT VS an ELEMENT on a page.

CSW131 Steven Battilana 9 Eliminate Border Around Linked Image (NOT IN BOOK / COVERED) 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 can use the CSS property value pair border: none; 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 can use the CSS property value pair border: none; Within index.html for the Gopher.jpg hyperlink image, we can use border: none; by creating CSS for the element img, OR we can add it to the.floatleft class that already exists: Within index.html for the Gopher.jpg hyperlink image, we can use border: none; by creating CSS for the element img, OR we can add it to the.floatleft class that already exists: Try it both ways (within the style tags) Try it both ways (within the style tags) Save index.html and view it to see the effect – the blue border around the hyperlink image is gone. Save index.html and view it to see the effect – the blue border around the hyperlink image is gone. Note: take a good look at the floatleft class – it should give you some go ideas for your web pages. And remember, there often multiple ways to make your web pages have the look you want (on any browser). Note: take a good look at the floatleft class – it should give you some go ideas for your web pages. And remember, there often multiple ways to make your web pages have the look you want (on any browser).

CSW131 Steven Battilana 10 To Do List Be ready for Quiz 2 (if we haven’t taken it yet)! Be ready for Quiz 2 (if we haven’t taken it yet)! Read Chapter 7 Read Chapter 7 Revisit what we did in class Revisit what we did in class Be careful as we do not follow book Remember, MUCH more detail about anything we cover is: Remember, MUCH more detail about anything 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.