Notes – Web Graphics
Web Graphics questions:

HTML basic code

HTML CODE

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

CSS STYLES

No styles used yet.

NOTE: The code on the left will render a blank page because there is no content indicated within the body tags.

HTML5 basic code

HTML5 CODE

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>"My First Web Page"
</body>
</html>

CSS STYLES

No styles used yet.

NOTE: The code on the left will render a page that reads "My First Web Page" because that is what is indicated within the body tags.

HTML basic page tags

Here are the very basic HTML tags required to display a HTML5 page within a browser window.

Opening <html> & closing </html> tags
(All other tags are placed within the <html> tags)
Opening <head> & closing </head> tags
Opening <title> & closing </title> tags
(Placed within the <head> tags)

Opening <body> & closing </body> tags
(all the content that appears within the browser window
goes between the <body> tags)

<!doctype html>
<html>
<head>
<title>Page title here!</title>
</head>
<body>
</body>
</html>
Anatomy of a HTML tag

open tsg

tag close

Do all HTML tags have opening and closing tags?

No. Several tags, known as empty tags, are displayed on the right. There are a few more, but no need to list those here.

<br>
Break tag to create a line break
<hr>
Horizontal Rule tag
<link>
Used in the HEAD of a document typically to link to an external stylesheet
<meta>

Again in the HEAD section used to include metadata

How do I center my site in the browser window?

In the <body> tag OR in the containing DIV tag add:

Here's the code:

body {
margin: 0 auto; }

How do I create simple CSS-based rollover graphics?

Dreamweaver allows you to easily create rollovers using the INSERT > IMAGE OBJECTS > ROLLOVER IMAGE menu. However, this technique uses Javascript and can bloat the code and doesn't always work properly.

Here's a simplier, CSS based technique.
The HTML is below:

<a href="PUT HYPERLINK HERE" class="rollover-container">

<img class="rollover" src="PUT NORMAL STATE IMAGE HERE"/>

<img class="rollover-swap" src="PUT HOVER STATE IMAGE HERE"/>
</a>

Here are the CSS rules that define the "rollover container", "rollover"(NORMAL STATE), and "rollover-swap"(HOVER STATE).

/* Initially hide the hover image */
.rollover-swap {
display: none;
}
/* When hovering over the <a> container, hide the default image */
.rollover-container:hover .rollover {
display: none;
}
/* When hovering over the <a> container, show the hover image */
.rollover-container:hover .rollover-swap {
display: inline;
}

What is a <div> tag?

The <div> tag defines a division or a region in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.
The <div> element is very often used together with CSS, to layout a web page.

Here's the code to define a header:

<div id="header"></div>

OR (HTML5)

<header></header>
What are apDIV tags?

AP stands for Absolute Positioned, meaning you can disignate exactly where you place the apDIV tag using TOP and LEFT coordinates. These position the apDIV from the TOP-LEFT corner of the browser OR the containing element if that element is set to position:relative. You can assign absolute positioning to most any tag. APDIV tags can also take on layering using the Z-index (Think layers as in other Adobe software).

Here's the code:

#apDiv1 {
position: absolute;
left: 64px;
top: 299px;

width: 154px;
height: 125px;
z-index: 1;
background-color: #CAF38D;
padding: 12px; }


This box has absolute positioning and its container has position:relative.
See the code on the left.

Understanding CSS positioning:

The position property specifies the type of positioning method used for an element which can be; static, relative, fixed or absolute.

Static positioned elements are not affected by the top, bottom, left, and right properties and is always positioned according to the normal flow of the page.

Relative positioned elements are positioned relative to their normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gaps left by the element.

Fixed positioned elements are positioned relative to the viewport(browser), which means they will always stay in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.

The sea bottom image uses FIXED positioning

Absolute positioned elements are positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors(containers), it uses the document body, and moves along with page scrolling. If you want an AP element to be positioned relative to a containing element, set the containing element(div) to position:relative.


How do I use z-index?

Think of z-index as layers. An absolute positioned element can have a z-index from 1 to whatever. Negative numbers are allowed also. The lower the z-index number the lower in the stacking order the oject appears.

Objects/elements can also have an opacity setting making them transparent.

NOTE: A good habit to get into is to number the z-index in units of 10 so you have wiggle room to place objects in-between.

Here's the code:

#apDiv2 {
position: absolute;
left: 83;
top: 102px;
width: 154px;
height: 101px;
z-index: 20;
}


#apDiv3 {
position: absolute;
left: 303px;
top: 209px;
width: 154px;
height: 101px;
z-index: 30;
opacity: 0.8;

}

NOTE: The container holding the apDiv tags must have position: relative

apDiv2
z-index: 20;
apDIV3
z-index: 30;

Anatomy of a CSS Rule

Css Rules are used to style HTML tags.

Here's the basic syntax for a CSS Rule: