Your SlideShare is downloading. ×
Html tags
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html tags

202
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
202
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. This is a basic layout of the most commonly used HTML tagsand what they mean or do. Be sure to use lower case lettersbecause some browsers can be case sensitive whenreading HTML.When working with HTML it is important to remember touse opening and closing brackets ( < > </> ) whereapplicable. You must also remember to make sure andinclude the quotation marks when enclosing items suchas color, size, numbers, etc example ( <bgcolor="#00000"> )otherwise the effect will not work.Color is most always expressed with the # sign first followedby the five digit color code for a specific color. When youlook at the following list if you see a number sign enclosedin quotations "#" or if a question mark enclosed in quotations"?" it means you must provide a specific value in order toobtain the effect you desire. This also holds true forthe url link "url" this means you must provide a url addressin order to link to that page or content.This is just a basic explination for those interested inlearning HTML. You do not need expensive html editorsor software to make basic web pages, but if you wanta more professional looking job it would be advisableto purchase software that can help you with moredetailed tags and make your life easier if you are juststarting out. You can write html code in on notepadthen save as a html document and view it withyour browser.Hope you find this helpful and enjoy learningHTML!
  • 2. Title Tag Description------------------------------------------------------------------------------------------------BASIC ELEMENTS------------------------------------------------------------------------------------------------Document <html> </html< Document root elementtype beginning and end of file------------------------------------------------------------------------------------------------Title <title> </title> Document title, must inheader.------------------------------------------------------------------------------------------------Header <head> </head> Descriptive info, such astitle.------------------------------------------------------------------------------------------------Body <body> </body> Bulk of the page, body ofdocument.------------------------------------------------------------------------------------------------FORMATTING------------------------------------------------------------------------------------------------Bold <b> </b> Bold text style.------------------------------------------------------------------------------------------------Italic <i> </i> Italic text style.------------------------------------------------------------------------------------------------Underline <u> </u> Underlines text.------------------------------------------------------------------------------------------------Strikeout <strike> </strike> Strikes through text.
  • 3. ------------------------------------------------------------------------------------------------Strikeout <s> </s> Strikes through text.------------------------------------------------------------------------------------------------Subscript <sub> </sub> Subscript numbers likefootnotes.------------------------------------------------------------------------------------------------Superscript <sup> </sup> Superscript numbers likecross reference numbers.-------------------------------------------------------------------------------------------------Typewriter <tt> </tt> Teletype or mono spaced.-------------------------------------------------------------------------------------------------Pre formatted <pre> </pre> Display text spacing as is.-------------------------------------------------------------------------------------------------Width <pre width="#"> Width in characters.-------------------------------------------------------------------------------------------------Center <center> </center> Centers text and images.-------------------------------------------------------------------------------------------------Blinking <blink> </blink> Blinking text (netscapeonly).-------------------------------------------------------------------------------------------------Font size <font size="?"> </font> Local font size.( range 1 - 7 )--------------------------------------------------------------------------------------------------Change font <font size="+1-?"> </font> Controls font sizesize rendered.--------------------------------------------------------------------------------------------------Font color <font color="#?????" </font> Controls font color.--------------------------------------------------------------------------------------------------Select font <font face="???> </font> Style of text, such as-Times New Roman.--------------------------------------------------------------------------------------------------
  • 4. Point size <font point size="?"> </font> Size of text.--------------------------------------------------------------------------------------------------Weight <font weight="?"> </font> Thickness of text.--------------------------------------------------------------------------------------------------Base font <basefont size="?"> </font> Size of font 1 - 7.size---------------------------------------------------------------------------------------------------LINKING---------------------------------------------------------------------------------------------------Link <a href="url"> </a> Links text or graphicssomething to another url.---------------------------------------------------------------------------------------------------Link to <a href="url#???"> </a> Links text or graphicslocation to an anchor in anotherdocument.----------------------------------------------------------------------------------------------------Link to <a href="url#???> </a> Links text or graphicslocation in to an anchor in currentcurrent page document.----------------------------------------------------------------------------------------------------Target <a href="url" target="?"> </a> Links text or graphicswindow to a url in a new browserwindow.----------------------------------------------------------------------------------------------------Action <a href="url" onclick="?"> </a> Takes effect when useron clicks on the item.click----------------------------------------------------------------------------------------------------Mouse <a href="url" onmouseover="?"> </a> Takes effect whenover user moves pointer over
  • 5. action item.----------------------------------------------------------------------------------------------------Link to <a href="mailto:@"> </a> Creates blank email toemail indicate address withvisitors default emailclient.----------------------------------------------------------------------------------------------------define <a name="???"> </a> Indicates an anchorslocation name and location ina document.----------------------------------------------------------------------------------------------------GRAPHICS AND SOUND----------------------------------------------------------------------------------------------------Display image <img src="url"> Displays image fromthe indicated url.---------------------------------------------------------------------------------------------------Alignment < img src="url" align=" Aligns the image.top/middle/left/right/bottom">---------------------------------------------------------------------------------------------------Alternate <img src="url" alt="?"> displays the name ordescription of imageif image not displayed.---------------------------------------------------------------------------------------------------Dimensions <img src="url" width="?" The dimensions, inheight="?"> pixels, of the image.---------------------------------------------------------------------------------------------------Dimen. <img src="url" width="%" Dimensions as a percentheight="%"> of page width/height.---------------------------------------------------------------------------------------------------Border <img src="url" border="?"> Border in pixels around
  • 6. image.---------------------------------------------------------------------------------------------------Image <img src="url" ismap> Linking of a portion of anmap image.---------------------------------------------------------------------------------------------------Movie <img dynsrc="?" start="?" Insert movie clip.clip loop="?">---------------------------------------------------------------------------------------------------Background <bgsound src="?" Insert sound clip.sound loop="?" infinite>---------------------------------------------------------------------------------------------------embed <embed src="url"> Insert object into page.object---------------------------------------------------------------------------------------------------Object <embed src="url" width="?" Size in pixels of embedsize hight="?"> object.---------------------------------------------------------------------------------------------------Object <object> </object> Embedded object.---------------------------------------------------------------------------------------------------Parameters <param> Named property value.---------------------------------------------------------------------------------------------------DIVIDERS--------------------------------------------------------------------------------------------------Paragraph <p> </p> Starts and stops paragraph.--------------------------------------------------------------------------------------------------Align <p align="left/center/ Aligns paragraph.text right> </p>--------------------------------------------------------------------------------------------------Line break <br> A single carriage return.--------------------------------------------------------------------------------------------------
  • 7. Horizontal <hr> Horizontal line.rule--------------------------------------------------------------------------------------------------Alignment <hr align="left/ Aligns horizontal line.right/center">-------------------------------------------------------------------------------------------------Thickness <hr size="?"> Thickness in pixels of line.-------------------------------------------------------------------------------------------------Width <hr width="?"> Width in pixels of line.-------------------------------------------------------------------------------------------------Width % <hr width="%"> Width as a percentage of page.-------------------------------------------------------------------------------------------------Solid line <hr noshade> Line without 3D cutout look.-------------------------------------------------------------------------------------------------No break <nobr> </nobr> Prevents line breaks.-------------------------------------------------------------------------------------------------Word break <wbr> Where to break a line if needed.-------------------------------------------------------------------------------------------------STRUCTURAL ELEMENTS-------------------------------------------------------------------------------------------------Heading <h?> </h?> Document header levels 1 - 6.-------------------------------------------------------------------------------------------------Division <div> </div> Generic container.-------------------------------------------------------------------------------------------------Defined <span> </span> Generic container.content-------------------------------------------------------------------------------------------------Block <blockquote> </blockquote> Long quotation block.quote-------------------------------------------------------------------------------------------------
  • 8. quote <q> </q> Short quotation.-------------------------------------------------------------------------------------------------Emphasis <em> </em> Ephasized text usually as italic.-------------------------------------------------------------------------------------------------Strong <strong> </strong> Ephasized text strongly as bold.emphasis-------------------------------------------------------------------------------------------------Citation <cite> </cite> Citation usually italics.-------------------------------------------------------------------------------------------------Code <code> </code> For source code listings.-------------------------------------------------------------------------------------------------Sample <samp> </samp> Sample program output.output-------------------------------------------------------------------------------------------------keyborad <kbd> </kbd> Text that should be entered by user.input-------------------------------------------------------------------------------------------------Variable <var> </var> Program variable or output.-------------------------------------------------------------------------------------------------Definition <dfn> </dfn> Defintion-------------------------------------------------------------------------------------------------Address <address> </address> Author information.-------------------------------------------------------------------------------------------------Large font <big> </big> Uses a large text size.size-------------------------------------------------------------------------------------------------Small font <small> </small> Uses small text size.size-------------------------------------------------------------------------------------------------Insert <ins> </ins> Marks inserted text in a new version.-------------------------------------------------------------------------------------------------
  • 9. Comments <ins cite="url"> </ins> Comments on the additionin a new version.-------------------------------------------------------------------------------------------------Delete <del> </del> Marks deletions in a new version.-------------------------------------------------------------------------------------------------Acroynm <acroynm> </acroynm> Acroynms.-------------------------------------------------------------------------------------------------Abbreviation <abbr> </abbr> Abbreviations.-------------------------------------------------------------------------------------------------BACKGROUNDS-------------------------------------------------------------------------------------------------Tiled <body background="url"> Causes image to tile asbackground background of page.--------------------------------------------------------------------------------------------------<body bgproperties="fixed"> Static image whichremains in the sameWatermark location as visitorsscroll.---------------------------------------------------------------------------------------------------Background <body bgcolor="#?????"> Solid background color.color---------------------------------------------------------------------------------------------------Text <body text="#?????"> Color of text throughout page.color----------------------------------------------------------------------------------------------------Link <body link="#?????"> Color of all links thoughout page.color----------------------------------------------------------------------------------------------------Visited <body vlink="#?????"> Color of all visited linkslink color throughout page.
  • 10. ----------------------------------------------------------------------------------------------------Active <body alink="#?????"> Color of link when selected.link----------------------------------------------------------------------------------------------------LISTS----------------------------------------------------------------------------------------------------Unordered <ul> <li> </ul> Lists with bulleted items.lists-----------------------------------------------------------------------------------------------------List item <li> </li> Indicates an item on the list.-----------------------------------------------------------------------------------------------------Bullet <ul type="disc/circle/square"> Shape of bullet for list.type-----------------------------------------------------------------------------------------------------Bullet <li type="same as above"> Shape of bullet for specifictype 2 item.-----------------------------------------------------------------------------------------------------Ordered <ol> <li> </ol> Numbered list.list-----------------------------------------------------------------------------------------------------Numbering <ol type="A|a|I|i|1> Type of numbering for the list.type-----------------------------------------------------------------------------------------------------Numb. <li type="same as above"> Type of numbering for specifictype 2 list item.------------------------------------------------------------------------------------------------------Starting <ol start="?"> Starting number for list.number------------------------------------------------------------------------------------------------------Starting <li value="?"> Starting number for this & subsequent.
  • 11. number 2 item.------------------------------------------------------------------------------------------------------Definition <dl> </dl> A list of definitions.list------------------------------------------------------------------------------------------------------Def. term <dt> </dt> Definition term.------------------------------------------------------------------------------------------------------Definition <dd> </dd> Definition of a term.------------------------------------------------------------------------------------------------------Menu <menu> </menu> Display menu type list.list------------------------------------------------------------------------------------------------------Directory <dir> </dir> Directory link.list------------------------------------------------------------------------------------------------------TABLES------------------------------------------------------------------------------------------------------Define <table> </table> Signals the start of a table.table------------------------------------------------------------------------------------------------------Table <table align="left|right|center"> Aligns table within browser.alignment------------------------------------------------------------------------------------------------------Table <table border> </table> Table border either on or off.border------------------------------------------------------------------------------------------------------Table <table border="?"> </table> Set width of table border.border 2------------------------------------------------------------------------------------------------------Cell <table cellspacing="?"> Places specific amount of space
  • 12. spacing between cells within table.------------------------------------------------------------------------------------------------------Cell <table cellpadding="?"> Places specific amount of spacepadding between cells border and contents.------------------------------------------------------------------------------------------------------Desired <table width="?"> Width of table in pixels.width------------------------------------------------------------------------------------------------------Width <table width="%"> Width of table in percentage of page.percentage------------------------------------------------------------------------------------------------------Table <table bgcolor="#?????"> </table> Overall backgroundcolor color of table.------------------------------------------------------------------------------------------------------Table <table frame="void|above|below Controls how the borderframe hsides|lhs|rhs|vsides|box|border"> around outer edge of</table> table is displayed.------------------------------------------------------------------------------------------------------Table <table rules="none|groups| Controls vertical & horizontalrules rows|cols|all"> </table> lines displayed.------------------------------------------------------------------------------------------------------Border <table bordercolor="#???"> color of the table border.color </table>------------------------------------------------------------------------------------------------------Table row <tr> </tr> table row.------------------------------------------------------------------------------------------------------Alignment <tr align="left|right|center Alignment of the table row.middle|bottom">------------------------------------------------------------------------------------------------------Table cell <td> </td> Specific table cell, must appear withintable rows.
  • 13. ------------------------------------------------------------------------------------------------------Alignment <td align="left|right|center Alignment of table cell.valign="top|middle|bottom">------------------------------------------------------------------------------------------------------No line <td nowrap> No line breaks within the table cell.breaks------------------------------------------------------------------------------------------------------Columns <td colospan="?"> The number of columns the cellto span should span.------------------------------------------------------------------------------------------------------Rows to <td rowspan="?"> The number of rows the cell shouldspan span.------------------------------------------------------------------------------------------------------Width <td width="?"> Width of cell in pixels.------------------------------------------------------------------------------------------------------width in <td width="%"> Width as a percentage of table.percentage------------------------------------------------------------------------------------------------------Cell Color <td bgcolor="#???"> Background color of cell.------------------------------------------------------------------------------------------------------Header cell <th> </th> Table cell header info (bold & centered).------------------------------------------------------------------------------------------------------Alignment <th align="left|right|center| Alignment of the headermiddle|bottom"> cell.------------------------------------------------------------------------------------------------------No line <th nowrap> No line breaks with the header cell.breaks------------------------------------------------------------------------------------------------------Coumn to <th colspan="?"> Number of columns the header cellspan should span.------------------------------------------------------------------------------------------------------
  • 14. Rows to <th rowspan="?"> Number of rows the header cellspan should span.------------------------------------------------------------------------------------------------------Width <th width="?"> Width of header cell in pixels.------------------------------------------------------------------------------------------------------Width as <th width="%"> Width of header cell as percentagepercentage table.------------------------------------------------------------------------------------------------------Cell color <th bgcolor="#???"> Background color of cell.------------------------------------------------------------------------------------------------------Table <tbody> Identifies the specific body section of table.body------------------------------------------------------------------------------------------------------Table <tfoot> </tfoot> Seperates group of cells to serve asfooter footer material for the table (mustcome before <thead>).------------------------------------------------------------------------------------------------------Table <thead> </thead> Seprates group of cells to serve asheader header material for table.------------------------------------------------------------------------------------------------------Table <caption> </caption> Caption for a table.caption------------------------------------------------------------------------------------------------------Alignment <caption align="top|bottom| Alignment for the captionleft|right"> of a table.------------------------------------------------------------------------------------------------------Column <col> </col> Groups column attributes.------------------------------------------------------------------------------------------------------Column <col width="?"> </col> Column width in pixels.width------------------------------------------------------------------------------------------------------
  • 15. Width as % <col width="%"> </col> Column width as % of table.------------------------------------------------------------------------------------------------------Group <colgroup> </colgroup> Groups column structure.columns------------------------------------------------------------------------------------------------------Group <colgroup width="?"> </colgroup> Width of group in pixels.width------------------------------------------------------------------------------------------------------Group width <colgroup width="%"> </colgroup>as percent------------------------------------------------------------------------------------------------------FRAMES------------------------------------------------------------------------------------------------------Frame <frameset> </frameset> Creates layouts of framesdocument instead of <body>.------------------------------------------------------------------------------------------------------Row <frameset rows=",,,"> </frameset> Comma seperated listheights of size of each columnin frameset (pixels or %)------------------------------------------------------------------------------------------------------Column <frameset cols=",,,"> </frameset> Comma seperated listwidth of size of each columnin frameset (pixels or %)------------------------------------------------------------------------------------------------------Borders <frameset framesetborder="yes|no"> If frame has a</frameset> visible border or not.------------------------------------------------------------------------------------------------------Border <frameset border="?"> Width of frame border if visible.width </frameset>------------------------------------------------------------------------------------------------------
  • 16. Border <frameset bordercolor="#???"> Color of frame border.color </frameset>------------------------------------------------------------------------------------------------------Frame <frameset framespacing="?"> Number of pixels spacespacing </frameset> between frames.------------------------------------------------------------------------------------------------------Define <frame> Specific contents of an individual frame.frame------------------------------------------------------------------------------------------------------Display <frame src="url"> Identifies initial contents of the frame.document------------------------------------------------------------------------------------------------------Frame <frame name="?"_blank|_self| Assigns a name to currentname _parent|_top> frame.------------------------------------------------------------------------------------------------------Margin <frame marginwidth="?"> Distance between content andwidth frames left & right margin.------------------------------------------------------------------------------------------------------Margin <frame marginheight="?"> Distance between content &height frames top & bottom margin.------------------------------------------------------------------------------------------------------Scroll <frame scrolling="yes|no|auto"> Controls how window is orbar isnt scrolled.------------------------------------------------------------------------------------------------------Borders <frame frameborder="yes|no"> Border either on or off.------------------------------------------------------------------------------------------------------Border <frame bordercolor="#???"> Color of border of frame.color------------------------------------------------------------------------------------------------------Unframed <noframes> </noframes> For non-frames browsers.content
  • 17. ------------------------------------------------------------------------------------------------------Inline <iframe> </iframe> Inline subwindow, takes same attributeframe as frame.------------------------------------------------------------------------------------------------------Dimensions <iframe width="?" height="?"> Width & height of sub</iframe> window in pixels.------------------------------------------------------------------------------------------------------Dimensions <same as above with % added> Subwindow as %as percentage------------------------------------------------------------------------------------------------------POSITIONING (netscape only)------------------------------------------------------------------------------------------------------Multi <multicol cols="?"> </multicol> More than one column.column------------------------------------------------------------------------------------------------------Column <multicol gutter="?"> </multicol> Gutter of the column.gutter------------------------------------------------------------------------------------------------------Width <multicol width="?"> </multicol> Width of the column.------------------------------------------------------------------------------------------------------Spacer <spacer> Insertion of space.------------------------------------------------------------------------------------------------------Spacer <spacer type="horizontal|vertical|block"> Type of spacetype inserted.------------------------------------------------------------------------------------------------------Size <spacer size="?"> Size of spaces inserted.------------------------------------------------------------------------------------------------------Dimensions <spacer width="?" or height="?">------------------------------------------------------------------------------------------------------Alignment <spacer align="right|left|center">
  • 18. ------------------------------------------------------------------------------------------------------Layer <layer> </layer> Ability to view pages using preciselypositioned overlapping layers.------------------------------------------------------------------------------------------------------name <layer id="?"> </layer> Specifies name of layer.------------------------------------------------------------------------------------------------------Location <layer left="?" or top="?"> Location of layer.</layer>------------------------------------------------------------------------------------------------------visible <layer visibility="show|hidden|inherit"> Visibility of layer.</layer>------------------------------------------------------------------------------------------------------color <layer bgcolor="#???"> </layer> Background color of layer.------------------------------------------------------------------------------------------------------Inline <ilayer> </ilayer> A layer within a layer (take same attrib.layer as layer).------------------------------------------------------------------------------------------------------Created by bobby1234 at 10:00 pm on 1/09/08 and posted for downloadat http://www.proprof.com