Get documents about "HTML: Hyptertext Markup Language
Document Sample
HTML:
HYPTERTEXT
MARKUP
LANGUAGE
PART II
Doman’s Sections
Information in this presentation includes text and images from www.w3schools.com
IMAGES
Add images to webpage by using a
single HTML tag, the image source
tag
<img src=“location” />
Key is getting the location correct
FINDING YOUR IMAGES
In the folder where your html is saved…
Create another folder named ‘images’
Save your images in that folder
Specify :
<img src=“images/name.filetype” />
IMAGE ATTRIBUTES - ALT
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”
/>
IMAGE ATTRIBUTES - SIZE
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%” />
USING IMAGES AS LINKS
Use the anchor tag to surround the image
tag. This makes the image the hyperlink text:
<a href=“http://www.google.com”>
<img src=“http://www.google.gif” />
</a>
ADDING STYLE AND FLAVOR
TUTORIAL
WHAT IS CSS?
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. Selectors
2. Declarations
[1] Sam’s Teach Yourself HTML in 10 Minutes, SAMS Publishing; Indianapolis
IN, 2007
STYLE SHEETS
Selectors
HTML tags that receive the style
Declarations
The style sheet properties and their
values
METHODS OF IMPLEMENTING
STYLE SHEETS
1. Inline
<body style=“background:blue:”> …
</body>
2. Linked
<head>
<link rel=“stylesheet” href=“location” type=“text/css” />
<head
3. Embedded
<style> tags are placed in the <head> section and affect the
entire file.
EMBEDDED STYLE SHEETS
All styles are defined a the top of
the HTML document within the
<head> tag.
They contain information about the
entire document!
EMBEDDED STYLE SHEET
<head>
<style type=“text/css”>
body { background : blue ; }
</style>
</head>
APPLYING PROPERTIES TO HTML TAGS
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
STYLING ATTRIBUTES
STYLING BACKGROUNDS
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
STYLING TEXT
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
element
Tutorial Link
STYLING FONTS
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
THE CLASS SELECTOR
Specifies a style for any HTML
elements with the same class.
Defined by a “.”
Referenced in the class attribute of
the HTML element
USING THE CLASS ATTRIBUTE
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>
USING THE CLASS ATTRIBUTE
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> Red Heading
Blue Heading
Tutorial Yellow Heading
Other headings
THE :FIRST-LETTER PSEUDO-ELEMENT
The "first-letter" pseudo-element is
used to add a special style to the first
letter of a text:
p:first-letter
{
color:#ff0000;
Y ou can use the :first-
letter pseudo-element to add
font-size:xx-large; a special effect to the first
} character of a text!
</style>
Tutorial Link
STYLING LISTS
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
STYLING TABLES
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
FLOATING ELEMENTS
An element can be pushed to the left
or right, allowing other elements to
wrap around it.
Float is useful for both images and
layouts
img
{
float:right;
}
HOW ELEMENTS FLOAT
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
NAVIGATION
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
NAVIGATION BAR
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.
NAVIGATION BAR
<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>
NAVIGATION BAR
Key is getting the location correct
Remember to use the complete URL
with http prefix
…. OR…..
FINDING YOUR PAGES
Save all html document files in the same
folder.
Specify :
<a href=“name.filetype” > text </a>
STYLING NAVIGATION BAR
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 numbers
2. Make the whole area around the
word ‘clickable’
3. Display vertical or horizontal
navigation bar
STYLING NAVIGATION BAR
Remove bullets or numbers
-> tag the list selector
ul
{
list-style-type:none;
margin:0;
padding:0;
}
list-style-type:none - Removes the bullets. A
navigation bar does not need list markers
Setting margins and padding to 0 to
remove browser default settings
STYLING NAVIGATION BAR
Make the whole area around the word ‘clickable’
-> style the anchor selector
a
{
display:block;
width:60px;
}
display:block - Displaying the links as block elements
makes the whole link area clickable (not just the text), and
it allows us to specify the width
width:60px - Block elements take up the full width
available by default. We want to specify a 60 px width
STYLING NAVIGATION BAR
Display vertical or horizontal navigation bar
-> style the list item selector
Use either display or float attributes
li li
{ {
display:inline; 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
STYLING LINKS
Links are styled differently depending on what state they are
in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the mouse sits over it
a:active - a link the moment it is clicked
These are called CSS pseudo-classes
Links can be style with any CSS property (e.g. color, font-family,
background-color).
Tutorial Link
STYLING LINKS - EXAMPLE
<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
CREATING MULTIPLE PAGES
Create 2 more pages by copying the one
created.
Change the title tag on the page.
Save as .html files with a new name
CSS EXAMPLES
Feel free to look at the examples
provided by w3schools.com .
Use these techniques to format your
own pages:
CSS EXAMPLES Tutorial
NEXT WEEK
Ethics and Privacy
Midterm in 2 weeks
