Sharing.id

Membuat website sederhana pondok pesantren zulhijjah

Assalamualaikum...
Pada kesempatan kali ini, kita akan membuat layout pada sebuah halaman website.
Oke, ceritanya kita akan membuat website dengan tampilan seperti ini.

1.Buatlah file HTML bernama "index.html", lalu buatlah folder css dan gambar. Jadikan semuanya dalam satu folder project. Tepat seperti gambar dibawah ini.

2.Nantinya, folder “css” berisi file yang berisi script kode css. Maka buatlah file dengan format .css pada folder ini. Sebagai contoh, disini kita buat filenya dengan nama “tampilan.css”.

3.Nah, pada folder “gambar”. Isinya adalah gambar-gambar pendukung konten dalam website.

Tepatnya seperti contoh di atas, contoh tampilan halaman yang akan kita buat. Kita isi dulu foldernya dengan gambar-gambar pendukung.

4.Lalu, pada file “index.html” kita ketikkan script kode berikut ini.
Sebelumnya, tambahkan juga script kode HTML untuk menghubungkan file HTML dengan file CSS yang sudah kita buat. Berikut ini adalah kode tersebut:

Dan kode yang di atas tadi itu kita masukkan pada tag <tag></tag>.
Maka dari itu, ketikkan script kode ini secara keseluruhan.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website Pondok </title>
<link rel="stylesheet" href="css/tampilan.css">
</head>
<body>

<div class="badan-utama">

<header>
<center><h2>YAYASAN PENDIDIKAN ISLAM <br> PONDOK PESANTREN ZULHIJJAH</h2></center>
<center><p>Jalan Gajah Mada (Simpang Koni) RT.17 RW.01 <br> Kelurahan Teratai Muara Bulian Kabupaten Batanghari Jambi</p></center>
</header>
<nav class="navigasi">
<ul>
<li><a class="active" href="#beranda">Beranda</a></li>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#visimisi">Visi Misi</a></li>
<li><a href="#pendidikan">Pendidikan</a></li>
<li><a href="#santri">Santri</a></li>
<li><a href="#alumni">Alumni</a></li>
<li><a href="#kontak">Kontak</a></li>
<li><a href="#tentang">Tentang Kami</a></li>
</ul>
</nav>

<div class="banner">
<img src="gambar/foto1.JPG" alt="gambarfoto1">
</div>

<div class="menu-kiri">
<div class="kotak">
<h3>Pendaftaran Santri Baru</h3>
<img src="gambar/pendaftaran.jpg" alt="pendaftaran">
<p>
Isi Form Pendaftaran dengan Klik Tombol di bawah ini
</p>

<a class="tombol tombol-pesan" href="#">Form</a>
</div>
<div class="kotak">
<h3>Berita Terbaru</h3>

<nav class="menu-artikel">
<img src="gambar/zulhijjah.jpg" alt="zulhijjah">
<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal. Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>
</nav>
</div>
</div>

<div class="menu-tengah">
<div class="kotak">
<h3>Pengumuman Libur Pondok</h3>
<span class="tanggal-posting">
Diposting pada 11.04 WIB, 15 April 2020
</span>

<img src="gambar/foto3.jpg" alt="foto3">

<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal.
Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>

<a class="tombol tombol-lengkap" href="#">Selengkapnya</a>
</div>
<div class="kotak">
<h3>Pengumuman</h3>
<p>
Ini merupakan contoh post SIAP Web Sekolah, Anda dapat menyunting ini untuk menaruh informasi tentang diri Anda atau situs Anda sehingga pembaca dapat mengetahui dari mana Anda berasal.
Anda dapat membuat sebagai banyak halaman seperti ini atau sub-halaman sebanyak mungkin dan mengatur seluruh konten Anda di dalam situs sekolah Anda.
</p>

<a class="tombol tombol-lengkap" href="#">Selengkapnya</a>
</div>
</div>

