Microsoft.NET

……………………………………………….Expertise in .NET Technologies

HTML Basics – Part 1

Posted by Ravi Varma Thumati on December 10, 2009

Hyper Text Markup Language – HTML

Welcome to the HTML Code Tutorial. Our goal is to provide the most helpful and complete guide to creating web pages anywhere. HTML is not a programming language, but rather a markup language.

  • Webpage’s are written in HTML – a simple scripting language.
  • HTML is short for HyperText Markup Language.
    • Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information within documents. 
    • Basically an HTML document is a plain text file that contains text and nothing else.  
  • When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages.
  • Since HTML documents are just text files they can be written in even the simplest text editor.
  • A more popular choice is to use a special HTML editor – maybe even one that puts focus on the visual result rather than the codes – a so-called WYSIWYG editor (“What You See Is What You Get”).
  • Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor you’re using.
  • However, there are some very good reasons to create your own pages – or parts of them – by hand…

Preparation for HTML

Creating an HTML document is easy. To begin coding HTML you need only a simple-text editor Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it.

Brief History of HTML

HTML has not been around for many years. November 1990 marks the day of the first web page and back then there were little to no HTML standards to be followed; a group called the World Wide Web Consortium was then formed and has since set the standards that are widely accepted and we will base our teachings around them.

Web Pages

Web pages have many uses. Here are some important facts about why web pages are so useful.

  • A cheap and easy way to spread information to a large audience.
  • Another medium to market your business.
  • Let the world know about you with a personal website!

Components of HTML

  1. Tag – Used to specify (“mark-up”) regions of HTML documents for the web browser to interpret. Tags look like this: <tag>
  2. Element – A complete tag, having an opening <tag> and a closing </tag>.
  3. Attribute – Used to modify the value of the HTML element. Elements will often have multiple attributes.

For now just know that a tag is a command the web browser interprets, an element is a complete tag, and an attribute customizes or modifies HTML elements.

HTML Elements

HTML elements exist on many levels. Everything you see in a web page, the paragraph texts, the banner, and the navigation links on the left are all elements of a web page. An element in HTML is a loose term that describes each individual piece of your web page.

An element consists of three basic parts: an opening tag, the element’s content, and finally, a closing tag.

  1. <p> – opening paragraph tag
  2. Element Content – paragraph words
  3. </p> – closing tag

Every (web) page requires four critical elements: the html, head, title, and body elements.

The <HTML> Element…</HTML>

<HTML> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </HTML> tag at the bottom of the document. Copy the following HTML code into your text editor.

<html>
</html>

Now save your file by Selecting Menu and then Save. Click on the “Save as Type” drop down box and select the option “All Files”. When asked to name your file, name it “index.html”, without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes.

If you opened up your index.html document, you should see a very first blank (white) web page!

The <HEAD> Element

The <head> element is “next” as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you’re golden. The head functions “behind the scenes.” Tags placed within the head element are not directly displayed by web browsers. We will be placing the <title> element here and we’ll talk about the other possible elements in later lessons.

Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next.

<html>
<head>
</head>
</html>  

As of yet, we still have nothing happening on the web page. All we have so far is a couple of necessary elements that describe our document to the web browser. Content (stuff you can see) will come later.

The <title> Element

Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer’s browser. Here’s the html code:

<html>
<head>
<title>My WebPage!</title>
</head>
</html>

Save the file and open it in your browser. You should see “My WebPage!” in the upper-left, as the window’s title.

The <body> Element

The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage’s viewable content.

<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body></html>

Beginning HTML Tags!

A web browser reads an HTML document top to bottom, left to right. Each time the browser finds a tag, it is displayed accordingly (paragraphs look like paragraphs, tables look like tables, etc). Tags have 3 major parts: opening tag(s), content(s), and closing tag(s). Recall that a completed tag is termed an element. By adding tags to an HTML document, you signal to the browser “Hey look, I’m a paragraph tag, now treat me as such.”

As you will learn, there are probably hundreds of HTML Tags. Tables, images, lists, forms, and everything else being displayed on an web page requires the use of a tag or two.

<openingtag>Content</closingtag>
<p>A Paragraph Tag</p>

