Web designing using html

Web Page Designing Using HTML

Do you know these websites?

The Internet

The Internet consists of millions of interconnected computers that enable users to communicate and share information.The World Wide Web was developed to make the Internet easier to use and give quick access to users.

Structure of the InternetThis figure shows the physical structure of the Internet,

which uses fiber-optic cables, satellites, phone lines, and other telecommunications media to send data back and forth.

Purpose of Internet

For Information Sending and Retrieval (researches,

facts and figures, etc.)

For Communication Via emails, chat, etc.

Hypertext Documents

Hypertext offers a better way of locating information. When you read a book, you follow a linear progression, reading one page after another.With hypertext, you progress through pages in whatever way is best suited to you and your objectives.Hypertext lets you skip from one topic to another.

Linear Versus Hypertext Documents

This figure shows how topics can be related in a hypertext fashion,as opposed to a linear fashion.

Web Pages and Web Browsers

A Web page is stored on a Web server, which makes the page available to users of the Web.To view a Web page, the user runs a Web browser, a software program that retrieves the page and displays it.A Web browser can either be text-based, or graphical.

Using a Browser to View a Web Document on a Server

This figure shows to view web pages, the user runs a Web browser, a software program that retrieves the page and displays it.

PRELIM

HTML

stands for Hypertext Markup Languagethe language of the webA markup language is a language used to describe the content and format of documents.HTML code is easy to use, that even nonprogrammers can learn to use it.

Tools for Creating HTML Documents

Text editor such as Windows NotePad or HTML converter or an HTML editor. an HTML converter like Microsoft Word

takes text in one format and converts it to HTML code

an HTML editor helps you create an HTML file by inserting HTML codes for you as you work

Web Browser such as Internet Explorer, Mozilla Firefox, or Netscape Navigator.

Outline

1) Your first HTML file - Learn the foundation of HTML and make your first web page.

2) Editing HTML - More information about how HTML works.

3) Adding Color - Add some color to your page.

4) Images - Add graphics to your page. 5) Text Appearance - Using fonts, bold, italics,

etc

Outline (continuation)

6) Moving Text – moving text to scroll up, down, left or right .

7) Lists - Make lists easily. 8) Horizontal Rules - Learn to make

dividers between different sections.

9) Creating Links - Make a link to another page

10) Do's and Don'ts - Learn good habits when designing pages.

HTML Tags

A tag is a command inside of less than and greater than symbols (ex. <html> ). Most tags also have a closing tag that tells the computer when to stop doing the command. Closing tags are written with a / in them. (ex </html> ).

Basic HTML Tags

<html></html>

Defines the text file as being in HTML format. This is found on the beginning and end of each web page.

<head></head>

The heading area of a the page. The space between these two tags is used for special commands that does not have any connection to the actual formatting of the page.

<title></title>

Defines the title displayed at the title bar of the browser window.

<body></body>

Found after the <head> tag and is used to define the area of the file which formats the way the web page is seen.

<b></b>

Makes text Bold

Your First HTML File

To make your first web page, open up Notepad and type in the following:

<html> <head>

<title>My First Page</title> </head> <body>

Regular Text <b>Bold Text</b> </body> </html>

Saving and Running HTML File

Save this file as home.html (not home.txt). Next, open up the file by double clicking on it or typing the location into the location bar on your web browser (ex c:\my documents\outreach\home.html). Note the "My First Page" in the title bar of the screen.

Output of home.html

title

URL or web address

body

Editing HTML

Now, open your first HTML file (home.html) in Notepad again. To put these two phrases on different lines, we need to use the <p> (paragraph command).

<html> <head>

<title>My First Page</title> </head> <body>

<p>Regular Text</p> <p><b>Bold Text</b></p>

</body> </html>

Editing HTML

To see the changes made in the Notepad, save the file again.Open the Internet Explorer then click on the REFRESH icon Refresh icon

Output of home.html

Editing HTML

You can also make the paragraph be centered in the window by using <p align="center"> instead of <p>. Or you can right justify a paragraph by using <p align="right">. What if you do not want a space between the two lines, like using <p> does, you must use the <br> (break) tag.

Editing HTML

Example: <html>

<head> <title>My First Page</title>

</head> <body>

<p align="center">Regular Text<br> <b>Bold Text</b></p> </body> </html>

Output of home.html

Adding Color

Adding colors to web pages is relatively simple. Each color has a six digit code assigned to it with a number sign in front of it. This code is the Hexadecimal (Hex) Triplet value. Instead of using a number system that goes from 0 to 9, Hex uses a system that starts with 0 goes to 9 and then from A-F. This allows one digit to stand for 16 values instead of just ten.

