Scribd
Upload
8 views7 pages

Ex: Ex:: HTML Comment Tags

Uploaded by

jessefortunato.dev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views7 pages

Ex: Ex:: HTML Comment Tags

Uploaded by

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

Instructor: Sudad H. Abed / Email: [email protected].

iq

Lecture Reference: www.w3schools.com

❖ HTML Comment Tags:


Ex:
<!-- Write your comments here -->
Ex:
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->

❖ HTML Text Formatting Elements:

Tag Description Example

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

Defines emphasized
<em> <p><em>This text is emphasized</em></p>
text

<i> Defines italic text <p><i>This text is italic</i></p>

<small> Defines smaller text <h2>HTML <small>Small</small> Formatting</h2>

Defines important
<strong> <p><strong>This text is strong</strong></p>
text
Defines subscripted
<sub> <p>This is <sub>subscripted</sub> text.</p>
text
Defines
<sup> <p>This is <sup>superscripted</sup> text.</p>
superscripted text
Defines inserted
<ins> <p>My favorite <ins>color</ins> is red.</p>
text

<del> Defines deleted text <p>My favorite color is <del>blue</del> red.</p>

Defines
<mark> marked/highlighted <h2>HTML <mark>Marked</mark> Formatting</h2>
text
Instructor: Sudad H. Abed / Email: [email protected]

Lecture Reference: www.w3schools.com

❖ HTML Colors:
• Background Color:
Ex: <h1 style ="background-color:Tomato;">Hello World</h1>
Ex: <p style ="background-color: #00f3f7;">I like HTML.</p>

• Text Color:
Ex: <h1 style="color:Tomato;">Hello World</h1>

• Border Color:
Ex: <h1 style="border:2px solid green;">Hello World</h1>

❖ HTML Lists:
• Unordered HTML List:
Ex:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ex:

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Instructor: Sudad H. Abed / Email: [email protected]

Lecture Reference: www.w3schools.com

❖ HTML Tables:

- An HTML table is defined with the <table> tag.


- Each table row is defined with the <tr> tag.
- A table header is defined with the <th> tag.
- A table data/cell is defined with the <td> tag.
- By default, table headings are bold and centered.
Ex:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Instructor: Sudad H. Abed / Email: [email protected]

Lecture Reference: www.w3schools.com

• Adding a Border:

- If you want to add border to the table you need to add the style code below
inside the <head> tag.
<style>

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

</style>

• Adding Collapsed Borders:

<style>

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

</style>

• Adding a Caption: To add a caption to a table, use the <caption> tag:

<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Instructor: Sudad H. Abed / Email: [email protected]

Lecture Reference: www.w3schools.com

• Cells that Span Many Columns:


To make a cell span more than one column, use the colspan attribute:

Ex:
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

• Cells that Span Many Rows:

Ex:
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Instructor: Sudad H. Abed / Email: [email protected]

Lecture Reference: www.w3schools.com

❖ HTML Block and Inline Elements:

• Block-level Elements:
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
- Examples of block-level elements:

➢ <div>
➢ <h1> - <h6>
➢ <p>
➢ <form>

• Inline Elements:
An inline element does not start on a new line and only takes up as much
width as necessary.
- Examples of inline elements:

➢ <span>
➢ <a>
➢ <img>

• The <div> Element:


- The <div> element is often used as a container for other HTML elements.
- The <div> element has no required attributes, but both style and class are
common.
- When used together with CSS, the <div> element can be used to style
blocks of content:
Instructor: Sudad H. Abed / Email: [email protected]

Lecture Reference: www.w3schools.com

Ex:
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
</div>

• The <span> Element:


- The <span> element is often used as a container for some text.
- The <span> element has no required attributes, but both style and class are
common.
- When used together with CSS, the <span> element can be used to style
parts of the text:
Ex:
<h1>My <span style="color:red">Important</span> Heading</h1>

You might also like