bloginfo

WHAT IS HTML

HTML stands for Hyper Text Mark up Language. It is the native language of all the browsers.

HTML documents comprises of html tags and text. These tags contain the html document content for example,

< color > blue </color >

Where, <colour> - tag and blue - text

The html content is given between a pair of tag names. Start tag comes with a pair of brackets such as <colour> and the end tag comes with a pair of brackets which includes a backslash such as </colour>. This start and end tags indicates html keywords.

Let’s have a look at the sample html code for web page structure.

<html>

<body>

<h1> 1^st heading </h1>

<p> 1^st paragraph </p>

</body>

</html>

You can see in the above sample that every keyword has its own start and end tags.

DOC TYPE DECLARATION

The document type declaration should be given in the beginning of the script. The syntax appears as shown below.

<! DOCTYPE html>

This is required to inform the browser about the HTML version used by the document.

In order to create a web page, you just need a note pad to write your HTML codes and to view your page you need a browser. Create your HTML document using note pad.

CREATE WEB PAGE USING NOTE PAD

To create a webpage using note pad, follow the steps given below.

Open a note pad and enter the html code

Save the notepad as “.html” file.

Now open your browser, click on File->open file->select the note pad name and click on open.

The web page output appears as shown below for the html code that you have coded.

HTML ELEMENTS

Every HTML element is the basic building block of HTML and is typically made up of two tags: an opening tag and a closing tag.

For example, the heading element <h1> </h1> is made up of the opening tag <h1> and the closing tag </h1>.

Different html elements are explained in the following sections.

Let’s learn about each basic tag in the following sections.

<body>

This tag defines the body content of the html document. It is the place where the entire content of the html document lies.

<Body> content </body>

ELEMENTS RELATED TO HTML FORMATTING

PARAGRAPHS

HTML paragraphs are defined with the <p> tag.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HEADINGS

HTML headings are defined with the <h1> to <h6> tags.

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

OUTPUT

THE <STRONG> ELEMENT

To highlight the strong importance on the text, you can use this element <strong>.

<p><strong>Attention Please :< /strong> Maintain Silence.<p>

OUTPUT

Attention Please: Maintain Silence.

THE <EM> ELEMENT

To emphasize a piece of text, you can use this element <em>.

<p>Chocolates from Ooty are really <em>delicious</em></p>

OUTPUT

Chocolates from Ooty are really delicious

LINE BREAKS

You can create a line break using <br> element. <br> is an empty element without a closing tag (the <br> tag defines a line break).

<p> This is a <br> line break </p>

OUTPUT

This is a
line break

HORIZONTAL RULE

To create a horizontal rule, you can use <hr> element.

Below find the horizontal rule <hr>

That was a horizontal rule J

OUTPUT

Below find the horizontal rule

That was a horizontal rule

UNORDERED/UNNUMBERED LIST

You can list text in bullets. Use the element <ul> (to define the list) and <li> (to list each item).

<ul>

</ul>

OUTPUT

list1
list2
list3

ORDERED (NUMBERED) LIST

You can list text in numbers. Use the element <ol> (to define the list) and <li> (to list each item).

<ol>

</ol>

OUTPUT

list1
list2
list3

IMAGES

HTML images are defined with the <img> tag. To add an image into your webpage, make sure that your image is already uploaded in the internet.

If not, choose the image that you want to add to your webpage from the internet.

Copy the source location of that image and paste the source URL in the image source tag as shown below.

HTML tags are not case sensitive: <P> means the same as <p>.

COLORS

You can add colours to your web page easily by using the style attributes. The following sections details about the style attributes.

FOREGROUND COLOR

To add colour to the text, you can use

Style=“colour :{ colour}”

Colour indicates the “colour value”

<h3 style="color:aqua">HTML Colors</h3>

<h3 style=”color:#000ff”>HTML Colors</h3>

<h3 style=”color:#000069”>HTML Colors</h3>

BACKGROUND COLOR

To add background color to an HTML element, use

Style=”background-color:green”

<h3 style="background-color:green">HTML Colors</h3>

BORDER COLOR

To add border to an HTML element, you can use style="border :{ width} {colour} {style}", where {width} is the width of the border.

<h3 style="border: 2px orange solid;">HTML Colours</h3>

COLOR NAMES

TRANSPARENCY

To add transparent background colours to the text you can use the “Decimal Code RGB”.

<h3 style="background-color:rgba(0,255,0,1)"> Non Transparent </h3>

<h3 style="background-color:rgba(0,255,0,0.5)"> Less Transparent </h3>

<h3 style="background-color:rgba(0,255,0,0.1)"> Highly Transparent </h3>

OUTPUT

HTML ATTRIBUTES

Attributes are the additional information about an element. They are denoted in the start tag. Attributes are represented as name = “value”.

An apt example for attributes is

<a href="http://www.blogger.com/blogger.g?blogID=4304750498922198879&pli=1#allposts/postNum=1"

target="_blank">This is Lavanyas blog</a>

If you set the target attribute to "_blank", the link will open in a new browser window/tab.

Every attribute should be within quotes only; it can be either single or double quotes.

Even HTML attributes are case insensitive.

There are many HTML attributes, of which a few are mentioned below.

1.  - This is meant for comments.

Example -

2. <!DOCTYPE> - It defines the document type.

Example -

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

</html>

3. <a> - It defines a hyperlink.

4. <abbr> - It defines an abbreviation. Sample html codes appear as shown below.

<!DOCTYPE html>

<html>

<body>

<p>The <abbr title=" Bharat Heavy Electronics Limited"> BHEL</abbr> It has its branches all over India.</p>

</body>

</html>

5. <address> - It defines the contact information of a person i.e., the document owner.

