Pengenalan Jaringan Komputer

Bismillahirrahmanirrahim,,,Assalamualaikum Wr. Wb.
Kali ini saya akan sajikan artikel mengenai Pengenalan Jaringan Komputer (Networking). Mungkin udah banyak banget artikel/tutorial serupa di situs/blog lain, apalagi tentang ilmu dasar. Tapi, tujuan saya bikin artikel ini yaitu biar temen-temen bisa mengingat/mengulang kembali tentang jaringan komputer, atau juga bisa copas artikel ini buat bahan makalah, paper, tugas akhir, skripsi, atau apapun itu, karena saya juga bikin artikel ini hasil copas dari beberapa sumber. Hehe....
Oke langsung saja...

Pengertian Jaringan Komputer

Jaringan komputer adalah sebuah kumpulan komputer, printer dan peralatan teknologi lainnya yang terhubung dalam satu kesatuan. Informasi dan data bergerak melalui kabel-kabel atau tanpa kabel sehingga memungkinkan pengguna jaringan komputer dapat saling bertukar dokumen dan data, mencetak pada printer yang sama dan bersama-sama menggunakan hardware/software yang terhubung dengan jaringan. Setiap komputer, printer atau periferal yang terhubung dengan jaringan disebut node. Sebuah jaringan komputer dapat memiliki dua, puluhan, ribuan atau bahkan jutaan node.

Secara umum, jaringan mempunyai beberapa manfaat yang lebih dibandingkan dengan komputer yang berdiri sendiri dan dunia usaha telah pula mengakui bahwa akses ke teknologi informasi modern selalu memiliki keunggulan kompetitif dibandingkan pesaing yang terbatas dalam bidang teknologi.

Jaringan memungkinkan manajemen sumber daya lebih efisien. Misalnya, banyak pengguna dapat saling berbagi printer tunggal dengan kualitas tinggi, dibandingkan memakai printer kualitas rendah di masing-masing meja kerja. Selain itu, lisensi perangkat lunak jaringan dapat lebih murah dibandingkan lisensi stand-alone terpisah untuk jumlah pengguna sama.

Jaringan membantu mempertahankan informasi agar tetap andal dan up-to-date. Sistem penyimpanan data terpusat yang dikelola dengan baik memungkinkan banyak pengguna mengaskses data dari berbagai lokasi yang berbeda, dan membatasi akses ke data sewaktu sedang diproses.

Jaringan membantu mempercepat proses berbagi data (data sharing). Transfer data pada jaringan selalu lebih cepat dibandingkan sarana berbagi data lainnya yang bukan jaringan.

Jaringan memungkinkan kelompok-kerja berkomunikasi dengan lebih efisien. Surat dan penyampaian pesan elektronik merupakan substansi sebagian besar sistem jaringan, disamping sistem penjadwalan, pemantauan proyek, konferensi online dan groupware, dimana semuanya membantu team bekerja lebih produktif. Jaringan membantu usaha dalam melayani klien mereka secara lebih efektif. Akses jarak-jauh ke data terpusat memungkinkan karyawan dapat melayani klien di lapangan dan klien dapat langsung berkomunikasi dengan pemasok.

Jenis-jenis Jaringan Komputer

Berdasarkan Topologi

Topologi merupakan cara/konsep tata letak yang menjelaskan bagaimana berbagai komputer dan hardware lainnya dapat membangun jaringan komputer. Topologi dasar terdiri dari 4 macam, yaitu ring, bus, star, dan tree.

Topologi Ring

Metode token-ring (sering disebut ring saja) adalah cara menghubungkan komputer sehingga berbentuk ring (lingkaran) seperti pada gambar di atas. Biasanya tidak dibuat secara fisik, melainkan dengan sebuah consentrator dan terlihat seperti topologi star. Setiap simpul mempunyai tingkatan yang sama. Jaringan akan disebut sebagai loop, data dikirimkan kesetiap simpul dan setiap informasi yang diterima simpul diperiksa alamatnya apakah data itu untuknya atau bukan.
Keuntungan digunakannya topologi ring yaitu data akan sampai ke tujuan secara tepat, karena data akan dicek pada setiap node yang dilewatnya dan mengurangi terjadinya collision. Sehingga memungkinkan pergerakan data yang cepat dan collision detect yang lebih sederhana. Kerugiannya, jika sebuah kabel saja putus, maka seluruh koneksi pada jaringan lokal tersebut akan terputus.

Topologi Bus

Topologi Bus diimplementasikan dengan menggunakan media fisik berupa kabel coaxial. Topologi ini umumnya digunakan untuk jaringan komputer yang terhubung secara sederhana sehingga komputer-komputer yang terlibat di dalamnya bisa berkomunikasi satu sama lainnya.

Keuntungan menggunakan topologi bus untuk jaringan lokal yaitu cocok untuk penggunaan terhadap jaringan sederhana, karena tidak memerlukan banyak kabel dan sistem cabling yang mudah. Namun, kelemahannya yaitu penggunaan konektor BNC dan terminalnya yang cukup mahal. Di samping itu, apabila kabel putus maka seluruh jaringan akan terputus juga.

Topologi Star

Kontrol terpusat, semua link harus melewati pusat yang menyalurkan data tersebut kesemua simpul atau client yang dipilihnya. Simpul pusat dinamakan stasiun primer atau server dan lainnya dinamakan stasiun sekunder atau client server. Setelah hubungan jaringan dimulai oleh server maka setiap client server sewaktu-waktu dapat menggunakan hubungan jaringan tersebut tanpa menunggu perintah dari server.

