190 likes | 283 Views
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!)
E N D
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
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
The browser displays a page: <HEAD> <TITLE> </HEAD> <BODY> <H1> </H1> CS 105 Fall 2005
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
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
<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
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
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
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
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
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"'> </span></span><![endif]>A list item.</p> CS 105 Fall 2005
Common problem with MS Word Web Pages Unnecessary space Paragraphs, Tabbing, Colors Bullets are a mess CS 105 Fall 2005
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
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
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
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] > < ![endif]><o:p></o:p></span></p> • 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
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
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
Fun Elements <hr> Horizontal Rule (line) Adding color to fonts, lines, etc: Link to the various possibilities CS 105 Fall 2005