Macam macam Topologi Jaringan Komputer Beserta Gambarnya

Oleh :

Nama        : Riyanto

Nim          : 12170050

Kelas        : 12.4F.21
No Absen : 1

Macam macam topologi jaringan , kali ini kita akan membahas tentang Berbagai Macam macam topologi jaringan komputer.Apa sih topologi jaringan?apa saja sih macam-macam topologi jaringan? apa saja kelebihan dan kekurangan tiap macam macam topologi jaringan tersebut?

wkwk, tidak perlu bingung, karena saya akan menjelaskan secara lengkap beserta gambarnya agar mudah dipahami. Baiklah kita langsung saja ke materi. Cekidot!

Macam macam Topologi Jaringan

Berbagai komputer terdapat banyak sekali macam macam topologi jaringan, kali ini kita akan membahas secara tuntas berbagai jaringan komputer dan berbagai kelemahan dan kelebihan yang dimilikinya.

1. Topologi Jaringan Ring

Topologi ring atau topologi cincin adalah Topologi jaringan yang rangkaiannya berupa titik yang mana masing-masing titik bagian kanan dan kirinya terhubung ke dua titik lainnya sampai ke komputer yang pertama dan akhirnya membentuk cincin atau lingkaran.

Titik yang ada pada topologi cincin tersebut berfungsi memperkuat sinyal di setiap rangkaiannya atau sebagai repeater. Cara kerjanya yaitu: komputer 1 berencana mengirim file ke komputer 4 ? supaya terkirim maka file harus melewati komputer 2 dan 3? baru kemudian komputer 4 menerima file tersebut.

Dengan metode seperti itu, sinyal dan aliran data tetap akan stabil. Arah aliran datanya bisa searah jarum jam atau berlawan dengan jarum jam, tergantung dengan kebutuhan.

Kelebihan dan Kekurangan Topologi Ring

Kelebihan:

Mudah dalam perancangan dan pembuatan

performa sinyal dan aliran data stabil, bahkan lebih baik dari topologi bus, meskipun mengalirkan data yang berat

Jika terjadi masalah, mudah untuk dilakukan konfigurasi ulang atau pemasang baru

Hemat dalam penggunaan kabel

Hemat dalam biaya

Kekurangan:

Jika ada satu komputer yang eror, maka keseluruhan jaringan juga akan ikut eror, solusinya adalah dengan penggunaan topologi ring ganda

Performa aliran lalu lintas data bergantung pada jumlah komputer pada jaringan tersebut

2. Topologi Bus

Topologi bus adalah jaringan yang hanya memakai satu kabel (coaxial) untuk media transmisi dan kabel tersebut sebagai pusat bagi seluruh server yang terhubung. Masing-masing komputer dihubungkan ke kabel utama dengan menggunakan konektor BNC, lalu diakhiri dengan terminator apabila Konektor BNC sudah terhubung dengan kabel Coaxial.

Kelebihan dan Kekurangan Jaringan Bus

Kelebihan:

Lumayan sederhana

Apabila ingin menambah server baru lumayan mudah, karena pemasangan tidak memutus keseluruhan jaringan sehingga tidak mengganggu server yang lain

Hemat dalam penggunaan kabel dan biaya karena cuma menggunakan satu kabel utama

Kekurangan:

Bila kabel utama mengalami gangguan, maka semua jaringan juga mengalami gangguan

Jalur lalu lintas lumayan padat karena bolak-balik

Apabila jarak jauh diperlukan repeater

Susah melacak tempat trouble

Jika komputer banyak yang terhubung maka performa sinyal dan lalu lintas akan menurun

3. Topologi Star

Topologi star merupakan bentuk jaringan yang mana terdapat satu penghubung (Hub/Switch) sebagai pusat dan setiap komputer terhubung ke penghubung tersebut. Hub/Switch ini posisinya ada di central dan berfungsi untuk menghubungkan satu komputer ke setiap komputer yang terhubung dan juga menghubungkan komputer ke File Server.

