mis 425 lecture 1 – html basics and web page design instructor: martin neuhard...
TRANSCRIPT
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<html><body>
<h1>MIS 425</h1>
<p>Welcome to Web Application Development</p>
</body></html>
HTML Tags
• The text between <html> and </html> tells the browser this is an HTML file
• The text between <body> and </body> is the content that will show on the screen
• “MIS 425” between <h1> and </h1> is displayed in a larger bold font as a heading
• “Welcome to Web Application Development” between <p> and </p> is displayed as normal body text
Steps to build this example
• Open notepad (or any other text editor)<html><body>
<h1>MIS 425</h1>
<p>Welcome to Web Application Development</p>
</body></html>
• 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>
• HTML tags normally come in pairs like <strong> and </strong>
• 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)
<img src=“”>
Image Example
Example<html><body>
<h1>MIS 425</h1>
<p>Welcome to Web Application Development</p>
<img src="http://www.binghamton.edu/spotlight/images/mobile-app.jpg">
</body></html>
Adding Image to our Example
• Open our mis_lecture_1_1.html<html><body>
<h1>MIS 425</h1>
<p>Welcome to Web Application Development</p>
<img src="http://www.binghamton.edu/spotlight/images/mobile-app.jpg">
</body></html>
• 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)
http://www.hp.com
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• Email 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