Easy way to Code a Web Page
Hello friends…! Do you like to learn that how design a Web Page? Now, you are in the best place to learn it. I will show you, how it doing.
Web design is a rapidly changing and dynamically developing field. So, it is easy to move on to new trends by studying the basics. There are two major topics that must be learned in web design. That is, html and CSS. Here you can find out the basics of creating a web page using html and CSS and how to create a template using html, CSS.
What is HTML?
HTML means Hyper Text Markup Language. It is not a programming language; it is a markup language. So, HTML uses markup tag to describe web pages. We use HTML for Display text data, call up other web pages and display multimedia data.
We can use a text editor as notepad, word pad or HTML editor as FrontPage, Homepage for creating HTML file.
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 “>”.
1. Basic Tag <Tag>…. </Tag>
For this type of tag an opening tag is used before a character string and a closing tag is used after it.
Ex: <Title>My First Page</Title>
2. Single Tag
For this type of tag an opening tag is used either before or after a character string.
Ex: <br/> Line break Tag
<hr/> Horizontal rule
<img/> Insert an Image3. Attribute Tag
Attributes provide additional information about an element. Attributes are always specified in the start tag. Multiple attributes can be specified in random order.
Ex: <font color=” #aa1122” size=”16px”>attribute tag </font>
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> -declaration of the document. All html documents must start with a declaration.
·<html lang = “en”> </html> -another declaration. HTML document written in English.
· <head> </head> - define the attribute of the html document. It form the header section of the HTML document.
· <meta charset = “utf-8”> -define what character set is used to write the document.
· <title> </title> -define the title of the web page. The title defined by these tags is shown on the title bar of the browser.
Ex: <title>First Page</title>
· <body> </body> -define the body of the HTML document
· <p> </p> -define a simple paragraph of text
.<h1> </h1> -the main header on the page. The numbers indicate the levels of the headings (Relative size)
<!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>
· <a href = “01.html” > Link Page</a> -<a> tag defines a hyper link. Href is a attribute, which indicates the link’s destination. The “Link Page ” is the part that will be visible to reader. Then click it, will send to specific URL address.
· <img src = “001.jpg” alt=”World image” > -This tag is used to display an image. “Src” and “alt” are attribute.
Other special Tags
· <hr> -Used to display a horizontal rule.
· <ol> </ol> -used to display the ordered list.
· <ul> </ul> -used to display unordered list.
· <li> -used for each list item.
<!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>
· <table> </table> -define the table.
· <tr> </tr> -define the rows of the table.
· <td> </td> -define the data of the rows.
· <th> </th> -define the item names of the columns of the table.
<!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.
We can use a text editor to create new CSS file. Save the file as “file name.css”.
To make the code work, we still need to apply this CSS to our HTML document.
01. Open our sample.html file and write the following line between the <head> and </head> tags.
<link href = “sample.css” rel= “stylesheet”>
Understand CSS structure and how it works?
· Selector -This is the Html element name at the start of the ruleset. It defines the element, to be styled. To style a different element, change the selector.
· Declaration -This is a single rule like font size: 18px. It specifies which of the element’s properties you want to style.
· Properties -These are ways in which you can style on HTML elements.(In this, font size is a property of the <p> elements)
· Property value -To the right of the property, after the colon, there is the property value. This chooses one out of many possible appearances for a given property.
Important parts of the syntax.
· Apart from the selector, each ruleset must be wrapped in curly braces ({}).
· Within each declaration, you must use a colon (;) to separate the property from its value or values.
· Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.
Different types of selectors
. Class selectors .my-class <p class = “my-class”>
. Id selector .my-id <p id = “my-id”>
. Attribute selector .img [src] <img src = “image1.jpg”>
. Pseudo- class selector . button: hover Select <button>
We can use two types of comments in the CSS file
1. Single line comments.
/*This is a single — line comment*/
2. Multi line comments
/*This is a
Multiline
Comment*/
Now our web page developing is easier. Because bootstrap comes into play.
Bootstrap is free and open-source CSS framework directed at web development. It contains CSS templates for typography, forms, buttons tables and other interface components.
How to make a web-side homepage
Today we learn HTML and CSS. Now we are making a web template using HTML, CSS.
Lots of web designers usually go first with programs such as GIMP, Photoshop or paint, to work on the details and see how it will all fit.
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 section,
<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 section,
<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 the new view of our homepage Template. Now, let’s see how to make our web page beautiful using CSS.
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;
}
Ohh yes. Now our home page is complete!