1 / 19

CS 105 HTML and more

CS 105 HTML and more. How can you "fix" machine-generated web pages? Analyzing a link Be sure to read your HTML book!. Course Guide p. 66. Useful Tips. We will show you how to fix XML when it doesn't do what you want (and that happens all the time!)

talia
Download Presentation

CS 105 HTML and more

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. CS 105 HTML and more • How can you "fix" machine-generated web pages? • Analyzing a link • Be sure to read your HTML book! Course Guide p. 66 CS 105 Fall 2005

  2. Useful Tips We will show you how to fix XML when it doesn't do what you want (and that happens all the time!) The trick is to know a little HTML in order to find problems CS 105 Fall 2005

  3. The browser displays a page: <HEAD> <TITLE> </HEAD> <BODY> <H1> </H1> CS 105 Fall 2005

  4. Elements (tags) • Elements are the structures that describe parts of an HTML document. For example, the P element represents a paragraph while the EM element gives emphasized content. • An element has three parts: start tag, content, and an end tag. • <b> Look at me! </b> • <b>Look at me!</b> CS 105 Fall 2005

  5. More about elements (tags) • Element names are always case-insensitive, so <em>, <eM>, and <EM> are all the same. • You can get away without an end element sometimes. • For example, most of the time this will work: • <p> Whatever is in the paragraph. • <p> Next paragraph. CS 105 Fall 2005

  6. <p> versus <br> • <p> Denotes that a new paragraph is beginning, and there may be a blank line inserted above and below each paragraph. The closing </p> is optional. • <br> The BR element forces a break in the current line of text: An addictive website is at<br> http://news.google.com/news/en/us/mainlite.html <br> You will like it!<br> CS 105 Fall 2005

  7. Understanding the Source Code Raw XHTML <head> <title> MPS</title> </head> <center> <h1>MPs</h1> </center> <p><b>All MPs for this course will be posted here. </b></p> CS 105 Fall 2005

  8. Attributes An element's attributes define various properties for the element. For example, theIMGelement takes aSRCattribute to provide the location of the image and anALTattribute to give alternate text for those not loading images: <IMG SRC="wdglogo.gif" ALT="Web Design Group"> Course Guide p. 67 CS 105 Fall 2005

  9. List Items (B-9 in your book) <UL> Tells the computer it will be a bulleted list <li> Means it is a list element <li> Another list element </UL> End of list <OL> Would have been a numbered list <li> Item # 1 <li> Item # 2 </OL> CS 105 Fall 2005

  10. See the code raw: <HTML> <HEAD> <TITLE>The document title</TITLE> </HEAD> <BODY> <H1>Main heading</H1> <P>A paragraph.</P> <P>Another paragraph.</P> <UL> <LI>A list item.</LI> <LI>Another list item.</LI> </UL> </BODY> </HTML> CS 105 Fall 2005

  11. After MS Word has edited the same code. An excerpt: <p>A paragraph.</p> <p>Another paragraph.</p> <p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto; margin-left:.75in;text-indent:-.25in;mso-list:l0 level1 lfo2;tab-stops:list .75in'><![if !supportLists]><span style='font-family:"Courier New";mso-bidi-font-family:"Times New Roman"'>o<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><![endif]>A list item.</p> CS 105 Fall 2005

  12. Common problem with MS Word Web Pages Unnecessary space Paragraphs, Tabbing, Colors Bullets are a mess CS 105 Fall 2005

  13. Look for a change in font color: <ul style='margin-top:0in' type=disc> <li class=MsoNormal style='mso-list:l2 level1 lfo9;tab-stops:list .5in'><span style='font-size:12.0pt;mso-bidi-font-size:10.0pt;font-family:Arial'>Could you explain Variables and how properties are variables.<u3:p></u3:p> <o:p></o:p></span></li> <li class=MsoNormal style='color:#FF6600;mso-list:l2 level1 lfo9;tab-stops: CS 105 Fall 2005

  14. Soft return versus hard return. • How does it look when MSWord does it? If there isn't a space between a paragraph, go into the code and add <p> If there is too much space, delete unnecessary code. Course Guide p. 69 CS 105 Fall 2005

  15. Sick links • Some of you have already experienced these! • Common problem is that you create a document on your computer and link to other pages, but when you load your document on Netfiles, you cannot find your page or image! CS 105 Fall 2005

  16. Look for lots of formatting instructions but nothing to display • <p class=MsoNormal><span style='font-size:12.0pt;mso-bidi-font-size:10.0pt;font-family:Arial'><![if !supportEmptyParas] >&nbsp;< ![endif]><o:p></o:p></span></p> • &nbsp; is merely one tap on a space bar, and not all browsers treat it the same. • Delete all that code, and you have eliminated an unnecessary space CS 105 Fall 2005

  17. Troubleshooting links that MSWord has muddled: • <img width=283 height=212 src="./reviewmt1_files/image001.jpg" v:shapes="_x0000_i1025"><![endif]><o:p></o:p></b></p> • What is the source for the image? • <img width=283 height=212 src= "./reviewmt1_files/image001.jpg" • How can you fix it? CS 105 Fall 2005

  18. Put the .jpg image in the same folder as your web page, then make the link local: • <img width=283 height=212 src="image001.jpg"> • Is it too small? Get rid of the sizing! • <img src="image001.jpg"> CS 105 Fall 2005

  19. Fun Elements <hr> Horizontal Rule (line) Adding color to fonts, lines, etc: Link to the various possibilities CS 105 Fall 2005

More Related