SlideShare a Scribd company logo

HTML Foundations, pt 2

•
•
Shawn Calvert
Shawn Calvert

The document provides an overview of HTML elements and tags. It discusses the anatomy of elements, including tags, content, and attributes. Common block elements (like <p> and <div>) and inline elements (like <img> and <a>) are described. The document also covers important tags like <a> for links, <table> for tables, and <form> for forms. It explains how to properly structure these elements and includes examples of proper syntax and usage. Key concepts covered include relative vs. absolute links, the <index> file, using colspan to span table columns, and required form attributes like "action" and "name".

Related slideshows

Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
HTML Email
HTML EmailHTML Email
HTML Email
 
1 of 97
Download to read offline
HTML Foundations, pt 2 22-3375 Web Design I // Columbia College Chicago
Review
Anatomy of an Element 
 <tag>Content</tag> An HTML element includes both
 the HTML tag and everything between 
 the tag (the content).

Anatomy of an Element 
 <tag>Content</tag>
 The element tag gives the 
 content structure and meaning.

Anatomy of an Element 
 <tag>Content</tag>
 Tags normally come in pairs. The first tag is the start tag, and the second
 tag is the end tag. 

Anatomy of an Element 
 <h1>Main Headline</h1>
 HTML has a defined set of tag 
 names (also called keywords) that 
 the browser understands.

The essential element tags so far
 Primary
 Structure Head 
 Elements Body
 Elements html title p head meta br body h1 – h6 ul ol a img
Anatomy of an Element 
 <html lang=”en”></html>
 Most elements can have attributes,
 which provides additional informatin
 about the element. 

Anatomy of an Element 
 <div class=”left-nav”></div>
 Attributes always follow the same
 format: name=”value”. You can use 
 either single or double quotes. 

The essential attributes so far
 html 
 <html lang=”en”></html> meta 
 <meta charset=”utf-8”> link 
 <link rel=”stylesheet” type-”text/css” href=”stylesheet/styles.css”> img 
 <img src=”images/image.jpg” alt=”Sam”> a
 <a href=”http://colum.edu”>My school</a>
HTML Foundations, pt 2
HTML Foundations, pt 2
Properties
 What are properties? While attributes provide additional information about a specific element’s content, every element type has a set of default properties that define how that element will be shown in the browser.
Properties
 Element Properties human name=”Liam”
 gender=”male”
 age=”5” ! !
Block and Inline elements One important default style applied to elements is whether they are block or inline. This is called their display property (we will talk about properties when we get to CSS). A block element takes up the full width available to the element, and forces a line above and below. Examples include <p>, <div>, <ul>, <blockquote> and all headers. 
 another element block element another element another element
Block and Inline elements A inline element can be inserted within block elements or other inline elements and do no create additional space or line breaks. Examples include <img>, <em>, <strong>, <a>, and <span>. 
 <p> <p></p> <p></p> <a></a> </p>
Class Exercise ! Open ‘elements.html’ in bbedit and create tags around the unstructured text.
Tags: Anchors (linking)
<a></a>
 The <a> element is an inline 
 tag that works anywhere in the 
 body to create a hyperlink.
EXAMPLE
 <a href="aboutme.html">About Me</a>
 <a href="http://www.colum.edu">My school</a>
 <a> tags are always used in pairs, wrapping the content you want to activate as a link. If you use an absolute URL, it must start with “http://”.
Relative vs Absolute links Whenever you link to a file with an ‘href‘ (hypertext reference ) or ‘src’ (source) attribute, you are providing the browser and address to the resource. That address can be relative or absolute.
 root directory (www.mysite.com) index.html images logo.png report.pdf stylesheet.css !
Relative vs Absolute links A relative link is relative to the resource’s location in its directory. It is like saying “the restaurant is 2 blocks away.”
 In the example below, if ‘logo.png‘ were linked from the homepage (index.html), the tag would be: <img src=”images/logo.png”>
 root directory (www.mysite.com) index.html images logo.png report.pdf stylesheet.css
Relative vs Absolute links An absolute link is the full address to the resource’s location in the entire web. It is like saying “the restaurant is at 222 West Grand, Chicago IL 60625.” <img src=”http://www.mysite.com/images/logo.png”>
 root directory (www.mysite.com) index.html images logo.png report.pdf stylesheet.css
Directories
HTML Foundations, pt 2
Room 902
 <a href=” ”>
Room 901
 Room 902
 Room 903
 9th Floor
 9th Floor/Room 902/
