Scribd
Upload
13 views39 pages

More On HTML

Uploaded by

Namit Taneja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views39 pages

More On HTML

Uploaded by

Namit Taneja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 39

More on HTML

Dr. Gaganpreet Kaur


Department of Computer Science and Engineering
Chitkara University, Punjab
1
DivTag,
SemanticTags,
Adding Internal Links toWebPage,
Block vs Inline Elements, Text Formatting
Tags, Special Characters, AddingTables,
MoreAttributesandTags RelatedtoTable

2
The <div> tag

• The <div> tag defines a division or a section in an


HTML document.

• The <div> tag is used as a container for HTML elements


- which is then styled with CSS or manipulated with
JavaScript.

• The <div> tag is easily styled by using the class or id


attribute.

3
<!DOCTYPE html> <h2>This is a heading in a div
<html> element</h2>
<head> <p>This is some text present in a div
<style> element.</p>
.myDiv { </div>
border: 5px outset black;
background-color: lightgreen; <p>This is text outside the div
element.</p>
text-align: center;
}
</body>
</style>
</html>
</head>
<body>

<h1>The div element</h1> A <div> section in a document


that is styled with CSS:
<div class="myDiv">

4
5
Block-level Elements

• A block-level element always starts on a new line, and the browsers


automatically add some space (a margin) before and after the element.

• A block-level element always takes up the full width available (stretches


out to the left and right as far as it can).

• Two commonly used block elements are: <p> and <div>.

• The <p> element defines a paragraph in an HTML document.

• The <div> element defines a division or a section in an HTML document.

6
<!DOCTYPE html>
<html>
<body>

<p style="border: 1px solid black">Hello G27</p>


<div style="border: 1px solid black">Hello G27</div>

</body>
</html>

7
Inline Elements

• An inline element does not start on a new line.

• An inline element only takes up as much width as necessary

<!DOCTYPE html>
<html>
<body>

<p>This is an inline span <span


style="border: 1px solid black">Hello
World</span> element inside a
paragraph.</p>
Output
This is an inline span Hello World element
</body> inside a paragraph.
</html>

8
9
Text Formatting Tags
Formatting elements were designed to display special types of text:

<b> - Bold text


<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

10
Text Formatting Tags: Example
<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>

11
Text Formatting Tags: Example

12
HTML Quotation and Citation
Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation

13
<abbr> Tag

• HTML <abbr> for Abbreviations


• The HTML <abbr> tag defines an abbreviation or an acronym, like
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

• Marking abbreviations can give useful information to browsers,


translation systems and search-engines.

14
<abbr> Tag
<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was


founded in 1948.</p>

<p>Marking up abbreviations can give useful information to browsers,


translation systems and search-engines.</p>

</body>
</html>

15
<abbr> Tag

16
<address> Tag
The HTML <address> tag defines the contact information for the
author/owner of a document or an article.

The contact information can be an email address, URL, physical


address, phone number, social media handle, etc.

17
HTML Semantic Elements

• What are Semantic Elements?


• A semantic element clearly describes its meaning to both the browser
and the developer.

• Examples of non-semantic elements: <div> and <span> - Tells nothing


about its content.

• Examples of semantic elements: <form>, <table>, and <article> -


Clearly defines its content.

18
HTML Hyper Links

• HTML links are hyperlinks.


• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into a
little hand.
• Note: A link does not have to be text. A link can be an image or any other
HTML element!

HTML Links - Syntax


The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a> <a> is called anchor tag
The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.

19
<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>

<p><a href="https://www.google.co.in/">Visit Google !


</a></p>

</body>
</html> 20
Absolute URLs vs. Relative URLs

• Both examples above are using an absolute URL (a full web address) in
the href attribute.

• A local link (a link to a page within the same website) is specified with a
relative URL (without the "https://www" part):

21
• <!DOCTYPE html>
• <html>
• <body>

• <h2>Absolute URLs</h2>
• <p><a href="https://www.google.com/">Google</a></p>

• <h2>Relative URLs</h2>
• <p><a href="html_images.asp">HTML Images</a></p>
• <p><a href="/css/default.asp">CSS Tutorial</a></p>

• </body>
• </html>
22
TABLE TAGS

23
HTML <table> Tag

