1. Web Page Creation Part I ST: Introduction to Web Interface Design Prof. Angela Guercio Spring 2007

2. Objective In this lecture, you will learn: What HTML is What HTML is How to create an HTML file How to create an HTML file The HTML syntax The HTML syntax more syntax in next lecture more syntax in next lecture You will experiment HTML and apply the concepts hands on. You will experiment HTML and apply the concepts hands on.

3. Web Page Creation Create a document by using a mark-up language Create a document by using a mark-up language HTML HTML Web Browsers show ASCII text files Web Browsers show ASCII text files *.txt = text file *.txt = text file *.html or *.htm = HTML files *.html or *.htm = HTML files Software is available to facilitate the Web page creation. Software is available to facilitate the Web page creation.

4. Web Browser Web browser display Web pages Web browser display Web pages make any effort to display on the best way make any effort to display on the best way for laptop with smaller screen text is rearranged for laptop with smaller screen text is rearranged formatting from text files is not preserved (e.g. break lines are gone!). formatting from text files is not preserved (e.g. break lines are gone!). Web browsers dynamically rework the files to fill the display window as best as it can Web browsers dynamically rework the files to fill the display window as best as it can Web browsers rework each page for each visitor Web browsers rework each page for each visitor

5. Web Page: Basic Since Web browsers read text files we can get a text file and display it the Web browser. Since Web browsers read text files we can get a text file and display it the Web browser. A Web server is not needed during page design A Web server is not needed during page design you can be offline you can be offline It is needed only at publication time It is needed only at publication time

6. Web Page: TO DO Practice: Rename a.txt file with the.htm or.html extension and open it with a browser. 1. Open Notepad (Start  Program  Accessory…) 2. Now close the dialog box, go to File, Edit with Notepad and continue editing 3. In the file write your name and postal address in the same way you would do on an envelope. 4. In File Name save as “Myaddress.html” in any folder you like 5. Go to the folder where you saved your file and double click on the icon of your file. It will be open with your default browser. 6. Go back to your file and change the address with the school address. Save (CTRL S) 7. Go back to the browser: do you see any change in the page? Reload the page. Do you see the changes now?

7. HTML HyperText Markup Language is a language that gives the author control over the web browser HyperText Markup Language is a language that gives the author control over the web browser set of HTML elements or tags set of HTML elements or tags insert a HTML element to add to a content or a style to a Web page insert a HTML element to add to a content or a style to a Web page Instructions are issued through a series of TAGS - which are shown in Instructions are issued through a series of TAGS - which are shown in Basic HTML Elements Basic HTML Elements HTML, HEAD, TITLE, BODY HTML, HEAD, TITLE, BODY

8. Editing HTML files Use Notepad (Windows) or SimpleText (Mac) for now. Use Notepad (Windows) or SimpleText (Mac) for now. do not use Word do not use Word Word file saved as HTML invoke a HTML Converter which is not what you want when you are writing HTML files! Word file saved as HTML invoke a HTML Converter which is not what you want when you are writing HTML files! or save it “Text Only with Line Breaks” or save it “Text Only with Line Breaks” Later I will let you use other editors (ex. Frontpage, Netscape Ed, ect) Later I will let you use other editors (ex. Frontpage, Netscape Ed, ect)

9. TAGS …….. …….. They can be nested inside other tag pairs They can be nested inside other tag pairs contains everything the browser need to know about the Web Page contains everything the browser need to know about the Web Page contains information that is not displayed in the browser’s Web page display contains information that is not displayed in the browser’s Web page display contains the title element that appears in the browser window’s title bar contains the title element that appears in the browser window’s title bar text and graphics inside the body element are displayed in the browser’s Web page display text and graphics inside the body element are displayed in the browser’s Web page display

10. General TAG format: General TAG format: … … The tag begins formatting. The closing tag ends formatting. Observe: Closing tags are preceded by the / symbol Content to be formatted. TAGS Syntax

11. Tags details Tags are NOT case sensitive: and are the same Tags are NOT case sensitive: and are the same MOST tags start with the command and end with a slash(/) MOST tags start with the command and end with a slash(/) ie. ……. ie. ……. However there are a few tags that do not require to be terminated However there are a few tags that do not require to be terminated Break – new line Break – new line Horizontal Row – next line/page Horizontal Row – next line/page Spacing the content inside a TAG is important, spacing outside of the TAG’s is NOT important Spacing the content inside a TAG is important, spacing outside of the TAG’s is NOT important

12. Practice TO DO: 1. Create a file with Notepad 2. Insert the tags in the following way <HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML> 1. Fill the TITLE and the BODY 2. See the result with a Web browser 1. Where does the text in the Title appear? 2. Where does the text in the Body appear?

13. Web Page Development Cycle 1. Save your file with the Save command 2. Reload the new file 3. Review the new Web page with you Web browser 4. Revise you page as needed Repeat 1-4

14. Formatting: Heading Heading element (do not confuse with HEAD!) give you a title inside the body of the Web page Heading element (do not confuse with HEAD!) give you a title inside the body of the Web page 6-sizes 6-sizes very large very large very small very small The alternative to heading is the tag and The alternative to heading is the tag and More convenient More convenient You can add more than one or in line. You can add more than one or in line. You will be limited by the display ability of the browser. You will be limited by the display ability of the browser.

