How to Create Domain Email at Your Hosting Cpanel

Creating our own email address at our own domain is very easy. Most paid website hosting servers have an opstion for creating your email address with your own domain name. This domain email is included with your cost and setting it up is not only free but it can also add a professional touch to your business. This is why many popular websites choose to have their own domain emails under their contact page. You can create a number of different email addresses on your web server but this number varies from one service provider to another.

Difference between HTML and XHTML

XHTML stands for Extensible HyperText Markup Language. It is a cleaner and stricter version of HTML, also more stable, sharpened and sophisticated version. XHTML, is a combination of XML (Extensible Markup Language) and HTML. XML is designed to describe data, while HTML is designed to display data.

HTML (the original language of World Wide Web) is rapidly being replaced by XHTML. XHTML is similar in most features to HTML due to the fact that XHTML was derived from HTML just to conform with XML standards. There are only a few minor differences between these two markup language, its only that XHTML is designed for being a HTML successor or some call it a better HTML.

• One of the XHTML benefit is that it is more accepted in non “computer” devices such as cell phones, palm devices and other scaled down browsers.

• All elements and attributes in XHTML documents have to be written in lower case (while it is not necessarily in HTML).

• All opening tags must be closed with closing tags, in HTML many of these tags were left open and you still can view them in a browser without errors. Items like line breaks or images which are without HTML closing tags should have XHTML self-closing.

• In XHTML, all the tags also have to be properly nested, it means that if you start tag “a” and open another tag within tag “a”, you have to close the latest tag first and then close tag “a” at the last. Although nesting is also followed in HTML but it is not as strict as in XHTML.

• All values for attributes must be encased in double or single quotes and the attributes themselves should not be abbreviated.

• The image tags should be provided with alt attributes which contain the image description in order to allow them have some requirements for accessibility along with different web standard.

• Another XHTML only requirement is the declaration of the DOCTYPE which determines what rules your document will follow, which it inherited from XML. The first line you will see when you switch your XHTML page to the source code is a document type declaration (also called DTD or DOCTYPE) at the top of your XHTML documents. Most web pages being created today will include a doctype declaration. There are 3 DTDs for XHTML: Strict (only will validate if it is without deprecated tags), Transitional (will still validate with deprecated tags), and Frameset (for a page that “sets” up “frames”). All XHTML documents have to conform to the XML syntax rules.

XHTML is a more forward language that has been created to be compatible with both new and upcoming technology, and it is far more versatile than standard HTML is.

Part 1: HTML Part 2: HTML Attributes Part 3: HTML Table Part 4: Colspan and Rowspan

What's the difference between HTML and XHTML What is CSS?

Learn CSS basic codes

CSS stands for Cascading Style Sheets, is a tool to add layout to your websites. It controls the presentation of web pages. CSS provides information to the browser about how the content on the page should be displayed. CSS covers fonts, lines, margins, width, height, advanced positions and background images. It controls layout of many documents from a single style sheet, apply different layout to different media-types (print, screen, etc) and many more. Compared to HTML, CSS offers more options and is supported by all browsers today.

To structure content html is used, but to format structured content, CSS is used. CSS command consists of three parts: selector – property – value.

Selector {property: value; }

Selector comes first, followed by property and then value. Each property and its value is separated by a colon and ended with a semi-colon. They are also have to be surrounded by curly brackets. Example:

body {background-color: red;}

Selector: what html element applied in this area
Property: what will be changed to the selector.
Value: the value of what you are going to change.
Note: Don't leave spaces between property value and the units. It only works in IE but not in Opera or Firefox.

CSS can be applied in 3 ways to an html document:

• by using the html attribute style (inline) – example:
  
  <body style="background-color: yellow;">

• By inserting the CSS codes between style tag (<style>) – example:
  
  <html>
  <head>
  <title>Example</title>
  <style type="text/css">
  body {background-color: yellow;}
  </style>
  </head>

• By inserting the CSS codes in an external style sheet (a text file with the extension “.css”) and linked to the html document. The link can be created with a line of html code that is inserted in the header section of your html file (between <head> and </head> tag):
  
  <link rel="stylesheet" type="text/css" href="name-of-the-folder/name-of-the-file.css" />

We will look at the one which is the most preferred and widely used: external (the last option above). To understand how it works, you can simply copy and paste each of two of the following codes into a separate notepad and save one as “.htm” and the other as “.css” file but keep both files in the same directory or folder:

Save this to "mypage.htm":	Save this to "style.css":
<html> <head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Hello, I’m Edy Bright</h1> </body> </html>	body { background-color: red; }

