Welcome to My Web Page
About Me
I am learning HTML and CSS to create amazing websites!
This is an inspiring quote that I like.
Author of the quote
My Hobbies
- Coding
- Reading
- Traveling
Favorite Coding Languages
- HTML
- CSS
- JavaScript
These are some of the languages I enjoy working with.
function helloWorld() {
console.log('Hello, world!');
}
Coding is fun and powerful!
Contact Me
Multimedia Content
Audio Example
Video Example
CSS3 Introduction
In this lesson, we will start using CSS3 to format the layout of our web page to meet current professional standards. We will be using internal CSS for now, and in the next lesson, we will learn how to move the CSS to an external stylesheet.
Internal CSS
Internal CSS is defined within the <style> tag inside the <head> section of the HTML document. This method is useful for applying styles to a single HTML document.
CSS Selectors and Properties
Here are some CSS selectors and properties used in our example:
- Element Selector: Targets HTML elements directly.
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}.container {
width: 90%;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
}a:hover {
text-decoration: underline;
}New HTML Tags Introduced
Here are some new HTML tags introduced in this lesson:
<header>: Defines a header for a document or section.<nav>: Defines a set of navigation links.<section>: Defines a section in a document.<footer>: Defines a footer for a document or section.
Creating an HTML Document with Explanations
Let’s create an HTML document that incorporates these tags with explanations. Follow these steps:
Open Notepad
- Press the
Windowskey. - Type
Notepadand pressEnter.
Write Your HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Enhanced Web Page</title>
<style>
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
width: 90%;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
}
header {
background: #0056b3;
color: white;
padding: 10px 0;
text-align: center;
border-radius: 8px 8px 0 0;
}
header nav ul {
list-style: none;
padding: 0;
}
header nav ul li {
display: inline;
margin: 0 10px;
}
header nav ul li a {
color: white;
text-decoration: none;
}
header nav ul li a:hover {
text-decoration: underline;
}
h1, h2, h3 {
color: #0056b3;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
margin-top: 30px;
}
h3 {
font-size: 24px;
margin-top: 20px;
}
p, li {
font-size: 18px;
}
code {
background: #e8e8e8;
padding: 2px 4px;
border-radius: 4px;
font-family: "Courier New", Courier, monospace;
}
pre {
background: #f9f9f9;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
overflow-x: auto;
font-family: "Courier New", Courier, monospace;
}
ul, ol {
margin: 20px 0;
padding-left: 40px;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 20px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
a {
color: #0056b3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
footer {
background: #ddd;
color: #333;
text-align: center;
padding: 10px;
border-radius: 0 0 8px 8px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#hobbies">My Hobbies</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>I am learning HTML and CSS to create amazing websites!</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
<blockquote>This is an inspiring quote that I like.</blockquote>
<cite>Author of the quote</cite>
</section>
<section id="hobbies">
<h3>My Hobbies</h3>
<ul>
<li>Coding</li>
<li>Reading</li>
<li>Traveling</li>
</ul>
<h4>Favorite Coding Languages</h4>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<span>These are some of the languages I enjoy working with.</span>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<strong>Coding is fun and powerful!</strong>
</section>
<section id="contact">
<h3>Contact Me</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
</section>
<section id="multimedia">
<h3>Multimedia Content</h3>
<h4>Audio Example</h4>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h4>Video Example</h4>
<video controls width="250">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</section>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
</body>
</html>
Save Your HTML File
- Click on
Filein the menu bar. - Select
Save As.... - In the
Save as typedropdown, selectAll Files. - Name your file
index.htmland clickSave.
View Your Web Page
- Navigate to the location where you saved your file.
- Double-click on
index.html.
Congratulations! You have created an enhanced web page using additional HTML5 tags and internal CSS for styling.
