1. MIS 425 Lecture 1 – HTML Basics and Web Page Design Instructor: Martin Neuhard (martin_neuhard@yahoo.com)

2. Lecture Agenda Intro to HTML – What is HTML – Simple HTML Page – Build the Example – Adding an Image – Build the image example Organizing a Web Page – 4 Pane Organization – Header – Left Navigation – Content – Footer

3. Introduction to HTML

4. What is HTML Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages ----- HTML is a language for creating web sites. Hyper Text Markup Language HTML HTML is not a programming language, it is a markup language that is interpreted by a browser A markup language is a set of tags The purpose of the tags are to format page content Other Markup languages exist, such as XML, SGML and other standards

5. Simple HTML Page Example MIS 425 Welcome to Web Application Development

6. HTML Tags The text between and tells the browser this is an HTML file The text between and is the content that will show on the screen “MIS 425” between and is displayed in a larger bold font as a heading “Welcome to Web Application Development” between and is displayed as normal body text

7. Steps to build this example Open notepad (or any other text editor) MIS 425 Welcome to Web Application Development Save the file with a mis_lecture_1_1.html extension to the Documents folder

8. Open HTML Page Open Windows Explorer Navigate to the Document directory Locate the mis_lecture_1_1.html Double click to open It will open in the standard browser To open it through a browser – File  Open  Browse  Navigate to the file and open

9. HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name

10. Adding an Image Images are important to website, look and feel is important (form) Images should be high resolution, small in size (KBs)

11. Image Example Example MIS 425 Welcome to Web Application Development

12. Adding Image to our Example Open our mis_lecture_1_1.html MIS 425 Welcome to Web Application Development Save as mis_lecture_1_2.html View the file in the browser

13. Organizing a Web Page

14. 4 Pane Design Header Left Hand Navigation Content Footer

15. Page Design

16. Header Company Logo Additional internal navigation Site Search Contact information Login/Logout (for secure site) http://www.hp.com

17. Left Navigation Internal Navigation Topic Specific Categorized Consistent within a topic

18. Content The information you want to portray to your users All types of media. Tables, graphs, text, images, videos, audio. Where you want the user to focus

19. Footer Disclaimers Last updates Contact information links Addresses Connections to social media

20. Send In your examples Zip your example files Email them to as an attachment to martin_neuhard@yahoo.com martin_neuhard@yahoo.com Please locate a website that follow the 4 pane configuration, please place the link in twitter #MIS425_BU (Example)

21. Question & Answer