mis 70451 lab session html l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
MIS 70451 Lab session: HTML PowerPoint Presentation
Download Presentation
MIS 70451 Lab session: HTML

Loading in 2 Seconds...

play fullscreen
1 / 31

MIS 70451 Lab session: HTML - PowerPoint PPT Presentation


  • 195 Views
  • Uploaded on

MIS 70451 Lab session: HTML. June 01, 2007. 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 <B> THIS TEXT WILL BE BOLD </B>.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'MIS 70451 Lab session: HTML' - richard_edik


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html how it works
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

<B> THIS TEXT WILL BE BOLD </B>

slide3

HTML – How It Works

  • Browsers ignore spaces and tabs in your text
  • Example: The following are displayed the same by browsers:

<B> THIS TEXT WILL BE BOLD </B>

<B

> THIS TEXT

WILL BE

BOLD TOO </B>

  • Display in a browser
slide4

HTML – How It Works

  • General format:

<TAG attrib1=valueattrib2=value2….>Text</TAG>

  • Need a beginning tag, e.g. <B>
  • And an ending tag, e.g. </B>
starting a web page
Starting a Web Page
  • All web pages must begin and end with the HTML tag

<HTML>

All your html code goes here

</HTML>

header title
Header & Title
  • Add title bar with HEAD and TITLE tag

<HTML>

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

...

<HTML>

  • Display in a browser
main body
Main Body
  • Create the body of the page with the BODY tag

<HTML>

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

<BODY>

</BODY>

<HTML>

headings and sub headings
Headings and Sub-headings
  • Headers are marked by the H#, where # can be 1-6 for different sizes

<HTML>

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

<BODY>

<H1>The Story of My Life</H1>

<H2>Introduction</H2>

<H3>Where it all began</H3>

</BODY>

<HTML>

  • Display in a browser
alignment for headings paragraphs
Alignment for Headings & Paragraphs
  • Use ALIGN modifier
  • Left, center, and right justify

<H1 ALIGN=LEFT>

Joe’s home page </H1>

<H1 ALIGN=CENTER>

Joe’s home page</H1>

<P ALIGN=RIGHT>

Joe’s home page</P>

</P> ends paragraph. Alignment reverts to default.

text options
Text Options
  • Flow of text can be controlled with paragraph and line breaks
  • <BR> breaks text at the end of a line
  • <P> breaks text at the end of a paragraph and adds a blank line
  • <BR> and <P> do not require a closing tag, but get in the habit of using them.
  • Example:

Hi<BR>there<BR>Joe<BR> =>

“Hi

there

Joe”

justification of text
Justification of Text
  • Left, center, and right justify a paragraph

<P ALIGN=LEFT>imagine a BIG paragraph in here</P>

<P ALIGN=CENTER> imagine a BIG paragraph in here </P>

<P ALIGN=RIGHT> imagine a BIG paragraph in here </P>

  • Note that the </P> is used here to end the paragraph and turn off the alignment
type styles
Type Styles
  • bold <B>…</B>
  • italic <I>…</I>
  • underline <U>…</U>
  • typewriter <TT>…</TT>
  • strikeout <S>…</S>
  • blink <BLINK>…</ BLINK>
  • Display in a browser
choosing font sizes
Choosing Font Sizes
  • Font Size
  • base font size (default=3, range = 1-7; 1=smallest, 7=largest)
    • <BASEFONT SIZE=5>
  • font size
    • <FONT SIZE=3>
  • relative font size
    • <FONT SIZE=+1> increases font size by 1
    • <FONT SIZE=-2> decreases font size by 2
  • Display in a browser
hyper text links
Hyper-Text Links
  • Use <A HREF=“…”> to link to another web page
  • HREF attribute points to the new page
  • text between <A…> and </A> will be highlighted as a link, e.g., “click here for syllabus” below will be highlighted

<A HREF=“http://www.andrew.cmu.edu/user/aagarwa1/”>

click here for My andrew web page

</A> Display in a browser

linking within one document
Linking within One Document
  • To name a section of your document use

<A NAME=“Degree”>MBA – Harvard University</A>

  • 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

<A HREF=“# Degree”>Degree</A>

<A HREF=“#Experience”> Experience </A>

<A NAME=“Degree”>MBA – Harvard University</A>

<A NAME=“Experience”>Wendy’s</A>

displaying graphics
Displaying Graphics
  • Graphics
  • Add graphics with the IMG SRC command
  • To find graphics already on andrew, follow the link here.

<IMG SRC=“mnt.jpg”>

<IMG SRC=“spn.jpg”>

  • Link is:

http://www.andrew.cmu.edu/user/aagarwa1/icons

graphic links
Graphic Links
  • Combine links with graphics so when you click on the graphic it takes you to the linked web page

<AHREF=“http://www.andrew.cmu.edu/user/aagarwa1/>

<IMG SRC=“icons/spn.jpg”>

</A>

  • Display in a browser
graphic sizing and borders
Graphic Sizing and Borders
  • WIDTH and HEIGHT specify graphic size in pixels
  • Warning: browser will stretch picture to fit

<IMG SRC=“MyPicture.gif” WIDTH=150 HEIGHT=200>

  • BORDER specifies width of border in pixels

<IMG SRC=“MyPicture.gif” BORDER=14>

ordered lists
Ordered Lists
  • Ordered lists <OL> can use numbers (1), capital letters (A), lowercase letters (a), or Roman numerals (i)

<OL TYPE=1 START=5>

<LI>first line

<LI>second line ...

</OL>

unordered lists
Unordered Lists
  • Unordered lists <UL> can use a disc, circle, or square

<UL TYPE=circle>

<LI>first line ...

</UL>

  • All lists use <LI> to specify a new line
  • Display in a browser
tables
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
tables22
Tables
  • Define Table

<TABLE>

…define rows and columns here

</TABLE>

  • Some Table Attributes
    • Alignment

<TABLE ALIGN=LEFT|RIGHT|CENTER>

    • Border

<TABLE BORDER=1></TABLE>

    • Desired Width

<TABLE WIDTH=##> (specify ## in pixels)

<TABLE WIDTH=##%> (## is percentage of page)

table rows and columns
Table Rows and Columns
  • Define Table Rows

<TR> … </TR> (must appear within table)

    • Some Row Alignment options

<TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

  • Define Table Cells (i.e., columns)

<TD> … </TD> (must appear within table rows)

  • Some Cell Alignment options

<TR ALIGN=LEFT|RIGHT|CENTER

VALIGN =TOP|MIDDLE|BOTTOM>

table example
Table Example

<TABLE ALIGN=CENTER WIDTH=25%>

<TR ALIGN=LEFT>

<TD> R1C1 </TD>

<TD> R2C2 </TD>

</TR>

<TR ALIGN=LEFT>

<TD> R2C1 </TD>

<TD> R2C2 </TD>

</TR>

</TABLE>

  • Display in a browser
four steps to publishing personal web pages on andrew
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
create www folder on andrew
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.eduUserid or User Name: Your Andrew UserIDPassword: Your Andrew Password
    • Type the following command

mkdir www <Enter>

fs sa www system:anyuser rl <Enter>

rm www/.kwpublish <Enter>

  • Type the following command

exit <Enter>

create some html content
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
transfer your html files to andrew
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
publish your html files
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)

need more help
Need More Help?

Detailed instructions at:

http://www.cmu.edu/computing/documentation/web_courseorg/course_org.html

tools for building html
Tools for Building HTML
  • Commerical Tools
    • Adobe
    • Microsoft
  • Freeware