Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
12 views

Basic HTMLWeb Page

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

Basic HTMLWeb Page

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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