HTML stands for HyperText Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
Note: Some HTML elements have no content (like the <br> element). These elements are called elements. Empty elements do not have an end tag!
HTML attributes provide additional information about HTML elements.
1. All HTML elements can have attributes
2. Attributes are always specified in the start tag
3. Attributes usually come in name/value pairs like: name="value"
<a href="https://deepakrajtech.com/">Visit deepakrajtech</a>
<img src="img_girl.jpg" width="500" height="600">
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. A browser does not display the HTML tags, but uses them to determine how to display the document:
Note: content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.
1991: Tim Berners-Lee invented HTML
1995: HTML Working Group defined HTML 2.0
1997: W3C Recommendation: HTML 3.2
1999: W3C Recommendation: HTML 4.01
2014: W3C Recommendation: HTML5
HTML metadata is data about the HTML document. Metadata is not displayed.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
Metadata typically defines the document title, character set, styles, scripts, and other meta information.
The HTML <head> element is a container for the following elements:
1. <title>
2. <base>
3. <link>
4. <style>
5. <script>
6. <noscript>
7. <meta>
The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
You can use title attribute to create a tooltip.
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
<base> element specifies the base URL and/or target for all relative URLs in a page.
The <base> tag must have either an `href` or a `target` attribute present, or both.
There can only be one single <base> element in a document!
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
<base href="https://www.w3schools.com/" target="_blank" />
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman" />
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</html>
The <link> element defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets:
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The <style> element is used to define internal CSS style information for a single HTML page:
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
<style>
body {
font-family: cursive, sans-serif;
}
h1 {
background-color: teal;
color: whitesmoke;
text-align: center;
}
p {
color: teal;
font-size: 22px;
}
</style>
</head>
<body>
<h1>Welcome to the Stylish Webpage</h1>
<p>The style element is used to define style information for a single HTML page: </p>
</body>
</html>
The <script> element is used to define client-side JavaScripts.
he following JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<h1 id="demo">My Web Page</h1>
<button type="button" onclick="myFunction()">Click Me</button>
</body>
</html>
The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.
The <noscript> element can be used in both <head> and <body>.
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
</head>
<body>
<script>
document.write("Hello World from JavaScript!!");
</script>
<noscript>Your browser does not support JavaScript!</noscript>
</body>
</html>
The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
<!-- Define the character set used: -->
<meta charset="UTF-8" />
<!-- Define a description of your web page: -->
<meta name="description" content="Free Web tutorials" />
<!-- Define keywords for search engines: -->
<meta name="keywords" content="HTML,CSS,JavaScript" />
<!-- Define the author of a page: -->
<meta name="author" content="DEEPAK RAJ" />
<!-- Setting the viewport to make your website look good on all devices: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Refresh document every 5 seconds: -->
<meta http-equiv="refresh" content="5">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <body> tag in HTML can have several attributes that affect the presentation and behavior of the page.
background : Specifies the URL of an image to be used as the background of the page.
<body background="background.jpg">bgcolor : Sets the background color of the page.
<body bgcolor="yellow">text : Sets the color of the text in the body.
<body text="red">topmargin : Specifies the margin at the top of the body element.
<body topmargin="20">leftmargin : Specifies the margin at the left of the body element.
<body leftmargin="30">link : Specifies the color of unvisited links.
<body link="green">vlink : Specifies the color of visited links.
<body vlink="pink">alink : Specifies the color of active links.
<body alink="yellow">Formatting elements were designed to display special types of text:
HTML <b> element defines Bold text without any extra importance :
<p>This is <b> Bold </b> text.</p>HTML <strong> element defines Important text with strong importance :
<p>This is <strong> Important </strong> text.</p>HTML <i> element defines Italic text a part of text in an alternate voice or mood :
<p>This is <i> Italic </i> text.</p>HTML <em> element defines Emphasized text :
<p>This is <em> Emphasized </em> text.</p>HTML <small> element defines Smaller text :
<p>This is <small> Smaller </small> text.</p>HTML <big> element defines Bigger text:
<p>This is <big> Bigger </big> text.</p>HTML <mark> element defines Marked text that should be marked or highlighted:
<p>This is <mark> Marked </mark> text.</p>HTML <del> element defines Deleted text that has been deleted from a document :
<p>This is <del> Deleted </del> text.</p>HTML <strike> element defines Strike text that has been strike a thin line through the text :
<p>This is <strike> Strike </strike> text.</p>HTML <u> element defines Underline text that has been underline into a document :
<p>This is <u> Underline </u> text.</p>HTML <ins> element defines Inserted text that has been inserted into a document :
<p>This is <ins> Inserted </ins> text.</p>HTML <sub> element defines Subscript text Subscript text appears half a character below the normal line :
<p>This is <sub> Subscript </sub> text.</p>HTML <sup> element defines Superscript text Superscript text appears half a character above the normal line :
<p>This is <sup> Superscript </sup> text.</p>HTML <tt> element defines Teletype Browsers default monotype font :
<p>This is <tt> Teletype </tt> text.</p>HTML <q> element defines a short Quotation
for a text :
<p> <q> Everything in life is luck </q> </p>The <Font> tag was used in HTML 4 to specify the font face, font size, and color of text.
face : Defines the typeface like Arial, Times New Roman, cursive etc.
<p><font face="cursive">This is cursive text.</font></p>size : Sets the size of the font can be in pixels, em, rem, etc.
<p><font size="7">This is Bigger text.</font></p>color : Defines the text color like red yellow etc.
<p><font color="red">This is Red color text.</font></p>Face - Size - Color
<p><font face="Arial" size="4" color="blue">This is some text with a custom font, size, and color.</font></p>HTML headings are titles or subtitles that you want to display on a webpage.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The HTML <p> element defines a paragraph.
<p>This is paragraph.</p>
<p>This is another paragraph.</p>
The <div> tag defines a division or a section in an HTML document.
The <div> tag is easily styled by using the class or id attribute or manipulated with JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
The <pre> tag defines preformatted text.
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
</head>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>
The <br> tag inserts a single line break.
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
<p>Be not afraid of greatness.<br>
Some are born great,<br>
some achieve greatness,<br>
and others have greatness thrust upon them.</p>
<p><em>-William Shakespeare</em></p>
The <hr> element is most often displayed as a horizontal rule that is used to separate content or define a change in an HTML page.
<!DOCTYPE html>
<html>
<head>
<title>HTML Basics ! DEEPAKRAJTech</title>
</head>
<body>
<h1>HTML</h1>
<p>HTML to define the content of web pages</p>
<hr>
<h1>CSS</h1>
<p>CSS to specify the layout of web pages</p>
<hr>
<h1>JavaScript</h1>
<p>JavaScript to program the behavior of web pages</p>
<hr>
</body>
</html>
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>Use the href attribute to define the link address
The link text is the part that will be visible to the reader.
The target attribute specifies where to open the linked document. The target attribute can have one of the following values:
1. _self - Default. Opens the document in the same window/tab as it was clicked
2. _blank - Opens the document in a new window or tab
3. _parent - Opens the document in the parent frame
4. _top - Opens the document in the full body of the window
<a href="https://www.deepakrajtech.com/" target="_blank">Visit deepakrajtech!</a><a href="https://www.deepakrajtech.com/" target="_self">Visit deepakrajtech!</a>HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.
1. Use the id attribute (id="value") to define bookmarks in a page
<h2 id="home">Home Page</h2>2. Use the href attribute (href="#value") to link to the bookmark
<a href="#home">Home Page</a>An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
You can change the link state colors, by using link , alink , vlink attributes :
<!DOCTYPE html>
<html>
<head>
<title>Link Colors Example</title>
</head>
<body link="blue" vlink="green" alink="red">
<h2>HTML Links with Different Colors</h2>
<!-- Unvisited link (will be blue) -->
<a href="https://www.deepakrajtech.com">Visit deepakrajtech</a><br>
<!-- Visited link (will be green after visiting) -->
<a href="https://www.instagram.com/deepakrajtech/">Visit on instagram</a><br>
<!-- Active link (will turn red while clicking) -->
<a href="https://www.google.com">Visit Google</a>
</body>
</html>
The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
<a href="/images/myimage.jpg" download><a href="/images/myimage.jpg" download="rjlogo">The HTML <img> tag is used to embed an image in a web page. The <img> tag has two required attributes:
1. src - Specifies the path to the image
<img src="image.jpg">2. alt - Specifies an alternate text for the image
<img src="image.jpg" alt="beautiful-wallpaper">3. width - Specifies the width of the image
<img src="image.jpg" width="300">4. height - Specifies the height of the image
<img src="image.jpg" height="200">5. align - Specify the alignment of the image
<img src="image.jpg" align="right">4. border - Specify the border of the image
<img src="image.jpg" border="3">4. hspace - Specify the horizontal space on either side of an image
<img src="image.jpg" hspace="100">4. vspace - Specify the vertical space on either side of an image
<img src="image.jpg" vspace="200">To use an image as a link, put the <img> tag inside the <a> tag:
<a href="https://www.google.com"> <img src="image.jpg" alt="Google Image"> </a>You can add comments to your HTML source by using the following syntax:
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
<!-- Write your comments here -->
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Paragraph
Paragraph
Coming soon...