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

2. 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. 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. 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. 5 Creating a Web Page with Notepad This is a Test Create index.htm or welcome.htm

6. 6 Browser View

7. 7 HTML Codes marks beginning of document... marks end of document marks beginning of heading... marks end of heading

8. 8 Codes... Place text in the title bar of a window marks beginning of title text marks end of title

9. 9 Creating... This is a Test CS134: Web Site Design & Development Add this text to welcome.htm save, then view this file with a web browser (refresh the browser)

10. 10 Browser View

11. 11 Codes... marks beginning of the body... marks end of the body Level 1 heading... Levels possible: 1, 2, 3, 4, 5, 6

12. 12 Heading Levels – SampleHeading.htm

13. 13

14. 14 Codes... Center text text Bold text text Italics text

15. 15 Loading backgrounds – Image This is a Test CS134: Web Site Design & Development Add this text to welcome.htm note: wood.gif must be stored in the same directory as welcome.htm save, then view this file/refresh the browser

16. 16

17. 17 Adding a background - Color The syntax (image) places the graphical image in the file file.name in the background. The syntax (color) 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. 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. 19 Creating... This is a Test CS134: Web Site Design & Development For information about this course, speak to the departmental secretary in room 6135 Sennott Square Building. Better yet, call 624-8490 !

20. 20 Browser View

21. 21 Codes... Begin a new paragraph Line break Underline text text Preformatted text text

22. 22 Loading an Image... CS134: Sample Loading Inamges CS110:Computers and Networks For information about this course, speak to the departmental secretary in room 320 Alumni Hall. Better yet, call 624-8490 !

23. 23 Adding an image to the page The syntax 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.

24. 24

25. 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 text where text is the underlined text that is clicked to see the linked page.

26. 26 1. Hyperlink to a local file CS134: Loading images CS134: Web Site Design & Development For information about this course, speak to the departmental secretary in room 320 Alumni Hall. Better yet, call 624-8490 ! CS134 Topical Outline

27. 27

28. 28 Linked Document

29. 29 2. Hyperlink to a remote site text CS134 Home Page CNN

30. 30

31. 31 3. Hyperlinks: mail-to: link The syntax text gives the reader of your web page the opportunity to email you.

32. 32 Creating mailto link... CS134: sample loading a background image CS134: Web Site Design & Development For information about this course, speak to the departmental secretary in room 6135 Sennott Square Building. Better yet, call 624-8490 ! or Send mail to me CS134 Topical Outline CS134 Home Page CNN

33. 33 Browser View

34. 34 Advanced Text Editing Topics Sizing text Horizontal lines Bullets

35. 35 Sizing Text and Bullets http://www.pitt.edu/~cg251251/JASON.html

36. 36 Horizontal Lines

37. 37 View Source change font size

38. 38 View Source... horizontal lines

39. 39 View Source... bullets

40. 40 Forms Text boxes Contain one line of text, for example a name, an address. Radio buttons Make one choice out of many. Check boxes Make as many choices as you like. Text boxes Enter a response in a designated box.

41. 41 Forms... Menus Choosing items from a menu. Submitting a form Once the information is entered, it will be submitted to the form’s creator. Resetting a form Clearing the form for the next visitor.

42. 42 text boxes radio buttons check boxes text box submit form menus