1 0
Read Time:18 Minute, 46 Second

What is HTML ?

  • HTML is the standard markup language for creating Web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements are represented by tags
  • Browsers do not display the HTML tags, but use them to render the      content of the page

Web Browser

  • The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them.
  • The browser does not display the HTML tags, but uses them to determine how to display the document:

Basic structure of html

   <html> element is the root element of an HTML page    <head> element contains meta information about the document . Meta information means  the title of the document (which is mandatory), as well as css scripts etc    <title> element specifies a title for the document   <body> element contains the visible/output page content

 <html>

<head>

<title> My first website </title>

</head>

<body>

html tutorial by gaurav garg

</body>

</html>

Create & Save HTML Document

Accessing a webpage

Formatting Tags – Bold / Italic / Underline

1. BOLD <b> : <b> element defines bold text

2. Strong <strong> : <strong> element defines strong text, with “strong” importance.

3. Italic <i> : <i> element defines italic text

4. Emphasized <em> :  <em> element defines emphasized text, with added importance

Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is “important”.

5. Underline <u> : HTML <u> element defines Underlined text.

6. Subscript <sub> : HTML <sub> element defines subscripted text. (log10 – 10 is subscripted )

7. Superscript <sup> : HTML <sup> element defines superscripted text. ( x2 – 2 is superscripted )

8. address <address> : HTML <address> element defines contact information or address

9. strikethrough <strike> : HTML <strike > element defines strikethrough text.

<html><head><title>Formatting Tags</title></head>                                

<body>

<b>this text is bold</b> <br>

<strong>This text is strong</strong>  <br>

<i> this text is italic </i> <br>

<em>This text is emphasized.</em> <br>

<u> this text is underlined </u> <br>

 Log <sub> 10 </sub> <br>

X <sup> 2 </sup>  <br>

<address> flat no 34 Nalanda Society , Delhi </ address> <br>

<strike>this text is strikethrough</strike>

 </body>

</html>

HTML Line Breaks

Use <br> if you want a line break (a new line) without starting a new paragraph.

<P> tag : Paragraph

HTML <p> element defines a new paragraph

<html><HEAD><title>paragraph tag</title></head>

<body>

<p align=”CENTER”>A paragraph</p>

html tutorial by Girraj sir

<p>the toppers……</p>

</body>

</html>

Attributes : align – to align text in a paragraph . we can give values left or center or right

HTML COMMENTS

Comment tags are used to insert comments in the HTML source code.

Note: Comments are not displayed by the browser, but they help in giving any future notes or extra information regarding  your HTML code.

See also  HTML Explanation class 10 with pdf notes

<html>

<body>

<!– This is a comment –>

<p>This is a paragraph.</p>

<!– Comments are not displayed in the browser –>

</body>

</html>

Body tag & attributes

<html><head><title>body tag program</title></head>                                                                  

<body text=”green” bgcolor=”red”>

Hello topper

</body>

</html>

Attributes : text – any text written in body will appear as green

                        Bgcolor – to set the background color of webpage

<html><head><title>body tag program</title></head>                                                                  

<body background=”architecture.jpg”>

Hello topper

</body>

</html>

Attributes :  background – to set a image as background of webpage.

                        ( image should be in the same folder as html document )

HTML <pre> Tag – Preformatted Text

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

HTML <div> Tag

The <div> tag defines a division or a section in an HTML document.

The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

<html>

<body bgcolor=blue>

<div style=”background-color:lightblue”>

  <p>This is some text in a div element.</p>

</div>

<p>This is some text in a p element.</p>

</body>

</html>

Image tag <img>

To insert a image in page.

<html><HEAD><title> Image tag </title></head>

<body>

<img src=”architecture.jpg” alt=”architecture” width=”100″ height=”100″>

</body>

</html>

Attribute : src : The src attribute specifies the URL (web address) of the image

alt : this attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Width & height defines width and height of image.

Anchor Tag <a>

Defines a hyperlink, which is used to link from one page to another.

Attributes – Href , Alink , Vlink , Link

Target –       _blank   /  _self 

<html><HEAD><title>anchor tag</title></head>

<body>

An image as a link : <br>

<a href=”https://www.youtube.com”>

<img src=”architecture.jpg” width=”100″ height=”100″>

</a>

</body>

</html>

Html lists

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default

<html><HEAD><title>unordered list</title></head>

<body>

<h4>beverages</h4>

<ul type = square>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

</body>

</html>

Attribute : type : item markings we want.( disc , circle , square )

Ordered List:

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<html>

<body>

<h2>An ordered HTML list</h2>

<ol type = A start = 3>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

</body>

</html>

Attributes : type : list numbering types (a , A , 1 , i , I )

Start : it defines position number from which you want to start the list numbering.

Description Lists

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

<html>

<body>

<h2>A Description List</h2>

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

See also  Submit Telegram Groups and Channels

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

</body>

</html>

Table Tag – we can create table using <table> tag.

<html><head></head><body>

<table border = 2 >

  <tr>

    <th>Month</th>    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>    <td>$80</td>

  </tr>

</table></body></html>

Attributes : cell padding – space between cell content and cell wall

                     Cell spacing – space between cell and table border

                     Border

Rowspan , Colspan

Rowspan – It is used to merge given number of cells in a column.

Colspan – It is used to merge given number of cells in a row.

Forms

<form> tag is used to create a form in html.

<input>  tag is used within a form to declare an input element − a control that allows the user to input data.

Attributes  – type, name, value

