Cara menggunakan langkah membuat web html?

By On Sunday, September 25th, 2022 Categories : Tanya Jawab

Cara menggunakan langkah membuat web html? – Apa kabar bapak dan ibu semua, Terima Kasih sudah berkunjung ke blog trendwisata.com ini. Siang ini, saya dari portal TrendWisata mau menampilkan tips yang cool yang mengulas Cara menggunakan langkah membuat web html?. Ayo ibu dan bapak cek berikut ini:

Pada kesempatan kali ini kita akan membahas cara membuat website dengan menggunakan html dan css. Namun harus di pastikan setidaknya kalian sudah memahami dasar-dasar html.

Sebetulnya saat ini untuk membuat website itu sangat mudah, bahkan ada beberapa CMS yang telah menyediakan fitur website builder sehingga kita bahkan tidak perlu sedikitpun untuk ngoding. Namun sangat baik jika kalian memahami cara membuat website dari nol tanpa bantuan tools atau CMS yang ada
saat ini.

Secara umum website yang sering kita jumpai di internet menggunakan bahasa markup HTML dan CSS (Cascading Style Sheet) serta bahasa pemrograman javascript dan PHP. Namun untuk membuat website sederhana bersifat statis cukup dengan HTMLdan CSS saja.

  • Kenapa Harus
    Belajar CSS Juga?
  • Oke, Saya harus mulai dari mana ?
  • Mengenal Struktur Dasar Dokumen HTML
  • Belajar Dasar-Dasar HTML
  • Belajar Penggunaan Dasar CSS
  • Menentukan Struktur navigasi
  • Membuat Layout Website
  • Studi Kasus : Membuat Website Sederhana Dengan HTML dan CSS
  • Download Source Code

Kenapa Harus Belajar CSS Juga?

Untuk menjawab pertanyaan ini perhatikan ilustrasi gambar di bawah ini:

Saat membangun sebuah website saya ilustrasikan seperti membuat kerangka bangunan rumah, html ibaratnya komponen-komponen untuk membangun sebuah rumah sedangkan CSS akan membuat komponen-komponen tersebut menjadi satu kesatuan yang utuh sehingga
rumah tersebut bisa dibangun dengan pas dan menarik.

CSS kita gunakan untuk mengatur jarak antar elemen, ukuran (tinggi, lebar), ukuran dan jenis font, warna, efek hover dan masoh banyak lagi.

Jadi kita tidak bisa hanya memakai html saja untuk membuat website, kita membutuhkan css juga.

Oke, Saya harus mulai dari mana ?

Untuk mulai langkah awal kita butuh tools untuk coding dan menjalankan hasil
codingan. Secara sederhana yang kita butuhkan hanya teks editor dan broeswer.

1. Teks Editor

Teks editor ini akan menjadi tools untuk kalian membuat kode-kode HTML dan CSS yang di
butuhkan untuk membangun sebuah halaman website.

Notepad menjadi aplikasi yang paling standar dan sudah tersedia di platform windows. Jika kalian ingin yang profesional sebaiknya kalian pakai notepad++ atau sublime text 3. Dari ketiganya yang paling saya rekomendasikan adalah sublime text 3.

Semua aplikasi di atas bisa kalian download secara gratis di internet.

2. Browser

Website html
yang kita buat melalui teks editor selanjutnya akan kita jalankan di aplikasi browser.

Browser yang saya rekomendasikan adalah chrome dan firefox kalian bisa memilih salah satunya.

Mengenal Struktur Dasar Dokumen HTML

Secara umum struktur dasar dari suatu dokumen HTML adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Web dengan HTML dan CSS - Kelasprogrammer.com</title>
</head>
<body>
    <!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>

Di dalam HTML versi ke-5 setiap membuat dokumen html harus di awali dengan sintak <!DOCTYPE html> sintak ini berfungsi untuk
memberitahu kepada browser bahwa dokumen html yang dibuat menggunakan versi ke-5, fungsi lain sekaligus membantu browser untuk menampilkan setiap elemen html dengan baik (karena menggunakan versi terbaru).