Cara kerjanya yaitu apabila komputer berkirim data antara satu dengan yang lainnya maka data tersebut harus mengalir ke Hub/Switch terlebih dahulu baru kemudian menuju ke komputer yang dituju.

Kelebihan dan Kelemahan Topologi Star

Kelebihan:

Tingkat keamanan tergolong tinggi

Mudahnya dalam penambahan komputer baru yang ingin disambungkan

Apabila ada yang eror mudah untuk dideteksi

Paling fleksibel diantara topologi jaringan yang lainnya

Kemudahan dalam mengontrol karena sistemnya yang terpusat

Kekurangan:

Apabila Hub/Switch rusak maka keseluruhan jaringan juga rusak

Lumayan boros dalam penggunaan kabel

Hub sangat sensitif, karena dia sebagai tempat central bagi jaringan

Tergantung spesifikasi Hubnya, apabila rendah maka performa sistem jaringan juga rendah

Biaya lebih mahal

4. Topologi Mesh

Topologi Mesh atau mudahnya dinamai topologi jala adalah bentuk topologi jaringan yang mana semua Workstation bisa terhubung satu sama lain secara acak atau tidak teratur.

Karena Workstation langsung terhubung dengan Workstation yang dituju maka arus data bisa dilakukan dengan cepat tanpa harus melalui workstation lain.

Masing-masing Workstation setidaknya memiliki 2 jenis sambungan yaitu pertama kabel yang terhubung dengan workstation lain dan terakhir terhubung dengan File Server

Topologi jaringan jala cocoknya digunakan pada jaringan komputer yang kecil bukan yang besar. Alasannya adalah selain karena sambungan antar workstation yang berlebihan tetapi juga sangat sulit untuk mengendalikannya.

Kelebihan dan Kekurangan Topologi Jaringan Mesh

Kelebihan:

Arus lalu lintas data cepat diantara topologi jaringan yang lain karena memiliki jalur masing masing

Terjaminnya kapasitas channel komunikasi

Jika ada ganggguan pada satu koneksi jaringan, maka tidak mengganggu koneksi yang lain

Terjaminnya keamanan dan privasi karena akses langsung dapat dilakukan antara dua komputer tanpa melibatkan komputer yang lain

Kemudahan dalam mengidentifikasi titik trouble

Baca Juga  9 Resep Sehat dan Kuat Fisik untuk meraih Kesuksesan

Kekurangan:

Biaya yang dikeluarkan termasuk tinggi

Boros dalam pemakaian kabel karena semua komputer atau Workstation seminimal-minimalnya memiliki dua penghubung

Diperlukan ruangan yang lumayan besar dalam membangun jaringan komputer tersebut

5. Topologi Jaringan Tree

Topologi jaringan tree atau pohon merupakan topologi jaringan yang bertingkat dan hierarki yang mana antar koneksi menggunakan Hub/Switch dan masing-masing Hub terhubung dengan file server.

Topologi tree sebenarnya adalah kombinasi dari topologi star dan topologi bus namun yang membedakannya adalah topologi tree ini terdapat banyak Hub di dalam jaringannya dan sistemnya yang hierarki.

Kelebihan dan Kekurangan Topologi Tree

Kelebihan:

Mudah untuk digunakan dalam jaringan yang luas

Apabila ada gangguan mudah untuk dideteksi

Kemudahan dan keunggulan dalam manajemen data

Kemudahan dalam pengelompokan workstation yang sejenis

Kekurangan:

Karena banyaknya sambungan maka lalu lintas bisa dibilang lambat

Apabila hub eror, maka komputer yang tersambung juga eror

Penggunaan biaya tergolong besar

Penggunaan kabel termasuk boros

Komputer tingkat tinggi eror maka komputer tingkat rendah juga eror

Lalu lintas dan sinyal tergolong lambat karena terbagi-bagi

