COAP 2000 – XHTML Programming COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I,...

COAP 2000 – XHTML Programming

COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING

Fall I, 2012

Instructor: Dejan [email protected]

[email protected] 12 16 61 91

Tuesday 18:30 – 20:30Thursday 18:30 – 20:30

TEXTBOOKHTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, 6 th Edition by Elizabeth Castro, Peachpit Press

© Webster University Vienna

http://coap2000.ddejan.com/


COURSE DESCRIPTION

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.



CLASS POLICY

Class attendance is mandatory

Computers will be used for class related activities only (no e-mails, no Facebook, no live scores, no anything that is not related to the class )

Cell phones are not to be used during class

Cheating/Plagiarising is strictly forbidden

Class related discussion is strongly encouraged. There are no stupid questions



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



SCHEDULE Week 1: Introduction to Web pages. Review of Web technology and

tools. XHTML basic syntax. Creating a Web page. Chapters 1, 2, 3. Creating your own website.

Week 2: Basic formatting, Using images and Intro to Links. Chapters 4, 5, 6.

Week 3: Intro to Styles and Style Sheets - Formatting and document layout, CSS Styles and CSS Formatting. Chapters 7, 8, 9 & 10.

Week 4: Layouts, printing and dynamic style sheets. Chapters 11, 12 & 14. + mid-term exam

Week 5: Lists, tables and forms. Chapter 15, 16 & 17. Week 6: Multimedia, scripts and Javascript. Chapters 18, 19 & 20. Week 7: Symbols and Non-English Characters, Testing and Debugging

Web Pages, Getting People to Visit. Chapter 21, 22, 23 & 24. Week 8: Presentation of your projects and final exam + final exam.



GRADING AND EVALUATION No “collaborative” home pages will be accepted!

Grades: A-=90-92; A=93-100; B-=80-82; B=83-86; B+=87-89; C-=70-72; C=73-76; C+=77-79; D=60-66; D+=67-69; F<60.

Mid-term = 30%, Final exam = 30% Completion of homework and website = 30% Class participation = 10%



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.



Course goals Provide an understanding of the Internet Provide a comprehensive understanding of the

eXtensible Hypertext Markup Language (XHTML) Make you competent at creating visually pleasing, well

organized and technically sound web content Predominantly hands-on to provide as much experience

as possible To take you through the process of creating web pages

step-by-step Introduce you to a website development tool and a

WYSIWYG authoring tool



WEEK 1Introduction to the Web



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

it!



What is the Internet?

Image credit: http://computer.howstuffworks.com/internet/basics/internet.htm



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

of a specific software tool© Webster University Vienna


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

layouts Striving to dictate and maintain standards© Webster University Vienna


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



Flavours of XHTML, Document Type Definition (DTD) Three DTDs for present use:

Transitional Permits use of deprecated tags More forgiving for the sloppy developer

Frameset Permits use of deprecated tags Permits use of Frames More forgiving for the sloppy developer

Strict Prohibits the use of any deprecated tags Demands careful attention to coding syntax!



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



Know your audience! Lack of standards can cause major headaches

for the web designer Design for a wide public audience forces

designer into duplication of work Design for specific audience/browser if feasible An estimated 5% of your potential audience

are using old browser versions (>50 million users!)

You will be using mostly Transitional markup in this course



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 – Web Page Building Blocks A web page has three essential components:

Textual content – any writing you have added to your web page

References to complex content – this may be links to other web pages and/or images and/or video and/or sound, etc…

Markup – instructions written in your web page that describes how your web page content should be displayed/formatted

The common denominator is text! Text = Universality, i.e., platform

independenceLogon to your workstation, open your web browser and typewww.webster.ac.at in the address field © Webster University Vienna


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?



Chapter 1 – Markup (p.28) Elements:

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?



Chapter 1 – Markup (p.29) Attributes and Values:

Attributes contain information about content in the web page An attribute’s value MUST ALWAYS be enclosed in

quotation marks! Numeric values never contain unit types, e.g., width=“10” Some tags accept multiple attributes and values, e.g., <img />

Sometimes values are limited to predefined choices and those limited in choice only accept lower case values in XHTML as shown in the Figure below.

<img src=“bluefax.jpg” width=“300” />What is the attribute value pair in the coding above?Look at the source file for the Webster homepage.

Can you identify any attribute and value pairs?



Chapter 1 – Block vs. Inline (p.30)

Block-level elements: Like paragraph tags <p> will always start its enclosed text