Dari gambar di atas, dapat terlihat kelebihan dari topologi star ini yaitu data yang dikirimkan dapat sampai ke tujuan tanpa melalui node yang lain kecuali hub yang menghubungkan antar host sehingga data cepat terkirim. Selain itu, apabila salah satu kabel putus, maka koneksi host lain tidak akan terganggu. Kekurangannya, terdapat tambahan perangkat yaitu hub/switch yang menghubungkan antar host. Hal ini mengakibatkan banyaknya kabel dan konektor yang harus dipakai karena setiap host harus berkoneksi ke hub/switch.

Topologi Tree (Hybrid)

Pada dasarnya topologi Tree/Hybrid merupakan gabungan antara topologi star dan topologi bus. Switch/Hub sangat berperan dalam pembentukan topologi ini. Karena topologi ini dapat dibangun deengan menggunakan beberapa hub/switch yang saling terhubung satu sama lain untuk membuat bus. Dalam pengembangan teknologi jaringan terkini, bus banyak dibuat dengan menggunakan media fibre optic, sedangkan switch dan hub digunakan untuk membentuk topologi star yang menghubungkan antara front-end (komputer client) dengan topologi bus dan kontrol pusat (server).

Keuntungan menggunakan topologi ini yaitu topologi dapat jauh dikembangkan dan dapat menampung banyak sekali komputer dan perangkat lainnya secara efektif dan efisien. Kelemahannya, hanya terletak dari masalah biaya, karena semakin banyak perangkat yang dipasang, biaya akan bertambah.

Berdasarkan Area/Skala

Local Area Network (LAN)

Local Area Network (LAN) adalah sebuah jaringan tunggal yang meliputi satu daerah geografis tertentu dan menyediakan layanan serta aplikasi hanya untuk orang-orang dalam suatu struktur organisasi, misalnya kantor dan kampus. Bila jarak yang harus dijangkau kurang dari 1000 meter untuk komunikasi dalam jaringan, maka digunakan bentuk LAN.

Metropolitan Area Network (MAN)

Jaringan MAN pada dasarnya merupakan jenis LAN yang berukuran lebih besar dan biasanya menggunakan teknologi yang sama dengan LAN. MAN dapat mencakup kantor-kantor perusahaan yang letaknya berdekatan atau juga sebuah kota dan dapat dimanfaatkan untuk keperluan pribadi (swasta) atau umum. Jangkauan dari MAN ini antar 10 hingga 50 km, MAN ini merupakan jaringan yang tepat untuk membangun jaringan antar kantor-kantor dalam satu kota antara pabrik/instansi dan kantor pusat yang berada dalam jangkauannya.

Wide Area Network (WAN)

WAN merupakan jaringan komputer yang mencakup area yang lebih besar lagi dari MAN, sebagai contoh yaitu jaringan komputer antar wilayah, kota atau bahkan negara, atau dapat didefinisikan juga sebagai jaringan komputer yang membutuhkan router dan saluran komunikasi publik. WAN digunakan untuk menghubungkan jaringan lokal yang satu dengan jaringan lokal yang lain, sehingga pengguna atau komputer di lokasi yang satu dapat berkomunikasi dengan pengguna dan komputer di lokasi yang lain.

Internet

Internet adalah kumpulan dari jaringan-jaringan komputer yang saling terhubung secara global. Pada dasarnya Internet merupakan WAN, tetapi internet menghubungkan semua komputer di seluruh dunia dan menyediakan layanan publik. Internet dibangun oleh koneksi berbagai jaringan yang dimiliki oleh Internet Service Provider (ISPs) sebagai penyedia koneksi internet dengan beragam kecepatan akses bagi para pengguna internet.

Berdasarkan Media Penghantar

Wire Network

Wire network adalah jaringan komputer yang menggunakan kabel sebagai media penghantarnya. Kabel yang digunakan untuk membangun jaringan komputer cukup beragam, diantaranya menggunakan kabel Coaxial, UTP (Unshielded Twisted Pair), STP (Shielded Twisted Pair), dan Fibre Optic. Pada ujung-ujung kabel, digunakan konektor agar kabel terhubung dengan perangkat jaringan, seperti konektor BNC dan RJ45.

Wireless Network

Wireless network adalah suatu jaringan tanpa kabel dimana media transmisinya menggunakan frekuensi radio (RF) dan infrared (IR), untuk memberi sebuah koneksi jaringan ke seluruh pengguna dalam area disekitarnya. Area jangkauannya dapat berjarak dari ruangan kelas ke seluruh kampus atau dari kantor ke kantor yang lain dan berlainan gedung. Peranti yang umumnya digunakan untuk jaringan wireless termasuk di dalamnya adalah PC, Laptop, PDA, telepon seluler, dan lain sebagainya.

Berdasarkan Fungsi

Client-Server

Di dalam model client/server, perangkat yang meminta (request) informasi atau layanan disebut klien (client) dan perangkat yang memberikan layanan pada permintaan tersebut disebut server.

Peer to Peer

Peer to Peer adalah jaringan komputer dimana setiap komputer dapat bertindak sebagai server dan dapat bertindak juga menjadi client.

Struktur Jaringan Komputer

Jaringan Komputer dapat dibangun dengan 4 komponen yang terdiri dari End Device, Intermediary Device, media transmisi, dan Software.

Hardware - End Device

