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

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

Let’s answer a few questions… What is HTML? What is HTML? Hyper Text MarkUp Language Hyper Text MarkUp Language A language to describe the formatting and the layout of content of your web page. A language to describe the formatting and the layout of content of your web page. What is XHTML? What is XHTML? XHTML (Extensible Hypertext Markup Language) XHTML (Extensible Hypertext Markup Language) An extension of HTML An extension of HTML Standards available at World Wide Web Consortium (W3C) Standards available at World Wide Web Consortium (W3C)

Time for your first hands on! Goal: Observe a simple text file. Activity: Create a.txt file, save it with the.htm or.html extension and open it with a web 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. What do you see? 6. Go back to your file and change the address with the school address. Save (CTRL S) 7. Do you see any change in the page? Reload the page. Do you see the changes now?

Web Page Creation Create a document by using a mark-up language Create a document by using a mark-up language HTML or XHTML HTML or XHTML Web Browsers show ASCII text files, i.e. Web Browsers show ASCII text files, i.e. *.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.

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

What do I need to start? Do I need to be online while creating my page? Do I need to be online while creating my page? No, you can be offline No, you can be offline You need to be online only when you publish the page You need to be online only when you publish the page Which Software do I need? Which Software do I need? A text editor A text editor NotePad or NotePad or A Friendly Web Editor is available in old browsers like Netscape and SeaMonkey or A Friendly Web Editor is available in old browsers like Netscape and SeaMonkey or Dreamweaver or Dreamweaver or Any other web editor, i.e. Any other web editor, i.e. FrontPage (not supported anymore) FrontPage (not supported anymore) SeaMonkey, (the successor of Netscape) SeaMonkey, (the successor of Netscape) etc. etc.

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

HTML HTML 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

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” If you prefer a more friendly web editor, use Dreamweaver, Frontpage, Netscape Composer, SeaMonkey Composer, ect. If you prefer a more friendly web editor, use Dreamweaver, Frontpage, Netscape Composer, SeaMonkey Composer, ect.

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 not shown in the browser’s Web page display contains information not shown 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 …… …… Contains the text and the graphics to display Contains the text and the graphics to display

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

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

Time for more Practice TO DO: 1. Create a file with Notepad 2. Insert the tags in the following way <HTML><HEAD><TITLE> My First Web Page </TITLE></HEAD><BODY> This is only a test! </BODY></HTML> 1. Save the file as FirstPage.html 2. Open the page with a Web browser 1. Where does the text in the Title appear? 2. Where does the text in the Body appear?

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

Old free web editors - Instructions for Netscape and SeaMonkey 1. Open Netscape 7.2 (or SeaMonkey) 2. Click on File  New  Composer Page. 3. Click on Source Code (on the bottom of the page) 4. Paste the content of the previous HTML file 5. Save it 6. Click on Browse to Preview your file

Web Page Development Cycle 1. Modify the file 2. Save it 3. Reload the page in your web browser, ex. Click on Browse to reload the file with Seamonkey Click on Browse to reload the file with Seamonkey Click on Live View to see the live page in Dreamweaver Click on Live View to see the live page in Dreamweaver 4. If you desire to change something go back to the file and restart step 1. Keep performing this cycle until your page is ready to be made public.

Formatting Tags: Heading Heading element (do not confuse with HEAD!) are used for a title inside the body of the Web page Heading element (do not confuse with HEAD!) are used for a title inside the body of the Web page 6-sizes 6-sizes very large very large very small very small

Formatting: Heading (cont.) 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.

Attributes Attributes can be added to elements Attributes can be added to elements Attributes go INSIDE the angle brackets! Attributes go INSIDE the angle brackets! A few examples of attributes A few examples of attributes align is used to justify align is used to justify align bgcolor used to indicate the background color bgcolor used to indicate the background color bgcolor border used in tables border used in tables border ect. ect.

Formatting Tags: Align Align is used to justify Align is used to justify Left, right, center Left, right, centerExample: very large very large very small very small

Styles Tags:.... General for Bold text General for Bold text.... General for Italic text General for Italic text … … General for underlined text General for underlined text

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 indentationRemember: 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.

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

Fonts 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.

Fonts 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: Pick a selection:Example The browser will choose the first available. The browser will choose the first available.

Fonts Attributes COLOR=“the color” COLOR=“the color” for Color setting for Color setting SIZE=+2 SIZE=+2 for the change of the current size for the change of the current sizeExample Hello! will display Hello! will display Hello! Hello! Size chart Size 1 = 8pts Size 2 = 10pts Size 3 = 12pts Size 4 = 14pts Size 5 = 18pts Size 6 = 24pts Size 7 = 36pts

Blanks, Comments, etc. Insert blanks lines or extra white space characters in the code Insert blanks lines or extra white space characters in the code Do you see the line or the space on the webpage? Do you see the line or the space on the webpage? &nbsp &nbsp inserts a white space inserts a white space for comments for comments inserts line breaks inserts line breaks draws an horizontal line draws an horizontal line

More next time… More next time…