Menampilkan artikel pada kategori Web Desain

Cara membuat tampilan yang responsive dengan HTML dan CSS

Setelah kemarin admin menulis tentang Apa itu responsive design dan seberapa penting bagi dunia ? , maka dikesempatan ini admin akan menulis tentang Beragam teknik untuk membuat desain yang responsive .

Didalam dunia Web Designer terutama untuk Front-End Programmer, pada umumnya untuk membuat sebuah tampilan dibutuhkan 2 hal, yaitu:

  1. Breakpoint

    Yakni patokan (ketentuan) yang berupa maksimal/minumal lebar maupun tinggi pada sebuah website. Pada Breakpoint ini umumnya memiliki satuan px (Pixel).

  2. Grid

    Secara umum dapat digunakan untuk membuat layout berupa kolom yang dapat diubah sesuai dengan ukuran layar, untuk satuannya programmer pada umumnya menggunakan satuan % (Persen).

Dengan 2 hal itu, programmer dapat membuat sebuah yang responsive nan indah.

Pada umumnya tampilan Mobile hanya akan memiliki satu Kolom yang memenuhi layar, hal ini tentu akan sangat menguntungkan bagi pembaca, karena akan mempermudah dalam melihat konten maupun tulisan yang ada. Untuk tampilan Desktop biasanya akan dibuat 2 buah kolom seperti pada gambar dibawah ini.

Responsive Web

Dari gambar diatas tentu kita sudah memiliki ide untuk membuat tampilannya. Dan tutorialnya bisa disimak dengan baik pada tulisan dibawah ini.

Pertama-tama, kita membuat file baru dilokasi yang sobat inginkan, namun penulis akan menyimpannya dilokasi /var/www/html/belajar-responsive/ karena penulis menggunakan sistem operasi Linux dalam pembuatan tutorial ini. Untuk nama file terserah sobat, tapi penulis akan beri nama tutorial1.html

Pembuatan File

Lalu masukkan kode dibawah ini dengan teks editor kesayangan sobat,

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>Belajar Responsive</title>
    </head>
    <body>

    </body>
</html>

Lalu coba jalankan dibrowser, apabila belum ada tampilannya tenang, memang begitu kok :-D. Untuk kode diatas pasti sudah tahu dong, kalo belum tahu tanyakan dikolom komentar ya :-).

Tampilan ketika dijalankan dibrowser

Kedua kita tambahkan teks agar kita tahu tampilannya, maka tambahkan kode ini diantara tags <body></body>

    <div id="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat delectus nihil, tenetur accusamus temporibus sunt vero inventore voluptas rerum ullam maiores a consequatur illo, accusantium animi soluta, sit fuga exercitationem asperiores cupiditate autem ipsum! Assumenda sed amet vero ratione nisi asperiores magnam possimus ut quibusdam cum quae, eius! Repudiandae, voluptatibus aliquid aperiam natus rerum sit, nisi id, obcaecati mollitia vel sequi beatae quos eaque. Rem illum adipisci, atque in sed iure cumque ut nulla, est fugiat ab beatae pariatur, quam qui fuga! Deleniti, voluptatum placeat nihil blanditiis sequi cum consequuntur ducimus fugiat ut minima, sit sapiente quidem autem odio ullam saepe itaque. Laborum mollitia sint, at molestias, non excepturi delectus velit harum provident nostrum nesciunt vel nam quisquam fuga a maiores repudiandae quo suscipit cupiditate voluptatum quas nemo. Ex quae accusantium illum, tenetur doloribus consequatur maxime cumque culpa quam velit quos sint cum provident sapiente, quo. Distinctio quam numquam saepe sed praesentium optio in? Laboriosam sequi ex excepturi, ad odit numquam consequuntur nisi id nam distinctio cumque ut ab pariatur ea est ratione optio temporibus, tempora cum! Fugiat quo pariatur, consequatur quas provident quaerat nesciunt, ipsum facilis architecto quam mollitia omnis eum a numquam voluptatum facere iusto impedit consequuntur eveniet?</div>
    <div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facilis eos cumque harum possimus sequi, placeat asperiores, dolor hic illo ad, ratione recusandae fugiat error praesentium perspiciatis consequatur explicabo. Tempora similique esse tempore tenetur qui at. Ex quos numquam voluptas maxime! Delectus assumenda, explicabo enim iure fugiat voluptas facilis, deserunt libero rerum eveniet deleniti vel repellendus eos voluptatibus labore saepe quaerat aspernatur voluptate similique suscipit quae placeat. Hic voluptas qui minus quas. Voluptatem amet quae corporis eius odit, possimus autem architecto excepturi obcaecati ipsum. Voluptates culpa quia harum fuga dolor laborum perspiciatis qui quasi officiis consequuntur! Perspiciatis nesciunt molestias dignissimos animi maiores necessitatibus accusamus fugit sint corporis omnis, repudiandae facere dicta, fuga aliquam quisquam facilis dolor asperiores natus ducimus illum reiciendis sequi</div>
    <div class="clearfix">&nbsp;</div>