End device merupakan interface antara jaringan komputer dengan manusia (contoh: komputer, network printer, VoIP Phone, dll).

Hardware - Intermediary Device

Fungsi dari intermediary device yaitu :
- Regenerate dan retransmit sinyal data
- Menyediakan konektivitas dan menjaga arus data pada jaringan komputer

Contoh intermediary device diantaranya switch/hub, router, dan modem.

Media Transmisi

Seperti yang sudah kita bahas sebelumnya, jaringan komputer memiliki 2 jenis media transmisi, yaitu kabel dan wireless. Untuk jaringan kabel, terdapat 2 jenis kabel yang dapat digunakan, yaitu copper kabel (Coaxial, UTP) dan Fibre Optic.

Software

Software dapat berupa program yang digunakan dalam proses komunikasi, bisa juga berupa service yang mendukung program tersebut berjalan atau juga bisa berupa sebuah protocol yang mengatur proses komunikasi data.

Dasar-dasar HTML Bagian 3 : Table, Div, dan Span

Terima kasih bagi semua yg sudah mau membaca tutorial-tutorial atau artikel yg saya tulis. Meskipun sebenernya sudah banyak tutorial ilmu IT di situs/blog lain, tapi di sini saya cuma mau membantu temen-temen agar lebih memahami ilmu di bidang IT dan sekaligus mengingatkan saya sendiri agar tidak lupa terhadap apa yg sudah saya pelajari.
Oke, kali ini Insyaallah saya akan memaparkan seri terakhir dari tutorial HTML, yaitu Dasar-dasar HTML Bagian 3 : Table, Div, dan Span. Just read, try, and learn :)

Table

Table pada HTML sangat berguna. Table digunakan untuk menyimpan data dalam bentuk tabel sehingga data mudah dibaca. Table dalam HTML memiliki opening tag <table> dengan closing tag </table>. Ketika kita ingin menampilkan konten dengan rapi dalam suatu tabel, sudah pasti kita memerlukan baris (row) dan kolom (column). Sebelum membuat tabel secara utuh, kita harus mempelajari tentang table row dan cara membuat column terlebih dahulu.

Table Row

Table Row memiliki tag <tr></tr>. Setiap kali kita membuat tag tersebut, maka sebuah baris baru dalam tabel akan dibuat. Table Row pada HTML merupakan tag yang dibuat terlebih dahulu setelah membuat tag <table>. Dengan kata lain, tag <tr></tr> berada di dalam tag <table></table>. Sehingga formatnya akan seperti berikut :

<table>

  <tr></tr>

  <tr></tr>

</table>

Table Data

Table Data berisi konten yang akan ditampilkan pada tabel. Table data memiliki tag <td></td>. Pembuatan kolom pada tabel HTML ditentukan oleh banyaknya table data (atau bisa dikatakan cell) pada setiap table row. Dengan kata lain, setiap membuat table data, tag <td></td> ditambahkan ke dalam tag <tr></tr>. Selain itu, setiap table row harus memiliki jumlah table data yang sama untuk membuat kolom yang sempurna. Dengan begitu, tabel yang dibuat memiliki format sebagai berikut : (contoh tabel 2 baris dengan 2 kolom)

<table>

  <tr>

    <td>Baris 1 Kolom 1</td>

    <td>Baris 1 Kolom 2</td>

  </tr>

  <tr>

    <td>Baris 2 Kolom 1</td>

    <td>Baris 2 Kolom 2</td>

  </tr>

</table>

Table Head & Table Body

Setelah mempelajari tentang pembuatan table sederhana dengan membuat baris dan kolom, selanjutnya kita akan mempelajari lebih lanjut mengenai struktur tabel pada HTML agar tabel yang dibuat lebih rapi dan terstruktur.

Seperti struktur HTML, tabel di dalam HTML juga memiliki head dan body. Table Head merupakan cara penulisan judul pada tabel. Bedanya, jika <title> dalam <head> HTML tidak ditampilkan pada halaman HTML, table head ditampilkan pada bagian atas tabel dengan font weight yang berbeda dengan data pada cell lain (mirip perbedaan antara heading dengan paragraf biasa). 

Untuk membuat table head, digunakan tag <thead></thead> setelah tag <table>. Setelah itu, untuk membuat baris pada table head, tambahkan <tr></tr> di dalam <thead></thead>. Terakhir, untuk menampilkan data dalam table head, digunakan tag <th></th> sebagai pengganti <td></td>. Dengan begitu, format table head akan menjadi seperti berikut :

<table>

  <thead>

    <tr>

      <th>Judul Tabel Kolom 1</th>

      <th>Judul Tabel Kolom 2</th>

    </tr>

  </thead>

</table>

Table Body merupakan bagian body pada tabel yang berisi data yang akan ditampilkan. Untuk membuat table body, digunakan tag <tbody></tbody> setelah closing tag </thead>. Selebihnya, ditambahkan tag <tr> dan <td> seperti contoh sebelumnya. Dengan begitu, table memiliki struktur yang sempurna seperti pada contoh berikut :

<table>

  <thead>

    <tr>

      <th>Judul Tabel Kolom 1</th>

      <th>Judul Tabel Kolom 2</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Data Baris 1 Kolom 1</td>

      <td>Data Baris 1 Kolom 2</td>

    </tr>

    <tr>

      <td>Data Baris 2 Kolom 1</td>

      <td>Data Baris 2 Kolom 2</td>

    </tr>

  </tbody>

