Home » Internet » Web Programming » HTML

HTML Basics

Ranked #8,487 in Internet, #352,584 overall | Donates to Squidoo Charity Fund

How-To write HTML pages

Author: Jason Gonzalez
Dated: August 3, 2009

This lens teaches the very basics of HTML (Hypertext Markup Language) for those who want to use it in general design or to customize their Squidoo lens. It is geared toward total beginners to HTML.

The image in this section is a public domain image provided by FreeClipartNow.com.

Without further ado.. The Tags

These are the basic building block tags

First, pertinent information

When creating webpages, one writes the code in Notepad for Windows, TextEdit for Mac OS X or a text editor, such as HTML Kit. Then he or she saves the file with a descriptive title and a .html extension. To preview (see the file before it is published) in a web browser, he or she goes to the File menu and Opens File or a similar option, then navigates to where the file is stored. I won't go into the details of how to publish web pages because it is beyond the scope of this lens.

Below are the HTML tags most people use to create web pages. I will give an example of how to create each tag followed by what the web browser displays.

HTML tag:

These are the pair of tags that wrap around every HTML document and are required for every web page.


<html>
<head>
...
</head>
<body>
rest of web page code goes here...
</body>
</html>



Head and Title tags:

The head tag goes right after the html tag. It usually includes links to external Cascading Style Sheets, and title information that shows up in the title bar of the browser.


<head>
<title>My first web page- this shows up in your browser's title bar</title>
</head>



The Body tag:

The body tag defines the body of the document. It goes directly after the head tag.


...
</head>
<body>
your content...
</body>
</html>



Paragraph tag:


<p>paragraph text goes here</p>


Example of paragraph text. This is the very basic building block of most web pages.



Heading tags:

Since heading tags aren't allowed in Squidoo text modules, I provided a picture below as an example.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>





Hyperlink tag:

Hyperlink tags link one website to another website. Now we're getting into what the web is really about! In this case I will give an example linking to my Wordpress tutorial site.


<a href="http://www.jgpwstutorials.wordpress.com">See more at JGPWS Tutorials</a>



See more at JGPWS Tutorials

The part between the quotes is the actual website one links to, while the text between the > (greater than) and < (less than) symbols is the keywords one uses to link to the site.

Image tag:

The image tag places images into an HTML document. This is the best tag to use within blogs or eBay listings that have limits on how many pictures one can upload, but allow images to be linked using HTML. I will create a link to a logo as an example.


<img src="http://www.jgpws.com/JGPWS_logo_03_gray.jpg" />





The address between the quotes goes directly to the image hosted at an external website. If one is hosting images at Photobucket or Flickr, they usually have a direct link option, which begins with http://... This part goes after the first quotes.

List tags:

HTML lists are said to be good for Search Engine Optimization. I use them frequently in my HTML documents. The two main list types are ordered and unordered lists, whereas the ul or ol tags define what format the list will have and the li tags create new list entries. Typically, text goes in these lists, but images can be also be placed within lists.


<ol> or <ul>
<li>Lists:</li>
<li>List item one</li>
<li>List item two</li>
</ol> or </ul>




  1. Ordered Lists:

  2. List item two

  3. List item three




  • Unordered Lists:

  • List item one

  • List item two

Special Tags

These are tags that modify text and other common tags

Many tags have two variations. In this case, character style tags are the first variation, which change appearance; logical style tags are the second variation, which relate to the meaning of the text the tags surround.

Bold and Strong tags:


<b>Text goes here</b>
<strong>Text goes here</strong>


This is example of bold and strong text within a paragraph



Italic and Emphasis tags


<i>Text goes here</i>
<em>Text goes here</em>


italic tags and tags that emphasize text.



Code tag:
<code>a + b = c. Display computer code and programming text.</code>


a + b = c. Display computer code and programming text.



Preformat tag and special characters:

The preformat (pre) tag is used often in combination with HTML entities to display code on the page. For example, the code I am showing on this page was written using special HTML entity characters, so the code I typed wouldn't be misinterpreted by the browser as HTML. The pre tag renders code with the exact formatting one types. Here I will have to fake the look, as the pre tag is not supported in this text module.


<pre>
&lt;p&gt;This is how to display code in a text box
that supports html entities.&lt;/p&gt;
</pre>




<p>This is how to display code in a text box
that supports html entities.</p>




*Common HTML code to display:
&lt; is written to show < (less than symbol)
&gt; is written to show > (greater than symbol)
&amp; is written to show & (ampersand)
&quot; is written to show " (double quotes)
Other special codes:
&copy; is written to show © (copyright symbol)
&reg; is written to show ® (registered trademark)
&pound; is written to show £ (pound symbol)
&ntilde; is written to show ñ (small n, tilde)



*information in this section can be found in the HTML 4.01 quick reference of Sams Teach Yourself Web Publishing with HTML & XHTML in 21 Days, one of the books I used to learn HTML. There is a link to it's Amazon page later on within this lens.

Table tag:

Previously, tables were used to layout web pages. But, with the invention of Cascading Style Sheets to lay out web pages nowadays, the use of tables is being discouraged in favor of current web design standards. Tables are still useful for tabular data (charts, spreadsheets, picture databases). The information shown in em text below represents optional information.


<table border="0" cellpadding="10"> (defines a table)
<tr> (table row)
<th>Heading 1</th> (table heading)
<th>Heading 2</th>
</tr>
<tr>
<td>Column 1</td> (table column)
<td>Column 2</td>
</tr>
</table>





Style tag:

Did you notice the fancy gray boxes around each of the code examples. This was accomplished via the style tag. This tag adds inline CSS style rules to typical HTML documents and is especially useful in Squidoo lenses. I won't go into to much detail because there is a lot that can be done. I will just give a small example below of a styled paragraph.


<p style="font-family: serif; color: brown; background-color: BlanchedAlmond; padding: 0.5em; border: 2px solid brown;">This paragraph has a serif font, brown text, a Blanched Almond background color, padding of 0.5em and a 2 pixel, solid, brown border.</p>



This paragraph has a serif font, brown text, a Blanched Almond background color, padding of 0.5em and a 3 pixel, solid, brown border.



Fore more information on Cascading Style Sheets, I recommend these sites:
World Wide Web Consortium
w3schools.com
tizag.com
JGPWS Tutorials- my own site, which further expands on CSS.

Related lenses specific to Squidoo

Now, it's time to answer what you really want to know. You may be asking, "What kind of HTML can I use in Squidoo?" Below are the two lenses that are a must for those looking for the answer.
Loading

Go beyond this lens with these books

The following two books were the two main recommended readings on HTML provided by Mt. Sierra College during my education. I still refer to both books as references and when I'm in a bind and can't remember how to type certain tags. Some of the books are more updated versions.
Loading

New Flickr Photos

Loading

Questions or Comments?

If you have any questions about HTML, post them here and I will answer them based on my best knowledge.

submit
  • Reply
    jgpws Jun 4, 2010 @ 12:11 am | delete
    Hello Nisarg,

    I think it would be a good idea to post a response here, so others can read as well.

    I've followed a few tutorials from W3Schools.com; their HTML section is a good place to start, skipping to the advanced section. W3Schools also features Javascript and CSS sections. Another source I use and post tutorials to is Tutorialized.com. They have a wide range of tutorials in many subjects. Most of the time, I just Google more specific stuff. Good luck in your continued learning.
  • Reply
    nisarg May 27, 2010 @ 6:31 am | delete
    hey mate,
    i am student whose just got through his 12th and i am looking for websites which can teach me scripts and more advanced html.i am more or less familiar with the basics hyperlinks images etc.
    email usr reply at here
Show All

by

jgpws

Jason Gonzalez resides in Los Angeles as a designer.
He is a 2005 bachelor's degree graduate of Mt. Sierra College in California under the Multimedia Design... more »

Feeling creative? Create a Lens!

Explore related pages

Related Tags