Scribd
Upload
0 views

Code

HTML

Uploaded by

simonkibru82
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

Code

HTML

Uploaded by

simonkibru82
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

```html

<!DOCTYPE html>
```
- Declares the document type and version of HTML being used (HTML5 in this case).

```html
<html lang="en">
```
- Opens the HTML document and specifies the language as English.

```html
<head>
```
- Begins the head section of the HTML document, which contains metadata and links to resources.

```html
<meta charset="UTF-8">
```
- Sets the character encoding for the document to UTF-8, allowing for a wide range of characters.

```html
<title>Almonds Hotel</title>
```
- Sets the title of the webpage, which appears in the browser's title bar or tab.

```html
<style>
```
- Begins a style block where CSS styles for the webpage are defined.

```css
body {
font-family: Arial, sans-serif;
margin: 0;
text-align: center;
background-color: #f3e5ab;
}
```
- Styles the body of the document:
- Sets the font to Arial or a sans-serif fallback.
- Removes default margin.
- Centers text alignment.
- Sets a light yellow background color.

```css
header {
background-color: #a67c52;
color: white;
padding: 15px;
}
```
- Styles the header:
- Sets a brown background color.
- Changes text color to white.
- Adds padding around the header content.

```css
nav a {
margin: 10px;
color: white;
text-decoration: none;
cursor: pointer;
}
```
- Styles navigation links:
- Adds margin around links.
- Sets link color to white.
- Removes underline from links.
- Changes cursor to pointer on hover.

```css
section {
display: none;
padding: 20px;
}
```
- Hides all sections by default and adds padding for spacing.

```css
section.active {
display: block;
}
```
- Displays sections that have the class `active`, allowing only one section to be visible at a time.

```css
img {
width:150%;
max-width: 1500px;
margin-top: 20px;
}
```
- Styles images:
- Sets their width to 150% (this may cause overflow).
- Limits maximum width to 1500 pixels.
- Adds top margin for spacing.

```html
</style>
```
- Closes the style block.

```html
<script>
```
- Begins a script block for JavaScript code.

```javascript
function showPage(pageId) {
```
- Defines a function named `showPage` that takes an argument `pageId`.

```javascript
const sections = document.querySelectorAll('section');
```
- Selects all `<section>` elements in the document and stores them in the variable `sections`.

```javascript
sections.forEach(section => section.classList.remove('active'));
```
- Loops through each section and removes the `active` class, hiding all sections.
```javascript
document.getElementById(pageId).classList.add('active');
```
- Adds the `active` class to the section with the ID matching `pageId`, making it visible.

```html
}
</script>
```
- Closes the JavaScript function and script block.

```html
</head>
<body>
```
- Closes the head section and opens the body section where visible content is placed.

```html
<header>
```
- Starts the header section of the page.

```html
<h1>Almonds Hotel</h1>
```
- Displays the main title of the hotel in an `<h1>` heading.

```html
<nav>
```
- Begins a navigation section.

```html
<a onclick="showPage('home')">Home</a>
<a onclick="showPage('about')">About Us</a>
<a onclick="showPage('services')">Services</a>
<a onclick="showPage('contact')">Contact Us</a>
```
- Creates navigation links that call the `showPage` function with corresponding IDs when clicked,
allowing users to switch between different sections of the site.

```html
</nav>
</header>
```
- Closes the navigation and header section
s.

```html
<!-- Home Page -->
<section id="home" class="active">
```
- Starts the home section with an ID of "home" and sets it as active (visible).

```html
<h2>Luxury and peace that excel,</h2>
<h2>Welcome to Almonds Hotel</h2>
```
- Displays two subheadings welcoming visitors to the hotel.
```html
<p>Discover peace and comfort at Almonds Hotel, where hospitality meets excellence.</p>
```
- Adds a paragraph describing what guests can expect from their stay.

```html
<img src="ht.jpg" alt="Hotel View">
```
- Displays an image of the hotel with an appropriate alt text for accessibility.

```html
</section>
```
- Closes the home section.

```html
<!-- About Us Page -->
<section id="about">
```
- Starts the about section with an ID of "about".

```html
<h2>About Almonds Hotel</h2>
```
- Displays a heading for the about section.

```html
<p>Since 1994, Almonds Hotel has been dedicated to creating unforgettable guest
experiences.</p>
```
- Adds a paragraph providing background information about the hotel.

```html
<img src="hi.jpg" alt="Hotel Interior">
```
- Displays an image related to the hotel's interior with alt text.

```html
<img src ="" alt="">
```
- An empty image tag that needs a valid source and alt text for proper use. It should be removed or
updated if not needed.

```html
</section>
```
- Closes the about section.

```html
<!-- Services Page -->
<section id="services">
```
- Starts the services section with an ID of "services".

```html
<h2>What We Offer</h2>
```
- Displays a heading for services offered by the hotel.

The following `<div class="service">` blocks define different services offered:


1. **Luxury Rooms**
```html
<div class="service">
<h3>Luxury Rooms</h3>
<img src="l.jpg" alt="Luxury Rooms">
<p>Experience unmatched comfort in our elegantly designed rooms.</p>
</div>
```

2. **Spa and Wellness**


```html
<div class="service">
<h3>Spa and Wellness</h3>
<img src="s.jpg" alt="Spa and Wellness">
<p>Rejuvenate your mind and body with our world-class spa services.</p>
</div>
```

3. **Fine Dining**
```html
<div class="service">
<h3>Fine Dining</h3>
<img src="d.jpg" alt="Fine Dining">
<p>Savor exquisite dishes crafted by our renowned chefs.</p>
</div>
```

4. **Swimming Pools**
```html
<div class="service">
<h3>Swimming pools </h3>
<img src="sp.jpg" alt="Event Hosting">
<p>Host memorable events with our premium facilities and support.</p>
</div>
```

Each service block contains a heading, an image, and a description paragraph.

```html
</section>
```
- Closes the services section.

```html
<!-- Contact Us Page -->
<section id="contact">
```
- Starts the contact section with an ID of "contact".

```html
<h2>Contact Us</h2>
```
- Displays a heading for contact information.

```html
<p>Email: [email protected]</p>
<p>Phone: 0911453612</p>
<p>Address: Nambia Street,Bole</p>
```
- Provides contact details including email, phone number, and address.
```html
</section>
</body>
</html>
```
- Closes the contact section, body, and finally, the HTML document itself.

This completes your HTML code explanation! If you have any further questions or need clarification on
any part, feel free to ask!

You might also like