</table>

Colspan

Bagaimana jika kita ingin menyatukan beberapa cell pada tabel seperti fungsi merge pada Excel? Kita dapat menggunakan colspan. Colspan merupakan attribute pada tabel, yang digunakan untuk menggabungkan dua cell atau lebih menjadi satu. Attribute colspan dapat digunakan pada tag <td> dan <th>. Berikut contoh penggunaan colspan, sehingga pada baris 1 hanya terdapat 1 cell, sedangkan pada baris 2 terdapat 2 cell :

<table>

  <tr>

    <td colspan="2">Baris 1 dengan colspan</td>

  </tr>

  <tr>

    <td>Baris 2 Kolom 1</td>

    <td>Baris 2 Kolom 2</td>

  </tr>

</table>

Style pada Table

Kita telah mempelajari struktur tabel secara keseluruhan. Akan tetapi tabel yang dihasilkan masih terlihat monoton. Untuk itu, kita akan coba membuat tabel lebih terlihat cantik menggunakan styling seperti pada tutorial sebelumnya. Di sini, saya akan kasih contoh kode sebuah halaman HTML yang berisi tabel dengan penambahan style yang mengubah tampilan table border, padding, dan font di dalam tabel. Silakan coba kode berikut, dan coba untuk lebih bereksperimen dengan mengubah value, teks, atau jumlah baris/kolom tabel, atau bahkan menambah style sendiri :

<html>
  <head>
    <title>Contoh Table</title>
  </head>
  <body>
    <table style="border-collapse:collapse;">
      <thead>
        <tr>
          <th colspan="2" style="color: red">Famous Monsters by Birth Year</th>
        </tr>
        <tr style="border-bottom:1px solid black;">
          <th style="padding:5px;"><em>Famous Monster</em></th>
          <th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="padding:5px;">King Kong</td>
          <td style="padding:5px;border-left:1px solid black;">1933</td>
        </tr>
        <tr>
          <td style="padding:5px;">Dracula</td>
          <td style="padding:5px;border-left:1px solid black;">1897</td>
        </tr>
        <tr>
          <td style="padding:5px;">Bride of Frankenstein</td>
          <td style="padding:5px;border-left:1px solid black;">1944</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Div

Salah satu tag yang akan banyak digunakan selanjutnya yaitu Div, singkatan dari Division (pembagian). Div pada HTML berfungsi untuk membagi halaman HTML menjadi container atau potongan-potongan berbeda. Div sangat fleksibel karena dapat digabungkan dengan style, dapat diisi dengan konten seperti teks dan gambar, juga dapat ditambahkan link pada div. Nantinya, div akan banyak digunakan saat mempelajari CSS. Karena dengan div, pembentukan tampilan sebuah halaman HTML akan menjadi lebih mudah. Untuk membuat div, digunakan tag <div></div>. Untuk dapat memahami lebih lanjut mengenai div, dapat dicoba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Div</title>
  </head>
  <body>
    <div style="width:50px; height:50px; background-color:red"></div>
    <div style="width:50px; height:50px; background-color:blue"></div>
    <div style="width:50px; height:50px; background-color:green"></div>
    <a href="http://www.google.com"><div style="width:50px; height:50px; background-color:yellow"></div></a>
</body>
</html>

Span

Jika div membagi halaman HTML menjadi beberapa potongan berbeda dengan style berbeda, Span dapat mengontrol style pada bagian yang lebih kecil lagi seperti teks. Span menggunakan tag <span></span>. Sebagai contoh, jika kita ingin mengubah kata komputer menjadi warna merah pada kalimat Saya suka belajar komputer, maka tinggal ditambahkan span diantara kata komputer. Sehingga menjadi seperti berikut : Saya suka belajar <span style="color: red">komputer</span>

Coba kode berikut untuk lebih memahami span :

<!DOCTYPE html>
<html>
  <head>
    <title>Result</title>
  </head>
  <body>
    <p>My favorite font is <span style="font-family: Impact">Impact</span>!</p>
  </body>
</html>

Sekian tutorial Dasar-dasar HTML dari saya, terimakasih sudah mau membaca tutorial ini. Semoga tutorial ini dapat bermanfaat buat temen-temen semua. 

Tutorial Sebelumnya : Dasar-dasar HTML Bagian 2

Dasar-dasar HTML Bagian 2 : List, Comment, dan Styling

List pada HTML

List pada HTML merupakan cara penulisan daftar suatu komponen (text, gambar, dll) dalam HTML seperti penulisan daftar menu, daftar nama, dll. Sepeti contoh :
1. Teks urutan pertama
2. Teks urutan kedua
3. Teks Urutan ketiga
List dibagi menjadi 2 macam, yaitu Ordered List (OL) dan Unordered List (UL).

Ordered List

Secara sederhana, ordered list merupakan daftar berdasarkan nomor urut. Ordered List memiliki tag HTML <ol> dengan tag penutup </ol>. Untuk menambahkan setiap satu daftar item pada setiap list tag, menggunakan tag li (List Item), yaitu <li>Item 1</li>. Dengan begitu, cara penulisan Ordered List dapat dilihat sebagai berikut :

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

</ol>

Berikut contoh penggunaan Ordered List :

<!DOCTYPE html>
<html>
  <head>
    <title>Ordered List</title>
  </head>
  <body>
    <h1>List of my favorite things</h1>
    <ol>
      <li>Raindrops on roses</li>
      <li>Whiskers on kittens</li>
      <li>Bright copper kettles</li>
      <li>Warm woolen mittens</li>
    </ol>
    <h2>List of things</h2>
    <ol>
      <li>computer</li>
      <li>smartphone</li>
      <li>and a nerd</li>
    </ol>
