Pemrograman Web Dasar

-

Nama    : M Yasfa Zamzami
Sekolah : SMKN 4 Bandung
Kelas      : XI RPL 1

Assalamualaikum wr.wb
Setelah lama nggak buka Blog, akhirnya sekarang bisa balik lagi bikin Artikel
Pada kesempatan kali ini saya akan menjelaskan dasar dasar dari Pemrograman Web

Berbeda dengan Pemrograman Dasar dimana kita menggunakan Bahasa C++ dan IDE Code Blocks yang harus kita install terlebih dahulu.  Di Pemrograman Web kita akan menggunakan Aplikasi dengan Spesifikasi yang relatif rendah dan biasanya sudah terinstall sebagai Aplikasi Bawaan di kebanyakan PC untuk belajar Pemrograman Web ini. 

Hal yang kita perlukan:
-         Notepad
-         Browser (Bebas)
-         Niat
-         Kopi Ko? (Kalau ngantuk)

Kalau gitu langsung aja kita mulai

Pertama, Kita Harus tau apa itu HTML
HTML itu singkatan dari “Hyper Text Markup Language”
Apa Sih Maksudnya?

Jadi Hyper Text itu gampangnya bisa diartikan sebagai Teks yang berhubungan dengan Dokumen / Teks lain. Jadi di dalem Halaman Hyper Text itu ada Link yang kalau kita Klik bakal membawa kita ke Halaman Lain (Sumber: Blog sebelah)

Terus kalau Markup Languange itu apa sih?
Setau saya, Markup Languange itu Bahasa yang dipake buat ngatur penampilan atau Penyajian Teks. Bisa  dibilang buat “Memperindah” tampilan Teksnya

Tapi, Selain itu ada juga istilah HTTP yang kepanjanganya itu adalah
“HyperText Transfer Protocol” Kalau yang satu ini sih fungsinya buat mentransfer Data di Web. Selain itu, HTTP ini juga dipake buat ngetransfer Dokumen Web yang formatnya HTML.

“Eh? HTTP? Kok kayak pernah Baca? Dimana ya”
Nah, Coba deh kalian cek bagian atas dari Jendela Browser kalian. Disana kalian bakal liat tulisan http atau https di URL Link Halaman ini. Itu tuh salah satu contoh penggunaan http atau https

Jadi Kesimpulanya Hypertext Markup Languange itu adalah Markup Languange buat HyperText. Atau bisa disebut juga Bahasa yang dipakai biar kita bisa “Memperindah” Teks biasa kita agar bisa ditampilkan ke Browser

Masih Bingung? Coba Baca Lagi atau Search penjelasan lain di Mbah Google


Nah, Sekarang kita udah tau pengertianya tapi sebelumnya ada beberapa hal yang mau saya Jelasin

Saya mau jelasin tentang Tag Tag itu bagian di HTML yang dipake buat ngubah tampilan / nambahin hal tertentu. Tag ini biasanya diakhiri dengan Tag lagi
Contoh: <title>Ini adalah Judul </title> atau <tag> Isi </tag>
Selain itu ada berbagai Macam Tag di HTML, di Artikel ini kita bakal pake Tag:
-         <html> dan </html> untuk buat dokumen Html
-         <head> dan </head> Untuk buat bagian kepala dari dokumen HTML
-         <body> dan </body> Untuk buat Isi utama dari dokumen HTML
-         <h1> - <h6> untuk mengatur ukuran Teks
-         <p> Untuk buat Paragraf
-         <a href = > dan </a> Untuk menghubungkan 2 halaman HTML
-         <img src= > Untuk menampilkan Gambar

Untuk bagian Head dan Body mungkin gambar ini bisa membantu untuk menjelaskan:






Untuk Sekarang mari kita mulai Koding
-         Pertama – tama buka Notepad
-         Di Notepad Coba ketik Teks ini:



-         Simpan Teks tersebut dengan Ekstensi .html.
Caranya Klik File, Klik Save As, Ganti Save As type ke All File, dan beri nama File dengan Ekstensi .html Misal: “Anatomi dasar.html”

-         Buka Teks yang sudah di Save sebagai HTML tersebut hasilnya kurang lebih seperti ini:



Ini lah Hasil dari Kodingan Kita. Teks dalam Tag <title> di <body> ditulis sebagai Judul Halaman dan Teks dalam Tag <body> ditulis dalam Bagian Isi Utama Halaman

Heading
Sekarang mari kita gunakan Heading.
Heading itu sendiri adalah Tag HTML yang digunakan untuk mengatur ukuran Teks di HTML. Coba ketik Kodingan ini dan jangan lupa Save sebagai File .html


Jika kita buka File html tersebut dengan Browser maka hasilnya adalah:



Bisa kita lihat Bahwa Tag Heading berfungsi untuk mengubah Ukuran Teks dari Heading 1 yang Paling Besar hingga Heading 6 yang Paling Kecil

Paragraf
Selanjutnya kita akan menggunakan Tag <p> untuk membuat Paragraf.
Mari kita coba ketik ini:

   Maka Hasilnya adalah:



