❤!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
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.
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>
<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.
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
- CONTAINER ELEMENTS
- 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.
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 ="teal" texts="magenta" links="yellow" vlinks="lime"
alink="red">
- Setting left and top margins -LEFTMARGIN, TOPMARGIN attribute
<BODY topmargin="60">
Headings in HTML (HI.....H6 tags)
<H> Text of heading </H>
Attribute: Alignment <H1 align=center>Headings</HI>
<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 ->
- Comments are one type of textual content which appear in your HTML code, but are not rendered by browser.
- Comments are given between special <!-- and--> markup elements.
- 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 :
- <DEN>- for a word being defined.
- <EM>. for emphasis.
- <CITE> - for titles of books, films etc.
- <CODE>- for computer code.
- <KBD>-for user kevboardentry
- <SAMP>-for a sequence of literal characters.
- <STRONG>- for strong emphasis.
- <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:
- &It; the escape sequence for<
- > the escape sequence for >
- & 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
- 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
2 Comments
👏👏👏tq
ReplyDeleteGood work ma'am all the best,👌
ReplyDelete