❤!HELLO  STUDENTS!❤ 

📚Here ,The Notes of class 10th computer application  unit -2 chapter-3 i hope it will help you for your exams 

💓please comment if its help you and share 👇



UNIT-2

CHAPTER-3 BAISCS  HTML ELEMENT

                       INTRODUCTION


  • Whatever we see on the web are the documents that are written in a special language called HTML.
  • HTML tells the browser how to display the contents of a hypertext document (a document containing text, images, videos and other supporting media)
  • It also tells how to make a document interactive through special hyperlinks.

HTML & IT's CAPABILITIES

  • HTML is a document-layout and hyperlink-specification Language i.e. a language used to design the layout of a document nd to specify the hyperlinks.
  • HTML stands for Hyper Text Markup Language.
  • HTML is the standard markup language for creating Web pages
  • 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
Though HTML is a language that supports multimedia and new page layout features yet it has some limitations,


HYPERTEXT MARKUP LANGUAGE


HYPERTEXT = A simple digital text or image that contains links to other text

  MARKUP =Refers to special symbols of instructions that indicate the style,           structure of format for a webpage.

LANGUAGE =A language that is designed for processing, definition and presentation of text.




                                   

                                        HISTORY OF HTML 

HTML was created by Sir Tim Berners -Lee in late 1991 but was not released officially, which was published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML


•For it's first five years (1990-95). HTML went through a number of revisions and experienced a number of extensions.


  • HTML- 1991
  • HTML 1.0-1993 
  • HTML2.0-1995 
  • HTML3.2-1997 
  • HTML 4.01-1999 
  • HTML 5-2012
Current approved standard of HTML is HTML5, which was released in 2012. HTML 5 can be said for as an extended version of HTML 4.01


     WRITING HTML DOCUMENTS

HTML is made up of elements or tags and attributes, which work together to identify document parts and tell browsers how to display them.


TAGS: A coded HTML command that indicates how part of web page should be displayed. Example: <b>, <u> etc.


ATTRIBUTES: A special word used inside tag to specify word used inside tag to specify additional information to tag such as color, size, etc. Example: <body bgcolor>

  • AII HTML tags are contained with angular brackets (<>)
  • HTML tags are not case-sensitive.

HTML DOCUMENT STRUCTURE


The basic structure of an HTML document is simple as the entire document is bound by a pair of <HTML> and</HTML> tags.

General form of HTML document

<HTML>

<HEAD>

<TITLE> Title of page</TITLE> </HEAD>

<BODY>

          HTML tags are written here

</BODY>

</HTML>

<HTML> Tag: Identifies the document as HTML document.

<HEAD> Tag: Contains information about the document, like its title, scripts used, style definitions and document descriptions.
It makes the header of the document.

<TITLE> Tag: Contains the document title.

<BODY> Tag: Encloses all the tags, attributes and information to be displayed in the web page. It makes the body of the HTML document that appears in the windows.


Document structure of HTML


 < !DOCTYPE html >
< html lang-"en"> 
 <head>
<meta charset = "utf-8">
 <title>


•••••••••••


</title>
</head>
<body>


•••••••


</body>
</html>



<DOCTYPE> Tag :  Tells the browser what version of HTML is being used in the document.

<HTML> Tag: Here the language English has been specified as an attribute of HTML tag but you can skip lang attribute

<META charset> Tag: It is given to specify the character encoding used. By default, UTF-8 character encoding is used for English pages which is specified through it.

  • Other tags included in HTML5 are: section, article. aside, header,footer, row, dialog, figure etc.

HTML WRITING TOOLS

To create and view an HTML document we can use HTML editor Front page of Front-page Express.
The most commonly and easily available text processor or HTML editor is NOTEPAD and a web browser like Mozilla Firefox or Google Chrome etc.

Creating an HTML document: STEPS:

1. Open the notepad.
2. Type your HTML code in it.
Save you file in .txt and •html extension.




BASIC  TERMINOLOGY

TAG: It is a keyword to specify certain kind of formatting  and display of the content . A tag is alwayas written in angular  brackets.

ELEMENT : It represents one complete individule component has three parts 

  • A start tag
  • A end tag 
  • Content between start and end tags
Example: <title>tag <body>tag etc.

  • ATTRIBUTE : It allows us to add extra bit of information .They appear inside the opening tag  and have specific values.

                  CONTAINER AND EMPTY ELEMENT


TYPES OF ELEMENTS

  1. CONTAINER ELEMENTS
  2. EMPTΥ ELEMENTS

Container elements: They require pair tags i.e. a starting as well as an ending tag.

Example: <title>.</title>, <center>------------</center>etc.

Empty Elements: Also known as void elements. They require just a starting tag and not an ending tag. They just carry out their specific job.

Example: <br>, chr> etc.


HTML TAG STRUCTURE

  • Every HTML tag consists of a tag name, sometimes followed by an optional list of attributes, all placed between opening and closing angular brackets.
  • Tag attributes, if any, come after the tag name, each separated by one or more tab, space, or return characters. Their order of appearance is not important.
  • A tag attribute's value, if any, is given after the equal sign (=), in quotes generally after the attribute name.