Selanjutnya dokumen HTML selalu di mulai dengan tag pembuka <html> dan kemudian di akhiri dengan penutup </html>

Setiap tag di html di desain memiliki pasangan, ada tag pembuka dan tag penutup, walaupun ada juga beberapa tag yang single
(berdiri sendiri) seperti <br> untuk membuat baris baru <hr> untuk membuat garis horizontal dan lainnya.

Tag selanjutnya adalah tag <head> yang berfungsi sebagai heading dari dokumen html yang kita buat. Pada bagian <head> bisa kita buat judul dokumen, inisialisasi css, desktripsi dan meta tag lainnya.

Di dalam tag <head> terdapat tag <title> untuk
membuat judul yang nantinya akan di tampilkan pada menu tab di browser.

Bagian utama dalam struktur dokumen html adalah bagian <body> karena di bagian ini berkaitan dengan elemen yang tampil dan di lihat oleh pengguna, kita akan banyak membuat kode-kode html nya.

Belajar Dasar-Dasar HTML

Agar artikel ini tidak begitu panjang, untuk beberapa sub topik sudah saya bahas pada artikel berikut:

  1. Membuat Paragraf dan Heading
  2. Membuat List
  3. Membuat Tabel
  4. Membuat Link
  5. Menampilkan gambar
  6. Membuat tombol (button)
  7. Membuat Form

Belajar Penggunaan Dasar CSS

Untuk memahami penggunaan dasar CSS di html coba baca
aritikel ini

  • Membuat style CSS (Cascading style sheet)

Silakan teman-teman pelajari dahulu topik-topik di atas karena kalau kalian belum menguasai nantinya akan kesulitat di tahap berikut.

Menentukan Struktur navigasi

Struktur navigasi web adalah adalah suatu struktur untuk
menggambarkan bagaimana suatu halaman di dalam website yang saling berhubungan antara satu dengan lainnya.

Penting untuk membuat struktur navigasi sebelum kita membuat website. Berikut ini contoh navigasi halaman website yang akan kita buat:

Saat pertama kali pengguna mengakses website,
halaman index akan menjadi halaman utama yang terdiri dari menu home, kontak saya dan tentang saya, halaman home bisa kita gunakan sebagai halaman index yang berisi konten artikel-artikel pada website kita.

Membuat Layout Website

Layout adalah tata letak dari setiap komponen elemen di dalam website. Layout berfungsi untuk memetakan bagian-bagian dalam halaman website. Dengan desain layout yang baik akan memberikan kenyamanan
kepada pengunjung.

Secara umum website memiliki 4 bagian layout yaitu

  • Header – Berisi judul website
  • Navigasi – Untuk membuat menu navigasi
  • Konten – Bagian utama yang menjadi sasaran informasi yang ingin di sampaikan ke pengunjung
  • Footer – Bagian paling bawah biasa berisi keterangan tambahan seperti informasi kepemilikan atau copyright.

Untuk membuat layout di HTML 5 kita bisa menggunakan tag-tag berikut:

  • Untuk membuat header menggunakan tag <header>
  • Membuat navigasi menggunakann tag <nav>
  • Membuat konten/artikel menggunakan tag <article>
  • Membuat footer menggunakan tag
    <footer>
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Membuat Layout - www.kelasprogrammer.com</title>
</head>
<body>
       <header>
            <p>Header</p>
       </header>
       <nav>
           <p>Navbar</p>
       </nav>
       <article>
            <p>Konten</p>
      </article>
  
       <footer>
            <p>Footer</p>
       </footer>
</body>
</html>

Agar bisa terlihat lebih jelas tambahkan kode CSS di dalam tag <head> seperti berikut:

<style>
        body 
            width: 65%;
            height: auto;
            background: white;
            margin:auto;
            margin-top: 5px;
            padding-bottom: 5px;
        

        p 
            text-align: center;
            font-size: x-large;
            margin:auto;
    
        

        header,nav,article,footer 
            border-radius: 3px;
            margin: 5px 5px 5px 5px;
            border: 1px solid gainsboro;
        
        
        header 
            height: 80px;
            background-color: aquamarine;
        
        nav 
            height: 45px;
            background-color: blanchedalmond;
        
        article 
            height: 150px;
            background-color: cornflowerblue;
        
        footer 
            height: 50px;
            background-color: darkkhaki;
        

    </style>

Hasil:

Studi Kasus : Membuat
Website Sederhana Dengan HTML dan CSS

Setelah kalian memahami pembahasan diatas , selanjutnya kita akan belajar membuat website sederhana.

Website yang kita buat bersifat statis karena hanya menggunakan HTML dan CSS, kedepannya kalian bisa kembangkan dengan belajar javascript, PHP, atau
python untuk membuat website dinamis.

Baca juga : Perbedaan web statis dan dinamis

Langkah 1 : Buatlah folder project web

Buatlah sebuah folder baru dalam di rektori kalian, contoh dibawah ini saya membuat folder web-saya

Selanjutnya
buatlah folder gambar yang berisi gambar untuk kebutuhan konten website

Perhatikan untuk nama gambar pastikan tidak ada spasi jika nama lebih dari satu kata pakailah tanda penghubung – (strip) atau _ (underscore).

Kenali setiap ekstensi gambar apakah menggunakan format .png atau jpeg karena nantinya kita akan sertakan gambar-gambar ini dalam sintak html menggunakan tag <img>.

Langkah 2 : Buatlah file index melalui teks editor

Buatlah sebuah file dengan nama index.html melalui teks editor yang kalian
miliki, saran saya kalian bisa menggunakan sublime text atau teks editor lainnya yang kalian miliki dan sukai.

<!DOCTYPE html>
<html>
<head>
    <title>Beranda</title>
    <link rel="stylesheet" type="text/css" href="https://kafesentul.com/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <div class="container">
       <header>
           <div class="logo">
               Web Saya
           </div>
       </header>
       <nav>
            <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="kontak-saya.html">Kontak Saya</a></li>
                <li><a href="tentang-saya.html">Tentang Saya</a></li>
            </ul>
        </nav>
       <article>
           <div class="konten">
            <a href="penyu.html"><img src="gambar/penyu.jpg" ></a>
            <div class="judul">
                <a href="penyu.html">Penyu</a>
            </div>
           <p>Penyu adalah hewan yang banyak di temukan bertelur di beberapa pesisir pantai di Indonesia sejak dahulu.</p>
           </div>
           <div class="konten">
            <a href="ikan-badut.html"><img src="gambar/ikan-badut.jpg" ></a>
            <div class="judul">
                <a href="ikan-badut.html">Ikan Badut</a>
            </div>
        
           <p>Ikan badut ini dapat dikenali dengan warna jingganya ikan ini tumbuh mencapai 8 cm serta termasuk dalam ikan terpopuler didunia. </p>
           </div>
           <div class="konten">
            <a href="lion-fish.html"><img src="gambar/lion-fish.jpg" ></a>
            <div class="judul">
                <a href="lion-fish.html">Lion Fish</a>
            </div>
           <p>Lionfish atau volitans adalah ikan berbisa milik keluarga yang Scorpaenidae terjemahan harfiah berarti ikan kalajengking.</p>
           </div>
           <div class="konten">
            <a href="moorish-idol.html"><img src="gambar/Moorish-Idol.jpg" ></a>
            <div class="judul">
                <a href="moorish-idol.html">Moorish Idol</a>
            </div>
           <p>Ikan Moorish Idol adalah salah satu ikan yang cukup populer di kalangan ara hobiis ikan hias karena bentuknya yang unik dan pola warnanya yang menarik.</p>
           </div>
      </article>
  
       <footer>
            Copyright 2020 web-saya.com
       </footer>
    </div>
