1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~ ------ ~

1

Creating a Web Page

An introduction to Hypertext Markup Language (HTML)

<html>~~~~~<b> ~~~~ </b>------<p>~~~~~</html>

2

What is HTML?

• HTML is a collection of codes, embedded in a text file and understood by a Web browser like Netscape or Internet Explorer, to produce special effects when displaying a web page. For example, text may appear in boldface

or in a larger font size to make it more attractive. A background color may be added to complement a graphical

image on your web page.

3

What is needed?

• A text editor like Pico or Notepad to create a file named index.htm or welcome.htm

• A Web browser like Internet Explorer or Netscape

• A basic understanding of handful of HTML codes

4

The Procedure• Start a Text editor or an HTML editor

• Create a file named index.htm or welcome.htm

• Transfer your web page to the computer that is a web server (i.e. your unixs.cis.pitt.edu computer). You should have a the html directory already created in your public directory within your unixs account).

• Start Internet Explorer or Netscape, enter your URL:

http://www.pitt.edu/~your.user.name.goes.here

5

Creating a Web Page with Notepad

<html><head><title>This is a Test</title></head></html>

Createindex.htm or welcome.htm

6

Browser View

7

HTML Codes

• <html> marks beginning of document ...</html> marks end of document

• <head> marks beginning of heading ...</head> marks end of heading

8

Codes ...

• Place text in the title bar of a window

<title> marks beginning of title text</title> marks end of title

9

Creating ...

<html><head><title>This is a Test</title></head>

<body><h1><center>CS134: Web Site Design & Development </center></h1></body></html>

Add this text to welcome.htm

save, then view this file with a web browser (refresh the browser)

10

Browser View

11

Codes ...

• <body> marks beginning of the body ...</body> marks end of the body

• <h1> Level 1 heading ...</h1>

Levels possible: 1, 2, 3, 4, 5, 6

12

Heading Levels – SampleHeading.htm

14

Codes ...

• <center> Center text text</center>

• <b> Bold text text</b>

• <i> Italics text</i>

15

Loading backgrounds – Image

<html><head><title>This is a Test</title></head>

<body background = “wood.jpg”><h1><center>CS134: Web Site Design & Development</center></h1></body></html> Add this text to

welcome.htmnote: wood.gif must be stored in the same directory as welcome.htm

save,then view this file/refresh the browser

17

Adding a background - Color• The syntax (image)

<body background=“file.name” >

places the graphical image in the file file.name in the background.

• The syntax (color)

<body bgcolor=“#A” text=“#B” > where A and B are six-digit.hexadecimal.numbers changes

the background color and text color.Colors: Hex colors, or solid GRB -- green, red, blue, lightgreen,

lightred, lightblue, yellow, lightyellow….

18

Some Hexadecimal Colors• White

• Off White

• Taupe

• Tan

• Light Blue

• Light Green

• Yellow

• Light Gray

• Warm Gray

• Black

– #FFFFFF

– #FAFAEC

– #F0D9C1

– #DFC3A6

– #C2D0E8

– #BEE3C2

– #E7EBB4

– #E1E5E2

– #CDC0C0

– #000000

19

Creating ...

<html><head><title>This is a Test</title></head><body background = “wood.jpg”><h1><center>CS134: Web Site Design & Development</center></h1><H4>

For information about this course, speak to the departmental secretary in room 6135 Sennott Square Building.</H4> <P>Better yet, call <u>624-8490</u>!</body></html>

20

Browser View

21

Codes ...

• <p> Begin a new paragraph

• <br> Line break

• <u> Underline text text</u>

• <pre> Preformatted text text</pre>

22

Loading an Image ...<html><head><title>CS134: Sample Loading Inamges</title></head><body background = “wood.jpg”><h1><center>CS110:Computers and Networks</center></h1>

<center><img src=“cslogo.gif” align=middle></center><p> <H4>For information about this course, speak to the departmental secretary in room 320 Alumni Hall.<P></H4>Better yet, call <u>624-8490</u>!</body></html>

23

Adding an image to the page

• The syntax

<img src=“file.name” align=“direction”>

places the image in file.name on the page and aligns it with respect to the direction = top or middle or

bottom of a line.

25

Hyperlinks: Creating a link to another page

• Hypertext is special underlined text that links one web page to another when clicked with a mouse. The syntax

<a href=“file.to.link.to”> text </a>

where text is the underlined text that is clicked to see the linked page.

26

1. Hyperlink to a local file<html><head><title>CS134: Loading images</title></head><body background = “wood.jpg”><h1><center>CS134: Web Site Design & Development</center></h1><center><img src=“cslogo.gif” align=middle></center><p>For information about this course, speak to the departmental secretary in room 320 Alumni Hall.<P>Better yet, call <u>624-8490</u>!

<p><a href=“courseSpr05.htm”><b>CS134 Topical Outline</B></a></body></html>

28

Linked Document

29

2. Hyperlink to a remote site

• <a href=“remote-url”> text </a>

<A href=http://www.cs.pitt.edu/~khalifa/134.htm> CS134 Home Page

</A>

<p>

• <A href=http://www.cnn.com> CNN </A>

31

3. Hyperlinks: mail-to: link

• The syntax

<A HREF “mailto:your.email.address”> text </A>

gives the reader of your web page the opportunity to email you.

32

Creating mailto link... <html><head><title>CS134: sample loading a background image </title></head><body background = "wood.jpg"><h1><center> CS134: Web Site Design & Development </center></h1> <center><img src="cslogo.gif" align=middle> </center><p> <H4>For information about this course, speak to the departmental secretary in room 6135

Sennott Square Building.</H4><P>Better yet, call <u>624-8490</u>! or

<A HREF=“mailto:[email protected]”> Send mail to me </A><p><a href="cs134Topics.htm"> <b>CS134 Topical Outline</B></a> <p><A href=http://www.cs.pitt.edu/~khalifa/134.htm> CS134 Home Page </A> <p><A href=http://www.cnn.com> CNN </A> <p></body></html>

33

Browser View

34

Advanced Text Editing Topics

• Sizing text

• Horizontal lines

• Bullets

35

Sizing Text and Bullets

http://www.pitt.edu/~cg251251/JASON.html

36

Horizontal Lines

37

View Source

change font size

38

View Source ...

horizontal lines

39

View Source ...

bullets

40

Forms

• Text boxesContain one line of text, for example a name, an

address.

• Radio buttonsMake one choice out of many.

• Check boxesMake as many choices as you like.

• Text boxesEnter a response in a designated box.

41

Forms ...

• MenusChoosing items from a menu.

• Submitting a formOnce the information is entered, it will be

submitted to the form’s creator.

• Resetting a formClearing the form for the next visitor.

42

text boxes

radio buttons

check boxes

text box

submit form

menus

1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~ ------ ~

Documents

Transcript of 1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~ ------ ~

1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~~~~~ ~~~~ ------ ~~~~~

Documents

Transcript of 1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~~~~~ ~~~~ ------ ~~~~~

1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~ ------ ~

Transcript of 1 Creating a Web Page An introduction to Hypertext Markup Language (HTML) ~ ------ ~