Presentation on theme: "XHTML Basics Web pages used to be written exclusively in html"— Presentation transcript:
1XHTML Basics Web pages used to be written exclusively in html Xhtml is a variation that includes the ability to write code in xml notation (xml = extensible markup language)While we will go far beyond XHTML in our web design this semester, we have to start somewhere, so we look at the basics of html/xhtml hereYour web pages will contain a minimum of basic tags and as you expand your capabilities, you will include various html formatting commandsAn html command will appear in < > marksMost html commands have start commands and stop commands that surround the text (or other items) that the command(s) will impactFor instance, to bold face text, you use <b> and end the text with </b> as in: isn’t this <b>exciting</b>?Notice that the ? will not be bold faced
2Defining A Page A web page will The web page will start with the line be stored as ascii text and usually have an extension of .htm or .htmlThe web page will start with the line<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/html1/DTD/xhtml1-transitional.dtd”>DTD – document type definitionTransitional XHTML is the least restrictive version of XHTML and permits cascaded style sheets as well as traditional formattingVersion 1.0 is the most common version in use (1.1 is available but not widely supported by browsers at this time)And be followed with the line<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>en is the code for English meaning that browsers should attempt to display text in English if multiple languages are present in the fileYou will probably follow these lines with a meta tag of the form<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />NOTE: the quote marks above should be “ “ but powerpoint insists on converting them, if you happen to see the curvy forms of “ “ in any of these documents, assume that they should be the “ “ straight quote marks.The meta tag is used to describe information that will be used by other software than the browser. In this case, the tag explains that this page contains html in an ascii text file using the UTF-8 (ascii) character set.To save a file as ascii text you will either want to use a text editor program or a word processor. If you use a word processor though, you must make sure that you save the file as text. Since you may forget to do this extra step, it is best to use a text editor.In Windows, the text editor is called Notepad. On a Mac, the text editor is called TextEdit (or if you are in a Unix shell, you can use vi or emacs). In Linux, you canuse vi or emacs if you are knowledgeable about these editors, or use the Text Editor.In older versions of Notepad, when you save a file, it automatically saves as .txt whereas we want to save our files with the .html extension even if you type the .html extension yourself (for instance, if you save the file as foo.html, it will be stored as foo.html.txt). To avoid this, when you select Save As and specify the name including .html, go to “Save as Type” and change it from Text (.txt) to All Files. This should not be necessary if you are using Notepad in Windows 7 but may be necessary in older versions of Windows.
3Basic Page TagsAll of our web pages will be defined within tags <html xmlns …>…</html>the … will include a header and a body<head>…</head> is our headerThe header can include a title, <title>…</title> as well as style sheet definitions (we will explore this in chapter 3)<body>…</body> is our bodyThe body will contain all of our text, most or all of our formatting commands, links and graphics and other information<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns= "http://www.w3.org/1999/xhtml" lang= "en" xml:lang="en"><head><title>Simple Example Page</title><meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /></head><body><p>Here is a simple example web page</p><p>It doesn’t say much</p></body></html>line spacing and indentation are strictly optional, howeverby indenting appropriately, it can make the page easier to read
4Viewing a Web PageYou can create your web page in Notepad or MS Word (but if you use Word, remember to save it as a text file)Make sure you add .html as an extension (or it may default to .txt instead)In your web browser, select Open File… and select the file from wherever you saved itAll html tags should take affect and you will see the text in the document formatted as you specifiedIn our previous simple example, the only formatting are the two paragraphs although you should also see in the title bar of your web browser “Simple Example Page”Can your page be viewed over the Internet?No, because the page is only located locally on your computer’s disk drive, not on a web serverIn fact, you will probably notice that rather than displaying a URL in the location window, it says file:///C:/... or something like that to indicate that this is a local fileWe will consider later how to upload your file to a web serverYou should have already uploaded a web page to the studenthome server in chapter 1 activities.Do chapter 2 exercise 1 at this point. Notice in this exercise, you are editing a file on your hard disk. When you load it into the web browser, the URL is to your local hard disk, not to a web server. You need to upload the file to a web server to make it accessible over the Internet.Do chapter 2 exercise 2 at this point.
5Some Basic Tags<h#> -- heading where # is a number from 1 (largest) to 6 (smallest), ends with </h#><p> and </p> are used to encapsulate a paragraphIf you want a line break, use <br /> at the beginning of the new line (or end of the previous line)Notice here, there is no associated closing tag, that is why you see the / in the taga single or standalone tag will look like this <tagtype /><blockquote>…</blockquote> is used to indent textOtherwise it is difficult to have adequate spacing if you want your text to appear indentedWe look at blockquote examples in the next slide<!...> is a comment tagYou can place whatever you want after the !, the web browser will ignore the tagComment tags can be useful in a similar way that comments are used in programs – to help other humans understand something, or as a placeholder for something you intend to add laterAt this point, see the example headings.html from the chapter 2 sample pages list. Do chapter 2 exercise 3.
6Block Quote ExampleThe blockquote tag is used so that text is indented underneath previous textYou might want to use this to change the emphasis of textIt is also useful if you want to insert a quotation on a separate lineIt can also be used for lists without having bullets or numbersBelow are two examplesin both examples, <br /> tags are inserted after each line to separate each linethese lists can also be created using list tags (covered next)The code for the block quote examples is in the pageBring up the page source for this file and you can see that spacing is immaterial. The <blockquote> tag provides the indentation and the <br /> provides the line breaks or line separation.
7Lists There are three forms of lists available in html The basic form is the ordered or unordered list where you specify the type by using <ol>…</ol> or <ul>…</ul>each list item is indicated using <li>…</li> inside the <ol>…</ol> or <ul>…</ul> tagsThe type of list graphic can be controlled by adding a type attribute in the <ol> or <ul> command as in <ol type=“A”>Types for ordered lists are“1” (numerals, the default)“A” (upper case letters)“a” (lower case letters)“I” (upper case Roman numerals)“i” (lower case Roman numerals)Types for unordered lists are “disc” (default), “square”, “circle”The other form of list begins the list with <dl>…</dl>Inside of this, for each list item, use <dt>…</dt>For each datum in the list item, use <dd>…</dd>Note that the textbook covers the <dl><dt><dd> list first. Since these are more complicated than using <ul> and <ol>, I have switched their order.
8Examples To the left are two examples of lists The first list uses dl, dt, ddSample list using dl, dt, dd<dl><dt>List item 1</dt><dd>Datum 1</dd><dd>Datum 2</dd><dd>Datum 3</dd><dt>List item 2</dt></dl>The second uses <ol> and <li>Sample list using ol<ol type="I"><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ol>Sample list using dl, dt, ddList item 1Datum 1Datum 2Datum 3List item 2Sample list using olI. List item 1II. List item 2III. List item 3IV. List item 4The ordered/unordered lists are far easier, aside form specifying the type, the <ul> or <ol> tags just start and stop the list, and then each list item is listing separately
9Nested ListsLists can be nested by placing new <ul> or <ol> tags inside of listsA nested list provides different levels of indentationJust remember to close each list appropriately – for every <ul> you need a </ul> for instanceList types can differ within nestings – for instance, you can have an outer list of type <ul> which has inner lists of type <ol><ol><li>Item 1<li>Item 2<ul><li>Subitem 2a<li>Subitem 2b</ul><li>Item 3<ul><li>Subitem 3a</ul><li>Item 4<ol><li>Item 4 part 1<li>Item 4 part 2<li>Item 4 part 3</ol></ol>
10Deprecated TermsThroughout the semester, we will learn that many of the commands and attributes used in html have been or are going to be deprecatedDeprecated means that while the current browsers can still handle the commands/terms, future browsers may not implement themThe type attribute for ordered and unordered lists has been deprecatedYou are to use cascaded style sheet definitions to instead define the types to be used in listsFor now though, we will continue to use the type attributeOr, just use the default form of bullets or numbering which is simplest anywayWhen we come across other deprecated commands, the textbook will warn you with the description Legacy AlertAt this point, look over chapter 2 samplepages simplelist.html and lists.html. Now do chapter 2 exercises 4 & 5.
11Text Formatting Commands HTML CommandExampleUsage<strong>Strong textBold face to stand out from surrounding text<em>Emphasized textEmphasizing text, usually in italics<cite>Cite textUsed for citations (references), usually italics<code>Code textUsed to include code, usually fixed-space font<dfn>Dfn textDefinition of a word, usually italics<kbd>Kbd textTyped text, usually fixed-space font<samp>Samp textShows sample output, usually fixed-space font<var>Var textUsed to show a variable, usually italics<b>, <i>Bold and italicsBold face or italic font face<big>, <small>Big and smallDisplays text in larger/smaller than normal size<sub>, <sup>Sub or sup textSubscript and superscript<strike>Strike textThis is a deprecated command<u>Underline textThis might be confused with a link<tt>Teletype textOutputs in fixed-space fontThere are three forms of text formatting in htmlLogical style elementsthese types describe how the text should be treated but do notnecessarily describe the implementation, for instance, strong meansthat the text should be stressed, however how it is stressed is left up tothe implementer – it might be bold faced, if it is processed by a speechsynthesizer, it might be spoken more loudly or forcefully, etc2. Physical style elementsthese are more traditional font styles, bold, italics, underline, etc andinclude some size changes (big, small, sub, sup)3. Special xhtml characterssome characters can not be stated directly in html such as < and >, orare characters not available on the keyboard like the copyright symbolor accented characters found in other languages -- these are covered ina couple of slidesGenerally, you are supposed to use logical style elements instead of physical style elements. Personally, I prefer the physical ones – they are easier to remember and simpler.
12In-line Versus Block Tags A block tag is meant to effect multiple linesThat is, it formats a block of textSome of the tags we have seen that are block tags includeHeading tags (<h1>…</h1>, <h6>…</h6>)Paragraph tags (<p>…</p>)Lists (<ul>, <ol>, <li>, <dl>, <dd>, <dt>)BlockquotesAlso tables, forms and divisions which we will see later in the semesterAn in-line tag is meant to be used within a single line to impact some specific textThese commonly surround single words or short phrases (although they could also surround characters within a word)Some of these tags are<i>…</i>, <em>…</em>, <b>…</b>And some that we will see are the anchor tag (<a>), font and spanLook at chapter 2 samplepages formatting.html and then do chapter 2 exercise 6.
13Special CharactersBecause we use < > in html to denote a tag, what do we do if we want to use a < or > in our html?We need special purpose charactersEach special purpose character will be placed between & and ; characters and will either be denoted by a special name (e.g., lt for <, amp for &) or by a numberThe more common ones are given in the following tablesee for instanceCharacterCodeDescription/Commentvarious “", “ ” ‘ ’For quotation marks, left/right curly quotes, left/right single quotesCopyright symbol<, >< >Less than and greater than symbolsBlank spaceNon-breaking white space&&AmpersandVarious monetary¢ € £Cent sign, Euro, British poundSee chapter 2 samplepages characters.html. Do chapter 2 exercise 7
14Automated FormattingWhen the web browser reads in an html file, it automatically formats the textInserts line breaksRemoves white space except between wordsExecutes any formatting tagsBut what if you want some section of text to appear verbatim? That is, literally how you have placed it in the file? Can you control this? YesThe <pre>…</pre> tags are used to denote that the text between the tags is preformatted – in this way, you can specify an exact spacing including line breaks, indentations and blank spacesthese tags are rarely used however, you should try to use the formatting tags and not use <pre>
16Links What makes the WWW a “web” is that pages are linked together Click on a link and this executes a command to download a new page – specifically, the link represents a request to a web server to retrieve a page for youA link is specified as the type of command (typically http), a server, a location on that server and a documentcombined, this is known as a URL (universal resource locator)such asLinks are placed inside of “anchor” tags, <a>…</a> and the actual reference is specified using the href attribute<a href=“http://www.nku.edu/~foxr/INF286/NOTES/ch2.ppt”>text goes here</a>the link is seen by text goes here, which has a line under it, click on the link and it activates, sending a request to for the page ch2.ppt located under the directory ~foxr/INF286/NOTESHyperlinks seem pretty easy but there are several things that could go wrong:Don’t forget to put quote marks around the URLDo not copy and paste a URL from Word or PowerPoint because the quote marks are different (or if you do copy and paste it, make sure you retype the quote marks)Make sure to include the close quote marksMake sure to close the <a href tag with > and place </a> after the text for the link itselfUnless the link is a relative link (we cover this in the next slide), make sure you include at the beginning of the URLTest the URL out first! If you have made a mistake with the URL, or the link’s destination file no longer exists, then the link will be a broken link
17Paths Generally, a link will contain the directory of where to find a fileand a file namethis is not always the case, for instance is a valid link but in this case, the filename is implied to be index.html and there is no directory because the file (index.html) is located in the top level directoryGiven where the current page is, you can specify files relative to the current page’s location, or through and absolute pathif the current page isthen a link to ch2.ppt can just be <a href=“ch2.ppt”>text</a>rather than the path shown on the previous slidethis is known as a relative patha relative path can also contain .. to indicate a directory up, for instance, if the file lab1.html is in INF286/LABS, then the reference could be <a href=“../LABS/lab1.html”>…</a>A reference to a page that starts at the top level (e.g., would be an absolute pathuse an absolute path if the page is not located somewhere “nearby”Absolute paths MUST start withDo chapter 2 exercises 7 & 8.
18More on <A> Aside from http, the href attribute can contain links using mailto: address, as in<a me</a>Index locations using #location as in<a href=“myfile.html#middle”>middle section</a>assuming that myfile has an indexed place called “middle”Other attributes for the <a> command aretitle= will pop up the text that is defined here when you move the mouse over the linke.g., <a href=“myfile.txt” title=“this is my file”>myfile</a> will pop up the text “this is my file” if you move the mouse over the linktarget= which is used to indicate where the given page will be displayed, for instance a new window or tab, or inside a specific frame (frames are covered later in the semester)use target=blank and the page opens in a new window or tabid= which identifies a location in the target page or a bookmark, the id= attribute may include a name= attributeDo chapter 2 exercises 9 and 10.
19Validating XHTML CodeWhen you write a computer program, if there are mistakes, you can discover these when your program is compiledBut XHTML code is not compiled, it is interpreted by the web browserWhat if there are mistakes? You may not find out until you load the web page in a browser (and even though, you may not notice the mistakes)In order to validate xhtml code, you can upload your page to a validation serviceW3C has a free markup validation service site at validator.w3.org – you can upload your page to that site and it will display all of the errors that it findsthe errors found will usually be indicated by pointers that are pointing at the line AFTER the error (this is common of compilers too)fix one error at a time because, in fixing one error, another error may disappear (e.g., if you forgot a close tag, inserting it may fix other errors)Do chapter 2 exercise 11.Before working on homework 2, you should look over the javajam.html file on the sample pages site.