.jpg)
1.1 INTRODUCTION:-
1.1.1 HTML
HTML stands for Hyper Text Markup Language, which is used to create web pages and apps. HTML is made up of a number of different elements. HTML components specify how the content should be displayed in the browser. Tags are used to represent HTML elements. HTML is a markup language. Notepad was used to write the text. A web browser, such as Google Chrome, interprets HTML code. HTML is case insensitive (but still lower case is generally considered easy to read) language. We can design static web pages only with HTML.1.1.2 HTML5
HTML5, which replaces HTML 4.01, XHTML 1.0, and XHTML 1.1, is the next significant revision of the HTML standard. HTML5 is a web standard for organising and presenting content on the web. HTML5 is essentially a term for a professional touch web technologies. The HTML Living Standard is included, as well as JavaScript APIs for storage, multimedia, and device access. HTML5 supports both audio and video. HTML does not allow JavaScript to run within the web browser, whereas HTML5 does. HTML5 allows inline mathML and SVG to be used in a text. HTML5 adds new form controls including date and time, email, number, category, title, Url, search, and more. HTML5 includes a plenty of new elements. Time, footer, description, audio, article, canvas, shape and so on are some of the most essential.
1.2 FUNDAMENTAL ELEMENTS OF HTML
Tags are the parts of an HTML element that begin and end. They begin with the
< symbol and terminate with the > symbol. Tags are the contents of the
written inside < and >.
Between the tags, elements surround the contents. They have some type of
structure or expression to them. A start tag, content, and end tag are the
most common elements.
There are two types of HTML tags:
- Container Elements or Paired Tags
- Empty Elements or Singular Tags
Elements form an HTML file. These elements are capable of developing web pages
and defining the content on those pages. A start tag
, a closing tag , and content added between them make an
element in HTML. A collection of start tag, attributes, end tag, and content
between them forms an element in HTML. All HTML elements can have attributes.
In HTML, an attribute offers additional information about an element and is
added within the start tag. There are two fields in an HTML attribute: name
and value.
Syntax:
<tagName attribute_name="value">Content</tagName>
Example:
<h1 class="country"> India is my country</h1>
1.2.1 HTML Document Structure
The structure of a typical HTML document is as follows:
<!DOCTYPE html> <html> <head> Tags associated to document head </head> <body> Tags associated to document body </body> </html>
Where
- The declaration<!DOCTYPE html> indicates that this is an HTML5 document.
- The root element of an HTML page is the <html> element.
- The html page's meta data is stored in the <head> element.
- The <title> element gives the HTML page a title (which appears in the browser's title bar or in the tab).
- The <body> element specifies the document's body and serves as a container for all visible information, including headers, paragraphs, pictures, hyperlinks, tables, lists, and so on.
1.2.2 Creating an HTML Document and Saving It:
Step 1 : Open a text editor and write HTML code (here we are using
Notepad)
Step 2 : Select File from the File Menu.
Step 3 : Select Save As.
Step 4 : Type a Name with extension .HTM or .HTML.
Step 5 : Select the location where you want to save the file.
Step 6 : Click on Save.
1.2.3 Viewing an HTML Document:
Step 1 : Navigate to the HTML file's location.
Step 2 : Right-click on the HTML file and select the option to open
with.
Step 3 : Choose a browser (Google Chrome).
Step 4 : The webpage will be seen.
1.2.4 Viewing an HTML Document in Another Way:
If you have Google Chrome selected as your default browser, you can just
double-click the HTML file and it will open in Chrome.
1.3 FORMATTING TEXT IN HTML
Formatting elements were designed to display special types of text:
1) <b> tag : It’s known as Bold text tag and used to displayed content in bold. <b>……..</b> is the syntax for the <b> tag. 2) <strong> tag : It’s known as Important text tag and used to displayed text as strong text. < strong >……..</ strong > is the syntax for the < strong > tag. 3) <i> tag : It’s known as Italic text tag and used to displayed content in italic. <i>……..</i> is the syntax for the <i> tag. 4) <u> tag : It’s known as Underline text tag and used to displayed content with underline. <u>……..</u> is the syntax for the <u> tag. 5) <em> tag : It’s known as Emphasized text tag and used to displayed text as emphasized text. <em>……..</em> is the syntax for the <em> tag. 6) <small> tag : It’s known as Smaller text tag and used for identifying secondary importance such as copyright, side comments, and legal notices. <small>……..</ small > is the syntax for the < small > tag. 7) <del> tag : It’s known as Deleted text tag and used to indicate the area of the document where text has been deleted/removed. <del>……..</del> is the syntax for the <del> tag. 8) <ins> tag : It’s known as Inserted text tag and used to represent the newly inserted text It normally appears with a text underline, however this may be altered using a CSS attribute. <ins>……..</ins> is the syntax for the <ins> tag.
Example of formatting text tags-
Html Code:
<html> <head> <title> Example of formatting text tags </title> </head> <body> <b> Use of bold tag. </b> <br> <strong>Use of Strong tag.</strong> <br> <i>use of italic tag.</i> <br> <u> Use of underline tag.</u> <br> <em>Use of emphasis tag.</em> <br> <small>Use of Small tag.</small> <br> <del>Use of del tag.</del> <br> <ins>Use of insert tag.</ins> </body> </html>
Output:-
Sub tag and Sup tag:
9) <sub> tag : It’s known as Subscript text tag and used to specify text that is subscripted. The text inside a <sub> has a lower baseline and a smaller font than the surrounding content. The <sub> tag can be used to display mathematical or chemical formulas. < sub >……..</ sub > is the syntax for the < sub > tag. 10) <sup> tag : It’s known as Superscript text tag and used to define content that is written in superscript. The content included within the <sup> element has a higher baseline and a smaller font size than the surrounding text. Mathematical formulae and footnotes can be defined with the <sup> tag. < sup >……..</ sup > is the syntax for the < sup > tag.
Example of Sub and Sup Tag:
Html code:
<html> <head> <title> Example of formatting text tags </title> </head> <body> Use of Superscript <br> 2 <sup> 3 </sup> <br> <br> Use of Subscript <br> H <sub> 2 </sub> O </body> </html>
Output:-
Br and Hr Tag:
11) <br> tag : It’s known as Line Break tagand used to break a line and display the text from the next line. The HTML br tag can be used in two ways <br> or <br/>. The closed br tag <br/> is suggested because it is supported by both HTML and XHTML. <br/>is the syntax for the <br>tag. 12) <hr> tag : It’s known as Horizontal Ruleand used to produce the horizontal line. It creates a horizontal divide in the content. In HTML, it's also known as a Horizontal Rule. <hr>is the syntax for the <hr>tag.
Example of Br and Hr Tag:
Html code:
<html> <head> <title> Example of formatting text tags </title> </head> <body> Normal text: This is my first webpage <br> Use of hr tag: <br> <hr> This is my first webpage <hr> <br> use of br tag <br> This is <br> my first webpage </body> </html>
Output:
Comment tag:
13) COMMENT Tag: HTML comments are not visible in the browser, however they can assist in the documentation of your HTML source code. You can use comments to describe your code, which will help enormously when you go back to update the source code. If you have a lot of code, this is very helpful. Comments are given between <!-- type text-- >
Example of comments in html:
Html Code:
<html> <head> <title> Example of formatting text tags </title> </head> <body> <!-- This is an Comment--> <b>This is my first webpage</b> </body> </html>
Output:
Conclusion:
In this blog we have seen the introduction of HTML and HTML 5, then we seen some formatting tags.
.jpg)