Room 901
 Room 902
 Room 903
 9th Floor
 ../Room 902/ Two dots in front of a forward slash means: 
 “step up one directory.” In this example it says: 
 “step out of room 903 and then back into room 902, talk to “
Room 901
 Room 902
 Room 903
 +
 8th Floor
 9th Floor
 10th Floor
 +
 +
 Mich Ave
 Campus
 Wabash
 Campus
 Book & Paper Center
 +
 +
 University
 of IL
 Columbia
 College
 SAAIC
 +

Relative link to root A relative link (does not start with “http://”) with a slash at the beginning forces the link to start at the root of the website. This will only work on the server, not when you are working locally. /Columbia College/Wabash Campus/9th Floor/Room 902/
 Absolute links Absolute links are typically used for linking to pages or files outside of your site’s directories. http://Columbia College/Wabash Campus/9th Floor/Room 902/

The index file When an absolute link is directed to a folder, the browser needs to know which file to open. By default, it looks for a file named “index” (the extension is not important, usually is it index.html, or index.php). This is why the homepage is always named “index”. So, <a href=”http://www.mysite.com/”> and 
 <a href=”http://www.mysite.com/index.html”> will open the same file.
 root directory (www.mysite.com) index.html images logo.png
Class Exercise ! Open the folder 
 ‘linking exercise” for a tutorial
Tables
What are tables? Tables are html elements that are used for presenting rows and columns of tabular data. Tables are always created using three or more nested tags (at a minimum: table, tr, td) For many years, designers used tables for layout, which is now done with CSS, except in certain scenarios (mainly for html emails).
table thead tfoot tbody tr th td 

<table></table>
 The <table> tag defines and
 encloses the entire HTML table.

<thead></thead>
 The <thead> tag is used to group 
 header content in an HTML table.

<tfoot></tfoot>
 The <tfoot> tag is used to group 
 footer content in an HTML table.

<tbody></tbody>
 The <tbody> tag is used to group 
 the body content in an HTML table.

<tr></tr>
 The <tr> tag defines 
 a row in an HTML table.

<th></th>
 <td></td>
 These tags are the actual data cells:
 “table header” and “table data”. Use <th> if the cell is inside <thead> tags.
EXAMPLE
 from www.w3schools.com
<th colspan=”2”></th>
 <td colspan=”2”></td>
 If your td or th element needs to 
 span over another column, use the
 colspan attribute.
EXAMPLE
 Every <tr> element in a table must contain the same number of cells, unless a ‘colspan’ element is used. In the example above, the first row has a cell that is using colspan=”2” to make a single cell take the space of two cells.
EXAMPLE
 Every table must have table, tr and td (or th) tags. Marking up the header and body is good practice, but not essential.
Class Exercise ! Open ‘table-exercises.html’ in bbedit and create two tables from the un-marked-up content.
Forms
HTML Foundations, pt 2
What is a form? HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors on your site.
HTML Foundations, pt 2
HTML Foundations, pt 2
How do HTML forms work? HTML form elements provide temporary storage for the information the user enters into the form. When the user clicks “submit,” the values are collected and sent to a server. The server processes the form data and sends back a new page (a response). form
 server

Form Types
There are three basic types 
 of form controls, for: Adding Text Making Choices Submitting Forms Uploading Files 

Adding Text 
 Text Input
 Password Input
 Text Area

Making Choices 
 Radio Buttons
 Checkboxes
 Drop-downs

Submitting Forms 
 Submit Buttons
 Image Buttons
 Buttons

Uploading Files 
 File Upload

Form Syntax
<form></form>
 The <form> tag is used to create an HTML form for user input.

<form action=”http://www.mysite.com/ process.php”> </form>
 The <form> tag contains the attributes that tell the browser how to handle the data when user hits ‘submit’. The essential, won’t-work-without-it, attribute is “action”. This is server address where the browser will send the data. 

<form> <input> </form>
 <input> elements are used within a <form> element to declare input controls that allow users to input data. <input> is an inline, self-closing tag. An input field can vary in many ways, depending on the type attribute.

<form> <input type=”text” name=”username”> </form>
 The <input> tag should always have, at a minimum, a type and name attribute. The “type” attribute controls the form type (text, radio, dropdown, etc), and the “name” attribute is how you identify the data when it is sent to the server.

Input Attributes: type
 You create the different type of form elements through the “type” attribute. These include: 
 text, password, radio, checkbox, select, file, submit, image, and hidden.
Input Attributes: type
 For example: <input type=”text”> would create this:
Input Attributes: name
 You then need to add a name so the data can be identified by the server: <input type=”text” name=”username”> !
Input Attributes: name
 The data that is sent to the server is sent as a “name/value pair”. For example, if the user entered “Sarah” into the text box: <input type=”text” name=”username”> The server would receive: username=”Sarah” !
Class Exercise ! 
 Create a form for our tutorial: Text input (name) Dropdown (favorite color) Radio (human or robot) Text area (comment) Submit
Adding Text: Examples 
 Text Input

Adding Text: Examples 
 Text Input
 You can add additional attributes to your text inputs to control their width (size, in characters), and maxlength (in characthers). You can also control the width of the input field in your css (in pixels, % or ems).
Adding Text: Examples 
 Text Area
 Text areas are a bit different: they are not contained in an <input> tag, and they require a closing tag (<textarea></textarea>.
Making Choices: Checkboxes 
 Checkboxes
 With checkboxes and radio buttons, the “name” attribute creates the grouping between the options. The “value” attribute tells the server which option the user selected. add a “checked” value if you want an option to be preselected.
Making Choices: Radio Buttons 
 Radio Buttons
 Use a radio button when the user can only select one option. Like checkboxes, add a “checked” value if you want an option to be preselected.
Making Choices: Dropdowns 
 Drop-downs
 Dropdowns are made up of two opening and closing tags: <select> and <option>. Whatever option appears at the top is the default, unless you add a “selected=”selected” attribute to the option tag.
Uploading Files 
 File Upload

Submitting Forms: Submit 
 Submit
 A simple <input type=”submit”> is the easiest way to add a submit button to your form. You can hook onto this element in css by using the pseudo selector input[type=submit].
Submitting Forms: Image 
 Image
 <input type=”image”> allows you to replace the standard submit button with an image of a submit button. This method is not recommended.
Submitting Forms: Button 
 Button
 Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
EXAMPLE

Form Labels
<form> Your Name<br>
 <input type=”text” name=”name”><br> Your Email<br>
 <input type=”text” name=”email”><br> <input type=”submit”> </form>
 There are a few ways to add labels to your form elements. The simplest way is to just add unmarked up text with <br> elements.

<label for=”name”>
 Your Name
 <label><br> <input type=”text” name=”name” id=”name”> Another way is to use the “label” element. It can wrap both the label and input, or stand outside of the input. You can style the label element in css. If you use this method, you should add a “for” attribute to the label that matches the id of the form element (not required, but good for accessibility reasons).

<label> Your Name<br>
 <input type=”text” name=”name”> <label> You can also wrap the entire element in the label tag. Both used of the label tag give your radio and checkboxes the added feature of making the entire field clickable.

Form Design
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2
HTML Foundations, pt 2

More Related Content

HTML Foundations, pt 2

  • 1. HTML Foundations, pt 2 22-3375 Web Design I // Columbia College Chicago
  • 3. Anatomy of an Element 
 <tag>Content</tag> An HTML element includes both
 the HTML tag and everything between 
 the tag (the content).

  • 4. Anatomy of an Element 
 <tag>Content</tag>
 The element tag gives the 
 content structure and meaning.

  • 5. Anatomy of an Element 
 <tag>Content</tag>
 Tags normally come in pairs. The first tag is the start tag, and the second
 tag is the end tag. 

  • 6. Anatomy of an Element 
 <h1>Main Headline</h1>
 HTML has a defined set of tag 
 names (also called keywords) that 
 the browser understands.

  • 7. The essential element tags so far
 Primary
 Structure Head 
 Elements Body
 Elements html title p head meta br body h1 – h6 ul ol a img
  • 8. Anatomy of an Element 
 <html lang=”en”></html>
 Most elements can have attributes,
 which provides additional informatin
 about the element. 

  • 9. Anatomy of an Element 
 <div class=”left-nav”></div>
 Attributes always follow the same
 format: name=”value”. You can use 
 either single or double quotes. 

  • 10. The essential attributes so far
 html 
 <html lang=”en”></html> meta 
 <meta charset=”utf-8”> link 
 <link rel=”stylesheet” type-”text/css” href=”stylesheet/styles.css”> img 
 <img src=”images/image.jpg” alt=”Sam”> a
 <a href=”http://colum.edu”>My school</a>
  • 13. Properties
 What are properties? While attributes provide additional information about a specific element’s content, every element type has a set of default properties that define how that element will be shown in the browser.
  • 15. Block and Inline elements One important default style applied to elements is whether they are block or inline. This is called their display property (we will talk about properties when we get to CSS). A block element takes up the full width available to the element, and forces a line above and below. Examples include <p>, <div>, <ul>, <blockquote> and all headers. 
 another element block element another element another element
  • 16. Block and Inline elements A inline element can be inserted within block elements or other inline elements and do no create additional space or line breaks. Examples include <img>, <em>, <strong>, <a>, and <span>. 
 <p> <p></p> <p></p> <a></a> </p>
  • 17. Class Exercise ! Open ‘elements.html’ in bbedit and create tags around the unstructured text.
  • 19. <a></a>
 The <a> element is an inline 
 tag that works anywhere in the 
 body to create a hyperlink.
  • 20. EXAMPLE
 <a href="aboutme.html">About Me</a>
 <a href="http://www.colum.edu">My school</a>
 <a> tags are always used in pairs, wrapping the content you want to activate as a link. If you use an absolute URL, it must start with “http://”.
  • 21. Relative vs Absolute links Whenever you link to a file with an ‘href‘ (hypertext reference ) or ‘src’ (source) attribute, you are providing the browser and address to the resource. That address can be relative or absolute.
 root directory (www.mysite.com) index.html images logo.png report.pdf stylesheet.css !
  • 22. Relative vs Absolute links A relative link is relative to the resource’s location in its directory. It is like saying “the restaurant is 2 blocks away.”
 In the example below, if ‘logo.png‘ were linked from the homepage (index.html), the tag would be: <img src=”images/logo.png”>
 root directory (www.mysite.com) index.html images logo.png report.pdf stylesheet.css
  • 23. Relative vs Absolute links An absolute link is the full address to the resource’s location in the entire web. It is like saying “the restaurant is at 222 West Grand, Chicago IL 60625.” <img src=”http://www.mysite.com/images/logo.png”>
 root directory (www.mysite.com) index.html images logo.png report.pdf stylesheet.css
  • 27. Room 901
 Room 902
 Room 903
 9th Floor
 9th Floor/Room 902/
  • 28. Room 901
 Room 902
 Room 903
 9th Floor
 ../Room 902/ Two dots in front of a forward slash means: 
 “step up one directory.” In this example it says: 
 “step out of room 903 and then back into room 902, talk to “
  • 29. Room 901
 Room 902
 Room 903
 +
 8th Floor
 9th Floor
 10th Floor
 +
 +
 Mich Ave
 Campus
 Wabash
 Campus
 Book & Paper Center
 +
 +
 University
 of IL
 Columbia
 College
 SAAIC
 +

  • 30. Relative link to root A relative link (does not start with “http://”) with a slash at the beginning forces the link to start at the root of the website. This will only work on the server, not when you are working locally. /Columbia College/Wabash Campus/9th Floor/Room 902/
 Absolute links Absolute links are typically used for linking to pages or files outside of your site’s directories. http://Columbia College/Wabash Campus/9th Floor/Room 902/

  • 31. The index file When an absolute link is directed to a folder, the browser needs to know which file to open. By default, it looks for a file named “index” (the extension is not important, usually is it index.html, or index.php). This is why the homepage is always named “index”. So, <a href=”http://www.mysite.com/”> and 
 <a href=”http://www.mysite.com/index.html”> will open the same file.
 root directory (www.mysite.com) index.html images logo.png
  • 32. Class Exercise ! Open the folder 
 ‘linking exercise” for a tutorial
  • 34. What are tables? Tables are html elements that are used for presenting rows and columns of tabular data. Tables are always created using three or more nested tags (at a minimum: table, tr, td) For many years, designers used tables for layout, which is now done with CSS, except in certain scenarios (mainly for html emails).
  • 36. <table></table>
 The <table> tag defines and
 encloses the entire HTML table.

  • 37. <thead></thead>
 The <thead> tag is used to group 
 header content in an HTML table.

  • 38. <tfoot></tfoot>
 The <tfoot> tag is used to group 
 footer content in an HTML table.

  • 39. <tbody></tbody>
 The <tbody> tag is used to group 
 the body content in an HTML table.

  • 40. <tr></tr>
 The <tr> tag defines 
 a row in an HTML table.

  • 41. <th></th>
 <td></td>
 These tags are the actual data cells:
 “table header” and “table data”. Use <th> if the cell is inside <thead> tags.
  • 43. <th colspan=”2”></th>
 <td colspan=”2”></td>
 If your td or th element needs to 
 span over another column, use the
 colspan attribute.
  • 44. EXAMPLE
 Every <tr> element in a table must contain the same number of cells, unless a ‘colspan’ element is used. In the example above, the first row has a cell that is using colspan=”2” to make a single cell take the space of two cells.
  • 45. EXAMPLE
 Every table must have table, tr and td (or th) tags. Marking up the header and body is good practice, but not essential.
  • 46. Class Exercise ! Open ‘table-exercises.html’ in bbedit and create two tables from the un-marked-up content.
  • 47. Forms
  • 49. What is a form? HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors on your site.
  • 52. How do HTML forms work? HTML form elements provide temporary storage for the information the user enters into the form. When the user clicks “submit,” the values are collected and sent to a server. The server processes the form data and sends back a new page (a response). form
 server

  • 54. There are three basic types 
 of form controls, for: Adding Text Making Choices Submitting Forms Uploading Files 

  • 55. Adding Text 
 Text Input
 Password Input
 Text Area

  • 60. <form></form>
 The <form> tag is used to create an HTML form for user input.

  • 61. <form action=”http://www.mysite.com/ process.php”> </form>
 The <form> tag contains the attributes that tell the browser how to handle the data when user hits ‘submit’. The essential, won’t-work-without-it, attribute is “action”. This is server address where the browser will send the data. 

  • 62. <form> <input> </form>
 <input> elements are used within a <form> element to declare input controls that allow users to input data. <input> is an inline, self-closing tag. An input field can vary in many ways, depending on the type attribute.

  • 63. <form> <input type=”text” name=”username”> </form>
 The <input> tag should always have, at a minimum, a type and name attribute. The “type” attribute controls the form type (text, radio, dropdown, etc), and the “name” attribute is how you identify the data when it is sent to the server.

  • 64. Input Attributes: type
 You create the different type of form elements through the “type” attribute. These include: 
 text, password, radio, checkbox, select, file, submit, image, and hidden.
  • 65. Input Attributes: type
 For example: <input type=”text”> would create this:
  • 66. Input Attributes: name
 You then need to add a name so the data can be identified by the server: <input type=”text” name=”username”> !
  • 67. Input Attributes: name
 The data that is sent to the server is sent as a “name/value pair”. For example, if the user entered “Sarah” into the text box: <input type=”text” name=”username”> The server would receive: username=”Sarah” !
  • 68. Class Exercise ! 
 Create a form for our tutorial: Text input (name) Dropdown (favorite color) Radio (human or robot) Text area (comment) Submit
  • 70. Adding Text: Examples 
 Text Input
 You can add additional attributes to your text inputs to control their width (size, in characters), and maxlength (in characthers). You can also control the width of the input field in your css (in pixels, % or ems).
  • 71. Adding Text: Examples 
 Text Area
 Text areas are a bit different: they are not contained in an <input> tag, and they require a closing tag (<textarea></textarea>.
  • 72. Making Choices: Checkboxes 
 Checkboxes
 With checkboxes and radio buttons, the “name” attribute creates the grouping between the options. The “value” attribute tells the server which option the user selected. add a “checked” value if you want an option to be preselected.
  • 73. Making Choices: Radio Buttons 
 Radio Buttons
 Use a radio button when the user can only select one option. Like checkboxes, add a “checked” value if you want an option to be preselected.
  • 74. Making Choices: Dropdowns 
 Drop-downs
 Dropdowns are made up of two opening and closing tags: <select> and <option>. Whatever option appears at the top is the default, unless you add a “selected=”selected” attribute to the option tag.
  • 76. Submitting Forms: Submit 
 Submit
 A simple <input type=”submit”> is the easiest way to add a submit button to your form. You can hook onto this element in css by using the pseudo selector input[type=submit].
  • 77. Submitting Forms: Image 
 Image
 <input type=”image”> allows you to replace the standard submit button with an image of a submit button. This method is not recommended.
  • 78. Submitting Forms: Button 
 Button
 Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
  • 81. <form> Your Name<br>
 <input type=”text” name=”name”><br> Your Email<br>
 <input type=”text” name=”email”><br> <input type=”submit”> </form>
 There are a few ways to add labels to your form elements. The simplest way is to just add unmarked up text with <br> elements.

  • 82. <label for=”name”>
 Your Name
 <label><br> <input type=”text” name=”name” id=”name”> Another way is to use the “label” element. It can wrap both the label and input, or stand outside of the input. You can style the label element in css. If you use this method, you should add a “for” attribute to the label that matches the id of the form element (not required, but good for accessibility reasons).

  • 83. <label> Your Name<br>
 <input type=”text” name=”name”> <label> You can also wrap the entire element in the label tag. Both used of the label tag give your radio and checkboxes the added feature of making the entire field clickable.