MIS 425 - Harvey
advertisement
MIS 425
Lecture 2 – HTML Navigation, Colors,
tables and Styles
Instructor: Martin Neuhard (martin_neuhard@yahoo.com)
Lecture Agenda
• Lecture 1 Recap
• Content Elements
– Navigation
– Tables
– Bulleted lists
• Styles
–
–
–
–
Sizing Content Elements
Text Color
Text Sizing
Text font types
• 4 Pane Template
• Requirements
• Assignment 1
Lecture 1 Recap
• Simple HTML
• Embedding Images
• Organizing a web page
– Form
– Fit
– Function
Navigation
• HTML Navigation consists mainly of hyper links
• Hyperlinks allow the user to reach another site or
other areas within a site with 1 click
Example:
Absolute:
<a href=“http://www.binghamton.edu”> Link Title</a>
Relative:
<a href=“{filename}”>Link Title</a>
Add Navigation
<html>
<body>
<h1>MIS 425</h1>
<p>Welcome to Web Application Development</p>
Absolute:<a
href=“http://www.binghamton.edu”>Binghamton
University</a>
<br>
Relative:<a href=“lecture_2_e2.html”>View Syllabus</a>
</body>
</html>
Add Navigation
• Open Notepad
• Open lecture_1_e1.html
• Add Absolute navigation
Absolute:<a href=“http://www.binghamton.edu”>Binghamton
University</a>
• Add Relative Navigation
Relative:<a href=“lecture_2_e2.html”>View Syllabus</a>
• Save File as “lecture_2_e1.html”
Tables
• Tables are a formatting technique used in HTML
• Tables can be used to format content items
(although <div>s are more popular for formatting
now
• Tables are mostly used now for formatting data
Tags
• <table> -- Defines the table area
• <tr> -- Defines a new row
• <td> -- Defines a new column
Create a table
<html>
<h1>MIS 425 -- Syllabus</h1>
<table border=“1”>
<tr>
<th>Date</th>
<th>Topic</th>
<th>Assignment</th>
</tr>
<tr>
<td>09/11/2012</td>
<td>Panes, HTML navigation, colors, styles</td>
<td>Assignment 1 Given</td>
</tr>
<tr>
<td>09/13/2012</td>
<td>Introduction to XHTML, CSS1</td>
<td>Questions on Assignment 1</td>
</tr>
</table>
</body>
</html>
Create a table
•
•
•
•
Open lecture_1_e1.html in Notepad
Save as lecture_2_e2.html
Remove text below “MIS 425” and the </body>
Add the table
<table border=“1”>
<tr>
</tr>
<tr>
</tr>
<tr>
</table>
</tr>
• Save file
<th>Date</th>
<th>Topic</th>
<th>Assignment</th>
<td>09/11/2012</td>
<td>Panes, HTML navigation, colors, styles</td>
<td>Assignment 1 Given</td>
<td>09/13/2012</td>
<td>Introduction to XHTML, CSS1</td>
<td>Questions on Assignment 1</td>
Bulleted lists
•
•
•
•
•
•
•
Bulleted lists can be used for listing content
Bulleted lists can be ordered or unordered lists
Ordered lists use numbers
Unordered lists use bullets
<ol></ol> denotes an Ordered List
<ul></ul> denotes an Unordered List
<li></li> denotes a List Item
Bulleted List Example
<html>
<body>
<h1>MIS 425</h1>
<p>Welcome to Web Application Development</p>
<ul>
<li>Absolute: <a href="http://www.binghamton.edu">Binghamton University</a></li>
<li>Relative: <a href=“lecture_2_e2d.html">View Syllabus</a></li>
</ul>
</body>
</html>
Add Bullets
•
•
•
•
Open lecture_2_e1.html in notepad
Add the <ul></ul> around the links
Add the <li></li> around the each link
Remove the line break <li>
<ul>
<li>Absolute: <a href="http://www.binghamton.edu">Binghamton
University</a></li>
<li>Relative: <a href="syllabus.html">View Syllabus</a></li>
</ul>
• Save the file
Styles
CSS basics
• CSS stands for Cascading Style Sheets
• It allows you to create a single file that will
dictate the look and feel of your entire site
• It also allows for layout control.
• Inline styles are styles that are added to
individual tags.
style=“{style_name}: {parameters};”
Sizing Content Elements
• Styles can control the size of an Element,
elements include tables and divs, among others
• Sizing can be relative or absolute (i.e.) percentage
of screen width, or pixels
• Sizing is very important to screen layout and
design
<table style=“width:50%”>
• Images are different:
<img src=“{path}” width=“100px” height=“100px”>
Sizing Table
<html>
<body>
<h1>MIS 425 -- Syllabus</h1>
<table border=“1” style=“width:50%”>
<tr>
<th>Date</th>
<th>Topic</th>
<th>Assignment</th>
</tr>
<tr>
<td>09/11/2012</td>
<td>Panes, HTML navigation, colors, styles</td>
<td>Assignment 1 Given</td>
</tr>
<tr>
<td>09/13/2012</td>
<td>Introduction to XHTML, CSS1</td>
<td>Questions on Assignment 1</td>
</tr>
</table>
</body>
</html>
Add Sizing
• Open lecture_2_e2.html in notepad
• Insert the styles in the <table>
<table border=“1” style=“width:50%”>
• Save the file
• Load in Browser
• Change the width of the browser screen,
notice the table also changes widths (relative).
Image Resize
<html>
<body>
<h1>MIS 425</h1>
<p>Welcome to Web Application Development</p>
<ul>
<li style=“color: red; text-size:20; font-weight: bold;”> Absolute: <a
href="http://www.binghamton.edu">Binghamton University</a></li>
<li style=“font-family: courier new;”>Relative: <a href=“lecture_2_e2.html">View
Syllabus</a></li>
</ul>
<img width=“400px” src="http://www.binghamton.edu/spotlight/images/mobileapp.jpg">
</body>
</html>
Add Sizing
• Open lecture_2_e1.html in notepad
• Insert the styles in the <table>
<img width=“400px”
src="http://www.binghamton.edu/spotlight/images/mobile-app.jpg">
• Save the file
• Load in Browser
• Change the width of the browser screen, notice
the image does not change sizes (absolute).
Text Color/Text Size/Style
• You can change text color/Size with a <font>
tag. However this is more cumbersome
usually than using styles.
<font color=“red” size=“10”>Text
Content</font>
• Use styles to change a font color in a bullet
<li style=“color: red; text-size:10; font-weight:
bold;”>Cell Content</table>
Bulleted List Example
<html>
<body>
<h1>MIS 425</h1>
<p>Welcome to Web Application Development</p>
<ul>
<li style=“color: red; text-size:20; font-weight: bold;”> Absolute: <a
href="http://www.binghamton.edu">Binghamton University</a></li>
<li style=“font-family: courier new;”>Relative: <a href=“lecture_2_e2.html">View
Syllabus</a></li>
</ul>
</body>
</html>
Add Styles
• Open lecture_2_e1.html in notepad
• Insert the styles in the <li>s
<ul>
<li style=“color: red; font-size:20; font-weight: bold;”>Absolute: <a
href="http://www.binghamton.edu">Binghamton University</a></li>
<li style="font-style: italic; font-family: 'Courier New'"> Relative: <a
href=“lecture_2_e2.html">View Syllabus</a></li>
</ul>
• Save the file
Page Design
4 pane Template
<div id="page_container" style="padding: 0px; height:518px; width:1024px;
border:1px black solid;">
<div id="header" style="height:100px; width:1024px; border:1px black solid;">
<h1>HEADER</h1>
</div>
<div id="left_nav" style="float:left; height:318px; width:150px; border:1px black
solid;">
<h1>LEFT NAV</h1>
</div>
<div id="content" style="float:right; height:318px; width:872px; border:1px black
solid;">
<h1>CONTENT</h1>
</div>
<div id="footer" style="height:100px; width:1024px; border:1px black solid;">
<h1>FOOTER</h1>
</div>
</div>
Requirements
Functional Requirements
• Requirements are what developers receive to
code to
• Functional requirements are found in the form
of Shall statements
Example: The website shall contain 3 pages.
• Requirements usually go from Business
Requirements to Functional Requirements
• Test Cases are build to test the functional
requirements
Assignment 1
• Build a website
• Choose your own topic, examples, music,
travel, sports team, flowers, animals etc…
• Follow the requirements
• Scoring based solely on meeting requirements
Question & Answer
