MIS 425 Lecture 1 – HTML Basics and Web Page Design Instructor: Martin Neuhard

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

Introduction to HTML

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

Simple HTML Page Example MIS 425 Welcome to Web Application Development

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

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

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

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

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

Image Example Example MIS 425 Welcome to Web Application Development

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

Organizing a Web Page

4 Pane Design Header Left Hand Navigation Content Footer

Page Design

Header Company Logo Additional internal navigation Site Search Contact information Login/Logout (for secure site)

Left Navigation Internal Navigation Topic Specific Categorized Consistent within a topic

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

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

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

Question & Answer