Attractive Code

Attractive code is important when making a site look neat and organized. There are many different elements to having good looking code. There are different symbols and tools to help you if you are reading the code instead of looking right at the page; the following table has all the elements that should be included in attractive code.

Doctype	An instruction that associates a particular document with a Document Type Definition, or a particular version of HTML
Title	The title keeps the page's purpose clean, clear, and neat
CSS	Gives different parts of the website rules, like colors, fonts, and sizes
Descriptive Block	Things that describe the content they contain; header, section, article
Hierarchy	The order in which the more important parts go first (header1) and the less imporant parts go after (header2)
Image Attributes	The rules that an image importated to your website will follow (Width="400" Height="300")
List Tags	Lists are marked up as lists, depending on the needs of the list: unorderd, ordered, and the underused definition list.
Compound	Used when a styling only needs to be applied to one element
Classes	Used any time similar styling needs to be applied to multiple elements
IDs	Used only when an element appears once on a page and cannot be targeted any other way
Javascript	An interpreted computer programming language that is used in many different websites
Body	The space where the bulk of information on the page lies
Indentation	Tabs or spaces are used to indent the code to indicate the hierarchy of the code and to keep the code looking neat
File Paths	Site resources use these paths for efficiency when finding files and content
Characters Encoded	Special characters are encoded
Dynamic	If something needs to be dynamic, its code is dynamic
Comments	Comments are included to direct the user, but do not effect the site (See below for directions)
Free From Styling	Nothing on the page applies styling or implies what the styling might be. Everything on the page is either a required site resource, content, or describing.
Includes	Used to insert things that are common across multiple pages
Valid	The markup adheres to W3C validation. Tags are closed, required attributes used, etc.

Comments: Comments are very helpful for those foregetful people or people who don't know what certain things do. Applying a comment is a simple way to direct yourself but not effect the code/website. When you open up either the "Code" or "Split" views on dreamweaver there will be a tool bar on the left hand side, and a little more than half way down there is a thoughbubble. Once you click this thought bubble options will show up and one of these options will be "Apply HTML comment" and you can click that and enter your comment without disturbing the site. Easy, simple, and useful!

Internal and External CSS: CSS is one of the most important tools in making a website, and is split into two seperate styles; internal and external. Internal CSS is used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag. External CSS is used when the style is applied to many pages. With external CSS you can change the look of an entire website by changing one file. Each page must link to the style sheet using the <link> tag which goes inside the head section.