A basic HTML page always begins with the declaration of the document type or doctype. It is a way to inform browsers about the type of document. The doctype is always the first element at the top of all HTML files. Then we have sections and subsections, each has its title and subtitle. These titles and section elements help the reader to perceive the meaning of the content.
-
Code html
<!DOCTYPE html> <html> <head> <title>Html 5</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link href="css/file.css" rel="stylesheet"> </head> <body> <header class="header-menu"> <nav> <ul> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 13 <li> </ul> </nav> </header> <section> <article> <header> <h2>Learn HTML</h2> <small>Hyper Text Markup Language</small> </header> <p> </p> </article> <article> <header> <h2>Commencez le questionnaire "HTML de base"</h2> <small>Vous pouvez tester votre compétences HTML avec le questionnaire W3docs'.</small> </header> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </article> </section> <aside> <h2>Tags</h2> <p>HTML</p> <p>CSS</p> <p>JavaScript</p> <p>PHP</p> </aside> <footer> <small> © - All rights reserved.</small> </footer> </body> </html> -
Code Css
html, body { height: 100%; } body { display: flex; flex-wrap: wrap; margin: 0; } .header-menu, footer { display: flex; align-items: center; width: 100%; } .header-menu { justify-content: flex-end; height: 60px; background: #1c87c9; color: #fff; } h2 { margin: 0 0 8px; } ul li { display: inline-block; padding: 0 10px; list-style: none; } aside { flex: 0.4; height: 165px; padding-left: 15px; border-left: 1px solid #666; } section { flex: 1; padding-right: 15px; } footer { padding: 0 10px; background: #000; color: #fff; }