6. Topologi Linier

Topologi linier bisa juga disebut dengan topologi bus yang beruntut. Kabel utama terhubung dengan dengan setiap komputer dengan penyambung T, lalu pada ujungnya dipasang terminator.

Untuk jenis sambungan yang digunakan adalah sambungan BNC (British Naval Connector).

Berikut 3 jenis penyambung yang terdapat pada topologi linier:

BNC, penyambung ini berfungsi untuk mempertemukan kabel komputer ke sambungan T

Sambungan T, berguna untuk mempertemukan kabel komputer dengan kabel utama

Terminator, sebagai pengakhir dari topologi bus

BNC Barrel konektor, Untuk menyambung 2 kabel BNC.

Maksimal komputer yang bisa disambungkan adalah 5-7 buah saja.

Kelebihan dan kekurangan Topologi Linier

Kelebihan:

Mudah dalam pengembangannya

Hanya sedikit kabel yang digunakan

Tidak ada kendali pusat

Tata peletakan kabel lumayan sederhana

Terminator bisa dikurangi atau ditambah tanpa mengganggu lalu lintas data.

Kekurangan

Sangat susah dalam mendeteksi kesalahan yang terjadi

Lalu lintas data bisa terbilang padat

keamanan dan privasi kurang karena ada pihak ke tiga yang dilalui

Kecepatan lalu lintas data sesuai dengan jumlah workstationnya, apabila banyak maka akan menurun kecepatannnya

Baca Juga  Siapa Halimah Yacob ? Fakta Raja Bolos Sekolah yang Jadi Presiden

7. Topologi Hybrid

Topologi hibrid adalah topologi yang luas yang mana topologi tersebut adalah gabungan dari 2 atau lebih jenis topologi yang lainnya. Topologi hybrid tersebut memiliki semua ciri-ciri dan sifat dari jenis topologi yang ada di dalamnya.

Pembuatan topologi hybrid tersebut bertujuan untuk memaksimalkan kelebihan dari tiap-tiap jenis topologi dasar di dalamnya. Ketika jenis topologi dasar terhubung dengan jenis topologi dasar yang beda jenis, maka tidak ada karakter yang ditampilkan dari keduanya.

contohnya begini:

Topologi bintang digabungkan dengan topologi bintang maka masih topologi bintang, sedangkan topologi bintang digabungkan dengan topologi bus maka sudah bisa dikatakan sebagai topologi hibrida.

bintang?bintang=bintang

bintang?bus=hybrida

Kelebihan dan Kekurangan Topologi Hybrida

Kelebihan:

Kelemahan dari masing-masing topologi dasar dapat diatasi

Bisa diterapkan di lingkungan jaringan yang berbeda, karena fleksibel dalam perancangannya

Kecepatan topologi konsisten dan stabil

ketika jaringan satu ada kerusajkan maka tidak mengganggu jaringan yang lainnya

Cocok dengan jaringan yang berskala besar

Bisa mengurangi space jaringan yang terbuang

Kekurangan:

Biayanya mahal karena merupakan gabungan dari topologi yang lainnya

proses pemasangan dan pengaturan cukup terbilang rumit

Manajemen jaringannya sulit

Harus tersedia ruangan yang luas karena penggunaan kabel yang banyak

Boros dalam penggunaan kabel karena di setiap jaringan terdapat kabel

8. Topologi Peer to Peer

Inilah topologi paling sederhana dan paling dasar dari semua topologi yang ada. Jenis topologi ini hanya terdapat 2 komputer yang saling terhubung dengan satu kabel saja.

Tujuan dari topologi Peer to Peer adalah supaya masing-masing komputer bisa saling terhubung satu sama lain tanpa harus melalui server lain sehingga masing-masing komputer tersebut bisa menjadi server sendiri.

Kelebihan Dan Kekurangan Topologi Peer to Peer

Kelebihan:

Sangat hemat dalam penggunaan kabel karena hanya satu kabel saja yang dipakai

Setiap komputer bisa menjadi server

Proses pemasangan mudah

Kekurangan:

Dari segi keamanan sangat rendah, karene tiap komputer tingkat keamanannya berbeda-beda

Sangat susah untuk ditambahkan dengan komputer lain

karena tiap komputer menjadi server maka apabila salah satu ada yang eror, maka untuk akses data ke komputer yang eror tersebut juga terganggu

Demikian materi tentang macam macam topologi jaringan yang ada, semoga bermanfaat.

Pengertian Jaringan LAN dan MAN

Oleh :

Nama        : Riyanto

Nim          : 12170050

Kelas        : 12.4F.21
No Absen : 1

Pengertian Jaringan LAN dan MAN

Internet sendiri merupakan singkatan dari interconnection-networking yang artinya adalah jaringan komputer yang dapat menghubungkan seseorang dengan dunia (telekomunikasi) dengan menggunakan standart sistem global transmission control protocol/ Internet Protocol Suite (TCP/IP), yang berperan sebagai protocol pertukaran paket (Packet Switching Communication Protocol) untuk melayani seluruh pengguna internet yang terdapat di dunia.

Namun perlu diketahui bahwa internet juga memiliki beberapa jenis yang diantaranya bernama LAN (Local Area Network) dan MAN (Metropolitan Area Network)

Berikut ini adalah pengertian dari hal-hal tersebut, serta bagaimana cara kerjanya untuk dapat terhubung dengan internet.

1. Jaringan LAN (Local Area Network) – Apa Itu LAN?

Topologi Jaringan LAN

LAN (Local Area Network) adalah suatu jaringan komputer yang hanya mencakup wilayah lokal, dalam artian, jaringan ini hanya bisa digunakan oleh orang-orang yang berada di area LAN saja.

LAN dapat menghubungkan sebuah perangkat ke internet dengan menggunakan berbagai perangkat jaringan yang cukup sederhana. Seperti hanya dengan menggunakan kabel UTP (Unshielded Twisted-Pair), Hub, Switch, Router, dan lain sebagainya.

Adapun beberapa contoh jaringan LAN, yakni adalah seperti komputer-komputer yang saling terhubung di sekolah, perusahaan, warnet, dan banyak lainnya. Itu adalah beberapa contoh jaringan LAN yang mudah ditemukan.

Ø  Ciri Ciri Jaringan LAN

1. Mempunyai pusat data yang lebih tinggi 

2. Meliputi wilayah geografi yang lebih sempit 

3. Tidak membutuhkan jalur telekomunikasi yang disewa dari operator telekomunikasi 

4. Bekerja dia area geografis yg terbatas

5. Dpat digunakan multi acces hingga high-bandwith media

Ø  Fungsi LAN

-          Memudahkan komunikasi antar kantor, bagian dan instansi

-          Mengamankan data dan informasi milik perusahaan

-          Untuk membangun koneksi internet berbasis WLAN

-          Memudahkan user dalam mengakses informasi

-          Mempercepat arus informasi dari server menuju user

Ø  Keuntungan Menggunakan Jaringan LAN

Menggunakan jaringan LAN mempunyai banyak keuntungan, seperti lebih irit pengeluaran biaya operasional, lebih irit dalam penggunaan kabel. Dan keuntungan lainnya yang anda dapat adalah koneksi transfer data antar node dan komputer bekerja dengan cepat. Selain itu, menggunakan jaringan LAN rasanya kita juga tidak memerlukan operator telekomunikasi untuk dapat membuat jaringan LAN.

Ø  Kerugian Menggunakan Jaringan LAN

Tentu saja dengan memilih menggunakan jaringan yang satu ini ada beberapa kekurangannya, seperti cakupan wilayah koneksi yang terbatas, sehingga hal tersebut menjadi salah satu kekurangan dari jaringan LAN.

