Doman’s Sections Information in this presentation includes text and images from

Doman’s Sections

Information in this presentation includes text and images from www.w3schools.com

Add an image Add style to each of the following elements:

Background The heading elements The text in the paragraphs One or all of your links Each list Each table Float some element to the right side of the page

Add images to webpage by using a single HTML tag, the image source tag

<img src=“location” />

Key is getting the location correct

<img src=“name.filetype” />

Save your images in the same folder as your html file.

Alternate attribute – This provides text for browsers that don’t have graphic capabilities.

It also provides the text shown when the input pointer hovers over the image.

<img src=“location” alt=“text to be shown” />

Secure the size of the image displayed – height and width attributes

These can be specified in units of Percentage of the page real estate Actual pixels

<img src=“location” height=“60” width=“50” />

<img src=“location” height=“6%” width=“10%” />



CSS stands for Cascading Style Sheets

Set of rules that determine how the styles are applied to the HTML tags in the document (1).

Syntax of CSS Rules consist of:1. Selectors2. Declarations

[1] Sam’s Teach Yourself HTML in 10 Minutes, SAMS Publishing; Indianapolis IN, 2007

SelectorsHTML tags that receive the

style Declarations

The style sheet properties and their values

Embedded<style> tags are placed in the <head> section

and affect the entire file.Inline

<body style=“background:blue:”> … </body>

Linked<head><link rel=“stylesheet” href=“location” type=“text/css” /> <head

1.

All styles are defined a the top of the HTML document within the <head> tag.

They contain information about the entire document!

<head><style type=“text/css”>

</style>

</head>

body{ } background :blue;

CSS properties used for background effects:background-color : Sets the background color of an element

background-image: Sets the background image for an element

background-repeat : Sets if/how a background image will be repeated

background-position: Sets the starting position of a background image

background-attachment :Sets whether a background image is fixed or scrolls with the rest of the page

Tutorial Link

color : Sets the color of a text text-align: Aligns the text in an element vertical-align: Sets the vertical

alignment of an element text-decoration: Adds decoration to

text text-transform: Controls the letters in

an element text-indent: Indents the first line of

text in an elementTutorial Link

font-family: Specifies the font family for text

font-size: Specifies the font size of text

font-style: Specifies the font style for text

font-weight: Specifies the weight of a font

Tutorial Link

Set different list item markers for ordered lists

Set different list item markers for unordered lists

Set an image as the list item marker

list-style-type: Specifies the type of list-item marker

list-style-image: Specifies an image as the list-item marker

Tutorial Link

border: specify table borders border-collapse: sets whether the

table borders are collapsed into a single border or separated

width and height: specifies the width/height of the element

Tutorial Link

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.Tutorial Link

Links are styled differently depending on what state they are in.The four links states are: a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the mouse sits over ita:active - a link the moment it is clicked

These are called CSS pseudo-classesLinks can be style with any CSS property (e.g. color, font-family, background-color).

Tutorial Link

<head><style type="text/css">a:link {color: pink;} /* unvisited link */a:visited {color: red;} /* visited link */a:hover {color: blue;} /* mouse over link */a:active {color: green;} /* selected link */</style></head>

www.w3.schools.com



h1 { color:”red”; }This causes all text surround by an <h1> tag to be red.

What if I want only one or some <h1> tags to be red?

CSS allows selectors "class".These selectors provide the ability to differentiate which tags are associated with the format

Specifies a style for any HTML elements with the same class.

Defined by a “.”

Referenced in the class attribute of the HTML element

Classes can affect all HTML elements that associate with the class

Classes can be attached to specific HTML elements.

<style type="text/css"> .yellowClass {color:yellow;}

h1.redClass { color:red; }h1.blueClass{color:blue;}h1 {color:green; }

</style>

Indicate class name as an attribute of the tag:

<h1 class=redClass> Red Heading </h1>

<h1 class=blueClass> Blue Heading </h1>

<h1 class=yellowClass>Yellow Heading</h1>

<h1> Other headings </h1>

Tutorial

Red Heading Blue Heading Yellow Heading Other headings

The "first-letter" pseudo-element is used to add a special style to the first letter of a text:

p:first-letter {color:#ff0000;font-size:xx-large;}</style>

You can use the :first-

letter pseudo-element to add a special effect to the first character of a text!

Tutorial Link

Allows the user to navigate the website Must be clear in purpose and easy to

find Navigation menus are usually on all

pages Normally along the top or left side of

the page

Create 2 more pages by copying the one created.

Change the title tag on the page. Save as .html files with a new name

List of links.

Use the anchor tag <a href=“location”> to link to your 2nd and 3rd page.

Link each page to the other two.

You can use text or an image to link the pages.

<ul><li> <a href=“location/page1.html”>

First page </a> </li>

<li> <a href=“location/page2.html”> First page </a> </li>

<li> <a href=“location/page2.html”> First page </a> </li>

</ul>

Key is getting the location correct

Remember to use the complete URL with http prefix

…. OR…..

Save all html document files in the same folder.

Specify : <a href=“name.filetype” > text </a>

Navigation bar can be a list of links. So, add style characteristics to the list

to make it look more like what we want

1. Remove bullets or numbers2. Make the whole area around the

word ‘clickable’3. Display vertical or horizontal

navigation bar

Display vertical or horizontal navigation bar -> style the list item selectorUse either display or float attributes

li{display:inline;…}

li{float:left;}

• display:inline; - By default, <li> elements are block elements. Removing the line breaks before and after each list item, displays them on one line

• float:left - use float to get block elements to slide next to each other

Tutorial Link

The <div> tag defines a division or a section in an HTML document.

The <div> tag is often used to group block-elements to format them with styles.

<div class=“introduction”> <h3>This is a header</h3> <p>This is a paragraph.</p></div>

Tutorial Link

Feel free to look at the examples provided by w3schools.com .

Use these techniques to format your own pages:

CSS EXAMPLES Tutorial

Documents

Doman’s Sections Information in this presentation includes text and images from