Scribd
Upload
10 views

Basic HTMLWeb Page

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

Basic HTMLWeb Page

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Here's a simple example of web page design using HTML.

This example creates a basic


webpage that includes a header, navigation menu, content area, and footer.

### Example: Basic HTML Web Page

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
nav {
margin: 20px;
text-align: center;
}
nav a {
margin: 15px;
text-decoration: none;
color: #4CAF50;
font-weight: bold;
}
.content {
padding: 20px;
background-color: #f4f4f4;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>

<header>
<h1>Welcome to My Web Page</h1>
</header>

<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>

<div class="content">
<h2>About Me</h2>
<p>Hello! I'm learning web development. This is a simple webpage created
with HTML and CSS.</p>

<h3>Services</h3>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>SEO Optimization</li>
</ul>
</div>

<footer>
<p>&copy; 2024 My Simple Web Page</p>
</footer>

</body>
</html>
```

### Explanation of the Code

1. **HTML Structure**
- The page begins with the `<!DOCTYPE html>` declaration, which defines the
document type.
- The `<html>` tag wraps the entire HTML document.
- The `<head>` section contains metadata, including the character set, viewport
settings, and the title of the webpage.
- The `<style>` tag within the head section contains CSS styles for formatting
the page.

2. **Header**
- The `<header>` section includes a main heading (`<h1>`) that welcomes visitors
to the webpage.

3. **Navigation**
- The `<nav>` section contains a list of links (`<a>` tags) that provide
navigation to different sections of the webpage.

4. **Content Area**
- The `.content` `<div>` contains additional headings (`<h2>`, `<h3>`) and
paragraphs of text, as well as an unordered list of services offered.

5. **Footer**
- The `<footer>` section includes copyright information and is styled to match
the header.

### Running the Example


1. Copy the code into an HTML file (e.g., `index.html`).
2. Open the file in a web browser.
3. You will see a simple web page layout with a header, navigation menu, content
area, and footer.

This example provides a foundational understanding of HTML structure and how to


create a basic webpage layout. You can further expand upon this by adding more
sections, images, or interactivity using JavaScript.

You might also like