Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

HTML Tutorial_ Learn HTML For Free

This document is an HTML tutorial that covers the fundamentals of HTML, its structure, and various tags used to create webpages. It explains the importance of HTML for web development, its applications, and the advantages of learning it. Additionally, it provides practical examples, a guide on creating HTML documents, and answers to frequently asked questions about HTML.

Uploaded by

kirutadie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML Tutorial_ Learn HTML For Free

This document is an HTML tutorial that covers the fundamentals of HTML, its structure, and various tags used to create webpages. It explains the importance of HTML for web development, its applications, and the advantages of learning it. Additionally, it provides practical examples, a guide on creating HTML documents, and answers to frequently asked questions about HTML.

Uploaded by

kirutadie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Page 1 of 10

HTML Tutorial
HTML is a standard markup language, which stands for Hyper Text Markup
Language. It is widely used language to create webpages. HTML invented by Tim
Berners-Lee in late 1991, but it's first version "HTML 1.0" was released in 1993, and
"HTML 2.0" was the first standard HTML specification, which was published in 1995.

This HTML tutorial covers everything from basic HTML fundamental concepts and tags
to advanced techniques, such as forms, modal boxes, multimedia, and HTML5. This
tutorial is designed to help both beginners and experienced designers become experts in
building dynamic and responsive websites.

What is HTML?
HTML (HyperText Markup Language) is a standard markup language to design the
structure of a webpage. HTML is the combination of HyperText and Markup
Language. HyperText defines the internal links between webpages, and Markup
language defines the layout and presentation of text and media.

Basic HTML Structure


The basic structure of an HTML document contains the few mandatory tags, that must be
used to create a webpage. This structure must be followed to create any type of HTML
document.

Here is the basic structure of an HTML document −

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Webpage's Heading</h1>
<p>Content (Your first paragraph).</p>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and
become a certified expert to boost your career.
Page 2 of 10

Elements of HTML Basic Structure


The following are the basic tags that define the basic HTML structure −

1. <!DOCTYPE html>

This element defines the document type as HTML. This element must be written before
writing any HTML document.

2. <html>...</html>

The <html> tag is the parent tag for all HTML elements. Everything related to create an
HTML document must be written inside the <html> tag. CSS, JavaScript, and jQuery
must also be written inside this tag.

3. <head>...</head>
The <head> tag is a container tag for all those elements that are not directly displayed
on the webpage but required for the page functionalities. It contains meta tags (which
are used for SEO purposes), title tag, script tags, etc.

4. <title>...</title>

The <title> tag is used to define the title of the webpage that you can see in the
browser's tab, bookmarks list, and search engine results. This tag is also very important
for SEO purposes to help search engine to understand the content of the webpage.

5. <body>...<body>
The <body> tag is the container tag for all those elements, which represents the main
content of a webpage that displays on the browser.

6. <h1>...</h1>

The <h1> tag is one of the heading tags. It is the most important heading tag, which
defines the main title or headline of the webpage. Any text written inside <h1> and
</h1> is a top-level heading of the content.

7. <p>...</p>
The <p> tag defines a paragraph, anything written inside <p> and </p> displays as a
paragraph on the webpage. Use multiple <p> tags to display text in different
paragraphs.
Page 3 of 10

Writing Hello World in HTML


By using the above basic HTML structure, we can write an HTML document to display
"Hello World" on the webpage.

Below is the HTML code to display Hello World on the webpage in a paragraph −

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>Hello World Example by TutorialsPoint</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>

The above example will display "Hello, World!" on the browser inside top-level heading
(h1).

Comments in HTML
Just like other programming languages, you can keep any text as a comment inside an
HTML document. To create a comment in HTML, use <!-- and -->.

Any text written inside <!-- and --> considers as comment and it does not display on the
website.

Example

Below is the example of HTML comment −

<!--<h1>Hello World Example</h1>-->

Online HTML Editor


We offer an HTML Online Editor that enables you to edit and execute HTML code
directly within your web browser. By clicking on the "Edit & Run" button, you can check
Page 4 of 10