An HTML table consists of one <table> element and one or more <tr>,
<th>, <td> elements.
The <tr> element defines a table row,
the <th> element defines a table header,
and the <td> element defines a table cell.

24
Example

<!DOCTYPE html>
<html>
<head>
<style>
bordertable, th, td {
: 1px solid black;
}
Th, td {
Padding: 10px;
}
</style>
</head>
<body>

25
Example
<h1>The table element</h1>

<table style = “width:500px”>


<table style = “background-color:#000000”>
<table style = “float:right”>

<tr>
Month Savings
<th>Month</th>
<th>Savings</th>
</tr> January $100
<tr>
<td>January</td>
<td>$100</td> Feb $80
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
• </html>
26
HTML <caption> Tag

The <caption> tag defines a table caption.


The <caption> tag must be inserted immediately after
the <table> tag.

27
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;

}
body
{
background-image: url('image.jpg');
}
</style>
</head>
<body>

<table>
<caption style="text-align:right">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<br> 28
<table>
<caption style="caption-side:bottom">My
savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

</body>
</html>

29
HTML <colgroup> Tag

• The <colgroup> tag specifies a group of one or more columns in a table


for formatting.

• The <colgroup> tag is useful for applying styles to entire columns, instead
of repeating the styles for each cell, for each row.

• Note: The <colgroup> tag must be a child of a <table> element, after any
<caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr>
elements.

30
31
32
How To Add a Border
• To add a border, use the CSS border property on table, th, and td
elements:

• table, th, td {
border: 1px solid black;
}

Collapse Borders
• table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

33
HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell
content.

• By default the padding is set to 0.

• To add padding on table cells, use the CSS padding property:

• Example
th, td {
padding: 15px;
}

34
HTML Table - Cell Spacing

• Cell spacing is the space between each cell.

• By default the space is set to 2 pixels.

• To change the space between table cells, use the CSS border-spacing
property on the table element:

• Example
• table {
• border-spacing: 30px;
• }

35
Tables – bordercolor

<html>
▪ we can also set border color also
<head>
using bordercolor attribute. <title>HTML Tables</title> </head>
<body>
<table border="1"bordercolor="red" >
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Shivam</td>
<td>50,000.00</td>
</tr>
<tr>
<td>Vansh</td>
<td>45,000.00</td>
</tr>
</table>
</body>
</html>
Tables – Backgrounds

Tables Backgrounds
▪ bgcolor attribute − we can set background color for
whole table or just for one cell. <html>
▪ background attribute − we can set background <head>
image for whole table or just for one cell. <title>HTML Tables</title> </head>
<body>
<table border="1"bgcolor="yellow">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Jayapal</td>
<td>50,000.00</td>
</tr>
<tr>
<td>Ravi</td>
<td>45,000.00</td>
</tr>
</table>
</body>
</html>
Tables – table body <tbody>

▪ HTML <tbody> tag is used to group the table rows <!DOCTYPE html>
(<tr>) together, which indicates that this is body <html>
part of a table (<table>). <h1>The thead, tbody, and tfoot elements</h1>
<table border="1">
▪ The <tbody> tag must be a child of <table> element. <thead>
<tr>
<th>Day</th>
▪ The <tbody> is used along with <thead> and
<th>venue</th>
<tfoot> which shows the different part of the table </tr>
that are table head, table body, and table footer, </thead>
however, it does not affect the layout of the table. <tbody>
<tr> <tfoot>
<td>Mon</td> <tr>
<td>TG</td>
</tr> <td>wed</td>
<tr> <td>tesla</td>
<td>Tue</td>
<td>PG</td>
</tr>
</tr> </tfoot>
</tbody> </table>

</body>
</html>
Tables- Height and Width attributes

<html>
▪ We can set a table width and height
<head>
using width and height attributes.
<title>HTML Table Width/Height</title>
▪ Specify table width or height in terms of pixels or in terms of
</head>
percentage of available screen area.
<body>
Table Caption <table border = "1" width = "400" height =
▪ The caption tag will serve as a title or explanation for the table "150">
and it shows up at the top of the table. This tag is deprecated in <caption>This is the caption</caption>
newer version of HTML/XHTML <tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>

</html>

You might also like