Web Page Design

HTML stands for HyperText Markup Language and that is what we will learn about when working on our web pages. Most web designers use a web page editing program such as GoLive, Pagemill, and to create their pages. As they work on their page the html language is automatically put in and all you see are the finished results. We don't have any of those programs on our desktops so we are going to have to learn the internet language and make our changes that way.

Steps we will use in class

  1. Turn on your laptop - make a new file folder on your desktop and call it by your code name plus add web to it, ie bejoweb
  2. Find Simple Text Application and create new file and call it by your code name with .html after it - ie bejo.html
  3. Open up an internet browser - go to http://www.MSAD51.org then click on Drowne Road School, then click on McGillicuddy/Powell Class, then Class Pages, then on your own site.
  4. After the site is loaded and on your screen, go to the bar and open up View and click on Source at the bottom of the list. - your page will come up with the internet language and will look like:
  5. Highlight or select all the page and then click copy.
  6. Go to your simple text file which you already created put the curser on the page and select paste and then save.
  7. Go back to the browser - go to open - then to your file folder and click on your new file (bejo.html) - everything should come up as before but the pictures will not be visible.
  8. You can now go back to your text file and make changes to your page using HTML language. You can change the color of your background, text, links - size of your lettering and other items using this language. After you make a change and save it- go back to the Browser and refresh and you should see the changes.
  9. Send your changes to me by


HTML Language

HTML Tags

Tags are used to mark-up HTML elements
Tags are surrounded by brackets < > these tags are not visible when page is shown
Tags come in pairs usually the start <p> and end </p> - they are not case sensitive
Text between the pair of tags is what is shown or effected by the tags.

SIMPLE HTML samples you can start using

<html> comes at the beginning of the page and </html> comes at the end
<body> comes before the written part and </body> at the end

 

<h1> gives the size of headings</h1>


<h1> gives the size of headings</h1>


<h1> gives the size of headings</h1>


<h1> gives the size of headings</h1>

<b> bold text </b>
<i> italicized </>

Changing the color of background, text and links:
<body bgcolor:"#ffffff" text="#ff0000" link=#0000ff" alink=#990099" vlink=#999900">
The six letters and numbers between the quotes represent a color read by the browser and translated to your screen. Some of the basic colors and their corresponding hex code are:

 Color

HEX Color Code
 

 #000000
 

#ff0000
 

#ff00ff
 

#0000ff
 

#00ffff
 

#00ff00
 

#ffff00
 

#cccccc
 

#999999
 

#990000
 

#990099
 

#000099
 

#009999
 

#009900
 

#999900

Remember, if you have a black background, you need to have a light coloring text and links. You can find a whole lot more colors and their hex codes at: http://www.w3schools.com/html/html_colors.asp

Click here to see a quick list of codes for internet language. A few of the ones we will be using are:

Internet language

Internet - a network of computer connections that allows millions of computer users around the world to exchange information

Web - short for world wide Web (Internet)

Web browser - A program for retrieving and viewing HTML documents on the World Wide Web ( netscape, explorer)

HTML - abbreviation for Hypertext Markup Language. A HTML tag may tell a Web browser program how to display a piece of text or a graphic, or it may direct the browser to another file or document

HTTP - Hypertext Transfer Protocol. The protocol (the set of rules) that World Wide Web clients (browsers) and servers (internet company provider - AOL, etc.) use to communicate with each other.

FTP - Abbreviation for File Transfer Protocol. A way in which files are transferred from one computer to another.

font - a particular style for displayed or printed characters, including shape, weight, slant etc.

image - picture (ending in jpg, jpeg, gif)

link - A special hidden tag in an HTML document, or for another anchor point with the same document. When you click a word, phrase, or graphic that's tagged as a link, the browser automatically retrieves the appropriate target.

modem - short for modulator/demodulator. a hardware device that connects your computer to other computers using telephone/cable lines.

URL - Uniform Resource Locator. A URL is a specially formatted address that a Web browser uses to locate, retrieve and display a document.

document - On the World Wide Web, a file or a set of related files that can be transferred from a Web server to a Web client (browser). The document may contain text, graphics, sound, or hyperlinks to other documents.

Links to sites where you can learn more about website creating and use free tutorials:

http://www.w3schools.com/html/default.asp

Source Code Java Scripts (some of the items in our site came from this free website: http://javascript.internet.com


INDEX PAGE

 Math

 Social
Studies

 Science

 Art
  Reading

 English
&
Spelling

 Music

 Computer

 Phys
Ed