2.Jaringan MAN (Metropolitan Area Network) – Apa Itu MAN?

Topologi Jaringan MAN

MAN (Metropolitan Area Network) adalah jenis jaringan komputer yang dapat mencakup area yang lebih luas dan menggunakan teknologi yang lebih canggih dari semua jaringan komputer berjenis LAN.

Mengapa jenis jaringan ini dikatakan bisa mencakup area yang lebih luas? Jawabannya adalah karena MAN sendiri biasa digunakan untuk menghubungkan jaringan komputer dari satu kota ke kota lainnya. Namun sayang, untuk membuat suatu jaringan MAN, biasanya memerlukan operator telekomunikasi yang bertugas sebagai penghubung antar jaringan komputer.

Ø  Ciri-Ciri MAN

1.      Memiliki Luas Jangkauan atara ± 5 – 10 KM

2.      Merupakan Kumpulan LAN yang dihubungkan ( menghubungkan beberapa lokasi)

3.      Tidak Menggunakan Serial Komunikasi

Ø  Fungsi MAN

-          membangun & Implementasi sebuah sistem jaringan yang mengkolaborasikan antar server

-          menghubungkan komputer dan perangkat jaringan lainnya sehingga dapat berkomunikasi satu sama lain

Ø  Keuntungan Menggunakan Jaringan MAN

Berbeda dengan jaringan LAN, jaringan ini sendiri dapat mencakup wilayah atau area yang lebih luas sehingga untuk berkomunikasi dengan internet menjadi lebih efisien. Jaringan MAN juga mempermudah anda dalam halnya berbisnis. Bahkan, keamanan berkomunikasi menggunakan jaringan ini juga menjadi lebih terjaga.

Ø  Kerugian Menggunakan Jaringan MAN

Meskipun bertelekomunikasi dengan jaringan ini bisa dibilang cukup aman, namun ternyata jaringan MAN mudah dirusak oleh seseorang tidak bertanggung jawab untuk mengambil keuntungan pribadi. Bahkan, untuk memperbaiki jaringan MAN ini juga memerlukan waktu yang cukup lama.

Daftar Pustaka :

https://www.indoworx.com/apa-itu-lan-man-wan/

https://www.premankumatan.com/2018/04/pengertianciri-ciri-dan-fungsi-lanmanwan.html

Belajar HTML dengan XAMPP Bagian 4

Membuat Layout Web dengan Tabel

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Tabel sangat penting artinya dalam desain web. Karena dengan tag table dapat dibuat halaman web yang terbagi pada beberapa kolom dan baris.

 Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan tabel yaitu,

 <table>

        <tr><td></td>

        </tr>

</table>

. Yang perlu diingat yaitu bahwa tag  <tr> dan  <td>  harus terletak diantara tag  <table> dan </table>

ini adalah gambaran tampilan awal/home pada Layout Table sederhana yang saya buat silahkan dilihat :

Dihalaman awal ini terdapat beberapa Menu : 

<html>

<head>

<title>Beranda - Website 2F</title>

</head>

<body>

<table align="center" border="0" width="900">

<tr>

<td height="90" bgcolor="aqua" align="center" colspan="2">

<H1>SITUS RESMI KELAS 2F</h1>

</td>

</tr>

<tr>

<td height="35" bgcolor="yellow" align="center" colspan="2">

<a href="file:///C:/xampp/htdocs/web2f/index.html.html">BERANDA</a>

<a href="file:///C:/xampp/htdocs/web2f/profil.html.html">PROFIL</a>

<a href="file:///C:/xampp/htdocs/web2f/galeri.html.html">GALERI</a>

<a href="file:///C:/xampp/htdocs/lat1/Halaman%20Login%20Admin.html">LOGIN</a>

<a href="file:///C:/xampp/htdocs/lat1/formulir.html">DAFTAR</a>

</td>

</tr>

<tr>

<tr height="300">

<td valign="top" bgcolor="white-space" width="500" >

<p align="justify">

Selamat Datang di Website kelas 2F

HALAMAN BERANDA

</p>

</td>

<td valign="top" bgcolor="violet" width="200" >

<h4>Komenar Baru</h4>

<p>Ini Adalah Komentar Baru</p>

<h4>Buku Tamu</h4>

<p>Ini adalah Buku Tamu</p>

</td>

</tr>

<tr>

<td height="25" bgcolor="yellow" align="center" colspan="2">

<p>Copyright 2018 - Situs Resmi 2F. Design by Ryan Kepala Suku</p>

</td>

</tr>

</table>

</body>

</html>

Hasilnya :

Dan jika di klik tentu halaman akan di arahkan ke alamat yang di tuju.. contoh ke beranda.

Semoga Bermanfaat...

Baca Juga :

Belajar HTML dengan XAMPP Bagian 1

Belajar HTML dengan XAMPP Bagian 2

Belajar HTML dengan XAMPP Bagian 3

Belajar HTML dengan XAMPP Bagian 4

Belajar HTML dengan XAMPP Bagian 3

Membuat Tag From HTML

Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web.

Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL.

Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.

Pengertian tag <form>
Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.

Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get(dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method postbiasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.

Struktur dasar form akan terlihat sebagai berikut:

<form action="prosesdata.php" method="post">
...isi form...
</form>

Mengenal tag <input>
Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan tombol submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
 <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text
 <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password.
 <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkboxmemiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
 <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
 <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.

Perhatikan juga bahwa seperti tag <img> dan <br>, tag <input> juga merupakan tag yang berdiri sendiri dan tidak membutuhkan penutup tag.

Mengenal tag <textarea>
Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS.
Contoh penggunaan textarea adalah sebagai berikut:
<textarea rows="5" cols="20">
Text yang diisi dapat mencapai banyak baris
</textarea>
Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.

Mengenal tag <select>
Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan.
Contoh penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
    <option>Pilihan 2</option>
    <option value="pilihan ketiga">Pilihan 3</option>
</select>

Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan form.

Tag select memiliki atribut selected yang dapat ditambahkan agar tag select berisi nilai awal.
Contoh penggunaanya adalah sebagai berikut:
<select>
    <option>Pilihan 1</option>
    <option>Pilihan 2</option>
    <option value="pilihan ketiga" selected>Pilihan 3</option>
</select>

Mengenal Atribut: Name
Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau ASP), nilai dari atribut name inilah yang akan menjadi variabel form.
Contoh pemakaiannya adalah sebagai berikut:
<input type="text" name="username">
<input type="text" name="email">
Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing akan dibedakan menurut atribut name.

Berikut contoh Script latihan membuat tag from :

Form Login

"<html>
<head>
<TITLE>Login Admin</TITLE>
</head>
<body>
<div align="center">
<b>LOGIN ADMIN</b><p>
<table border="0" width="300">
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="tuser"></td>
</tr>
<tr>
<td>Pasword</td>
<td>:</td>
<td><input type="password" name="tpass"></td>
</tr>
<td colspan="3" align="center">
<input type="submit" value="Login" name="blogin">
</td>
</div>
</body>
</html>"

Hasilnya :

Form Formulir :