<div class="menu-kanan">
<div class="kotak">
<h3>Jadwal Pendaftaran</h3>
<img src="gambar/foto.jpg" alt="foto">

<h4 align="center">Jadwal Pendaftaran</h4>
<center>
<p>Senin-Sabtu 08.00WIB-18.00WIB</p>
</center>
</div>

<div class="kotak">
<h3>Berita Pondok</h3>

<nav class="menu-artikel">
<ul>
<li><a href="#">Pengumuman Libur Pondok</a></li>
<li><a href="#">Penerimaan Santri Baru</a></li>
<li><a href="#">Alumni Angkatan</a></li>
<li><a href="#">Santri Hits</a></li>
<li><a href="#">Pembangunan Masjid</a></li>
<li><a href="#">Haflah Akhir Sanah</a></li>
<li><a href="#">Pelepasan kelas VII</a></li>
</ul>
</nav>
</div>
</div>

<footer>
@copyright 2020 || by Juniyantoputrafajar
</footer>

</div>

</body>
</html>

Untuk pemanggilan file gambar di atas, sudah kita gunakan script kodenya yaitu <img>
<img src="gambar/foto1.JPG" alt="gambarfoto1">
5. Untuk file CSSnya (“tampilan.css”), ketikkan script kode berikut.

{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

body
{
background-color: gainsboro;
}

.badan-utama
{
max-width: 1080px;
margin: 20px auto;
background-color: white;
padding: 15px;
overflow: hidden;
}

header
{
background-color: teal;
color: white;
padding: 1px;
}

header h2
{
margin-bottom: 7px;
font-size: 35px;
}
.navigasi ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:green;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
}

.navigasi li
{
float: left;
}

.navigasi li a
{
display: block;
color: white;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}

.navigasi li a:hover
{
background-color:grey;
transition-duration: 2s;
}

.banner
{
margin-bottom: 15px;
}

.banner img
{
display: block;
width: 100%;
height: 330px;
}

.kotak
{
border: 1px solid gainsboro;
padding: 10px;
margin-bottom: 15px;
}

.kotak h3
{
background-color: crimson;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 13px;
}

.kotak img
{
display: block;
width: 100%;
margin-bottom: 10px;
}

.kotak p
{
margin-bottom: 10px;
}

.menu-kiri
{
width: 250px;
margin-right: 10px;
float: left;
}

.menu-tengah
{
width: 530px;
margin-right: 10px;
float: left;
}

.menu-tengah h3
{
background: none;
color: crimson;
margin-bottom: 0;
}

.tanggal-posting
{
color: gray;
text-align: right;
font-size: 12px;
margin-bottom: 10px;
display: block;
}

.tombol
{
display: block;
text-decoration: none;
padding: 10px;
width: 120px;
color: white;
border-radius: 5px;
text-align: center;
}

.tombol:hover
{
background-color: black;
transition-duration: 2s;
}

.tombol-pesan
{
background-color: green;
}

.tombol-lengkap
{
background-color: darkorange;
}

.menu-kanan
{
width: 250px;
float: left;
}

.menu-kanan, .menu-kiri, .menu-tengah
{
margin-bottom: 15px;
}

footer
{
clear: both;
background-color: crimson;
color: white;
padding: 15px;
text-align: center;
}

.menu-artikel ul
{
list-style-type: none;
}

.menu-artikel ul li a
{
text-decoration: none;
display: block;
padding: 13px;
border-bottom: 1px solid gainsboro;
margin-bottom: 12px;
color: black;
}

.menu-artikel ul li a:hover
{
color: darkorange;
border-bottom: 5px double chocolate;
transition-duration: 2s;
}

/*untuk tablet*/
@media screen and (max-width:1080px)
{
.badan-utama
{
width: 100%;
}

.menu-kiri
{
width: 25%;
}

.menu-tengah
{
width: 68%;
float: right;
}

.menu-kanan
{
clear: both;
float: none;
width: 100%;
}
}