on a new line Are larger structural pieces of a web page and can contain

other block-level elements, inline elements and text Inline elements:

Like <em> tags will format its content, but the content will retain its position on the same line on the web page

Look at the source file for the Webster homepage. Can you identify any block-level or inline tags?



Chapter 1 – Parents and Children (p.31) Nesting:

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

Notepad does not correct typing mistakes XHTML collapses extra spaces, tabs and returns Use this to your advantage to add structure in your source

file (see Fig. 1.8 again) Special Symbols

& is special as it denotes the beginning of a special character

You can use character references, e.g., © for © Or you can simply type the character and specify UNICODE

(specifically UTF-8) as the encoding character set you wish your web page source file to be saved as

Some character references are provided in Appendix D Encoding means converting characters you type into bits

that are machine readable Encoding can be automatically detected by the browser

(View | Encoding | Auto-Select) © Webster University Vienna


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>



A web page’s text content (continued)

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



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 – Links, images and other non-text content (p.33) Other content – Flash MX, video, mp3, etc…:

Again these are textual references within the XHTML source file so content is stored elsewhere

This content may need Helper Application or Plug-in installed on users’ computers as stated in ‘Links’ above

Good practice to inform users what link does especially if it is linking a 20Mb file!

Good practice to inform users where to get trusted plug-ins so that they feel confident they aren’t compromising their security



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.,

branko-homepage.html orbranko_homepage.html orbrankohomepage.html



“http://www.webster.ac.at/courses/coap/class.html”

Scheme / type of communication protocol

Server name / location

Chapter 1 – URLs (web address composition)

Path or folder name(s) on server

File / web page name

• 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 – URLs (web address composition) Uniform (Universal) Resource Locator:

An URL is a fancy name for internet address Contains information about where a file is and what the

browser should do with it Scheme:

First part of the URL is the scheme, which for this course will always be the HyperText Transfer Protocol (HTTP)

HTTP protocol simply defines a standardized method of communication between servers and clients

Server name/address: This is the second part of the URL and defines the name and

location of the server that stores the web page Path:

This is the folder name(s) on the server in which the web page is stored



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

IMPORTANT CONCEPT !© Webster University Vienna


Chapter 1 – HTML vs. XHTML (pp.38-39) HTML

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

"-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Chapter 2 – Creating a new web page (p.45) Remember to chose either HTM or HTML as your file

extension, but stick with whichever one you chose! Creating and saving an XHTML document (exercise)

1. Decide how you are going to arrange files created in this course

2. Suggestion: create folders for each week either on your Webster account or on an USB stick.

3. Follow the instructions for creating an empty XHTML file on the handout provided – Exercise 1

4. Answer the questions after the exercise.



Chapter 2 – Saving your web page (pp.46-48) Creating and saving an XHTML document in MS Word

1. I do not recommend anyone to use MS Word to create web pages, here you will find out why

2. Follow Exercise 2 on the handout provided

3. Answer the question after the exercise



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



Chapter 3 – Starting your web page (pp.56-57)

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 – Creating the foundation (p.58) Head and Body tags

The head and body tags are essential to your XHTML structure (but not to HTML)

The head section is where you define your web page title, your encoding, add styles, add scripts and define metadata

All content that is displayed in the web browser is entered in-between the <body> </body> tags

(exercise)1. If you closed your template.html file after the last exercise

re-open it in Notepad2. Follow the instructions for both exercises “To create the

head section:” and “To create the body:” (p.58)3. Complete all steps and save your file4. Your file should look like Figure 3.3 when you are finished

Read the Tips. I have essentially already provided you with the data, 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!



Chapter 3 – Creating structures (pp.61-68) Info about everyday web page elements

Header tags (pg.61) define sections of your web page. Paragraph tags (pg.62) are block tags, they must be closed in

XHTML Naming elements (pg.63) is a powerful method of identifying

parts of your web page content Naming elements you will be using later. For now just add the

ids and classes as specified in the exercises on the next page, page 64!

DIV tags (pg.64) are also block tags that are useful in web page design layout

Span tags (pg.65) don’t have any inherent formatting, they function inline

Line break tags (pg.66) are used to create manual line breaks without additional line spacing

Comments (pg.67) are extremely useful and should be used liberally!

Labeling (pg.68) (windows tool-tip) is also a useful tool



Chapter 3 – Creating structures (pp.60-68) Exercises

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!


COAP 2000 – XHTML Programming COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I,...

Documents

Transcript of COAP 2000 – XHTML Programming COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I,...