1 / 31

MIS 70451 Lab session: HTML

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>.

richard_edik
Download Presentation

MIS 70451 Lab session: HTML

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <B> THIS TEXT WILL BE BOLD </B>

  3. 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

  4. 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>

  5. Starting a Web Page • All web pages must begin and end with the HTML tag <HTML> All your html code goes here … </HTML>

  6. Header & Title • Add title bar with HEAD and TITLE tag <HTML> <HEAD> <TITLE>My Home Page</TITLE> </HEAD> ... <HTML> • Display in a browser

  7. Main Body • Create the body of the page with the BODY tag <HTML> <HEAD> <TITLE>My Home Page</TITLE> </HEAD> <BODY> … </BODY> <HTML>

  8. 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

  9. 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.

  10. 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”

  11. 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

  12. Type Styles • bold <B>…</B> • italic <I>…</I> • underline <U>…</U> • typewriter <TT>…</TT> • strikeout <S>…</S> • blink <BLINK>…</ BLINK> • Display in a browser

  13. 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

  14. 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

  15. 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>

  16. 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

  17. 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

  18. 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>

  19. 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>

  20. 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

  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 <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)

  23. 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>

  24. 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

  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.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>

  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_courseorg/course_org.html

  31. Tools for Building HTML • Commerical Tools • Adobe • Microsoft • Freeware

More Related