Showing posts with label HTML XML and XHTML. Show all posts
Showing posts with label HTML XML and XHTML. Show all posts

Saturday, November 7, 2009

How to redirect using meta refresh tag

Meta refresh redirect is a way to redirect pages, it sends your visitors from a page to another page using a meta http-equiv tag that you inserted into the header of an html document.

Here’s how to use it:
  • First, create a folder and name it whatever you like. The name of the folder will be used as part of the url link that you are going to use to redirect. So if your folder’s name is “mysite” then the redirect link will be “www.yoururl.com/mysite”
  • Create an html file (you can use a notepad), and place the following script and save it as index.html. Replace “your URL” with the URL which you want to redirect and store the file in the folder which you just created.
    How to redirect using meta refresh tag
  • Upload the folder to your hosting account and you are done.
To test it out, simply type your domain name with the name of the folder, like this:
www.yourdomainname.com/nameofyourfolder and it will automatically redirect the page.

The main disadvantage of this method is that you need a separate file for every redirect.
Note that this method will not cloak your affiliate url in the address box. This basically just do a simple redirection.

By using meta refresh method to redirect, the tag is actually telling the browser to automatically request another page of a site after a certain number of seconds. The content=”” command tells your browser how many second to wait before executing the refresh and the redirection. Becareful of using this method because many SEO experts said that search engines may not like this and they may lower your page rank or even ban you because you are sending visitors to a page other than the one they requested.

How to use PHP include

If you have a website with plenty of pages to update, to edit each page and change it one by one will be very tedious and boring things to do. The more page you have, the more possibility that you make mistakes. Using PHP include is certainly something you need and it is very helpful because not only it enables you to uniform certain parts of your content pages, but also update them all by only editing a single file.

Before you start using PHP includes, make sure that your web host or server can handle PHP files. Secondly, when you are using PHP includes on any pages, make sure the extension of those page is “.php” instead of “.html”. By using this PHP include script, once uploaded to the web, all of your files will merge appropriately to form one page.

Here’s how the PHP code looks like:

<?php include("filename.php"); ?>

The code can be pasted into sidebars, header, tables and anywhere you like.

Change the "filename" to anything you like, to make things easier to remember, it is suggested that you give it a name which correlates to the content you will be putting in it. For example if it is “header.php” then the file should be made especially for header. If the file contains advertisements for your site, then you can name it “ads.php”.

Next, you will want to create a page where the content of this page will appear in the page that contains the PHP include code. Make sure you save it with the exact same name you assigned to the code above, otherwise the script wont work.

Sometimes the path names doesn’t work and therefore you need to use alternative way, that is using the URL in the include instead, like this:

<?php include("http://www.domainname.com/directory/filename.php"); ?>

Using this method is less efficient in terms of server resources because (just like a browser) it has to create an HTTP session, get the file and then pull it in (even both of them located at the same server). This method of course is slower than using a pathname.

You can include files with .html, .php, .txt, .asp and other extensions.



Sunday, November 1, 2009

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

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 1Cell 2Cell 3Cell 4Cell 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 ACell B
Cell 1Cell 2Cell 3Cell 4Cell 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-5Cell 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 :)


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.
How to make a websiteThe 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>
  1. First list information
  2. 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.


Wednesday, October 14, 2009

How to Modify and Delete Borders in Blogger

For those using Blogger with Minima template, you can actually remove or change the borders from the header or sidebar. But if you just simply want to change the color of your borders, the easiest way is through Dashboard --> Design --> Template Designer --> Advanced.

How to Change and Remove Borders in Blogger
From there you can choose the color you like, or make the color of the border the same as your blog background in order to ‘hide’ them. After that you can press “Apply to Blog”.

To alter other border such as header, you need to go to dashboard --> Design --> Edit HTML, then search for these lines:

/* Header
-----------------------------------------------
*/

#header-wrapper {

margin:0 2% 10px;

border:1px solid $bordercolor;

}

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;
color:$pagetitlecolor;
}