</body>
</html>

Jika kita menjalankan file index.html di browser maka hasilnya akan seperti pada gambar berikut:

Untuk mengatur tampilan halaman website kita perlu menambahkan style CSS. Coba perhatikan di dalam tag <head>
saya menyertakan sintak ini:

 <link rel="stylesheet" type="text/css" href="https://kafesentul.com/style.css">

Sintak ini meruapakan cara menyisipkan style css secara eksternal (terpisah dari file html) sehingga kita perlu membuat file baru bernama style.css

Langkah 3 : Membuat Style CSS

Buat file dengan nama style.css dengan isi kode seperti berikut:

body
    font-family: Arial, Helvetica, sans-serif;
    background: #e6e6e6;
    padding: 0;
    margin:0;
    


.container
    width: 65%;
    height: auto;
    background: white;
    margin:auto;
    margin-top: 5px;
    padding-bottom: 5px;

.logo 
    font-size: xx-large;
    padding: 30px 0 30px 10px;


nav ul 
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1a75ff;
    border: 1px solid gainsboro;


nav li 
    float: left;


nav li a
    display: inline-block;
    color:#ffffff;
    text-align: center;
    padding: 14px 15px;
    text-decoration: none;


nav li a:hover 
    opacity:0.9;
    background-color: #3385ff;


article 
    width: 98.8%;
    height: auto;
    border-radius: 3px;
    margin: 5px 5px 5px 5px;
    border: 1px solid gainsboro;
    clear: both;


article p 
    padding: 5px 6px 5px 5px;
    line-height: 1.5;  

article .konten 
    width: 23.5%;
    height: auto;
    margin: 5px 5px 5px 5px;
    border-radius: 3px;
    border: 1px solid gainsboro;
    float: left;


article .isi 
    width: 98.5%;
    height: auto;
    margin: 5px 5px 5px 5px;
    border-radius: 3px;
    border: 1px solid gainsboro;
    float: left;

article .isi .judul 
    font-size: xx-large;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;

article .isi p 
    margin-top: 0;

article .isi img 
    float: left;
    margin: 5px 5px 5px 5px;


article .konten img 
    width: 95.8%;
    height: 150px;
    margin: 5px 5px 5px 5px;


article .konten:hover 
    opacity:0.9;


article .konten .judul a 
    margin-left: 5px;
    text-decoration: none;
    font-size:x-large;
    color:#020101;


article .konten a:hover 
    opacity:0.9;


footer 
    clear: both;
    width: 98.8%;
    height: auto;
    text-align: center;
    margin: 5px 5px 5px 5px;
    border-radius: 3px;
    border-bottom: 1px solid gainsboro;
    padding-top: 15px;
    padding-bottom: 15px;  

Hasil

Dapat di lihat setelah kita menambahkan style CSS tampilan website menjadi lebih menarik.

Pada tahap ini kita baru
membuat satu halaman yaitu halaman index selanjutnya masih ada halaman lainnya yang perlu dibuat.

Langkah 4 : Membuat Halaman Artikel

Agar ketika pengguna mengklik salah satu konten artikel untuk dapat di baca secara keseluruhan isi konten, maka kita perlu membuat halaman untuk masing-masing konten tersebut.

Halaman yang harus kita buat adalah

  • penyu.html
  • ikan-badut.html
  • lion-fish.html
  • moorish-idol.html

Contoh : Membuat Halaman
ikan-badut.html