15. Formatting: Align Attributes can be added to elements Attributes can be added to elements Attributes go INSIDE the angle brackets! Attributes go INSIDE the angle brackets! Align is used to justify Align is used to justify very large very large very small very small

16. More tags: Paragraph … … breaks the text into blocks of text set off by blank lines breaks the text into blocks of text set off by blank lines no indentation no indentation the is optional the is optional Title and paragraphs add clarity to the Web page and make it easier to read. Title and paragraphs add clarity to the Web page and make it easier to read.

17. Tags: Lists Bulleted lists Bulleted lists.. unordered list.. unordered list Enumerated list Enumerated list.. ordered list.. ordered list Each item in the list is marked with tags.. Each item in the list is marked with tags..,, and are optional but use it anyway,, and are optional but use it anyway Ordered lists of books book 1 book 2 1. book 1 2. book 2 Unordered lists of books book 1 book 2 book 1 book 2

18. Fonts and Styles Different computers have different fonts. Different computers have different fonts. What font will the Web browser will choose if your font is not available? What font will the Web browser will choose if your font is not available? Tag: Tag: Attribute FACE Attribute FACE Sans serif fonts: Arial, Geneva, Helvetica Sans serif fonts: Arial, Geneva, Helvetica Serif fonts: Times New Romans, Times Serif fonts: Times New Romans, Times Monospaced fonts: Courier New, Courier Monospaced fonts: Courier New, Courier Pick a selection: The browser will choose the first available. The browser will choose the first available.

19. Fonts and Styles Tags:.... for Bold for Bold.... like Bold but more general like Bold but more general.... for Italic for Italic.... like Italic but more general like Italic but more general underlined underlined

20. Fonts and Styles Attributes: COLOR=“the color” for Color setting COLOR=“the color” for Color setting SIZE=+2 for the change of the current size SIZE=+2 for the change of the current size insert your text here will set the size to 6 insert your text here will set the size to 6 Size chart Size 1 = 8pts Size 2 = 10pts Size 3 = 12pts Size 4 = 14pts Size 5 = 18pts Size 6 = 24pts Size 7 = 36pts

21. Blanks, Comments, etc. Try to insert blanks lines or extra white space characters Try to insert blanks lines or extra white space characters What happens? What happens? To insert whitespaces? To insert whitespaces? &nbsp inserts a white space &nbsp inserts a white space for comments for comments inserts line breaks inserts line breaks draws one horizontal separpation line draws one horizontal separpation line

22. Image Files GIF (Graphic Interchange Format) GIF (Graphic Interchange Format) extension.gif extension.gif JPEG (Joint Photographic Expert Group) JPEG (Joint Photographic Expert Group) extension.jpg extension.jpg Scanner create TIFF (Tagged Image File Format) file Scanner create TIFF (Tagged Image File Format) file conversion in GIF or JPEG is done in software conversion in GIF or JPEG is done in software image in GIF is smaller but still good image in GIF is smaller but still good

23. IMG tag IMG creates an inline image IMG creates an inline image i.e. treated like a single alphanumeric character which has a larger size than a regular character i.e. treated like a single alphanumeric character which has a larger size than a regular character SRC specifies the image file and the physical location SRC specifies the image file and the physical location ALT specifies the size of the image ALT specifies the size of the image Use it all the time because: Use it all the time because: Lynx user (an old text-based browser) will recognize what they are missing if ALT is specified Lynx user (an old text-based browser) will recognize what they are missing if ALT is specified Text-to-voice browser for visually impaired, get a great amount of information from it. Text-to-voice browser for visually impaired, get a great amount of information from it.

24. Aligning and resizing images Include ALIGN attribute inside the IMG tag Include ALIGN attribute inside the IMG tag Center Center Top Top Bottom Bottom Middle Middle WIDTH and HEIGHT are used to resize WIDTH and HEIGHT are used to resize resize but preserve original scale resize but preserve original scale resizing does not reduce memory or bandwidth requirements resizing does not reduce memory or bandwidth requirements BORDER is used to put a frame around a picture BORDER is used to put a frame around a picture 0 no border 0 no border

25. Graphics Insert a background color Insert a background color 16,777,216 colors 16,777,216 colors or 216 Web-safe colors or 216 Web-safe colors colors are in hexadecimal notation (base 16) colors are in hexadecimal notation (base 16) insert the attribute BGCOLOR=“#FFFFFF” in the BODY tag for white background insert the attribute BGCOLOR=“#FFFFFF” in the BODY tag for white background pattern background uses the attribute BACKGROUND followed by the file you want to use. pattern background uses the attribute BACKGROUND followed by the file you want to use.

26. Patterned background do not use a pattern that distracts the reader from the page do not use a pattern that distracts the reader from the page use bold headings and oversized fonts use bold headings and oversized fonts

27. Design Issues Do not overload your page Do not overload your page avoid to put images on top of a patterned background avoid to put images on top of a patterned background images, background and special effects should not fight each other. images, background and special effects should not fight each other. if you use many pictures use a solid color for the background if you use many pictures use a solid color for the background

28. HW: to start in class Write a html file that produces this page (see next slide) as output. Write a html file that produces this page (see next slide) as output. The instructions about the Format, the Style, the Font, and the Color are in the page. The instructions about the Format, the Style, the Font, and the Color are in the page. When completed, e-mail the file to your teacher (aguercio@kent.edu ) When completed, e-mail the file to your teacher (aguercio@kent.edu )aguercio@kent.edu Deadline: Before next class. Deadline: Before next class.