Web Development Basics
- Introduction to HTML and CSS
- Basic HTML page Structure
- HTML Elements and Tags(Part 1)
- HTML Elements and Tags(Part 2)
- Introduction to CSS
- CSS selector and properties
Introduction to HTML and CSS
HTML(HyperText Markup Language)
- Used to create the structure of a webpage
- Define what content appears on the page
- Example headings ,paragraphs, images, forms
Think of HTML as the skeleton of a webpage.
Collection of Tags
We use various HTML tags to structure, organize and display content in different formats.
HTML is like a building which is properly constructed but not decorated with any interior or paintings
HTML is mainly used to create static structure. Dynamic behavior is added using JavaScript.
Basic HTML Page Structure
Every Page follows a fixed structure:
index.html
<!DOCTYPE html>
<html>
<head>
<title> My First page </title>
</head>
<body>
<h1> Hello World</h1>
</body>
</html>
Output:
- Read <!DOCTYPE html>-->Uses HTML5 Standards mode
- Enters <html> -->starts webpage
- Reads<head>--> Get Page info
- Sets browser tab title
- Read <body> -->Display content
Tag Purpose
<h1>--</h1> To Present the data in different heading formats.
<p>--</p> To Present the data in paragraph formats
<br/> To Put a line break
<hr> To draw a horizontal line.
<b>/</strong> To Present the data in bold format
<i>/<em> To Present the data in italic format
Note: Every tag must be closed properly(Except Some tags like <br>,<hr>,<img> do not need closing tags>
- HTML Elements and Tags(Part 1)
What are tags and why are they used ?
Tags are used to present the data in proper order in a web-page
- Headings, Sub-headings
- Paragraphs
- Strong
- Emphasize
- Break
- Horizontal line
We can present page titles, sub-titles, images, links etc..in the web pages.
Tag Full form Purpose
<!DOCTYPE html>,Document type Declaration ,Tells the browser that the doc is written in HTML5
<html>,Hypertext markup language ,Root element that wraps the entire HTML document
<head>,Head section ,Contains metadata(not visible on the page) like title,charset,styles
<meta>,metadata,Provides information about the page(encodingm,viewport,SEO..etc)
<meta charset="UTC-8">,character set ,Ensures correct display of all languages and symbols
<meta name='viewport">,Viewport meta tag,Makes the webpage responsive on mobile devices
<title>,Title,sets the browser tab title
<style>,Style sheet,Used to write internal CSS for styling the page
<body>,Body section,contains all visible content shown to the user
<header>,Header section,Represents the top section of the page (title,intro,logo)
<h1>Heading1 ,main heading of the page (highest priority)
<h2>Heading2,Subheading of the page (highest priority)
<p>Paragraph,Used to display blocks of text
<main>Main content ,Holds the primary content of the page
<section>section,Group content together logically
<u1>unorder list,Displays list where order does not matter
<lit>list, represents an individual item display the list
<footer> footer,represents botton section of the page
<a> Anchor ,Create a clickable link to another page
Task1:
RGB(211, 211, 211) for each Color had their own code, that is RCB code and Hex formatted code .
Padding adjustment for particular side, padding all side padding:20px;
padding-left:20px;padding-right:20px; padding-top:20px; padding-bottom:20px;
- Structure tags: --><html>,<head>,<body>
- Content tags:--><h1>,<p>,<ul>,<li>
- Layout tags:--><header>,<main>,<section>,<footer>
- Style tag: --><style>
- Utility tag:--><a>,<meta>
CSS
Introduction CSS
CSS(cascading Style sheet)
Used to design and style HTML elements
Controls colors ,fonts, layout,spacing,resposiveness
Thinks CSS is clothes and appearance of the skeleton
Task1:
index1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> My Second page </title>
<link rel="Stylesheet" href="style.css">
<style>
#sec1{
background-color: gold;
}
.ccit{
background-color: rgb(128, 0, 255);
font-weight: 600;
}
</style>
<body style="background-color:blanchedalmond!important;">
<main>
<header>
<h1>SQL Statements</h1>
</header>
<h2>
Most of the actions you need to perform on a database are done with SQL statements.
</h2>
<section id="sec1">
SQL statements consist of keywords that are easy to understand.
</section>
<section>
<p>
<h2>SQL Tutorial</h2>
<h2>Our SQL tutorial will teach you how to use SQL in: </h2>
<ul class="ccit">
<li>MySQL</li>
<li>SQL Server</li>
<li>MS Access</li>
<li>Oracle</li>
<li>Sybase</li>
<li>Informix</li>
<li>Postgres</li>
</ul>
</p>
</section>
<button type="button" id="btn1" > Button</button>
<p>
The following SQL statement returns all records from a table named "Customers":
</p>
<footer>
<p>Regards,</p>
<p><a href="https://oracleask.blogspot.com/2026/01/python-39.html" target="_blank">Please Visit our blog</a> </p>
</footer>
</main>
</body>
</html>
Output:
Task2:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> My First page </title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<header>
<h1> Learning SQL </h1>
</header>
<main>
<section>
SQL is a standard language for storing, manipulating and retrieving data in databases.
</section>
<section>
<p>
<h2>SQL Tutorial</h2>
<h2>Our SQL tutorial will teach you how to use SQL in: </h2>
<ul">
<li>MySQL</li>
<li>SQL Server</li>
<li>MS Access</li>
<li>Oracle</li>
<li>Sybase</li>
<li>Informix</li>
<li>Postgres</li>
</ul>
</p>
</section>
<section>
<h2> SQL Exercises </h2>
Many chapters in this tutorial end with an exercise where you can check your level of knowledge.
<p>
Which SQL statement is used to select all records from a table named 'Customers'?
<br>
<ul>
<li> SELECT * FROM Customers; </li>
<li> SELECT ALL FROM Customers; </li>
<li> SELECT FROM Customers; </li>
</ul>
</p>
</section>
<footer>
<p>Regards,</p>
<p><a href="https://oracleask.blogspot.com/2026/01/python-39.html" target="_blank">Please Visit our blog</a> </p>
</footer>
</main>
</body>
</html>
Style.css
body {
font-family: Arial;
line-height:1.6;
width:80%;
background-color: #f4f6f8;
margin:30x; padding:25px;
border-radius:60px;
}
main {
font-family: Arial;
line-height:1.6;
width:80%;
background-color: #f4f6f8;
margin:30x; padding:25px;
border-radius:60px;
}
header{
background-color: #2c3e50;
color: white;
padding:20px;
text-align:center;
}
section{
margin-bottom:25px;
}
h2{
background-color: #f4f6f8;
border-bottom:2px solid #ddd;
padding: 5px;
}
ul{
margin-left:20px;
}
footer{
text-align:left;
padding:15px;
background-color: #2c3e50;
color:white;
}
footer a {
color:#ffd700;
}
Output:
--Thanks
No comments:
Post a Comment