Learning HTML: Get Started Using HTML with basic

In this article, I will give you clear explanation about HTML.

What is HTML?

HTML is a set of “markup” symbols or codes embedded in a file intended to be displayed in a worldwide web browser.

The markup tells the web browser how to display text, images, audio and video files on a web page.

The Individual markup elements are called tags.

HTML Document Structure

The HTML document is divided into two main sections:

HEAD : Contains info concerning the document :

– Title of the page

– Meta tags : Used to describe content

– JavaScript and style sheets links

BODY : The document contains the actual contents

– This is the section that appears in the browser window

HTML Basic Tags

The basic structure of all HTML documents is simple and should include the following minimum elements or tags:

<html> – HTML pages – Main Container

<head> – for page header information

<title> – title of the page

<body> – The body is the main element of the page

Sample HTML Document

<html>
<head>
<title>My First web page</title>
</head>
<body> Hello Everyone…</body>
</html>

Information that the browser ignores:

Tabs
Multiple spaces will ignore and appear as a single space
New lines

Eg :

“Hello,

How are you?”

The browser will ignore the free spaces and new line

“Hello, how are you?”

HTML Attributes

The attributes provide additional information about the element.

Attributes of the start tags are always specified.

Attributes come as name / value pairs like:

 Name = “value”

<body bgcolor=“yellow” background=“img1.jpg”>
…………….
…………….
</body>

Headings: <h1> …..<h6>

§ You can make different headings on your page

§ Headers appear in bold

An empty row will also follow the headings
Use for titles
h1 is the largest font and h6 is the smallest header

Tags without end tags

Most (but not all!) HTML tags have a open tag and an close tag

Eg :

<h1> Hello,world!</h1>

But some tags use without end tags

<br/> – break rule

<hr/> – creates a horizontal rule

<img/> – insert image

<meta/> – insert meta data to a webpage

<DOCTYPE/> – define document type

Comment

Browser will not display text in between;

<!—this is a comment -->
<!—this is another
	Comment
-->

Font tags

The <font> tag specifies the font face, font size, and font color of text.

<font face=“Arial” size=“4” color=“red”>
Hello world
</font>

Text formatting tags

Bold:

<b> some text </b> or <strong>

The text between the tags will be bold

Italic:

<I> some text </I> or <em>

Italic display the text at a slight angle

Underline :

<u> some text </u>

Underline the text

Strike – out :

<strike> some text </strike>

Puts a line right through the Centre of the text

Centre :

<center> some text </center>

Makes everything in between the tags centered (center of the page)

Image Tags

<img/> tag defines an image in a HTML page

<img src=“apple.jpg” title=“fresh fruits” height=“100px” width=“100px” />

List in HTML

Lists are used to organize items in the browser window:

Unordered list

Bulleted list – list items with no particular order

Name	
<ul>	
        <li>Andrew</li>	
        <li>Jack</li>	
        <li>Tara</li>
</ul>

Name

Andrew
Jack
Tara

2. Ordered list – Numbered list

Name	
<ol>	
        <ol> Andrew </ol>	
        <ol> Jack </ol>	
        <ol> Tara </ol>
</ol>

Name

Andrew
jack
Tara

Hyperlinks (Anchor Tag)

Hyperlinks are highlighted and underlined text. When you click on it, it takes you to another page on the web.

<a href=“index.html”> Home </a>

Targeted Links

If you specify target = “_blank”, a new browser window will be opened.

<a href=https://www.freetutorialportal.com target=“_blank”>Open freetutorialportal.com in a new page </a>

HTML Tables

Tables represent a simple mechanism for creating rows and columns of data.

Basic Tag structure

<tr> - Table row
<th> - Table heading
<td> - Table data

<table>
<tr>
	<th>subject</th>
	<th>marks</th>
</tr>
<tr>
	<th>Engllish</th>
	<th>91</th>
</tr>
<tr>
	<th>Science</th>
	<th>88</th>
</tr>
</table>

Inline Frames

Inserts a HTML document inside another

Created with the <iframe> tag

<iframe src=“link.html”>Link</iframe>

What is HTML5?

HTML5 is the new HTML Version of the HTML.

New Elements and Attributes
Web Applications
Full CSS3 Support
2D/3D Graphics
Local SQL Databases

Audio Tags

The HTML <audio> element is used to input the sound file from the storage using the src attribute or the <source> element.

<html>
<head><title>Audio Tag</title></head>
<body>
<audio controls>
<source src=“audio1.mp3” type=“audio/mpeg”>
</audio>
</body>
</html>

Video Tag

The HTML <video> element is used to embed video content in documents.