<address>
Write to us at <a href="Lavanya@yahoo.com">lavanya</a>.<br>
Visit me at:<br>
<I>techriting2012.blogspot.in</I>

</address>

6. <b> - It defines the bold text.

7. <Button> - It defines a clickable button.

<!DOCTYPE html>

<html>

<body>

<button type="button" onclick="alert('Have a Great Day!')">Click Me!</button>

</body>

</html>

8. <code> - It defines a piece of computer code.

<!DOCTYPE html>

<html>

<body>

<em>Emphasized text</em><br>

<strong>Strong text</strong><br>

<dfn>Definition term</dfn><br>

<code>A piece of computer code</code><br>

<samp>Sample output from a computer program</samp><br>

<kbd>Keyboard input</kbd><br>

<var>Variable</var>

</body>

</html>

9. <footer> - It defines the footer of a document.

<footer>
<p>Posted by: Lavanya</p>

</footer>

10. <header> - It defines the header of a document.

<header>
<h1>Internet Explorer 9</h1>

</header>

11. <time> - It defines the date/time.

<p>we open at <time>10:00</time> every morning. </p>

12. <textarea> - It defines a multiline input control (text area).

This document is all about HTML basics which allow you to get clear idea about making of web pages using a note pad.

</textarea>

13. <Video> - It defines a video or movie

Your browser does not support the video tag.

</video>

14. <title> - It defines the document title

<title>Title of the document</title>

</head>

META TAG

· The <Meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page.

· The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

· <Meta> tags always goes inside the <head> element.

· Meta tag is a tag which provides information about the web page such as who created the web page, what the page is about, web page updation and the keywords that represent the page’s content.

· Information available in Meta tag is meant for the search engines

Define the author of a page:

Refresh document every 30 seconds:

Later down the road, you may need to redirect traffic to another domain.

A common reason might be that you have just purchased a better domain name and would like to retain your old visitors, yet still use your new domain.

With the refresh Meta tag, you will be able to redirect visitors to the website of your choice or simply refresh your own page to update dynamic content automatically.

For the refresh Meta tag, the content attribute accepts two arguments separated by a semicolon (;).

The first argument specifies the number of seconds between refreshes or redirection and the 2nd argument is a URL of where the browser will relocate.

<head>

</head>

Define Meta tag description:

Search engines are the compasses of the web and help users navigate from site to site.

The description Meta element allows the developer to summarize the content that can be found on the page and is often the first chance you'll have to attract visitors.

<head>

</head>

Define Keyword Meta tag:

Keywords and/or phrases may be placed inside the keyword Meta element. You should specify the most popular search terms you believe someone would use to reach your website.

<head>

</head>

Technical writing is an art of explaining a complex technical concept in an comprehensible manner. Effective technical documentation requires clear analysis of certain critical concepts.

This post details you about those concepts which helps you to establish an effective technical document.

Audience analysis is a major factor to be considered while you write a document. Audience are the ultimate end users of your documents.

The way you write the documents should be precise and user friendly. It should convey the

information perfectly such that , the user must feel as if being guided by a support person.

Such an impact on the user, shows that your documentation has met the needs of the user.

So, two things play a vital role in order to prepare a good documentation.

Firstly you must analyze your audience and plan accordingly. Secondly, you must give documents in a brief manner.

AUDIENCE ANALYSIS

Try to sort out your audience before you start the documentation. Examine their needs.

For example if the user is completely new to the application, then you need to provide the document from the scratch. Or if the user is a person who has already been working on that application, then you need to make the document as per the requirement alone.

But such documents require or are used only during rare scenarios.

In general, you would be in a situation to prepare documents for the users who stay in intermediate position of the above mentioned types of user. That is, the users would have partial hands on experience regarding the product but not to the fullest.

Preparing documentations to such users acts as a big challenge.

So, while writing a document keep in mind that the user has knowledge on many products except this product. This will help you to prepare document in a better way. Give every detail about the product in a precis manner.

BRIEF DOCUMENTATION

Nowadays, nobody is interested to read a lot in order to gain knowledge about an application. Everyone likes to understand things easily in a short span of time without taking the risk of reading pages of a huge book/manual.

Try to give your document in a brief manner. This will engage the user in learning the application easily thus reducing the cause of confusion.

REVIEW

Reading a product’s document is generally an annoying job for the users.

So, it is essential that you prepare the document without any errors. The most common errors that happen in documentation are;

Spelling mistakes
Grammatical Errors
Improper sentence construction
No correlation among two sentences
High usage of technical jargon.

These errors are common, since even an experienced writer can do such errors. These kind of common errors has the tendency of irritating the user thus increasing his/her pain in reading the document.

As soon as you complete documentation, it is mandatory to review the document completely to avoid the above mentioned errors.

Do not use complex sentences in future/past tenses, which may lead the user to get confused. Always remember to use “Simple Present Tense” while writing a document.

LOOK AND FEEL

Give your document a professional look with correct usage of font colours, thus making it pleasant for the user to read. Do not opt for bright flashy font colours for headings.

Make sure that the alignment, navigation section, headers, footers, headings and paginations are done in a perfect way.

Neat, simple and clear documentations always win the user’s heart, since he/she becomes comfortable while learning the document.

Our job is to provide a “Help Document” which makes the user to understand the product in a much better way. So, detailed analysis and implementation of every above mentioned concepts will result in a good supportive document for the user.

bloginfo

Monday, 20 May 2013

HTML Tutorial

WHAT IS HTML

CREATE WEB PAGE USING NOTE PAD

HTML ELEMENTS

ELEMENTS RELATED TO HTML FORMATTING

LINKS

IMAGES

COLORS

HTML ATTRIBUTES

META TAG

Wednesday, 17 April 2013

How to get best annual performance appraisal

Tuesday, 16 April 2013

Effective Technical Documentation Tips

About Me