Introduction to CSC110
Download
Report
Transcript Introduction to CSC110
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
1
Using Breaks (NOT IN BOOK / COVERED)
The simple break tag <br /> 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
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:
<h4>Visit us:</h4>
<p>1313 Mockingbird Way<br />Truth or Consequences,
NM 07901</p>
Save index.html and view it in a browser.
2
Add a Horizontal Rule (NOT IN BOOK / COVERED)
You can quickly add a line (horizontal rule) to any web page
using the <hr /> tag. Like <br />, this is considered an “empty
element” thus has one combined opening / closing tag.
Continuing on index.html, on a new line before <h4> type:
<hr />
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 <hr />. When used, they should
be styled using CSS.
3
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.
Go to http://tools.dynamicdrive.com/favicon/, 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.
Continuing on index.html, on a new line before opening <style… type:
<link rel="shortcut icon" href="images/favicon.ico"
type="image/x-icon" /> [link to favicon (on one line)]
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" />
4
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.
Color safe shorthand can be used accordingly:
Drop duplicates in pairs
e.g., #000066 becomes #006; #990000 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.
5
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:
Continuing on index.html, on a new line after <body> type:
<div id="navbar">
<img src="images/demologo.gif"/>
</div>
And on a new line before </style> type:
#navbar
{
padding-left: 0;
position: fixed;
top: 0;
}
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.
6
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:
Here is how we will edit index.html, with the body 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., change
center to 250px 50px, etc.
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.
7
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:
margin-left: auto;
margin-right: auto;
Try this with the CSS for p
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.
8
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;
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)
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).
9
To Do List
Be ready for Quiz 2 (if we haven’t taken it yet)!
Read Chapter 7
Revisit what we did in class
Be careful as we do not follow book
Remember, MUCH more detail about anything we cover
is:
at w3.org
the Appendices of your book
DOCUMENT Your Project
We are reviewing your progress this week.
Remember, websites about one of your passions is
usually a winner.
10