HTML IN 15 MIN S

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

H T M L : 

H T M L HTML or Hypertext Markup Language, is how a World Wide Web browser displays multimedia documents. The documents themselves are plain text files with special “tags” or codes that the WWW browser knows how to interpret and display on your screen. Tags are nothing but instructions in html language

HTML TAGS : 

HTML TAGS Tags consists of a keyword enclosed with angle brackets Ex :- <html> <body> <head> These tags are not case sensitive.

Structure of a Html Document : 

Structure of a Html Document Every html document start with <html> tag and ends with</html> tag. Html document consists of two sections Head section. Body section.

Head Section : 

Head Section This section is used to specify the title of the document. It begins with <head> tag. This is followed by <title> tag. Here we can give the title of the document. The title tag ends with </title> tag. The head tag ends with </head> tag.

Body Section : 

Body Section This section begins with <body> tag, followed by the text of the documents. This section ends with </body> tag.

Slide 6: 

<html> <head> <title>……</title> </head> <body> ------- ------- </body> </html> Head Section Body Section Html Document

Write a html code for displaying grcp as the title and b.pharmacy as the text of the document : 

Write a html code for displaying grcp as the title and b.pharmacy as the text of the document As html is platform independent, we are using the editor “Notepad” for coding of html <html> <head> <title> G R C P </title> </head> <body> B.PHARMACY </body> </html>

Slide 8: 

Now save the notepad file with the extension “name.html”. Now open this file in Internet Explorer file open browse select the file -open ok

More tags : 

More tags <b>----</b> it displays the text in bold. <u>----</u> it displays the text with underline. <i>----</i> it displays the text in italic. <center>-----</center> it places the text in center of the page.

Heading tags : 

Heading tags Html allows 6 levels of heading tags. <h1>----</h1>  First level. <h2>----</h2>  Second level. <h3>----</h3>  Third level. <h4>----</h4>  Fourth level. <h5>----</h5>  Fifth level. <h6>----</h6>  Sixth level.

<br> tag : 

<br> tag Normally browser displays the text in single line. So in order to display the text in line by line we are using <br> tag. It is nothing but a line break. It does not have end tag. Ex:- <boby> ---------,<br> --------,<br> --------,<br> </body>

<hr> tag : 

<hr> tag This tag is used to draw a horizontal line . It does not have end tag. <html> <head> <title> G R C P </title> </head> <body> B.PHARMACY <hr> M.PHARMCY </body> </html>

Slide 14: 

There are two attributes for a <hr> tag. i.e size and shade. The size allows you to define the thickness of the line to be drawn. The shade attribute displays the line in dark grey. Ex: <hr size=“10” noshade>

Adding Colors to the document : 

Adding Colors to the document Bg color attribute:- This attribute is used with the <body> tag to specify the background color for the image. It allows 16 colors like black, green, silver, white, maroon, red, yellow, purple, grey, lime, olive, blue etc…, Ex:- <body bg color=“red”>

Slide 16: 

Text attribute to the color tag:- By using this attribute you can apply color to the text in our document. Ex:- <body bg color=“yellow” text =“red”>

Slide 17: 

<Big> tag:- It displays the text in a font larger than the normal. It ends with </big>. Ex:-<big> this is my home page </big> <Small> tag:- It displays the text in a font smaller than the normal. Ex:- <small> this is my own page </small>

<font> tag : 

<font> tag By using this tag you can specify the font face, size and color in which the text should be displayed. This tag has three attributes Font face Size and Color

Slide 19: 

Color:- <font color=“red”> my home page </font> Size:- it allows seven different font sizes. The min size is ‘1’ and the max is ‘7’. <font size=“6”> my home page </font> Font face:- This is used to specify the font face of a particular text. <font face=“courier”> my home page </font>

<Marquee> tag : 

<Marquee> tag This tag makes the text to scroll from one end of the window to other, It ends with </marquee> tag. Ex:- <marquee> G R C P </marquee>

<p> tag (paragraph tag) : 

<p> tag (paragraph tag) This tag indicates the beginning of a new paragraph. </p> is optional. We can align the paragraph in 4 ways by the following <p align=“left”>------</p> <p align=“right”>------</p> <p align=“center”>------</p> <p align=“justify”>------</p>

