MIS 70451 Lab session: HTML

1
MIS 70451Lab session HTML

• June 01, 2007

2
HTML How It Works

• HTML is a markup language
• Pre-dates word processors such as MSWord
• Explains page layout to a web browser
• How? Through the used of directives called TAGS.
• Example make text appear as bold
• ltBgt THIS TEXT WILL BE BOLD lt/Bgt

3
HTML How It Works

• Browsers ignore spaces and tabs in your text
• Example The following are displayed the same by
  browsers
• ltBgt THIS TEXT WILL BE BOLD lt/Bgt
• ltB
• gt THIS TEXT
• WILL BE
• BOLD TOO lt/Bgt
• Display in a browser

4
HTML How It Works

• General format
• ltTAG attrib1value attrib2value2.gtTextlt/TAGgt
• Need a beginning tag, e.g. ltBgt
• And an ending tag, e.g. lt/Bgt

5
Starting a Web Page

• All web pages must begin and end with the HTML
  tag
• ltHTMLgt
• All your html code goes here
• lt/HTMLgt

6
Header Title

• Add title bar with HEAD and TITLE tag
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMy Home Pagelt/TITLEgt
• lt/HEADgt
• ...
• ltHTMLgt
• Display in a browser

7
Main Body

• Create the body of the page with the BODY tag
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMy Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• ltHTMLgt

8
Headings and Sub-headings

• Headers are marked by the H, where can be 1-6
  for different sizes
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMy Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtThe Story of My Lifelt/H1gt
• ltH2gtIntroductionlt/H2gt
• ltH3gtWhere it all beganlt/H3gt
• lt/BODYgt
• ltHTMLgt
• Display in a browser

9
Alignment for Headings Paragraphs

• Use ALIGN modifier
• Left, center, and right justify
• ltH1 ALIGNLEFTgt
• Joes home page lt/H1gt
• ltH1 ALIGNCENTERgt
• Joes home pagelt/H1gt
• ltP ALIGNRIGHTgt
• Joes home pagelt/Pgt

lt/Pgt ends paragraph. Alignment reverts to
default.
10
Text Options

• Flow of text can be controlled with paragraph and
  line breaks
• ltBRgt breaks text at the end of a line
• ltPgt breaks text at the end of a paragraph and
  adds a blank line
• ltBRgt and ltPgt do not require a closing tag, but
  get in the habit of using them.
• Example
• HiltBRgtthereltBRgtJoeltBRgt gt
• Hi
• there
• Joe

11
Justification of Text

• Left, center, and right justify a paragraph
• ltP ALIGNLEFTgtimagine a BIG paragraph in herelt/Pgt
• ltP ALIGNCENTERgt imagine a BIG paragraph in here
  lt/Pgt
• ltP ALIGNRIGHTgt imagine a BIG paragraph in here
  lt/Pgt
• Note that the lt/Pgt is used here to end the
  paragraph and turn off the alignment

12
Type Styles

• bold ltBgtlt/Bgt
• italic ltIgtlt/Igt
• underline ltUgtlt/Ugt
• typewriter ltTTgtlt/TTgt
• strikeout ltSgtlt/Sgt
• blink ltBLINKgtlt/ BLINKgt
• Display in a browser

13
Choosing Font Sizes

• Font Size
• base font size (default3, range 1-7
  1smallest, 7largest)
• ltBASEFONT SIZE5gt
• font size
• ltFONT SIZE3gt
• relative font size
• ltFONT SIZE1gt increases font size by 1
• ltFONT SIZE-2gt decreases font size by 2
• Display in a browser

14
Hyper-Text Links

• Use ltA HREFgt to link to another web page
• HREF attribute points to the new page
• text between ltAgt and lt/Agt will be highlighted as
  a link, e.g., click here for syllabus below
  will be highlighted
• ltA HREFhttp//www.andrew.cmu.edu/user/aagarwa1/
  gt
• click here for My andrew web page
• lt/Agt Display in a browser

15
Linking within One Document

• To name a section of your document use
• ltA NAMEDegreegtMBA Harvard Universitylt/Agt
• NAME serves as an anchor within your HTML
  document where you can jump when a link is
  selected
• An HREF can refer to a named portion of a web
  page by putting a in front of the name
• ltA HREF DegreegtDegreelt/Agt
• ltA HREFExperiencegt Experience lt/Agt
• ltA NAMEDegreegtMBA Harvard Universitylt/Agt
• ltA NAMEExperiencegtWendyslt/Agt

16
Displaying Graphics

• Graphics
• Add graphics with the IMG SRC command
• To find graphics already on andrew, follow the
  link here.
