Membuat Project Web Pribadi dengan HTML
83 / 100

Creating a Personal Web Project with HTML

Step 1 – Creating Web Design

Creating a Personal Web Project with HTML starting with design. If there is no design, later we will be in trouble and will not know what to do.

Usually web designs are done by designers, after that it is submitted to the programmer to be converted into HTML.

In this project, we will create three web pages, that is home, contact, and about. The design used is a design in the form of wireframe or sketch.

Here are the designs for each page:

1. Home Page Design

Desain halaman home

The home page is the main page that will be opened the first time a visitor opens the website. This page contains menu, Photo, text, and table.

2. Contact Page Design

Desain halaman home

The contact page is a page that contains a form to contact the website owner.

3. About . Page Design

Desain halaman home

The about page is a page that contains complete information about the website.

Step 2 - Starting a Web Project

Please create a new folder with the name websiteku.

After that create a folder image and video in the folder websiteku. Folder image will we use to save the image and video to save the video.

So that later our folder structure will be like this:

  • 📁 image
    • 🖼️ foto-profile.jpg
  • 📁 video
    • 🎞 video-about.webm
  • 📄 cv-name.pdf
  • 📜 index.html
  • 📜 contact.html
  • 📜 about.html
  • 🖼️ favicon.ico

The files you need to prepare at this stage are foto-profile.jpg and video-about.webm.

Next, we will start writing code. Please open the folder websiteku with Visual Studio Code.

The method:

Click the menu File, then select Open Folder and look for the folder websiteku.

In this way, we are ready to write code.

Open Folder di Visual Studio Code

Step 3 – Creating Home Page

Please create a new file named index.html in my website folder.

After that, fill with the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ahmad Muhardian Personal Website</title>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="cv-dian.pdf">Download CV</a> |
        <a href="contact.html">Contact</a> |
        <a href="about.html">About me</a>
    </nav>

    <hr />

    <header style="text-align: center;">
        <img src="image/foto-profile.jpg" width="200" height="200" style="border-radius: 50%;"/>
        <h1>Ahmad Muhardian</h1>
        <p>(Web Developer)</p>
    </header>

    <hr />

    <article style="text-align: center;">
        <h2>Overview</h2>
        <p>
            Hi, saya adalah web developer yang berdomisisli di Jakarta.
            Saat ini sedang belajar HTML di Petnai Kode
        </p>
    </article>

    <div style="max-width: 600px; margin: 3em auto">
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>Skill</th>
                    <th>Pengalaman</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <ul>
                            <li>HTML (Expert)</li>
                            <li>CSS (Beginner)</li>
                            <li>Javascript (Beginner)</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Freelancer di Internet</li>
                            <li>Leaeder Local Linux Community</li>
                            <li>Leaeder Local Linux Community</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2020 Ahmad Muhardian.</p>
    </footer>
</body>
</html>

Don't forget to change the name Ahmad Muardian with your name.

If we try to open the file index.html, then the result will be like this:

Halaman home tidak ada gambar

The image can't be displayed because we haven't added the image file in the folder image.

Please add an image file with the name foto-profile.jpg. Make sure the added image has a square or ratio size 1:1. On this project, I used an image with a size of 200×200 pixels.

Download image files: ⬇️ photo-profile.jpg

Menambahkan file gambar

After that, try refreshing the home page or index.html.

So the result:

Halaman home dengan gambar

Step 4 – Create an About Me Page

Create a new HTML file with the name about.html.

Then fill it with the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ahmad Muhardian Personal Website</title>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="cv-dian.pdf">Download CV</a> |
        <a href="contact.html">Contact</a> |
        <a href="about.html">About me</a>
    </nav>

    <hr />

    <article>
        <h1>About Me</h1>
        <p>
            Hi, saya adalah web developer yang berdomisisli di Jakarta.
            Saat ini sedang belajar HTML di Petnai Kode.
        </p>
        <p>
            Saya memang masih baru dalam web development, karena itu
            saya tidak akan pernah berhenti belajar.
        </p>
        <p>
            Saya ingin menguasai bahasa HTML, CSS, dan Javascript.
            Simak video lengkap tentang saya.
        </p>
        <p>
            <video controls>
                <source src="video/video-about.webm" type="video/webm"/>
            </video>
        </p>
    </article>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2020 Ahmad Muhardian.</p>
    </footer>
</body>
</html>

Same as home page, this page also has content in the form of videos to display. But the video file doesn't exist yet.

It's certain that the video will not be able to be shown:

Halaman About tanpa video

Because of that, please add the video file to the folder video by the name video-about.webm.

Menambahkan File Video

If you don't have the file yet, please download at this link:

⬇️ video-about.webm

After that, try to open and refresh the about page.

Then the result:

Halaman About dengan video

Step 5 – Create a Contact Page

Create a new file with a name contact.html.

Then fill it with the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ahmad Muhardian Personal Website</title>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="cv-dian.pdf">Download CV</a> |
        <a href="contact.html">Contact</a> |
        <a href="about.html">About me</a>
    </nav>

    <hr />

    <div>
        <h1>Contact Me</h1>
        <form>
            <label for="email">Email</label><br />
            <input type="email" name="email" placeholder="alamat email"/>
            <br />
            <label for="message">Pesan</label><br />
            <textarea name="message" placeholder="Tulis pesan anda..." rows="4" cols="80"></textarea>
            <br />
            <br />
            <input type="submit" value="Kirim" />
        </form>
    </div>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2020 Ahmad Muhardian.</p>
    </footer>
</body>
</html>

Result:

Halaman contact me

This contact form doesn't work yet, because we haven't made the code to send the data.

Step 6 – Create a CV Download Feature

This feature is actually the easiest to make. We just need to add files cv-dian.pdf into my website folder.

Download file: ⬇️ cv-dian.pdf

Menambahkan file pdf

After that, try clicking the menu Download CV. If the PDF opens, then this link is correct.

Step 7 - Create Icons for the Web

To make the website look attractive, we will make icon or favicon. Open, please favicon-generator.org

then select the image to be the icon.

Membuat favicon

After that, we will get the download link and also the HTML code that must be added to the tag <head> so that the icon can be displayed.

Download favicon

After we get the icon, save the icon in the folder websiteku.

Menambahkan favicon

Final, our job is to just create HTML code to display the icon. Please copy the following code:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

Then paste in the tag <head> on every page.

Menambahkan kode favicon

Then the result:

Menampilkan favicon

source : https://www.petanikode.com/html-project/

 1,660 total views,  4 views today

By admin

Writer

Leave a Reply

Your email address will not be published.

Web Hosting Murah Yang Terbaik Di Indonesia