Tags should be lower-case letters if you plan on publishing your work. This is the standard for XHTML and Dynamic HTML. Here’s quick look at some HTML tags.

<body>Body Tag (acts as a content shell)
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>

Tags Without Closing Tags

There are a few tags that do not follow the mold above. In a way, they still have the 3 parts (opening/closing and content). These tags however do not require a formal </closingtag> but rather a modified version. The reason being that these tags do not really require any content. Rather some of them just need a source URL and this is enough information for the web browser to display the tag properly (image tags). Let’s take a look at a line break tag.

<br />

To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type <br>linebreak</br>. If every line break tag needed all three components as other do, life would become redundant real quick. Instead the better solution was to combine the opening and closing tags into a single format. Other tags have also been modified such as the image tag and input tag.

<img src="../mypic.jpg" /> -- Image Tag
<br /> -- Line Break Tag
<input size="12" /> -- Input Field

As you can see from the above image tag, your browser is completely capable of interpreting this tag so long as we tell the browser where the image is located using the src attribute.

HTML – Attributes

Attributes are used to amplify tags. What we mean by amplify is that when a web browser interprets a tag, it will also search for set attributes and then display the element (tags+attributes) in its entirety. At some point you may want to give your body element a background color or perhaps change the width of a table. All of these things and more can be achieved using Attributes.

Many HTML tags have a unique set of their own attributes. These will be discussed as each tag is introduced throughout the tutorial. Right now we want to focus on a set of generic attributes that can be used with just about every HTML Tag in existence.

Attributes are placed within the opening tag and they follow a precise syntax (format).

HTML – Class or ID Attribute

The class and id attributes are nearly identical. They play no direct role in formatting your elements but rather serve behind the scenes for scripting and Cascading Style Sheets (CSS). The role of classification and identifying elements will become more apparent as your learn CSS.

The idea is that you can classify or id certain a tag and later format the tag using Cascading Style Sheets. It becomes necessary when you have two or more of the same element on a page (like a <p> tag) but want them to be different in appearance.

<p id="italicsparagraph">Paragraph type 1 Italics</p>
<p id="boldparagraph">Paragraph type 2 Bold</p>

HTML – Name Attribute

Name is much different than id and class. By allotting a name to an element, that name becomes a scripting variable for scripting languages such as Javascript, ASP, and PHP. The name attribute is seen most often with forms and other user-input elements.

<input name="TextField" />

This attribute has no effect on the display of the text field, but behind the scenes it plays a huge identification role.

HTML – Title Attribute

This is a neat little perhaps, forgotten attribute. This attribute titles an element and adds a tiny text pop-up to any HTML element. Much like the text pop-ups of word processing programs, these attributes should not be forgotten. You may title an element anything you would like, the effects of this attribute are not seen until you hover your mouse over the element for a few seconds.

<h2 title="Hello There!">Titled Heading Tag</h2>

Hover your mouse over the display heading to see the magic of the title attribute! This provides your web site with some user interaction which is priceless. Do not overlook the title attribute.

HTML – Align Attribute

If you wish to change the horizontal location of your elements you may do so using the align attribute. You may align things left, right, or center. By default most elements are automatically aligned left unless otherwise specified.

<h2 align="center">Centered Heading</h2>

Attribute Defaults

Many tags are assigned default attributes. This means that unless a tag attribute is specified by you the creator, it will have some distinct attributes. For example, a paragraph tag will always align its text to the left unless it has an align attribute in it specifying otherwise. Also elements placed within a table are vertically centered and to the left unless otherwise specified. As you code and learn about each of the different HTML elements, you will become aware of many of these defaults.

Generic Attributes

Attributes exist to modify HTML tags allowing for complete customization of a website. Here’s a table of some other attributes that are readily usable with many of HTML’s tags.

Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexidecimal, RGB values Places a background color behind an element
background URL Places an background image behind an element
id User Defined Names an element for use with Cascading Style Sheets.
class User Defined Classifies an element for use with Cascading Style Sheets.
width Numeric Value Specifies the width of tables, images, or table cells.
height Numeric Value Specifies the height of tables, images, or table cells.
title User Defined “Pop-up” title for your elements.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: