Introduction__To__HTML
Download
Report
Transcript Introduction__To__HTML
HTML stands for Hyper Text Mark-up
Language. The coding language used to
create documents for the World Wide Web
HTML is composed of tags. HTML tags are
always enclosed in angle brackets, <>, and
are case-insensitive; that is, it doesn't matter
whether you type them in upper or lower case
Tags typically occur in begin-end pairs, with an
opening and closing tag.
e.g. <tag> </tag>.
Web pages begins with <html> and ends with
</html>
The HEAD tags contain all of the document's
header information.
<head> </head>.
It doesn't appear at the top of the browser
window, but contain things like the
document title and so on.
The Title tag is placed within the HEAD
structure. Between the TITLE tags, you should
have the title of your document. This will
appear at the top of the browser's title bar
<title> </title>.
The BODY tags come after the HEAD tags.
Between the BODY tags, you find all of the
stuff that gets displayed in the browser
window. All of the text, the graphics, and
links, and so on.
<body> </body>.
Placing a background image can be done by
typing in the following:
<body background="myimage.jpg"
text="white" bgcolor="blue">
So, putting everything we've covered thus far into
one file, we have:
<html>
<head>
<title>My First Webpage </title>
</head>
<body bgcolor=“cyan” text=“red">
</body>
</html>
Open Notepad, type the above,
save file as: mywebpage.html
(make sure you have the .html file extension)
The heading tags appear between the BODY tags.
There are six levels of headings, from heading 1
<h1> through to heading 6 <h6>.
<h1>Heading 1 </h1>
The beginning of a paragraph is marked by <p>,
and the end by </p>.
<p>This is a paragraph </p>
<p>This
is
also a paragraph </p>
<p> And yet another
paragraph </p>
HTML ignores spaces and line breaks between texts.
If you want to end a line after a certain word,
but don't want to start a new paragraph, you
could use the <br/> tag.
Text on a web page can be set to bold, italic
and underline, just as you could with text in a
word processing document.
◦ The tags are <b> and </b> for bold,
◦ <i> and </i> for italic,
◦ <u> and </u> for underline.
The FONT and COLOR tags can be use to
change the fonts and colours of your web
page.
◦ <font face = "Arial" color = blue>here
you have your text </font>
The Horizontal Rule <hr> is useful when you
want to separate two sections with a line.
In order to create a hyperlink, you'll need to
know two things. The first is the URL, that is,
the location of the file to which you want the
link to go. The second is knowledge of how
links work.
Links works by using the HREF (Hypertext
REFerence) tag and the URL you want to link
to.
e.g. <a href="http://www.yahoo.com.au/">
Yahoo website</a>
- creates a link to the yahoo website.
note: a signifies the anchor.
There are 2 types of lists in HTML:
ordered lists, and unordered lists.
◦ <ol> and </ol> for ordered list which
produces a numbered list.
◦ <ul> and </ul> for unordered list which
produces a bulleted list.
◦ <li> and </li> for items on the list.
Example of ordered list:
<ol>
would produce
<li>Monday</li>
1. Monday
<li>Tuesday </li>
2. Tuesday
<li>Wednesday </li> 3. Wednesday
<li>Thursday </li>
4. Thursday
<li>Friday</li>
5. Friday
</ol>
Example of unordered list:
<ul>
would produce
<li>Monday </li>
* Monday
<li>Tuesday </li>
* Tuesday
<li>Wednesday </li> * Wednesday
<li>Thursday </li>
* Thursday
<li>Friday </li>
* Friday
</ul>
Images are placed in web documents using the
IMG tag. In order to make the IMG tag work,
you need to use an SRC attribute. SRC stands
for "source" where SRC is the URL of the
graphic you want to have displayed on your
web page.
e.g. <img src="image.jpg" width="400"
height="300">
Placing images within links is also possible. To
do so, merely place the IMG tag within the
anchor container.
e.g. <a href="http://www.mywebsite.com">
<img src="mypicture.jpg"></a>
The Table tag consists of the <table> and
</table> tags.
<caption> </caption> use to create the title of
a table.
<tr> </tr> use to create a table row.
<td> </td> use to create a table cell.
border- specify the border size.
bordercolor- specify the colour of the border.
align- specify the alignment of the whole table.
cellspacing- specify the amount of empty space
between the outer edges of each table cell.
cellpadding- specify the amount of empty space
between the border of the table cell and the
content of the cell.
<table border="3" bordercolor=blue
cellspacing="10" cellpadding="10"
align=center>
<caption>simple table </caption>
<tr>
<td>row 1/column 1</td>
<td>row 1/column 2</td>
<td>row 1/column 3</td>
</tr>
<tr>
<td>row 2/column 1</td>
<td>row 2/column 2</td>
<td>row 2/column 3</td>
</tr>
</table>
Tables are useful for organising the layout of your
webpage.
<table width="60%" border="1">
<caption>another simple table </caption>
<tr>
<td width="30%">row 1/column 1</td>
<td width="70%">row 1/column 2</td>
</tr>
<tr>
<td>row 2/column 1</td>
<td>row 2/column 2</td>
</tr>
</table>
Rows can be expanded.
<table width="500" border="1">
<caption>expanding table </caption>
<tr>
<td width="100">row 1/column 1</td>
<td width="400">row 1/column 2</td>
</tr>
<tr>
<td rowspan="2">row 2/column 1</td>
<td>row 2/column 2</td>
</tr>
<tr>
<td>row 3/column 2</td>
</tr>
</table>
Columns can also be expanded.
<table width="500" border="1">
<caption>expanding table </caption>
<tr>
<td colspan="2">row 1/column 1</td>
<td>row 1/column 3</td>
</tr>
<tr>
<td>row 2/column 1</td>
<td>row 2/column 2</td>
<td>row 2/column 3</td>
</tr>
</table>
A form can contain input elements like text
fields, checkboxes, radio-buttons, submit
buttons and more.
Forms are placed in web documents using
the form tag.
E.g. <form name="InputTypes">
The input tag is used to place input
elements on the web page
E.g. <input type=“text name=“FirstName“
size=“20”>
CSS is an extension to basic HTML that allows
you to style your web pages. Style refers to
the definition of fonts and colour on your page.
CSS can also be used to specify the image
background of your page and changing the
looks of your links.
CSS can be embedded into your webpage or
store in an external text file that you can then
link to your webpage.
CSS is defined in the head section of the
webpage.
External style sheet
<link href=“myStyle.css" rel="stylesheet"
type="text/css">
Embedded style sheet
<style type="text/css”>
body {
background-image: url(image.jpg);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: white; }
</style>
You can customise and create styles the way
you want by declaring styles as classes.
.mystyle {
font-family: Geneva, Arial, Helvetica,
sans-serif;
font-size: 20px;
color: red; }
<body>
<p class="mystyle">Hello World </p>
</body>
You can also customise the way your links appears
on the webpage.
a:link {text-decoration: underline
overline; color: red;}
a:active {text-decoration: none; color:
yellow;}
a:visited {text-decoration: overline;}
a:hover {text-decoration: none;
background: green;
color: red;}
body {
background-color: #ff3333;
font-family: Verdana, Arial, Helvetica, sansserif;
font-size: 12px;
line-height: 24px;
color: #336699;
margin: 0px;
}
H1 {
font: 14pt verdana; color: #CCCCCC;
}
A{
color:#FFOOOO;
text-decoration: none;
}
-->
</STYLE>
td {
font-family: Arial, Helvetica, sans-serif;
font: 10pt verdana; color: #666666;
}
•
•
•
•
a:link{
•
•
•
•
a:visited{
color: #FF0000;
text-decoration: none;
}
•
•
•
•
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
color: #006699;
text-decoration: none;
}
Search the Internet for more examples and
tutorials.
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp