Tayyib Mohamed GY001 0058
<!DOCTYPE html>
<html>
<head>
<title> hello! </title>
<meta charset="UTF-8">
<meta name="author" content="Payal Shetty">
<meta name="description" content="All about html">
<base target="_blank">
</head>
<!--comment-->
<body>
<h1 id="top"> This is a webpage - 1 heading style it has an id of "top"
</h1>
<p> pararaph </p>
<p> We have <sub> subscript </sub> </p>
<p> We have <sup> superscript </sup> </p>
<table border="1" style="width: 800px; margin-right: auto; margin-left:
auto">
<caption> There are captions for tables, this table is center aligned
</caption>
<tr>
<td colspan="2"> <h1> Tables exist and can use inline css style - this cell
is column spanned<h1> </td>
</tr>
<tr>
<td rowspan="3"> <h3> many things can fit here - this cell is row
spanned<h3> </td>
<td> <h3> along with videos <h3>
<video controls autoplay loop muted width="100%">
<source src="flower.mp4" type="video/mp4"
Your browser doesnt support this video type
Tayyib Mohamed GY001 0058
</video>
</td>
</tr>
<tr>
<td> <h3> and images </h3>
<img src="[Link]" alt="blue flowers" width="100%">
</td>
</td>
</tr>
<tr>
<td> <h3> and audio </h3>
<audio controls>
Your browser doesnt support this audio type
<source src="bird.mp3" type="audio/mpeg">
</audio>
</tr>
<tr style="height: 50px; width 280px;">
<td colspan="2"> <h3> Rows can have different sizes (doesnt show
though :( ) </h3> </td>
</tr>
<tr>
<td style="text-align: right" colspan="2"> <h3> This text is right aligned
<h3> </td>
</tr>
</table>
<br>
<h2> Lets look at some ways to style table borders </h2>
<br>
<table width= "80%" border="1" style="border-collapse: collapse">
<caption> This table will have collapsed borders </caption>
Tayyib Mohamed GY001 0058
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>
<table width= "80%" border="1" style="border-collapse: collapse">
<caption> This table will have thick borders </caption>
<tr>
<td style= "border: solid 2px"> a </td>
<td style= "border: solid 2px"> b </td>
</tr>
<tr>
<td style= "border: solid 2px"> c </td>
<td style= "border: solid 2px"> d </td>
</tr>
<table width= "80%" border="1" style="padding:25px">
<caption> This table will have 25px padding borders </caption>
<tr>
<td style= "border: solid 2px"> a </td>
<td style= "border: solid 2px"> b </td>
</tr>
<tr>
<td style= "border: solid 2px"> c </td>
<td style= "border: solid 2px"> d </td>
</tr>
Tayyib Mohamed GY001 0058
</table>
<table width= "80%" border="1" style="padding:25px 5px 20px 5px">
<caption> This table will have variable padding borders </caption>
<tr>
<td style= "border: solid 2px"> a </td>
<td style= "border: solid 2px"> b </td>
</tr>
<tr>
<td style= "border: solid 2px"> c </td>
<td style= "border: solid 2px"> d </td>
</tr>
</table>
<table width= "80%" border="1" style="border-spacing: 20px 10px">
<caption> This table will have border spacing </caption>
<tr>
<td style= "border: solid 2px"> a </td>
<td style= "border: solid 2px"> b </td>
</tr>
<tr>
<td style= "border: solid 2px"> c </td>
<td style= "border: solid 2px"> d </td>
</tr>
</table>
<br>
<h1 style="color:#ff0000"> This is a colored text </h1>
<table border="1">
<tr>
<td colspan="2" style="background-color: #92cddc"> This is a colored
table row </td>
Tayyib Mohamed GY001 0058
</tr>
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>
<h1> This is an ordered list </h1>
<ol>
<li> a </li>
<li> b </li>
<li> c </li>
</ol>
<br>
<h1> This is an unordered list </h1>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<br>
<h2> here is the use of a book mark </h2>
<ul>
<li><p> Back to <a href="#top">top</a> </li>
<h2> here is the use of a hyperlink </h2>
<ul>
Tayyib Mohamed GY001 0058
<li><p> click <a href="[Link]
v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1">here!</a>
</p></li>
<h2> here is the use of an email </h2>
<ul>
<li><p> click <a href="[Link]
%20There">email!</a> </p></li>
</ul>
</ul>
</ul>
<p> The end! </p
<h4> Only topics missing (that dont require css) are:
<ul>
<li> Vertical alignment </li>
<li> Div tags </li>
<li> class tag (cant work without css) </li>
</ul>
</body>
</html>