Web Development - Lecture 3
Download as PPTX, PDF1 like52 views
This document provides an introduction to common HTML tags used in web programming. It discusses headings, paragraphs, labels, images, tables, and lists. Headings are defined using <h1> to <h6> tags and are important for page structure and search engine optimization. Paragraphs are defined with <p> tags and never forget the closing tag. Images use <img> tags with required src and alt attributes. Tables are constructed with <table>, <tr>, <th>, and <td> tags and can include additional tags like <tbody> and <thead>. There are three types of lists: unordered using <ul> and <li> tags, ordered also using <ol> and <li> tags,
Web Development - Lecture 3
- 1. Web Programming SYED SHAHZAIB SOHAIL
- 2. Lecture 1 Introduction to HTML
- 4. HTMLTags • What are HTML tags? • The hidden keywords within a webpage that define how our web browser must format & display the content. • Most tags have two parts an opening part & a closing part e.g. <html> is opening tag & </html> is the closing tag.
- 5. Continued… • Some common HTML tags are given below: • Headings • Paragraphs • Label • Images • Tables • Lists
- 6. Continued… • Headings • Headings are defined with <h1> to <h6> tags • <h1> defines the most important heading while <h6> defines the least important heading. • <h1> should be used for main heading, followed by <h2> headings, then the less important <h3> & so on…
- 8. Continued… • Importance of Headings • Search engines use the headings to index the structure & content of your web pages. • Users skim our pages by its headings, so it’s important to use headings to show the document structure.
- 9. Continued… • Paragraphs • The HTML <p> tag defines a paragraph. • Never forget the end tag, else it might produce unexpected results or errors.
- 10. Continued… • Label • The <label> tag defines a label. • The <label> element provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. • The for attribute of <label> tag should be equal to the id attribute of the related element to bind them together.
- 11. Continued… • Images • The <img> tag defines an image in an HTML page. • The <img> tag has two required attributes: src & alt • src: defines the url or path of the image. • alt: specifies an alternate text for an image. • Where some common attributes are height, width, border etc
- 12. Continued… • Table • The <table> tag defines an HTML table • An HTML table consists of the <table> element & one or more <tr>, <th> & <td> elements. • More complex HTML table may also include <caption>, <tbody>, <colgroup>, <thead> & <tfoot>
- 13. Continued… Tags Description <tr> Defines a table row <th> Defines a table heading <td> Defines a table cell <tbody> Used to group the body content in an HTML table <thead> Used to group header content in an HTML table <tfoot> Used to group footer content in an HTML table <caption> Defines a table caption <col> Specifies column properties for each column within a <colgroup> element <colgroup> Specifies a group of one or more columns in a table for formatting
- 15. Continued… • Lists • There are three types of lists a. Unordered Lists b. Ordered Lists c. Description Lists
- 16. Continued… • Unordered Lists • A collection of related items that have no special order or sequence. • An unordered list starts with <ul> tag & each list tem starts with <li> tag. • Each item in the link is marked with bullets.
- 18. Continued… • Ordered Lists • A collection of related items that have special sequence or order. • An unordered list starts with <ol> tag & each list tem starts with <li> tag. • Each item in the link is marked with numbers or alphabets.
- 20. Continued… • Description Lists • HTML also supports description lists. • A description list is a list of terms, with a description of each term. • The <dl> tag defines the description list, the <dt> tag defines the term (name) & the <dd> tag defines each term. • The definition list is the ideal way to present a glossary, list of terms, or other name/value list.