Your SlideShare is downloading. ×
AK  html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AK html

605
views

Published on

HTML session by Kahate sir at SICSR

HTML session by Kahate sir at SICSR

Published in: Education, Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
605
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML Atul Kahate [email_address]
  • 2. HTML History
    • Physicists at CERN (Centre Europeen pour la Recherche Nucleaire) needed a way to easily share information
    • In 1980, Tim Berners-Lee developed the initial program for linking documents with each other
    • A decade of development led to WWW and HTML, including Web browsers
  • 3. HTML Basics
    • HTML stands for H yper T ext M arkup L anguage
    • An HTML file is a text file containing small markup tags
    • The markup tags tell the Web browser how to display the page
    • An HTML file must have an htm or html file extension
    • An HTML file can be created using a simple text editor
  • 4. HTML Syntaxes
  • 5. Sample HTML Page
    • <html>
    • <head>
    • <title>Title of page</title>
    • </head>
    • <body>
    • This is my first homepage.
    • <b>This text is bold</b>
    • </body>
    • </html>
  • 6. How to view it?
    • Save it with a .htm or .html extension
    • Open it in browser or by simply double clicking on it
  • 7. HTML Tags
    • HTML tags are used to mark-up HTML elements
    • HTML tags are surrounded by the two characters < and >
    • HTML tags normally come in pairs like <b> and </b>
    • The first tag in a pair is the start tag, the second tag is the end tag
    • The text between the start and end tags is the element content
    • HTML tags are not case sensitive, <b> means the same as <B>
  • 8. Why lowercase tags?
    • The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation
    • XHTML (the next generation HTML) demands lowercase tags
  • 9. Tag Attributes
    • Attributes provide additional information regarding HTML tags/elements
    • Always added to the start tag
    • Come in name=“value” pairs
    • Examples
      • <body bgcolor=&quot;red&quot;>
        • bgcolor attribute provides additional information about the body tag (that the background color should be red)
      • <table border=&quot;0&quot;>
        • border attribute states that this table should not have a border
  • 10. Headings
    • Headings are defined with the <h1> to <h6> tags
    • <h1> defines the largest heading
    • <h6> defines the smallest heading
    • HTML automatically adds an extra blank line before and after a heading
  • 11. Headings Example
    • <h1>This is a heading</h1>
    • <h2>This is a heading</h2>
    • <h3>This is a heading</h3>
    • <h4>This is a heading</h4>
    • <h5>This is a heading</h5>
    • <h6>This is a heading</h6>
  • 12. Aligning Headings
    • Use “align=left/center/right” attribute
    • Example
      • <H1 align=“center”>Heading in the center</H1>
  • 13. Paragraphs
    • Paragraphs are defined with the <p> tag
    • HTML automatically adds an extra blank line before and after a paragraph
  • 14. Paragraphs Example
    • <p>This is a paragraph</p>
    • <p>This is another paragraph</p>
  • 15. Line Breaks
    • <br> tag is used when you want to end a line
    • Does not start a new paragraph
    • The <br> tag forces a line break wherever you place it
    • Does not have a closing </br> tag
  • 16. Line Breaks Example
    • <p>This <br> is a para<br>graph with line breaks</p>
  • 17. Comments
    • The comment tag is used to insert a comment in the HTML source code
    • A comment will be ignored by the browser
    • You can use comments to explain your code, which can help you when you edit the source code at a later date
  • 18. Comments Example
    • <!-- This is a comment -->
  • 19. General tips
  • 20. General Tips – 1
    • Different browsers display the same HTML text differently
    • The display size also drives this
    • The text will be reformatted every time the user resizes the window
    • Never try to format the text in your editor by adding empty lines and spaces to the text
  • 21. General Tips – 2
    • HTML will truncate the spaces in your text
    • Any number of spaces count as one
    • Using empty paragraphs <p> to insert blank lines is a bad habit
      • Use the <br> tag instead
    • HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading
  • 22. Character Entities – 1
    • Some characters such as < have a special meaning in HTML
    • They cannot be used as they are, inside text
    • Character entities are used in their place
  • 23. Character Entities – 2
    • Made up of three parts
      • &
      • Entity name or # and the ASCII value of the character
      • ;
    • Example
      • &lt; or &#60; should be used in the place of <
  • 24. Common Entities &#39; &apos; apostrophe  ' &#34; &quot; quotation mark &quot; &#38; &amp; ampersand & &#62; &gt; greater than > &#60; &lt; less than < &#160; &nbsp; non-breaking space   Entity Number Entity Name Description Result
  • 25. Anchor Tag and Href Attribute
    • The anchor tag can be used to create a link to another document
    • Called as hyperlink or URL
    • The tag is <a>
  • 26. Anchor Tag and Href Attribute
    • Syntax
      • < a href =&quot;url&quot;> Text to be displayed </a>
      • a = Create an anchor
      • href = Target URL
      • Text = Text to be displayed as substitute for the URL
    • Example
      • <a href=&quot;http://www.yahoo.com/&quot;>Visit Yahoo!</a>
      • Result: visit Yahoo!
  • 27. HTML Tables
  • 28. Tables Marks a heading cell within a row. <th> Marks a cell (table data) within a row. <td> Marks a row within a table. <tr> Marks a table within an HTML document. <table> Use Tag
  • 29. Table Exercise
    • Create the following HTML table
    Book Name Author Computer Networks Tanenbaum TCP/IP Comer TCP/IP Protocol Suite Forouzan
  • 30. Solution – 1
    • Start with the <table> and </table> tags
      • <table>
      • </table>
    • Add <tr> tags between the boundaries noted above for each row.
      • <table>
      • <tr>
      • </tr>
      • <tr>
      • </tr>
      • <tr>
      • </tr>
      • <tr>
      • </tr>
      • </table>
  • 31. Solution – 2
    • Add <th> tags for the headings
      • <table>
      • <tr>
      • <th></th>
      • <th></th>
      • </tr>
      • <tr>
      • </tr>
      • <tr>
      • </tr>
      • <tr>
      • </tr>
      • </table>
  • 32. Solution – 3
    • Add <td> tags for the data
      • <table>
      • <tr>
      • <th></th>
      • <th></th>
      • </tr>
      • <td></td>
      • <td></td>
      • <tr>
      • <td></td>
      • <td></td>
      • </tr>
      • <tr>
      • <td></td>
      • <td></td>
      • </tr>
      • </table>
  • 33. Solution – 4
    • Add the element for each cell, including headers
      • <table>
      • <tr>
      • <th>Book Name</th>
      • <th>Author</th>
      • </tr>
      • <tr>
      • <td>Computer Networks</td>
      • <td>Tanenbaum</td>
      • </tr>
      • <tr>
      • <td>TCP/IP</td>
      • <td>Comer</td>
      • </tr>
      • <tr>
      • <td>TCP/IP Protocol Suite</td>
      • <td>Forouzan</td>
      • </tr>
      • </table>
  • 34. Exercises
    • How would add rows to this table?
    • How would add columns to this table?
  • 35. Solutions
    • Add one more <tr> and </tr> pair.
    • Add one more <th> and </th> pair.
  • 36. Table Example
    • HTML Code
    • <table border=&quot;1&quot;>
    • <tr>
    • <td>row 1, cell 1</td>
    • <td>row 1, cell 2</td>
    • </tr>
    • <tr>
    • <td>row 2, cell 1</td>
    • <td>row 2, cell 2</td>
    • </tr>
    • </table>
    • Output
    row 2, cell 2 row 2, cell 1 row 1, cell 2 row 1, cell 1
  • 37. Table Headings
    • HTML Code
    • <table border=&quot;1&quot;>
    • <tr>
    • <th>Heading</th>
    • <th>Another Heading</th>
    • </tr>
    • <tr>
    • <td>row 1, cell 1</td>
    • <td>row 1, cell 2</td>
    • </tr>
    • <tr>
    • <td>row 2, cell 1</td>
    • <td>row 2, cell 2</td>
    • </tr>
    • </table>
    • Output
    Another Heading Heading row 2, cell 2 row 2, cell 1 row 1, cell 2 row 1, cell 1
  • 38. Spanning Rows and Columns
    • Spanning means stretching a cell over multiple rows or columns
    • Example
    Publisher Book Name Author Computer Networks Tanenbaum Pearson TCP/IP Comer Modern Operating Systems Tanenbaum
  • 39. HTML Syntax for Spanning Used in <td> or <th> tags, indicates how many columns the cell should span. For example, colspan=3 spans three columns. Colspan=n Used in <td> or <th> tags, indicates how many rows the cell should span. For example, rowspan=3 spans three rows. Rowspan=n Use Attribute
  • 40. Exercise
    • Create the following HTML table
    Publisher Book Name Author Computer Networks Tanenbaum Pearson TCP/IP Comer Modern Operating Systems Tanenbaum
  • 41. Solution – 1
    • Start with the basic HTML table
      • <table>
      • <tr>
      • <th>Book Name</th>
      • <th>Author</th>
      • </tr>
      • <td>Computer Networks</td>
      • <td>Tanenbaum</td>
      • <tr>
      • <td>TCP/IP</td>
      • <td>Comer</td>
      • </tr>
      • <tr>
      • <td>TCP/IP Protocol Suite</td>
      • <td>Forouzan</td>
      • </tr>
      • </table>
  • 42. Solution – 2
    • Add a new column for the Publisher title and name: Output would be distorted at this stage
      • <table>
      • <tr>
      • <th>Publisher</th>
      • <th>Book Name</th>
      • <th>Author</th>
      • </tr>
      • <tr>
      • <td>Pearson</td>
      • <td>Computer Networks</td>
      • <td>Tanenbaum</td>
      • </tr>
      • <tr>
      • <td>TCP/IP</td>
      • <td>Comer</td>
      • </tr>
      • <tr>
      • <td>TCP/IP Protocol Suite</td>
      • <td>Forouzan</td>
      • </tr>
      • </table>
  • 43. Solution – 3
    • Add rowspan attribute to the <th> or <td> tag that we want to span across rows
      • <table>
      • <tr>
      • <th>Publisher</th>
      • <th>Book Name</th>
      • <th>Author</th>
      • </tr>
      • <tr>
      • <td rowspan=3>Pearson</td>
      • <td>Computer Networks</td>
      • <td>Tanenbaum</td>
      • </tr>
      • <tr>
      • <td>TCP/IP</td>
      • <td>Comer</td>
      • </tr>
      • <tr>
      • <td>TCP/IP Protocol Suite</td>
      • <td>Forouzan</td>
      • </tr>
      • </table>
  • 44. Exercise
    • Create the following table
    Organization Project Completion % FCIB 90% i-flex GCB 50% ADCB 95%
  • 45. Column Spanning
    • Create the following table structure
    Book Descriptive information Type Name Price Classification C++ 100 Language Ref Java 200 Language Web Tech 250 Concepts
  • 46. Solution – 1
      • Start with the following
      • <table>
      • <tr>
      • <th>Type</th>
      • <th>Name</th>
      • <th>Price</th>
      • <th>Classification</th>
      • </tr>
      • <tr>
      • <td rowspan=3>Ref</td>
      • <td>C++</td>
      • <td>100</td>
      • <td>Language</td>
      • </tr>
      • <tr>
      • <td>Java</td>
      • <td>200</td>
      • <td>Language</td>
      • </tr>
      • <tr>
      • <td>Web Tech</td>
      • <td>250</td>
      • <td>Concepts</td>
      • </tr>
      • </table>
  • 47. Solution – 2
      • Add a <TR> tag with <TH> for spanning
      • <table>
      • <tr>
      • <th>Book</th>
      • <th>Descriptive information</th>
      • </tr>
      • <tr>
      • <th>Type</th>
      • <th>Name</th>
      • <th>Price</th>
      • <th>Classification</th>
      • </tr>
      • <tr>
      • <td rowspan=3>Ref</td>
      • <td>C++</td>
      • <td>100</td>
      • <td>Language</td>
      • </tr>
      • <tr>
      • <td>Java</td>
      • <td>200</td>
      • <td>Language</td>
      • </tr>
      • <tr>
      • <td>Web Tech</td>
      • <td>250</td>
      • <td>Concepts</td>
      • </tr>
      • </table>
  • 48. Solution – 3
      • Add <colspan> attribute for spanning
      • <table>
      • <tr>
      • <th colspan=2>Book</th>
      • <th colspan=2>Descriptive information</th>
      • </tr>
      • <tr>
      • <th>Type</th>
      • <th>Name</th>
      • <th>Price</th>
      • <th>Classification</th>
      • </tr>
      • <tr>
      • <td rowspan=3>Ref</td>
      • <td>C++</td>
      • <td>100</td>
      • <td>Language</td>
      • </tr>
      • <tr>
      • <td>Java</td>
      • <td>200</td>
      • <td>Language</td>
      • </tr>
      • <tr>
      • <td>Web Tech</td>
      • <td>250</td>
      • <td>Concepts</td>
      • </tr>
      • </table>
  • 49. Table Colors, Alignment
    • <TABLE BGCOLOR = “…”> allows us to specify the background color
    • <TR ALIGN> allows specifying the text alignment
  • 50. Text Colors
  • 51. Setting Text Colors
    • Use the <TEXT = “Color”> tag
      • Example
        • <BODY TEXT = “BLUE”>
    • Use the <FONT> tag
      • Set font size, color, face (style)
      • Example
        • <FONT FACE = “Comical” SIZE = “+2” COLOR = “RED”> Look at this! </FONT>
  • 52. HTML Lists
  • 53. Lists
    • Two types
      • Unordered
        • List of items marked with bullets
        • Starts with <ul>, each item starts with <li>
      • Ordered
        • List of items marked with numbers
        • Starts with <ol>, each item starts with <li>
  • 54. Allowed “types” in Lists
    • Numbered lists
      • Type=“A” Number or letter with which the list should start; other options are a, I, i, or 1 (Default)
    • Bulleted lists
      • Type=“disc” Bullet type to be used; other options are square and circle
  • 55. Unordered List Example
      • HTML code
      • <ul>
      • <li>Coffee</li>
      • <li>Milk</li>
      • </ul>
      • Output
      • Coffee
      • Milk
  • 56. Another Unordered List Example
      • HTML code
      • <ul type=“square”>
      • <li>Coffee</li>
      • <li>Milk</li>
      • </ul>
      • Output
      • Coffee
      • Milk
  • 57. Ordered List Example
      • HTML code
      • <ol>
      • <li>Coffee</li>
      • <li>Milk</li>
      • </ol>
      • Output
      • Coffee
      • Milk
  • 58. Another Ordered List Example
      • HTML code
      • <ol type=“A”>
      • <li>Coffee</li>
      • <li>Milk</li>
      • </ol>
      • Output
      • Coffee
      • Milk
  • 59. Nested List Example
      • HTML code
      • <html>
      • <body>
      • <h4>A nested List:</h4>
      • <ul>
      • <li>Coffee</li>
      • <li>Tea
      • <ul>
      • <li>Black tea</li>
      • <li>Green tea</li>
      • </ul>
      • </li>
      • <li>Milk</li>
      • </ul>
      • </body>
      • </html>
  • 60. Output of Nested List Example
    • Coffee
    • Tea
      • Black tea
      • Green tea
    • Milk
  • 61. HTML Forms
  • 62. Forms
    • Form is an area containing form elements
    • A form element allows user to enter information
      • Text fields
      • Drop-down buttons
      • Radio buttons
      • Checkboxes
    • <form> and </form> tags are used
  • 63. <input> tag
    • Most commonly used form element
    • Type of input is specified with the type attribute
    • Concept
      • <form>
      • <input type=“text” …>
      • </form>
  • 64. Input field tag and attributes Default selection when form is initially displayed or reloaded Selected Maximum input size for text fields Maxlength=“n” Sets visible size for text inputs Size=“n” Provide default values Value=“…” Processes form results Name=“…” Text, Password, Checkbox, Radio, File, Hidden, Image, Submit, Reset Type=“…” Sets an area in a form for user input <input> Use Tag/Attribute
  • 65. Forms Example – Textboxes
    • <form>
    • First name:
    • <input type=&quot;text&quot; name=&quot;firstname&quot;>
    • <br>
    • Last name:
    • <input type=&quot;text&quot; name=&quot;lastname&quot;>
    • </form>
    • Output:
    • First name:
    • Last name:
  • 66. Forms Example – Radio Buttons
    • <form>
    • <input type=&quot;radio&quot; name=“fruit&quot; value=“apple&quot;> Apple
    • <br>
    • <input type=&quot;radio&quot; name=“fruit&quot; value=“orange&quot;> Orange
    • </form>
    • Output:
    • Apple
    • Orange
  • 67. Forms Example – Checkboxes
    • <form>
    • <input type=&quot;checkbox&quot; name=“vehicle“ value=“bike”>
    • I have a bike
    • <br>
    • <input type=&quot;checkbox&quot; name=“vehicle“ value=“car”>
    • I have a car
    • </form>
    • Output:
    • I have a bike
    • I have a car
  • 68. Forms Example – Submit Buttons
    • <form name=&quot;input&quot; action=&quot;html_form_action.asp“ method=&quot;get&quot;>
    • Username: <input type=&quot;text&quot; name=&quot;user&quot;>
    • <input type=&quot;submit&quot; value=&quot;Submit&quot;>
    • </form>
    • Output:
    • Username:
    Submit
  • 69. Forms Example – Dropdown Boxes
    • <form>
    • <select name=&quot;cars&quot;>
    • <option value=&quot;volvo&quot;>Volvo
    • <option value=&quot;saab&quot;>Saab
    • <option value=&quot;fiat&quot;>Fiat
    • <option value=&quot;audi&quot;>Audi
    • </select>
    • </form>
    • Output:
    • A dropdown box showing these four car names
  • 70. Exercise
    • Create the following form with guidelines as specified below.
      • Fields in the form should be first name, last name, email, address, city, state, pin, and country
      • All text fields except City should have display length of 40 and maximum length of 50
      • City should have display length of 20 and maximum length of 40
      • State should have the following set of values to choose from: AP, Bi, Ma, MP, TN
  • 71. Solution
    • <html>
    • <body>
    • <title> Forms Example </title>
    • <form>
    • <input type=&quot;text&quot; name=&quot;firstname&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>First Name<br>
    • <input type=&quot;text&quot; name=&quot;lastname&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>Last Name<br>
    • <input type=&quot;text&quot; name=&quot;email&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>Email Address<br>
    • <input type=&quot;text&quot; name=&quot;address&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>Postal Address<br>
    • <input type=&quot;text&quot; name=&quot;city&quot; size=&quot;20&quot; maxlength=&quot;40&quot;>City
    • <select name=&quot;state&quot;>
    • <option value=&quot;ap&quot;>AP
    • <option value=&quot;bi&quot;>Bi
    • <option value=&quot;ma&quot;>MH
    • <option value=&quot;mp&quot;>MP
    • <option value=&quot;mp&quot;>TN
    • </select>
    • State
    • <input type=&quot;text&quot; name=&quot;pin&quot; size=&quot;10&quot; maxlength=&quot;15&quot;>Pin code<br>
    • <input type=&quot;text&quot; name=&quot;country&quot; size=&quot;40&quot; maxlength=&quot;50&quot;>Country<br>
    • </body>
    • </html>
  • 72. Text areas
    • Used for multi-line inputs
    • Example:
    • <textarea name=“comments” rows=“5” cols=“40”> Please provide comments</textarea>
    Number of visible rows Cols=“n” Number of visible rows Rows=“n” Name for the text area Name=“…” Area for multi-line user input <textarea> Use Tag/Attribute
  • 73. Formatting Forms
    • <html>
    • <head>
    • <title>Formatted Form Example</title>
    • </head>
    • <body>
    • <form action=&quot;donothing.jsp&quot; metod=&quot;POST&quot;>
    • <table border=&quot;2&quot;>
    • <tr>
    • <th>Choose your payment mechanism:</th>
    • <td>
    • <select name=&quot;paymentmode&quot;>
    • <option value=&quot;creditcard&quot;>Credit Card</option>
    • <option value=&quot;debitcard&quot;>Debit Card</option>
    • </select>
    • </td>
    • </tr>
    • <tr>
    • <th align=&quot;left&quot;>Type:</th>
    • <td>
    • <input type=&quot;radio&quot; name=&quot;cardtype&quot; value=&quot;visa&quot;>Visa
    • <br>
    • <input type=&quot;radio&quot; name=&quot;cardtype&quot; value=&quot;master&quot;>Master
    • <br>
    • <input type=&quot;radio&quot; name=&quot;cardtype&quot; value=&quot;other&quot;>Other
    • </td>
    • </tr>
    • </table>
    • </form>
    • </body>
    • </html>
  • 74. Images
  • 75. Images
    • The <img> tag is used
    • The <src> tag specifies the URL of the image we want to display
    • Syntax
      • <img src=&quot;url&quot;>
    • The ‘alt’ attribute is used to define alternate text for an image, in case the image is not found
      • e.g. <img src=&quot;boat.gif&quot; alt=&quot;Big Boat&quot;>
  • 76. Image Example
    • <html>
    • <body>
    • <h3>Image Example</h3>
    • <img src=&quot;crypto.jpg&quot;>
    • </body>
    • </html>
  • 77. Sizing Images
    • We can set the width and height of images in pixels
    • Example:
      • <img src=“crypto.jpg” width=“800” height=“400”>
  • 78. Adding Background Images
    • <html>
    • <body background=&quot;background.jpg&quot;>
    • <h3>Look: A background image!</h3>
    • <p>Both gif and jpg files can be used as HTML backgrounds.</p>
    • <p>If the image is smaller than the page, the image will repeat itself.</p>
    • </body>
    • </html>
  • 79. Stylesheets
  • 80. Formatting Nightmares
    • The original HTML was never intended to contain tags for formatting a document
    • HTML tags were intended to define the content of the document like:
      • <p>This is a paragraph</p>
      • <ul>This is an unordered list</ul>
    • When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare
    • A long, expensive and unduly painful process!
  • 81. Enter HTML 4.0
    • All formatting can be moved out of the HTML document and into a separate style sheet
    • Separation of the presentation of the document from its structure
    • Total control of presentation layout without messing up the document content
  • 82. One css, Many html documents Corporate.css Document1.html Document2.html Document3.html Document4.html
  • 83. Styles
    • When a browser comes across a style sheet, it formats the document according to it
    • Three ways
      • External style sheet
      • Internal style sheet
      • Inline style sheet
  • 84. External Style Sheet
    • Ideal when the style is applied to many pages
    • With an external style sheet, you can change the look of an entire Web site by changing one file
    • Two methods to use such a style sheet
      • Each page must link to the style sheet using the <link> tag
        • The <link> tag goes inside the head section
      • Use the @import directive
  • 85. External Style Sheet Example: Using link
    • Allows different style sheets to be used with one HTML (e.g. view.css, print.css)
    • One of these would be used, depending on the requirement
    • <head>
    • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
    • href=“view.css&quot;> <!-- (OR “print.css”) -->
    • </head>
  • 86. External Style Sheet Example: Using import
    • Multiple style sheets, each one having a separate function (e.g. one for organization, one for department, …)
    • <HEAD>
    • <STYLE>
    • @import url (“red.css”)
    • @import url (“green.css”)
    • </STYLE>
  • 87. Internal Style Sheet
    • Should be used when a single document has a unique style
    • You define internal styles in the head section with the <style> tag
  • 88. Internal Style Sheet Example
    • <head>
    • <style type=&quot;text/css&quot;>
    • body {background-color: red}
    • p {margin-left: 20px}
    • </style>
    • </head>
  • 89. Inline Style Sheet
    • Should be used when a unique style is to be applied to a single occurrence of an element
    • To use inline styles you use the style attribute in the relevant tag
    • The style attribute can contain any CSS property
  • 90. Inline Style Sheet Example
    • <p style=&quot;color: red; margin-left: 20px&quot;>
    • This is a paragraph
    • </p>
  • 91. HTML Head
    • The head element contains general information, also called meta-information, about a document
    • Meta means &quot;information about&quot;
    • Meta-information means information about information
    • Elements inside the Head element are not displayed by the browser
    • According to the HTML standard, only a few tags are legal inside the head section: <base>, <link>, <meta>, <title>, <style>, and <script>
  • 92. HTML URLs
    • Uniform Resource Locator (URL) is used to address a document (or other data) on the World Wide Web
    • scheme://host.domain:port/path/filename
      • Scheme : Type of Internet service. The most common type is http .
      • Domain : The Internet domain name, e.g. yahoo.com.
      • Host : The domain host (default is www)
      • :Port : The port number at the host (Default 80)
      • Path : Path (a sub directory) on the server
      • Filename : The name of the document
  • 93. HTML URL Examples
    • Email
      • <a href=&quot;mailto:someone@xyz.com&quot;>someone@xyz.com</a>
  • 94. JavaScript: Introduction
  • 95. HTML Scripts
    • Scripts make static HTML pages interactive
    • <script> tag is used
    • Browsers are programmed to interpret scripts
  • 96. Script Example
    • <html>
    • <head>
    • </head>
    • <body>
    • <script type=&quot;text/javascript&quot;>
    • document.write(&quot;Hello World!&quot;)
    • </script>
    • </body>
    • </html>
    • Output :
    • Hello World!
  • 97. Handling Old Browsers
    • Old browsers that cannot interpret scripts will display the scripting code on the screen!
    • To prevent this, we can comment out the scripting code
      • Old browsers would ignore scripts
      • Newer browsers would interpret and execute the scripts, as expected
      • See next slide
  • 98. Handling Old Browsers – Code
    • JavaScript:
      • <script type=&quot;text/javascript&quot;>
      • <!-- document.write(&quot;Hello World!&quot;) //-->
      • </script>
    • VBScript:
      • <script type=&quot;text/vbscript&quot;>
      • <!-- document.write(&quot;Hello World!&quot;) '-->
      • </script>
  • 99. Thank you! Questions and Comments Welcome!