/*untuk android*/
@media screen and (max-width:780px)
{
header h2, header p
{
text-align: center;
}

.menu-kiri, .menu-kanan, .menu-tengah
{
float: none;
width: 100%;
}

.navigasi li
{
float: none;
}

}

6.Lalu buka file “index.html” pada browser. Maka akan muncul tampilan seperti ini pada browser

Nah, pas banget kan seperti gambar awal tadi???
7.Selanjutnya kita coba kecilkan lebar layar browsernya, kita bisa lihat perubahan tampilannya.

Dari hasil seperti tampilan gambar di atas, bisa discroll lagi ke bawah untuk melihat isi kontennya lebih lanjut.

Demikianlah postingan kali ini. Akhir kata, semoga bermanfaat ya.

Wassalamualaikum...

Macam-macam protokol jaringan komputer

1. TCP/IP (TRANSMISSION CONTROL PROTOCOL/INTERNET PROTOCOL)

Ini merupakan standar komunikasi data yang digunakan oleh komunitas internet dalam proses tukar-menukar data dari satu komputer ke komputer lain di dalam jaringan Internet. Protokol ini tidaklah dapat berdiri sendiri, karena memang protokol ini berupa kumpulan protokol (protocol suite).

Protokol ini juga merupakan protokol yang paling banyak digunakan saat ini. Data tersebut diimplementasikan dalam bentuk perangkat lunak (software) di sistem operasi. Istilah yang diberikan kepada perangkat lunak ini adalah TCP/IP stack. Pada TCP/IP terdapat beberapa protokol sub yang menangani masalah komunikasi antar komputer. TCP/IP mengimplemenasikan arsitektur berlapis yang terdiri atas empat lapis, diantaranya adalah :

Protokol lapisan aplikasi
Protokol lapisan antar-host
Protokol lapisan internetwork
Protokol lapisan antarmuka jaringan

2. UDP ( User Datagram Protokol)

UDP, singkatan dari User Datagram Protocol adalah salah satu protokol lapisan transpor TCP/IP yang mendukung komunikasi yang tidak andal (unreliable), tanpa koneksi (connectionless) antara host-host dalam jaringan yang menggunakan TCP/IP.

3. Internet Control Message Protocol (ICMP)

Perlu ditegaskan kembali bahwa ICMP berbeda tujuan dengan TCP dan UDP, dalam hal ini ICMP tidak digunakan secara langsung oleh aplikasi jaringan milik pengguna, dengan syarat aplikasi ping yang mengirim pesan ICMP Echo Request serta menerima Echo Reply untuk menentukan apakah komputer tujuan dapat dijangkau dan berapa lama paket yang dikirimkan dibalas oleh komputer tujuan.

ICMP pada umunya digunakan oleh sistem operasi komputer jaringan untuk mengirim sebuah pesan kesalahan pada jaringan yang digunakan, sebagai contoh, “bahwa komputer tujuan tidak bisa dijangkau”.

4. HTTP (HYPERTEXT TRANSFER PROTOCOL)

HTTP (Hypertext Transfer Protocol) merupakan suatu protokol yang digunakan oleh WWW (World Wide Web) sebagai suatu identitas utama dalam jaringan internet yang sering digunakan untuk mengakses sebuah situs atau website.

HTTP sendiri mendefinisikan bagaimana suatu pesan bisa diformat dan dikirimkan dari server ke client, serta difungsikan untuk melakukan pengaturan aksi-aksi apa saja yang harus dilakukan oleh web server dan juga web browser sebagai respon atas perintah-perintah yang ada pada protokol HTTP ini.

Untuk contoh sederhananya, bila mana kita mengetikkan suatu alamat URL / Link pada internet browser maka web browser tersebut akan mengirimkan sebuah perintah HTTP ke web server. Kemudian Web server akan menerima perintah tersebut dan akan melakukan aktivitas sesuai dengan perintah yang diminta oleh web browser. Hasil aktivitas tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada kita.

