Scribd
Upload
22 views

Lecture 4

The document discusses various HTML tags for formatting text, including lists (<ul>, <ol>, <li>), tables (<table>, <tr>, <th>, <td>), divisions (<div>), inline spans (<span>), horizontal rules (<hr>), line breaks (<br>), and comments (<!-- -->). It provides details on how each tag is structured and how it affects the display of content in the browser. Examples are given for each tag to illustrate its proper usage in HTML documents.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views

Lecture 4

The document discusses various HTML tags for formatting text, including lists (<ul>, <ol>, <li>), tables (<table>, <tr>, <th>, <td>), divisions (<div>), inline spans (<span>), horizontal rules (<hr>), line breaks (<br>), and comments (<!-- -->). It provides details on how each tag is structured and how it affects the display of content in the browser. Examples are given for each tag to illustrate its proper usage in HTML documents.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Web Technologies

HTML Basics
Today’s Lecture
• HTML Lists
– Unordered List, Ordered List, and Description List
• HTML Tables
• HTML Div
• HTML Span
• HTML Horizontal Line
• HTML Line Break
• HTML Comments
HTML Lists
• Unordered List <ul>
– <ul> defines an unordered list.
– It starts with <ul> and ends with </ul>.
– Each list item starts with <li> and ends with </li>.
– List items will be marked with bullets (small black circles) by
default.
HTML Lists
Nested Unordered List
HTML Lists
• Ordered List <ol>
– <ol> defines an ordered list.
– It can be numerical or alphabetical.
• Example: numbers (1,2,3), roman numbers (I, II, III, or i, ii,
iii), or letters (A, B, C, or a,b,c).
– It starts with <ol> and ends with </ol>.
– Each list item starts with <li> and ends with </li>.
– List items will be marked with numbers (1,2,3) by default.
HTML Lists
Nested Ordered List
HTML Lists
• Description List
– HTML also supports description list.
– <dl> defines a description list.
– It starts with <dl> and ends with </dl>.
– <dt> defines description term (name).
• Each description term starts with <dt> and ends with </dt>.
– <dd> defines description definition.
• Each description definition starts with <dd> and ends with
</dd>.
HTML Lists
Description List
HTML Lists
Nested Description List
HTML Table Tag <table>
• <table> defines an HTML table.
• Each table row is defined with <tr>.
• Each table header is defined with <th>.
• Each table data/cell is defined with <td>.
• By default, text in <th> elements are bold and centered.
• By default, text in <td> elements are regular and left-aligned.
HTML Div Tag <div>
• <div> defines a division or a section in an HTML document.
• Always starts on a new line.
• Takes up full width available, because <div> is a block-level element.
• Any sort of content can be put inside <div>.
• By default, browsers always place a line break before and after
<div>.
HTML Span Tag <span>
• <span> is used to markup a part of a text, or a part of a document.
• Does not start on a new line.
• Only takes up as much width as necessary, because <span> is an
inline element.
HTML Horizontal Line Tag <hr>
• <hr> is used for separate content in an HTML page.
• For single horizontal line, we use <hr>
• We can also specify <hr> width in percentage or pixels
– Percentage <hr style="width:50%">
– Pixels <hr style="width:50px">
HTML Line Break Tag <br>
•<br> used to insert a single line break.
•Example: <br> is useful for writing addresses or poems.
HTML Comment Tag <!-- … -- >
• HTML comments not displayed in the browser (interface), but they
can help document to our HTML source code.
• HTML Comments Syntax:
– <!-- comments here -->
• There is an exclamation point (!) in start tag, but not in end tag.
Summary of Today’s Lecture
• HTML Lists
– Unordered List, Ordered List, and Description List
• HTML Tables
• HTML Div
• HTML Span
• HTML Horizontal Line
• HTML Line Break
• HTML Comments
References
• https://developer.mozilla.org/en-US/docs/Web/HTML
• https://www.w3schools.com/html/
• https://www.w3schools.com/html/html_lists.asp
• https://www.w3schools.com/html/html_tables.asp
• https://www.w3schools.com/tags/tag_div.asp
• https://www.w3schools.com/tags/tag_span.asp
• https://www.w3schools.com/tags/tag_hr.asp
• https://www.w3schools.com/tags/tag_br.asp
• https://www.w3schools.com/html/html_comments.asp

You might also like