Basics of HTML

HTML is Hyper Text Markup Language used to create web pages. This is have set of tags. Each HTML tag describes different document content. In the earlier post learned about Open Source, now learn about HTML( Lesson from PHP online course ). HTML is a Markup code that is very popular because it is one of the most commonly used on the Internet at the moment. It can be read by most modern web browsers and is the preferred for web pages. They like the idea of people using just HTML and having any other programming codes placed off the page.

Basics of HTML by Anil Kumar Panigrahi

Basics of HTML by Anil Kumar Panigrahi

Here is a basic tags of HTML.

<!DOCTYPE html>
<html>
<head>
<title>This is sample HTML file</title>
</head>
<body>
    <h1>This sample Heading by Anil Labs</h1>
    <p>This is first paragraph by Anil Labs</p>
    <p>This is sample <b>HTML</b> page</p>
</body>
</html>

In this DOCTYPE – declares the document type
HTML starting with <html> and ending with </html>
<head> and </head> is the header of page
Title for the HTML page will be under <title> and </title>
Main HTML page content will be in <body> and </body>
Page Heading will be in heading tags i.e. h1,h2,h3,h4,h5,h6
Paragraphs in <p> and </p>

Some more tags will used in HTML pages

<h1>,<h2>,<h3> to <h6> : Heading tags
<p></p> : Paragraph tag
<b></b> : Bold tag
<i></i> : Italic tag
<ul></ul> : Unorder list tag
<ol></ol> : Order list tag
<li></li> : List item tag
<br> : Break tag
<hr> : Horizontal rule or thematic break
<div></div> : division tag that set of documents in one block
<select></select> : select tag for list of options in drop down box
<input> : Input tag for input box
<form></form> : Form tag for dynamic pages ( to store data into server or get from there )
<table></table> : Table tag for display tables in page
<th></th> : Table header tag
<tr></tr> : Table row tag
<td></td> : Table data tag
<font></font> : Add fonts to block of contents

Calling/Add styles for HTML page

Under header block (<head> ,</head>) call the external styles by below format

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

or internal styles

<style type="text/css">
.pageStyle{
    color:#000000;
    font-size:15px;
}
</style>

call this style in HTML element by

<p class="pageStyle">This is simple style</p>.

Calling/Add scripts for HTML page

Under header block (<head> ,</head>) call the external scripts by below format

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

or internal scripts

<script type='text/javascript'>
    function pageFunction(){
        alert("This is simple script function");
    }
</script>

call this function in HTML element by

<input type="button" value="Click Me!" onClick="pageFunction();" />

This post contains small descriptions and small examples.

Anil Kumar Panigrahi

With more than 10 years experience in PHP and Founder of Anil Labs, a blog for PHP and related posts. contributed posts regarding CodeIgniter, CakePHP and Learn PHP online ... Contact : [email protected]

You may also like...

4 Responses

  1. April 12, 2016

    […] post explains how to send email using HTML templates in Codeigniter, earlier post we learned how to send mails using HTML content and using phpmailer […]

  2. November 22, 2017

    […] HTML Form with reCAPTCHA code and […]

  3. November 22, 2017

    […] Auto Close Tag: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text […]

  4. August 13, 2018

    […] Create HTML file with inline styles, In the earlier posts, I had explained how to use the HTML tags in the page. So prepare the HTML file. […]

Leave a Reply

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