Internet Brain » Simple Webpage Creation

Thursday, December 19th, 2002

Simple Webpage Creation

Tag Kit

One final thing you’ll need is a list of tags that you will most likely want for your webpages. This is only a starter kit, there are a great many more for more complex sites. Zvon.org has a great list of them (http://www.zvon.org/xxl/xhtmlReference/Output/index.html)

<a> </a>	The anchor or link tag. When you want to link from your page to another, you use an <a></a> tag. When you want to link to a specific part of your own page ("Back to top" links) you add an anchor to that part of the page and link to the anchor.	Link= <a href="http://mypage.com/index.html">My Page</a> Anchor=<a id="paragraph"></a> Link to anchor= <a href="http://mypage.com/index.html#paragraph">Paragraph in My Page</a> Or Link to anchor= <a href="#paragraph">Paragraph in My Page</a>
<img />	The image tag to include pictures on your page. The "src" is the navigation to the picture and the "alt" is the phrase to describe the picture or the information it represents if the picture doesn’t load.	<img src="imagesfolder/mydogspicture.gif" alt="A picture of my dog" /> note- the link to the picture is called a "relative link" as opposed to an "absolute link." An absolute link starts with http:// and gives the full Internet address needed to reach the photo (or webpage, etc.). A relative link goes from the page to the item linked, which in this case is in a subfolder called "imagesfolder".
<hr />	Horizontal rules are the lines drawn horizontally across the page. They can be helpful for breaking up content into more manageable pieces.	`<p>Part 1</p> <hr /> <p> Part 2</p>`
<table></table>	Used to display tables of data.	`<table> <tr> <td>My info</td> <td>more info</td> </tr> <tr> <td> second row</td> <td> second column</td> </tr> </table>`
<tr></tr>	Creates table rows
<td></td>	Marks table cells (the individual boxes). Columns are created automatically by having multiple cells in the same row. The example creates a 2 row, 2 column table.
<ul></ul>	Unordered (bulleted) list	`<ul> <li> list item</li> <li> second list item</li></ul>`
<li></li>	List items. Everything in a list must be inside a list item.	See above and below
<ol></ol>	Ordered (numbered) list Browsers will add the numbers automatically.	`<ol> <li> list item</li> <li> second list item</li></ol>`
<div></div>	Block-level ** container element	`<div><p> My first paragraph.</p> <p>My second paragraph</p></div>` In this case, putting the paragraphs in a div allows you to manipulate them separately from everything else on the page.
<span></span>	Inline ** container element.	`<p> Words <span>Highlighted words</span> more words.</p>`

**An inline element is one that does not interrupt the flow of a sentence, such as <span> and links. A block level element stands alone. Setting it in the middle of a sentence will look like putting a hard return in front of and after the element.

Pages: 1 2 3 4 5

By Laura @ 9:27 am in Tutorials

Comments are closed.