Coding a basic website in XHTML Strict
Posted: Mon Apr 27, 2009 9:58 pm
by G-man
Coding a basic website in XHTML Strict
This is a simple tutorial on how to set up your own basic website using XHTML and a CSS stylesheet. There are numerous reasons why one might prefer to use XHTML strict say versus HTML transitional, but essentially if you're not creating websites using XHTML Strict markup, then you're a big weenie. :p
I'm going to assume that everyone already knows about uploading files and folders to the server using FTP and how all of that is done. If you're not familiar with any of that, please feel free to ask.
Here's the basic stripped-down setup:
XHTML ( Extensible HyperText Markup Language )
This is the website page that viewers see.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title>Simple XHTML Website</title>
<link rel="stylesheet" href="style/stylesheet.css" type="text/css" />
</head>
<body>
</body>
</html>
CSS ( Cascading Style Sheets )
This is a seperate page that contains all of the design elements, fonts, images... that make up the look of your website. The stylesheet is accessed via the link in the XHTML page.
body {
}
Coding a basic website in XHTML Strict
Posted: Wed Apr 29, 2009 6:20 pm
by G-man
So that's the basic website... now we need to add some stuff to it.
I suppose we should go over some basic HTML and CSS
HTML
Basic Tags
Creates an HTML document
Sets off the title and other information that isn't displayed on the Web page itself
Sets off the visible portion of the document
Body Attributes
Sets the background color, using name or hex value
Sets the text color, using name or hex value
Sets the color of links, using name or hex value
Sets the color of followed links, using name or hex value
Sets the color of links on click
Disallows text selection with the mouse and keyboard
Text Tags
Creates preformatted text
Creates the largest headline
Creates the smallest headline. Can also use - for sizes in between.
Creates bold text
Creates italic text
Creates teletype, or typewriter-style text
Creates a citation, usually italic
Emphasizes a word (with italic or bold)
Emphasizes a word (with italic or bold)
Sets size of font, from 1 to 7
Sets font color, using name or hex value
Links
Creates a hyperlink
Creates a mailto link
Creates an image/link
Creates a target location within a document
Links to that target location from elsewhere in the document
Formatting
Creates a new paragraph
Aligns a paragraph to the left (default), right, or center.
Inserts a line break
Indents text from both sides
Creates a definition list
Precedes each definition term
Precedes each definition
Creates a numbered list
Creates a bulleted list
Precedes each list item, and adds a number or symbol depending upon the type of list selected
A generic tag used to format large blocks of HTML, also used for stylesheets
Adds an image
Aligns an image: left, right, center; bottom, top, middle
Sets size of border around an image
Inserts a horizontal rule
Sets size (height) of rule
Sets width of rule, in percentage or absolute value
Creates a rule without a shadow
Forms
For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.
Creates all forms
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
Sets off each menu item
Creates a pulldown menu
Sets off each menu item
Creates a text box area. Columns set the width; rows set the height.
Creates a checkbox. Text follows tag.
Creates a radio button. Text follows tag
Creates a one-line text area. Size sets length, in characters.
Creates a Submit button
Submit Creates an actual button that is clicked
Creates a Submit button using an image
Creates a Reset button
CSS
Syntax
selector {property: value;}
External Style Sheet
Internal Style
selector {property: value;}
Inline Style
General
Class String preceded by a period
ID String preceded by a hash mark
div Formats structure or block of text
span Inline formatting
color Foreground color
cursor Appearance of the cursor
display block; inline; list-item; none
overflow How content overflowing its box is handled
visible, hidden, scroll, auto
visibility visible, hidden
Font
font-style Italic, normal
font-variant normal, small-caps
font-weight bold, normal, lighter, bolder, integer (100-900)
font-size Size of the font
font-family Specific font(s) to be used
Text
letter-spacing Space between letters
line-height Vertical distance between baselines
text-align Horizontal alignment
text-decoration blink, line-through, none, overline, underline
text-indent First line indentation
text-transform capitalize, lowercase, uppercase
vertical-align Vertical alignment
word-spacing Spacing between words
Border
border-width Width of the border
border-style dashed; dotted; double; groove; inset; outset; ridge; solid; none
border-color Color of the border
Positioning
clear Any floating elements around the element?
both, left, right, none
float Floats to a specified side
left, right, none
left The left position of an element
auto, length values (pt, in, cm, px)
top The top position of an element
auto, length values (pt, in, cm, px)
position static, relative, absolute
z-index Element above or below overlapping elements?
auto, integer (higher numbers on top)
Box Model
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;
Background
background-color Background color
background-image Background image
background-repeat repeat, no-repeat, repeat-x, repeat-y
background-attachment Background image scroll with the element?
scroll, fixed
background-position (x y), top, center, bottom, left, right
List
list-style-type Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-position Position of the bullet or number in a list
inside; outside
list-style-image Image to be used as the bullet in a list
That pretty much covers that... so were' going to add stuff to the body of the page. What do we need? How about we start out with the basics...
We definitely need some sort of a menu or navigation. We also need a banner at the top, some information about our website, and a footer.
So far we have basic code for the html page that visitors see and a css page that provides all of the visual code for our site. We're going to create two text pages and name them and then add the extensions .html and .css respectively and save them in a folder. Any images that we create we will add them to a folder titled "images".