Webpages
Curious about designing webpages FROM SCRATCH? No problem! This page will give you webpage design instructions. Of course, it won’t be a second Google, but it’ll be cool. I learned HTML from multiple books and websites. Here’s an example:
http://www.mae.ncsu.edu/courses/mae766/luo/justin/Marburghome.html
AND…IT’S GONE!!!
Also, tell me in your comment if you want to learn about something else.
STARTING OFF:
At the bottom left hand corner, there is a “start” button. Click that, then click all programs. You’ll see Notepad. At the top, type <html>. Whenever you end a function, you have a “/” before its command. At the bottom, type </html>. Then, type in between the tags: This is my first webpage. Next, click ”File” and then click “Save As”. Save it in a new folder, like Local Disk C, where it can easily be accessed. You could name it home.html. Open up Internet Explorer, then type the keyname you saved the page as. For example, yours could be: C:/home.html. It won’t show up on other computers, because it’s a file name, so your friends cannot access it 
. It’ll have “This is my first webpage” on it. There’s your webpage!
You may want to add some other information besides “This is my first webpage”. You could write a blog, for example.
FORMAT TEXT:
If you want to make text bold, just type <b>. Don’t forget to add </b> at the end of the phrase you want to make bold. Similarly, if you want to make text italicized, just type <i> and </i> like you did for making text bold. If you want to make text underlined, just type <u> and </u>. If you really want to make it big, type <big> and </big> just like you did for making phrases bold.
You can also change the color by simply typing <font color=x> and </font color>, replacing the x with the color you want. You could make words bigger by specifying the size (<font size=”8″> and </font size>).
HEAD AND BODY:
In your head, you may want to include the title, like “Justin’s Webpage” or “Justin’s Corner”. You simply type the title between the <head> and </head> tags. When you want to include a paragraph, then you have the paragraph text between the <body> and </body> tags.
BODY BACKGROUND COLOR:
If you want to change the body background color, just type <body bgcolor=”x“>, replacing the “x” with the color you want. Be sure to save the page!
LINKS:
Links are something that everyone wants on their webpage for easy access to other pages. Sure, here’s how you create one:
Type <a href=”x”>, replacing the x with a file name. Then, type the name of the link. FInally, type </a>. For example, you could type: <a href=”homepage.html”>Home Page</a>, and the link will pop up.
IMAGES:
Images are something that most middle schoolers would desire to have on their page. Regardless of your wishes, here are the directions:
Type <img src=”x“>, replacing the x with the image file. For example, you could type <img src=”friends.jpg”>.
CASCADING STYLE SHEETS
I can’t think of anything else to do, so let’s just jump into the INTERMEDIATE stuff.
Type <style type=”text/css”>. Then type p{font:16px/17px “trebuchet ms”}. Then type </style>. You’ll see a more appealing font.
A BASIC TABLE: Type <table>. Then type <tr> and </tr>. This stands for table row. If you type 3 <tr>s, you’ll have 3 rows. Then type <td> and </td> between the <tr> tags. The <td> determines how many cells you’ll have per row. Finally, type </table>. You’ll have a basic table without gridlines.
So far your website could look like this:
<html>
<head>Ms. Paisie’s website</head>
<style type=”text/css”>p{font:16px/17px “trebuchet ms”}</style>
<body bgcolor=”red”><p>I love to be in <big>Ms. Paisie</big>’s class. I am <b>(your name)</b>, a very good student, and love updating my blog.</p>
<table><tr><td>Cool blogs</td><td>My support?</td></tr>
<tr><td>Edublogs</td><td>Yes</td></tr>
</table>
</body>
</html>
Entries (RSS)
February 26th, 2009 at 4:31 pm
Does anybody have a private webpage?