Texas A&M University



Intro to Web design Environment & Considerations

HTML/XHTML: What It Is and Is Not

|X |Extensible |

|HT |Hypertext |

|M |Markup |

|L |Language |

|is a “reformulation of HTML 4.0 as an application of the Extensible Markup Language (XML) |

1. Is

o document-layout and hyperlink-specification language

• you specify how the document will look when run

o defines the syntax and placement of special, embedded directions that aren’t displayed by the browser

• the stuff you type LITERALLY will NOT appear on the screen

o an interactive document through special hypertext links, which will connect your document with other documents ---- on either your computer or someone else’s.

2. Is Not

o is not a true programming language

o is not a page-description language , or a WYSIWYG (What You See Is What You Get) word processor, or a desktop publishing tool

o Word processing tool

How does HTML work??

3. purpose is to define the structure and appearance of documents over a network for rendering on a variety of display devices called browsers

o So a set of TEXT will be translated into various GRAPHICS forms by the web browser

o Text you (the programmer) create will be translated into browser form

• picturesque

Well-Formed Documents and XHTML

• To conform with XML, XHTML insists that documents be “well formed”.

• means that every tag must have an beginning and ending tag

o a tag can be considered a command

o …. (where most of your code will go in between)

o Some tags only need one so the ending is placed inside the start tag: (brakes a line, like a return)

• It also means that tag and attribute names are case-sensitive and according to the current XHTML standard must be in lowercase.

o Hence, only is acceptable, and it is not the same as or , as it is with the HTML standard.

• Well formed XHTML documents, like HTML standard ones , conform to proper nesting

o Text here

Embedded Tags

• tags are used to format text, tell the browser that the entire document is composed in HTML

• ex. (beginning tag) (ending tag)

o All tags have a start and at least 95% have an end tag (HTML is very forgiving)

• The browser only displays less than half of the example source text

o so most of the time it does not display what you coded

• XHTML is more rigid, insisting that all tags have a corresponding end tag.

• HTML is a set of codes you use to create a document

entire web document

o use a certain format or syntax

State of HTML/XHTML

• Different versions through the years

o All rules, tags and standards are created by a governing body called the W3C “World Wide Web Consortium”

• Version 4.01 is the latest with a twist

o New tags

Intro to an HTML/XHTML document

|Basic Template for an HTML document |

| |

| |

| |

|My first HTML Document |

| |

| |

|My name is: |

| |

|... |

| |

| |

• This can be typed up in Notepad, or DreamWeaver (we still start in NotePad)

Type this up in NotePad!! Save it ON your desktop, as “First.html” Make sure to ADD the .html at the end of the file name and CHANGE THE FILE TYPE TO TEXT. (pictured below)

[pic]

Back in the file, for the Title, change it to your NAME IN CAPS. And Save again. Close Notepad. Double click on your HTML file and view in IE.

Physical items needed for web page building

• Computer

o Nothing fancy

o Laptop is just fine as well

o Only item to be concerned is what the software needs

• HTML (Web Page) Server

o Where to store you FINISHED webpages for EVERYONE to view

o Server is always ON

Use the Internet to find a few FREE web page servers

[pic]

Software items needed to web page building

• Internet Browser

o Mozilla

▪

▪ Find it on your computer

o IE (built into Windows)

▪ Find it on your computer

o Netscape

▪

o Opera

▪

o Why so many?

▪ All have different features

▪ Some run better

▪ Some look better

• HTML Editor

o Notepad

o Dreamweaver

• Connection to the internet from work area

o DSL, FIOS, etc…

o Not DIAL UP!!

• SSH/FTP program

o Transfers file to and from work area to HTML Server

Proper work area

• Near books

• Chart or Whiteboard

o Draw out ideas

• Away from distractions

o TV

o Bar (hmmmm)

o Opposite sex

Items to consider (and problems that will appear)

• Internet Brower Issues

o Not all Browsers

▪ translate the code the same way

▪ Display the same way (when the code is the same)

|Same website (URL) different results! |

|Internet Explorer (IE) |Mozilla |

|[pic] |[pic] |

• Connection speeds for users

o Not all have the same speed, do not assume they are fast

o Slower means pictures take longer to load

• Screen resolutions

o Just like TVs, computer monitor resolution and size differ

o Web Pages (and Webmasters) must have a design to cater to the various sizes

▪ Fixed Design (pg 18)

▪ Flexible Design (pg 20)

▪ Center Design (pg 22)

• Operating systems

o Linux

o Windows

o OS/Apple/Mac

Saving your work for this class

• To make things easy, create a folder called “HTML” on your desktop at home and in class

o makes it easy to find

• Save ALL work to that folder

• Remember to place your work on a disk when leaving class

o computers automatically erase any information saved when turned off

Oh God!! I need help!!

• Websites with tutorials

o w3school

▪

• Websites for Help

o Devshed

▪

-----------------------

Opening tag

Closing tag

Affected text

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download