Website development
A modern day website is made of 3 different files that are-
HTML
CSS
JAVASCRIPT
What is HTML?
HTML stands for hypertext markup language. HTML is used to create web pages and web applications.
It was first developed by the Time Berners-lee in 1990.
1. Hypertext- Hypertext is the text used to link various web pages.
2. Markup- It means highlighting text either by underlying or displaying it in different colors, or both.
3. Language- It refers to the way of communication between web pages, which has its own syntax and rules.
In other words:
1. HTML is the standard markup language for creating web pages.
2. HTML describes the structure of the web page.
3. HTML consists of a series of elements.
4. It contains text which are known as tag.
Extension of HTML file is- .htm or .html
HTML tag:
<HTML></HTML>
Head tag:
It is a paired tag. It contains metadata about the document. We link external stylesheets, HTML files and javascript in the head tag.
Title tag:
It is a semantic tag which defines the title of the web page.
Body tag:
It is a paired tag which contains the content of an HTML document.
Heading tag:
<h1> to <h6> are the
heading tags.<h1> is
Largest heading. <h6> is
the smallest heading.
It is a block element.
<P> tag:
for paragraph
<B>,<strong> tag:
For bold the text.
<I>,<em> tag:
for italic the text.
<Br> tag:
For link break.
<U> tag:
for underlining the text.
Example of HTML describes by its code:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">Visit Example</a>
</body>
</html>
What is CSS?
CSS stands for Cascading style sheet. CSS is a language used to style web pages. It controls the appearance of elements like text, images, and layout. It works with HTML to create visually appealing and functional websites.
It is a style sheet language used to describe the presentation of a HTML document.
CSS can be coded in three types which are:
Inline CSS (inside an element)
Internal CSS (inside <style> tags in the <head>
External CSS (in a separate .CSS file)
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saved a lot of work. It can control the layout of multiple web pages all at once.
Why use CSS:
Solve big problems.
Saves a lot of time.
Provides more attributes.
Example of CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
font-family: Arial;
}
h1 {
color: dark blue;
}
p {
color: black;
font-size: 18px;
}
button {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
button:hover {
background-color: dark green;
}
</style>
</head>
<body>
<h1>My Simple Web Page</h1>
<p>This page is styled with simple CSS.</p>
<button>Click Me</button>
</body>
</html>
This CSS does the following:
Set the background to light blue.
Colors the heading (<h1>) dark blue.
Styles the paragraph text and makes it bigger.
Designs the button with green color and rounded edges.
What is Javascript?
Javascript is the programming language for the web. Javascript can update and change both HTML and CSS. Javascript can calculate, manipulate and validate data.
Javascript, a Netscape developed scripting language,allows the creation of dynamic,interactive web pages,enabling web pages to interact and perform complex actions without reloading the entire page.
Javascript is a programming language that supports eight data types:string,number,bigint,Boolean, undefined, null, symbol and object.
Simply example of JavaScript:
Here's a web page with a button that shows a message using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>Hello!</h1>
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hi there! You clicked the button.");
}
</script>
</body>
</html>
.jfif)
What Javascript can do?
Snow messages or alerts.
Change text or images on the page.
Respond when a button is clicked.
Validate form (like checking if an email id entered)
Create interactive elements (like sliders, games etc)