Kode sumber situs web html keren

Pada tutorial ini, kita akan mencoba membuat project web kecil-kecilan. Tujuannya untuk berlatih dan memahami bagaimana cara membuat web

Baik

Langsung saja kita mulai

Langkah 1 – Membuat Desain Web

Pembuatan web dimulai dengan desain. Kalau tidak ada desain, nanti kita akan kesulitan dan tidak tahu mau buat apa

Biasanya desain web dikerjakan oleh desainer, setelah diserahkan ke programmer untuk diubah menjadi HTML

Pada project ini, kita akan membuat tiga halaman web, yakni home, contact, dan about. Desain yang digunakan adalah desain dalam bentuk wireframe atau sketsa

Berikut ini desain untuk tiap-tiap halaman

1. Desain Halaman Rumah

Kode sumber situs web html keren

Halaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka website. Halaman ini berisi menu, foto, teks, dan tabel

2. Desain Halaman Kontak

Kode sumber situs web html keren

Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik website

3. Desain Halaman Tentang

Kode sumber situs web html keren

Halaman about adalah halaman yang berisi informasi lengkap tentang website

Langkah 2 – Memulai Proyek Web

Silahkan buat folder baru dengan nama websiteku

Setelah itu buat folder image dan video di dalam folder websiteku. Folder ________23______ akan kita gunakan untuk menyimpan gambar dan video untuk menyimpan video

Sehingga nanti struktur folder kita akan menjadi seperti ini

  • 📁 image
    • 🖼️
      
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ahmad Muhardian Personal Websitetitle>
      head>
      
      <body>
          <nav>
              <a href="index.html">Homea> |
              <a href="cv-dian.pdf">Download CVa> |
              <a href="contact.html">Contacta> |
              <a href="about.html">About mea>
          nav>
      
          <hr />
      
          <article>
              <h1>About Meh1>
              <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 © 2020 Ahmad Muhardian.p>
          footer>
      body>
      html>
      1
  • 📁 video
    • 🎞
      
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ahmad Muhardian Personal Websitetitle>
      head>
      
      <body>
          <nav>
              <a href="index.html">Homea> |
              <a href="cv-dian.pdf">Download CVa> |
              <a href="contact.html">Contacta> |
              <a href="about.html">About mea>
          nav>
      
          <hr />
      
          <article>
              <h1>About Meh1>
              <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 © 2020 Ahmad Muhardian.p>
          footer>
      body>
      html>
      3
  • 📄
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ahmad Muhardian Personal Websitetitle>
    head>
    
    <body>
        <nav>
            <a href="index.html">Homea> |
            <a href="cv-dian.pdf">Download CVa> |
            <a href="contact.html">Contacta> |
            <a href="about.html">About mea>
        nav>
    
        <hr />
    
        <article>
            <h1>About Meh1>
            <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 © 2020 Ahmad Muhardian.p>
        footer>
    body>
    html>
    4
  • 📜
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ahmad Muhardian Personal Websitetitle>
    head>
    
    <body>
        <nav>
            <a href="index.html">Homea> |
            <a href="cv-dian.pdf">Download CVa> |
            <a href="contact.html">Contacta> |
            <a href="about.html">About mea>
        nav>
    
        <hr />
    
        <article>
            <h1>About Meh1>
            <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 © 2020 Ahmad Muhardian.p>
        footer>
    body>
    html>
    5
  • 📜
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ahmad Muhardian Personal Websitetitle>
    head>
    
    <body>
        <nav>
            <a href="index.html">Homea> |
            <a href="cv-dian.pdf">Download CVa> |
            <a href="contact.html">Contacta> |
            <a href="about.html">About mea>
        nav>
    
        <hr />
    
        <article>
            <h1>About Meh1>
            <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 © 2020 Ahmad Muhardian.p>
        footer>
    body>
    html>
    6
  • 📜
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ahmad Muhardian Personal Websitetitle>
    head>
    
    <body>
        <nav>
            <a href="index.html">Homea> |
            <a href="cv-dian.pdf">Download CVa> |
            <a href="contact.html">Contacta> |
            <a href="about.html">About mea>
        nav>
    
        <hr />
    
        <article>
            <h1>About Meh1>
            <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 © 2020 Ahmad Muhardian.p>
        footer>
    body>
    html>
    _7
  • 🖼️
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ahmad Muhardian Personal Websitetitle>
    head>
    
    <body>
        <nav>
            <a href="index.html">Homea> |
            <a href="cv-dian.pdf">Download CVa> |
            <a href="contact.html">Contacta> |
            <a href="about.html">About mea>
        nav>
    
        <hr />
    
        <article>
            <h1>About Meh1>
            <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 © 2020 Ahmad Muhardian.p>
        footer>
    body>
    html>
    8

File yang perlu kamu selesaikan dalam tahapan ini adalah


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
1 dan

<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
3

Selanjutnya, kita akan mulai menulis kode. Silahkan buka folder websiteku dengan Visual Studio Code

Caranya

Klik menu File, lalu pilih Open Folder dan carilah folder websiteku

Degan begini, kita sudah siap untuk menulis kode

Kode sumber situs web html keren

Langkah 3 – Membuat Halaman Rumah

Silahkan buat file baru bernama


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
5 di dalam folder websiteku

Setelah itu, isi dengan kode berikut


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

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

    <hr />

    <article style="text-align: center;">
        <h2>Overviewh2>
        <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>Skillth>
                    <th>Pengalamanth>
                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 Internetli>
                            <li>Leaeder Local Linux Communityli>
                            <li>Leaeder Local Linux Communityli>
                        ul>
                    td>
                tr>
            tbody>
        table>
    div>

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

Jangan lupa untuk mengubah nama


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <div>
        <h1>Contact Meh1>
        <form>
            <label for="email">Emaillabel><br />
            <input type="email" name="email" placeholder="alamat email"/>
            <br />
            <label for="message">Pesanlabel><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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
4 dengan nama kamu

Jika kita coba membuka file


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
5, maka hasilnya akan seperti ini

Kode sumber situs web html keren

Gambarnya tidak bisa tampil karena kita belum menambahkan file gambar di dalam folder image

Silahkan tambahkan file gambar dengan nama


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
1. Pastikan gambar yang ditambahkan memiliki ukuran persegi atau rasio 1. 1. Pada proyek ini, saya menggunakan gambar dengan ukuran 200x200 piksel

Unduh file gambar. ⬇️ foto-profil. jpg

Kode sumber situs web html keren

Setelah itu, coba refresh halaman home atau


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
5

Maka hasilnya

Kode sumber situs web html keren

Langkah 4 – Membuat Halaman Tentang Saya

Buatlah file HTML baru dengan nama


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
7

Kemudian isi dengan kode berikut


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>

Sama seperti halaman home, halaman ini juga memiliki konten berupa video untuk ditampilkan. Tapi file videonya belum ada

Sudah pasti videonya tidak akan bisa ditampilkan

Kode sumber situs web html keren

Karena itu, silahkan tambahkan file video-nya ke dalam folder video dengan nama

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

Kode sumber situs web html keren

Jika kamu belum punya filenya, silahkan download di link ini

⬇️ video-tentang. webm

Setelah itu, coba buka dan segarkan halaman tentang

Maka hasilnya

Kode sumber situs web html keren

Langkah 5 – Membuat Kontak Halaman

Buatlah file baru dengan nama


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <article>
        <h1>About Meh1>
        <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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>
6

Kemudian isi dengan kode berikut


<html lang="en">

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

<body>
    <nav>
        <a href="index.html">Homea> |
        <a href="cv-dian.pdf">Download CVa> |
        <a href="contact.html">Contacta> |
        <a href="about.html">About mea>
    nav>

    <hr />

    <div>
        <h1>Contact Meh1>
        <form>
            <label for="email">Emaillabel><br />
            <input type="email" name="email" placeholder="alamat email"/>
            <br />
            <label for="message">Pesanlabel><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 © 2020 Ahmad Muhardian.p>
    footer>
body>
html>

Hasilnya

Kode sumber situs web html keren

Form contact ini belum bisa berfungsi, karena kita belum membuat kode untuk mengirim data

Langkah 6 – Membuat Fitur Download CV

Fitur ini sebenarnya paling mudah dibuat. Kita hanya perlu menambahkan file

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
3 ke dalam folder websiteku

Unduh berkas. ⬇️ cv-dian. pdf

Kode sumber situs web html keren

Setelah itu, coba klik menu Download CV. Jika PDF-nya terbuka, maka link ini sudah benar

Langkah 7 – Membuat Ikon untuk Web

Agar websitenya terlihat menarik, kita akan membuat ikon atau favicon. Silahkan buka favicon-generator. orgkemudian pilih gambar yang akan dijadikan ikon

Kode sumber situs web html keren

Setelah itu, kita akan mendapatkan link download dan juga kode HTML yang harus ditambahkan ke dalam tag

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
4 agar ikon bisa ditampilkan

Kode HTML apa saja?

Berikut adalah 9 kode HTML untuk blog dan arti coding tersebut. .
Label Judul. Tag HTML yang pertama yaitu tag judul. .
Deskripsi meta. Selanjutnya, ada meta description. .
3. Tag Tajuk. .
4. Anchor Teks dan Tautan. .
Jangan ikuti. .
6. Teks Alt Gambar. .
7. Tandai Kanonikal. .
9. Tag Huruf Tebal (Tebal)

Apakah HTML bisa membuat website?

Melansir laman TechTarget, HTML merupakan kependekan dari Hyper Text Markup Language. Ini merupakan bahasa markup yang digunakan dapat untuk membuat situs web . Bahasa markup sendiri adalah bahasa pemrograman dalam komputer yang digunakan untuk memproses format teks, gambar, dan berbagai media di dalamnya.

HTML dimulai dengan kode apa?

Secara umum penulisan tag pada html itu berpasang- pasangan dimulai dengan Isi dari konten , Jadi yang dimaksud dengan .

situs web HTML apa?

HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website . .