"<html>
<head>
<TITLE>Formulir Daftar</TITLE>
</head>
<body>
<b>FORMULIR PENDAFTARAN</b><p>
<form action="proses.html" method="post"
enctype="multipart/from-data" name="from_reg">
Nama Lengkap: <input name="nama_lengkap" type="text" value="nama kamu" size="100" maxlength="5" placeholder="isi lengkap" required />
<br />
Password: <input name="password" type="password" />
<br />
Jenis Kelamin :
<input name="jenis_kelamin" type="radio" value="laki-laki" />
Laki - Laki
<input name="jenis_kelamin" type="radio" value="perempuan" />
Perempuan
<br />
Hobi:
<input name="hobi_baca" type="checkbox" /> Membaca Buku
<input name="hobi_nulis" type="checkbox" /> Menulis
<input name="hobi_mancing" type="checkbox" /> Memancing
<br />
Kota Asal:
<select name="kota_asal">
<option value="Purbalingga">Purbalingga</option>
<option>Purwokerto</option>
<option value="Cilacap">Cilacap</option>
</select>
<br />
Foto : <input name="foto" type="file" />
<br/>
Komentar Anda:
<textarea cols="20" name="komentar" rows="5">
Silahkan katakan isi hati anda</textarea>
<br />
<input type="submit" value="Mulai Proses!" />
<input type="reset" value="Batal" />
</form>
</body>
</html>"

Hasilnya :

Semoga Bermanfaat..

Baca Juga :

Belajar HTML dengan XAMPP Bagian 1

Belajar HTML dengan XAMPP Bagian 2

Belajar HTML dengan XAMPP Bagian 3

Belajar HTML dengan XAMPP Bagian 4

Belajar HTML dengan XAMPP Bagian 2

Membuat Tabel dengan HTML

Cara Membuat tabel di HTML (tag table)

Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>, dan tag <td>:

Tag <table> digunakan untuk memulai tabel
Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:

Contoh penggunaan tag <table>:

<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td> Baris 2, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 3, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 1</td>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Hasilnya adalah :

Perhatikan bahwa pada tag <table> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.

Sampai disini kita telah mempelajari beberapa tag HTML yang sering digunakan dalam pembuatan halaman web. Untuk halaman web yang panjang, kadang perlu diberi komentar mengenai fungsi dan tujuan kita membuatnya.


Baca Juga :

Belajar HTML dengan XAMPP Bagian 1

Belajar HTML dengan XAMPP Bagian 2

Belajar HTML dengan XAMPP Bagian 3

Belajar HTML dengan XAMPP Bagian 4

Belajar HTML dengan XAMPP Bagian 1

Nama     : Riyanto

Nim        : 1270050

Kelas      : 12.MI2F.21

Belajar HTML dengan XAMPP Bagian 1

Pengenalan HTML

Pertama apa itu HTML??

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak Negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.

Lalu Apa itu “XAMPP“? Sedikit saya jelaskan, xampp adalah software atau aplikasi yang mampu di jalankan di komputer yang tujuannya untuk menjalankan script HTML. Dengan bantuan software ini kita bisa menjalankan script HTML secara offline atau tanpa terkoneksi internet, jadi sebelum kita menyewa hosting dan domain, kita bisa membuat website offline di localhost dengan xampp.

Berikut cara Install Xampp

1. Silakan anda download xampp disini.
2. Jika sudah berhasil di download, langsung saja klik aplikasi xampp dua kali untuk menginstall-nya.
3. Anda klik next saja untuk melanjutkan install xampp.
4. Jika sudah berhasil di install, tinggal anda jalankan saja dengan membuaka xampp control panel, dibagian Apache dan MySQL klik start.

Gambar XAMPP Aktif

Install xampp sudah berhasil, Secara default maka saat kita memanggil localhost akan diarahkan ke halaman pengaturan XAMPP. Jadi jika mengetik localhost pada browser akan otomatis ke direct ke alamt localhost/xampp. Hal ini karena ada file index.php pada folder htdocs yang mengarahkan kita ke folder xampp. Kita bisa menghapus file “index” ini jika mengganggu.Namun jika hanya sebagai latihan, maka kita cukup membuat folder- folder didalam folder htdocs dan kemudian memanggilnya langsung, seperti contohh diatas (localhost/latihan). Folder HTDOCS terletak didalam folder XAMPP. Kita bisa menambahkan beberapa folder baru didalam folder HTDOCS. Biasanya folder-folder ini merupakan pemisahan dari latihan atau project website yang sedang kita buat. Cara memanggil folder ini pada browser, berbeda dengan cara memanggil folder pada windows.

