Planet Shake
You are watching the site as a guest to see everything that gets offered register for free or log in....or take a look around on the few things that you can see as a guest.....

Planet Shake

Discover Your World Here !
 
HomeHome  PortalPortal  GalleryGallery  FAQFAQ  MemberlistMemberlist  UsergroupsUsergroups  RegisterRegister  Log inLog in  

Share | 
 

 Familiarise yourself with seven of the most-used elements.

View previous topic View next topic Go down 
AuthorMessage
Admin
Admin
Admin


Posts : 163
Points : 13072
Reputation : 69
Join date : 2009-02-08
Age : 22
Location : Montalban Rizal (Philippines)

PostSubject: Familiarise yourself with seven of the most-used elements.   Thu May 20, 2010 7:26 pm

Lesson : A few more elements


Did you manage to make a few pages on your own? If not, here is an
example:


Code:
<html>

  <head>
  <title>My website</title>
  </head>

  <body>
  <h1>A Heading</h1>
  <p>text, text text, text</p>
  <h2>Subhead</h2>
  <p>text, text text, text</p>
  </body>
 
</html>




Now what?


Now it is time to learn seven new elements.
In the same way you emphasise the text by putting it between the
openning tag and the closing tag ,
you can give stronger emphasis by using the openning tag
and the closing tag
.

Example 1:

Code:

<strong>Stronger emphasis.</strong>




Will look like this in the browser:

Stronger emphasis.



Likewise, you can make your text smaller using small:

Example 2:

Code:

<small>This should be in small.</small>




Will look like this in the browser:

This should be in small.



Can I use several elements at the same time?


You can easily use several elements at the same time as long as you avoid
overlapping elements
. This is best illustrated by an example:

Example 3:
If you want to emphasise small text, it must be done like this:

Code:

<em><small>Emphasised small text</small></em>




And NOT like this:

Code:

<em><small>Emphasise small text</em></small>




The difference is that in the first example, we closed the tag we
first opened last. This way we avoid confusing both ourselves and the
browser.

More elements!


As mentioned in Lesson 3 there are elements which are opened
and closed in the same tag
. These so-called empty elements are
not connected to a specific passage in the text but rather are isolated
labels. An example of such a tag is
which
creates a forced line break:

Example 4:

Code:

Some text<br /> and some more text in a new line




Will look like this in the browser:

Some text
and some more text in a new line



Notice that the tag is written as a contraction of an opening and
closing tag with an empty space and a forward slash at the end: />.
Another element that is opened and closed in the same tag is /> which is used to draw a horizontal line ("hr" stands for
"horizontal rule"):

Example 5:

Code:

<hr />




Will look like this in the browser:





Examples of elements that needs both an opening tag and a closing tag
- as most elements do - is ul, ol and li.
These elements are used when you want to make lists.

ul is short for "unordered list" and inserts bullets for
each list item. ol is short for "ordered list" and
numbers each list item. To make items in the list use the li
tag ("list item"). Confused? See the examples:

Example 7:

Code:

<ul>
  <li>A list item</li>
  <li>Another list item</li>
</ul>




will look like this in the browser:


  • A list item
  • Another list item




Example 8:

Code:

<ol>
  <li>First list item</li>
  <li>Second list item</li>
</ol>




will look like this in the browser:


  1. First list item
  2. Second list item




Phew! Is that all?


That is all for now. Again, experiment and make your own pages using
some of the seven new elements you learned in this lesson:

Code:

<strong>Stronger emphasis</strong>
<small>Small text</small>
<br /> Line shift
<hr /> Horizontal line
<ul>List</ul>
<ol>Ordered list</ol>
<li>List item</li>

_________________
Back to top Go down
View user profile http://cursebox.tk
 
Familiarise yourself with seven of the most-used elements.
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Sample UI Element file for google site.
» Locating dynamic IDs generated when a new Directory is created !
» Identifying the element
» How to get total rowcount of a table using Selenium IDE
» How to click random checkbox

Permissions in this forum:You cannot reply to topics in this forum
Planet Shake :: Graphics & Multimedia :: HTML & Website Design-
Jump to:  
Free forums hosting | © phpBB | Free forum support | Contact | Report an abuse | Free forum