MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard

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: Link Title Relative: Link Title

Add Navigation MIS 425 Welcome to Web Application Development Absolute: Binghamton University Relative: View Syllabus

Add Navigation Open Notepad Open lecture_1_e1.html Add Absolute navigation Absolute: Binghamton University Add Relative Navigation Relative: View Syllabus 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 s are more popular for formatting now Tables are mostly used now for formatting data Tags -- Defines the table area -- Defines a new row -- Defines a new column

Create a table MIS Syllabus Date Topic Assignment 09/11/2012 Panes, HTML navigation, colors, styles Assignment 1 Given 09/13/2012 Introduction to XHTML, CSS1 Questions on Assignment 1

Create a table Open lecture_1_e1.html in Notepad Save as lecture_2_e2.html Remove text below “MIS 425” and the Add the table Date Topic Assignment 09/11/2012 Panes, HTML navigation, colors, styles Assignment 1 Given 09/13/2012 Introduction to XHTML, CSS1 Questions on Assignment 1 Save file

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 denotes an Ordered List denotes an Unordered List denotes a List Item

Bulleted List Example MIS 425 Welcome to Web Application Development Absolute: Binghamton University Relative: View Syllabus

Add Bullets Open lecture_2_e1.html in notepad Add the around the links Add the around the each link Remove the line break Absolute: Binghamton University Relative: View Syllabus 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 Images are different:

Sizing Table MIS Syllabus Date Topic Assignment 09/11/2012 Panes, HTML navigation, colors, styles Assignment 1 Given 09/13/2012 Introduction to XHTML, CSS1 Questions on Assignment 1

Add Sizing Open lecture_2_e2.html in notepad Insert the styles in the Save the file Load in Browser Change the width of the browser screen, notice the table also changes widths (relative).

Image Resize MIS 425 Welcome to Web Application Development Absolute: Binghamton University Relative: View Syllabus

Add Sizing Open lecture_2_e1.html in notepad Insert the styles in the 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 tag. However this is more cumbersome usually than using styles. Text Content Use styles to change a font color in a bullet Cell Content

Bulleted List Example MIS 425 Welcome to Web Application Development Absolute: Binghamton University Relative: View Syllabus

Add Styles Open lecture_2_e1.html in notepad Insert the styles in the s Absolute: Binghamton University Relative: View Syllabus Save the file

Page Design

4 pane Template HEADER LEFT NAV CONTENT FOOTER

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