HTML Element
HTML
From Wikipedia, the free encyclopedia
An HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have attributes specified. Elements can also have content, including other elements and text. HTML elements represent semantics, or meaning. For example, the title element represents the title of the document.
In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between. Tags are composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag.
Basic Formatting Tags
- <b>bold</b>
- <strong>strong</strong> (usually bold)
- <u>underlined</ul>
- <i>italics</i>
- <em>emphasis</em> (usually italics)
- <strike>strike through</strike>
- <center>This centers text on the page</center>
- <tt>teletype text</tt> (typewriter text)
- <blockquotes>blockquotes</blockquotes> (how this looks will depend on your CSS template but it usually indents your paragraph)
There is a whole debate on the difference between <b> and <strong> tags and between <i> and <em> tags. If you want to see some of the arguements you might like to check out this old WMW thread. There are plenty of other explanations and discussions on the topic going around – but all you’ll probably need to know is that the results are generally the same if you use <b> and <strong> and are similarly the same if you use <i> and <em>. Purists are probably going to kill me for this, but I’m more interested in the results than working out all the reasoning behind it!
Links
- Basic Link <a href=”url”>link title</a> (where ‘url’ is the page you want to link to and ‘link title’ is the word/s that you want the link to say.
- Email Link <a href=”mailto:EMAIL”></a> (where ‘EMAIL’ is the email address you want to be a link).
Heading Tags (vary according to CSS)
- <h1>An important heading</h1>
- <h2>A slightly less important heading</h2>
- <h3>A less important heading again</h3>
- <h6>The smallest heading</h6>
Font Tags
- Font Size – <font size=”x”>text to change</font> – change ‘x’ value to get different sizes. 1 is small and 7 is big.
- Colors – <font color=”#FF0000″>I’m red!</font> (get color codes here)
Font type – <font face=”Arial”>Hello there</font>
Image Tags
- Basic Image tag – <img src=”url”> (where url = the url of the image you want to show)
- Image with sizing <img src=”url” width=”200″ height=”150″>
- Align image left – <img src=”name” align=left> (substitute ‘left’ with ‘right’ to align it right)
- Alt Tags – <img src=”url” alt=”short description of image”> (an alt tag tells the reader what they are missing if the image doesn’t load in their browser.
- Image as a link – <a href=”link url”><img src=”url”></a> (where ‘link url’ is the url of the page you want the image to link to and ‘url’ is the image location).
- Image with border – <img border=”1″ src=”url”> (the larger the number in the border “” the thicker the border)
- Space Around Image <img src=”url” hspace=10 vspace=10> (hspace is the horizontal space and vspace is the verticle space. The numbers are the amount of pixels sounding the image)
Putting it all together might look something like:
- <a href=”img url”> <img border=”1″ src=”url” width=”65″ height=”38″ align=left hspace=10 vspace=10></a> (ie this is an image that is a link that has a border 1 pixel wide, that is 65 pixels wide and 38 pixels high, that aligns left on the page and is surrounded by 10 pixels both horizontally and vertically).
Unordered Lists (usually bullet point type lists)
<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>
Ordered Lists (usually numbered lists)
<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>
p/s:This article is from my old blog --> http://perjalananlifeaku.blogspot.com
0 comments:
Please leave a message, email or phone number to be contacted.