What is Internet?
The Internet is essentially a global network of computing resources. You can
think of the Internet as a physical collection of routers and circuits as a set of
shared resources.
Some common definitions given in the past include −
A network of networks based on the TCP/IP communications protocol.
A community of people who use and develop those networks.
What is WWW?
WWW stands for World Wide Web. A technical definition of the World Wide Web
is − All the resources and users on the Internet that are using the Hypertext
Transfer Protocol (HTTP).
The World Wide Web is a way of exchanging information between computers on
the Internet, tying them together into a vast collection of interactive multimedia
resources.
What is HTTP?
HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to
transfer hypertext documents that makes the World Wide Web possible.
What is URL?
URL stands for Uniform Resource Locator, and is used to specify addresses on
the World Wide Web. A URL is the fundamental network identification for any
resource connected to the web (e.g., hypertext pages, images, and sound files).
A URL will have the following format −
protocol://hostname/other_information
What is Website?
Currently you are on our website Tutorialspoint.com which is a collection of
various pages written in HTML markup language. This is a location on the web
where people can find tutorials on latest technologies. Similarly, there are
millions of websites available on the web.
Each page available on the website is called a web page and first page of any
website is called home page for that site.
What is Web Server?
Every Website sits on a computer known as a Web server. This server is always
connected to the internet. Every Web server that is connected to the Internet is
given a unique address made up of a series of four numbers between 0 and 256
separated by periods. For example, 68.178.157.132 or 68.122.35.127.
When you register a Web address, also known as a domain name, such as
tutorialspoint.com you have to specify the IP address of the Web server that will
host the site.
What is Web Browser?
Web Browsers are software installed on your PC. To access the Web you need a
web browsers, such as Netscape Navigator, Microsoft Internet Explorer or
Mozilla Firefox.
Introduction to HTML:
Creating a Web page:
A Web Page or webpage is a document, commonly written in HTML , that is viewed in an Internet
browser. A web page can be accessed by entering a URL address into a brower’s address bar. A web
page may contain text, graphics, and hyperlinks to other web pages and files.
A web page is often used to provide information to viewers, including pictures or videos to help
illustrate important topics. A web page may also be used as a method to sell products or services to
viewers. Multiple web pages make up a website, like our Computer Hope website.
When you click a link provided by a search engine, you are accessing a web page. The Internet consists
of millions of web pages, with more being added every day.
Introduction to HTML:
HTML stands for Hyper Text Markup Language.
HTML is the standard markup language for creating Web pages.
HTML describes the structure of a web page.
HTML consists of a series of elements.
HTML elements label pieces of content such as “this is a heading “, “this is a paragraph”, “this is a
link”,etc.
What is the basic structure of an HTML document?
HTML documents use various tags and attributes to display elements such as headings, paragraphs,
hyperlinks, and images. They are composed of the following major parts:
1. The HTML version information
2. The <html> element
3. The <head> element
4. The <body> element
These parts exist in a hierarchy. The <html> tag encompasses both the <head> and <body> elements,
and each of these wraps other elements in them. A basic flowchart outlining this hierarchy is shown
below:
Syntax :
Let's look at these parts in greater detail. The image below shows us a basic template of an HTML
document.
An HTML template
The HTML version information
The DOCTYPE declaration is a single line that identifies the version of HTML used by the webpage.
<!DOCTYPE html>
The <html> element
The <html> element immediately follows the document type declaration and contains the remaining
elements. It consists of a starting and ending tag.
<html> </html>
The <head> element
The <head> element contains information about the document, such as its title and metadata. It may
also load external resources, such as links and scripts. Elements inside the <head> element are typically
not directly visible on the webpage.
<head>
<title> Page Title </title>
</head>
The <body> element
The <body> element describes the content and structure of the webpage. It may include things such as
text, images, and links.
Popular tags used inside the <body> include the following:
<div> and <span>: These tags help to structure the document.
<h1> to <h6>: These tags define the headings of each section in the document. The numbers
from one to six represent the size (and hence, significance) of each heading, with <h1> being the
largest and <h6> being the smallest.
<p>: The paragraph tag can be used to write a relatively long piece of text.
<img>: This tag displays an image on the HTML page.
<a>: The anchor tag is used to link to other pages and applications by creating hyperlinks.
<body> <h1> Content Heading </h1> <p> Content </p> </body>
Create Html Page
You can create your first HTML page by the following steps:
Step 1: Open the Text Editor
In this step, we have to open any text editor such as Notepad or Notepad++ for writing an HTML code.
The following image is the screenshot of the text editor (notepad++) for writing the HTML code.
Step 2: Type the HTML code.
In this step, we have to type the HTML code in the text editor. The HTML code is composed of various
tags and always begins with the opening tag of HTML and complete with the closing tag of HTML.
The following block describes the syntax for creating any HTML page:
1. HTML>
2. <HEAD>
3. <!- The Head tag is used to create a title of web page, CSS syntax for a web page, and hel ps in written
a JavaScript code. -->
4. </HEAD>
5. <BODY>
6. <!- The Body tag is used to display the content on a web page, which is specified betwee n the body
tag. -->
7. </BODY>
8. </HTML> <!-- It is the opening tag of any HTML -->
In the above syntax, some important tags or elements are used, which are given below:
<HTML>: It is the opening tag of any HTML code.
<HEAD>: The Head tag is used to create a title of the web page, CSS syntax for a web page, and helps in
written a JavaScript code The <head> must be closed before the opening of <body> tag.
<BODY>: The Body tag is used to display the content or text on a web page, which is specified between
the body tag. -->
</HTML>: It is the Closing tag of any HTML code.
Step 3: Save the HTML code.
After typing the complete HTML code, we have to save that file in a folder with .html extension. We can
easily save the html file by clicking on the File menu and then click on Save As option. After that, type
the file name with .html extension. The following screenshot describes how we save the above html
code in a text editor.
Step 4: Run the HTML file. At the last step, we have to execute or run an HTML file from the location
where we saved the file. The file will run on a default browser.
HTML Tags:
HTML tags are like keywords which defines that how web browser will format and display the content.
With the help of tags, a web browser can distinguish between an HTML content and a simple content.
Basic HTML Structure Tags
Tag Description Example
<html> Root of the HTML document <html> ... </html>
<head> Metadata container <head> ... </head>
<body> Main document content <body> ... </body>
Tag Description Example
<title>My
<title> Page title (in browser tab)
Page</title>
<!DOCTYPE> Declares document type <!DOCTYPE html>
Text Formatting Tags
Tag Description Example
<p>This is a
<p> Paragraph
paragraph.</p>
<br> Line break Hello<br>World
<hr> Horizontal line <hr>
<h1> to <h6> Headings <h1>Heading 1</h1>
<strong> Bold (semantic) <strong>Important</strong>
<b> Bold (visual only) <b>Bold Text</b>
<i> Italic (visual only) <i>Italic Text</i>
<em> Emphasis (semantic italic) <em>Emphasized</em>
Tag Description Example
<mark> Highlighted text <mark>Highlight</mark>
<small> Smaller text <small>Note</small>
<sub> Subscript H<sub>2</sub>O
<sup> Superscript E = mc<sup>2</sup>
<u> Underline <u>Underlined</u>
<del> Deleted text <del>Old</del>
<ins> Inserted text <ins>New</ins>
Links & Anchors
Tag Description Example
<a
<a> Hyperlink
href="https://example.com">Visit</a>
<link rel="stylesheet"
<link> External resources (e.g., CSS)
href="style.css">
Media Tags
Tag Description Example
<img> Image <img src="img.jpg" alt="Image">
<video controls><source
<video> Video
src="video.mp4"></video>
<audio controls><source
<audio> Audio
src="audio.mp3"></audio>
<source src="movie.mp4"
<source> Media source
type="video/mp4">
<track> Captions/subtitles <track src="subs.vtt" kind="subtitles">
<embed> External resource (e.g., PDF) <embed src="file.pdf">
Lists
Tag Description Example
<ul> Unordered list <ul><li>Item</li></ul>
<ol> Ordered list <ol><li>First</li></ol>
<li> List item <li>Element</li>
Tag Description Example
<dl> Description list <dl><dt>HTML</dt><dd>Markup</dd></dl>
<dt> Term in <dl> <dt>Term</dt>
<dd> Description in <dl> <dd>Definition</dd>
Table Tags
Tag Description Example
<table> Table container <table> ... </table>
<tr> Table row <tr> ... </tr>
<td> Table data cell <td>Data</td>
<th> Table header cell <th>Header</th>
<thead> Table header section <thead><tr><th>Col</th></tr></thead>
<tbody> Table body section <tbody><tr><td>Row</td></tr></tbody>
<tfoot> Table footer section <tfoot><tr><td>Foot</td></tr></tfoot>
<caption> Table caption/title <caption>Sales Data</caption>
Tag Description Example
<col> Column formatting <col span="2">
<colgroup> Group of columns <colgroup><col></colgroup>
Form & Input Tags
Tag Description Example
<form> Form container <form> ... </form>
<input> User input <input type="text">
<textarea> Multi-line input <textarea></textarea>
<label> Form label <label for="name">Name</label>
<select> Dropdown <select><option>One</option></select>
<option> Dropdown item <option value="1">One</option>
<button> Button <button>Click</button>
<fieldset> Group form fields <fieldset><legend>Info</legend></fieldset>
<legend> Caption for <fieldset> <legend>User Info</legend>
Tag Description Example
<datalist
<datalist> Predefined input list
id="browsers"><option>Chrome</option></datalist>
<output> Output result <output>Result</output>
Deprecated/Obsolete Tags (for reference only)
Tag Description Example
<center> Center align <center>Centered</center>
<font> Font formatting <font color="red">Text</font>
<marquee> Scrolling text <marquee>Scroll</marquee>
