Log In Sign Up

HTML/XHTML Tutorial 3 - The Text Elements

Forum: Graphic and Web Design


Welcome to the JustMommies Message Boards.

We pride ourselves on having the friendliest and most welcoming forums for moms and moms to be! Please take a moment and register for free so you can be a part of our growing community of mothers. If you have any problems registering please drop an email to [email protected].

Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!

Reply Post New Topic
  Subscribe To Graphic and Web Design LinkBack Topic Tools Search this Topic Display Modes
October 15th, 2009, 09:01 AM
CeiCei's Avatar Platinum Supermommy
Join Date: Jul 2005
Location: Mobile, Alabama
Posts: 9,482
Send a message via AIM to CeiCei Send a message via MSN to CeiCei Send a message via Yahoo to CeiCei
From this tutorial on everything you learn should be painless. In fact, you should be able to go through each tutorial in no time at all. What you will be learning here is the most common element of a web page: The text.

In Tutorial 2 I had you add any text between the <body> </body> tags. Looking at the text in your browser you see nothing special about it. If you have decided to use a HTML Editor you should be able to change the look of your text easily; however, you need to know which of those many buttons and sections you see do what. This is what I am here for.

Side Note: Don’t forget to view the source of my example pages so that you get an idea of how each of the elements creates the viewed results.

Comment Element
<!- - Comment Here -->

I figured the best way to start out telling you about text is to introduce you to the comment element. This element allows you to make quick notes within your document. It can be seen if you view the source, but it is not viewable on the web page. Comments are good for remembering different sections of your web page like the content, footer, menu, etc. This is especially important when you begin putting your website into some type of layout.

If you go back to my first web page and view the source, you should see the above comment right before the text you see on the web page.

My First Web Page

Paragraph Element
<p>some text </p>

Basically this element is what it says: It places your text into paragraphs. Everything you place between <p> </p> tags is a paragraph. Without using this element all your text will be one large clump.

Click Here to view my examples.

The Break Element
Some text<br />

The break element simply places your next set of text on the next line. Where the paragraph element places a space between your sectioned tags the break element does not. It is simply the “enter” key on your keyboard.

You might also note that the break element has no closing tag, but it is self-closed as I mentioned for the meta element in Tutorial 2. This is the proper way it should be added to your web page for correct XHTML. Make sure you add a space before the /> as well.

Click Here to view my examples.

The Header Element
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h7>Heading 7</h7>

The header element is what gives your page heading like in a newspaper. Each headline in a newspaper separates it from the actual content. H1 is the largest size for a header and H7 is the smallest. Usually most web designers don’t use h5 – h7 because at that point you can simply add the text.

Click here to view my examples.

Bold, Italics, and Underline Elements
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underline Text</u>
<b><i>Text with Nested Tags</i></b>

These elements are pretty much self explanitory and should be very easy for you to remember. The text I have listed as “Text with Nested Tags” is another XHTML example for you as well. You want to notice how the tags are opened at the beginning and closed in order at the end. All your tags within your web page should follow this same system: <open1><open2> </close2></close1>.

Click here to see examples.

Try each of the above elements. Be creative with the elements. You can have individual pages for them or create a page using each element listed. However, don’t forget to post a link to your example(s) here.

Kassia's Blog | Kassia's Family Blog | In My Purple Passion | The Food Travel Enthusiast

My Three Princes: Cordell (23 y/o), Ernest (5 y/o), Robert (4 y/o)

Reply With Quote

Topic Tools Search this Topic
Search this Topic:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off

All times are GMT -7. The time now is 01:55 AM.

Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0