<html>
<head><title>Video Tag</title></head>
<body>
<video width=“1200px” height=“850px” controls autoplay>
<source src=“video1.mp4” type=“video/mp4”>
</video>
</body>
</html>

HTML Editors

We can use HTML Editor applications for easy coding. We can see different type of HTML Editors in the market.

Below are the most used Editors based on popularity and features.

Notepad++

Notepad++ is a free open source tool and it can be Customize for developers.

Available for: Windows and Linux (via Wine)

S ublime Text

Sublime Text is a very attractive Cross-platform tool used by the many developers.

Available for: Windows, OS X and Linux (32/64 bit)

Visual studio code

Visual Studio Code is a multi-language and multi-platform support tool which many developers used for coding.

Available for: Linux, Windows and OS X

Adobe Dreamweaver CC

Dreamweaver is a Premium platform to support for the write codes in many programming languages.

Available for: Windows and OS X

HTML Forms

What is the Form?

HTML Form is form used to collect user data on web pages and it allow interaction between user and web server.

Form Elements

The HTML <form> tags contain three basic functions

To define input for into <input/>
To trigger action <input type=“submit”/>
Attributes to define desired action <form method= “post” action=“login.php”>

Basic input types

Input Type	Description
Text	insert a text box
Checkbox	insert a check box
Radio	insert a radio button
Password	insert a password box through the protect entry
Hidden	input to script not supplied by user
Button	insert a button
Submit	start the action
Reset	deletes previous entries

Action and Method response

Method is either GET or POST

GET – form data sent as part of URL.

POST – form data sent in HTML header.

Action – defined to send the data from HTML or PHP script to the relevant location on the server

GET Method Example

<html>
<head>
<title>Login Form</title>
</head>
<body>
<form name=“frmLogin” action="login.php" method="GET">
          <div class="container">   
              <label>Username : </label>   
              <input type="text" placeholder="Enter Username" name="username" required>  
              <label>Password : </label>   
              <input type="password" placeholder="Enter Password" name="password" required>  
              <button type="submit">Login</button>
              <button type="button" class="cancelbtn"> Cancel</button>   
              Forgot <a href="#"> password? </a>   
          </div>   
</form> 
</body>
</html>

Note – It’s not advisable to enter information such as password through the GET method. Use the POST Method for it.

POST method Example

<html>
<head>
<title>Login Form</title>
</head>
<body>
<form name=“frmLogin” action="login.php" method="POST">
          <div class="container">   
              <label>Username : </label>   
              <input type="text" placeholder="Enter Username" name="username" required>  
              <label>Password : </label>   
              <input type="password" placeholder="Enter Password" name="password" required>  
              <button type="submit">Login</button>   
              <button type="button" class="cancelbtn"> Cancel</button>   
              Forgot <a href="#"> password? </a>   
          </div>   
</form> 
</body>
</html>

we can more stylish this form adding CSS.

Checkbox Tag

The <Checkbox> tag use to input that let you choose multiple values.

<form name=“ testForm” action="save.php" method="POST">
<input type= “checkbox” name= “checkbox1” value= “checkbox” checked= “checked”>
</form>

Radiobox Tag

The <Radiobox> tag use to input lets user choose one value.

<form name=“ testForm” action="save.php" method="POST">
<input type= “radio” name= “radiobtn” value= “M” checked= “checked”>Male
</form>

Note – each radio button group must be use same name.

Textarea Tag

The <textarea> tag is used to allows the user to input text over multiple rows.

<form name=“ testForm” action="save.php" method="POST">
<textarea name= “address” row= “4” cols= “36”> ……</textarea>
</form>

Combobox Tag

The <combobox> tag allows the user to select an option through the multiple options in the form.

<form name=“testForm” action="save.php" method="POST">
<select name= “Gender”>
<option selected= “selected” value=“M”>Male</option>
<option value=“F”>Female</option>
</select>
</form>

Listbox Tag

The <listbox> tag used to select more than one item from the box.

<form name=“ testForm” action="save.php" method="POST">
<select name= “list1” size= “5” multiple= “multiple”>
<option value= “1”>Item 1</option>
<option value= “2”>Item 2</option>
<option value= “3”>Item 3</option>
<option value= “4”>Item 4</option>
<option value= “5”>Item 5</option>
<option value= “0”>All</option>
</select>
</form>

File Upload Tag

The <input> tag with Type = “file” allows the user to select one or more files from their device. Once selected, the file can be uploaded to a server

<form name=“frmLogin” action="login.php" method="POST">
<input type= “file” name= “datafile” size= “30”>
</form>

Summary

In this tutorial we learned basic of the HTML as well as Tags.So If you have any queries related to this article please leave your comment in the comment section below.