PHP Tutorial Part two Basics of HTML5 on the way to PHP Learning

Introduction- Basics of HTML5 on the way to PHP Learning

HTML is indispensable to learn, if you are eager to be a PHP expert in web development.  We will be discussing here Basics of HTML on the way to PHP Learning. This tutorial will only discuss a few basics. So that, the code in HTML won’t bother you while discussing it. So let’s start!

Tags

A tag is a unit of HTML on which whole language relies. There is always a starting tag and an ending one. Starting tag will start with a “<” and ends with a “>”. In the middle there will be the name of the tag. For example “<html>” is a very simple starting tag.

Ending tag is pretty much the same with a minor difference of a “/” before the tag name. For example </html> is an ending tag.

Remember the code from the previous tutorial? It is given again

<!DOCTYPE html>

<html>

<head>

<title>My First Script</title>

</head>

<body>

<?php echo “Hello World” ?>

</body>

</html>

 As you can see <html>, <head>, <title> and <body> all are starting tags whereas </html>, </head>, </title>and </body> are ending tags.

<!DOCTYPE html> and <? Php ?> are examples of some special tags. We will discuss them in a while.

Structure of HTML- Basics of HTML5 on the way to PHP Learning

Start of an HTML page always begins with a <!DOCTYPE html> tag. It is the only one which does not have an ending tag. Only purpose of this is to tell the browser that code given below is of HTML.

After that, the second one must be a <html> tag and its ending tag will always be at the end of the document. All of the other code of a web page will be in between of these two tags.

Now, as we all know that every website is consist of two major parts one is the head and other one is the body. So their coding is also done in this format.

Head

In this section of html we handle the head of a website including title and logo. In the picture given below you can see three titles and logos of three different websites. We do all the programming of these in between the <head> and </head> tags.

Basics of HTML5 on the way to PHP LearningThe enables us to write any text that is desired to be a title of the web page. (Remember that title tag is always used in between the head tags).

Let’s code the head of a new web page. Open a text editor and copy the code below.

 <!DOCTYPE html>

<html>

<head>

<title>I Love HTML</title>

</head>

</html>

Save this page as title.html or anyname.html (select file type as “All Files” as shown below) and open the file with your browser.  Given is the examples of saving the code.

Basics of HTML5 on the way to PHP LearningAnd here is the output of the file when opening it by a browser. (Remember that HTML files can simply be open from anywhere. Just remember to open these with a browser)

Basics of HTML5 on the way to PHP LearningSee, there is a Title as “I Love HTML”. But the whole web page is blank. This is because we haven’t changed anything in the body. So let’s jump to the body part.

Body

Body is basically everything visible to you in a website (excluding the head of course). That’s why, there is a vast variety of tags to put inside the body tags. From those, some of the most famous are being mentioned here.

  • <p> is used to insert a paragraph of text in the website. Correct syntax is

<p>Text to be printed</p>.

  • <h> tag is for adding a heading e.g. <h>Heading text here<h>.
  • You can also use some numbers in the <h> tag to determine the size of heading. <h1></h1> being the largest heading and <h6></h6> being the smallest.
  • To add a hyper link we use

<a href=”Any url you want user to be redirected”> Text you want to be visible</a>

  • <br> It will make the next coming code to skip one line and output from the next line we can use this tags without an ending tag.

Let’s test the functionality of all the above mentioned tags. We will have to insert all those inside the “body” tags.

<body>

<h1>Largest Heading</h1>

<h6>Smallest Heading</h6>

<p>This is a paragraph that contains some text</p>

<a href=”http://google.com”>Click me</a>

</body>

And paste this to our existing code. So the whole code will look like

Basics of HTML5 on the way to PHP LearningAnd when we run it on the browser, results are given here

Basics of HTML5 on the way to PHP LearningUsing PHP-Basics of HTML5 on the way to PHP Learning

So, now as we have an overview of HTML. We can move forward to discuss the PHP scripting. You must remember these points while coding in PHP.

  • If you use any PHP tag in an HTML file, you must change the extension of the file from .html to .php.
  • A php file won’t run by simply opening it with a browser. Instead you’ll have to follow the process as we discussed in the previous tutorial How to Run Your First PHP Script on Windows.
  • You can add as many php tags as you want in a single file.
  • PHP tags can be added anywhere, as long as the syntax is correct.
  • Always add a semi colon at the end of each php statement.

Let’s start

PHP Tag

A <?php ?> tag is a really special kind of tag. As you can see, there is no Ending tag instead “?>” part of the tag works as the ending boundary. And all of code will be in between of these two parts. Here are some very basics of the functions and commands that we use in PHP.

First one is echo, it is used to print any text on a web page. For example, running the code below will print “PHP is great” on a web page. There is another command with the same functionality known as the print command.

<?php echo “PHP is great”; ?>

We can also use this along with the html for example

<?php echo “<h2>Combination of PHP and HTML</h2>”; ?>

Add these lines to the previous file we created so the code will look like as

PHP Tutorial Part two Basics of HTML5 on the way to PHP LearningNoticed? I have added both of the lines in a single PHP tag. Yes you can add as much of code as you want within a single tag Just don’t forget to insert a semi colon at the end of each statement. Now, let’s test this by running it using the method we already discussed.

Basics of HTML5 on the way to PHP LearningFinal Words-Basics of HTML5 on the way to PHP Learning

So now we know what HTML is and how we can use PHP code inside an HTML page. I hope you enjoyed learning it. Buckle up for the next tutorial which is going to be

PHP working with Data types and Variables

We are excited to hear the feedback from your side. Don’t forget to send us the code samples and contact us in case of any error. Happy Learning.

Also See:

Part One: HOW TO RUN YOUR FIRST PHP SCRIPT ON WINDOWS
Part Three: PHP WORKING WITH DATA TYPES AND VARIABLES
Part Four: IF ELSE STATEMENTS AND ARITHMETIC OPERATIONS IN PHP
Part Five: TUTORIAL ON TYPES OF LOOPS IN PHP – PHP LOOP TYPES
Part Six: INDEXED AND ASSOCIATIVE ARRAYS IN PHP
Part Seven: FUNCTIONS IN PHP
Part Eight: INTRODUCTION TO MYSQL
Part Nine:CONNECTING MYSQL DATABASE PHP
Part Ten: FORMS IN PHP – PHP FORM EXAMPLE WITH DATABASE
Like this post:
error

Leave a Reply

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