Link
Selanjutnya kita akan menggunakan Tag <a href> dan </a>. Sebelumnya pastikan anda memiliki beberapa halaman html yang disimpan dalam Folder yang sama untuk mempermudah penggunaan Tag. Mari kita Coba ketik ini:




Maka Hasilnya kurang lebih seperti ini:


Jika anda Mengklik Teks berwarna biru maka Halaman akan berubah.
Pada Teks "Link Belajar Web" jika anda negkliknya dan punya koneksi Internet maka anda akan pindah ke Lamah W3Schools yaitu Link pembelajaran Web
Jika Klik "Ke Heading" Maka anda akan pindah ke Laman Heading. Dan jika Klik "Tab Baru" maka anda akan membuka Laman Paragraf di Tab Baru

Gambar
Selanjutnya kita akan memasukan gambar ke Html.Sebelumnya buatlah Folder baru ditempat penyimpanan Kode Anda. Saya menamai Foldernya “Gambar”. Lalu Masukan Gambar di Dalam Folder itu dan 1 lagi diluar Folder itu (Dalam direktori penyimpanan dokumen Htmlnya)
Lalu ketikan Kode berikut ini:

Kurang lebih Hasil akhirnya begini:


Bisa dilihat Gambar yang diinginkan bisa Muncul. Kalian juga bisa menambahkan Atribut Height (Tinggi) dan Width (Lebar) untuk mengatur ukuran gambarnya

Mungkin segini saja untuk Artikel kali ini Terimakasih sudah membaca
Wassalamualaikum wr.wb


Komentar

Posting Komentar

Postingan populer dari blog ini

Perintah dasar C++ ( + Contoh)

-
Gambar
         Pada kesempatan kali ini saya akan membahas beberapa Perintah dasar dalam C++. Langsung saja  Gan 1.       Perintah Cout     Cout adalah singkatan dari “ Character Output ” atau “Console Output” ada juga yang bilang “ Computer Output ” .  Fungsinya adalah untuk menampilkan Teks. Penulisan atau Sintaks nya adalah :    cout  << “Teks anda disini”;          Anda juga bisa menampilkan Variabel dan hasil perhitungan dengan perintah Cout. Penulisanya seperti ini: cout  <<  Variabelku;  (Untuk menampilkan Variabel) cout  <<  3 + 7; (Untuk menampilkan Perhitungan)   Untuk pindah ke baris selanjutnya (Mirip Enter) kita bisa memasukan perintah endl (Endline) atau \n (Newline) berikut penulisanya: cout  << "Teks anda disini " << endl; cout  << "Teks anda ...
Baca selengkapnya

Analisis Web - Code Wars

-
Gambar
Yasfa Zamzami - XI RPL 1 Assalamualaikum Wr.wb Pada Artikel kali ini kita akan melakukan sesuatu yang sedikit berbeda dengan Artikel yang lain. Dalam Artikel lain, Biasanya kita belajar Ngoding . Namun pada Artikel kali ini kita akan Menganalisis Salah Satu Situs E - Learning yang ada di Internet disini kita akan Menganalisis Situs Code Wars Apa itu Code Wars? Jadi, Code Wars adalah Website E Learning (Pembelajaran Online) yang memberikan beberapa Latihan atau Tantangan yang bisa kita ikuti untuk menguji Skill kita. Code Wars adalah situs Pembelajaran Koding yang menggunakan tema "Bela Diri" Dalam Code Wars Codewarrior (User) memiliki Level dari 7 kyu sampai 2 Dam (Urutan : 7 kyu, 6 kyu, 5 kyu, 4 kyu, ..... , 1 dam, 2 dam) Untuk meningkatkan Peringkat  Codewarrior  harus mendapatkan Honor dengan cara menyelesaikan Kata.  Kata? apa itu? susunan Huruf yang menyusun Kalimat? Bukan, bukan itu, Kata disini diambil dari Istilah Bela Diri yang ...
Baca selengkapnya

Pemrograman Web - PBO dalam JavaScript

-
Assalamualaikum Pada Artikel kali ini kita akan belajar tentang PBO sederhana dalam JavaScript Dalam PBO kita akan banyak menggunakan Fungsi jadi saya sarankan untuk membaca Artikel sebelumnya tentang Fungsi pada JavaScript Definisi PBO Apa itu PBO? PBO (Pemrograman berbasis Objek) atau bahasa keren nya OOP (Object Oriented Programming) adalah cara ngoding yang berfokus pada Objek. Terus kalau Objek apa? Objek itu sendiri adalah sekumpulan Variabel , Fungsi , dan Prosedur, yang disatukan dalam 1 Class lalu diperlakukan layaknya Objek di dunia Nyata. Misalnya kita mau buat Objek Nyamuk. Kita tentuin Sifat dari Nyamuk itu apa aja terus jadiin jadi Variabel. Lalu setelahnya, kita tentuin Tindakan yang bisa dilakukan nyamuk itu apa aja terus jadiin Fungsi atau Prosedur. Misalnya gini nih: Objek : Nyamuk  Variabel: - Usia - Kecepatan Terbang - Darah yang dihisap Fungsi / Prosedur: - Terbang -  Menghisap Darah PBO dalam JavaScript Barusan itu sediki...
Baca selengkapnya