its output and edit the code as well.

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>Online HTML Editor</title>
</head>
<body>
<h1>Online HTML Editor</h1>
<p>Hello World</p>
</body>
</html>

Creating an HTML Document


An HTML document is a file containing HTML code with the ".htm" or ".html" extension.
To create an HTML document, you need a text editor. And, to display it, you need a Web
browser.

The steps to create an HTML document are as follows −

Open a text editor.

Write HTML code.

Save the file with the ".htm" or ".html" extension.

And, finally, open the file in the browser by typing the file name with a complete path, or
just open it by right-clicking and opening with a browser.

Why to Learn HTML?


Originally, HTML was developed with the intent of defining the structure of documents
like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers. Now, HTML is being widely used to format web pages
with the help of different tags available in the HTML language.

HTML is a MUST for students and working professionals to become great software
engineers, especially when they are working in the web development domain.

Advantages of Learning HTML


Page 5 of 10

The following are some of the key advantages of learning HTML −

Create a web site − You can create a website or customize an existing web
template if you know HTML well.

Become a web designer − If you want to start a career as a professional web


designer, HTML and CSS designing is a must-have skill.

Understand web − If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield the best results.

Learn other languages − Once you understand the basics of HTML, then other
related technologies like JavaScript, PHP, or Angular are easier to understand.

Applications of HTML
As mentioned before, HTML is one of the most widely used languages on the web. Here
are some of the applications of HTML −

Website development − HTML is used to create webpages (websites) that are


rendered over the web. Almost every page of the web has html tags in it to
render its details in the browser.

Internet Navigation − HTML provides tags that are used to navigate from one
page to another and is heavily used in internet navigation.
Responsive UI − HTML pages now-a-days work well on all platforms, mobile,
tabs, desktops, or laptops owing to responsive design strategy.

Offline support − HTML pages, once loaded, can be made available offline on
the machine without any need of internet.

Game development − HTML5 has native support for rich experiences and is
now useful in the gaming development arena as well.

Mobile application development − HTML with CSS3 and JavaScript can be


used for developing cross-platform mobile applications.
Multimedia and video streaming − HTML5 offers support for multimedia
elements like video and audio, which enables seamless media playback directly in
web browsers.

Audience: Who can Learn HTML?


This HTML tutorial is designed for aspiring web designers and developers with a need to
understand the HTML in enough detail along with its simple overview and practical
examples. This tutorial will give you enough ingredients to start with HTML, from where
you can take yourself to a higher level of expertise.
Page 6 of 10

Prerequisites to Learn HTML


Before proceeding with this HTML tutorial, you should have a basic working knowledge
of the Windows or Linux operating system; additionally, you must be familiar with −

Experience with any text editor like Notepad, Notepad++, or Edit Plus etc.

How to create directories and files on your computer.

How to navigate through different directories.

How to type content in a file and save it on a computer.

Understanding about images in different formats like JPEG, PNG format.

Careers in HTML
HTML is the basics for web development. Good knowledge of HTML helps you to build
your career in the following fields −

Front-end developer
Web designer

Full stack developer


Email developer

Web design reviewer

HTML Practices and Preparation


After completing HTML tutorial, you can prepare for interview and practice HTML through
our −

HTML Cheat Sheet

HTML Interview Questions

HTML Quiz

HTML Mock Test

HTML Complete Reference


Here is the complete HTML reference of elements, attributes, color name, color code,
etc.
Page 7 of 10

HTML Tags Reference

HTML Attributes Reference

HTML Events Reference

HTML Fonts Reference

HTML Articles
Explore our 2000+ HTML articles to find the solutions to your web design and
development related problems. Visit: HTML Articles

Frequently Asked Questions about HTML

1. What is the Full Form of HTML?

The full form of HTML is Hypertext Markup Language. It is the standard markup language
for developing web pages.

2. Why is HTML Used in Web Pages?

HTML is used in web pages for the following reasons −

It is used to provide a basic structure to web pages.

The HTML tags help search engines understand the content of the web page.

