1. HTML Links
HyperTexts are texts that are linked to other texts.
Within a web page this is accomplished by Hyperlinks or links.
a. <a></a> tags
The
<a></a>tag has 2 main attributes. href and target
href="https://randompic.com/main/examplePage"The href attribute is where the address of the link is stored. The address can be specified through either the absolute or relative url format
1. Absolute URLs : the url above
2. Relative URLs : starts with a '/', stay within the domain
target = "_blank"The target specifies where the link will open in. The target above will open the link on a new window if on a different domain. The default value will open link on the current page.
b. Images can be set as links
Adding an image tag within the
<a></a>tag will make the entire image a link. Clicking on the image will take you to the webpage
Must add image within<p>tag to place it correctly
<a target="_blank" href ="https://www.youtube.com/">
<p>
<img src="https://upload.wikimedia.org/wikipedia/
commons/thumb/7/72/YouTube_social_white_square
_%282017%29.svg/1200px-YouTube_social_white_square
_%282017%29.svg.png" height = "200">
</p>
click on the image
</a> 
c. Internal Links
You can jump to parts of the page by using internal links.
Create an ID attribute on the tag that you want to jump to, then create an
<a></a>tag to that ID.
<ol>
<li>
<a href="#bestSongs"><strong>Best songs
<em>2020</em></strong></a>
</li>
<li>
<a href="#bestNetflix"><strong>Best Netflix shows
<em>2020</em></strong></a>
</li>
</ol>
<h2 id = "bestSongs">
<strong>Best songs <em>2020</em></strong>
</h2>
<h2 id = "bestNetflix">
<strong>Best Netflix shows <em>2020</em></strong>
</h2>d. HTML Tables
Create tables for organization
Table Tags
<table>
<thead>
<tr>
<th>Show name</th>
<th>Genre</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peaky Blinders</td>
<td>History, Action</td>
<td>4.8</td>
</tr>
<tr>
<td>Black Mirror</td>
<td>Mystery, Horror</td>
<td>4.6</td>
</tr>
<tr>
<td>Rick and Morty</td>
<td>Cartoon, Comedy</td>
<td>4.9</td>
</tr>
</tbody>
</table>e. Commenting in HTML
Comments are used in code to include text that doesn't get compiled
<!--This is where the Comment goes-->Example Workload
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>Example Workload</title>
<style>
h1{
background-color : blue;
color : white;
}
h2{
background-color : orange;
color : green;
}
.topic{
background-color : black;
color : red;
}
#showTable{
background-color : orange;
color : green;
}
</style>
</head>
<body>
<h1>Min's Hobbies</h1>
<ol>
<li>
<a href="#bestSongs"><strong>Best songs
<em>2020</em></strong></a>
</li>
<li>
<a href="#bestNetflix"><strong>Best Netflix shows
<em>2020</em></strong></a>
</li>
</ol>
<img href = "https://cdn.vox-cdn.com/thumbor/Fg62DJ5aszznkZT25GhRBP9oCH8=/0x0:705x344/1200x800/filters:focal(297x116:409x228)/cdn.vox-cdn.com/uploads/chorus_image/image/65979780/netflix-logo-705px.0.png"
alt = "netflix logo" width = "200">
<h2 class = "topic">
<strong>Best songs <em>2020</em></strong>
</h2>
<ul>
<li>Blueberry Fwaygo</li>
<li>Ransom</li>
<li>Camelot</li>
</ul>
<p>
The songs listed above are the top 3 songs
I listen to 2020
</p>
<h2 class = "topic">
<strong>Best Netflix shows <em>2020</em></strong>
</h2>
<table id="showTable">
<thead>
<tr>
<th>Show name</th>
<th>Genre</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peaky Blinders</td>
<td>History, Action</td>
<td>4.8</td>
</tr>
<tr>
<td>Black Mirror</td>
<td>Mystery, Horror</td>
<td>4.6</td>
</tr>
<tr>
<td>Rick and Morty</td>
<td>Cartoon, Comedy</td>
<td>4.9</td>
</tr>
</tbody>
</table>
<p>
The shows listed above are the top 3 shows
I watched on Netflix!
</p>
</body>
</html>