0 0
Read Time:13 Minute, 0 Second

Website  : A collection of web pages that belong to a specific URL.e.g., www.facebook.com, www.google.com

web pages which are made by using HTML and connected by links/hyperlinks

HTML

  • HTML stands for HyperText Markup Language.
  • HTML is used to create web pages and web applications.
  • HTML is widely used language on the web.
  • HTML is a Markup language not a programming language.

Markup languages are designed for the processing and presentation of text , formatting, both the layout and style, within a text file. HTMLis a an example of a widely known and used markup language.

History of html

HTML was created by Sir Tim Berners-Lee in 1993 ( as on Wikipedia ). Since then, there have been many different versions of HTML.latest version is html 5.2 which was released in 2017.

Advantages of HTML:

1. html is cross platform bcoz Every browser and all OS (windows,mac, unix etc ) supports HTML language.
2. Easy to learn and use.
3.You can integrate HTML with CSS, JavaScript, php to create dynamic websites etc.

Disadvantages of HTML:
1. It can create only static and plain pages so if we need dynamic pages then only HTML is not useful.
2. Need to write a lot of code for making a simple webpage.
3. Security features are not good in HTML.

Hypertext

It is a text that links to other webpage/document. By clicking on a link in a hypertext document, a user can quickly jump to different content.

The term (hypertext) was coined by Ted Nelson around 1965.

Linear Text

Text is written in linear way ( like in a book). We cant jump from one page to another by following a link.

Basic structure of html

 <html>

<head>

<title> My first website </title>

</head>

<body>

html tutorial by gaurav garg

</body>

</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 Tags vs HTML Element

HTML tag is just opening or closing entity.

See also  Computer Applications

For example: <p> and </p> are called HTML tags.

HTML element have opening tag, closing tag & content also.

Eg: <p>html tutorial by Gaurav sir</p> : This complete thing is called a HTML element.

Empty tag vs container tag

Container tag consists of opening tag & closing tag .Ex. <body> ….</body>

Empty tag is tag without a closing tag. Ex. <br>

Steps to create & run html document

Windows 10 : Open the Start button. Type/search Notepad.

Windows 7 : Open Start > Programs > Accessories > Notepad 

  • open notepad and write html coding
  • after writing html coding click on File > Save as giving html extension.
  • name the file and save it.
  • Now go to the drive/folder where you saved html document.
  • Now double click on the file.

Body tag & attributes

Attributes

Attributes provide additional information about HTML elements. Attributes are always specified in the starting tag

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

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

Hello topper

</body>

</html>

Attributes of body tag

text – any text written in body will appear as green

Bgcolor – to set the background color of webpage

background – to set a image as background of webpage.

<html>

<head>

<title>body tag program</title>

</head>                                                                                                                                                                                                                                                                                                                                                                                                                                                  

<body text =”green” bgcolor=”yellow” background=”architecture.jpg”>

Hello topper

</body>

</html>

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

HTML TEXT FORMATTING

BOLD <b>

<b> element defines bold text

Strong <strong>

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

Italic <i>

<i> element defines italic text

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”.

Small <small>

HTML <small> element defines smaller text

Big <big>

 HTML <small> element defines bigger text

Subscript <sub>

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

Superscript <sup>

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

blockquote <blockquote>

 The HTML <blockquote> element defines text that is quoted.this tag indents block of text on right and left sides.

See also  Class 9th - 10th Secondary Curriculum Academic Year 2022-23

address <address>

HTML <address> element defines contact information or address

<html><head><title>bold italic underline</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>

<small>This text is small.</small> <br>

<big>This text is big.</big> <br>

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

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

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

<blockquote> this is a quote </blockquote> <br>

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

 </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 gaurav 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.

<html>

<body>

<!– This is a comment –>

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

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

</body>

</html>

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

<html>

<body>

<h1> hello toppers </h1> <br>

<h2> hello toppers </h2><br>

<h3> hello toppers </h3><br>

<h4> hello toppers </h4><br>

<h5> hello toppers </h5><br>

<h6> hello toppers </h6><br>

</body>

</html>

< Hr > tag

<hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule in an HTML page to divide or separate document sections. The <hr> tag is an empty tag and it does not require an end tag.

Attributes : 

NameValueWhat it do
Alignleft
center
right
Used to specify the alignment of the horizontal rule.
sizenumericalUsed to specify the height of the horizontal rule.
widthnumericalUsed to specify the width of the horizontal rule.

<html>

See also  Class 11th - 12th Senior Secondary Curriculum Academic Year 2022-23

<head>

<title> HR TAG </title>

</head>

<body>

the toppers

<hr align=”center” width=”100%” size=”10″ color=”red”>

html tutorial by gaurav garg

</body>

</html>

Font tag <font>

Specify the font size, font face and color of text  .

Text you want to modify using font tag should be written between font tag. <font > ……..</font>

<html><HEAD><title> font tag usage </title></head>

<body>

<p><font size=”3″ color=”red” face=”century”>the toppers</font></p>

</body>

</html>

Attributes : size – define size of text , face – font style of text like Calibri , arial etc..

            Color – define color of text written

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>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

</body>

</html>

Character entities

Some characters are reserved in HTML.If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.Character entities are used to display reserved characters in HTML.

A character entity looks like this: &,  © , ®  etc.

<html> <body> <p>I will display &copy ; </p> <p>I will display &cent ; </p> <p>I will display &gt ; </p> </body> </html>

Image tag

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.

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