In this section i am learned about the new tags and CSS properties used to make the simple portfolio website
In creating the website user can subdivides the web page in to <header> <section> <footer> it will helps the user to display the particular content in webpage
Header Element:
It is used to set the navigation link and also it describe what are the content this webpage holds
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<style>
h1{
border: solid;
text-align : center;
}
</style>
</head>
<body>
<header>
<h1>SELVAKUMAR</h1>
</header>
</body>
</html>
Output:
Section element:
It is one of the part in web page to describe the content part by part
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<style>
h1{
border: solid;
text-align : center;
}
</style>
</head>
<body>
<header>
<h1>SELVAKUMAR</h1>
</header>
<section>
<h2> ABOUT ME</h2>
<P>
I am selvakumar . I completed my B.E computer science in Muthayammal Engineering College in Rasipuram (Namakkal District) at 2023.
After ny college I joined the Non IT job as process executive in Trayee Business solution pvt limited in patinapakkam in chennai.
</P>
</section>
</body>
</html>
Output:
Footer element:
It defines the bottom of the webpage to describe some content about user
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<style>
h1{
border: solid;
text-align : center;
}
footer{
text-align: center;
color: brown;
}
</style>
</head>
<body>
<header>
<h1>SELVAKUMAR</h1>
</header>
<section>
<h2> ABOUT ME</h2>
<P>
I am selvakumar . I completed my B.E computer science in Muthayammal Engineering College in Rasipuram (Namakkal District) at 2023.
After ny college I joined the Non IT job as process executive in Trayee Business solution pvt limited in patinapakkam in chennai.
</P>
</section>
<footer>
SELVA@2001
</footer>
</body>
</html>
Output:
TYPES OF ELEMENTS IN HTML:
1.BLOCK ELEMENT
2.INLINE ELEMENT
- BLOCK ELEMENT:
It Occupies the full width of the web page
It start on new line only
Ex:
<p> - paragraph , <h1> - Heading , <ol>, <ul> <li>- list, <div>, <footer>, <article>,<table>
- INLINE ELEMENT:
It Occupies the how much width it required in web page
It doesn't start on new line only
Ex:
<a>,<img>,<br>,<button>,<label>.
LIST TAG IN HTML:
List tag represents the set of related content about customer declared topic
List tag classified in to two types:
Ordered List
Unordered List
Ordered List:
It use the sequential markers like number,letter
Ex:
<ol>
<li>About Me</li>
<li>Experience</li>
<li>Hobbies</li>
<li>Skills</li>
</ol>
Output:
Unordered List:
It uses the bullet points to refer the unordered list
Ex:
<li>About Me</li>
<li>Experience</li>
<li>Hobbies</li>
<li>Skills</li>
</ul>
Output:
Anchor tag in HTML:
<a> - > It is used to create the hyper link to navigate the particular content is same web page
<a href =""> </a> - > href is the destination to holds the link to navigate in web page
Ex:
<ul>
<li><a href=""> About Me</a> </li>
<li> <a href=""> Experience/<a> </li>
<li> <a href="">Hobbies</a> </li>
<li><a href=""> Skills</a> </li>
</ul>
Output:
Some of the CSS PROPERTIES:
- Text-align
- Text-decoration
- Gap
- Display
Text-align:
It is used to align the text content in the web page
It is applicable for only block element in HTML
EX:
<head>
<title>Portfolio</title>
<style>
h1{
border: solid;
text-align : center;
}
footer{
text-align: center;
color: brown;
}
</style>
</head>
<body>
<header>
<h1>SELVAKUMAR</h1>
<ul>
<li><a href=""> About Me</a> </li>
<li> <a href=""> Experience/<a> </li>
<li> <a href="">Hobbies</a> </li>
<li><a href=""> Skills</a> </li>
</ul>
</header>
Output:
Text-decoration
It is used to decorate the particular line in text of HTML Content
Example Before Applying Decoration:
Example After Applying Decoration:
a{
text-decoration: none;
}
</style>
</head>
<body>
<header>
<h1>SELVAKUMAR</h1>
<ul>
<li><a href=""> About Me</a> </li>
<li> <a href=""> Experience</a></li>
<li> <a href="">Hobbies</a> </li>
<li><a href=""> Skills</a> </li>
</ul>
Display:
User can use the display properties to hide or show the content in web pages
Ex:
Before:
After:
Gap:
It is used to provide the space between row and column
Ex:
ul{
display: flex;
gap: 30px;
}
Output:
Simple portfolio :
code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<style>
h1{
border: solid;
text-align : center;
}
footer{
text-align: center;
color: brown;
}
a{
text-decoration: none; -> it remove the text decoration
}
ul{
list-style-type: none; -> it remove the list type
display: flex; -> display the content in row
gap: 30px; -> it provide the gap between the text
}
</style>
</head>
<body>
<header>
<h1>SELVAKUMAR</h1>
<ul>
<li><a href=""> About Me</a> </li>
<li> <a href=""> Experience</a></li>
<li> <a href="">Hobbies</a> </li>
<li><a href=""> Skills</a> </li>
</ul>
</header>
<section>
<h2> ABOUT ME</h2>
<P>
I am selvakumar . I completed my B.E computer science in Muthayammal Engineering College in Rasipuram (Namakkal District) at 2023.
After ny college I joined the Non IT job as process executive in Trayee Business solution pvt limited in patinapakkam in chennai.
</P>
</section>
<footer>
SELVA@2001
</footer>
</body>
</html>
Output:
Top comments (0)