ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Input HTML

Updated on January 14, 2011

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):



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



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 </>


<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.


<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.


<a href="">Google</a>

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


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:

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

<img src="">

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=" width="100" height="100"> creates a perfect 100 x 100 pixelated square.

<img src=" width="100" height="50"> creates a 100 x 50 wide rectangle of the given image.

<img src=" 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:

Defines bold text 
Defines big text 
Defines emphasized text 
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
Defines inserted text
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:

Defines centered content 
<font> and <basefont> 
Defines HTML fonts
<s> and <strike> 
Defines strikethrough text 
Defines underlined text
Defines the alignment of text
Defines the background 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:


<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>


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:


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


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:


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


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


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


    0 of 8192 characters used
    Post Comment

    • nnjiru profile image


      5 years ago

    • DonDWest profile imageAUTHOR


      7 years ago from Halifax, Nova Scotia, Canada

      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.

    • simeonvisser profile image


      7 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.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)