Html siva


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html siva

  1. 1. HTML BY K.SIVA
  2. 2. INTERNETØ The World Wide Web is, as the name implies, a world-wide network of computers that share documents called Web pages through an expansive "web" of network connections. The Web is part of the Internet, therefore, page sharing can take place between computers located anywhere in the world, there is Internet connectivity.
  3. 3. WEB PAGEØ The pages that we view in the browsers are called as web pages. Examples of the browsers: -Internet explorer -Opera -Mozilla firefox -Google Chrome -Safari
  4. 4. WEBSITEØ Collection of webpages.TYPES OF WEB PAGES:Web pages are classified into three types. -Static web pages -Dynamic web pages -Server pages
  5. 5. STATIC WEB PAGEØ These web pages are the pages in which the user cannot directly interact with the web pages.Ø To create these web pages we use HTML.Ø These pages runs on browser.
  6. 6. DYNAMIC WEB PAGEØ These webpages are the pages in which the user can directly interact with the webpages.Ø To create these web pages we use DHTML (Dynamic Hyper Text Markup Language).Ø These pages also runs on the browser.
  7. 7. SERVER PAGEØ To create these pages we use PHP, JSP, ASP (Active Server Pages).Ø These pages runs on server.
  8. 8. TYPES OF LANGUAGESØ Languages are classified into two types. Programming languages -These languages are object-oriented languages. -We can create objects here. - compiler Examples: c, c++, Java, VB (Visual Basic) , etc., Scripting languages -These languages are object-based languages. -We cannot create objects here. -Pre-defined objects will be available in scripting languages. -no compiler Examples: HTML, XHTML, Javascript, VBscript, etc.,
  9. 9. HTMLØ HTML stands for Hyper Text Markup Language.Ø It is developed by Tim Berners Lee.Ø It is used to create Static Web pages.Ø It is a global language i.e., it can be understood by all browsers.Ø It is a scripting language.Ø It is not case-sensitive language.Ø The latest version of HTML is HTML 5Note:Ø We write the HTML code in text editors (notepad, dreamweaver, netbeans, edit plus, eclipse etc.,) and we save it with .html
  10. 10. TAGSThe text placed between left angular brace " < " andright angular brace " > " is called as TAG.Syntax: <------>Example: <html>  Opening tags Closing tags -----------------------------------Syntax : <-----> </----->example: <html> </html> <form> </form>
  11. 11. Tags are classified into two types:1.) Container tags:The tags that have both opening and closing tags are called as container tags.examples: <html>-----------------</html> <body>-----------------</body>Note: The closing tag will starts with a forward slash (" / ") 2.) Empty tags:The tags that have only opening tags but no closing tags are called as empty tags.examples: <br> <hr> <img>
  12. 12. STRUCTURE OF HTML<html> <head> <title>---------</title> </head> <body> - - </body></html>
  13. 13. HEADINGS IN HTMLIn html, we are having six heading styles.All the headings are container tags.Each and every heading will have their own predefined styles.Syntax: <h1>--------------------------</h1> <h2>--------------------------</h2> <h3>--------------------------</h3> <h4>--------------------------</h4> <h5>--------------------------</h5> <h6>--------------------------</h6>Out of all heading styles, biggest heading style is h1 and smallest is h6. Attributes Parameters===========================align left, right, center
  14. 14. ATTRIBUTES AND PARAMETERSAttributes: Attributes are special features of a tag. Each and every tag will have its own attributes. A tag can have one or more attributes. Parameters: Parameters are the values that we assign to an attribute. Syntax: <tag attribute="parameter"> example: <body bgcolor="pink">
  15. 15. FORMATTING TAGS syntaxbold <b>--------------</b> <strong>---</strong> italic <i>----------------</i> <em>-----------</em> striking effect <s>----------------</s> underline <u>---------------</u> superscript <sup>----------</sup> subscript <sub>----------</sub> blockquote <blockquote>---</blockquote>
  16. 16. Paragraph tag:============It is a container tag.Syntax: <p>-------------</p> Attributes Parameters===========================align left, right, center, justify Pre tag:=======Pre stands for pre-formatted text.If we specify the text in pre tag, the browser will consider the line breaks (return / enter keys) andspaces specified in the text editor (notepad).Pre is a container tag.Syntax: <pre>---------------</pre>
  17. 17. br tag:-=======br stands for break.It is used to break a line and shift the following text to a new line.It is an empty tag.syntax: <br> &nbsp;=======It stands for Non-Breaking Space.It is used to add more than one space between the words. Note:Generally, the browser will not accept the spaces and line breaks specifiedin the text editor.To overcome that, we use the above two tags. 
  18. 18. HR tag: (Horizontal Rule)=====================hr tag is used to draw a line across the web tag is an empty tag.Syntax: <hr>Attributes Parameters===========================color any color name/hexa decimal numbersize pixwidth % or pixalign left, right, centernoshade noshade Note:The default width of the horizontal rule is 100%The default alignment of the hr is center.noshade attribute will be applied only when we are not specifying thecolor of the horizontal rule.
  19. 19. Font tag:=======Font tag is used to format the text such as changing the text size, color and style.Using this tag, we can apply styles to a character, word, sentence, etc.Font tag is a container tag.syntax: <font>-----</font> Attributes Parameters===========================color any color name or hexadecimal numbersize 1 to 7face arial, tahoma, etc., Note:=====The default size of the text in the web page is 3.The default face of the text in the web page is Times New Roman.The default color of the text is black.
  20. 20. Marquee tag:===========Marquee tag is used to give animation to the text, images, etc.,It is a container tag.Syntax: <marquee>-------------------</marquee> Attributes Parameters============================behavior scroll, alternate, slidebgcolor any color name/hexa decimal numberscrollamount numberdirection left, right, up, downheight % or pixwidth % or pix Note:=====The default behavior of marquee tag is scroll.The behavior "bounce" will not work in internet explorer.Its behavior will differ from browser to browser.
  21. 21. Image tag:This tag is used to insert images in the web page.Image tag is an empty tag.Syntax: <img> Attributes Parameterssrc image pathborder pixheight pix or %width pix or %align left, right, top, middle, bottomvspace pixhspace pixalt any textNote:In the image tag, the left and right alignments will be applied to the image.The top, middle and bottom alignments will be applied to the text along withthe image.
  22. 22. Links:======To create links, we use anchor tag.Anchor tag is a container tag.Syntax: <a>--------------</a> Attributes parameters===========================href url (uniform resource locator)target _blank,_self
  23. 23. TABLES:Tables are used to represent our data in a tabular format.In HTML, to represent tables we use table tag.Table is a container tagsyntax: <table>-----------</table> TABLE ROWS:The horizontal lines present in the tables are called as table rows.To represent table rows, we use tr tag.It is a container tag.syntax: <tr>---------------</tr>CELLS:The intersection of rows and columns are called as cells. To represent table headings we use th tag is a container tag.syntax: <th>------------</th>To represent table data we use td tag is a container tag.syntax: <td>--------------</td>
  24. 24. ATTRIBUTES PARAMETERSheight pixels or %width pixels or %border pixelsbordercolor any colorbgcolor any colorbackground image pathalign left, right, centervalign top, middle, bottomrules rows, cols, all, nonecellspacing pixelscellpadding pixelsrowspan numbercolspan number NOTE:Cellspacing: This attribute is used to change the spacing between the cells. Cellpadding: This attribute is used to change the space between the content to the inner edges of thecell.
  25. 25. LIST IN HTMLIn html, we are having three types of lists. -Ordered list -Unordered list -Definition list
  26. 26. Ordered list:-It is also called as numbered list.-It is used to give numbering to the list items.-It is a container tag.-Syntax: <ol>------</ol>-To specify the list items we use li tag.-It is also a container tag.-Syntax: <li>------</li>Attibutes Parameterstype i, I, a, A, 1start any number Example:<ol type="i" start=3><li>photoshop</li><li>flash</li><li>dreamweaver</li></ol> Out put:iii. photshopiv. flashv. dreamweaver
  27. 27. Unordered list:-It is also called as bulleted list.-It is used to give bullets to the list items.-It is a container tag.-Syntax: <ul>------</ul>-To specify the list items we use li tag.-It is also a container tag.-Syntax: <li>------</li>Attributes Parameters===========================type disc, circle, squareExample:<ul type="circle"><li>photoshop</li><li>flash</li><li>dreamweaver</li></ul>Out put:o photshopo flasho dreamweaver
  28. 28. Definition list:-It is also called as discriptive list.-It is used to give definitions to definition terms.-It is a container tag.-Syntax: <dl>------</dl>-To specify definition term, we use dt tag.-Syntax: <dt>------</dt>-To specify definition data, we use dd tag.-Syntax: <dd>------</dd>Example:<dl><dt>HTML:</dt><dd>Hyper text markup language</dd><dt>XHTML:</dt><dd> extensible hyper text markup language</dd></dl> Out put:HTML: Hyper text markup languageXHTML: extensible hyper text markup language
  29. 29. FORMSForms are used to create user interactive web pages.Forms comes under DHTML (Dynamic hyper textmarkup language)To create forms we use form tagSyn: <form>- - - - - -</form> Attributes Parameters============================name any namemethod get, postaction url (uniform resource locator)
  30. 30. Action:======-This attribute is used to specify the URL of the serverpage to which we want to send our form data.-Example: <form name="frm" action="user.aspx"> Method:=======-This attribute is used to specify the WAY we want to send our data to the server page. i.) get:--In this method, we dont have security for our data and only limited data can be sent to the server page. -Example: <form name="frm" action="user.php" method="get"> ii.) post:--This is the default method of the form.-In this method, we will have security for our data and we can send bulk of data to the server page.-Example:- <form name="frm" action="user.php" method="post">
  31. 31. Fieldname Keyword Syntax================================================text box text <input type="text">password box password <input type="password">checkbox checkbox <input type="checkbox">radio button radio <input type="radio">submit button submit <input type="submit">reset button reset <input type="reset">text area textarea <textarea></textarea>select select <select><option></option></select> Attributes Parameters====================================name any namevalue any valuesize pixelsmaxlength numberrows numbercols numberchecked checkedmultiple multiple
  32. 32. Including Audio And Video Files In Browser:-To include the audio (sound files) in html, we use bgsound tag.Example:-<bgsound src="Back Street Boys.MP3">-By default, the sound will play only once.-To make it repeated, we use loop attribute.Attribute parameterloop any number, -1(infinity)Example:-<bgsound src="11.mp3" loop=-1> -To include video files in browser, we use dynamic source (dynsrc) attribute of image tag.Example:-<img dynsrc="blackstreet.wmv">Attributes parametersheight % or pixwidth % or pixstart mouseover-In the above two examples of audio and vedio, we dont get the controls.-Inorder to get controls, we use embed tag. Example for audio file:-<embed src="blackstreet.mp3"> Example for video file:-<embed src="blackstreet.avi">
  33. 33. Frames:-Frames are used to divide our browser window into multiple windows.-Using frames we can place and view multiple files in a single window.-Each and every frame will have its own scrollbars.-To divide our window into multiple frames, we use frameset tag.-Frameset tag is a container tag.Syntax:<frameset>..........</frameset> Attributes Parametersrows pix, %cols pix, %border pixbordercolor any color name -To place the files in the frames, we use frame tag.-It is an empty tag.Syntax:<frame> Attributes Parameterssrc file pathname any namemarginheight pixmarginwidth pixscrolling yes, no,defaultnoresize -Note: ***We dont have body part in the frames.
  34. 34. THE END