Easy way to Code a Web Page

How to save a HTML file

Grammar of the tag,

A tag is a code used in the HTML document. A tag is single-byte UPPERCASE/lowercase letters enclosed by “<” and “>”.

Ex: <br/> Line break Tag
<hr/> Horizontal rule
<img/> Insert an Image

Understand HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Page</title>
</head>
<body>
<h1>Hello, Everyone</h1>
<p>Welcome to my First web Page</p>
<img src="001.jfif" alt="World image"><br><br>
<a href="01.html">Link page</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Page</title>
</head>
<body>
<h1>Hedding 01</h1>
<h1>Hedding 02</h1>
<h1>Hedding 03</h1>
<h1>Hedding 04</h1>
<h1>Hedding 05</h1>
<h1>Hedding 06</h1>
</body>
</html>

Other special Tags

· <hr> -Used to display a horizontal rule.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Page</title>
</head>
<body>
<h1>Drinks</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h1>Fruits</h1>
<ol>
<li>Mango</li>
<li>Orange</li>
<li>Pineapple</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Page</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Index</th>
<th>Name</th>
<th>Adress</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Kumara</td>
<td>Maharagama</td>
</tr>
<tr>
<td>002</td>
<td>Amal</td>
<td>Kottawa</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Information about data</td>
</tr>
</tfoot>
</table>
</body>
</html>

Learn the basics of CSS

What is CSS?

Like HTML, CSS is not a programming language. It’s not a markup language either. CSS is a style sheet language. Cascading style sheets (CSS) are a standard set by the world wide web Consortium (w3c) for managing the design and formatting of Web pages in a web browser. It means CSS is what you use to selectively style HTML elements. For example, this CSS selector indicates that all HTML <p> tags within the document will have a font size of 18px.

Understand CSS structure and how it works?

Important parts of the syntax.

· Apart from the selector, each ruleset must be wrapped in curly braces ({}).

Different types of selectors

. Class selectors .my-class <p class = “my-class”>

We can use two types of comments in the CSS file

1. Single line comments.

How to make a web-side homepage

Today we learn HTML and CSS. Now we are making a web template using HTML, CSS.

This is my Home page HTML code

Head section,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="home2.css">
<title>Home Page</title>
<div class="about">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="Audio.html">Audio Download</a></li>
<li><a href="Video.html">Video</a></li>
</ul>
</div>
</head>
<body>
<div class="main">
<section>
<iframe width="350" height="225" src="https://www.youtube.com/embed/c3EuwkiFRPo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="350" height="225" src="https://www.youtube.com/embed/L2tbvKnEJ7U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="350" height="225" src="https://www.youtube.com/embed/6uzoEB_k5Lk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </section>
</div>
<footer>
<img src="2020.jpg">
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It<span></span></button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</footer>
</body>
</html>

This is my CSS code.

*{
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
}
.about{
position: absolute;
top: 0%;
right: 10%;
font-weight: bold;
letter-spacing: 2px;
}
.about ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
.about ul li{
display: inline-block;
}
.about ul li a {
text-decoration: none;
color: rgb(2, 2, 2) ;
padding: 4px 8px;
border: 1px solid transparent;
transition: 0.6s ease;
}
.about ul li a:hover{
background-color: #fff;
color: rgb(9, 8, 10);
}
.about ul li.active a{
background-color: rgb(94, 6, 102);
color: #fff;
}
.main{
height: 100vh;
background-image: url(10172.jpg);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
section {
position: absolute;
right: 0%;
top: 60%;
}
footer{
background-color: #000;
padding: 5%;
}
footer img{
position: absolute;
right: 10px;
top: 100%;
width: 35%;
height: 30%;
}
footer script{
justify-content: center;
align-items: center;
}
footer p{
color: #fff;
font-size: 20px;
line-height: 1.1cm;
}
footer button{
text-decoration: none;
font-size: 1rem;
font-family: sans-serif;
color: #fff;
background: #cb3467;
width:240px;
padding: 2px 10px;
text-align: center;
border-radius: 20px;
}
footer button span{
position: relative;
width: 1.5px;
visibility: hidden;
}
footer button span:after{
content: '\21D3';
font-size: 1.5rem;
position: absolute;
padding-left: 10px;
animation: down 1s linear infinite;
}
This is the final view of our homepage Template

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tashini Hansika

Tashini Hansika

A passionate IT Undergraduate from University of Moratuwa