HTML
HTML (Hypertext markup language) is used to build web pages, which are accessed across internet,
it defines the structure/skeleton of webpage content using different tags, ex: <h1>Heading1</h1>.
Each tag represent a structure, which usually has opening and closing tags as above example,
though there are few exceptions,which are self closing.
ex: <br/>
Below is the sample HTML structure.
<html><- root html tag<head><- head tag has meta,title,style and script etc. tags<title>Title</title> </head> <body><- actual page content goes inside<h1>Header</h1> <body> </html>
Let's understand some basic HTML tags.
Refer here for examples-
Below are the sample html problems to start with.
-
4 by 4 grid
<html> <head> <title>4 by 4 grid</title> <style> .row{ height: 100px; clear: both; } .col{ width: 100px; height: 100px; border:1px solid blue; float:left; } .row:nth-child(odd) > .col:nth-child(odd){ background-color: black; } .row:nth-child(even) > .col:nth-child(even){ background-color: black; } </style> </head> <body> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <footer>© 2024, https://www.logicmacha.com</footer> </body> </html> -
Template
<html> <head> <title>template</title> <style> nav > ul { display: flex; flex-direction: row; padding:0; margin:0; background-color: aliceblue; } nav > ul > li{ padding:10px; list-style-type: none; } header{ background: burlywood; text-align: center; height: 40px; align-content: center; } aside{ float: left; width:100px; height: 80vh; background-color: bisque; padding:5px; } article{ padding:10px; } footer{ clear: both; text-align: center; } </style> </head> <body> <header>Company Logo and Name</header> <nav> <ul> <li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/products.html">Products</a></li> </ul> </nav> <main> <aside> side section </aside> <article>This is main section. </article> </main> <footer>© 2024, https://www.logicmacha.com</footer> </body> </html>
Comments
Post a Comment