For example: <a href="https://www.w3schools.in/htmltutorial/history/">

BASIC HTML TAGS


  • The HTML tag 
  • The HEADE
  • The TITLE tag
The BODY tag -Different attributes of <BODY> element are: 
  • Background attribute- <BODY background="filename.gif"'> 
  • Background color(BG COLOR), text color(TEXT), link color(link)-
                 <BODY bgcolor ="000000" text="FFFFFF" link="# 9690CC>
                 <BODY bgcolor ="teal" texts="magenta" links="yellow" vlinks="lime"
                   alink="red">
  • Setting left and top margins -LEFTMARGIN, TOPMARGIN attribute
                   <BODY leftmargin="50"> 
                   <BODY topmargin="60">

Headings in HTML (HI.....H6 tags)
<H> Text of heading </H>
Attribute: Alignment <H1 align=center>Headings</HI>

Text formatting using <P> and <BR> tags

Breaking lines - Hello! How are you? <BR> Where are you going?

Creating paragraph-<P>This is my school/P> 
Attribute-ALIGN

                      <P  align LEFT> This is my first paragraph/P>

The CENTER tag

<center >This heading is in the center.</center>

Text formatting using <BASEFONT> and <FONT>

  • The <BASEFONT> tag -<basefont sizes=5> This text has base font size 5
  • The <FONT> tag- <font> This is a text.</font>

Attributes: <font size=6 color=red face="Broadway, Arial, Times

New Roman"> first page</font>

Horizontal rules <HR> tag-produces a horizontal line <HR> </HR> Attributes: size-<HR size=4 width="50%>


webpage



Like <BR> tag the <HR> tag forces a simple line break, although unlike CBR> tag <HR> causes the paragraph alignment to revert to default i.e.left justified

  • Comments <!-- and ->

  1. Comments are one type of textual content which appear in your HTML code, but are not rendered by browser.
  2. Comments are given between special <!-- and--> markup elements.
  3. Browsers ignore the text between comment character sequences.
  • Example:

                               <!--This is a comment-->


                              <!-- This is a multiple
                                  line comment.
                                  ..............         -->


LOGICAL AND PHYSICAL STYLES

                    
                                                                              STYLE
   Logical Styles                                                Physical Styles

                                                                    

  • Styles are used for individual words or sentences.

Logical Text Styles:

  • They are general descriptions.
  • Each browser handles a logical style in its own way.
  • They render the text according to it's meaning.
  • Various logical styles are :
  1. <DEN>- for a word being defined.
  2. <EM>. for emphasis.
  3. <CITE> - for titles of books, films etc.
  4. <CODE>- for computer code.
  5. <KBD>-for user kevboardentry
  6.  <SAMP>-for a sequence of literal characters.
  7. <STRONG>- for strong emphasis.
  8. <VAR> - for a variable, where you will replace the variable with specific information.

Physical text styles:

They indicate the specific type of appearance for a section.

They are rendered in the same manner by all browsers.

Various physical text styles are: 
  • <B>-bold text
  • <I>-italic text
  • <TT>- type writer text 
  • <U>-underlined 
SPECIAL CHARACTERS

  • The three ASCII characters - the left angle bracket(<), the right angle bracket(>), and the ampersand(&) have special meanings in HTML
  • They can not be used "as is" in text.
  • The angle brackets are used to indicate the beginning and the end of HTML tags.
  • The ampersand is used to indicate the beginning of an escape sequence.

The way they are used in HTML are:
 
  1.  &It;             the escape sequence for<
  2.  &gt;            the escape sequence for > 
  3.  &amp;        the escape sequence for&

COMBINING TAGS

  • We can combine various tags together in HTML so as to achieve desired result and effect.
  • If we want a <H1> heading to appear in red color, then we may combine <FONT> tag with <H1> tag.
  • <H1><FONT color red> Combining tags</H1>

            LISTS IN HTML


TYPES OF LISTS

  • Unnumbered lists
  • Numbered lists
  • Definition lists

An unnumbered or numbered list begins with a tag that identifies the type of list, and then uses <Ll> tag to denote the beginning of each new list item.

  • <UL>-unnumbered list
  • <L>- numbered list

A definition list requires separate tags for each term and definition.

  • <DL> - definition list >
  • <DT> - definition term -
  • <DD> - definition description

UNNUMBERED LIST


  • These lists are indented lists with a special bullet symbol in front of each item.
  • They are also known as unordered lists.
  • These lists are marked by <UL> and </UL> tags.
  • Example: 
               <UL>

                               <LI> apples 
                               <LI> oranges
                               <LI> grapes

               </UL>

The TYPE attribute

By default, a solid circle is used for the bullets. To change you can use disc, circle or square in type attribute inside <UL> tag.


NUMBERED LIST


These lists are indented lists that have numbers or letters in front of each item.

They are also known as ordered lists.

These lists are marked by <OL> and </OL> tags.

Example: 
                        <OL>

                                     <LI> pen 
                                     <LI> pencil

                        </OL>

The START attribute

It help you to change the beginning value by typing starts=4 inside <OL> tag

