How to create a basic HTML website

Hello guys, I present to you this simple HTML website coded from scratch. The website is made up of more than 10 HTML tags and has a standard HTML structure.

This website is a project assignment from my Pirple course in HTML fundamentals. The site is about my favourite book; a novel by a renowned Nigeria Auhor Chinua Achebe titled “Things fall apart”.

The site has a header section where I placed center-aligned links to serve as navigation. It also has an image, video, audio, embeded content in iframe and lastly a survey form that has an input and select tags.

At the buttom of the page is the footer section that has a copyright credit. So far, I’ve learnt a lot of html basics in this course and I’m eager to learn more and become a professional website designer.

see the codes below:

<!DOCTYPE html>
<html>
<head>
<!– Meta tags showing the description, keywords, author and title of the website–>
<meta charset=”utf-8″>
<meta name=”description” content=”Things Fall Apart”>
<meta name=”keywords” content=”HTML,Things Fall Apart, Chinua Achebe, Pirple”>
<meta name=”author” content=”Joseph Ihemekwa”>
<meta name=”viewport” content=”width=device-width”>
<title>My Favourite Book | Home</title>
<base href=”file:///C:/Users/Joe/Desktop/project1/” target=”_blank”>
</head>
<body>
<!– Start Header Block: Shows the title of the Book and Navigation–>
<section>
<header>
<div align=”center”>
<h1>Things Fall Apart</h1>
<!–Navigation links–>
<p>
<strong><a href=”index.html”>Home</a> | <a href=”about-book.html”>About the Book</a> | <a href=”about-author.html”>About the Author</a></strong>
</p>
</div>
</header>
</section>
<!– End Header Block: Shows the title of the Book and Navigation–>
<hr />

<!– Start Image and about section showing the cover of the book and a brief description–>
<section>
<div align=”center”>
<img src=”files/image/image.jpg” alt=”Book Cover” />
<br />
</div>
<div>
<h3>About the Book</h3>
<p>
Things Fall Apart is a novel written by Nigerian author Chinua Achebe. Published in 1958, its story chronicles pre-colonial life in the south-eastern part of Nigeria and the arrival of the Europeans during the late nineteenth century…
<br />
<a href=”about-book.html”>Read More>></a>
</p>
</div>
</section>
<!– End Image and about section showing the cover of the book and a brief description–>
<hr />

<!– Start Video and Audio section shows a video from a scene of a movie adapted from the book–>
<section>
<p>
The dramatization of the epic contribution of Professor Chinua Achebe’s book, “Things Fall Apart”. The book, transcribed to more than 300 languages worldwide is renowned for its contribution towards the development of African History as till date, it remains a point of reference far beyond post secondary education in Africa and beyond. It is thought that the account, as portrayed in the book, depicts customs and tradition of the Igbo tribe of Nigeria, and drawn from events as they happened in Ogidi, the Home town of much admired author.
</p>
<div align=”center”>
<em>Watch a clip from the movie: Things fall apart adapted from this book</em>
<br />
<video width=”450″ height=”240″ controls>
<source src=”files/video/video.mp4″ type=”video/mp4″>
</video>
<p>
You can also listen to the audio:
</p>
<audio controls>
<source src=”files/audio/audio.mp3″ type=”audio/mpeg”>
</audio>
<p>
Or listen to the embeded version
</p>
<iframe src=”files/audio/audio.mp3″ width=”100%” height=”80px”></iframe>
</div>
</section>
<!– Start Video and Audio section shows a video from a scene of a movie adapted from the book–>
<hr />

<!– Start Form Section showing a survey form with input, select and button tags–>
<section>
<h2>Survey: Rate My Website</h2>
<p>
Do you like this my simple website? Kindly fill the form below to submit your rating.
</p>
<form action=”mailto:josephihemekwa@gmail.com”>
<label for=”name”>Name</label></label>
<input type=”text” name=”name” required>
<label for=”select”>Select Rating</label>
<select name=”select” required>
<option value=””>
Select
</option>
<option value=”Bad”>
Bad
</option>
<option value=”Fair”>
Fair
</option>
<option value=”Ok”>
Ok
</option>
<option value=”Good”>
Good
</option>
<option value=”Excellent”>
Excellent
</option>
</select>
<button type=”submit” name=”submit”>Submit</button>
</form>
</section>
<!– End Form Section showing a survey form with input, select and button tags–>
<hr />

<!– Start Footer Section–>
<section>
<footer>
<div align=”center”>
<p>
&copy; 2020 Project Website by <strong>Joseph Chuks</strong> | Powered by <a href=”https://www.pirple.com”><strong>Pirple</strong></a>
</p>
</div>
</footer>
</section>
<!– End Footer Section–>
</body>
</html>

 

Views:
91
Article Categories:
Technology

Leave a Reply

Your email address will not be published. Required fields are marked *