1. Home
  2. Flashcards
  3. Preview

HTML

  1. DOCTYPE Declaration for HTML 5
    <!DOCTYPE html>
  2. DOCTYPE Declaration for HTML 4.01
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  3. HTML Page Structure
    • <!DOCTYPE html>
    • <html>
    • <head></head>
    • <body></body>
    • </html>
  4. This tag defines a title in the browser toolbar, provides a title for the page when it is added to favorites, and displays a title for the page in search-engine results:
    • <head>
    • <title></title>
    • </head>
  5. This tag specifies the base URL/target for all relative URLs in a page:
    • <head>
    • <base />
    • </head>
  6. This tag defines the relationship between a document and an external resource:
    • <head>
    • <link />
    • </head>
  7. This tag is used to define style information for an HTML document:
    <style></style>
  8. This tag is used to provide metadata about the HTML document:
    • <head>
    • <meta />
    • </head>
  9. This tag is used to define a client-side script, such as JavaScript:
    <script></script>
  10. These elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata:
    meta elements
  11. HTML link syntax with target attribute
    <a href="url"target="_blank"></a>
  12. Create a bookmark and link to that bookmark inside an HTML document.
    • <a id="info">Information</a>
    • <a href="#info">For further information</a>
  13. This element is the container for all the head elements.
    <head></head>
  14. CSS can be added to HTML in the following ways:
    • Inline - using the style attribute in HTML elements
    • Internal - using the <style> element in the <head> section
    • External - using an external CSS file
  15. Inline style example
    <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
  16. Internal style sheet example
    • <head>
    • <style type="text/css"> 
    • body {background-color:yellow;} 
    • p {color:blue;} 
    • </style> 
    • </head>
  17. External style sheet example
    • <head> 
    • <link rel="stylesheet" type="text/css" href="mystyle.css"/> 
    • </head>
  18. Syntax for defining an image:
    <img src="url" alt="some_text"/>
  19. Image definition with alt, height, and width defined
    <img src="smiley.gif" alt="Smiley face" width="32" height="32"/>
  20. Table example with border and header attributes
    • <table border="1"> 
    •     <tr> 
    •         <th>Header 1</th> 
    •         <th>Header 2</th> 
    •     </tr> 
    •     <tr> 
    •         <td>row 1, cell 1</td> 
    •         <td>row 1, cell 2</td> 
    •     </tr>  
    • </table>
  21. Unordered List Example
    • <ul> 
    •     <li>Coffee</li> 
    •     <li>Milk</li> 
    • </ul>
  22. Ordered List Example
    • <ol> 
    •     <li>Coffee</li> 
    •     <li>Milk</li> 
    • </ol>
  23. Description List Example
    • <dl> 
    •     <dt>Coffee</dt> 
    •         <dd>- black hot drink</dd> 
    •     <dt>Milk</dt> 
    •         <dd>- white cold drink</dd> 
    • </dl>
  24. This list tag defines an ordered list:
    <ol></ol>
  25. This list tag defines an unordered list:
    <ul></ul>
  26. This list tag defines a list item in an ordered or unordered list:
    <li></li>
  27. This list tag defines a description list:
    <dl></dl>
  28. This list tag defines a term/name in a description list:
    <dt></dt>
  29. This list tag defines a description of a term/name in a description list:
    <dd></dd>
  30. This type of element normally starts (and ends) with a new line when displayed in a browser.
    Block element
  31. This type of element is normally displayed without starting a new line.
    Inline element
  32. This block level element can be used as a container for grouping other HTML elements.
    <div></div>
  33. This inline element can be used as a container for text.
    <span></span>
  34. For what are HTML forms used?
    To pass data to a server
  35. Form element syntax
    • <form> 
    • . 
    • input elements 
    • . 
    • </form>
  36. Text field example
    • <form> 
    •     First name: <input type="text" name="firstname"/><br/> 
    •     Last name: <input type="text" name="lastname"/> 
    • </form>
  37. Password field example
    • <form> 
    •     Password: <input type="password" name="pwd"/> 
    • </form>
  38. Radio button example
    • <form> 
    •     <input type="radio" name="sex" value="male"/>Male<br> 
    •     <input type="radio" name="sex" value="female"/>Female 
    • </form>
  39. Checkbox example
    • <form> 
    •     <input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br> 
    •     <input type="checkbox" name="vehicle" value="Car"/>I have a car
    • </form>
  40. Submit button example
    • <form name="input" action="html_form_action.asp" method="get"> 
    •     Username: <input type="text" name="user"/> 
    •     <input type="submit" value="Submit"/> 
    • </form>
  41. Drop-down list example
    • <form action="">
    •     <select name="cars">
    •         <option value="volvo">Volvo</option>
    •         <option value="saab">Saab</option>
    •     </select>
    • </form>
  42. Drop-down list with pre-selected value example
    • <form action="">
    •     <select name="cars">
    •         <option value="volvo">Volvo</option>
    •         <option value="saab" selected>Saab</option>
    •     </select>
    • </form>
  43. Textarea example
    • <textarea rows="10" cols="30">
    •     The cat was playing in the garden.
    • </textarea>
  44. Button example
    • <form action="">
    •     <input type="button" value="Hello world!"/>
    • </form>
  45. Create a border around elements in a form.
    • <form action="">
    •     <fieldset>
    •         <legend>Personal information:</legend>
    •         Name:<input type="text" size="30"/><br>
    •         E-mail: <input type="text" size="30"/><br>
    •         Date of birth: <input type="text" size="10"/>
    •     </fieldset>
    • </form>
  46. Send e-mail from a form.
    • <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
    •     Name:<br>
    •     <input type="text" name="name" value="your name"/><br>
    •     <input type="submit" value="Send"/>
    •     <input type="reset" value="Reset"/>
    • </form>
  47. Syntax for adding an iframe
    <iframe src="url"></iframe>
  48. Iframe - Set Height and Width
    <iframe src="demo_iframe.htm" width="200"height="200"></iframe>
  49. Iframe - Remove the Border
    <iframe src="demo_iframe.htm" frameborder="0"></iframe>
  50. Use iframe as a Target for a Link
    • <iframe src="demo_iframe.htm" name="iframe_a"></iframe> 
    • <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
  51. This tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripting.
    <noscript></noscript>
  52. With what must reserved characters in HTML be replaced?
    Character entities
  53. URL Structure
    scheme://host.domain:port/path/filename
  54. URLs can only be sent over the Internet using:
    The ASCII character-set
  55. Table with caption example:
    • <table border="1">
    •     <caption>Monthly Savings</caption>
    •     <tr>
    •         <th>Month</th>
    •         <th>Savings</th>
    •     </tr>
    •     <tr>
    •         <td>January</td>
    •         <td>$100</td>
    •     </tr>
    • </table>
  56. Javascript example:
    • <script>
    •     document.write("Hello World!")
    • </script>
  57. Image map example:
    <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

    • <map name="planetmap">
    •     <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"/>
    • </map>
  58. Table cells that span more than one row:
    • <table border="1">
    •     <tr>
    •         <th>First Name:</th> 
    •         <td>Bill Gates</td>
    •     </tr>
    •     <tr>
    •         <th rowspan="2">Telephone:</th>
    •         <td>555 77 854</td>
    •     </tr>
    •     <tr>
    •         <td>555 77 855</td>
    •     </tr>
    • </table>
  59. Table cells that span more than one column:
    • <table border="1">
    •     <tr> 
    •         <th>Name</th>
    •         <th colspan="2">Telephone</th>
    •     </tr>
    •     <tr>
    •         <td>Bill Gates</td>
    •         <td>555 77 854</td>
    •         <td>555 77 855</td>
    •     </tr>
    • </table>
  60. Create more white space between the cell content and its borders in a table using:
    • The cellpadding attribute.
    •     <table border="1" cellpadding="10">
  61. Increase the distance between the cells in a table using:
    • The cellspacing attribute.
    •     <table border="1" cellspacing="10">
  62. Different types of unordered lists:
    • <ul>
    • <ul style="list-style-type:disc">
    • <ul style="list-style-type:circle">
    • <ul style="list-style-type:square">
  63. Different types of ordered lists:
    • <ol>
    • <ol type="A">
    • <ol type="a">
    • <ol type="I">
    • <ol type="i">
  64. A nested List:
    • <ul>
    •     <li>Coffee</li>
    •     <li>Tea
    •         <ul>
    •             <li>Black tea</li>
    •             <li>Green tea</li>
    •         </ul>
    •     </li>
    •     <li>Milk</li>
    • </ul>
Author
Kabukiman
ID
242364
Card Set
HTML
Description
HTML Study Guide
Updated

  1. Home
  2. Flashcards
  3. Preview