To change the size (height and witdh) of the border, you can insert the following line/s inside the curly brackets of the header-wrapper:

height:140px; (this is for the height)
width:780px; (this is for the width)

Just change the amount of pixel you want for your border.
If you want to remove the border around your image, you can just delete the whole line that i highlight in green (see below).

/* Header
-----------------------------------------------

*/


#header-wrapper {

height:140px;
width:780px;

margin:0 2% 10px;

border:1px solid $bordercolor;

}


#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}


In the Minima template, the below codes create the border at the bottom of your every widget including the bottom of your main post:

.sidebar .widget, .main .widget {
border-bottom:5px dotted $bordercolor;

margin:0 0 1.5em;
padding:0 0 1.5em;
}


If you want your border at the bottom of your sidebar to be different from the border at the bottom of your main post, you can split the above codes like this:

.sidebar .widget {
border-bottom: 3px dashed $bordercolor;

margin:0 0 1.5em;
padding:0 0 1.5em;
}


.main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}


you can change the style of your border to Dots, Solid, Groove, Double, Dashed etc.
If you change the -bottom above to -top, -left, -right, that setting will apply to border only in those areas.

You can actually steal other template's border and add it to your template so that you can have similar border style from the template you taken from.

Sunday, September 20, 2009

Howto make posted image unclickable

If you upload an image or picture to your blog especially Blogspot, the image uploaded will be clickable which means that visitors will be able to click the picture to enlarge it or find out the image url. Many people do not know that their picture can be hacked in order to be unclickable, this is a useful hack for people who want their image not to be clickable for certain reasons.

Saturday, August 1, 2009

How to Add Images to Yahoo Email

To add an image as an attachment in Yahoo mail probably most of you know how to do it, just click the ‘Attach Files’ button on the Compose Mail page, browse to where you put the image and it will automatically being uploaded. How about if including the picture directly in your message, so that readers will easily view the pictures and the message at the same place without having to bother downloading the images.

In order to do it, first you have to locate your images at any web server. You can upload it to free image hosting service like Picasa web album, Photobucket, ImageShack etc or to your own web host. After that you can insert the pictures from the web in an email, make sure the Yahoo mail rich text editor is enabled.
  • Open your image in a browser, the one you upload to web server.
  • Highlight the image using your mouse and press Ctrl + C (copy). If you right click the image and select "copy image" it doesn't work in Firefox, maybe it works for Internet Explorer. So better to highlight using your mouse and press Ctrl + C.
  • Go to your Yahoo mail, put your cursor inside the email body where you want the picture to show up and then press Ctrl + V (paste). Yahoo has inserted the picture inside the email, you can continue typing your email after or before the image.
  • You can also simply use ‘drag and drop’ to do this as an alternative way.
You can add as many images to your email as you want, but keep in mind that the more graphics you put in your mail, the larger it will become and it is advised that your email should not more than 10Mb (megabytes).

how to insert image to your Yahoo email

Sunday, July 12, 2009

Google Webmaster Tools Basic Guide

Bloggers, online marketers and website owners have always need more information with regards to how search engines see their sites. Google Webmaster Tools provide free service and support for those looking to improve a site’s visibility, diagnose errors and declare preferences on how to handle web site listings. You can also have the data forwarded to your email address.

Thursday, July 2, 2009

How To Know Dofollow Or Nofollow Links

For those new SEO beginners who already know what is Dofollow and Nofollow links and the difference between both of them will normally ask the same question, that is how to know if a site is providing Dofollow blog commenting for its readers. Dofollow blog allows search engine to follow links that visitors post in comment section giving a backlink to the poster.

What are Dofollow and Nofollow Links

One of the most important things internet marketers or webmasters need to know about if they are creating and building backlinks to boost up their SEO is the difference between Dofollow and Nofollow links. You may be wasting your time doing so many blog commenting or adding links to your site if all of those links are Nofollow links. But what is Nofollow?