Project HTML E1 Semantic Web
Topics : Why use Semantic HTML? , Header and Nav , Main and Footer , The Aside Element , Figure and Figcaption , Audio and Attributes , Video and Embed
Project Title: OnePage Website
- Open VS Code and Create an html file with your name like
john.htmlin project folder and add this code to it:
<!DOCTYPE html> <html> <body></body> </html>
Create header tag and put h1 tag at enter "OnePage Website" into it.
Next to h1 tag add nag tag to put navigation links into it.
Inside nav tag add an unordered list to show 3 links as follow:
- Home Page (url: #)
- Products (url: #Products)
- Services (url: #Services)
Create a main tag after header tag to hold main contnet.
Add an article tag inside main tag and put h2 and paragraph inside article and enter some text on it.
Add a figure tag next to p tag and add img and figurecaption to describe the image. Image url is "https://via.placeholder.com/350x150", caption is "sample image".
Next to article tag, add aside tag and enter some text to describe the article.
Add a audio tag and set source to "https://ia800406.us.archive.org/23/items/PeterHernandezPodcastAudioPlaceholder/AudioPlaceholder.mp3"
Add a video tag and set source to "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
Add footer tage and enter "OnePage Website. All right reserved."
Want to get reviewed?
Send Pull Request. Check how to deliver your code: https://codingwithbasir.com/how-to-deliver-projects/
Download Free eBook https://codingwithbasir.com/download