COMMON HTML TAGS with Opening and Closing Tags<!DOCTYPE HTML PUBLIC "-//W3CIIDTD HTML 4.01 Transitional//EN">-chtmb-c/html>Head Tags<heade-c/head><!-- Comment tag --><titlee-c/title><meta name="" content="namel, name2,"><meta name="description" content="Description goes here.">Body Tags<body><lbody><px/p><body bgcolore?»<blockquoteo-c/blockquote><brI> <!-- No closing tag --><centeo-c/center><p align=?><ip>Lists-cdb-c/db-<dde-c/dd>-cdc-c/dc-<ole-c/ol>-cub-oub--clc-itemname-c/li>Text Tags<hl></hl> <!-- hI - h6 --><fontc-c/font>"<pree-c/pre><u><iu>-chb-ohb-<h6x/h6><bx/b><i><ii><tt><itt><citee-c/cite><em><iem><strongx/strong>Document definition typeCreates an HTML document.Sets off the title and other information that isn't displayed on the Web page itself.For making notes that will not render in the browser.Puts the name of the document in the title bar.S~~rch content by keyword.Search content by descriptionSets off the visible portion of the document __Creates a new paragraph.Sets the background color, using name_or hex valueIndents text from both sides'Break (soft-return)Alignment TagsAligns a paragraph to the left, right, or center.Creates a definition list.Precedes each definition.Precedes each definition term.Creates a numbered listCreates a bulleted listprecedes each list item, and adds a numberType sizesCreates fontsCreates preformatted text.Creates underlined textCreates the largest headlineCreates the smallest headlineCreates bold textCreates italic textCreates teletype, or typewriter-style textCreates a citation, usually italicEmphasize~ a word (with italic or bold)Emphasizes a word (with italic or bold)-cfontsize=?></font><font colore'o-ofonc- Links<a href="name.html"></a><a href="#linkname" »cle»<ahref=''http://www.w3.org''></a><a href="mailto:[email protected]"><la><a name="NAME"><la><a href="#NAME"></a><body texte"><body lmk»?»<body vlink="><body alink='i>,Graphical Elements<img src="image.jpg"><img src="name" border>"><img src="name" align="><hrc-c/hr>«hr size=?><hr width="><hr nos hade>Tables<tablec-c/table><tr><ltr><td></td><th><lth>Table Attributes<table border=#><table cellspacing=s><table cellpadding=#><table width=# or %><tr align="> or -ctd align=?><tr valigne?» or <td valigne?»-ctd colspanes»<td rowspaneso-Sets size of font, from 1 to 7)Sets font color, using name or hex valueNon-breaking spaceCreates an relative hyperlinkCreates a hyperlink within a document (a.k.a "Anchor")Creates an absolute hyperlinkCreates a mailto linkCreates a target location within a document.Links to that target location from elsewhere in the document.Sets the text color, using name or hex valueSets the color of links, using name or hex valueSets the color of followed links, using name or hex valueSets the color of links on click,Adds an imageSets size of border around an imageAligns an image: left, right, center; bottom, top, middleInserts a horizontal rule.Sets size (height) of rule.Sets width of rule, in percentage or absolute value.Creates a rule without a shadowCreates a tableSets off each row in a tableSets off each cell in a rowSets off the table header (a normal cell with bold, ce~tered text)I-Sets width of border around table cells~ets amount of space between table cellsSets amount of space between a cell's border and its contentsSets width of table - in pixels or as a percentage of document widthSets alignment for cell(s) (left, center, or right)Sets vertical alignment for cell(s) (top, middle, or bottom)Sets number of columns a cell should spanSets number of rows a cell should span (default= l )CSS StructureCascading Style Sheets in Dreamweaver1. Internal CSS: create a style sheet embedded inside the .html document.2. External CSS: create it as a separate .css file.3. Inline CSS: embeds CSS in HTML codeThree types of CSS creation:When working with many pages it is better to create a separate or external .css file and link it toother pages. Benefits are:Saves time,• Streamlines changes• Decreases file sizeTHE SYNTAX OF CSSHere is an example of a simple CSS rule so you can see the structure of the syntax.selector {property: value;}SelectorThe first part of the rule is called a selector. The selector represents a structure that can be usedas a condition to define how an element looks in the browser.PropertyThe property section of the CSS rule defines a specific area of the structure, such as padding ormargin properties.ValueThe value section of the CSS rule defines a measurement-in general terms. In the site_style.cssfile here is a breakdown:SELECTOR:PROPERTY:.definition {margin-left: 100px;VALUE (100px)margin-right: 100px;text-align: left;font-size: 10px;font-weight:inherit;line-height: 13px;color: #333333;font-family: Verdana, Arial, Helvetica, sans-serif;A CSS rule may contain many property and value pairs. Each would perform a specific task withinthe structure to provide you with the look and feel you want for the rule.• The Property and Value must be set off by open and closed curly brackets. { }• Property and value pairs are separated by a colon:• The space after the colon is optional.• Immediately following the value, you have a semicolon;• The semicolon is said to be optional after the last property/value pair in your CSS
View Full Document
Unlocking...