Excel Tech Hub

💻 Web Design Lesson 7 – Adding Images to a Website

Images make a website more attractive and engaging. In HTML, images are added using the tag.

Example:



Explanation:

🔹 src – The location or name of the image
🔹 alt – Text that describes the image if it fails to load

Example in a webpage:

Welcome to My Website



This will display an image on your webpage.

📌 Tip: Always keep your images in the same folder as your HTML file for easy access.

➡️ Next lesson: We will learn how to add links so users can move between pages or visit other websites.

💻🚀

📚 Web Design Lesson 6 – Understanding HTML Structure

When creating a website, every web page follows a basic HTML structure. This structure helps the browser understand how to display your content.

A simple HTML page has three important parts:

🔹 – This is the root of the web page. Everything on the page is inside this tag.

🔹 – This section contains information about the page like the title, meta tags, and links to styles or scripts.

🔹 – This is where the actual content appears such as text, images, buttons, and videos.

Example:




My First Website



Welcome to My Website
This is my first web page.




This is the foundation of every website on the internet.

🚀 Next Lesson: I will show you how to add images and links to your website.

Web Design Lesson 6 – Viewing Your Web Page in a Browser

After creating your index.html file, the next step is to open it in a web browser to see your website.

Simply follow these steps:

1️⃣ Save your file as index.html
2️⃣ Go to the folder where the file is saved
3️⃣ Double-click the file or right-click and choose Open with Chrome / Edge / Firefox

Your browser will display the webpage you created with HTML.

This is how developers test and see their websites while building them.

In the next lesson, we will learn how to add headings and paragraphs to your webpage.

Excel Tech Hub – Learn Tech, Build the Future.

💻🚀

🚀 Learn Web Design Step 2: Installing Visual Studio Code 🚀

Ready to start coding? First, you need a code editor, and Visual Studio Code (VS Code) is perfect for beginners and pros alike!

Steps to Install:

1. Go to https://code.visualstudio.com/

2. Click Download for your operating system (Windows, Mac, or Linux)

3. Open the installer and follow the prompts

4. Launch VS Code and explore the interface – you’re ready to code!

💡 Pro Tip: Install some extensions like Prettier or Live Server to make coding easier and faster!

📌 Next post: I’ll show you how to set up your first project in VS Code.

Visual Studio Code - The open source AI code editor Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.