Input HTML

Input HTML: HTML Basics

Inputing HTML to build webpages or fine tune your hubpages doesn't have to be a chore. In fact, once you gain a farmiliarity with the language, you can write down all you need in a two page summary for quick referance.

A little background on myself: I used to write HTML in grade school, back at the time I was no more than fifteen years old. At that time, I often designed webpages for non-profit organizations. Unfortunately, I was too young to work in the web design field, and by the time I became of age, companies started to professionalize the field and demand college degrees. So I had to go to college. There I picked up Javascript, at that time the language was a baby. Then 9-11 happened, all the I.T jobs were outsourced to India, I suffered an illness, and I became discouraged with the entire industry. There were simply no jobs and I quit my craft.

Now I'm trying to pick the craft back up for hobby purposes. So hopefully, in a mutually beneficial relationship, I can refresh my skills by helping you learn the basics.

What Do I Need To Input HTML?

You don't need any fancy tools or software programs to learn HTML. All you need is your notepad.exe program. This is a default program found on all Windows Operating Systems that can be found in the Accessories category. You don't need an HTML editor. You don't need a web server. You don't need a web site. Although later on I recommend you acquire such material if you want to put your technical skills to good use, but for the purpose of learning the basics, such material isn't needed.

When you make an HTML doument using notepad, be sure to save the file under an .htm or .html file extension. For example, if you wish to name your HTML document "testing", you will need to go to File, then Save As. . . and under File name type the following: testing.html (see figure 1.1). Finally, click Save.

Figure 1.1
Figure 1.1

HTML: The Science of Tags

HTML stands for Hyper Text Markup Language. In HTML, we use markup tags. Tags are the "skeletal structure" of the language. Tags allow you to describe a given web page. HTML tags are keywords surrounded by angle brackets (example: <html>). HTML tags normally come in pairs, such as <b> and </b>.

The starting tag is the opening command you wish to execute, the ending tag indicates you wish to finish the execution. For example: <b>Hi</b> will put in bold the word Hi. The <b> indicates you wish to open with a bold command, then the </b> indicates you wish to close the command. A tag should always be closed with </>, otherwise the command will carry through the entire web document. For example <b>Hi</b> my name is <b>Don</b> will bold the words Hi and Don, but the words "my name is" will have normal lettering. The end result will be: Hi my name is Don

HTML doucments describe web pages. HTML documents contain HTML tags and plain text. The purpose of a web browser (such as Internet Explorer and Firefox) is to read HTML documents and display them as web pages. If the HTML is written properly, the browser shouldn't display the tags, but uses the tags to interpret the content of the page.

To start a web page, we use the tag <html> This indicates to the browser that there is an HTML document for which it can communicate with. We close the HTML document with </html> The second html command we input is <body> This informs the browser that our HTML document has a display. Without the use of the body command, you're essentially signaling to your browser that you have an empty web page. We close the body command with </body>

Now let us use some combinations of what we have learned. A quick review, so far you know:

  1. <html> opens an html document and </html> closes the said document.
  2. <body> opens the body of an html document and </body> closes the body.
  3. <b> makes the proceeding letters bold and </b> puts the bold lettering to an end.

Let's make an HTML document, input the following on your notepad (testing.html):

<html>

<body>

Hi, this is my first HTML document. <b>Cool!</b>

</body>

</html>

This will create using your notepad (see figure 1.2):

Hi, this is my first HTML document. Cool!

Figure 1.2
Figure 1.2

Input HTML Headings

HTML headings are defined with the <h1> to <h6> tags. Headings allow you to make titles under different font sizes and boldness. Reminder: Don't forget to close your tags with </>

Examples:

<h2>This is H2</h2>

This is H2

<h3>This is H3</h3>

This is H3

<h4>This is H4</h4>

This is H4

Input HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Example:

<p>This is one paragraph</p>

<p>This is another paragraph</p>

Input HTML Links

HTML links are defined with the <a> tag. However, the tag opens with <a href="insert URL here"> "Insert URL here" stands for the website you wish to link. URL stands for Uniform Resource Locator. A URL is the address of a specific Web site or file on the Internet. Be sure to put down the complete URL, including the http:// or www. The tag finishes with </a>. In between the <a href="insert URL here"> and </a> is the linking text. The linking text is the text that appears on the browser that when you click, it will automatically redirect you to the given URL you have specified in the HTML tags.

Example:

<a href="http://www.google.com">Google</a>

This should bring you to the google website. And it should look something like this:

Google

Figure 1.3
Figure 1.3

Input HTML Images

