Getting Started with HTML - c-jump
Download
Report
Transcript Getting Started with HTML - c-jump
Getting Started with HTML
Please use speaker notes for additional
information!
To view Speaker Notes in Internet Explorer:
–Select Browse from the Menu Bar and then select Full Screen
–In the lower left corner of the screen click on the square (a pop-up menu will appear)
–Select Screen and then select Speaker Notes
<html>
<!--This is a comment tag. I will use this to explain the structure of the code. HTML tags
are embedded in the text of the document/web page that you create. The angle brackets < and
> surround the markup instructions and make the instruction detectable to the browser
when it is showing your page. You start with the word HTML enclosed in < and >. Note the
ending comment tag -->
<head>
<!-- The code can be broken down into two sections: the HEAD and the BODY. Note that the
beginning HEAD tag is simply enclosed in angle brackets while the closing head tag uses the
angle brackets and a slash: </. For now, the only thing we will put in the HEAD is the
TITLE. Note the use of the starting and ending TITLE tags. You will see that most tags
use both the start and the end. We will deal with exceptions as the arise. The title
will appear in the top left corner of the screen when the browser is displaying the web
page -->
<title>Getting started with HTML</title>
</head>
<body>
<!-- We are now in the BODY portion of the HTML where most of the code is written. Note
at the end of the code, I close the BODY and finaly close the HTML. -->
<h1>This web page will be used to explain the concepts of HTML.</h1>
<h2>To see the comments look at the with comments version of the page.</h2>
<h3>Notice that I am writing headers - H1, H2, H3 etc. through H6 </h3>
<h4>Note the characteristics of these headers.</h4>
<h5>Each starts on a separate line.</h5>
<h6>And there is a blank line between them.</h6>
Now I am going to write some regular text. Note that I am writing enough text so that it
will wrap around onto a second line. In HTML, when the text wraps to the next line is
determined by the browser settings. When I write the code, I press enter when I want to
move to another line to write my code. This has no impact on what you see on the screen. To
see the code as I wrote it, look under View/Page Source in Netscape or View/Source in
Explorer. Note that even if I leave multiple spaces when I am entering the code, HTML
will only show one space. Now I am done with this text and so I will use the BR tag to
indicate a break.<br>
When I start writing again it will be on a different line. I moved to a new line when I was
writing this code, but I did not have to.<br> The BR can be embedded as I write the code.
<br>
BR is an example of a tag that does not have a corresponding closing tag.
<p>I can also use paragraph tags to start a new paragraph. Paragraph tags have a closing
tag, but they are not always used - note it is a good idea to use them because of future
versions of web code.</p>
<p>This is another paragraph. Note that the paragraph tag leaves a blank line above the
paragraph. This did not happen with the BR tag. However I could have used two BR tags
to skip a line.</p>
</body>
</html>
<html>
<head>
<title>Making the page more interesting</title>
</head>
<body bgcolor="#C0C0C0" text="#FF00FF">
<h1 align=center>This header is aligned to the center</h1>
<h2 align=right>This code is aligned to the right.</h2>
Now I am going to make a list of the commands we have looked at:
<ul>
<li>HEAD and TITLE</li>
<li>BODY with the BGCOLOR and TEXT attributes</li>
<li>Headers</li>
<li>BR and P</li>
<li>ALIGN attribute used with a header (note can also be used with a paragraph)</li>
<li>Unordered lists (ordered lists will be covered below) with line items in the list</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
Next I am going to make a nested list (a list within a list).
<ol>
<li>First list (note this is in the outer list)</li>
<ol>
<li>An item within the first list</li>
<li>Another item within the first list</li>
<li>On the next line I will close the items within the first list and return to the
outer list</li>
</ol>
<li>Second list (note this is back to the outer list)</li>
</ol>
Notice that on the line above, I closed the outer list. Be sure to look at the source code
to see how this was done.
</body>
</html>
<html>
<head>
<title>Making the page more interesting</title>
</head>
<body bgcolor="#C0C0C0" text="#FF00FF">
<!-- These are the color codes for Silver and for Magenta. You can do a search on the web
to come up with a variety of color codes. Here are a few: Gray is 808080, Blue is 0000FF,
Cyan is 00FFFF, Lime is 00FF00, Yellow is FFFF00, Red is FF0000, Black is the 000000, Navy
is 000080, Teal is 008080, Green is 008000 or another Green is 00FF00, Olive is 808000,
Maroon is 800000, Purple is 800080. Many of the common colors can be expressed in words.
-->
<h1 ALIGN=CENTER>This header is aligned to the center</h1>
<!--The align attribute can be set to center, right or left. The default attribute is
left.-->
<h2 ALIGN=RIGHT>This code is aligned to the right.</h2>
Now I am going to make a list of the commands we have looked at:
<ul>
<li>HEAD and TITLE</li>
<li>BODY with the BGCOLOR and TEXT attributes</li>
<li>Headers</li>
<li>BR and P</li>
<li>ALIGN attribute used with a header (note can also be used with a paragraph)</li>
<li>Unordered lists (ordered lists will be covered below) with line items in the list</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
Next I am going to make a nested list (a list within a list).
<ol>
<li>First list (note this is in the outer list)</li>
<ol>
<li>An item within the first list</li>
<li>Another item within the first list</li>
<li>On the next line I will close the items within the first list and return to the outer
</li>
</ol>
<li>Second list (note this is back to the outer list)</li>
</ol>
Notice that on the line above, I closed the outer list. Be sure to look at the source code
to see how this was done.
</body>
</html>
Here I am giving colors for the
<html>
<head>
background and the text. Note
<title>Making the page more interesting</title>
that these colors are within the
</head>
BODY tag. You code <body then
<body bgcolor="#C0C0C0" text="#FF00FF">
<h1 align=center>This header is aligned to the center</h1>
give the colors and then close
<h2 align=right>This code is aligned to the right.</h2>
Now I am going to make a list of the commands we have looked at: the body with >.
<ul>
<li>HEAD and TITLE</li>
We will look at other ways to do alignment, but
<li>BODY with the BGCOLOR and TEXT attributes</li>
here I am using align= inside the header tag.
<li>Headers</li>
<li>BR and P</li>
<li>ALIGN attribute used with a header (note can also be used with a paragraph)</li>
<li>Unordered lists (ordered lists will be covered below) with line items in the list</li>
</ul>
UL stands for unordered list which means bullets are used. Note that the list
items also have a closed list item. This is not required under existing
standards but will be strongly encouraged under the new standards.
<ol>
OL means ordered list which means the list is numbered 1,
<li>First</li>
<li>Second</li>
2, 3 instead of using bullets.
<li>Third</li>
</ol>
Next I am going to make a nested list (a list within a list).
I have show
the outer list in
blue and the inner
(embedded) list in red for
clarity.
<ol>
<li>First list (note this is in the outer list)</li>
<ol>
<li>An item within the first list</li>
<li>Another item within the first list</li>
<li>On the next line I will close the items within the first list and return to the
outer list</li>
</ol>
<li>Second list (note this is back to the outer list)</li>
</ol>
Notice that on the line above, I closed the outer list.
to see how this was done.
</body>
</html>
Be sure to look at the source code
<html>
<head>
<title>Images, Linking and Tables</title>
</head>
<body bgcolor="BEIGE" text="GREEN">
<h1 align=center>Testing Images, Linking and Tables</h1>
<font color="RED" size = 6>This is in red and the font size is set to 6.</font> The rest of
this is the default text and size since I closed the FONT tag.<BR>
<!--To put an image on a page, you should use .gif or .jpg (.jpeg) because these are
supported by all browsers. The image should be in the same directory as the page or a
path to the image has to be provided.-->
<img src="image.gif">You can have text beside the image and as you will see the text aligns
with the bottom of the image. You can change this using alignment. Notice that I have
written enough text here to get wrap (at least on my screen).<br>
<div align=center>
<!-- Here I am using DIV for division to set the alignment to the center. Until I close
the DIV, everything will be aligned in the center. Notice I am also establishing a
different height and width for the image. -->
<img src="image.gif" width="500" height="200"><br><br><br>
<table border=2>
<tr>
<td>Top left</td>
<td>Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom right</td>
</tr>
</table>
<!--The code above establishes a table. Note that I have a border on the table with a width
of 2. If I eliminated border, the table would not have the cell structure. TR sets up a
row and TD sets up an element in that row. Note that each needs to be opened and closed.
You must also be very sure to close the table when you are done or problems will develop.
Note that I had not closed the </DIV> until after the table so the table is also aligned to
the center. -->
</div>
Now I am going to establish a link to the other example pages that I did.<br>
<a href="first.html">This links to the first page we looked at.</a><br>
<a href="second.html">This links to the second page we looked at.</a><br>
<!--The A HREF is the code to establish a link. The page that I want to link to follows
the HREF (hypertext reference). Note that this page needs to be in the same directory.
If it is in a different directory, I need a path. After writing the words that will
appear as the code to click on to link to the page, I close the A (anchor).
In the code below I am linking to a page on the web using the entire address, so I am
giving the entire path in the hypertext reference.-->
<a href="http://www.pgrocer.net/cit11/html/start.html">This links to the first page using the
entire path</a><br>
</body>
</html>
<html>
<head>
<title>Images, Linking and Tables</title>
</head>
<body bgcolor="BEIGE" text="GREEN">
<h1 align=center>Testing Images, Linking and Tables</h1>
<font color="RED" size = 6>This is in red and the font size is set to 6.</font> The rest of
this is the default text and size since I closed the FONT tag.<BR>
<!--To put an image on a page, you should use .gif or .jpg (.jpeg) because these are
supported by all browsers. The image should be in the same directory as the page or a
path to the image has to be provided.-->
<img src="image.gif">You can have text beside the image and as you will see the text aligns
with the bottom of the image. You can change this using alignment. Notice that I have
written enough text here to get wrap (at least on my screen).<br>
<div align=center>
<!-- Here I am using DIV for division to set the alignment to the center. Until I close
the DIV, everything will be aligned in the center. Notice I am also establishing a
different height and width for the image. -->
<img src="image.gif" width="500" height="200"><br><br><br>
I am now setting up a table - this table has two rows and two
columns. The border of 2 specifies the size of the border around
the table.
Row one has two cells - each is shown
with TD. The first cell says top left and
the second cell says top right.
<table border=2>
<tr>
<td>Top left</td>
<td>Top right</td>
</tr>
Row two also has two cells - each is shown with
<tr>
TD. The first cell says bottom left and the second
<td>Bottom left</td>
cell says bottom right.
<td>Bottom right</td>
</tr>
</table>
<!--The code above establishes a table. Note that I have a border on the table with a width
of 2. If I eliminated border, the table would not have the cell structure. TR sets up a
row and TD sets up an element in that row. Note that each needs to be opened and closed.
You must also be very sure to close the table when you are done or problems will develop.
Note that I had not closed the </DIV> until after the table so the table is also aligned to
the center. -->
</div>
Now I am going to establish a link to the other example pages that I did.<br>
<a href="first.html">This links to the first page we looked at.</a><br>
<a href="second.html">This links to the second page we looked at.</a><br>
<!--The A HREF is the code to establish a link. The page that I want to link to follows
the HREF (hypertext reference). Note that this page needs to be in the same directory.
If it is in a different directory, I need a path. After writing the words that will
appear as the code to click on to link to the page, I close the A (anchor).
In the code below I am linking to a page on the web using the entire address, so I am
giving the entire path in the hypertext reference.-->
<a href="http://www.pgrocer.net/cit11/html/start.html">This links to the first page using the
entire path</a><br>
</body>
</html>
<html>
<head>
<title>Menu</title>
</head>
<BODY bgcolor="BEIGE" text="NAVY">
<h1 align=center>FLUENCY MENU</h1>
<br><br>
<div align=center>
<img src="CISa.gif"><br><br>
<table border=4 width=50%>
<tr>
<td><a href="first.html">FIRST PAGE</a></td>
<td><a href="firstwcomments.html">FIRST PAGE with comments</a></td>
</tr>
<tr>
<td><a href="second.html">SECOND PAGE</a></td>
<td><a href="secondwcomments.html">SECOND PAGE with comments</a></td>
</tr>
<tr>
<td><a href="third.html">THIRD PAGE</a></td>
<td> </td>
</tr>
</table>
means to leave this
</div>
cell empty. I need to account
</body>
</html>
for the cell and I need to tell
what should be in in.
puts a space in the cell.