</body>
</html>

Unordered List

Bagaimana jika kita tidak ingin memperdulikan urutan angka pada daftar? Kita dapat menggunakan Unordered List (UL). Unordered List menampilkan daftar pada HTML dengan menampilkan tanda bulat (bullet point). Penulisan pada Unordered List hampir mirip dengan Ordered List. Bedanya, jika Ordered List menggunakan tag <ol>, Unordered List menggunakan tag <ul> dengan tag penutup </ul>.

Perhatikan dan coba code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List</title>
  </head>
  <body>
    <h1>Some random thoughts</h1>
    <p>This is my random thoughts</p>
    <ul>
      <li>work hard</li>
      <li>get rich</li>
      <li>getting married</li>
      <li>going to heaven</li>
    </ul>
  </body>
</html>

Penggabungan Ordered List dan Unordered List

Ordered List dan Unordered List dapat digabungkan dengan 2 cara, yaitu Ordered list di dalam Unordered List, dan sebaliknya. Berikut contoh penggunaan penggabungan Ordered List dan Unordered List :

<!DOCTYPE html>
<html>
  <head>
    <title>Penggabungan list</title>
  </head>
  <body>
    <ol>
      <li>Hobi
        <ul>
          <li>Main Komputer</li>
          <li>Main Game di Komputer</li>
        </ul>
      </li>
      <li>Cita-cita
        <ul>
          <li>Naik Haji</li>
          <li>Masuk Surga</li>
        </ul>
      </li>
    </ol>
    <ul>
      <li>Klub Sepakbola Favorit
        <ol>
          <li>Livorno</li>
          <li>Stoke City</li>
          <li>Real SOciedad</li>
        </ol>
      </li>
      <li>Film Favorit
        <ol>
          <li>Lord of the ring</li>
          <li>Blackhat</li>
          <li>Bloody Monday</li>
        </ol>
      </li>
    </ul>
  </body>
</html>

Comment

Comment pada HTML berfungsi untuk membuat catatan/note pada halaman HTML. Selain itu, comment juga kadang digunakan untuk menutupi (disable) suatu kode. Comment tidak akan ditampilkan pada halaman HTML. Penulisan comment diawali dengan tanda <!-- dan diakhiri dengan tanda --> Perhatikan contoh berikut :

<!-- Contoh penggunaan Comment -->
<!-- <p>Kode ini tidak akan muncul</p>

<p>Ini juga tidak akan muncul</p> -->
<p>Kode ini bakal muncul</p>
<!-- comment -->

Styling

Styling merupakan cara untuk memperindah tampilan pada HTML. Pada umumnya, styling pada HTML dikerjakan oleh CSS yang terpisah. Akan tetapi, HTML juga memiliki bahan-bahan dasar untuk sedikit mempercantik tampilannya sendiri tampa menggunakan CSS yang terpisah. Untuk melakukan styling, HTML menggunakan berbagai attribute di dalam tags-nya. Attribute merupakan sebuah karakteristik atau deskripsi untuk konten pada elemen HTML. Hal ini sedikitnya telah kita pelajari pada Tutorial Dasar-dasar HTML Bagian 1 seperti attribute src di dalam tag <img>, atau href di dalam tag <a>.

Pada bahasan Styling ini, kita akan mencoba mengubah tampilan font, alignment, dan background color.

Font Size

Font Size berfungsi untuk mengubah ukuran teks menjadi besar atau kecil, sesuai dengan ukuran pixel. Untuk mengubah font size, kita dapat menggunakan attribute style. Isi attribute style dengan value font-face, diikuti dengan tanda titik dua (:), lalu isi tambahkan ukurannya, dan diakhiri dengan px (kependekan dari pixel). Sehingga contoh formatnya seperti berikut :

<p style="font-face: 12px">

Agar dapat dipahami lebih lanjut, bisa dicoba contoh code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Penggunaan Font Size</title>
  </head>
  <body>
    <p style="font-size:10px"> Some text for you to make tiny! </p>
    <p style="font-size:20px"> Some text for you to make normal size!</p>
    <p style="font-size:40px"> Some text for you to make super big!</p>
</body>
</html>

Font Color

Penggunaan attribute style sangat berguna, karena tidak hanya digunakan untuk tag <p> saja, akan tetapi dapat digunakan oleh berbagai macam tag. Kali ini, kita akan gunakan attribute style pada tag lain.

Untuk mengubah Font Color (warna font), cukup tambahkan value color:blue pada attribute style (atau warna lain yang dapat dilihan di sini). Contoh :

<h2 style="color: red">

Bagaimana jika kita ingin mengubah ukuran font dan warna font sekaligus? Simple, cukup gabungkan kedua value di dalam attribute style dengan dipisahkan oleh semicolon (;). Contoh :

<h2 style="color: red; font-size: 20px">

Agar kita dapat memahami lebih lanjut, pada contoh di bawah saya juga akan mencoba menggabungkan font-size dengan color. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Mengubah Warna Font</title>
  </head>
  <body>
    <h1 style="color: green; font-size: 16px">Heading</h1>
    <p style="color: violet">A giant bear and a little duck were friends.</p>
    <p style="color: red; font-size: 10px">But the bear got hungry and ate the duck.</p>
  </body>