LISTS : 

LISTS HTML allows you to create three kinds of lists. Ordered lists. Un ordered lists. Definition lists.

Ordered lists : 

Ordered lists It is similar to the numbers list created in Ms-Word. In this case the items are preceded by numbers(1,2,3,……),lower case or upper case , upper case or lower case roman numbers . Here each list must be enclosed between <ol> and </ol>. Each list item is preceded by <li> tag.

Example: : 

Example: <ol> <li> Rama. <li> Raghu. <li> Sita. </ol> Output:- 1.Rama. 2.Raghu. 3.Sita.

Slide 25: 

Html allows you to specify different types of ordered lists by specifying “type attribute” with <ol> tag. Type =“1” ----- 1,2,3…... Type =“A” ----- A,B,C…... Type =“I” ----- I,II,III…... Type =“I” ----- i,ii,iii….. Type=“a” ----- a,b,c…..

Example: : 

Example: <ol type=“i”> <li> rama. <li> raghu <li> sita </ol> Output: i. Rama. ii. Raghu. iii. sita.

Slide 27: 

You can start the list from the middle, by specifying that number at the attribute “start” Example : <ol type=“1” start=“5”> The list will start from “5”

Unordered list : 

Unordered list Listing the items in the form of bullets, just like in ms-word. In this case a round or a square bullets will be precedes the item list. The list must be enclosed between <ul> and </ul>.

Example: : 

Example: <ul> <li> Rama. <li> Raghu. <li> Sita. </ul> Output:- Rama. Raghu. Sita.

Slide 30: 

By specifying the “type” it will display “round” or “square” bullet. Ex:-<ul type=“square”> Ex:- <ul type=“circle”>

Definition list : 

Definition list It is used for defining the terms. Here all the definitions must be enclosed between <dl> and </dl>. Each definition is preceded by “definition term” tag <dt> The description of the definition is preceded by <dd>

Example : 

Example <dl> <dt>dir <dd> this command is used to list the files and directories <dt>copy <dd> this command is used to copy the contents from one file to another. </dl> Output: dir this command is used to list the files and directories. copy this command is used to copy the contents from one file to another.

Adding pictures : 

Adding pictures We will use <img> tag for adding picture to our page. The “img” tag with “src” attribute specifies the name of the file. Syntax :- <img src=“file name”>

Slide 34: 

SUP TAG:- Sup means superscript. <sup></sup> For example for displaying (a+b)2=a2+b2=2ab. The code is (a+b)<sup>2</sup>=a<sup>2</sup>+<sup>2</sup>+2ab

Sub tag: : 

Sub tag: Sub means sub script. <sub></sub> For displaying h20. The code is H<sub>2</sub>0

Anchor tag: (for creating links) : 

Anchor tag: (for creating links) Links can be created by using <a> and </a> tags. The “href” attribute is used to specify the name of the file to be linked. The <a> tag should be followed by the text to be displayed on the screen as link. This text usually displayed in blue and underlined. Syntax:- <a href=“link address”>click here </a>

Creating tables : 

Creating tables We can add table to our document by using <table> and </table> tag. <table> tag is usually used with width, cell spacing, cell padding and border attributes. Width attribute to specify the width of the table. Cell spacing attribute is used to specify the space between cells. Cell padding attribute is used to refer the space between the border of the cell and its contents. The border attribute specifies the thickness of the border around the table.

Slide 38: 

<tr> and </tr> tags are used to open and close a row. <td> and </td> tags are used to create a cell in a row. <th> and </th> tags are used to create contents of a cell in a row.

Slide 39: 

<html> <body> <table width=“100%”,cell spacing=“5” cell padding=“5” border=“5”> <tr> <th> name </th> <th> roll number</th> <th> marks </th> <th> grade </th> </tr>

Slide 40: 

<tr> <td>rama</td> <td>23</td> <td>345</td> <td>A</td> </tr> <tr> <td>raghu</td> <td>24</td> <td>342</td> <td>A</td> </tr> <tr> <td>sita</td> <td>26</td> <td>344</td> <td>A</td> </tr> </body> </html>

Thank Q : 

Thank Q

authorStream Live Help