<html><head><title></title></head><body>

 <form>

 Email    : <input type=”text” name=”email”><br>

 Password : <input type=”password” name=”password”><br>

 <input type=”submit” value=”Submit”>

</form>

</body></html>

<form>

  Email    : <input type=”text” name=”email”><br>

  Password : <input type=”password” name=”password”><br>

  Gender   : <input type=”radio” name=”gender” value=”male”> Male

                  <input type=”radio” name=”gender” value=”female”> Female <input type=”submit” value=”Submit”>

</form>

<form>

  Email    : <input type=”text” name=”email”>

  Password : <input type=”password” name=”password”>

  Gender   : <input type=”radio” name=”gender” value=”male”> Male

                <input type=”radio” name=”gender” value=”female”> Female

  Applied  : <input type=”checkbox” name=”apply”> B.Tech

                 <input type=”checkbox” name=”vehicle”> B.Sc

                 <input type=”submit” value=”Submit”>

</form>

<form>

Religion :  <select>

                <option value=”hindu”>hindu</option>

                 <option value=”muslim”>muslim</option>

                <option value=”christian”>christian</option>

                <option value=”sikh”>sikh</option>

                <option value=”other”>other</option>

               </select>

               <input type=”submit” value=”Submit”>

</form>

Text Area               

<html><head><title></title></head><body>

 <form>

 Email    : <input type=”text” name=”email”><br>

 Name : <input type=”text” name=”Name”><br>

 Query : <textarea rows=”4″ cols=”15″>  </textarea> <br>

 <input type=”submit” value=”Submit”>

</form>

</body></html>

Reset Button

Html form validations :

The pattern Attribute

The input pattern attribute specifies a regular expression that the input field’s value is checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

<html>

<body>

<form action=”/action_page.php”>

Country codelabel>

  <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}”  title=”Three letter country code”><br><br>

  <input type=”submit” value=”Submit”>

</form></body></html>

The required Attribute

The input required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

<html>

<body>

<form action=”/action_page.php”>

  Username:  <input type=”text” id=”username” name=”username” required>

  <input type=”submit” value=”Submit”>

</form>

</body>

</html>

The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

<html>

<body>

<form action=”/action_page.php”>

  <label for=”fname”>First name:</label><br>

  <input type=”text” id=”fname” name=”fname” autofocus><br>

  <label for=”lname”>Last name:</label><br>

  <input type=”text” id=”lname” name=”lname”><br><br>

  <input type=”submit” value=”Submit”>

</form>

</body>

</html>

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

<html>

See also  Academic Electives Class 11th and 12th CBSE Curriculum 2022-23

<body>

<form action=”/action_page.php”>

  <h2>Date Field</h2>

  <input type=”date” id=”birthday” name=”birthday”>

  <input type=”submit” value=”Submit”>

</form>

</body>

</html>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

<html>

<body>

<form action=”/action_page.php”>

  <label for=”email”>Enter your email:</label>

  <input type=”email” id=”email” name=”email”>

  <input type=”submit” value=”Submit”>

</form>

</body>

</html>

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

<html>

<body>

<form action=”/action_page.php” method=”get”>

  <label for=”vol”>Volume (between 0 and 50):</label>

  <input type=”range” id=”vol” name=”vol” min=”0″ max=”50″>

  <input type=”submit” value=”Submit”>

</form>

</body>

</html>

Insert Audio & Video in HTML

<html>

<head>

<title> Audio/video Tags </title>

</head>

<body>

<center>

<audio controls>

  <source src=”pathshala.mp3″ type=”audio/mp3″>

</audio>

<br>

<video width=”320″ height=”240″ controls>

  <source src=”python.mp4″ type=”video/mp4″>

</video>

</center>

</body>

</html>

FRAME

<html>

<frameset cols=”25%,*,25%”>

  <frame src=”frame_a.htm”>

  <frame src=”frame_b.htm”>

  <frame src=”frame_c.htm”>

</frameset>

</html>

Nested Frames :

<frameset rows=”50%,50%”>

        <frame src=”FRAME1.html”>

        <frameset cols=”25%,75%”>

                     <frame src=”FRAME2.html”>

                    <frame src=”FRAME3.html”>

       </frameset>

</frameset>

Inline frame :

An inline frame is marked up as follows:

<html>

<body>

<h1>The iframe element</h1>

<iframe src=”https://www.w3schools.com”>

</iframe>

</body>

</html>

Html 5

HTML <section> Element

The <section> element defines a section in a document.

<html>

<body>

<section>

  <h1>WWF</h1>

  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>

</section>

<section>

  <h1>WWF’s Panda symbol</h1>

  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>

</section>

</body>

</html>

HTML <article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

Examples of where an <article> element can be used:

  • Forum post
  • Blog post
  • Newspaper article

<html>

<body>

<article>

  <h1>What Does WWF Do?</h1>

  <p>WWF’s mission is to stop the degradation of our planet’s natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

</body>

</html>

HTML <nav> Element

The <nav> element defines a set of navigation links.

<html>

<body>

<nav>

  <a href=”/html/”>HTML</a> |

  <a href=”/css/”>CSS</a> |

  <a href=”/js/”>JavaScript</a> |

  <a href=”/jquery/”>jQuery</a>

</nav>

</body>

</html>        

HTML <aside> Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be related to the surrounding content.

<html>

<body>

<p>My family and I visited The Epcot center this summer.</p>

<aside>

  <h4>Epcot Center</h4>

  <p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

</body>

</html>

Happy
Happy
%
Sad
Sad
%
Excited
Excited
%
Sleepy
Sleepy
%
Angry
Angry
%
Surprise
Surprise
%