First I will show you the complete html site I made using the tags I learned
Let's get in this hyper text https://shinjuno123.github.io/cv/
this simple website consists of 3 pages and only used HTML. no css and no js for now
index.html Page
hobbies.html Page
contactMe.html Page
There is one important tag I learned from this project. It is table tag!
so There are many kinds of tags associated with table tag. but I'll summerize this based on what I understood
Let's add a table tag first
<table></table>
html consists of head, body and footer. table is also same it consists of thead,tbody and tfoot.
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
tr is table row. so we can add some row in table body. and td is table data. so we can add cells in the row. Let's make 2 rows and 4 cells. then this table is for now 2 x 2
<table>
<thead></thead>
<tbody>
<tr>
<td>apple</td>
<td>1</td>
</tr>
<tr>
<td>orange</td>
<td>3</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
Result
| apple | 1 |
| orange | 3 |
But! We need to add explanation what this data means
CODE
<table>
<thead>
<th>fruit name</th>
<th>number</th>
</thead>
<tbody>
<tr>
<td>apple</td>
<td>1</td>
</tr>
<tr>
<td>orange</td>
<td>3</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
Result
| fruit name | number |
|---|---|
| apple | 1 |
| orange | 3 |
This is much better. right?
We need to know input tag too. you can add many kinds of components by just changing the type of input tag.
<input type="text" name="">
<input type="color" name="">
<input type="range" name="">
<input type="number" name="">
<input type="url" name="">
Finally, We also need to know list tag too
<ul>
<li>Asan Punggi elementary school</li>
<li>Asan Middle school</li>
<li>Asan High School</li>
<li><a href="https://www.konyang.ac.kr/eng/sub02_01_04.do"><strong>Konyang University Computer Science</strong></a>(Department of Medical IT Engineering)</li>
</ul>
ul tag means unordered list. For example,
- Asan Punggi elementary school
- Asan Middle school
ol tag means ordered list. For example,
- Asan Punggi elementary school
- Asan Middle school
if you add "type" attribute to the ol tag then you can change the ordering type. For instance, 1,2,3 to i,ii,iii
You should check up MDN for more information.
index.html CODE
<!-- document type this tells the browser
what is the version of HTML we are using when it opens up this file -->
<!DOCTYPE html>
<!-- Html tag let you know the inside of the tags will be HTML code -->
<html lang="en" dir="ltr">
<!-- head -->
<head>
<meta charset="utf-8">
<title>Juno's Personal Site</title>
</head>
<body>
<!-- body -->
<table cellspacing="20">
<tr>
<td><img src="images/profile.png" alt="profile"></td>
<td>
<h1>Junho Shin</h1>
<p><em><strong>full stack</strong> developer</em></p>
<p>I am a full stack developer junho Shin but you can call me Juno easily. for now I'm studying to be a full stack developer.
I graduated Konyang university in south Korea and My major is Computer Science. I will get married and get a job and live in America. I love to make some useful things through coding</p>
</td>
</tr>
</table>
<hr size=3 noshade>
<h3>Education</h3>
<ul>
<li>Asan Punggi elementary school</li>
<li>Asan Middle school</li>
<li>Asan High School</li>
<li><a href="https://www.konyang.ac.kr/eng/sub02_01_04.do"><strong>Konyang University Computer Science</strong></a>(Department of Medical IT Engineering)</li>
</ul>
<hr size="3" noshade>
<h3>Nearly Work Experience</h3>
<table cellspacing="10">
<thead>
<tr>
<th>Dates</th>
<th>Work</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022.03~2022.06</td>
<td>Snack Recognition AI App service</td>
</tr>
<tr>
<td>2022.03~2022.06</td>
<td>Nystagmus Recognition Web service</td>
</tr>
</tbody>
<tfoot>
<!-- footer of table -->
</tfoot>
</table>
<hr size="3" noshade>
<h3>Skills</h3>
<table cellspacing="10">
<tr>
<td>Web Developement</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Web Backend Developement</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Video Editing</td>
<td>⭐</td>
</tr>
<tr>
<td>Web frontend Developement</td>
<td>⭐⭐⭐</td>
</tr>
</table>
<hr size="3" noshade>
<a href="hobbies.html">My Hobbies</a><br>
<a href="contactMe.html">Contact me</a>
</body>
</html>
hobbies.html CODE
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Hobbies</title>
</head>
<body>
<h3>My Hobbies</h3>
<ol type="i">
<li>Watching Marvel Movie(Especially Ironman but he died)</li>
<li><a href="https://koreabyme.com/de-stress-in-a-coin-karaoke/">Singing Songs in Karaoke</a></li>
<li>Listening to Korean ballad songs</li>
<li>Making useful softwares for fun</li>
</ol>
</body>
</html>
contactMe.html CODE
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Contact Me</title>
</head>
<body>
<h2>My Contact Details</h2>
<p><strong>Email : </strong> shinjuno123@gmail.com</p>
<p><strong>Tel : </strong> None
<p>
<p><strong>Address : </strong> None</p>
<hr size="3" noshade>
<form class="" action="mailto:shinjuno123@gmail.com" method="post" enctype="text/plain">
<label>Your Name : </label>
<input type="text" name="yourName" value=""><br>
<label>Your Email : </label>
<input type="email" name="yourEmail" value=""><br>
<label>Your Message : </label><br>
<textarea name="yourMessage" rows="10" cols="30"></textarea><br>
<input type="submit" name="" value="submit">
</form>
</body>
</html>
Actually In this page, It would be better to send an email using javascript code but I still have far to go. so I used "mailto:shinjuno123@gmail.com" this action to call the windows mail app.