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.

1
2
3
4
5
6
7
8
9
10
11
<!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

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

or internal styles

1
2
3
4
5
6
<style type="text/css">
.pageStyle{
    color:#000000;
    font-size:15px;
}
</style>

call this style in HTML element by

1
<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

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

or internal scripts

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

call this function in HTML element by

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

This post contains small descriptions and small examples.

Categories: CoursePHP

6 Comments

How to send email using HTML templates in Codeigniter - Anil Labs · April 12, 2016 at 9:09 am

[…] 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 […]

How to integrate Google reCAPTCHA for your form with validation - Anil Labs · November 22, 2017 at 7:15 am

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

How to install visual studio code in Ubuntu for PHP development - Anil Labs · November 22, 2017 at 7:16 am

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

Sending HTML template emails using SMTP in NodeJS - Anil Labs · August 13, 2018 at 7:03 am

[…] 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. […]

Send email in PowerShell Script using SMTP - Anil Labs · November 6, 2022 at 5:13 pm

[…] 1: Create or prepare the HTML template which we need to […]

Sending HTML template emails from Oracle APEX - Anil Labs · September 13, 2023 at 4:10 pm

[…] updated guide, we will explore how to harness the capabilities of Oracle APEX to craft and send HTML template emails. Whether you’re a developer looking to enhance your email communication or a business […]

Leave a Reply

Avatar placeholder

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