Download presentation
Presentation is loading. Please wait.
1
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
2
Defining 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 .html The web page will start with the line <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “ 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=“ 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” /> 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 can use 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.
3
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 " " <html xmlns= " 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, however by indenting appropriately, it can make the page easier to read
4
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 You 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.
5
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 At this point, see the example headings.html from the chapter 2 sample pages list. Do chapter 2 exercise 3.
6
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) The code for the block quote examples is in the page Bring 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.
7
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> 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.
8
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> </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 Sample list using ol I. List item 1 II. List item 2 III. List item 3 IV. List item 4 The 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
9
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>
10
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 At this point, look over chapter 2 samplepages simplelist.html and lists.html. Now do chapter 2 exercises 4 & 5.
11
Text Formatting Commands
HTML Command Example Usage <strong> Strong text Bold face to stand out from surrounding text <em> Emphasized text Emphasizing text, usually in italics <cite> Cite text Used for citations (references), usually italics <code> Code text Used to include code, usually fixed-space font <dfn> Dfn text Definition of a word, usually italics <kbd> Kbd text Typed text, usually fixed-space font <samp> Samp text Shows sample output, usually fixed-space font <var> Var text Used to show a variable, usually italics <b>, <i> Bold and italics Bold face or italic font face <big>, <small> Big and small Displays text in larger/smaller than normal size <sub>, <sup> Sub or sup text Subscript and superscript <strike> Strike text This is a deprecated command <u> Underline text This might be confused with a link <tt> Teletype text Outputs in fixed-space font There are three forms of text formatting in html Logical style elements these types describe how the text should be treated but do not necessarily describe the implementation, for instance, strong means that the text should be stressed, however how it is stressed is left up to the implementer – it might be bold faced, if it is processed by a speech synthesizer, it might be spoken more loudly or forcefully, etc 2. Physical style elements these are more traditional font styles, bold, italics, underline, etc and include some size changes (big, small, sub, sup) 3. Special xhtml characters some characters can not be stated directly in html such as < and >, or are characters not available on the keyboard like the copyright symbol or accented characters found in other languages -- these are covered in a couple of slides Generally, 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.
12
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 Look at chapter 2 samplepages formatting.html and then do chapter 2 exercise 6.
13
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 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 See chapter 2 samplepages characters.html. Do chapter 2 exercise 7
14
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>
15
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> </p> Do chapter 2 exercise 8
16
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 Links are placed inside of “anchor” tags, <a>…</a> and the actual reference is specified using the href attribute <a href=“ 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/NOTES Hyperlinks seem pretty easy but there are several things that could go wrong: Don’t forget to put quote marks around the URL Do 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 marks Make sure to close the <a href tag with > and place </a> after the text for the link itself Unless the link is a relative link (we cover this in the next slide), make sure you include at the beginning of the URL Test 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
17
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 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 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., would be an absolute path use an absolute path if the page is not located somewhere “nearby” Absolute paths MUST start with Do chapter 2 exercises 7 & 8.
18
More 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 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 Do chapter 2 exercises 9 and 10.
19
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) Do chapter 2 exercise 11. Before working on homework 2, you should look over the javajam.html file on the sample pages site.
Similar presentations
