This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
COAP 2000 – XHTML Programming
COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING
HyperText Markup Language (HTML) is the programming language that kick-started the World Wide Web and makes the Internet useable. It is as responsible for the Internet revolution as the mangle of cables, routers and Wi-Fi devices that have transformed the way we use information. First used as a basic language for creating personal home pages and simple web sites, HTML has evolved into its current form, XHTML (Extensible
HTML). XHTML is the backbone of the web on which all online content relies for navigation, presentation
and structure. This makes XHTML the industry standard programming language that supports and drives the myriad applications found on the web today. These applications range from basic home pages, multimedia and social networking to the multi-billion dollar economic phenomenon that only a few short years ago could not have
been imagined. In this course you will look under the hood of XHTML and cover the basics of XHTML and HTML programming. A significant part of this course deals with hands-on exercises that will provide students with relevant and tangible experience which they can immediately put into action. Students will use text editors to write and troubleshoot XHTML and HTML code and will be introduced to industry standard (X)HTML software tools for developing and posting web pages on the World Wide Web. If you are one of the many who would find it difficult to live without the web and you have an idea you would like to share with billions of
people, taking this course will enable you to acquire the knowledge to do it.
COURSE OBJECTIVES: To introduce syntax for XHTML To introduce students to an industry standard web authoring
tool – Dreamweaver To develop an understanding of basic Internet standards To review design criteria for effective Web pages To prepare simple web pages
COURSE PREREQUISITES: Basic understanding of computers and Internet Knowledge of using text editors to modify text files Seriousness, but a sense of humor at the same time
Course Logistics All classes will take place in Computer Lab 208 Classes will start with a presentation of the work that is to be
completed and the most important points will be identified Classes will be mostly hands-on and based on lessons in the
course book Most work should be completed in class, work not completed in
class is to be presented at next class for review and feedback Post your completed work on your website Questions will be addressed either in class or via email or phone NOTEPAD must be used to create your web pages!! No special software to be used in the first half of the term! Ignore any reference in the text book to more advanced
chapters unless directed to them by me or in provided course notes!!
Your website Website will be created in Week 1 – Project Initiation Exercise web pages should be posted on your website
using the title of the particular exercise as its file name ALL class work and homework MUST be posted on your
website by noon - day BEFORE the first class of the week!
As part of Week 7 and 8 tasks you will organize your website by creating links to your completed class exercises as well as creating a small website using the criteria provided to you.
What is the Internet and XHTML all aboutWhat is Internet?
Collection of interconnected computers and networks Independent of connection method Collection of documents (mostly HTML) Founder: Tim Berners-Lee To make it work it was essential that it be based on
hypertext and offer universality Hypertext provides links to all information media in
any location Open to all and you get to decide what should be on
What is the Internet and XHTML all aboutWhat is XHTML?
Universality provided by text only files A formatting, not a programming language ALL the web pages are written with some form of
(X)HTML Simple text file defines formatting as well as textual
content and access to sound, graphics, video XHTML content relies on tags that define specific content Tags (or elements or markup) are keywords enclosed in <
and > signs, e.g., <em>Important</em> in your XHTML file, produces Important in your browser
Many WYSIWYG software tools available Learning XHTML means not being limited by the features
Non-linear but also Non-standard “Was it just as good for you as it was for me?” Web browsers are used to view web pages Internet Explorer, Netscape, Safari, Chrome, Opera … Proprietary extension challenges waning Display/Viewing disparity
Trying to make amends, the W3C World Wide Web Consortium is the internet advisory
body Return to original concept of universality Estimated 25% of designer time creating workarounds Cascading Style Sheets (CSS) enter the fray separating
content from layout CSS offers powerful formatting and layout options for
whole websites versus individual pages Advent of CSS was the beginning of the end for some
tags CSS offers precision formatting allowing professional
XML and XHTML – one and the same The answer to sloppy code and proprietary extensions Using XML you can create your own programming languages HTML written in XML, hence the term XHTML While XML is more adaptable, using the HTML lexicon makes
XHTML universally understood by current browsers while retaining the power of XML
Price to pay for more power is syntax inflexibility! Course text deals with both HTML and XHTML, but goal of
this course is to focus on XHTML to create a small collection of web pages
Where you see (X)HTML in the course text book it indicates that both XHTML and HTML syntax are the same
Which DTD flavour is yours? (uses and preferences) Transitional
Used on large commercial sites to reach as wide an audience as possible
Personal websites, again to reach as wide an audience as possible, but also because learning CSS may appear complicated to the hobby developer or laziness prevails
Frameset Used on some personal sites for menu systems to prevent
replicating code Strict
Also used on large commerce sites to benefit from the powerful features of XHTML and CSS
Use is enforced on some sites to fulfil accessibility requirements for disabled users
Week 1 Schedule You will be working through chapters i, 1, 2 & 3 of the course
text book. Follow the online tutorial as you progress as it guides you
through the course text book readings and gives further clarification of terms and examples found in it.
If I miss a page, i.e., I don’t make any comments on the text on a specific page, don’t worry! It simply means that I think the explanation given is clear and understandable and you don’t need further clarification.
I may use XHTML file or XHTML coded source file or XHTML text file or source file, these are one and the same!
An XHTML coded source file is where you write the code (using Notepad) for your web pages
A web page is displayed in the browser and is the result of your XHTML coding
Chapter 1 – Markup (p.28) Principle types of Markup: Elements, Attributes and Values Elements:
Elements, more commonly referred to as tags, are like labels that identify and structure/format parts of your web page, of which an example of an opening and closing tag pair is <em> </em>.
When applied to textual content in your web page a NON-EMPTY element/tag pair would have the effect of formatting text enclosed within it. For example, the XHTML code below would look how in the browser?
This is <em>easy !!</em>
Would look like this in an internet web browser: This is easy !!Look at the source file for the Webster homepage. Can you identify any NON-EMPTY elements/tags?
There is another definition of tag, an EMPTY tag. An empty tag may seem a confusing term as it does actually contain information
Takes the form of a combination of an open and closing tag. For example:
<img src=“bluefax.jpg” />
Please note that even though we will be using Transitional coding, you MUST use the closing space and forward-slash to finish off your empty tag before the closing greater-than sign! You will be marked down if you forget this!
Look at the source file for the Webster homepage. Can you identify any EMPTY elements/tags?
Tags that contain other tags are parents and the enclosed tags are the children (Figure 1.8 shows parent-child tag pairs)
Nesting is the placement of one set of tags within another set Closing tags MUST correspond to the last open tag! Shown below are examples of correct and incorrect nesting.
<p>text here <em>more text here</p> and yet more text here at the end.</em>
<p>text here <em>more text here</em> and yet more text here at the end.</p>
Can you identify the correctly nested pair?Can you correctly identify the parent and child tag pairs?
Chapter 1 – A web page’s text content (p.32) Unicode
Estimated 40% of web public speak English, therefore 60% expecting something else
Designed as a universal system for encoding all of the characters in all of the world’s languages
So not just non-English character sets are supported, but also script languages like Cyrillic, Chinese, Greek, etc
Encodes all ASCII characters as ASCII does, thus if old browser does not understand your UTF-8 encoding it will still display English characters properly
When you save your XHTML coded source files for your web pages in Notepad you will state that the encoding is UTF-8
You will need to declare UTF-8 in your Document Type Definition (DTD) declaration in your XHTML coded source file so the browser can display your special characters properly on your web page
Open Microsoft Word, Insert | Symbol and select Arial Unicode MS
A web page’s text content (continued) GOOD PRACTICES (STRUCTURE OF XHMTL DOCUMENT)
Use spaces and tabs to structure your XHTML coding in your text files. It helps you, and/or other people who may follow you in editing your web page, make sense of what you have written.
Use returns to structure your document parts, I will be looking for this when we start creating more complicated pages. Below provides examples of good and bad practice with regard to the use of returns to create document structure:
Bad practice!
<table><tr><td> any text in this cell</td><td> more text in this cell</td></tr><tr><td> anymore text you like </td><td> more text to labour the point </td></tr></table>
<table> <tr> <td>any text in this cell</td> <td>more text in this cell</td> </tr> <tr> <td>anymore text you like</td> <td>more text to labour the point</td> </tr>
Chapter 1 – Links, images and other non-text content (p.33) Links:
Links are simply an abbreviating of hyperlinks Links are defined by tags in your XHTML source file Links can be text or other non-text content in your web page like
images Linking a file that your browser does not understand will cause it
to launch a Helper Application or prompt you to download a Plug-in
Images: Images are NOT stored in your XHTML source file, but are
referenced from within it, e.g., <img src=“bluefax.jpg” /> This means your web page remains text based and universally
accessible Typical image types used in web pages are jpeg, png and gif Your browser understands most image types by default
Chapter 1 – Your Web Page File names (p.34) Good practice:
Always use lowercase file names Prevents user typos and resulting frustration Prevents typos when creating hyperlinks
Use the correct file extension, either .htm or .html Select one and stick with it!
Use a short, descriptive word(s) for your file names, but if you must use multiple words for file names decide and stick with a standard join method, usually - or _ or nothing, e.g.,
• Use lower case names for folders too!• If no name given for file name it means the server will serve a file with the name default.html or index.html if these files exist• No default.html or index.html file means error message or worse!
Chapter 1 – Absolute and Relative URLs (pp.36-37) Absolute URLs
Absolute URLs must be given if the web page or other content your hyperlink references is on a different server than your own
It must include the http:// scheme information so that the browser knows how to communicate with the remote site
You can use absolute URLs for files on your own server too, but this may become cumbersome, inflexible and is prone to errors
Relative URLs Can be used when the web page or other content your
hyperlink references resides on your server Cannot be used to reference content on remote sites To reference a file in your current folder, just use the file name To reference a file in a sub-folder of your current folder simply
type the folder name followed by a forward slash and file name To reference a file in a folder in a higher-level folder, use two
dots and a forward slash followed by folder/file_name
Who cares, so you miss some quotes, or a closing tag or even the main web page tags like <html>, <body> and <head>
Browser support - billions of pages out there already XHTML
Much more ordered and fussy about syntax Browsers have at last caught up with its specification Normally used for bigger projects that require clearly defined
functionality Because it encapsulates HTML developers really don’t have to
learn new language, just get used to its terminology A well defined standard will more likely be better supported in
future generations of web software Offers disability support which is not available in HTML and this
added-value is being insisted upon by some organizations
Chapter 1 – Versions, flavours and DOCTYPE (pp.40-41) – Standards vs Quirks Standards Mode (DOCTYPE)
Informing the web browser what type of DTD standard your web page follows
Strict, Transitional or Frameset The browser will recognise the DOCTYPE standard and will
display the web page accordingly Quirks mode
If DOCTYPE is omitted, the browser assumes page is old fashioned HTML and reverts to QUIRKS mode
Quirks mode simply means it will interpret the code as it is written, which depending on the browser, could be very different to what you intended<!DOCTYPE html PUBLIC
Chapter 3 – Basic XHTML Structure Just what is my type?
Now – creating real web pages with XHTML coding First you will create a template XHTML file Create a template.html file Make that a proper XHTML documents by declaring this fact in
your via the DOCTYPE declaration You will also specify the encoding type UTF-8 so that the browser
knows what character set to use for display purposes UTF-8 character encoding isn’t really important for us using
English operating systems and software, but it may be important for other language operating systems and browser software!
You are going to complete the template.html file and you will use this as the basis for nearly all web pages you will create on this course, so don’t skip!
The typing you are expected to do for each exercise is shown in the Figure on the same or opposite page as the exercise description
1. First open your blank template.html file in Notepad2. Follow the instructions “To begin a transitional XHTML
page” (p.56)3. Complete steps 1 to 44. Save the changes you have made to your file5. Your file should look like Figure 3.2 (p.57) when you
have completed step 5
NOTE: the figures provided in the course book show text wrapped in the boxes. This text is wrapped due to limited space and you don’t have to wrap your text!
Read the Tips. They are essentially what I have already provided you with, but they may clarify something you are unclear about.
Chapter 3 – Declaring the encoding (p.59) UTF-8 Character Set
The character set encoding declared in your XHTML file (in the head section) should be the same as that used when saving your source code
Browser Compatibility: The UTF-8 encoding is declared as meta information in the head section instead of at the very beginning of the web page source code because IE has a problem with this!
UTF-8 is for language other than English and/or special symbols.
(exercise) – p.591. If you closed your template.html file after the last exercise re-
open it in Notepad2. Follow the instructions for adding the meta information for utf-
8 encoding3. Save your file, it should now look like Figure 3.5
Chapter 3 – Creating a title (p.60) Web page titles
Every XHTML web page must have a title Title appears in the title bar of the browser window Title shows as the page name in Favourites if your page is
bookmarked The title cannot contain any formatting (bold, italic, etc.),
images or hyperlinks Make titles as short and descriptive as possible A title can effect a documents ranking on search engines
(exercise) – p.60 1. If you closed your template.html file after the last exercise re-
open it in Notepad2. Follow the instructions for adding the title tags3. Add the text YourName Default Template as the title4. Save your file as this is now the completed
template.html file that you will use as the basis for all your web pages
5. Close Notepad and make a copy of this file as a backup!
You will now complete all exercises on pages 61-68 paying attention to the figure that accompanies each exercise so that you can check that your file appears exactly as the exercise dictates.
1. Re-open template.html in Notepad, add the title as it appears in Figure 3.6 then save the file as gaudi.html
2. Follow the instructions for all remaining exercises in Chapter 3 adding the text as well as the tags being discussed, saving your gaudi.html file after completing each exercise
You will now use my instructions on creating your very own website. This is a detailed step-by-step process so pay close attention!
NEXT WEEK We will start next week’s class by adding your template.html file
and your gaudi.html files to your website under the week1 heading so that I can review online and provide feedback.
HOMEWORK If you didn’t finish the exercises in Chapter 3 make sure you
complete them before next week’s class. Read through the course book’s Introduction, Chapter 1 and
Designing Your Website on page 44. This presentation provides a good overview of this content but you will need a thorough understanding of these concepts as you progress through the course – not to mention the exams!