Lalu jalankan dibrowser dan akan jadi seperti gambar dibawah,

Tampilan ketika ada teks

Ketiga, nah ini yang paling penting adalah memberi style (CSS) pada kode html tersebut. Masukkan kode dibawah ini diantara tags <head></head>

    <style>
        body,html {
            background: #fff;
            color: #222;
            margin: 0; /* Menghilangkan margin pada tags <body> */
            padding: 0; /* Menghilangkan padding pada tags <body> */
            text-align: justify; /* Membuat paragraf menjadi rata kanan-kiri */
            line-height: 1.5; /* Mengubah line-height (Spasi antar baris) */
        }
        #main {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 60%; /* Menetapkan ukuran lebar tags saat mengambang */
            background: #3170d9; /* Agar background menjadi biru */
            color: #fff; /* Mengubah warna fonts */
        }
        #sidebar {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 40%;  /* Menetapkan ukuran lebar tags saat mengambang */
            background: #d99c31; /* Agar background menjadi orange */
            color: #fff; /* Mengubah warna fonts */
        }
        .clearfix { /* Digunakan untuk membersihkan area yang tidak mengambang */
            display: table;
            clear: both;
            content: "";
        }
    </style>

Secara kasat mata tampilan berhasil dibuat tetapi itu masih belum responsive karena apabila ukuran layar diperkecil, tampilan akan sangat tidak manusiawi. Bisa dilihat pada gambar dibawah ini.

Tampilan Responsive View Dihidupkan

Untuk menggunakan difitur seperti gambar diatas bisa menggunakan kombinasi CTRL+Shift+M pada firefox.

Bila dilihat tampilan diatas itu harus memiliki lebar yang memenuhi gambar agar terlihat manusiawi.

Keempat, agar tampilan menjadi responsive akan digunakan breakpoint yang sesuai. Tetapi berapa banyak ukuran layar yang akan ditest tentu akan sangat banyak, maka dari itu dibuatlah 4 Breakpoint berdasar ukuran yang populer yakni untuk tampilan yang Small, Medium, Large, dan Extra Large. Sekilas sudah seperti ukuran pada baju saja ya, hehehehe.

Untuk breakpointnya bisa ditambahkan pada tags <style></style>, tapi harus ditempat yang paling bawah pada tags tersebut, yakni diatas </style>

    @media (max-width: 576px) { /* small*/
            #main, #sidebar {
                width: 100%;
            }
        }
    @media (max-width: 768px) { /* Medium*/
            #main, #sidebar {
                width: 100%;
            }
        }
    @media (max-width: 992px) { /* Large*/
        }
    @media (max-width: ≥1200px) { /* Extra Large*/
        }

Sehingga keseluruhan kode tersebut menjadi seperti dibawah ini.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>Belajar Responsive</title>
    <style>
        body,html {
            background: #fff;
            color: #222;
            margin: 0; /* Menghilangkan margin pada tags <body> */
            padding: 0; /* Menghilangkan padding pada tags <body> */
            text-align: justify; /* Membuat paragraf menjadi rata kanan-kiri */
            line-height: 1.5; /* Mengubah line-height (Spasi antar baris) */
        }
        #main {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 60%; /* Menetapkan ukuran lebar tags saat mengambang */
            background: #3170d9; /* Agar background menjadi biru */
            color: #fff; /* Mengubah warna fonts */
        }
        #sidebar {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 40%;  /* Menetapkan ukuran lebar tags saat mengambang */
            background: #d99c31; /* Agar background menjadi orange */
            color: #fff; /* Mengubah warna fonts */
        }
        .clearfix { /* Digunakan untuk membersihkan area yang tidak mengambang */
            display: table;
            clear: both;
            content: "";
        }
        @media (max-width: 576px) { /* small*/
            #main, #sidebar {
                width: 100%;
            }
        }
        @media (max-width: 768px) { /* Medium*/
            #main, #sidebar {
                width: 100%;
            }
        }
        @media (max-width: 992px) { /* Large*/
        }
        @media (max-width: ≥1200px) { /* Extra Large*/
        }
    </style>
    </head>
    <body>
    <div id="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat delectus nihil, tenetur accusamus temporibus sunt vero inventore voluptas rerum ullam maiores a consequatur illo, accusantium animi soluta, sit fuga exercitationem asperiores cupiditate autem ipsum! Assumenda sed amet vero ratione nisi asperiores magnam possimus ut quibusdam cum quae, eius! Repudiandae, voluptatibus aliquid aperiam natus rerum sit, nisi id, obcaecati mollitia vel sequi beatae quos eaque. Rem illum adipisci, atque in sed iure cumque ut nulla, est fugiat ab beatae pariatur, quam qui fuga! Deleniti, voluptatum placeat nihil blanditiis sequi cum consequuntur ducimus fugiat ut minima, sit sapiente quidem autem odio ullam saepe itaque. Laborum mollitia sint, at molestias, non excepturi delectus velit harum provident nostrum nesciunt vel nam quisquam fuga a maiores repudiandae quo suscipit cupiditate voluptatum quas nemo. Ex quae accusantium illum, tenetur doloribus consequatur maxime cumque culpa quam velit quos sint cum provident sapiente, quo. Distinctio quam numquam saepe sed praesentium optio in? Laboriosam sequi ex excepturi, ad odit numquam consequuntur nisi id nam distinctio cumque ut ab pariatur ea est ratione optio temporibus, tempora cum! Fugiat quo pariatur, consequatur quas provident quaerat nesciunt, ipsum facilis architecto quam mollitia omnis eum a numquam voluptatum facere iusto impedit consequuntur eveniet?</div>
    <div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facilis eos cumque harum possimus sequi, placeat asperiores, dolor hic illo ad, ratione recusandae fugiat error praesentium perspiciatis consequatur explicabo. Tempora similique esse tempore tenetur qui at. Ex quos numquam voluptas maxime! Delectus assumenda, explicabo enim iure fugiat voluptas facilis, deserunt libero rerum eveniet deleniti vel repellendus eos voluptatibus labore saepe quaerat aspernatur voluptate similique suscipit quae placeat. Hic voluptas qui minus quas. Voluptatem amet quae corporis eius odit, possimus autem architecto excepturi obcaecati ipsum. Voluptates culpa quia harum fuga dolor laborum perspiciatis qui quasi officiis consequuntur! Perspiciatis nesciunt molestias dignissimos animi maiores necessitatibus accusamus fugit sint corporis omnis, repudiandae facere dicta, fuga aliquam quisquam facilis dolor asperiores natus ducimus illum reiciendis sequi</div>
    <div class="clearfix">&nbsp;</div>
    </body>
</html>

Sekian artikel yang dapat saya sampaikan ini, apabila ada yang merasa kebingungan bisa bertanya dikolom komentar ya. Salam Coders.

Apa itu Responsive Web Design dan Seberapa Penting ?

Responsive Web Design

Setelah kemarin admin mempost artikel yang berjudul Alasan Programmer Harus Pakai Linux dan diartikel ini admin akan membahasa tentang Apa itu Responsive Web Design Dan Seberapa Penting ? .

Responsive Web Design atau yang biasa disingkat menjadi RWD adalah suatu cara agar tampilan Situs Web tidak rusak atau tetap bagus disetiap tampilan.

Dahulu sebelum adanya teknik Responsive Web Design sang Programmer harus mendeteksi apakah visitor mereka menggunakan Desktop (PC) ataupun Mobile (Handphone). Cara ini tentu tidak efektif apabila diterapkan, karena Programmer harus membuat banyak CSS/HTML untuk setiap device, belum lagi harus meng-upgrade cara pendeteksian visitor mereka tentu kita tidak ingin disuguhkan dengan tampilan desktop yang hadir dihandphone maupun sebaliknya. Namun cara ini juga masih digunakan oleh banyak situs terkenal seperti Google, Facebook, dan Twitter.

Kelebihan Responsive Web Design

  1. Dengan adanya Responsive Web Design berarti hanya akan ada satu website yang bisa diakses oleh berbagai perangkat dengan ukuran yang berbeda-beda.

  2. Mudah dimaintenance, karena hanya memiliki satu website.

  3. Hemat Biaya.

Kekurangan Responsive Web Design

  1. Umumnya memiliki waktu loading yang lebih lama, karena harus me-loading semua gambar dan skrip yang ada.

  2. Mengganggu penempatan banner iklan, posisi banner iklan jelas akan terpengaruh dengan sifat responsive web yang menyesuaikan layoutnya berdasarkan ukuran layar devicenya. Seperti kita tahu banyak blog, news web yang mengandalkan pendapatan dari iklan.

  3. Pengembangan responsive website membutuhkan biaya lebih tinggi karena kompleksitas yang ada pada responsive website.

Teknik dalam pembuatan Responsive Web Design

  1. Breakpoint

    Breakpoint adalah adalah agar layout dapat berubah pada titik-titik yang telah ditentukan, sebagai contoh memiliki 2 Kolom pada desktop maupun table, tapi hanya memiliki 1 kolom pada smartphone. Breakpoint pada umumnya akan bisa disetting maupun disetting dari CSS.

  2. Minimum Value Dan Maximum Value

    Terkadang itu ada baiknya ketika konten mengambil seluruh lebar layar, seperti pada perangkat mobile, tetapi memiliki konten yang sama yang membentang ke seluruh lebar layar TV anda adalah hal yang terkadang kurang masuk akal. Inilah sebabnya mengapa nilai minimum (min) dan maksimum (max) sangat membantu. Sebagai contoh kita memiliki lebar 100% dan lebar maksimum dari 1000px berarti konten yang akan memenuhi layar, tapi jangan melebihi 1000px.

  3. Nested Object

    Merupakan membungkus banyak elemen sebuah wadah penyimpanan yang akan membuat nya lebih mudah dimengerti, lebih bersih dan rapih. Disinilah unit statis seperti piksel(px) dapat membantu. Mereka sangat berguna untuk konten yang tidak ingin anda ubah ukuran nya seperti logo dan tombol.

  4. Mobile First atau Desktop First
    Secara teknis tidak ada banyak perbedaan jika proyek dimulai dari layar yang lebih kecil ke besar (mobile first) atau sebalik nya (desktop first). Namun itu akan menambahkan keterbatasan ekstra dan membantu Anda membuat keputusan jika Anda mulai dengan mobile first. Seringkali orang mulai dari keduanya sekaligus. Silahkan pilih yang sesuai dengan yang anda pahami dengan baik.

Seberapa Pentingkah Responsive Web Design ?

Menurut data, lebih dari 20% dari pencarian google, saat ini telah diakses melalui ponsel, pada tahun 2012 yang lalu, lebih dari setengah local search, juga dilakukan melalui ponsel, bahkan 25% pengguna internet amerika adalah pengguna ponsel. 25% dari seluruh email, dibuka melalui ponsel pintar (smartphone).

Berhubungan dengan marketing dan dunia online, faktanya adalah bot google, lebih memilih website yang responsive untuk dimasukan kedalam index pencarian, dari pada website dengan alamat (mobile dan desktop), contohnya Ketika sebuah bisnis memiliki kedua situs yaitu mobile dan dekstop, maka akan ada URL yang berbeda (seakan duplikasi) dan HTML yang berbeda pula untuk masing-masing, dan hal ini akan memaksa google untuk menjelajahi dan mengindeks beberapa versi situs yang sama persis.

Dari data diatas, penulis akan mengatakan bahwa Responsive Web Design akan sangat penting didalam dunia Web Designer. Karena banyak pengguna internet didunia ini menggunakan Mobile (Smartphone)

Nantikan juga artikel lainnya dari SangCoders . Salam Coders.

Alasan Programmer Harus Pakai Linux