Open the .htm file by double-click it and you will see that the css file will effect the other file in terms of layout or design. You can change the CSS file to update the style of all HTML documents that linking to it.

Some other common CSS coding:

Properties and Values:

Colors and background
color:green; - (choose the color)
background-color:#ff0000; - (choose background color)
background-image:url("mypic.gif"); - (background image)
background-repeat:no-repeat;/repeat;/repeat-x;/repeat-y; - (image background pattern)
Background-attachment:scroll/ fixed - (whether still image or movable)
background-position:2cm 2cm/ 50% 25%/ top right - (image background position)

Font
font-family:"Times New Roman", serif; - (what types of font will be used, a comma appears between alternate values, it means if the browser can’t find Times New Roman, it loads Serif). A comma can also separate multiple selectors.
font-style:italic;/ oblique; - (font style)
font-variant:small-caps;/ normal; - (font variant)
font-weight:bold;/ normal; - (font weight)
font-size:30px;/ 12pt;/ 120%;/1em; - (font size)

Text
text-indent:30px; - (text indent)
text-align:right;/ center;/ justify; - (text align)
text-decoration:underline;/ overline;/ line-through; - (add a line in the text)
letter-spacing:6px; - (space between letters)
text-transform:uppercase;/ lowercase;/ none;
list-style-type:circle;/ square;/ upper-roman; - (list item markers)
p:first-letter{color:#ff0000;font-size:xx-large;} – (to change the first letter of a paragraph)
p:first-line {color:#0000ff;font-variant:small-caps;} –(to change the first line of a paragraph).


Margin, Padding, Border
margin-top/ right/ bottom/ left: 100px; - (position of the margin)
or margin:100px 40px 10px 70px; - (clock-wise= top, right, bottom, left)
padding:20px 20px 20px 80px; - (padding= space between the border and content)
border-width:thick;/ thin;/medium;
border-style:dotted;/ dashed;/ solid;/ double;/ groove;/ ridge;/ inset;/ outset;
border-style:dotted solid double dashed; - (adding different border style from top-right-bottom-left/ clock-wise direction)
border-top/ left/ bottom-color:red; -(apply a color to only one side of a border)
border-bottom/ top/ right-style:solid; -(add style to only one side of a border)
border-top/ left/ bottom-width:thick; -(set the size of a border)
outline:green dotted thick; - (a line drawn around elements (outside the borders).
outline-color:#00ff00;/ style:dotted;/ width:5px;


position:absolute;/ relative; top:150px; left:500px; - (locating an element whether in absolute or relative position)
z-index:1;/2;/3; etc. - (To make an element become layers and the value of its property can be used as an order of which elements overlap one another)

visibility:hidden – (to hide an element, but it still take up the same space as before)
display:none – (to hide an element and it will not take up any space)
max-height:/min-height:/max-width:/min-width:100px; - (set the maximum/ minimum height and width of an element)
display:inline – (to change block element become inline)
display:block – (to change an inline element to a block element)



Selectors:

Link
a:visited - (a visited link)
a:active - (a link the moment it is clicked.)
a:hover - (when you place a cursor over a link)

Class, Id and Div
class="....." - (to specify a style to a particular element or group of elements)
id="....." - (to specify a style for a single, unique element)
span class="....." - (for adding visual features to selected parts of text)
div id="....." - (to group one or more block-level elements)

Comment
/*put your comment here*/ - (you can add comment on top of css coding to explain your code, comments are ignored by browsers)

Part 1: HTML Part 2: HTML Attributes Part 3: HTML Table Part 4: Colspan and Rowspan
What's the difference between HTML and XHTML What is CSS?

Colspan and Rowspan in HTML Table

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

Colspan and rowspan are html attributes used to span table cells across more than a column or row. Colspan is short for “column span” or indicates “how many across” while a rowspan indicates “how many down”.

Colspan is used within a <td> tag to specify how many columns it should span.
Here, i give you the example:

<table border="1">
<tr>
<td colspan="5">Cell 1-5 combined</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>

and here is the outcome:

Cell 1-5 combined
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5

By setting colspan to "5", the cell in the first row spans five columns. Here below is another example for better understanding:

<table border="1">
<tr>
<td colspan="3">Cell 1-3</td>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>

Here when you see in a browser:

Cell 1-3			Cell A	Cell B
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5

Rowspan sets how many rows a cell spans.
Example:

<table border="1">
<tr>
<td rowspan="5">Cell 1-5</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
</tr>
</table>

and here the result when you see in the browser:

Cell 1-5	Cell 1
	Cell 2
	Cell 3
	Cell 4
	Cell 5

Not as hard as you think right?, and with a number of practices, it should get easier and you might get used to it :)

What's the difference between HTML and XHTML What is CSS?

Using HTML codes to create Tables

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

Tables are defined with <table> tag and it is made of rows (<tr>) and columns (<td>). Tr means table row and td means table data.

• To start creating table, you need an opening table tag, which is <table> and to end it, is to use table closing tag which is </table>.
• To start creating horizontal table rows you need the opening tag <tr> and after entering number of column/s you need to end it with a closing tag </tr>.
• To start making column in the table, as usual you need the opening tag <td> and after entering all the data, close it with a closing tag which is <td>.

What is attributes in HTML

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

What is an attributes in HTML?
Attribute is an additional command towards the element which are written after a start tag and come in name/value pairs like: name=”value”. The values are always enclosed in quotes.
Here are the examples of attribute:

What is HTML and how to use it

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

HTML stands for Hyper Text Markup Language, it is a language (computer language) to tell your browser how a page should be displayed, which makes it possible to present information, showing pictures, graphics and etc. The language consists of codes, and there are plenty different codes for all sorts of formatting. When you view a page from a browser, what you see is the browser’s interpretation of HTML.

You can see the HTML codes of a page on the internet by simply clicking “View” and then select “Source” or if you are using Firefox browser you can press Ctrl + U on your keyboard to view the codes. For people who do not know what is or how to use the codes, HTML code can be very complicated and scary to them. The good news is that HTML is very easy to learn and understand, if you want to build your own website you need to learn what is HTML and how to use it.

The HTML codes consists of tags (markup tags or usually called as HTML tags), and the tag itself consists of keyword inside angle brackets. Most HTML tags start with an opening tag and end with a closing tag. A HTML document has 2 parts: a head (information about the page, anything you put here will not be displayed on the page) and a body (information that constitutes the page, anything you put here will be displayed on the page).

Still get confused? Well, i think it’s better if we put it into practice. Practice can explain and make you understand much better rather than just theory.

Open a Notepad, copy and paste he following HTML codes:

<html>

<head>

<title>This is my first website</title>

</head>

<body>

<p><b>This is the first sentence</b></p>

<p><i>This is the second sentence</i></p>

<p><U>This is the third sentence</u></p>

</body>

</html>

Save your notepad and name it “mypage.htm”, don’t forget to choose “All Files” otherwise you save it as a text document and not HTML document.
The ending “.htm” means that it is an HTML document, you also can name it with the ending of “.html”, it gives the same result. After that go and open the document by double-clicking the file. See and notice what happen to each of the sentence, different tag you apply to each of the line produce different effect to the text.

Here another common basic HTML commands:

<HTML> </HTML>	To create a Web page. All Web pages must have this command.
<HEAD> </HEAD>	All the head elements are written here, anything you put inside a head tag will not be displayed on the page. Elements inside head tag include scripts, meta information, instruct the browser where to find style sheets and more.
<TITLE> </TITLE>	Displays the Title in the title bar area.
<BODY> </BODY>	Anything you put inside the body tag will be displayed on the page and will be shown in the browsers to users.
<B> </B> or <strong> </strong>	The text will be shown in Bold
<I> </I> or <em> </em>	The text will be shown in Italics
<u> </u>	To underline a text or words.
<strike> </strike>	To insert a horizontal line in the middle of the text.
<CENTER> </CENTER>	To adjust anything you put in the center of the page.
<H1> </H1>	Heading 1
<H2> </H2>	Heading 2
<H3> </H3>	Heading 3
<H4> </H4>	Heading 4
<H5> </H5>	Heading 5
<H6> </H6>	Heading 6
<BR>	New Line. Creates single space bettween lines.
<P> </p>	New paragraph. Creates double space between lines, paragraphs.
&nbsp;	To add a space.
<HR>	Produces a horizontal rule across document.
<ul> <li>A list</li> <li>Another list</li> </ul>	A list information Another list information
<ol> <li>First list</li> <li>Second list</li> </ol>	First list information Second list information

<b> means "bold"
<i> means "italics"
<em> means "emphasis"
<u> means "underline"
<h1> means "heading 1"
<br> means "break"
<p> means "paragraph"
<hr> means "horizontal"
<ul> means "unordered list"
<ol> means "ordered list"

It doesn’t matter whether you type the tags in uppercase or lowercase, it will give the same result.

In the HTML code, there is attribute. Attribute also plays one of the most important role, but what is it? Let us discuss it in the next page.

What's the difference between HTML and XHTML What is CSS?