Sunday, November 23, 2014

Basic Text Formatting

This section addresses the way in which you markup text. There are that help you mark up your text, adding structural information to your document.

In this section you will learn how to use what are known as basic text formatting elements.

If you want people to read what you have written, then structuring your text well is even more important. People have trouble reading wide, long paragraphs of text on web unless they are broken up well.


White Spaces and Flow

It is very important to know what HTML does when it comes across spaces and how browsers treat long sentences and paragraphs of text.

Consider the following code:-
In the above code there are some multiple white spaces but when this is going to display in the browser, browser treats multiple spaces and several carriage returns as a single space.

Following is the way how the browser displays our code:-


Creating Headings

No matter what sort of a document you are creating, most documents have headings in some form or another. Heading tells the purpose of the following text of it. Headings can also help to structure a document.
There are 6 levels of headings tn HTML.
<h1>, <h2> ,<h3>, <h4>, <h5>, <h6>


Heading elements also can carry attributes. The attributes which are carried by heading tag:-

  • align
  • class
  • id
  • dir
  • lang
  • xml:lang
Align attribute can align the text to right,left and center as we want, but this attribute is not used very much now because we can re-align using CSS.


Creating Line Breaks

Line breaks can be created by using <br/> tag. Whenever you use this tag anything following will start in next line. <br/> can carry core attributes as well as an attribute called 'clear', which can be used with images.

Attributes used in <br/> element :-
  • clear
  • class
  • id
  • style
  • title

Creating Paragraphs

The <p> element offers another way to structure the text. Each paragraph of text should go in between opening <p> and closing </p> tags.
When browser displays a paragraph it usually inserts a new line before the next paragraph.

Attributes used in <p> element:-
  • align
  • class
  • id
  • style
  • title
  • dir
  • lang
  • xml:lang


Creating Preformatted  Text

Sometimes you want your text to follow the exact format of how it is written in the HTML code. You can do this using <pre> tag.
Any text between the opening <pre> tag and closing </pre> tag will preserve the formatting of the source document.

Two of the most common uses of the <pre> element are to display tabular data without the use of a table and to represent computer source code.





Share with Friends....

Friday, November 21, 2014

<body> Tag



The <body> element appears after the <head> element and contains the part of the web page that you actually see in the main browser window, which is sometimes referred to as body content. It may contain only some paragraph tags or more complicated layouts containing forms, anchor tags, tables and more on. Most of the tags or elements in HTML goes between opening body tag (<body>) and closing body tag (</body>).
(You will be meeting these tags in the future articles.)

Some elements come between <body> tags :-

  • <a> : Anchor Tag
  • <p> : Paragraph Tag
  • <table> : Table Tag
  • <ul> : Unordered List
  • <ol> : Ordered List, etc....

These elements have attributes that adds extra information about the element that carries them. These attributes will come inside the opening tag of the element. There are main three attribute groups :-

  1. Core Attributes :- The class,id ,style and title attributes.
  2. Internationalization Attributes :- The dir,lang and xml:lang attributes.
  3. UI Events :- Attributes associated with events. (onclick,ondoubleclick,onmousedown,onmouseup,onmouseover,onmouseout,onkeypress,etc...)

Core Attributes

There are 4 core attributes that can be used on the majority. 

  • id :- To give an identity to elements
  • title :- To give a suggested title
  • class :- Used to associate the element with a style sheet
  • style :- Allows to specify CSS rules within the element.

Internationalization Attributes

There are 3 internationalization attributes which are available for most elements.


UI Events

UI events you to associate an event, such as mouse click or a mouse bring over an element. 

Following are the most common events:-

onclick , ondoubleclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeydown , onkeypress , onkeyup



Your questions and suggestions will be most appreciated.... 

Share with Friends....

Wednesday, November 19, 2014

<head> Tag



The <head> element or the tag is just a container for all other header elements. It should be the first thing to appear after the opening <html> tag.

Child elements of   <head>  element :-

  • <title> :- Used to display the title of the web page
  • <base> 
  • <object> :- Designed to include images,Java Script objects,Flash Animations,MP3 files and so on.
  • <link> :- To link an external file such as Style Sheet or Java Script files.
  • <style> :- Include script to the web document.
  • <meta> :- Includes the information about the document such as keywords and description which are helpful to search and search engine optimization.

Opening <head> tag can carry following attributes :-
  1. id
  2. dir
  3. lang
  4. xml:lang
  5. profile

Among the child elements of <head> tag we are only concentrating on <title> tag because it gives an idea to the user or the reader about the content of the web page even without reading the content.

<title> tag

You should specify a title for every web page you write. 

It is used in several ways :-
  1. At the top of the browser window.
  2. As the default name for a bookmark in browsers.
  3. By search engines that use its content to help index pages.

It's important to use a title which describes the content of the page. As an example rather than using the title of the home page as "Home Page" it is more applicable to use as "Web Devops Home".

<head>
<title>Web Devops Home</title>
</head>

<title> element should contain only the text for the title.
The <title> element can carry following attributes :-
  1. id
  2. dir
  3. lang
  4. xml:lang


We will be discussing about the <body> element in the next article..

Your questions and suggestions will be accepted any time...


Share with Friends.....

Tuesday, November 18, 2014

Introduction to HTML

HTML or Hypertext Markup Language is the most widely used language on Web. As its name sounds it is a markup language which may sound complicated but not so. In present HTML is used to create the structure of a web document. The web sites that we see today in the internet are not only created using HTML, there are some more languages and styles used which will we talk in future.


Basic Structure of a Web Page


Above picture shows the basic structure of a web page. 

Basic rules of web page:-
  • Web page must start with a <html> tag and end with a </html> tag.
  • All the opened tags must be closed.
  • Tags must start to close with the most recent opened tag and move to the earliest.

These basic rules must be strictly followed. HTML is not case sensitive.

There are two main parts in a web page. These are HEAD and the BODY.
<head> is just a container for all other header elements. It should be the first thing to appear after the opening <html> tag.

<body>  contains the whole weight of the web page. 


We will discuss <head> tag in detail in the next article. 


Share with friends....