HTML

1.INTRODUCTION

DEFINITION:

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

What HTML means ?

Hypertext -> It refers to links that connect web pages to one another, either within a single website or between websites.
Markup -> HTML uses markup to annotate text, images, and other content for display in a Web browser. HTML markup also includes special elements which is set off from other text in a document by "tags" (<>). The name of an element inside a tag is case insensitive but advised to be written in lowercase.

2.HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>  
  <h1>Hello Wolrd</h1
</body>
</html>

<!DOCTYPE html> declaration defines that this document is an HTML5 document.
<html> element is the root element of an HTML page.
<head> element contains meta information about the HTML page.
<title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).
<body> element defines the document's body and is a container for all the visible contents.

NOTE : The extension used to save HTML file is .HTML/.HTM

3.HTML ELEMENTS

I.BASIC ELEMENTS

<h1>..<h2> -> heading tags which are used for headings of deifferent size upto h6.
...-> paragraph tags which are treated as new paragaphs.
  -> break to enter into a new line.
<hr> -> breaks the line by inserting a horizontal line.
<pre>..</pre> element defines preformatted text(text as mentioned in document).

II.FORMATTING ELEMENTS

... -> bold text
... -> bold text ( shows strong importance/urgency)
... -> italic itext
... -> italics text (used when more emphasis is needed).
... ->displays the text enclosed smaller than the usual size.
... -> highlighted text(color can be changed).
<del>...</del> -> deletes an text from an element by strikethrough.
<ins>...</ins> -> inserts a text in a element by underlineing (used when required to indicate something is added)
... -> subscript (H₂O)
... -> superscript (x²)

III.QUOTATION AND CITATION ELEMENTS

<blockquote cite='google.com'>...</blockquote> -> element defines a section that is quoted from another source by indent. Cite attribute defines the URL for that quote.
<q>...</q> -> displays quotation.
<abbr title="World Health Organization">WHO</abbr> ->abbrievation element (title attribute is given when hovered gives the expantion).
<defn>...</defn> -> when a defintion is given the word defined is enclosed in this tag.(style - italics)
<address>...</address> -> this tag encloses any contact info in a document.(line break before & after.)
<cite>...</cite> ->this tag defines the title of a creative work and not the person name.(style - italics)
<bdo dir='rtl'>...</bdo> -> overrides the current directionality of text(dir='rtl/ltr')

IV.HTML LINKS

Syntax -> <a >...</a>

The attributes of the anchor tag:

<a href="https://google.com/">Google</a>
href gives the link to the webpage. There are 2 kinds of URL (i) Absolute a link to a web address, (ii) Relative a link to the page within the webpage
<a href="default.asp"><img src="smiley.gif"></a>
img as a link.
<a href="mailto:someone@example.com">Send email</a>
mailto opens the users mail account and tries to mail to the link provided.
<a href="https://google.com/" target="_blank">Google</a>
target targets where to open the link as. It hs multiple types :
- _self - Default. Opens the document in the same window/tab as it was clicked
- _blank - Opens the document in a new window or tab
- _parent - Opens the document in the parent frame (overrides the parent view)
- _top - Opens the document in the full body of the window (overrides the full view

V.LISTS

In HTML we have three kinds of lists. Unordered lists Ordered lists Definition lists

1.Unordered lists : The lists doesn't have sequence of numbers for the values. It is shown through bullets.

<h4>Fruits</h4>
<ul>
 <li>Apple</li>
 <li>Mango</li>
<li>Banana</li>
</ul>

Here the <ul> tag is parent tag under which the <li> tag consisting of the unordered lists are given. Attributes : list-style="circle/disc/square" -> to change the bullets of the lists.

2.Ordered lists :
The lists has a sequence of numbers for the values. It is shown through numbers/romans/aplhabets.

<h4>Fruits</h4>
<ol>
 <li>Apple</li>
 <li>Mango</li>
<li>Banana</li>
</ol>

Here the <ol> tag is parent tag under which the <li> tag consisting of the ordered lists are given. Attributes :

type = "I/i/1/A/a" -> mentioned the type of charaters to be uses. start = "2" -> starts the lists from the given number.

3.Definition lists :
This lists has a definition under which the list is formed.

<h3>Description List</h3>
    <dl>
        <dt>Coffee</dt>
        <dd> 500 gms</dd>
        <dt>Milk</dt>
        <dd> 1 ltr Tetra Pack</dd>
    </dl>

VI.INPUT ELEMENTS

The input elements are used when the user has to submit some kind of data/form, they mention these information in the input fields.

4.CONCLUSION

We have discussed about HTML, why it is needed and how to render a HTML. The HTML elements covered in this article gives us a clear picture of how a page is rendered.

The elements topics has been coded in my Github. Pls do give it a read. TIA :)

So thats all for today, thanks for reading my article hope you liked it. Will be covering more concepts in the forthcoming blogs. Keep learning. Stay Tuned !

Kevin Sylvester's blog