RGB (#RedGreenBlue)

The first two numbers of the code is the amount of red. #FF0000 is red. The second two numbers is the amount of green. #00FF00 is green. The last two numbers represents the amount of blue. #0000FF is blue.

Adding Colors

To change the default colors on the whole page, you need to change an attribute to the <body> tag. The following are some attributes you can have inside the body tag:

bgcolor="..." Sets the background color of the page.

text="...“ Sets the color of the text.link="...“ Color of links.vlink="...“ Visited link color.

Background and Text color

<html><head>

<title>My Colorful Page</title>

</head><body bgcolor="#0000FF"

text="#FFFFFF"><p align="center">

<b>My First Home Page</b></p><br>

</body></html>

An example of a page with blue background and white text.

Images

Images are probably the most fun part of web pages. You can put pictures of anything on your web site, from photographs to animations. When considering what images you should put up on your site, you must think about the size of the graphic. Keep your graphics as small as possible.There are two main types of images on the web: JPG and GIF. These types of formats are highly compressed.

Inserting image in your HTML file

<body><img src=“mickey.gif" width="50"

height="50" border="0" alt="Person" align="left">

</body>

Text Appearance

<FONT size="2" color="#FFFF00" face="arial">...</FONT>

-Changes the size, color, and face (font).

-Size can be a number from 1- 7 or a relative number like +1 (one size bigger than what is already set). Color sets the color of the font using color codes.

-Face is the font used. The font should be a standard font found on most computers like Arial, Times New Roman, Helvetica, Tahoma, or Courier. You can list different fonts for the computer to try until it finds one that works. Example:

<font face="verdana, arial black, arial">

Text Appearance

<BASEFONT size="2" color="#FFFF00" face="arial">

Sets the base (default font size, color, and face for a page). However, often this does not work for all text on a page, for example, text in a table (which we'll cover later).

<BIG>...</BIG> Example Makes text big

Text Appearance

<SMALL>...</SMALL> Example Makes text

small

<B>...</b> Example Bold text

<I>...</I> Example Italicized text

<S>...</S>Example Strikethrough text

Text Appearance

<STRIKE>...</STRIKE>Example Strikethrough text

<U>...</U>Example Underlined text.

Warning: Underlined text is easily confused with a link!

<TT>...</TT>Example Teletype (or monospaced) text

Text Apperance

<H1>...</H1>Example Heading #1<H2>...</H2>Example Heading #2<H3>...</H3>Example Heading #3<H4>...</H4>Example Heading #4

Text Appearance

<H5>...</H5>Example Heading #5<H6>...</H6>Example Heading #6

Moving TextMarquee tag - is a non-standard HTML markup element type which causes text to scroll up, down, left or right. Attributes

Align: Uses the same syntax as the img tag. Behavior: Allows the user to set the behavior of the

marquee to one of three different types: Scroll - DEFAULT. Scrolls the text from right-to-left, and

restarts at the right side of the marquee when it has reached the left side.

Slide - Deprecated Alternate - Text 'bounces' from the left side of the box

to the right side.

Moving text (continuation)

Example:<marquee behavior="alternate">This text will

bounce from left to right</marquee> Bgcolor: Sets the background color of the marquee.

<marquee bgcolor="blue">This marquee's background color will be blue.</marquee> Direction: Sets the direction of the marquee box to

either left-to-right, right-to-left, up-to-down and down-to-up. Later browsers added support for a movie credit style bottom-up and top-down values.

<marquee direction="right">This text will scroll from left to right.</marquee>

Moving Text (continuation)

Height: This sets how tall the marquee should be.

<marquee height="20px">The height of this marquee is twenty pixels.</marquee> Width: This sets how wide the marquee should

be.<marquee width="100px">This marquee is

only a hundred pixels wide!</marquee> Loop: This sets how many times the marquee

should 'Loop' its text.<marquee loop="2">You will only see this

text twice before it stops playing.</marquee>

Moving Text (continuation)

Scrollamount: This is how many pixels the text moves between 'frames', in pixels.

<marquee scrollamount="10">This text will move ten pixels per 'frame'</marquee> Scrolldelay: This sets the amount of time, in

milliseconds, between 'frames'.<marquee scrolldelay="1000">This would be so slow, you'd get no sense of animation.</marquee> <marquee scrolldelay="1">This would be so fast, you couldn't see it!</marquee>

List

HTML provides an easy way to create lists, ordered (numbered) or unordered (not numbered). There are several other different kinds of lists, but we will cover only a couple of them that will be able to be used for most of anybody's needs.

List (continuation)

The ordered list tag is <ol>...</ol>. Inside these tags, you must define the individual list items, <li>...</li>. Here is an example:

<ol> <li>List item #1</li><li>List item #2</li> <li>List item #3</li><li>List item #4</li> </ol>

List (continuation)

This HTML should give you the following result when viewed in a browser:

1.List item #1 2.List item #2 3.List item #3 4.List item #4

List (continuation)

The unordered list tag <ul>...</ul> is very similar, except the end result will have "bullets" instead of numbers.

<ul><li>List item #1</li> <li>List item #2</li> <li>List item #3</li><li>List item #4</li></ul>

List (continuation)

Will give you: List item #1 List item #2 List item #3 List item #4

Horizontal Rules

HTML also has a simple way of making a horizontal rules (or lines) to divide separate parts of a page up. Horizontal Rule <hr> has several attributes which you can define:

Horizontal Rules (continuation)

align="...“Changes the alignment of the rule. It can be left, right, or center.size="...“

The size or height of the rule.

Horizontal Rules (continuation)

width="...“The width of the rule. This can be written as the number of pixels wide (<hr width="400">) or as a percent of the width of the screen (<hr width="75%">).color="...“The color of the rule (this only works with Internet Explorer).

<hr align="center" size="5" width="80%">

Links

Making a link requires have two HTML pages. So make two and name them "page1.html" and "page2.html" (make sure you save them in the same folder). The link tag, <a> is often called an anchor tag, we'll talk more about anchors later.

In "page1.html" put the following someplace between your <body> and </body> tags.

Links (continuation)

Link to <a href="page2.html">page 2</a>. The <a href="page2.html"> means to make a link to page2.html when you click on the information following it. The </a> part of the link tells the browser to stop the link continue with regular text. The link you just made should look something like the following:

Link to page 2.


There are a couple different kinds of links, relative and absolute. Most of the links you make, like the one we just made, will be relative. Relative pathnames point to files based on their locations relative to the current file, while absolute pathnames point to files based on their absolute location on the file system. We could make our link absolute by changing it to


Link to <a href="c:\my docs\page2.html">page 2</a>. This link will work on your computer but when you put it up on a site or try it on another computer and the files are no longer on the c: in the "my docs" folder, it will not work. Here are a few examples of relative links:


href="file.html"file.html is in the current directory or folder.href="folder/file.html"file.html is located in the directory called folder (and the folder directory is located in the current directory)


href="folder/morefiles/file.html"file.html is located in the more files directory, which is located in the current directory.href="../file.html"file.html is located in the directory one level up from the current directory (a.k.a. the "parent" directory)href="../../files/file.htmlfile.html is located two directory levels up, in the directory files.


To link to another page on the web, not one on your site, you simply need to put the address for the site inside href="...". A link to

<a href="http://www.yahoo.com/">

Yahoo! </a>


Or to make a link for someone to send you an email: Click <a href="mailto:[email protected]">here</a> to email me!


You can also use the <a> tag to create an anchor on a page. You can use an anchor link to let a person click on your link to take you to a different place on the page, like the top for example. The next example will have a link up on bottom of the page that will move you to the top of the page when you click on it. (to make this work, you need enough information on your page to fill up at least one screen).


<html><head> <title>Anchors</title> </head><body> <a name="top">

<p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p>Paragraph 5</p> <p>Paragraph 6</p> <p>Paragraph 7</p> <a href="#top">To top</a> </body> </html>

Do’s and Dont’s

1. Think about tags before you use them, some tags only work in some browsers.

2. Look at your pages on different computers with different browsers. You might be surprised at the differences browsers, operating systems, and screen sizes effect your pages!

Do’s and Dont’s (continuation)

3 .Organize you pages for quick scanning

1. Use headings 2. Use lists 3. Make a menu with all the links on one

place4. Important information should stand out! 5. But don't use too much emphasis, people

won't know where to look


4. Make each page be independent. People might jump to a specific page while missing information on the pages between.

5. Check your spelling and grammar. Some free HTML editors have spell check built in! If you use Notepad, make sure you double check your spelling.


6. Group related information. Use tables, graphics, or horizontal rules to split up separate areas on a page.

7. Be consistent. This will create a general "feel" for your site. Use of style sheets can help.

8. Describe links when possible.


9. Don't use too many links in your text, it gets distracting.

10.Think about your links before you make them. Is it useful?

11.Avoid using phrases like: click this link or click here.

12.Don't use too many images, these pages take a long time to load. Also, keep images as small as possible.


13.Use the same image twice when possible, the computer doesn't have to download it each time you use it, it keeps recent images close by.

14.Always use the ALT attribute of <img> in case someone has pictures turned off, or doesn't have time to wait for the page to load.

15.Be cautious with backgrounds and colored text. Everything should be easily readable.


16.Each page should have a link back to your home page in case someone gets "lost."

17.Each page should also have a standard signature on the bottom of each page. This can provide contact or copyright information

18.Don't say "Under Construction." Every web page is always under construction.

Web designing using html

Technology

Transcript of Web designing using html