Embed Size (px)
Citation preview
1
Assignment - HTML (20 Points)
Basic HTML Exercises Using Notepad
1-Getting started and creating a directory for your files
1. Create a folder on your desktop to save your HTML pages in (call it ‘My web page’.
2. To start Notepad: Go to Accessories and click on Notepad.
3. Type in the following document tags :
<html>
<head>
<title> My First web page</title>
</head>
<body>
</body>
</html>
2-Now save the file to the html directory you created
Click File, save it as index.html
1. Start with <html>
2. <head>
title for the page;
3. </head>
4. <body>
<title>Any title of your choice</title>
2
Add a heading that is bold & in italics
Add an image. Save it under “My web
page” folder
then add a horizontal rule,
then add a paragraph,
and then an unordered list:
<h1><b><i> Your Name: This is my
first homepage </b> </i></h1>
<img src="collegelogo.jpg" width=134
height=200 hspace=5 border=0>
<hr>
<font color=#FF8000>
<p>
This is my first web page, when it’s
finished, it will include:
</p>
<font color=#B4045F>
<ul>
<li>Movies
<li>Games
<li>Music
</ul>
Now save the page and view it.
Open the browser: click File, and Open and then browse to find the folder and file
3
you should see your new page appear in the browser, looking something like this:
Your name: My First Page
This is my first web page, when it’s finished, it will include:
Movies
Games
Music
Note that you can view changes anytime by saving your file in Notepad and then going
back to the browser and clicking on the Reload button.
5- To change the back ground color, copy and paste the following code in the notepad
document:
<body bgcolor=#00ccaa> or ANY OTHER COLOR CODE FROM THE LIST BELOW
6- To add a link,
<body bgcolor=#00ccaa>
<a href="http://www.hospitality.ucf.edu/">I'm currently attending Rosen College of
HM</a>
<p><br>
</p>
7- Please repeat to add a table:
<TABLE BORDER CELLPADDING="2" CELLSPACING="0"
BORDERCOLOR=#0000FF WIDTH=80%>
<!--Define first table row-->
<TR>
<!--Define table headers-->
<TH>You can</TH>
<TH>create</TH>
4
<TH>headers</TH>
</TR>
<!--Define second table row-->
<TR>
<!--Define table headers-->
<TH>1</TH>
<TH>2</TH>
<TH>3</TH>
</TR>
</TABLE>
<p>
</p>
8- To embed movies, copy and paste the next line.
<A
HREF="http://www.youtube.com/watch?v=RRvJ9ff0TUs&feature=player_embedded">
<font color=#B40404><h1><u>My Movie</u></h1></font></A>
9- Embed a youtube movie in the HTML ducomne
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/RRvJ9ff0TUs&hl=en&fs=1&"></param><param
name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed
src="http://www.youtube.com/v/RRvJ9ff0TUs&hl=en&fs=1&" type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425"
height="344"></embed></object>
10. </body>
11. </html>
Color Name HEX Code Color
black #000000
white #ffffff
red #ff0000
blue #0000ff
green #008000
yellow #ffff00
orange #ffa500
violet #ee82ee
5
purple #800080
pink #ffc0cb
silver #c0c0c0
gold #ffd700
gray #808080
aqua #00ffff
skyblue #87ceeb
lightblue #add8e6
fuchsia #ff00ff
khaki #f0e68c