</html>

Font Family

Setelah mempelajari font-size dan color, selanjutnya kita akan coba mengubah jenis font. Untuk mengubah jenis font, kita menggunakan value font-family. Contoh :

<h1 style="font-family: Arial">Ini Heading dengan Font Arial</h1>

Untuk daftar font yang dapat digunakan, dapat dilihat di sini.

Selain itu, kita juga dapat menggunakannya pada tag lain. Coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Loving the font changes</title>
  </head>
  <body>
    <h1 style="font-family: Arial">Big title</h1>
    <ol>
      <li style="font-size: 16px; font-family: Arial">This item is big Arial.</li>
      <li style="font-size: 12px; font-family: Verdana">This item is medium Verdana.</li>
      <li style="font-size: 10px; font-family: Impact">This item is small Impact.</li>
    </ol>
  </body>
</html>

Alignment

Selain mengubah tampilan teks, kita juga dapat mengubah penjajaran (alignment) teks menjadi rata kiri, kanan, atau tengah. Untuk mengubah alignment, tambahkan value teks-align pada attribute style. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Alignment</title>
  </head>
  <body>
    <h3 style="text-align:center">Favorite Soccer Teams</h3>
    <ol>
      <li style="text-align:left">Lazio</li>
      <li style="text-align:center">QPR</li>
      <li style="text-align:right">Real Betis</li>
    </ol>
  </body>
</html>

Backgroud Color

Di samping styling pada teks, HTML juga dapat mengubah warna latar (Background Color) pada halamannya. Untuk mengubah Background Color, attribute style ditambahkan dengan value background-color, seperti penggunaan color untuk mengubah font color. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Background Color</title>
  </head>
  <body style="background-color: brown">
    <h3>Favorite Soccer Teams</h3>
    <ol style="background-color: yellow">
      <li>Empoli</li>
      <li>Vitesse</li>
      <li>West Brom</li>
    </ol>
  </body>
</html>

Strong & Emphasize

Strong merupakan cara untuk membuat teks menjadi bold. Strong menggunakan tags <strong></strong>. Sedangkan Emphasize merupakan cara untuk membuat teks menjadi italic. Emphasize menggunakan tags <em></em>. Coba contoh kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Strong & Emphasize</title>
  </head>
  <body>
    <p>Do you <em>hear</em> the people <strong>sing</strong>?</p>
    <p>No <em>I don't</em>. I'm <strong><em>too</em></strong> busy eating <strong>cake</strong>.</p>
  </body>
</html>

Bersambung......

Tutorial Sebelumnya : Dasar-dasar HTML Bagian 1

Dasar-dasar HTML Bagian 1

Selamat pagi/siang/sore/malam teman-teman. Kali ini saya coba ketik tutorial dasar HTML buat temen-temen yang baru mau belajar tentang web programming. Semoga bermanfaat.

Definisi HTML

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. -Dikutip dari Wikipedia

Mengapa belajar HTML?

Setiap halaman web yang temen-temen lihat menggunakan sebuah bahasa pemrograman bernama HTML. HTML dapat dianalogikan sebagai sebuah kerangka yang membentuk setiap stuktur halaman web. Pada tutorial ini, kita akan gunakan HTML untuk menambahkan paragrap, heading, gambar dan link/tautan ke dalam sebuah halaman web. Lihat contoh berikut :

<!DOCTYPE html>
<html>
<p>Hello World</p>
</html>
Perhatikan kode dengan tanda kurung <>, itulah HTML. Seperti bahasa pemrograman lain, HTML memiliki penulisan khusus.

Editor, Ekstensi, dan Cara Buka File HTML

HTML dapat dibuat hanya menggunakan Text Editor biasa seperti notepad, atau juga dapat digunakan software text editor lain seperti Notepad++ (free), sublime, atau text & graphical editor seperti Adobe Dreamweaver.

Jika ingin mencoba menggunakan Notepad++, bisa download melalui link berikut :
Download Notepad++ 6.7.9.2

Secara default, sebuah file HTML memiliki ekstensi file .html (atau .htm). Akan tetapi, dalam integrasi dengan bahasa pemrograman yang lain (contoh : PHP), maka file ekstensi yang digunakan juga harus mengikuti bahasa pemrograman tersebut (contoh .php). Maka dari itu, code HTML yang sudah dibuat pada Editor, harus di-save dengan ekstensi yang sesuai.
File .html yang sudah di-save dapat langsung dibuka (double click) untuk melihat hasilnya melalui browser.

HTML dan CSS

HTML merupakan singkatan dari HyperText Markup Language. Hypertext yang berarti "text dengan tautan (link) di dalamnya." Setiap saat kita klik pada sebuah kata yang membawa kita ke dalam sebuah halaman web, berarti kita telah meng-klik sebuah hypertext.
Markup language merupakan sebuah bahasa pemrograman yang digunakan untuk mengubah text menjadi text itu sendiri atau menjadi suatu hal yang lain pada halaman web. HTML dapat mengubah text menjadi gambar, link, tabel, daftar berurut, dan lain-lain.
Apa yang membuat sebuah halaman web menjadi terlihat bagus? Itu merupakan efek penggunaan CSS—Cascading Style Sheets. CSS dianalogikan sebagai kulit dan makeup yang membungkus kerangka yang dibuat HTML. Kali ini, kita akan belajar mengenai HTML terlebih dahulu, dan nanti Insyaallah saya akan jabarkan juga tutorial mengenai CSS.

