The heaven for Technology Learner
Author - Baboolal Yadav
02 July. 2 min read
WHAT IS HTML
- HTML stands for Hyper Text Markup Languag.
- HTML describes the structure of web pages using markup.
- HTML is used to provide the content(words, images, audio, video, and so on) to the web
pages.
- HTML is a tag based language. They are defined within the angle brack.
- HTML file can be created using a text editor.
COMMENTS IN HTML
- The comment tag is used to insert comments in the source code. Comments are not
displayed in the browser.
- You can use comments to explain your code, which can help you when you edit the source
code at a later date. This is especially useful if you have a lot of code
HISTORY OF HTML
- HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially released. It was published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML.
- HTML is a very evolving markup language and has evolved with various versions updating. Long before its revised standards and specifications are carried in, each version has allowed its user to create web pages in a much easier and prettier way and make sites very efficient.
TAGS
- Tags define all elements of the document, i.e. they give meaning to the plain
text of HTML
- HTML tags are surrounded by the two characters < and > (They are called angle bracket).
- The tag name can either start from an alphabet or an underscore(_).
- The text between the start and end tags is the element content.
- Tags with an opening and closing can have any number of tags within itself.
- HTML tags are not case sensitive, p means the P.
- HTML tags normally comes in pairs(container tags), i.e. both opening and closing(it is
same, just the name of the tag with character '/ ' in the beginning) tag.
- Eg: and is a tag.
- Eg: br does not have a closing tag.
Description of tags used
- !DOCTYPE html tells the browser that the file being displayed is HTML5 page.
- html /html meant to contain all the html data and is the start of an HTML
document.
- head /head provides information about the document. It is not displayed in
the browser window.
- title /title provides a title for the document.
- body /body contains all the things visible on the web page.
DOCTYPE
- The DOCTYPE declaration describes what version of HTML the page is written in. It is the
very first thing in your HTML document that you see in every web page. It is written at the
top of every page before the html tag.
- The doctype declaration is not an HTML tag. It is the one recommended by HTML5.
- The syntax for doctype is: !DOCTYPE html
HTML ELEMENTS
- Elements are the things that actually make up the web page. Tags just define the beginning
and end of the elements. Everything that a web page includes is an HTML element.
Basic Syntax of HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a h1 tag</h1>
<P>This is a paragraph tag</p>
</body>
</html>
Paragraphs
- Paragraphs are blocks of text separated from each other by some space. They are
defined using the <p> and </p> tags. When p element ends, the next element
appears in next line
<P>This is a paragraph tag</p>
Headings
- These are tags in HTML to mark some content as headings. In fact, there are six
different levels of headings h1, h2, h3, h4, h5 and h6. Among them h1 defines the
largest heading and h6 defines the smallest level
<h1>This is a h1 heading tag</h1>
<h2>This is a h2 heading tag</h2>
<h3>This is a h3 heading tag</h3>
<h4>This is a h4 heading tag</h4>
<h5>This is a h5 heading tag</h5>
<h6>This is a h6 heading tag</h6>
BR Tag
- br tag is used to introduce a single line break between the contents. This means
that when this tag is used in between a single line, the content after this tag will
move to the next line. Do not use it to provide space between block of
elements( eg., paragraph and heading).
<br>This is a br tag</br>
LIST
- It is used to group a set of related items in no particular order. Unordered lists are
used when the numbering of items is not required. By default the items are
followed by bullets.
Unordered Lists
- It is used to group a set of related items in no particular order. Unordered lists are
used when the numbering of items is not required. By default the items are
followed by bullets
- HTML provides an interesting feature to change the style of the list item marker. There are 4 types of style in unordered lists:
- type="disc" - sets the list item marker to a bullet (default).
- ype="circle" - sets the list item marker to a circle.
- type="square" - sets the list item marker to a squar.
- type="none" - the lists items will not be marked.
<ul type="disc">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List
- It is used to group a set of related items in a specific order. Ordered lists are used
when the numbering of items is required. By default the items are followed by
numerical numbering.
- Similarly, like the unordered lists, there are also different types of ways to number
the ordered lists using the 'type' attribute.
- type="1" - The list items will be numbered with numbers(default).
- type="A" - The list items will be numbered with uppercase letters.
- type="a" - The list items will be numbered with lowercas letters.
- type="I" - The list items will be numbered with uppercase roman numbers.
- type="i" - The list items will be numbered with lowercase roman numbers.
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Description Lists
- A definition list is not a list of items. This is a list of terms and explanation of the
terms. A definition list starts with the
tag. Each definition - list term starts with the
- tag. Each definition - list definition starts with the
- tag.
-
- Description lists are very specific in use as compared to ordered and unordered lists
and hence are very less used. But whenever, a structure like a list of terms and their
description is required, the description lists are the the perfect
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
<dt>Term 3</dt>
<dd>Description 3</dd>
</dl>
NESTING ELEMENT
- HTML elements can be nested i.e. elements can contain elements. Actually, all HTML
documents consist of nested HTML elements.
<div>
<h1>Main Heading</h1>
<p>Paragraph 1</p>
<div>
<h2>Sub Heading</h2>
<p>Paragraph 2</p>
</div>
<p>Paragraph 3</p>
</div>
IMAGES IN HTML
- With HTML you can also display images in a document. In HTML, images are defined with the
![]()
tag.
- To display an image on a page, you need to use the src attribute. Src stands for "source". The
value of the src attribute is the URL of image you want to display on your page.
- The syntax of defining an image: img src="path or url">
- Some points you need to know:
![]()
tag is a self closing tag which means that it doesn't contain the closing tag.- The src tag can contain both relative and absolute paths, as well as internet image links.
<img src="image.jpg" alt="Image Description" width="300" height="200">
The ALT Attribute
- The alt attribute or alternate text tells the reader what he or she is missing on a
page if the browser can't load images. The browser will then display the alternate
text instead of the image.
- Now, we can use the alt attribute as: img src="images/logo.png" alt="tutorialscse image">
Height and Width
- The height and width of an image can be set directly by using the height="value" and width="value" attributes. By default, the value provided is in pixels.
- img src="images/logo.png" alt="tutorialscse image" height="500"
width="500">
- This will fix the height and width of the image to 500px(pixel). There is an alternate for height and width attribute in CSS. We can come to this
later.
ATTRIBUTES
- Attributes can provide additional information about the HTML elements on your page and
control their behavior.
- Eg: tag_name attribute_name="value_value">Content Enclosed /tag_name>.
- Some point to remember:
- Attributes always come in name/value pairs like this: attribute_name="value".
- Attributes are always added to the start tag of an HTML element.
- Attribute values should always be enclosed in quotes. Double style quotes (“ ”) are the
most common, but single style quotes (‘ ’) are also allowed.
- In some rare situations, like when the attribute value itself contains quotes, it is
necessary to use single quotes: name='John "ShotGun" Nelson' and vice-versa.
ANCHOR TAG
- The tag defines a hyperlink, which is used to link from one page to another.
- You have seen that clicking on a link opens a new page may be on the same page or another. These web pages are connected using links. They give us the ability to go to a different web
page without each time entering its URL. This kind of links are external links i.e. they help in
connecting to external web pages.
- Links can also be internal which means that they will be linking the content within the same
page. Eg: link to the top of the page or any link to any specific content on the page.
- By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue.
- A visited link is underlined and purple.
- An active link is underlined and red.
<a href="https://example.com" target="_blank" class="link" id="link-1">Click here</a>
href Attribute
Relative and Absolute Linking
- Relative linking is used to specify local links, i.e. link to files inside the root folder. Absolute linking is used to specify outside links, i.e. URL of the web page.
- Relative links works relative to the page. So, when a user clicks a relative link, the
browser looks for the location of the file relative to the current page. Four situation arises in this case:-
- File is present in the same folder - In this case, the name of the file is provided. Eg: a href="relativeFile.html">Click Me /a>, will look for the file inside
the same
- File is present in the subfolder - In this case, the name of the file provided is
preceded with the folder names according to hierarchy. Eg: a
href="subfolder/down/relativeFile.html">Click Me /a>, will move to the
'subfolder' folder, then to 'down' folder and look
- File is present somewhere in the parent folder - In this case, to move one
folder above use '../'. Eg: a href="../relativeFile.html">Click Me /a>, will
move to the parent folder and look
- File is present in another subfolder of parent folder - This case covers above
two cases. Eg: a href="../subfolder/relativeFile.html">Click Me /a>, will
move to the parent folder, then to folder named 'subfolder' and look for the
file inside it.
target Attribut
- With the target attribute, you can define where the linked document will be
opened. The target attribute has the following values.
- _self: load the URL into the current tab itself. This is the default.
- _blank: load the URL into a new tab or browser window.
- _parent: load the URL into the parent browsing context. If there is no parent, this behaves same as _self.
- _top: load the URL into the top-level browsing context. If there is no parent, this behaves same as _self.
HTML Audio
- The HTML <audio> element is used to play an audio file on a web page.
<audio src="audio.mp3" controls>
Your browser does not support the audio element.
</audio>
HTML Video
- The HTML <video> element is used to show a video on a web page.
<video src="video.mp4" controls width="640" height="360">
Your browser does not support the video element.
</video>