<!DOCTYPE html>
<html>
<head>
    <title>Ikan Badut</title>
    <link rel="stylesheet" type="text/css" href="https://kafesentul.com/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                Web Saya
            </div>
        </header>
        <nav>
             <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="kontak-saya.html">Kontak Saya</a></li>
                <li><a href="tentang-saya.html">Tentang Saya</a></li>
             </ul>
         </nav>
       <article>
                <div class="isi">
                    <div class="judul">
                        Ikan Badut
                    </div>
                    <img src="gambar/ikan-badut.jpg" >
                    <p>Ikan badut ini dapat dikenali dengan warna jingganya ikan ini tumbuh mencapai 8 cm serta termasuk dalam ikan terpopuler didunia. Hewan ini masuk kedalam Genus Amphiprion. Ikan giru atau lebih dikenal dengan sebutan ikan badut adalah ikan dari anak suku Amphiprioninae dalam suku Pomacentridae. Ada 28 spesies yang biasa dikenali, salah satunya adalah genus Premnas, sementara sisanya termasuk dalam genus Amphiprion. </p>
                    <p>Mereka tersebar di lautan Pasifik, Laut Merah, lautan India, dan karang besar Australia. Di alam bebas mereka bersimbiosis dengan anemon laut. Anemon akan melindungi Ikan badut dari pemangsa dan Ikan badut akan membersihkan Anemon dengan memakan sisa - sisa makanan Anemon. Ikan badut berwarna kuning, jingga, kemerahan atau kehitaman. </p>
                    <p>Spesies terbesar mencapai panjang 18 cm, sementara yang terkecil hanya 6 cm. Mereka, pada umumnya, dijumpai pada laguna-laguna berbatu di seputar terumbu karang, atau pada daerah koastal dengan kedalaman kurang dari 50 meter dan berair jernih. Di perairan Papua New Guinea, bisa ditemukan ikan badut tidak kurang dari 8 spesies. Di alam, ikan badut mengkonsumsi zooplankton, udang-udangan dan algae yang dijumpai di habitat mereka.</p>
                </div>
            
         </article>
  
       <footer>
        Copyright 2020 web-saya.com
       </footer>
    </div>
</body>
</html>

Hasil

Kalian bisa lakukan cara yang sama dengan cara meng-copy dari file ikan-badut.html lalu mengganti dengan file lainnya.

Langkah
5 : Membuat Halaman Kontak & Tentang saya

Selain membuat halaman diatas, kita juga perlu membuat dua halaman lainnya yaitu:

  • kontak-saya.html
  • tentang-saya.html

Ketika penjung mengklik menu kontak saya pengunjung tersebut akan di arahkan ke halaman kontak-saya.html begitu juga dengan halaman tentang saya. Kalian bisa memuat profil kontak kalian pada kedua halaman ini.

Download Source
Code

Untuk mempersingkat tutorial kali ini saya sudah menyediakan source code yang bisa kalian download secara gratis.

[sociallocker id=”5349″] [/sociallocker]

Langkah langkah pembuatan web menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. … .

Atur jenis dokumen untuk HTML. … .

Tambahkan tab judul untuk halaman web kamu. … .

Ketik di bawah tag “Head” yang tertutup. … .

Selanjutnya membuat judul halaman. … .

Tambahkan judul tambahan jika kamu mau. … .

Membuat paragraf. … .

Mengubah warna teks..

Langkah langkah membuat web menggunakan HTML dan CSS?

Membuat Website Menggunakan HTML dan CSS.

Membuat wireframe / kerangka website. Langkah yang pertama ini adalah membuat wireframe. … .

Menginstal text editor. Langkah kedua inilah yang paling penting. … .

Membuat folder baru. … .

Membuat file index. … .

Membuat file style. … .

6. Hubungkan file css dengan file html..

Apa itu HTML dan bagaimana cara membuatnya?

HTML adalah 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.

Langkah langkah dalam membuat website?

8 Langkah untuk Membuat Website.

Pilih Nama Domain/URL. … .

Daftarkan Nama Domain/URL Anda. … .

Pilih Penyedia Layanan Hosting. … .

Koneksikan Nama Domain ke Web Hosting. … .

Install WordPress. … .

Pilih Tema untuk Website Anda. … .

Konfigurasikan Website Anda. … .

Isi Website dengan Konten..

Cara menggunakan langkah membuat web html? | admin | 4.5
shopee flash sale gratis ongkir
x