Hal pertama yang harus dilakukan adalah membuat kerangka pada halaman.
a. Selalu tambahkan <!DOCTYPE html> pada baris pertama. Hal ini bertujuan untuk memberitahu browser bahasa apa yang digunakan (dalam hal ini HTML).
b. Selalu tambahkan <html> pada baris berikutnya. Ini adalah permulaan kode HTML.
c. Selalu tambahkan </html> pada baris terakhir. Ini adalah penutup kode HTML.

Terminologi Dasar

Semua yang berada di dalam tanda <> disebut dengan tags. Hampir setiap tags memiliki pembuka dan penutup.
Contoh tag pembuka: <html>
Contoh tag penutup: </html>

Tags dapat dianalogikan sebagai tanda kurung. Ketika ada kurung buka, harus ada kurung tutup. Selain itu, tags juga harus ditutup dengan urutan yang benar. Tag pembuka yang terakhir yang harus ditutup terlebih dahulu, seperti contoh di bawah.

<tag pertama><tag kedua>Teks Biasa</tag kedua></tag pertama>

Sebagai latihan, coba ketik kode berikut, save dengan format .html, kemudian lihat hasilnya :

<!DOCTYPE html>
<html>
Hello World
</html>

Membuat Head

Ada 2 bagian pada file HTML: head dan body. Kita mulai dengan head.
Head dapat menampung informasi mengenai file HTML yang dibuat, seperti judul halaman web (title). Title adalah tulisan yang kita lihat pada baris judul browser atau tab halaman. Sebagai contoh, judul halaman web ini yaitu "Dasar-dasar HTML Bagian 1 | RNetworks | Berbagi ilmu IT pada Blog".
Sebagai latihan, coba kode di bawah ini untuk membuat head pada HTML.

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
</html>

HTML Body

Body merupakan tempat menyimpan konten HTML seperti text, gambar, dan link. Konten pada body merupakan apa yang dapat dilihat langsung pada halaman web.
Body di simpan di dalam tag <html>, setelah tag <head> . Sebagai contoh, perhatikan dan coba kode di bawah ini :

<html> 

<head> 

<title>Web Saya</title> 

</head> 

<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
</body>
</html>

Jika kita save lalu buka file HTML dengan kode di atas, maka akan menghasilkan tulisan :
Paragraf 1
Paragraf 2

Headings & Paragraf pada HTML

Heading pada HTML merupakan sub judul dari konten sebuah halaman web. Heading memiliki berbagai jenis ukuran text dengan font weight (ketebalan huruf) yang berbeda dengan paragraf biasa, h1 dengan penulisan <h1>Teks Heading</h1> untuk ukuran paling besar, dan h6 dengan penulisan <h6>Teks Heading</h6> untuk ukuran paling kecil. Hal ini dapat memudahkan cara penulisan paragraf yang bercabang.

Paragraf pada HTML seperti layaknya menulis paragraf pada Ms Word atau text editor lainnya. Paragraf memiliki cara penulisan <p>Teks Paragraf</p>. Setiap tag penutup paragraf, berarti sebuah paragraf dibuat, dan akan membuat paragraf baru pada baris selanjutnya untuk teks berikutnya. Untuk penulisan lebih lanjut, dapat disesuaikan alignment, jenis font, warna pada paragraf.

Untuk melihat perbandingan antara Heading dan Paragraf, dapat dicoba code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>
      Headings & Paragraphs
    </title>
  </head>
  <body>
    <h1>Ini h1</h1>
    <p>Ini paragraf di dalam h1</p>

    <p>Ini paragraf lain di dalam h1</p>
    <h2>Ini h2</h2>
    <p>Ini paragraf di dalam h2</p>
    <h3>Ini h3</h3>
    <p>Ini paragraf di dalam h3</p>
    <h4>Ini h4</h4>
    <p>Ini paragraf di dalam h4</p>
    <h5>Ini h5</h5>
    <p>Ini paragraf di dalam h5</p>
    <h6>Ini h6</h6>
    <p>Ini paragraf di dalam h6</p>
  </body>
</html>

Link pada HTML

Bagaimana cara agar membuat seseorang dapat berpindah dari satu halaman web ke halaman lain? Kita dapat menggunakan Hyperlink, atau disingkat dengan link. Dengan Link, kita dapat membuat sebuah elemen pada konten HTML (Text, gambar, dll) dapat diklik dan memindahkan user ke halaman lain, baik halaman lain yang berada dalam satu situs web, maupun ke halaman situs web lain. Caranya :

Pertama, ada sebuah tag pembuka <a> dan buat sebuah attribute dengan nama href pada tag tersebut yang mengarah pada sebuah URL sebuah halaman web, contoh http://reznetworks.blogspot.com.

Setelah itu, tambahkan elemen (contoh teks) sebagai deskripsi/konten untuk di-klik.

Terakhir, tambahkan closing tag </a> setelah konten tersebut.

Coba kode berikut untuk untuk memahami lebih lanjut :

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Link</title>
  </head>
  <body>
    <a href="http://reznetworks.blogspot.com">RNetworks</a>
  </body>
</html>

Menambahkan Images pada HTML

