HTML and the Web - Mount Allison University

Download Report

Transcript HTML and the Web - Mount Allison University 

Creating Webpages
with Style
Hypertext and the HTML
Markup Language
(continued)
Computer Science 1611
Internet & Web
Features for discussion
• Font features
– Color : color of the text
– Face: set the typestyle for text
–Size : size of the font
– Alignment
• Image features
– Height, width
– Alignment of text
– Alternate text
• Tables
Computer Science 1611
Internet & Web
Font features
Color : color of the text
• <font color="#ff0000">All this will display as Red</font>
• <font color="#0000ff"> All this will display as Blue</font>
• <body bgcolor="#0000ff"> or <body bgcolor=“blue"> will set the
background color of the “body” to blue
Face: set the typestyle for text
• <font face="Arial">This will display as Arial</font>
Size : size of the font
• <font size =“1">All this will be tiny font</font>
• <font size="7"> All this will be larger font </font>
Computer Science 1611
Internet & Web
More Font features
Alignment
• <br> means break to the next line
• <nobr> means no break, and will not let your text break(this
causes the reader to have to scroll to the right)
• <p> paragraph text goes here </p> means break two lines for a
new paragraph
• <center> text to be centered </center> results in
text to be centered
Computer Science 1611
Internet & Web
Align Tag
We can also align the text in a “container” to the left,
center or middle using a simple attribute of the
– heading <h1></h1> tag
– paragraph<p></p> tag
To do this we use the following attributes within these
tags.
– align="center"
– align="left"
– align="right"
Because the alignment is an attribute of a tag, aligns must go
inside the main tag they intend to align.
Computer Science 1611
Internet & Web
html images
In HTML, images are defined with the <img> tag. The
<img> tag is empty, which means that it contains
attributes only and it has no closing tag.
<img src="url">
You can use an image as the background for the body
<body background="waterimage.jpg">
Computer Science 1611
Internet & Web
image attributes
Attributes which can be assigned to an image include
height - the height of the image
width - the width of the image
align - the horizontal alignment of the image
top----------aligns the text with the top of the picture
bottom-------aligns text with bottom of picture
middle-------aligns the text with the middle of the image
right--------aligns image at right margin-text will wrap on the left side of it
left---------aligns picture at the left margin- text will wrap on the right of it
hspace - the amount of space you want on the sides your picture in pixels
vspace - the amount of space you want on the top and bottom (pixels)
<img src="http://www.porshiana.com/waterimage.jpg"
align= "right" height="300">
Computer Science 1611
Internet & Web