Common HTML TAG
HTML, HEAD, BODY
The <html> element, the root of an HTML document, should be added after the !DOCTYPE
declaration. All content/structure for an HTML document should be contained between the opening
and closing <html> tags.
Html <head> is a container for metadata of the webpage. HTML metadata is data about the
HTML document. Metadata is not displayed. Metadata typically define the document title,
character set, styles, scripts, and other meta information.
The <body> tag defines the document's body. The <body> element contains all the
contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc. There can only be one <body> element in an HTML document.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- character set -->
<title>CheetSheet Project</title> <!-- webpage title -->
<link href="styles.css" rel="stylesheet"> <!-- relationship between the current document and an external resource. -->
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<section>
<article>
</article>
</section>
<section>
<article>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
NAVIGATION BAR
Having easy-to-use navigation is important for any web site. With CSS you can
transform boring HTML menus into good-looking navigation bars. A navigation bar needs standard
HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A
navigation bar is basically a list of links, so using the <ul> and <li> elements
makes perfect sense:
How to create it:
HTML CODE
<nav class="navbar">
<ul>
<li><a href="#Homes">Home</a></li>
<li><a href="#News">News</a></li>
<li><a href="#Contact">Contact</a></li>
<li style="float:right"><a href="#Abouts">About</a></li>
</ul>
</nav>
CSS CODE
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
}
.navbar {
padding-top: 0px;
position: relative;
margin: 0 auto 0;
overflow: hidden;
text-transform: uppercase;
}
li a {
height: 30px;
display:block;
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
font-family: Georgia;
}
li a:hover {
background-color:#084042;
}
li a:active{
background-color: rgb(0, 116, 77);
}
TABLE
HTML tables allow web developers to arrange data into rows and columns.
| First Name |
Last Name |
Age |
Occupation |
Location |
| Gabriel |
Allba |
18 |
Student |
Norway |
| Cristiano |
Ronaldo |
30 |
Football Player |
Portugal |
| Lionel |
Messi |
30 |
Football Player |
Argentina |
| Jonathan |
Supratman |
30 |
Officer |
Thailand |
| Engkok |
Supradi |
35 |
Content Writer |
Indonesia |
How to create it?
<table id="table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Occupation</th>
<th>Location</th>
</tr>
<tr>
<th>Jonathan</th>
<th>Supradi</th>
<th>45</th>
<th>Content Writer</th>
<th>Indonesia</th>
</tr>
<tr>
<th>Chrismanto</th>
<th>Rondo</th>
<th>45</th>
<th>Programmer</th>
<th>Hawaii</th>
</tr>
</table>
table {
width: 100%;
}
th {
text-transform: uppercase;
font-weight: bold;
}
table,th,td {
border: 1px solid rgb(223, 223, 235);
border-collapse: collapse;
text-align: center;
color: white;
}
th,td {
padding: 20px;
}
td {
color: black;
}
#table th {
background-color: #008585;
}
#table tr:nth-child(even){
background-color: whitesmoke;
}
#table tr:nth-child(odd){
background-color: rgb(196, 196, 196);
}