Image atau gambar pada HTML dapat dimasukkan/dipanggil menggunakan tag <img>. Tag ini sedikit berbeda dengan tag yang lain. Jika tag lain memasukkan konten diantara opening & closing tag, pada tag img kita memberitahukan letak gambar menggunakan atribut src. Tag ini berbeda juga karena tidak menggunakan closing tag, tetapi tag img memiliki tanda / di dalam tagnya sebagai penutup. Sehingga, formatnya akan seperti : <img src="url" />. URL pada img dapat berupa link gambar dari situs lain, atau gambar pada suatu direktori/folder di komputer kita.

Berikut contoh code penggunaan img pada HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Image</title>
  </head>
  <body>
    <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
    <img src="D:\folder\gambar.jpg" />
  </body>
</html>

Menambahkan Link pada Image

Sebuah gambar/image juga seringkali dibuat menjadi sebuah link dengan tujuan untuk lebih menarik minat pengunjung halaman web mengklik pada link tersebut. Untuk menambahkan link pada image dalam HTML, masukkan tag <img> diantara tag <a></a>. Perhatikan contoh berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Link & Image</title>
  </head>
  <body>
    <a href="http://www.wikipedia.org"><img src="https://upload.wikimedia.org/wikipedia/en/3/34/ISync_icon.png" /></a>
</body>
</html>



Bersambung ke Dasar-dasar HTML Bagian 2

Pengenalan Internet

Pengertian Internet

Internet dapat dijabarkan menjadi 2 pengertian, yaitu :
INTERnational NETworkingmerupakangabungandariduakomputerataulebihyang salingberhubungandanberbagisehinggamembentukjaringankomputerdenganjutaankomputerdiseluruhduniadengansalingbertukarinformasi.
INTERconnected NETworkmerupakansuatusistemkomunikasiglobal yang menghubungkanseluruhkomputer– komputer, perangkatjaringandiseluruhdunia.

Layanan Internet

Pada bagian ini, saya akan coba jelaskan mengenai layanan-layanan yang ada pada internet.

World Wide Web (WWW)

Merupakanbagiandariteknologiinternet yang berfungsi sebagairuangpenampunginformasidarialamatUniform Resource Locator (URL).Diaksesmenggunakanweb, sebagaipenyediainformasidandata untukdapatdiaksesbersama, baikaksesberupateks, gambar,  suara, video, danmultimedia.

Electronic Mail (E-Mail)

Merupakansuatusaranaberkirimsuratmelaluimedia jaringaninternet, alamatemail bersifatunik, dapatberkirimdata mulaiteks, gambar, video, dll. 

Instant Messaging (Chat)

Merupakansaranauntukberkomunikasidenganpenggunalain diseluruhdunia, denganmenggunakanakunyang telahdibuatsebelumnya, danmenginstalaplikasiyang disediakan olehpemilikaplikasi.

File Transfer Protocol (FTP)

Merupakanfasilitasyang dapatdigunakanuntukberkirimdanmengambildata informasi, padaumumnyaterdapatmesinyang dinamakanFTP Server.

Komponen Pembangun Internet

Sebuah komputer saja tidak cukup untuk dapat melakukan koneksi menuju internet. Berikut ini merupakan komponen-komponen yang membangun jaringan internet.

Content Provider

Merupakanbagiandariteknologiinternet yang akan menyediakansumberinformasi, seringdisebutdenganServer, contoh: Web Server, FTP Server, Mail Server, Streaming Server, dll. SeringjugadisebutInternet Server.

Internet Service Provider (ISP)

Merupakan perusahaan penyedia infrastruktur jasa koneksi internet, dan didalamnya terdapat kumpulan perangkat jaringan komputer seperti Server, Router, Switch, dan perangkat penunjang lainya sehingga membentuk suatu jaringan yang dihubungkan dengan jaringan ISP lain. Contohnya seperti Telkom Speedy, Indosat, dll.

Customer Premise Equipment (CPE)

Merupakan perangkat yang berada disisi pengguna, seperti komputer, modem, saluran telepon, kabel, yang biasanya disediakan oleh ISP.

Network Connection

MerupakansaranakoneksidariISP kesisiCPE, bisamenggunakanmedia kabel, wireless, hinggasatelit.

Browser

Merupakanmedia aplikasiyang disediakanolehpengembangyang digunakanuntukmengakseslayananWWW melaluiform URL yang disediakan olehpengembangBrowser tersebut. Contohnya seperti Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer, dll.

Teknologi Internet

Komponen-komponen Internet di atas hanya komponen secara umum yang harus ada untuk membangun internet. Di samping komponen-komponen tersebut, Internet juga membutuhkan beberapa teknologi untuk menunjang adanya internet.

DNS (Domain Name System)

Merupakan sistem yang menyimpan informasi alamat IP dan nama domain Contoh  : alamat URL http://www.google.co.id = 209.85.175.99.

Untuk artikel lebih lanjut mengenai DNS, dapat dibaca pada artikel Pengertian, Jenis, dan Konsep DNS.

Web Server

Merupakanperangkatserver (hardware dan software) yang berfungsimenerimapermintaanHTTP danHTTPS daribrowser penggunadanmengirimkanhasilnyaberupainformasiteks, gambar, suara, video, danlainyayang umunyaberbentukdokumenHTML.Web server yang sering digunakanadalah:- Apache : Untukmulti platform- IIS : Platform Windows

E-Mail Server

Merupakanlayananberkirimsuratmelaluijaringankomputerdenganmenggunakan   aplikasiyang dikembangkanolehberbagaivendor. Setiapemail memilikialamatyang berbedadanbersifatunik.

Struktur alamat email :   nama@namadomain.comdimanatanda“@” adalahuntukmemisahkannamadandomain.