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.
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.
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:
- <html> opens an html document and </html> closes the said document.
- <body> opens the body of an html document and </body> closes the body.
- <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!
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.
This should bring you to the google website. And it should look something like this:
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:
This should produce the following result (see 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:
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
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
HTML Style Example - Background Color
Copy and paste the following in your notepad and call the document testing 2.html:
<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):
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:
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:
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