Part 1: HTML Basics - The Foundation
A website is built using a language called HTML, which stands for HyperText Markup Language. It"s the skeleton of every webpage on the internet.
Core HTML Tags
HTML uses a set of "tags" to give content a specific purpose. Most tags come in a pair: an opening tag and a closing tag. For example, a paragraph starts with `
` and ends with `
`. The content goes in between.Headings
Used for titles and subtitles. There are six levels, from `
` (the most important) to `` (the least).
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
Paragraphs
Used for regular text, like a product description or an article.
<p>This is a paragraph of text.</p>
Images
Used to display a picture. The `src` attribute tells the browser where to find the image, and the `alt` attribute is a description for accessibility.
<img src="image-path.jpg" alt="A descriptive image label.">
Links
Used to connect to another page. The `href` attribute tells the browser the destination.
<a href="https://jsmith66usa1.github.io/Lexp/">Link Text Here</a>
Putting it all together: Your First Webpage
All HTML files have a basic structure. It"s like the blueprint of a house. The `` tag wraps the entire document, which is then split into the `
` (for information about the page) and the `` (for the visible content).To practice writing HTML and see your code in action, you can use a free online editor. This tool allows you to type your code on one side of the screen and see the live result on the other.
<!DOCTYPE html>
<html>
<head>
<title>My E-commerce Website</title>
</head>
<body>
<h1>Welcome to My Shop</h1>
<p>Explore our unique, handmade items.</p>
<h2>Featured Items</h2>
<img src="bracelet.jpg" alt="A beautiful bracelet.">
<p>Handmade Bracelet - $29</p>
<button>Add to Cart</button>
<a href="https://jsmith66usa1.github.io/Lexp/">Learn More</a>
</body>
</html>
Part 2: Creating a Webpage with Gemini Canvas
Now that you know the basics of HTML, let"s learn how to use Gemini as your personal developer to create a webpage. We will use the Gemini Canvas, a special collaborative workspace where you and Gemini can work together on code.
Step-by-Step Guide
Follow these steps to generate a complete e-commerce website using Gemini Canvas. The key is to be clear and specific with your instructions, letting Gemini handle the code generation for you.
Step 1: Start a New Canvas
First, open the Gemini Canvas by clicking the link below. Once it"s open, you can begin a new project by entering a simple prompt that tells it what you want to work on.
Then, enter the following prompt in the canvas:
Please create a new canvas named My Shop for e-commerce website.
Step 2: Add Your Items
Once the canvas is open, you will provide the details for the items you want to sell. Provide all the necessary information in a single, clear request, as shown below.
Here are the items I want to sell:
1. Bracelet $29
2. Diamond necklace $50
3. Indian pottery $60
Step 3: Instruct Gemini to Create the Webpage
This is the most important step. You will tell Gemini to turn your text into a complete, working website. Be specific about what you want to include on the page.
From the items in the canvas, please create a complete webpage using HTML. Include a title, product listings, prices, and an image for each item. Please use bracelet.jpg, diamond_necklace.jpg, and indian_pottery.jpg as placeholders for the product images. Replace any "Add to Cart" button with the venmo.jpg image next to each item. To purchase, scan our Venmo QR code and enter the item"s price. In the Venmo payment note, please add the product number and your email address for shipping confirmation.
Step 4: Enable GitHub Pages
GitHub Pages is the free hosting service. To enable it, navigate to your repository"s **Settings**, then click on **Pages** in the left sidebar. Under "Build and deployment," choose **Deploy from a branch** and select the `main` branch. Click **Save**.
Your website will now be published at a URL that looks like this: `https://your-username.github.io/my-first-website/`.
Part 3: Publishing Your Website with GitHub
Once your website code is complete, the final step is to make it live for the world to see. We will use a service called GitHub to host your website for free.
Step-by-Step Guide
Step 1: Create a GitHub Account
If you don"t have one, start by signing up at the link below. It"s a free service that many developers use to store their code.
Step 2: Create a New Repository
A **repository** (or "repo") is like a folder for your project. On your GitHub dashboard, click the green "New" button to create one. Give it a memorable name, like `my-first-website`, and make sure it"s set to **Public**.
Step 3: Upload Your HTML File
Once the repository is created, you have two options to add your file.
Method 1: Drag and Drop
This is the easiest way to get started. Click the "upload files" link. Drag and drop the HTML file you created with Gemini. The file **must** be named `index.html` for GitHub to recognize it as a website.
After the upload, click the "Commit changes" button to save your work.
Method 2: Create File Directly on GitHub
This method is great if you want to copy and paste the code directly from your Gemini canvas.
- Click the **Add file** dropdown and select **Create new file**.
- Name the file `index.html`.
- Copy the complete code from your Gemini canvas.
- Paste the code into the content area.
- Click the **Commit changes** button.
Step 4: Enable GitHub Pages
GitHub Pages is the free hosting service. To enable it, navigate to your repository"s **Settings**, then click on **Pages** in the left sidebar. Under "Build and deployment," choose **Deploy from a branch** and select the `main` branch. Click **Save**.
Your website will now be published at a URL that looks like this: `https://your-username.github.io/my-first-website/`.