html - examples be sure to check speaker notes for additional information!
TRANSCRIPT
HTML - Examples
Be sure to check speaker notes for additional information!
Web1.htmlWeb1.html
<HTML><HEAD><TITLE>First Web page</TITLE></HEAD><BODY><H1>Internet User</H1><H2>CIS44</H2>This class meets on Friday from 4:00 until 6:45. The students have a widevariety of experience and background and are clearly being overworked - hopefully they are learning a lot too!<BR><BR><P>The steps involved in seeing your Web page are:<UL><LI>Create the Web page and save it with an HTML extension.<LI>Go to Netscape and use file/open page<LI>Using choose file - find file name you saved and open it<LI><H3>You will see before you a magnificent Web page!</H3> </UL></P></BODY></HTML>
For many HTML commands there is the open in <…> and the close in </…>
Commands like <BR> do not have a close.
Remember, to see the HTML code for a page go to View/Page Source or Source depending on the browser.
The connecting arrows show the open and close of many of the tags.
Note that there can be a close for LI but it is frequently not used.
Web1.html - as seenWeb1.html - as seen
<BODY><H1>Internet User</H1><H2>CIS44</H2>
This class meets on Friday from 4:00 until 6:45. The students have a widevariety of experience and background and are clearly being overworked - hopefully they are learning a lot too!<BR><BR><P>The steps involved in seeing your Web page are:
<UL><LI>Create the Web page and save it with an HTML extension.<LI>Go to Netscape and use file/open page<LI>Using choose file - find file name you saved and open it<LI><H3>You will see before you a magnificent Web page!</H3> </UL></P>
<HTML><HEAD><TITLE>A Web Page</TITLE></HEAD><BODY><H1><B><I><CENTER>NOTICE THE VARIETY OF CONDITIONS PLACED WITH THIS HEADER</I></B></H1><H2>THIS ONE IS BORING IN COMPARISON</H2><H3>Still centered <H4>Now the centering though</H3></CENTER>is over</H4><H5>One more line</H5><H6>And one more line</H6><P>This is an example of a new paragraph. <P>This is an example of a new paragraph with multiple lines.<BR>To have multiple lines, need a few more.<BR>Still not multiple - really!<BR>Well okay - that is multiple!<BR><P><UL>Here is an example of an unordered list<LI>First item in the list<LI>Second item in the list<LI>Third item in the list<LI>Enough already!!!</UL><P>When I make changes to the page I am working on I save it in Notepad and then I simply do a RELOAD to bring up the new version in Netscape.</BODY></HTML>
Web2.htmlWeb2.html
UL is an unordered list - the elements within the list are designated by LI.
The contents of TITLE appear in the blue line at the top of the screen (at the left),
Web2.html - as seenWeb2.html - as seen
<UL>Here is an example of an unordered list<LI>First item in the list<LI>Second item in the list<LI>Third item in the list<LI>Enough already!!!</UL>
Note that when text is written after the <UL>,the text is indented.
<HTML><HEAD><TITLE>Another Web Page</TITLE></HEAD><BODY BGCOLOR=#FFFFC2 TEXT=#000BBB><H1><CENTER>YOU CAN CENTER USING CENTER</CENTER></H1><H2>This is not centered</H2><H1 ALIGN=CENTER>You can center using the align clause as well.</H1><H2 ALIGN=RIGHT>You can also right align using the align clause.</H2>This Web Page has a non white background because the background color was set toFFFFC2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000BBB for the text and got a blue coloring.<BR>For the list of different codes and colors, go to my Web site and look for a listing under colors. NOTE: The # in front of the color code is not required.<P><FONT SIZE=+5>This gives me a large font</FONT><BR><FONT SIZE=3 COLOR=RED>This gives me an <BLINK><U>OBNOXIOUS BLINK</U></BLINK></FONT><P>Note that for standard colors, I can assign the color red to the font - I did this when I was also assigning a color. Notice that I underlined the obnoxious blink - read thisword carefully - <B>I hate to correct things that blink at me!!!!</B></BODY></HTML>
Web3.htmlWeb3.html
Colors for the background and page text are set within the <BODY…> command.
2 ways to center a header: <CENTER> as a tag and ALIGN=CENTER as a parameter of another tag.
The FONT tag is shown using the SIZE and COLOR attributes. The + is optional with the SIZE and the SIZE range should be 1 to 7. The COLOR can be done using default words for standard colors.
Web3.html - as seenWeb3.html - as seen
<HTML><HEAD><TITLE>Search Engine - In depth study </TITLE></HEAD><BODY><A NAME="top"></A><H1><CENTER>Search Engine Comparison</CENTER></H1>Each person will be working with a different search engine. The engine should be totally analyzed and the following questions should be answered. Additional interesting information should be provided (in case I missed something). If something is not applicable to your search engine or is not supported by your search engine that is a legitimate answer. <B>Please list the sources you used at the bottom of the report.</B>Be prepared to hand in report converted to HTML on disk as well as on paper (done with a word processor).<BR><BR>
<A NAME="questions"></A><UL><LI>When and how was the search engine started? What was the concept or goal?<LI>What is the size of the index (approximately)?<LI>What is the frequency and methodology for updating the index (people, submissions, crawler, combination etc.)?<LI>Does the search engine utilize other search engines as its primary source or as a secondary source? In other words, does it do its own search or use other engine(s) - always, initially, after no success etc.<LI>Does the search engine include a directory or a subject tree?<LI>If there is a directory, what is the relationship to the search engine - does it cover the same sites, how is it updated etc.
Web4.html (1st part)Web4.html (1st part)
Set an entry point for a link that can be established in the code.
<LI>What part of the document is indexed: whole, headers, first paragraphs etc.<LI>How is ranking done when the results are presented?<LI>Does it tell the rating/ranking place when it presents?<LI>How is presenting done (list, summaries, user choice etc.)?<LI>What is the default handling (and/or) if you simply enter several words?<LI>In a search, is there any way to weigh words?<LI>Is there a query by example or "more like this" feature?<LI>Is there a way to refine the search?<LI>Is there a feature that lets the user narrow the search by date?<LI>Does the search engine have a narrow the search component that lets you use only these results for the next search?<LI>Does the search let you type a "plain English type of question" to do the search?<LI>Does the search engine use concepts or fuzzy kinds of searches? If so is there a way to do the search that will not use the fuzzy components?<LI>Does the search engine have both simple and advanced searches?<LI>Are there limits on what can be done in the simple search and what can be done in the advanced search? Briefly outline.
<A NAME="features"></A><LI>For the questions below - if the feature is handled specify how and show your own example:<UL><LI>Phrases<LI>Wildcard<LI>AND search<LI>OR search
Web4.html (2nd part)Web4.html (2nd part)
Named entry point that can be used as a point of entry.
<LI>NOT search<LI>Proximity search<LI>Nested AND/OR search<LI>Case- sensitivity (how is case handled)<LI>Is there field searching (URL, titles etc.) - if so specify what fields.<LI>Did you find other features that you like that are not covered in this set of specifications? If so, briefly explain them.</UL></UL>
<A HREF="#questions">Go to the questions</A><BR><A HREF="#features">Go to the feature list</A><BR><A HREF="#top">Back to the top</A></BODY></HTML>
Web4.html (3rd part)Web4.html (3rd part)
Links to set entry point. The entry points are set using NAME.
Web4.html - as seenWeb4.html - as seen
Shows the links on the web page.
<HTML><HEAD><TITLE>Another example</TITLE></HEAD><BODY>Four score and seven years ago, our fathers broughtforth on this continent a new nation, conceived inliberty and dedicated to the proposition that all menare created equal - I think I got the quote right, but...<BR>Now I am going to use the BLOCKQUOTE to indent this quote:<BLOCKQUOTE>Four score and seven years ago, our fathers broughtforth on this continent a new nation, conceived inliberty and dedicated to the proposition that all menare created equal.</BLOCKQUOTE>Look at the difference in the way these look!<BR>Now how about a quote within a quote type setup.<BLOCKQUOTE>Four score and seven years ago, our fathers broughtforth on this continent a new nation, conceived inliberty and dedicated to the proposition that all menare created equal.<BLOCKQUOTE>Four score and seven years ago, our fathers broughtforth on this continent a new nation, conceived inliberty and dedicated to the proposition that all menare created equal.</BLOCKQUOTE></BLOCKQUOTE>Note that the BLOCKQUOTE not only indents it also spaces around the quote.<BR>
Web5.html (1st part)Web5.html (1st part)
The BLOCKQUOTE is not close prior to issuing a second BLOCKQUOTE. This will result in double indenting
<H2>Now lets look at an ordered list</H2><OL><LI>This is the first thing.<LI>This is the second thing.<LI>This is the third thing.</OL><H3>Here is another, but this time instead of numbering 1, 2, 3 I am goingA, B, C</H3><OL TYPE=A><LI>This is the first thing.<LI>This is the second thing.<LI>This is the third thing.</OL>
Web5.html (2nd part)Web5.html (2nd part)
<OL> creates an ordered list.
<UL> creates an unordered list.
In this example the OL creates an ordered list with the list elements following TYPE=A which designates capital letters for the list elements. You will see A, B, C.
<H3>Now let's look at an outline type setup - I have options of A, a, I, i, 1:</H3><OL TYPE=I><LI>First<LI>Second<OL TYPE=A><LI>First under Second<LI>Second under Second<LI>Third under Second<OL TYPE=1><LI>First under Third under Second<LI>Second under Third under Second</OL><LI>Forth under Second<LI>Fifth under Second</OL><LI>Third</OL><H2>Here is another version of the unordered list</H2><UL><LI>This is the first thing.<LI>This is the second thing.<LI>This is the third thing.</UL>
Web5.html (3rd part)Web5.html (3rd part)
The ordered list was not closed before another was started - this means the second will be a sub-list to the first. Essentially I have a nested list with one list nested within the other.
The difference in TYPE settings changes appropriately from Roman numerals, to capital letters, to numbers as I create an outline.
<H3>Here is an unordered list but using a square for a bullet - the optionsare DISC, CIRCLE, SQUARE</H3><UL TYPE=SQUARE><LI>This is the first thing.<LI>This is the second thing.<LI>This is the third thing.</UL><H3>I can also do a list without the LI, but then I will not have bullets.</H3><UL>This is the first thing<BR>This is the second thing<BR>This is the third thing<BR></UL>Notice that both the unordered list and the ordered list, indent things andalso space before and after.<BR>Now lets try this - I am simply surrounding a sentence with UL and close UL:<UL>This is an indented sentence.</UL><UL><UL>This is indented twice.</UL></UL></BODY></HTML>
Web5.html (4th part)Web5.html (4th part)
Unordered list with square bullets. Test it to see if it works in all browsers and all versions.
Web5.html - 1st screen as seenWeb5.html - 1st screen as seen
<OL><LI>This is the first thing.<LI>This is the second thing.<LI>This is the third thing.</OL>
<OL TYPE=A><LI>This is the first thing.<LI>This is the second thing.<LI>This is the third thing.</OL>
Web5.html -2nd screen as seenWeb5.html -2nd screen as seen <OL TYPE=I><LI>First<LI>Second<OL TYPE=A><LI>First under Second<LI>Second under Second<LI>Third under Second<OL TYPE=1><LI>First under Third under Second<LI>Second under Third under Second</OL><LI>Forth under Second<LI>Fifth under Second</OL><LI>Third</OL>
<UL TYPE=SQUARE><LI>This is the first thing.<LI>This is the second thing.<LI>This is the third thing.</UL>
<UL>This is the first thing<BR>This is the second thing<BR>This is the third thing<BR></UL>
<UL>This is an indented sentence.</UL><UL><UL>This is indented twice.</UL></UL>