5. HTTPS (HYPERTEXT TRANSFER PROTOCOL SECURE)

Sesuai dengan nama yang diusungnya, HTTPS ini merupakan versi aman dari HTTP yang djadikan sebuah protokol komunikasi dari World Wide Web. HTTPS ini sendiri Ditemukan oleh Netscape Communications Corporation untuk menyediakan autentikasi dan komunikasi tersandi dan penggunaan dalam komersi elektris, sehingga para pengguna layanan internet dengan tingkat pengamanan data yang sangat tinggi akan dapat terjaga dengan sangat baik.

Selain menggunakan komunikasi plain text, HTTPS juga sudah menyandikan data sesi menggunakan protokol SSL (Secure Socket layer) atau protokol TLS (Transport Layer Security). Kedua protokol tersebut memberikan perlindungan yang memadai dari serangan eavesdroppers, dan man in the middle attacks. Pada umumnya port HTTPS adalah 443.

6. FTP (FILE TRANSFER PROTOCOL)

Ini adalah sebuah protocol internet yang berjalan di dalam lapisan aplikasi yang merupakan standar untuk pentransferan berkas (file) computer antar mesin-mesin dalam sebuah internetwork. FTP atau protocol Transmission Control Protocol (TCP) untuk komunikasi data antara klien dan server sehingga diantara kedua komponen tersebut akan dibuatlah sebuah sesi komunikasi sebelum transfer data dimulai.

FTP hanya menggunakan metode autentikasi standar, yakni menggunakan User name dan paswordnya yang dikirim dalam bentuk tidak terenkripsi. Pengguana terdaftar dapat menggunakan username dan password-nya untuk mengakses, mendownload dan mengupload berkas- berkas yang ia kehendaki.

Umumnya, para pengguna daftar memiliki akses penuh terdapat berapa direkotri , sehingga mereka dapat berkas , memuat dikotri dan bahkan menghapus berkas. Pengguna yang belum terdaftar dapat juga menggunakan metode anonymous login,yakni dengan menggunakan nama pengguna anonymous & password yang diisi dengan menggunakan alamat e-mail. Sebuah server FTP diakses dengan menggunakan Universal Resource Identifier (URI) dengan menggunakan format ftp://namaserver. Klien FTP dapat menghubungi server FTP dengan membuka URI tersebut.

7. ETHERNET

Jenis protocol yang pertama ini merupakan sebuah protocol yang memang harus diakui paling banyak digunakan untuk saat ini, Ethernet sendiri menggunakan suatu metode aksesnya yang sering dikenal dengan istilah CSMA/CD (Collision Detection/Carrier Sense Multiple Access ). Kedua sistem ini merupakan suatu sistem yang digunakan untuk menunggu suatu istruksi yang di transmisikan melalui sebuah kabel sebelum melakukan pengiriman pesan yang akan ditujukan melalui jaringan tersebut.

Jika dari hasil pengecekan jaringan memang lagi dalam kondisi stabil barulah sistem komputer tersebut akan menyampaikan suatu informasi, tetapi ketika pada saat sebelumnya node lain telah melakukan penyiaran pesan melalui transmisi kabel tersebut, maka sistem komputer akan melakukan aktivitas menunggu kemudian akan terus mencoba kembali sampai suatu rute sudah memberikan izin.

Protokol jaringan Ethernet juga biasanya sering digunakan pada topologi dengan jenis Linear bus, serta jenis bintang atau star, suatu data akan bisa dikirim jika kabel tersebut telah menggunakan kabel dengan jenis twisted pair ataupun coaxial serta kabel fiber optic dengan kecepatan rata-rata mencapai 10 Mbps.