• ltIMG SRCmnt.jpggt
• ltIMG SRCspn.jpggt
• Link is
• http//www.andrew.cmu.edu/user/aagarwa1/icons

17
Graphic Links

• Combine links with graphics so when you click on
  the graphic it takes you to the linked web page
• ltAHREFhttp//www.andrew.cmu.edu/user/aagarwa1/gt
• ltIMG SRCicons/spn.jpggt
• lt/Agt
• Display in a browser

18
Graphic Sizing and Borders

• WIDTH and HEIGHT specify graphic size in pixels
• Warning browser will stretch picture to fit
• ltIMG SRCMyPicture.gif WIDTH150 HEIGHT200gt
• BORDER specifies width of border in pixels
• ltIMG SRCMyPicture.gif BORDER14gt

19
Ordered Lists

• Ordered lists ltOLgt can use numbers (1), capital
  letters (A), lowercase letters (a), or Roman
  numerals (i)
• ltOL TYPE1 START5gt
• ltLIgtfirst line
• ltLIgtsecond line ...
• lt/OLgt

20
Unordered Lists

• Unordered lists ltULgt can use a disc, circle, or
  square
• ltUL TYPEcirclegt
• ltLIgtfirst line ...
• lt/ULgt
• All lists use ltLIgt to specify a new line
• Display in a browser

21
Tables

• Tables are easy way to create neatly aligned
  columns for presentation
• Steps to creating a table
• Define the Table
• Define the Rows
• Define the Cells and cell content

22
Tables

• Define Table
• ltTABLEgt
• define rows and columns here
• lt/TABLEgt
• Some Table Attributes
• Alignment
• ltTABLE ALIGNLEFTRIGHTCENTERgt
• Border
• ltTABLE BORDER1gtlt/TABLEgt
• Desired Width
• ltTABLE WIDTHgt (specify in pixels) 
• ltTABLE WIDTHgt ( is
  percentage of page)

23
Table Rows and Columns

• Define Table Rows
• ltTRgt lt/TRgt (must appear within table)
• Some Row Alignment options
• ltTR ALIGNLEFTRIGHTCENTERMIDDLEBOTTOMgt
• Define Table Cells (i.e., columns)
• ltTDgt lt/TDgt (must appear within table rows)
• Some Cell Alignment options
• ltTR ALIGNLEFTRIGHTCENTER
• VALIGN TOPMIDDLEBOTTOMgt

24
Table Example

• ltTABLE ALIGNCENTER WIDTH25gt
• ltTR ALIGNLEFTgt
• ltTDgt R1C1 lt/TDgt
• ltTDgt R2C2 lt/TDgt
• lt/TRgt
• ltTR ALIGNLEFTgt
• ltTDgt R2C1 lt/TDgt
• ltTDgt R2C2 lt/TDgt
• lt/TRgt
• lt/TABLEgt
• Display in a browser

25
Four Steps to Publishing Personal Web Pages on
Andrew

• Create WWW folder on Andrew
• Create HTML content
• Transfer HTML content to Andrew
• Publish your HTML files

26
Create WWW Folder on Andrew

• Launch Secure Shell Client from the SSH Secure
  Shell or Communications folder under Programs
• Use the following settings to establish your
  telnet connection Host unix.andrew.cmu.eduUse
  rid or User Name Your Andrew UserIDPassword
  Your Andrew Password
• Type the following command
• mkdir www ltEntergt
• fs sa www systemanyuser rl ltEntergt
• rm www/.kwpublish ltEntergt
• Type the following command
• exit ltEntergt

27
Create Some HTML Content

• Launch MS Word.
• Type Hello World
• Choose Save as Web Page option under File menu
• Type index as file name and save in My
  Documents folder

28
Transfer your HTML Files to Andrew

• Launch Secure File Transfer Client from the SSH
  Secure Shell or Communications folder under
  Programs
• Connect to unix.andrew.cmu.edu
• Locate and select the My Documents folder in
  upper left panel
• Locate and select the WWW directory in the lower
  left panel
• Drag the index.html file from the upper right
  panel to the lower right panel

29
Publish your HTML Files

• Launch Internet Explorer
• Go To
• http//www.andrew.cmu.edu/server/publish.html
• Type your andrew userid in the field at bottom of
  the page
• Click Publish
• Should see Success!
• View your web page at
• http//www.andrew.cmu.edu/user/aagarwa1
• (Substitute your andrew id for aagarwa1)

30
Need More Help?

• Detailed instructions at
• http//www.cmu.edu/computing/documentation/web_co
  urseorg/course_org.html

31
Tools for Building HTML

• Commerical Tools
• Adobe
• Microsoft
• Freeware