xhtml basics web pages used to be written exclusively in html – xhtml is a variation that includes...
TRANSCRIPT
XHTML 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 here– Your web pages will contain a minimum of basic tags
and as you expand your capabilities, you will include various html formatting commands
• An html command will appear in < > marks– Most html commands have start commands and stop
commands that surround the text (or other items) that the command(s) will impact• For 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
Defining A Page• A web page will
– be stored as ascii text and usually have an extension of .htm or .html• The 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 definition
– Transitional XHTML is the least restrictive version of XHTML and permits cascaded style sheets as well as traditional formatting• Version 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 file
• You will probably follow these lines with a meta tag of the form– <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”
/>
Basic Page Tags• All of our web pages will be defined within tags <html
xmlns …>…</html>– the … will include a header and a body– <head>…</head> is our header
• The header can include a title, <title>…</title> as well as style sheet definitions (we will explore this in chapter 3)
– <body>…</body> is our body• The 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
Viewing a Web Page• You 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 it– All html tags should take affect and you will see the text in the
document formatted as you specified– In 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 server– In 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 file
– We will consider later how to upload your file to a web server
Some 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 paragraph• If 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 tag• a single or standalone tag will look like this <tagtype />
• <blockquote>…</blockquote> is used to indent text– Otherwise it is difficult to have adequate spacing if you want your
text to appear indented– We look at blockquote examples in the next slide
• <!...> is a comment tag– You can place whatever you want after the !, the web browser will
ignore the tag– Comment 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 later
Block Quote Example• The blockquote tag is used so that text is indented
underneath previous text– You might want to use this to change the emphasis of text– It is also useful if you want to insert a quotation on a
separate line– It can also be used for lists without having bullets or
numbers– Below are two examples
• in both examples, <br /> tags are inserted after each line to separate each line
• these lists can also be created using list tags (covered next)
Lists• 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> tags– The 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>
Examples • To the left are two examples of lists– The first list uses dl, dt, dd
• Sample 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>• <dd>Datum 1</dd>• <dd>Datum 2</dd>• <dd>Datum 3</dd>• </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, dd
List item 1 Datum 1 Datum 2 Datum 3
List item 2 Datum 1 Datum 2 Datum 3
Sample list using ol I. List item 1 II. List item 2 III. List item 3 IV. List item 4
Nested Lists• Lists can be nested by placing new <ul> or <ol> tags
inside of lists– A nested list provides different levels of indentation– Just remember to close each list appropriately – for every
<ul> you need a </ul> for instance– List 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>
Deprecated Terms• Throughout the semester, we will learn that many of
the commands and attributes used in html have been or are going to be deprecated– Deprecated means that while the current browsers can
still handle the commands/terms, future browsers may not implement them
• The type attribute for ordered and unordered lists has been deprecated– You are to use cascaded style sheet definitions to instead
define the types to be used in lists– For now though, we will continue to use the type
attribute– Or, just use the default form of bullets or numbering
which is simplest anyway• When we come across other deprecated commands, the
textbook will warn you with the description Legacy Alert
Text Formatting Commands
In-line Versus Block Tags• A block tag is meant to effect multiple lines– That is, it formats a block of text– Some of the tags we have seen that are block tags include
• Heading tags (<h1>…</h1>, <h6>…</h6>)• Paragraph tags (<p>…</p>)• Lists (<ul>, <ol>, <li>, <dl>, <dd>, <dt>)• Blockquotes• Also tables, forms and divisions which we will see later in the semester
• An in-line tag is meant to be used within a single line to impact some specific text– These 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 span
Special Characters• Because 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 characters– Each 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 number
– The more common ones are given in the following table• see for instance http://www.utexas.edu/learn/html/spchar.html
Character Code Description/Comment
various “ ", “ ” ‘ ’
For quotation marks, left/right curly quotes, left/right single quotes
© © Copyright symbol
<, > < > Less than and greater than symbols
Blank space Non-breaking white space
& & Ampersand
Various monetary ¢ € £ Cent sign, Euro, British pound
Automated Formatting• When the web browser reads in an html file, it automatically
formats the text– Inserts line breaks– Removes white space except between words– Executes any formatting tags
• But 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? Yes– The <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 spaces• these tags are rarely used however, you should try to use the formatting
tags and not use <pre>
Another Example <h1>Preformatted Text</h1> <pre> JAVASCRIPT A Java language used on the Web PHP A version of Pearl used on the Web HTML HyperText Markup Language for the Web XHTML eXtensible HyperText Markup Language </pre> <h1>Same Text, Not Using Preformatted Text Tag</h1> <p> JAVASCRIPT A Java language used on the Web PHP A version of Pearl used on the Web HTML HyperText Markup Language for the Web XHTML eXtensible HyperText Markup Language </p>
Links• 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 you
– A link is specified as the type of command (typically http), a server, a location on that server and a document• combined, this is known as a URL (universal resource locator)
– such as http://www.nku.edu/~foxr/INF286/NOTES/ch2.ppt
– Links 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 www.nku.edu for the page ch2.ppt located under the directory ~foxr/INF286/NOTES
Paths• Generally, a link will contain
– the directory of where to find a file– and a file name
• this is not always the case, for instance www.nku.edu 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 directory
• Given where the current page is, you can specify files relative to the current page’s location, or through and absolute path– if the current page is www.nku.edu/~foxr/INF286/NOTES– then a link to ch2.ppt can just be <a href=“ch2.ppt”>text</a>– rather than the path shown on the previous slide
• this is known as a relative path– a 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., http://www.nku.edu/) would be an absolute path– use an absolute path if the page is not located somewhere “nearby”
More on <A>• Aside from http, the href attribute can contain– Email links using mailto:email address, as in
• <a href=“mailto:[email protected]”>Email 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 are– title= will pop up the text that is defined here when you move
the mouse over the link• e.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 link– target= 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 tab
– id= which identifies a location in the target page or a bookmark, the id= attribute may include a name= attribute
Validating XHTML Code• When you write a computer program, if there are
mistakes, you can discover these when your program is compiled– But XHTML code is not compiled, it is interpreted by the web
browser– What 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 service– W3C 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 finds• the 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)