Tetapi untuk saat ini sudah hadir Ethernet dengan jenis fast Ethernet dimana jenis yang satu ini telah mendukung suatu kecepatan hingga mencapai 100 Mbps, Ethernet dengan tipe ini juga memang diperlukan suatu connector yang lebih mempunyai kapasitas atau kemampuan yang lebih dibandingkan dengan connector biasanya serta membutuhkan suatu network interface card dan kabel transmisi yang jadi rekomendasi adalah kabel dengan jenis twisted pair ataupun kabel fiber optic.

8. LOCAL TALK

Jenis jaringan yang satu ini merupakan sebuah protocol jaringan yang memang dikembangkan oleh perusahaan Apple computer dimana ditujukan untuk sebuah computer machintos, dimana metode yang digunakan pada tipe ini adalah jenis CSMA/CA (Carrier Sense Multiple Access/Collision Avoidance), dimana cara kerja tipe ini hamper sama dengan apa yang ditunjukkan oleh tipe CSMA/CD terkecuali ketika komputer akan memberikan suatu sinyal sebelum melakukan pengiriman data.

Perlu anda ingat bahwa adapter dan kabel yang digunakan pada local talk biasanya media khusus yang memang digunakan untuk menghubungkan antara satu seri computer dengan menggunakan suatu port berisi. Machintos juga sangat memungkinkan penggunaan tipe peer to peer tanpa diperlukannya suatu perangkat lunak tambahan.

Pada local talk biasanya mengijinkan suatu topologi tree atau topologi linear bus dengan menggunakan media transmisi kabel yang mempunyai jenis psangan yang berpintal, namun kekurangan terjadi pada kecepatannya, yaitu kecepatan yang bisa dihasilkan untuk melakukan sebuah pengiriman suatu informasi hanya mencapai titik 230 Kbps.

9. TOKEN RING

Protocol dengan jenis ini pertama kali dikembangkan pada tahun 1980 yang dilakukan oleh perusahaan IBM, cara atau metode akses yang digunakan tipe ini adalah dengan cara menggunakan pengiriman suatu informasi yang memang berada didalam satu lingkaran tersebut. Pada dasarnya didalam sebuah tipe token ring, beberapa perangkat komputer akan dihubungkan untuk memancing sebuah sinyal agar bisa masuk pada jalur online jaringan tersebut.

Didalam sistem kerjanya dimana satu token elektronik akan melakukan suatu pergerakan mengililingi sebuah lingkaran yang menackup semua perangkat computer yang terpasang pada jaringan tersebut, sehingga ketika ditemukannya suatu komputer yang memang tidak memiliki informasi sama sekali untuk dilakuka pengiriman maka sistem yang bergerak tersebut akan melewati komputer tersebut untuk menuju ke stasiun berikutnya.

Protokol dengan jenis ini hanya melayani topologi dengan tipe Ring dan star dengan media transmisi yang digunakan adalah kabel twisted pair atau kabel fiber optic, protol ini bisa mencapai suatu kecepatan antara 4 Mbps sampai dengan 16 Mbps.

10. FDDI (FIBER DISTRIBUTED DATA INTERFACE)

Jaringan protokol ini digunakan untuk menghubungkan beberapa komputer dengan tipe area local yang meliputi wilayah dengan jarak yang jauh, metode yang digunakan pada jenis protocol ini adalah dengan melibatkan kinerja sebuah token, jenis protocol ini juga hanya menggunakan topologi dengan jenis ring kembar. Suatu pengiriman yang biasa terjadi dari suatu token.

Namun jika terjadi suatu kegagalan didalam jaringan tersebut maka dengan otomatis sistem akan melakukan pergerakan pada sebuah informasi dengan menggunakan jalan alternative untuk membuat suatu jaringan kedua.

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Membuat website sederhana pondok pesantren zulhijjah

Macam-macam protokol jaringan komputer

Label

Arsip Blog

Recent Posts

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Membuat website sederhana pondok pesantren zulhijjah

Macam-macam protokol jaringan komputer

Social Profiles

Label

Arsip Blog

Recent Posts