Slide 1:Unit I Web Technology By S.Saravanan Computer Literacy Programme IGNOU-DHAN


Slide 2:HTML H – Hyper T – Text M – Markup L – Language Using this language we can create web page in the internet. This language us different from c , c++ etc . Using any web browser like IE, netscape , firefox , etc . The result of the execution will appear as web page . It developed by Tim Berness Lee in 1989


Slide 3:Roles Each tag enclosed with in angled brackets ( ) Eg : No space is allowed between symbol and the tag Eg : All tag must start with opening tag and with closing tag Eg : Tag are not case sensitive Eg : - - - - - - - OR - - - - - - -


Slide 4:Structure Of HTML Title -- - - - - - -- - - - - - -- Statements of body - - - - - - - - - - - - - - - - Ex : Web Tech IGNO is arrange IT based Community Learning Course CLP


Slide 5:Code In Notepad Start - > Run - > Type Notepad Start - > Programs - > Accessories - > Notepad It Open Notepad application Type Code and save Extension is .html or .htm


Slide 6:Out put of HTML Title Body


Slide 7:Basic Tags Html Tag is a starting tag. To delimit the text inside , add a closing Title Tag is Within a tag Body Tag tag all the content to be displayed on the web pages has to be written within the body tag. So whether text, Headlines, textbox, checkbox, or any other possible content, every thing to be displayed must in Body tag The Body tag has following ATTRIBUTES BGCOLOR : It can used for changing the background color BACKGROUND : It is used for specify the image to be displayed LINK : It indicates the color of the hyperlinks , which have not been visited ALINK : It indicates the color of active Hyperlinks, An active link is the one on which the mouse button is pressed VLINK : It indicates the color of the hyperlinks after the mouse click on it TEXT : It is used for specifying the color of the text displayed on the page .


Slide 8:Basic Tag in Notepad Basic Tag in IE


Slide 9:Formatting Of Text Text formatting in other words presenting the text on an HTML pages in a desired manner, is an important part of creating a web pages . Headers Headers are used specify the heading of sections or sub – sections in document Depending on the desired size of text , any available levels Eg: IGNOU Header Level 1 Header Level 2 Header Level 3 Header Level 4 Header Level 5 Header Level 6 Out Put of Header


Slide 10:Formatting Tag Let us now look at some more tags that can used formatting text. EX Ignou DHAN IGNOUprovides several programs in the computerstream. one of the programs is MCA stands for Master Of Computer Application For MCAIGNOUis conidered to be one of the premier universities IGNOUbelies in QualityeducationAccording to IGNOU,MCAis one of its best programs offering convenient timings to the students so that s/he can pursure the course while working at a job. Out put Of Formatting Text


Slide 11:BOLD: The text an be displayed in boldface by writing it in between the and tags. ITALICS: It starts with and ends with tag. It is use to display the text in italics. UNDERLINE : It is used for underlining the text to be displayed. The tag is used for this purpose. The tags can be nested. So in order to see the text in boldface, in italics and underlined, it should be placed beween the and tags. PARAGRAPH: If you want to display the text in the form of paragraphs, then the tag should be used. TT: The tag is used for displaying text in a fixed width font similar to that of a typewriter. STRIKE: If you want the text to be marked with a strikethrough character, place it within the and tags. STRONG : There are certain text-based browsers that do not render the text as boldfaced. So you can use the tag instead of the tag. This displays the text to sttand out in the most appropriate manner for the browser. Using the attribute explanation above Output


Slide 12:EM : Just as the tag corresponds to the tag, the can be used instead of the tag. The reason for using it is the same as for the tag. The tag is used for emphasizing the text in the manner most appropriate to the browser. BR : This tag is used for inserting a line break. The text written after the tag is displayed from the beginning of the next line onwards. This tag doesnot need a corresponding terminating tag. HR: This tag puts a horizontal line on the page. It has the following attributes: ALIGN : It is used for aligning the line on the page. The possible values of this attribute are LEFT, RIGHT, and CENTER. It is useful when the width of the line is less than the width of the page. NOSHADE : This attribute is used to prevent any shading effect. SIZE : It is used for specifying the thickness of the line. WIDTH : You can set the width of a line using this attribute. The value can be specified either in pixels or as a percentage of the width of the page, e.g., WIDTH = “30%”> BLOCKQUOTE : This tag indents the left margin of the text. It is used for displaying the text as quoted the text as quoted text as shown. ADDRESS : This tag, as shown in displays the text in italics. CITE: The text placed in between the and tags is rendered in italics by the browser.


Slide 13:Font Tag HTML providesthe flexibility of changing the characteristics of the font such as size , color , etc. Every browser has a default font setting that governs the default font name , size and color. Unless you have changed it, the default is Times New Roman 12 pt with the color being Black . Ex : Font Tag Welcome to INDIA Welcome to ,e;jpahWelcome to INDIA Output Using FONT Tag


Slide 14:Special Characters You have seen that there are certain characters that have special meaning in HTML code. For Example, the “” characters delimit tags. If you want to display such characters on the web page, you have to take care that the characters are not interpreted and are displayed literally. To display the “ This is & nbsp;& nbsp;       Used for & nbsp;& nbsp;       blank space &It; is the Less Than symbol > is the Greater Than Symbol & is the ampersand symbol " is the quotation mark symbol à is small a. grave accent symbol


Slide 15:À is capital a, grave accent symbol ñ is small n, tilde symbol Ñ is capital n, tilde symbol ü is umlaut small u symbol & Uuml; is Capital u, symbol  is the symbol Delta ¼ is the quarter symbol ½ is the hay symbol Output Using Special Characters


Slide 16:Working with Image tag Let us take a look at the Syntax of the tag SRC : This attribute specifies the pathname to source file that contains the image. (Eg : “image.gif”)That the Browser will look for image named image.gif in the same folder (or directory) as html document itself. WIDTH : This is used specifying the desired width of the image. HEIGHT: This is used specifying the desired HEIGHT of the image. BORDER : an important attribute of IMG tag is BORDER. This attribute specifies the width of the border of the image. By default value is 0. i.e there is no border ALT : Another IMG attribute that is important is ALT . ALT is sort of substitute for the image that is displayed or used when the user is using a browser that does not display images. Someone may be using text only browser, he may have image loading turned off for speed or he may be using a voice browser


Slide 17:Image tag Example Program IMAGE TAG This text is placed at the Middle of the image ALT Value Output Using IMG Tag


Slide 18:Meta Tag Syntex NAME : This attribute is used for identifying type of meta tag CONTENT : This attribute is used to specify the keyword search engine Eg : Meta Tag This Web page is refresh every 2 seconds Refresh every sec Output Using META Tag


Slide 19:THANK TO WATCHING CLASS UNIT I