The TYPE attribute

By default, numbers are used for the list items. To change you can use A, a, L i or 1 in type attribute inside <UL> tag.




DEFINITION LIST


These are indented lists without any bullet symbol or any number in front of each item.

It usually consists of alternating a definition term <DT> and a definition description <DD>

Web browsers generally format the definition on a new line and indent  it

Example:

<DL>

           <DT> HTML

           <DD> It stands for hypertext markup language and is used to design webpages.

            <DT> HTMLS
            <DD> It is an extended version of HTML 4.01


</DL>


The COMPACT attribute

It can be used routinely in case our definition term is very short.


NESTED LISTS

The nested list or a sublist is a list within a list.

The trick to marking nested lists up correctly in HTML is to recognize that the sublist is actually a child of a list item and not of a list.

Example:

<ul>

       <li>Fruit

        <ul>

                  <li>Bananas</li>
                   <i>Apples</li>
                   <li>Pears<li>

         </ul> </li> 
      <li>Vegetables</li>
         <li>Meat</li>
</ul>

                                  INSERTING IMAGES


We can insert images in an HTML page.

Browsers support images that are in the format of.gif, xbm and .jpeg.

<img> tag is used to insert images.

Attributes:

Sre-it is used to mention the image file's URL
  • <img src="F:\images\ sunflower.jpeg">

Alt - specifies alternative text the browser may show if image display is not possible or disabled by the user.

  • <img src="image.gif" alt="This is a beautiful picture">

Align- provide alignment to the image to display them properly on a webpage.

  • <img src="image.gif" alt-"hello" align=center>

Height and width-provide dimension to the image.

  • <img src="image.gif" height=70 width=50>


SUBSCRIPTS & SUPERSCRIPTS


<SUB> tag is commonly used by scientists.

It helps in making a text subscripted like H.0.

Example:
              H<SUB>2</SUB>0

<SUP> tag is a complimentary tag for subscript.

It helps in making a text superscripted like x.

Example:

X<SUP> 2</SUP>= 


Topics Covered


The <TD> tag

The <TH> and <TR> tags

The <THEAD> tag

The <TFOOT> tag

The <TBODY> tag

Advantages of HTML

Limitations of HTML




THE <TD> TAG


It is known as the workhorse ofthe table.

It denotes table data.

Attributes

* Aligning table data - ALIGN attribute 
         <TD ALIGN-"center">

* Setting the cell width-WIDTH attribute
          <TD WIDTH=50

* Setting the cell's background-BACKGROUND attribute
          <TD BACKGROUND="D:\imagel.jpg>

* Setting the cell's background color-BGCOLOR attribute
          <TD BGCOLOR -"red">

* Changing the cell span-ROWSPAN and COLSPAN attribute 
          <TD ROWSPAN=2>
           <TDCOLSPAN=2>

The rowspan and colspan attributes are used to specify the span of a cell.

* Vertical alignment of cell contents-VALIGN attribute 
         <TD VALIGN-bottom>


THE <TH> and <TR> TAGS


The <TH> tags

  • It stands for table header.
  • The contents declared as header are displayed in a distinctive style.
  • It accepts the same attributes as <TD> tag i.e. ALIGN, WIDTH,BACKGROUND, BGCOLOR, ROWSPAN, COLSPAN and VALIGN.

The <TR> tags

  • It stands for table row.
  • It also uses same attributes as <TD> tag except for ROWSPAN and COLSPAN.

THE <THEAD> TAG

  • It is used to definea setofheaderrows.
  • We have only oneTHEADin a table.
  • The main <THEAD> command must follow the main table command.
  • Is a table is very big and is spanning across pages then the rows set by THEAD will be replicated on every page where this table is displaved.
  • THEAD defines the table header section that may have multiple rows in it.
  • Attributes of THEAD tag are: ALIGN, BGCOLOR, VALIGN
THE <TBODY> TAG

  • It is used to define the body section of the table.
  • It is also used to define table body rows.
  • Attributes of TBODY tag are: ALIGN, BACKGROUND, BGCOLOR, VALIGN
  • BACKGROUND and BGCOLOR attributes will be applied to all the rows that are part of table body.
  • It is used inside a table tag


ADVANTAGES OF HTML


  • HTML is easy to use, learn and implement.
  • No special software is required.
  • It contains powerful text formatting facilities (commands/tags).
  • An HTML page can be created on any hardware platform using any text editors.
  • Hyperlinking facility enables visitor or users to traverse to any HTML document.
  • Finding an error is easy.
  • If compatibility with user habits, expectations, and multiple platforms is the goal, then, HTML is the only approach to develop a good web application.


LIMITATIONS OF HTML


  • HTML is not a programming language in true sense.
  • Any type of calculation cannot be done in HTML and it cannot be used to display even system date.
  • Scripting languages like VBscript or JavaScript are required to handle calculations, validations, and events in HTML documents.
  • No separate/special debugger is provided.
  • Code complexity increases to make a more interactive webpage.
  • Complex HTML code is hard to read and understand.
  • Syntax errors are not identified or displayed by HTML.

for most important question for exam👇click this link