Misal kita membuat folder “latihan” dalam folder HTDOCS maka kita harus membuka folder ini dengan mengetikkan localhost/latihan atau 127.0.0.1/latihan.

Jika sudah maka buat Anda bisa menggunakan NOTEPAD untuk menuliskan syntac HTM atau HTML, dan disimpan dalam extensi .htmatau .html

Contoh tag HTM atau HTML :

1 2 3 4 5 6 7 8 9

<!DOCTYPE html> <html> <head>                 <title>Titel Website</title> </head> <body>                 <!– Isi atau konten website disini –> </body> </html>

Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai.

Tag, terdiri dari lambang-lambang khusus seperti : < >  dan /, untuk menuliskannya di dalam dokumen HTMLdimulai dengan tag pembuka <…> dan diakhiri dengan tag penutup </...> Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas : html, head, title, body dan yang lainnya ini disebut dengan elemen.

Elemen HTML ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background) : <body bgcolor=“0000ff”>…</body>, body merupakan elemen, bgcolor adalah atribut dan 0000ffmerupakan nilai (value).

Elemen HTML mempunyai tiga hal penting yaitu : tag pembuka, isi, dan tag penutup.

Sebagai contoh elemen tag pembuka <html> dan tag penutup </html>.

HEAD, adalah informasi Header dari dokumen HTML. Informasi di dalam header meliputi : title, meta, style, script, dll. Selain title, informasi didalam header ini nantinya tidak akan di tampilkan di web browser.

TITLE, merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser.

BODY, merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).

Format text pada HTML.

Untuk membuat text atau suatu paragraf, tag elemennya adalah <p>…</p>, dan untuk baris baru adalah <br>. Perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh seperti : <br>dan <hr> (Garis Horizontal).

Selanjutnya tag <h1> hingga <h6>, disebut juga sebagai Heading, yang biasanya di gunakan untuk membuat judul, angka yang tertera setelah huruf h adalah besarnya ukuran huruf.  Angaka 1 (satu) untuk ukuran huruf yang terbesar, sedangkan angka 6 (enam) adalah untuk ukuran huruf yang terkecil.

Ada banyak jenis kode untuk format text pada html, yang mungkin tidak Saya sebutkan satu-persatu, karena ini hanyalah sekilas mengenal dasar HTML.

Contoh Praktek 
Text HTML :

"<html>

<head>

<TITLE>Latihan Membuat WEB</TITLE>

</head>

<body>

<b>Pengumuman Lomba Cerdas Cermat</b>

<br><p><i>Mahasiswa Teladan</i></p>

<br><u>Mahasiswa Terbaik</u>

<br><i>Mahasiswa Terepat</i>

<b>Mahasiswa Terlengkap</b>

<br><s>Mahasiswa Terepat</s>

<marquee><br><hr><u>Selamat Datang BSI PURWOKERTO Jl HR Bunyamin 106 www.bsi.ac.id</u></marquee>

<h1>Judul Web</h1>

<h2>Judul Web</h2>

<h3>Judul Web</h3>

<h4>Judul Web</h4>

<h5>Judul Web</h5>

<h6>Judul Web</h6>

<ol>

<li>Jono</li>

<li>bahrudin</li>

</ol>

<ul>

<li>Jono</li>

<li>bahrudin</li>

</ul>

</body>

</html>"

Gambar code di notepad++

Hasilnya Menjadi sebagai berikut :

Gambar Hasil Praktek 1

Sampai disini pembahasan tentang Pengenalan dasar HTML bagian1,sampai ketemu di bagian 2, semoga dapat dipahami dan bermanfaat.[]

Baca Juga :

Belajar HTML dengan XAMPP Bagian 1
Belajar HTML dengan XAMPP Bagian 2
Belajar HTML dengan XAMPP Bagian 3
Belajar HTML dengan XAMPP Bagian 4