Basic HTML - Welcome to Our Course Web Page
Download
Report
Transcript Basic HTML - Welcome to Our Course Web Page
Basic HTML
<!DOCTYPE html>
<html>
<head>
<title> All About Me - Your Name </title>
</head>
<body>
<p> Information for display </p>
</body>
</html>
Topics (10)
•
•
•
•
•
•
•
Title With Student Name and "All About Me"
My Favorite Thing To Do
My Pet
What I Want to Do When I Get Older
My Favorite Place to Visit
What I Would Spend a Million Dollars On
Four more appropriate titles to be selected by
student
Paragraphs
• It is important that we show our professional
ability by creating paragraphs that are
complete. Create a topic sentence that clearly
defines what is to be spoken about. Create 3
or more body sentences that reinforce and/or
expand upon the topic. Create a conclusion
sentence that wraps up the topic and/or
moves on to the next topic. With attention to
how we write a paragraph, we will
communicate successfully.
Editor
• To complete this project, a student will need
to create and modify text. Macs come with a
program called TextEdit and PCs come with a
program called Notepad. There are programs
that give more options such as Notepad++.
There are also a variety of online editors such
as on jsfiddle.net where a web page interacts
with a programmer. Start with a simple
editor that the teacher demonstrates and
keep in mind that we may use any editor we
choose.
Review
•
•
•
•
Basic HTML
Topics (10)
Paragraphs
Editor
<table>
<table border = "1" width = "100%">
<tr>
<td width="50%">
Information for display
</td>
<td width="50%">
Information for display
</td>
</tr>
<tr>
• The tr tag stands for “table row.” The section
is ended with </tr>. The tag can also contain
some additional information such as
width=“100%”. By setting the width to 100%,
the table will take up the whole screen. Each
item inside the row is referred to as a <td> or
table data.
<td>
In the example we used the following:
<td width="50%">
Information for display
</td>
We could have added a third or fourth item or as
many as we wanted. Change the number 50
to make the box take up less or more room.
Complete Table
• Each completed table row should have a
paragraph and a picture. A good way to set
this up is to alternate. The first row has the
paragraph on the left and the picture on the
right. The second row has the paragraph on
the right and the picture on the left. Find a
way to make your table informative and good
looking.
Review
•
•
•
•
<table>
<tr>
<td>
Complete Table
<img>
The following example will put an image in one of our
table boxes:
<td width="50%">
<center>
<img src="http://www.scottbunin.com/pivot.gif">
</center>
</td>
Change the link to the picture with any one you want like
something you can find on Google images.
<a> (link tag)
The following HTML code using the <a> tag to place
a link to some centered text:
<a href = "http://www.nba.com">
<center>
Click here to go to NBA.com
</center>
</a>
Linking Pictures
<a href = "http://www.nba.com">
<center>
<img src="http://jtmoore.org/wpcontent/uploads/2014/01/basketballLarge.png">
<br>
Click here to go to NBA.com
</center>
</a>
Image Height and Width
• By modifying the img tag, we can specify how
much room the picture should take up on our
web page. It can sometimes look nicer to have
all the pictures the same size.
<img width = "300" height = "300"
src="http://jtmoore.org/wpcontent/uploads/2014/01/basketballLarge.png"
>
Review
•
•
•
•
<img>
<a> (link tag)
Linking Pictures
Image Height and Width
More Tags
<br> will create a new line like when you hit enter
<b><u><i> bold, underlined, and italicized </i>
</u></b>
<font size="6" color = "blue"> Text </font>
<center> This text is centered </center>
http://www.webmonkey.com/2010/02/html_cheatsh
eet/
Functional Considerations
• The page is functional if it conveys information
about the current topic. If the end user is able
to look at the page and get an idea of who you
are, then it is a success. You are an important
and unique individual. Make your web page
an important and unique page. Keep in mind
the purpose of what you are trying to
accomplish.
Aesthetic Considerations
• If a page looks sloppy, people will mistake the
programmer for being sloppy. By making the
page look nice, we present ourselves in a
professional and intelligent way. Keep page
formatting consistent and simple. Use colors
and pictures where they enhance, but don’t
get carried away. Make certain the project has
the right amount of artistic touch.
Adding CSS
<style>
#myPicture {
position: fixed;
top: 150px;
left: 5px;
}
</style>
<img id="myPicture"
src="http://www.scottbunin.com/images/cat.png">
Review
•
•
•
•
More Tags
Functional Considerations
Aesthetic Considerations
Adding CSS
Adding a Form
This example will create a form with a button on
it. The button is reffered to by the computer sa
myButton and the end user sees the text Move
Picture.
<form>
<input value = "Move Picture" type = "button"
id= "myButton" onClick = "movePicture()">
</form>
Adding JavaScript
<script type="text/javascript">
function movePicture(){
img = document.getElementById("myPicture");
img.style.top = Math.random() * 500 + "px";
}
</script>
Applications to Other Subjects
• These kinds of web pages can be about any
academic subject. When our English teacher
assigns us an essay on a novel, we can make
the essay on a web page. Our science report
can go on a web page. Our history project can
be made on a web page. Practice using your
tools as often as you can.
Rubric
1. Create a basic HTML file. (20)
2. Include 10 topics. (20)
3. Write 10 paragraphs. (20)
6. Create a table. (10)
11. Place 10 images. (10)
12. Add links to the 10 images. (10)
19. Format TWO pictures with CSS. (5)
21. Add a button that uses JavaScript to move the
TWO pictures. (5)
Review
•
•
•
•
Adding a Form
Adding JavaScript
Applications to Other Subjects
Rubric