The HTML forms enable user interactions and include call-to-action buttons, text
fields, checkboxes, and many more.

Using HTML, we can embed various types of media like images, audio, video, etc.,
into a web page.

It is also used in the creation of hyperlinks that can point to other web pages,
different sections of the same page, or other resources on the web.

3. How to Save an HTML file?


To save an HTML file, follow these simple steps −

Open a text editor (like Notepad, Sublime Text, Atom, etc.) on your system.

Write your HTML code.

Click on the "File" menu in your text editor.

Click on "Save As".


Page 8 of 10

In the dialogue box, choose the location where you want to save the file.

Type a name for your file, followed by the .html extension so that the browser
interprets it as an HTML file. For example, index.html.

Click "Save".

4. Who Invented HTML, and in Which Year?

HTML was invented by Tim Berners-Lee, a physicist at CERN, in late 1991. However, the
first standard HTML specification was published in 1995.

5. What are the Main Features of HTML?

HTML has several key features as follows −

Simplicity − HTML is easy to learn and use. It has a clear and straightforward
syntax which makes it simpler for beginners also.

Flexibility − HTML allows developers to create a wide variety of web documents,


from simple static web pages to complex web applications.

Platform Independent − HTML is a standard that is supported by all modern


web browsers. This means that an HTML document can be displayed in any web
browser on any operating system.

Linking − One of the key features of HTML is the ability to create links to other
web pages.

Embedding Media − It also allows embedding various types of media like


images, audio, video, etc., into a web page.
Interactivity − HTML provides elements to create interactive forms that allow
users to input data. This is crucial for tasks like user registration, submitting
search queries, and more.

Semantics − HTML5 introduced semantic elements that convey the meaning of


the content to the browser and developer. Examples include <header>, <footer>,
<article>, and <section>.

Integration − HTML works well with other languages that are commonly used in
web development, such as CSS (Cascading Style Sheets) and JavaScript. CSS is
used for styling and layout of web pages while JavaScript is used for interactivity.

6. What is the Latest Version of HTML?


The latest version of HTML is HTML 5 which was drafted in 2008 and accepted in the year
2014 by W3C.
Page 9 of 10

7. Is HTML a Programming Language?


No, HTML is not a programming language. It is a markup language that structures the
content on the web. It stands for HyperText Markup Language.

8. What is HTML Web Storage?


HTML Web Storage (DOM storage) is a feature of HTML5 that allows web applications to
store data locally within the user's browser. It stores data in the form of key-value pairs.
There are two types of web storage −

localStorage − This object stores data with no expiration date. The data will not
be erased when the browser is closed and will be available in the next session.

sessionStorage − This object stores data for one session. The data is lost when
the browser tab is closed.

9. How to Run an HTML File in a Browser?

To run an HTML file in a browser, first, save your HTML file with a .html extension. For
example, index.html. Then, locate your file and double-click to open it in your default
browser.

10. What are HTML Components?


HTML components, also known as HTML elements, are the building blocks of HTML
pages. They represent parts of a webpage and are defined by HTML tags. Here are some
of the main components −

DOCTYPE Declaration − An HTML document starts with a <!DOCTYPE html>


declaration followed by a <html> tag.

Headings − HTML provides six levels of headings from <h1> to <h6>, with
<h1> being the highest (or most important) level and <h6> the lowest.

Paragraphs − The <p> tag defines a paragraph.

Links − The <a> tag defines a hyperlink, which is used to link from one page to
another.

Images − The <img> tag is used to embed images in an HTML page.

Lists − HTML supports ordered, unordered, and definition lists.

Tables − The <table> tag defines a table in HTML.

Forms − The <form> tag is used to create an HTML form for user input.
Page 10 of 10

Divisions & Sections − The <div> tag is a container unit that encapsulates
other page elements and divides the HTML document into sections. HTML5
introduced semantic elements like <section>, <article>, <header>, <footer>,
<nav>, etc., which serve a similar purpose but provide additional semantic
information.

Media Elements − HTML5 introduced media elements like <video> and


<audio> which can be used to embed video and audio files in an HTML
document.

You might also like