Scribd
Upload
4 views

Creating Your Own Website Using HTML

This document provides a step-by-step guide for creating a simple website using HTML, including setting up the environment, creating basic HTML files, and adding media and CSS. It also outlines various free hosting options such as GitHub Pages, Netlify, and Vercel for deploying the website online. The guide is aimed at beginners looking to learn web development and offers additional resources for more advanced features.

Uploaded by

Hsu TintTae
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Creating Your Own Website Using HTML

This document provides a step-by-step guide for creating a simple website using HTML, including setting up the environment, creating basic HTML files, and adding media and CSS. It also outlines various free hosting options such as GitHub Pages, Netlify, and Vercel for deploying the website online. The guide is aimed at beginners looking to learn web development and offers additional resources for more advanced features.

Uploaded by

Hsu TintTae
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Creating your own website using HTML is a great way to start learning web development.

Here's a
simple step-by-step guide to get you started:

1. Set Up Your Environment

1. Install a Code Editor:

o Download a text editor like Visual Studio Code or Notepad++.

2. Create a Folder for Your Website:

o Make a folder on your computer to organize your website files (e.g., MyWebsite).

2. Create the Basic HTML File

1. Open your code editor and create a new file.

2. Save it as index.html in your website folder.

3. Add this basic structure to your file:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My First Website</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

header {

background-color: #4CAF50;

color: white;

text-align: center;

padding: 1em 0;

}
nav {

text-align: center;

margin: 20px 0;

nav a {

margin: 0 15px;

text-decoration: none;

color: #4CAF50;

footer {

background-color: #4CAF50;

color: white;

text-align: center;

padding: 1em 0;

position: absolute;

bottom: 0;

width: 100%;

</style>

</head>

<body>

<header>

<h1>Welcome to My Website</h1>

</header>

<nav>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Contact</a>

</nav>

<main>

<section>
<h2>About Me</h2>

<p>This is a section where you can write about yourself.</p>

</section>

</main>

<footer>

<p>&copy; 2024 My First Website</p>

</footer>

</body>

</html>

3. Open the Website in Your Browser

1. Locate the index.html file you just created.

2. Double-click it to open it in your web browser. You’ll see your first website!

4. Add More Pages

1. Create additional HTML files (e.g., about.html, contact.html).

2. Link them using the <a> tags in the navigation section:

3. <nav>

4. <a href="index.html">Home</a>

5. <a href="about.html">About</a>

6. <a href="contact.html">Contact</a>

7. </nav>

5. Add Media and Enhancements

1. Images: Add images with:

2. <img src="image.jpg" alt="Description" width="300">

Save your images in the same folder as your HTML files or in a subfolder like images/.

3. Links: Add external links with:

4. <a href="https://www.example.com" target="_blank">Visit Example</a>

5. Audio/Video: Use the <audio> and <video> tags:

6. <audio controls>
7. <source src="audio.mp3" type="audio/mpeg">

8. </audio>

6. Customize with CSS

1. Create a new file called style.css in your folder.

2. Link it to your HTML using this line inside the <head>:

3. <link rel="stylesheet" href="style.css">

4. Add CSS rules in style.css to change your website’s appearance:

5. body {

6. background-color: #f4f4f9;

7. color: #333;

8. font-family: Arial, sans-serif;

9. }

7. Host Your Website Online

1. Use platforms like GitHub Pages, Netlify, or Vercel.

2. Follow their guides to upload your files and make your site accessible online.

If you'd like a more advanced or interactive website, you can learn JavaScript and frameworks like
Bootstrap to enhance functionality and design!

Hosting your website for free is a great option for personal projects or learning purposes. Here's how
you can do it:

1. GitHub Pages

GitHub Pages is a free and reliable way to host static websites (HTML, CSS, and JavaScript).

Steps:

1. Create a GitHub Account:

o Sign up at GitHub if you don't already have an account.

2. Create a Repository:

o Go to your GitHub dashboard, click "New Repository", and name it (e.g., my-
website).
o Make it public.

3. Upload Your Website Files:

o Drag and drop your HTML, CSS, and other files into the repository or use Git to push
them from your computer.

4. Enable GitHub Pages:

o Go to the repository's Settings > Pages.

o Under "Branch," select main and click Save.

o Your website will be live at https://<your-username>.github.io/<repository-name>.

2. Netlify

Netlify offers free hosting for static websites with custom domains.

Steps:

1. Create an Account:

o Sign up at Netlify.

2. Upload Your Website Files:

o Drag and drop your project folder (containing index.html) into Netlify's dashboard.

3. Deploy:

o Netlify will automatically create a URL for your website, such as https://your-site-
name.netlify.app.

4. (Optional) Custom Domain:

o You can link a custom domain for free.

3. Vercel

Vercel is another great option, particularly for projects involving JavaScript frameworks like React.

Steps:

1. Create an Account:

o Sign up at Vercel.

2. Upload Your Project:

o Drag and drop your folder into Vercel's dashboard or use GitHub/GitLab/Bitbucket
integration to deploy directly.

3. Deploy:

o Your website will be live at a URL like https://your-site-name.vercel.app.


4. Google Drive (for Small Projects)

You can use Google Drive to host small static websites.

Steps:

1. Upload Your Files:

o Place your HTML files in Google Drive.

2. Share Publicly:

o Right-click the file and enable public sharing.

3. Use a Direct Link Generator:

o Use tools like Google Drive Direct Link Generator to create a link to your website.

5. Firebase Hosting

Firebase is a free hosting option from Google, ideal for small projects and static websites.

Steps:

1. Install Firebase CLI:

o Install Node.js and then run:

o npm install -g firebase-tools

2. Initialize Firebase:

o Login to Firebase:

o firebase login

o Create a project folder and initialize:

o firebase init

3. Deploy:

o Place your index.html in the public/ folder.

o Run:

o firebase deploy

o Your site will be live on a Firebase-generated URL.

6. Free Hosting Platforms

• InfinityFree (infinityfree.net)
Offers free hosting with custom domains and no ads.
• 000WebHost (000webhost.com)
Provides free hosting with easy setup.

Best Option for Beginners

If you're just starting, GitHub Pages is the simplest and most reliable option for static websites. If you
need custom domains or advanced features, try Netlify or Vercel.

Let me know if you need help with any of these steps!

You might also like