14. Body Structure in depth
Body Structure:
<body>
<header>
<nav></nav>
</header>
<section>
<article></article>
...
</section>
<aside></aside>
<footer></footer>
</body>
Important tags inside of Body:
<h1></h1> Header tag from 1
.
.
<h6></h6> To 6
<p></p> Paragraph tag
<ul></ul> (<ol></ol>) List tag
<a></a> Link tag
<img> Image tag
<table></table> Table tag
<video></video> Video tag
<audio></audio> Audio tag
<br/> Break-line
<hr> Horizontal line
<div></div> new block
17. Styling in depth
3 ways to add styles to the code:
➔ Inside the Style tag
<style type="text/css">
body{
background-color: #015582;
color: white;
line-height:1.45
}
img{
width:100%;
height:400px;
}
</style>
➔ Inside a tag using style attribute
<p style = "color:red;"></p>
➔ In an external file
<link rel="stylesheet" type="text/css" href="path/to/file.css">
18. Styling in depth
Why use CSS:
➔ Defining areas
➔ Defining Colors
➔ Creating transitions
➔ Fonts
➔ ...
➔ Responsiveness
➔ Usability