Learning HTML - Day 4
Today is 28th January 2021 and it is my fourth day to learn HTML 🙋
Day 4 - Time 8.00 pm - 9.15 pm
Recap - HTML structure, Header tags, Paragraph tags, line break, horizontal line break, text tags, text color, background image, links, table
Recap of the previous days -
Code -
<html>
<head>
<title>My Web page</title>
</head>
<body background="https://images.pexels.com/photos/1831234/pexels-photo-1831234.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<h3>Added an image from web</h3>
<h1>This line is withing H1 tag</h1><br>
<p><font ="calibri" size="5" color="blue">Paragraph tags start with p</font></p>
<p><h3><b>This is bold,</b><i>this is italic,</i><u>this is underlined,</u>using <mark>mark</mark></h3></p>
<ol>
<li>Apple</li>
<li>Mango</li>
</ol>
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
<dl>
<dt>Description List</dt>
<dd>The dd tag defines the description list</dd>
<table border="2px" solid red>
<caption>Table</caption>
<p>Insert row in table using tr tag, header of the table using th and table data using td</td>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>January</td>
<td>Monday</td>
</tr>
<tr>
<td>February</td>
<td>Tuesday</td>
</tr>
</table>
<table border="2px" solid red>
<caption>Table</caption>
<p>Using row span</td>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">Monday</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table border="2px" cellspacing="0">
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31 days</td>
<td>28 days</td>
<td>31 days</td>
</tr>
<tr>
<td colspan="3">Total Days-90</td>
</tr>
</table>
</body>
</html>
The output is correct but the 3rd row text should be in the middle, correcting it by using align attribute
Code
<html>
<body>
<table border="2px" cellspacing="0">
<tr>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31 days</td>
<td>28 days</td>
<td>31 days</td>
</tr>
<tr>
<td colspan="3"align="center">Total Days-90</td>
</tr>
</table>
</body>
</html>
cellspacing - There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.
Decorating Table will cover in subsequent days.
Links -
Links - A link (short for hyperlink) is
an HTML object that allows you to jump to a new location when
you click or tap it. Links can be attached to text, images, or
other HTML elements. Most text links are
blue, since that is standard color web browsers use to display links.
<a >tag defines a hyperlink
Syntax - <a href="url">Link text that we want to show</a>
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.
links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Code
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h3><font color="blue">Links</font></h3>
<a href="https://html4dummy.blogspot.com/">Learning HTML</a>
</body>
</html>
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self- Default. Opens the document in the same window/tab as it was clicked_blank- Opens the document in a new window or tab_parent- Opens the document in the parent frame_top- Opens the document in the full body of the window
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h3><font color="blue">Links</font></h3>
<a href="https://html4dummy.blogspot.com/" target="_blank">Learning HTML using target as blank</a><br>
<a href="https://html4dummy.blogspot.com/" target="_parent">Learning HTML target parent</a><br>
<a href="https://html4dummy.blogspot.com/" target="top">Learning HTML target top</a><br>
<a href="https://html4dummy.blogspot.com/" target="_self">Learning HTML target self</a>
</body>
</html>
END OF DAY 4
Comments
Post a Comment