XHTML Basics
Naming Files & Folders ~ XHTML Guidelines ~ Basic Codes
Basics In Action! ~ Template Page ~ Type Your Code & View It!
Learning HTML is like learning a foreign language.
To start with, you learn enough to simply communicate. As you become more fluent, your web page will expand and become more intricate and interesting.
One of the best ways to learn HTML is to surf the Web. View the HTML behind the pages you like. Do this by selecting VIEW -- SOURCE.
Don't worry if you don't understand all the coding yet - it will make more sense as you continue learning HTML.
- Names of files must include extensions.
- .htm for web pages (.html is most often used for Macs)
- .gif, .jpg, .bmp for images
- Names of files MUST NOT include any spaces. Use an _ (underline instead)
- The Web is case-sensitive. Thus Web, web, and WEB are all different files in the web-world.
- Follow the 8.3 rule when naming files. No more than eight characters following by a three letter extension.
- Use all lowercase letters in naming files.
- Do not use commas, apostrophes, slashes or quotes in naming. You can use ~ (tilde), _ (underscore), and - (hyphen).
- Do not start the name with a number.
Guidelines
HTML instructs the browser how to display information. This is accomplished via tags.
Tags are utilized to specify:
- structure (paragraphs, lists)
- style (links to other pages)
- programming (forms)
A tag is a set of brackets containing a coded command: <p>
All HTML commands must be written inside brackets!
HTML tags generally come in pairs, with a beginning and an ending tag. The ending tag is preceded by a forward slash </>. These work like light switches: the first tag turns the action on and the second turns it off.
<em>these words will appear in italics to show emphasis</em>
HTML tags are not case sensitive but "good coding" means using lowercase letters.
If a browser does not know what to do with a tag, it will ignore it!
Basic HTML Codes
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- tells the browser which version of HTML standards you are coding under
- HTML 4.01 Transitional moves you towards XHTML
- current recommended format
- the strict format may be a bit difficult to conform to
HTML TAG <html> </html>
- starts and ends every web page
- tells the browser that a web page should be displayed
HEAD TAG <head> </head>
- tells the browser what should appear on the title bar (top blue "line" of the browser)
TITLE TAG <title> </title>
- "sandwiched" inside the <head> tags.
- appears in the title bar
- indexed by the search engines, so it appears as the "title" of a webpage in search engine listings and in bookmark files
- be descriptive! This may be your users first contact with your page.
- don't be wordy! Keep the title to less than 60 characters, preferably less than 45
- can not contain any formatting tags, images, or links to other pages
- don't use colons or backslashes - these confuse the browser
- each document must have one and ONLY one
Always end the <title> and <head> tags before moving into the <body> of your page!
BODY TAG <body> </body>
- What appears on the browser display of the web page is determined by what falls between the BODY tags
These tags must appear on all web pages!
Tags That Can Be Added Inside The <body>
COMMENTS TAG <!--your wording-->
- your comments, similar to reminders your write yourself at home or work, are placed in-between the dashes
- your comments do not display in the browser but are meant to assist you later in remembering why you may have added something or as reminders to you to update a section/add information at a later date
- ex: <!--written for my web class project-->
PARAGRAPH TAG <p> </p>
- lets the browser know when to start a paragraph
LINE BREAK TAG <br />
- stops the wording on a line without creating a new paragraph
- this code is often used for "breaking" lines in poetry
HORIZONTAL RULE TAG <hr />
- helps separate sections of the page
- appears as a thin "shadow" line that runs horizontally across the browser window
HEADINGS <h1> </h1>
- Headings organize the <body> of the webpage into sections, just as chapter headings help organize information in a book.
- You are not limited to how much text you can type in a heading, but be concise!
- Heading coding automatically causes the browser to create a line break and a double space after the end Heading code.
- Headings come in "sizes"
- Tags for <h1> headings do not specify that the heading translate to 24-point Times-Roman -- or any other font size you may have used in word processing!
- The user can change the viewing font size in the browser so <h4> could appear as 24-point Arial to that user.