Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

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 and end the text with as in: isn’t this exciting ? Notice that the ? will not be bold faced

2 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 – 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 – 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 –

3 Basic Page Tags All of our web pages will be defined within tags … – the … will include a header and a body – … is our header The header can include a title, … as well as style sheet definitions (we will explore this in chapter 3) – … is our body The body will contain all of our text, most or all of our formatting commands, links and graphics and other information Simple Example Page Here is a simple example web page It doesn’t say much 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

5 Some Basic Tags -- heading where # is a number from 1 (largest) to 6 (smallest), ends with and are used to encapsulate a paragraph If you want a line break, use 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 … 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

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, tags are inserted after each line to separate each line these lists can also be created using list tags (covered next)

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 … or … each list item is indicated using … inside the … or … tags – The type of list graphic can be controlled by adding a type attribute in the or command as in – 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 … – Inside of this, for each list item, use … – For each datum in the list item, use …

8 Examples To the left are two examples of lists – The first list uses dl, dt, dd Sample list using dl, dt, dd List item 1 Datum 1 Datum 2 Datum 3 List item 2 Datum 1 Datum 2 Datum 3 – The second uses and Sample list using ol List item 1 List item 2 List item 3 List item 4 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

9 Nested Lists Lists can be nested by placing new or tags inside of lists – A nested list provides different levels of indentation – Just remember to close each list appropriately – for every you need a for instance – List types can differ within nestings – for instance, you can have an outer list of type which has inner lists of type Item 1 Item 2 Subitem 2a Subitem 2b Item 3 Subitem 3a Item 4 Item 4 part 1 Item 4 part 2 Item 4 part 3

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

11 Text Formatting Commands HTML Command ExampleUsage Strong textBold face to stand out from surrounding text Emphasized textEmphasizing text, usually in italics Cite textUsed for citations (references), usually italics Code text Used to include code, usually fixed-space font Dfn textDefinition of a word, usually italics Kbd text Typed text, usually fixed-space font Samp text Shows sample output, usually fixed-space font Var textUsed to show a variable, usually italics, Bold and italicsBold face or italic font face, Big and small Displays text in larger/smaller than normal size, Sub or sup textSubscript and superscript Strike textThis is a deprecated command Underline textThis might be confused with a link Teletype text Outputs in fixed-space font

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 ( …, … ) Paragraph tags ( … ) Lists (,,,,, ) 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 …, …, … And some that we will see are the anchor tag ( ), font and span

13 Special Characters Because we use in html to denote a tag, what do we do if we want to use a 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 CharacterCodeDescription/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

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 … 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

15 Another Example Preformatted Text 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 Same Text, Not Using Preformatted Text Tag 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

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, … and the actual reference is specified using the href attribute text goes here 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

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 text – 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 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”

18 More on Aside from http, the href attribute can contain – links using mailto: address, as in me – Index locations using #location as in middle section assuming that myfile has an indexed place called “middle” Other attributes for the command are – title= will pop up the text that is defined here when you move the mouse over the link e.g., myfile 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

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 – 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)

Download ppt "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."

Similar presentations

Ads by Google