Web Programmer
Setiap Programmer pasti membutuhkan Operasi Sistem yang cocok dengan yang dia butuhkan, karena setiap Operasi Sistem memiliki lingkungan yang sangat berbeda (Kecuali Distro Linux). Bahkan seorang Web Programmer-pun juga membutuhkan Operasi Sistem yang pas dan pada umumnya Web Programmer memilih menggunakan Distro Linux. Untuk lebih spesifiknya itu tergantu selera seperti Penulis yang lebih memilih menggunakan Ubuntu 16.04 LTS karena versi ini merupakan versi LTS yang memiliki dukungan hingga 5 tahun, sehingga tidak perlu repot untuk update tiap tahunnya. Tapi diartikel ini penulis tidak membahas Disto Linux yang Cocok untuk Web Programmer , tetapi lebih ke Alasan Kenapa Web Programmer Wajib Memilih Linux . Untuk alasannya akan penulis uraikan dibawah ini:

Server

1. Populer untuk Server

Dengan kepopulernya tersebut menjadikan Programmer tidak perlu mengatur ulang kode programmnya agar dapat digunakan dengan baik didistro Linux.

Lalu apakah Versi Desktop dan Server Berbeda ??

Mungkin dibenak pembaca ada sekilas pertanyaan, bukannkah Versi Server dan Desktop berbeda ?, namun nyatanya tidak ada perbedaan yang signifikan, bila diversi Server tidak memakai GUI (Graphical User Interface) tetapi hanya memakai CLI (Command Line Interface), juga diversi server ada beberapa software yang dikurangi dan ditambahkan, misalnya tidak ada Office, Firefox, Maupun aplikasi dengan GUI lainnya. Namun ditambahkan aplikasi Mysql Server, maupun PHP dan Apache.

Case Sensitive

2. Case Sensitive

Linux memang didesain agar peka terhadap kapitalisai (Case Sensitive). Sehingga file:

  1. File berbeda dengan file
  2. FIle berbeda dengan File
  3. FILE berbeda dengan filE

Sistem penamaan seperti ini mungkin akan sedikit membingungkan bagi seorang pemula. Namun disinilah kelebihannya, karena ini bisa membingungkan seorang untuk melihat halaman administrator dari aplikasi anda. Walaupun halaman admin anda sudah terlindungi oleh kata sandi, tapi mungkin seseorang melakukan Brute Force kepada halaman tersebut.

3. Mendukung banyak Aplikasi Web

Banyak aplikasi yang dibangun ataupun tersedia didistro Linux, contohnya saja PHP, MySQL, PostgreSQL, NodeJS, Perl, dan banyak lainnya. Sehingga anda tidak perlu bingung untuk mencari aplikasi yang anda butuhkan lagi pula untuk instalasinyapun juga tidak terlalu rumit.

4. Menambah Skill

Inilah kelebihan yang bisa men-upgrade skill anda, disamping anda seorang Web Programmer anda juga bisa menjadi SysAdmin. Disetiap anda menjalankan Distro Linux anda tentu tidak dapat lepas dari terminal, ini akan mengembangkan pemahaman anda tentang sistem Linux. Walaupun pada kenyataanya pengoperasian linux tidak terlalu rumit apabila sudah mencobanya.

5. Open Source

Menggunakan linux tentu anda tidak akan terbebani oleh harga lisensi yang mahal, karena pada umumnya Distro linux itu bisa didapatkan secara gratis dan anda bisa memodifikasi sistem sesuai keinginan anda.

Dari banyaknya kelebihan Linux, mungkin hanya itu yang bisa saya sampaikan. Apabila anda menemukan kelebihan lainnya bisa disampaikan dikolom komentar. Sukses selalu untuk Coders Indonesia.

Fakta !!!, HTML Bukanlah Bahasa Pemrograman

HTML bukanlah Bahasa Pemrograman
Hallo Smart People, kali ini penulis ingin menyampaikan suatu rahasia lho !!, rahasia apa tuh ?, sebenarnya ini sebuah rahasia bagi kalian yang berniat untuk mempelajari bahasa pemrograman terutama dibidang Web.

Tahukah kamu bahwa sebenarnya HTML, dan CSS itu bukanlah sebuah bahasa pemrograman, lha terus kalau bukan bahasa pemrograman itu bahasa apa donk ?. Okay, mari kita sedikit flashback untuk sedikit memahami arti HTML dan CSS itu Sendiri.

1. HTML

