Html Intro

60 %
40 %
Information about Html Intro
Education

Published on October 9, 2009

Author: shans1010

Source: authorstream.com

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 : <HTML> No space is allowed between symbol and the tag Eg : <BODY> All tag must start with opening tag and with closing tag Eg : <HTML> </HTML> Tag are not case sensitive Eg : <HEAD> - - - - - - - </HEAD> OR <head> - - - - - - - <head> Slide 4: Structure Of HTML <HTML> <HEAD> <TITLE> Title </TITLE> </HEAD> <BODY> -- - - - - - -- - - - - - -- Statements of body - - - - - - - - - - - - - - - - </BODY> </HTML> Ex : <HTML> <HEAD><TITLE> Web Tech </TITLE></HEAD> <BODY>IGNO is arrange IT based Community Learning Course CLP </BODY> </HTML> 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 <HTML> is a starting tag. To delimit the text inside , add a closing Title Tag <TITLE> is Within a <HEAD> tag Body Tag <BODY> 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: <html> <head><title> IGNOU </title></head> <body><center> <H1> Header Level 1 </H1> <H2> Header Level 2 </H2> <H3> Header Level 3 </H3> <H4> Header Level 4 </H4> <H5> Header Level 5 </H5> <H6> Header Level 6 </H6> </center> </body> </html> Out Put of Header Slide 10: Formatting Tag Let us now look at some more tags that can used formatting text. EX <html> <head> <title> Ignou DHAN </title></head> <body><b>IGNOU</b>provides several <i>programs </i>in the <b><i>computer</i></b>stream.<p> one of the <i> programs </i>is <b></p><b>MCA </b>stands for <tt>Master Of Computer Application</tt> <br><s>For MCA</s><b>IGNOU</b>is conidered to be one of the premier universities <br><strong>IGNOU</strong>belies in <strong><em>Quality</em></strong>education<br><p>According to <cite>IGNOU,</cite><b>MCA</b>is one of its best programs offering convenient timings to the students so that s/he can pursure the course while working at a job.</p> Out put Of Formatting Text Slide 11: BOLD: The text an be displayed in boldface by writing it in between the<B> and</B> tags. ITALICS: It starts with<I> and ends with</I> tag. It is use to display the text in italics. UNDERLINE : It is used for underlining the text to be displayed. The <U> 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 <B><I><U> and </U></I></B> tags. PARAGRAPH: If you want to display the text in the form of paragraphs, then the <P> tag should be used. TT: The < TT > 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 <S> and</S> tags. STRONG : There are certain text-based browsers that do not render the text as boldfaced. So you can use the <STRONG> tag instead of the <B> 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 <STRONG> tag corresponds to the <B>tag, the <EM> can be used instead of the <I> tag. The reason for using it is the same as for the <STRONG> tag. The <EM> 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 <BR> 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., <HR> 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 <CITE> and </CITE> 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 : <HTML> <HEAD><TITLE>Font Tag </TITLE></HEAD> <BODY bgcolor =“#FFFFFF”><center> Welcome to <font face=ARIAL size=6>INDIA</font><br> Welcome to <font face=KALYANI size=10 color=“red”>,e;jpah</font><br>Welcome to <font face=“ARIAL” size=6>INDIA</font><br> </BODY> </HTML> 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 “<“and “>” 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 “<“ character, it can be specified as “&It”. The “&” interprets the “It” as the “<“ symbol and displays it. But now what if you want to display the & symbol itself? Simply writing “&” in the code will not display it. But first, let us see how to display some special characters. Ex: <HTML> <BODY BGCOLOUR = “#FFFFFF”> This is & nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Used for & nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; blank space <BR> &It; is the Less Than symbol <BR> &gt; is the Greater Than Symbol <BR> &amp; is the ampersand symbol <BR> &quot; is the quotation mark symbol <BR> &agrave; is small a. grave accent symbol <BR> Slide 15: &Agrave; is capital a, grave accent symbol <BR> &ntilde; is small n, tilde symbol <BR> &Ntilde; is capital n, tilde symbol <BR> &uuml; is umlaut small u symbol <BR> & Uuml; is Capital u, symbol <BR> &#144; is the symbol Delta<BR> &#188; is the quarter symbol <BR> &#189; is the hay symbol <BR> </BODY> </HTML> Output Using Special Characters Slide 16: Working with Image tag Let us take a look at the Syntax of the <IMG> tag <IMG SRC=“FILENAME” WIDTH=“value” HEIGHT ALT=“alternate text” BORDER=“value” ALIGN=“value”> 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 <HTML> <HEAD><TITLE> IMAGE TAG </TITLE></HEAD> <BODY BGCOLOR=“#FFFFFF”> <IMG SRC=logo.jpg WIDTH=150 HEIDHT=150 ALT=DHAN ALIGN=“right” BORDER=2> This text is placed at the Middle of the image <IMG SRC=itlogo.jpg WIDTH=150 HEIDHT=150 ALT=IT - DHAN ALIGN=“left” BORDER=2> </BODY> </HTML> ALT Value Output Using IMG Tag Slide 18: Meta Tag Syntex <META NAME=“Keywords” CONTENT=“website, ” > NAME : This attribute is used for identifying type of meta tag CONTENT : This attribute is used to specify the keyword search engine Eg : <HTML> <head><title> Meta Tag </title></head> <meta http-equiv="refresh" content="2" ></head> <body><center> This Web page is refresh every 2 seconds </center></body> </HTML > Refresh every sec Output Using META Tag Slide 19: THANK TO WATCHING CLASS UNIT I

Add a comment

Related presentations

Related pages

Introduction to HTML

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

HTML5 Intro - W3Schools

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

Flash intro in Html einbinden - homepage-forum.de - Hilfe ...

Flash intro in Html einbinden 1.2.4 - Flash & Shockwave
Read more

Intro Template Blender - SkrilleniXx

Intro länge ~ 10 sec. Festplatte (Intro) ~ 6,93 mb Renderzeit ~ 12h Render Format - Mp4 FULL HD 1920x1080 Musik - Overwerk Contact Festplatte (Datei) ~ 7 ...
Read more

Serato DJ Intro 1.2.2 - Download - COMPUTER BILD

Serato DJ Intro 1.2.2 kostenlos downloaden! Weitere virengeprüfte Software aus der Kategorie MP3 & Audio finden Sie bei computerbild.de!
Read more

Flash intro, Flash intros Templates - homepage-designer.info

Flash Intro und Homepage vorlagen, erleben Sie eine Vielfalt an Flash intros...
Read more

html.de - HTML für Anfänger und Fortgeschrittene

html.de - HTML für Anfänger und Fortgeschrittene. Anmelden oder registrieren. ... Zuletzt: Video Intro rantanplan2000, 11 Oktober 2016. RSS-Feed. Tutorials
Read more

HTML – SELFHTML-Wiki

HTML. Aus SELFHTML-Wiki. Wechseln zu: Navigation, Suche. HTML bestimmt den strukturellen Aufbau einer Internetseite. Tutorials. Webseitengestaltung am ...
Read more

HTML lernen und die eigene Website erstellen - HTML Kurs

Bietet eine Einführung in HTML und CSS. Schritt für Schritt die eigene Website selber erstellen lernen. Download als PDF-eBook und Schulungsvideos.
Read more

Intro-Seite erstellen - Joomla CMS Support Forum

Read more