basic html all about me - your name information for display
TRANSCRIPT
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/wp-content/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/wp-content/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_cheatsheet
/
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