HTML merupakan kepanjangan dari HyperText Markup Language , perhatikan baik-baik 2 kata terakhir dari kepanjangan HTML tersebut, disitu tertera kata Markup Language yang berarti Bahasa Markah apabila diterjemahkan kedalam Bahasa Indonesia. Ini berarti HTML hanya akan berisi bahasa markah. Terus bahasa markah itu apa ??. Okay, bila saya merujuk kepada KKBI, Markah berarti Tanda . Dan apabila teman - teman sudah sedikit belajar tentang HTML, mungkin teman-teman akan tahu apa arti tersebut. Bilapun teman - teman masih bingung/kurang paham akan saya jelaskan.

<a href="link.html">Ini Link</a>

Perintah diatas akan memberi tanda (Baca: Penanda) kepada browser supaya menampilkan anchor.

<img src="img.jpg" alt="Ini adalah gambar"/>

Begitupula dengan perintah img diatas, itu hanya akan memberi tahu browser untuk menampilkan gambar dengan nama img.jpg. Ini Juga berlaku untuk perintah yang lainnya

2. CSS

CSS merupakan kepanjangan dari Cascading Style Sheet , digunakan untuk mendekorasi/mempercantik tampilan dari sebuah halaman HTML. Sehingga dengan adanya CSS, setidaknya tampilan halaman HTML tidak monoton dan membosankan. Sama seperti HTML, CSS digunakan untuk memerintah browser agar menampilkan apa yang diperintahkan. Sebagai contoh

html {
    background: #000;
    color: #fff;
    font-size: 18px;
}

Arti dari kode diatas hanyalah untuk mengubah latar belakang/background, warna font, dan ukuran font untuk tag <html>.

Alasan HTML dan CSS bukanlah bahasa pemrograman

Apabila anda telah mengerti tentang HTML dan CSS, maka saya akan mengungkap satu rahasia Mengapa HTML dan CSS bukanlah Bahasa Pemrograman . Untuk pertama, marilah teman-teman mengetahui ciri-ciri Bahasa Pemrograman terlebih dahulu.

Bahasa Pemrograman harus memiliki 3 struktur

  1. Sequence (Urut dan Runtut)

    Sebuah bahasa pemrograman harus memiliki kode yang urut, dan logis. HTML dan CSS tidak memiliki struktur yang satu ini. Kenapa ??, sebab didalam HTML teman-teman bisa menulis tag

    <a href="link.html">Link</a>
    

    Tanpa dengan tag lengkapnya, seperti contoh

    <!DOCTYPE html>
    <html>
    <head>
        <title>Judul Halaman</title>
    </head>
    <body>
        <a href="link.html">Link</a>
    </body>
    </html>
    

    Tidak percaya !, silahkan dibuktikan dengan menulis satu tag html, lalu menyimpannya dan menjalankannya. Berjalan bukan ??.

  2. Selection (Pemilihan)

    Apakah teman-teman pernah melihat struktur pemilihan IF, maupun Switch pada HTML maupun CSS ???, tentu TIDAK !!!. Sebab HTML hanyalah sebuah bahasa markup, bukan bahasa pemrograman seperti PHP, ataupun JavaScript.

  3. Looping (Perulangan)

    Whoaa !!!, apa yang terjadi apabila teman-teman menginkan 100 Link yang sama, hanya berbeda judul saja, sudah pasti teman-teman akan menulisnya satu per satu. Karna struktur perulangan sama sekali tidak ditemukan didalam bahasa HTML.

Kalau HTML bukan Bahasa Pemrograman ?, Lantas kenapa saya harus mempelajarinya ?

Mungkin itu pertanyaan yang berada dalam benak teman-teman setelah mengetahui kenyataan tersebut. TAPI nyatanya hampir 80% situs web didunia ini menggunakan HTML untuk tampilannya, karena tanpa HTML sebuah situs web tidak akan memiliki tampilan yang bagus dan nyaman dipandang. Apalagi teman-teman ingin menjadi seorang Web Desainer, HTML, CSS, dan JavaScript sangat diperlukan.

Intinya HTML merupakan kerangka utama dari tampilan sebuah situs web, jadi penting sekali apabila teman-teman bisa menggunakannya.

Sekian artikel singkat dari saya ini, dan saya tidak berniat untuk menjelek-jelekkan suatu karya orang lain. Tetapi saya hanya ingin meluruskan pemahaman orang-orang yang salah kaprah tentan teknologi satu ini. Semoga bermanfaat