HTML images are defined with the <img> tag. The tag opens with <img src="insert image URL here"> Images have no ending tag. HTML, and thus web browsers, recognize two file extensions for images, they are: .gif and .jpg The .jpg extension produces 16 bit graphics and the .gif produces 8 bit graphics. I prefer to use the .jpg for the additonal graphics and I recommend everyone do the same. Back in the 90's, when computers were less advanced, there was a purpose for using 8 bit graphics for the sake of reducing loading times on websites, but today such a concept is now completely obsolete.

An image URL can be acquired by right clicking on an image, then dragging your mouse down to Properties (see figure 1.3). A properties window should open, in that window, you should find a paragraph that states Address (URL): To the right of Address (URL) you will see the listed URL. Now drag your mouse across that URL, right click, and then click copy. Now paste that URL into <img src=""> in between the two ". Be warned however, copying other people's images without their permission can have copyright issues, so for this example, we'll use my hubpages avatar. The URL for my hubpages avatar is: http://s2.hubimg.com/u/4117845_177.jpg

Therefore, our example of using an HTML image will look like the following:

<img src="http://s2.hubimg.com/u/4117845_177.jpg">

This should produce the following result (see figure 1.4):

Figure 1.4
Figure 1.4

We can add width and height variables to control the size of a given image.

For example <img src=http://s2.hubimg.com/u/4117845_177.jpg" width="100" height="100"> creates a perfect 100 x 100 pixelated square.

<img src=http://s2.hubimg.com/u/4117845_177.jpg" width="100" height="50"> creates a 100 x 50 wide rectangle of the given image.

<img src=http://s2.hubimg.com/u/4117845_177.jpg" width="50" height="100"> creates a 50 x 100 long rectangle of the given image.

Warning: Such modifiers often can make the image distorted. If you wish to resize your images professionally, it's recommended you use a program such as Photoshop.

Input HTML Formating Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text. This is an example of formatting tags. Formating tags can give your text interesting characteristics. Have a look at the following table (figure 1.5) that demonstrates the formatting tags you have available:

Tag
Description
<b> 
Defines bold text 
<big> 
Defines big text 
<em> 
Defines emphasized text 
<i>
Defines italic text
<small>
Defines small text
<strong>
Defines strong text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text
Figure 1.5

Input HTML Styles

The purpose of the style attributes is to provide a common way to style all HTML elements. Styles was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly in separate style sheets (CSS files).

Have a look at table 1.6 for examples of HTML styles:

Tags 
Description 
<center> 
Defines centered content 
<font> and <basefont> 
Defines HTML fonts
<s> and <strike> 
Defines strikethrough text 
<u>
Defines underlined text
Attributes
Description
align
Defines the alignment of text
bgcolor
Defines the background color
color
Defines the text color
Figure 1.6

HTML Style Example - Background Color

Copy and paste the following in your notepad and call the document testing 2.html:

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

Your body style is the background color you'll have for your entire webpage. In this case it should be yellow. Your h2 style is the background color you'll have for that entire heading. In this case it should be red. Your p style is the background color you'll have for that entire paragraph. In this case it should be green. The final result is you should have a webpage that looks like this (see figure 1.7):

Figure 1.7
Figure 1.7

HTML Style Example - Font, Color and Size

Copy and paste the following into your notepad. Name the document testing 3.html:

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

Your h1 style should produce a verdana font style. Your p style should produce an arial font style with red text. The final result should look like figure 1.8:

Figure 1.8
Figure 1.8

HTML Style Example - Text Alignment

Copy and paste the following in your notepad and name the document testing 4.html:

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

Your h1 style should be automatically aligned to the center of the page, as shown in figure 1.9:

Figure 1.9
Figure 1.9

Conclusion

This concludes our lesson on HTML basics. Later, I'll create a hub that explains some concepts of greater advancement: Frames, tables, lists, forms, and colors. I'll also explain how you can get a domain name for the websites you wish to construct.

-Donovan D. Westhaver

More by this Author


Comments 3 comments

simeonvisser profile image

simeonvisser 5 years ago

Very good start with HTML. However, font tags and frames should no longer be used in modern websites. In the upcoming web standard HTML5 these tags have been removed so it's pointless to implement them in new websites.


DonDWest profile image

DonDWest 5 years ago from Halifax, Nova Scotia, Canada Author

Ok, thanks for the heads up, I've been inactive from the field for a while. I've still been able to build sites and test them the old fashioned way, but I have long suspected much has changed. I'll still continue with the early 2000's lessons, and then research a few modern concepts.

I'll try to do what I can, but between trying to get a book published and now trying to find a job after recently getting laid off yet again, time is limited. Eventually I do want to learn how to build modern sites as a media for my book, because to be qutie frank, I have little faith conventionally getting the book published.


    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working