html5-386614_1920

Learning HTML: Get Started Using HTML

In this article, I will give you clear explanation about basic of the HTML and Tags.

HTML

What is HTML?

HTML (Hypertext Markup Language)

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.

Eg :-

<html>, <title>, <table>, </html>, </table>

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

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

Eg:-

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

Eg :

<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

Eg :

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

List in HTML

Lists are used to organize items in the browser window:

  1. Unordered list

Bulleted list – list items with no particular order

Eg:                                                                                                                                                

                                                 

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

                               

Name

  • Andrew
  • Jack
  • Tara

  2. Ordered list – Numbered list

Eg :

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

Name

  1. Andrew
  2. jack
  3. Tara

Hyperlinks (Anchor Tag)

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

Eg:

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

Targeted Links

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

Eg :

<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

Eg :

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

Summary

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

SHARE THIS:

Leave a Comment

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