Basic HTML Syntax

Published on April 6th, 2013 by | Category: Programming

I don’t know if you follow my PHP articles or not. As I have mentioned here, I have decided to write PHP training articles and teach PHP to my followers. I am doing this because I love to teach and I am really a good teacher. My PHP articles will prove that even programming which looks too complicated to majority of people, can look too easy and joyful when a good teacher instructs you. I have a very easily to understand writing style and this is the key-point.

This is the 5th article I have written about PHP at this website so far. If you have found my website through this article, and you are interested in learning PHP, first your should read the articles I have written so far and then follow my next articles. To do that, you can always visit the below article and check the list of my PHP training articles at the bottom: How to Learn PHP Programming

You don’t have to be a programmer to learn PHP. You can learn it even if you have no programming skill and experience. However, you should know the basic HTML syntax, because we use PHP to develop web pages and all the web pages are displayed on the computers web browsers using the HTML codes. Creating HTML is the final stage of displaying a web page on the computer screen, and to do that, PHP has to create HTML codes first (please read this article: How PHP Works). Therefore, PHP and HTML are connected to each other, and to learn PHP, first you have to know the basic HTML syntax.

HTML is very easy to learn. You can learn the basic HTML syntax in less than a few hours. In this article, we will talk about the basic HTML syntax, and then will talk about the PHP syntax in the next articles. I already have a short article about HTML that I recommend you to read: Create Your First Web Page Using HTML

Basic HTML Syntax

All the web pages are created using the HTML codes. Something you see on your computer screen right now is the result of the HTML codes performance. You don’t see the HTML codes when you visit a web page. You see the result of the HTML codes performance. However, as HTML is a client-side system, it can be seen on the clients’ computer. To see the HTML codes of the current web page, right click somewhere on the page and click on “View page source” if you are using Google Chrome and FireFox, and on “View source” if you are using Internet Explorer. A new window will be opened that shows the HTML codes. Something you were seeing on the web page was the translation of these codes.

Each web page must have a standard HTML format. Of course, it doesn’t mean that if you do not have the HTML standard format, it will not work. It works, but it can have some problems. Before we talk about these things, let me tell you about the basic HTML syntax, and standard format that each web page has to have.

1. <HTML> Tag:

HTML stands for Hyper Text Mark-up Language. HTML is not a programming language. It is a Mark-up language that marks up the texts. To mark up the texts, HTML uses some tags. There are open or start tags, and close or end tags. The first HTML tag is <HTML> which shows the beginning of the HTML codes to the web browser. <HTML> is a start tag, and its close tag is </HTML>. All the web pages have to be started with <HTML> and ended with </HTML>. Everything you see on the web pages are placed between <HTML> and </HTML> tags.

2. <HEAD> Tag:

After, we have the <HEAD> tag. The <HEAD> tag also has an end or close tag which is </HEAD>. The things you place between the <HEAD> and <HEAD> will not be seen on the web page body. In fact, many of the things we place between the and will not be seen on the web page. They are hidden from the web page visitors and only the softwares like the Google spider (Googlebot) can see it. Of course, you can see them if you check “View page source” the way that I explained above. The only thing from the<HEAD> and </HEAD> that can be seen on the web page is the text you place between <title> and </title> which are known as title tags. The <title> and </title> tags have to be placed between the <HEAD>and </HEAD> tags. The text you place between the <title> and </title> tags is knows as the web page title, and will be seen at the very top left side of the web page (please see the below picture). Web page title is very important for search engine optimization (SEO).

3. <BODY> Tag:

Everything you see on the web page body, is placed between the <BODY> and </BODY> tagsā€”all the texts, pictures, forms and… on the page body. The below picture shows a web page structure. Please click on it to see it in full size:

web page structure

Something we discussed above is the general format of a web page HTML coding. According to what we learned so far, this is the standard HTML format for a web page:



the web page title text goes here


Web page body objects including the texts, pictures and... go here.

For your information, the numbers you see at the left column, are the lines numbers and they are not related to the codes. To see the pure codes in the above box, you can click on the HTML at the top left side of the above box. Also, you can click on the scissor to copy the code you see in the box, to your computer clipboard.

So far, you learned the general HTML format for a web page. Now you can create your first we page. Just copy/paste the above HTML code to Notepad and save it as a file with htm or html extension; e.g. index.htm or index.html

Then double click on the saved file, and it will be opened in your computer web browser. You can change the above code as below and then save it in a html or htm file, just to see the differences:



Nice Title


Hello, World! : - )

This is how the web page will look. Please click on it to see it in full size:

our first web page

4. Other HTML Tags:

I am not going to list all the HTML tags here in this article. There are too many HTML tags. Here, I am just listing some of the most famous HTML tags. When it is the time, we will talk about the other HTML tags if necessary. Here, my goal is to help you understand the basic HTML syntax. If you learn this, it will be too easy for you to complete your HTML knowledge.

<B> and </B> are to make a text bold. If you place a text between <B> and </B>, it will be displayed bold.

<I> and </I> are to make a text italic. If you place a text between <I> and </I>, it will be displayed italic.

<h1> and </h1> are to make a text big to be used as as the title. There are smaller sizes of the h tag:

<h2> and </h2>

<h3> and </h3>

There are more complicated tags too. Like the tags that are used to create tables on the web pages. We will talk about these complicated tags later.

As it was explained above, HTML tags like <HTML>, <HEAD>, <TITLE> and… have to be closed. However, there are some HTML tags that do not have to be closed. For example:

<hr />

that creates a horizontal line on the web page, doesn’t have a close tag.

XHTML:

XHTML is a variant of HTML (eXtensible HTML). There is no big difference between HTML and XHTML. You do not have to be worried about learning XHTML because it is not necessary and there is no significant and critical difference between XHTML and HTML. I am talking about it here just because I do not want you to get confused if you see XHTML somewhere in future.

XHTML has some very simple rules:

1. All tags have to be written in lowercase: In reality, it will not make any difference at all. Werther you write the codes in uppercase or lower case, the result will be the same on the web page.

2. Tags have to be closed properly: For example when you have started the tags as <strong><em>Hello , then you have to close them like this: <strong><em>Hello</em></strong> , not like this: <strong><em>Hello</strong></em>

3. Attributes have to be placed in double quotations: Some HTML tags have attributes. For example the

<hr />

tag that I talked about it above (it creates horizontal lines on the web page), has some attributes. When you create horizontal lines using this tag, sometimes you have to determine the thickness and color of the line. These features (thickness and color) have to be determined through defining the attributes for the

<hr />

tag. XHTML rule says that these attributes have to be placed in double quotations:

<hr size=”3″ />

You might ask what will happen if you do not place the attributes in double quotations like this:

<hr size=”3″ />

Nothing will happen. They still work. However, it is just the XHTML rule that says they have to be placed in double quotations.

4. All tags have to be closed: We already mentioned that many of the HTML tags have a start or open tag, as well as an end or close tag. We also mentioned that there are some other HTML tags that have no close or end tag. It is easy to follow the XHTML rule in closing the tags that have an ending tag. But the question is what should we do for the tags that have no end tag? XHTML says that they have to be closed by adding a space and slash at the end of the tag. For example, instead of writing

<hr>

, you have to write:

<hr />

Does it make any difference? In reality no. Both of the

<hr>

and

<hr />

work the same.

That was all about XHTML.

CSS:

Advanced web developers prefer to use a system called CSS or Cascading Style Sheets to create the formatting features for the web page content. There are a lot of things that HTML is not able to do. For example, have you ever noticed that on some of the web pages when you hover your mouse pointer on a link, it becomes underlined and when you move your mouse pointer off, the line disappears again? You can see it on the current page too. If you scroll up on the current page and hover your mouse pointer on the links I have placed at the right side, you will see that they become underlined. These things can not be done with HTML and have to be done through CSS.

CSS makes the web developers’ life much easier. One good thing about CSS is that it enables you to define the format of the objects of the website that you are developing just once and put them in a css file. Then each of the web pages of the website use and read the same CSS file when they want to be loaded. Doing so, you will not have to define the objects’ format for each of the pages. It saves you a lot of time. Additionally, as all the web pages will use the same CSS file, they all will have the same format and will be completely consonant. Also, when you want to change a formatting feature (for example you want to change the color of all of the hyperlinks on all of the web pages of a site), you will not have to modify each page. You just modify the CSS file and the changes will be applied to all the web pages.

Therefore, a web developer also has to know CSS, and because we want to learn PHP programming to develop the web pages, we have to know CSS too. CSS and HTML are mixed with each other. However, CSS is known as a completely different system that HTML uses to enhance the abilities and features of the web pages.

CSS can be added to the web pages through 2 different ways. One way which is saving the CSS codes in a CSS file was explained above. This is the most recommended method because in future, you can just edit the CSS file and see the changes on all of the web pages. To make each of the web pages read the CSS file, you have to add the below line to each web page HTML code anywhere between the <HEAD> and </HEAD> tags:

<link href=”style.css” rel=”stylesheet” type=”text/css” />

Style.css is the CSS file that have already created. This file carries all the CSS codes. The above line that has to be placed on each web page, enables the web pages to have access to the CSS file and read the CSS codes and apply it to the web page elements.

The other way of adding CSS to the web page, is using the CSS tags on each web page separately, and either inside the HTML tags (inline) or between thetags (see the examples below). This is not a recommended method, because when you want to change a formatting feature, like changing the color of all of the links or texts or page background, you will have to modify all of the web pages. For example, adding the below CSS code to a web page will make the page background yellow, and will make all the texts have a blue color, size of 14px, and font of Arial:

The formatting rules you define for your web page through the CSS codes can be applied to all of the objects that you place on the web page. For example, when you define something for the images, all of the image HTML tags you will place on the page will be affected. However, you can define special CSS classes and call these classes only for some of the HTML tags that you want. You can also define ID for a CSS rule and call the rule by the HTML tag through having its ID in the HTML tag:

The second line is a general rule that will be applied to the page body, no matter if the body tag calls the CSS code or not.

The third line is a CSS class named error. If you call this class in any HTML tag, its features will be applied to the object that the HTML tag will add to the web page. For example, if this class to be called by an image HTML tag, the image will have a red border:

The 4th line is a CSS ID. Like CSS class, CSS ID can also be called by a HTML tag. The difference of class and ID is that class can be called by unlimited number of elements on a web page, but ID can be called only by one element and two different elements can not have the same ID. The below HTML tag will load the My_Picture.jpg on the web page with a green border:

Create Some XHTML Pages:

Now that you have learned the HTML and CSS syntax and you know about the XHTML rules, you can create simple web pages using the HTML tags, CSS codes, and by having the XHTML rules in your mind. Open your text editor (like Notepad or Notepad++), enter the below codes to it, and save it with a html or htm extension. Then click on the saved file and see how the pages look.

A web page with yellow background and blue Arial font:



Yellow Page



This is a page with yellow background and blue fonts.

The same page with standard XHTML format:





Yellow Page



This is a page with yellow background and blue fonts.

This was some introductions and practice around basic HTML syntax, and also XHTML and CSS. In the next article, we will talk about the basic PHP syntax.

Leave a Reply

Your email address will not be published. Required fields are marked *