Pemrograman WEB Kelas XI SMK


RANGKUMAN MATERI
PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

Konsep dasar web
Internet
Adalah kumpulan dari berbagai jaringan komputer yang saling interkoneksi yang mencakup seluruh dunia (jaringan global) dengan melalui jalur telekomunikasi seperti telepon, fiber-optic, wireless dan lainnya.
World Wide Web (WWW) merupakan bagian dari internet. WWW disebut juga dengan istilah Web.
Pengertian web :
Merupakan sekumpulan dokumen, gambar-gambar, dan bentuk resources yang lainnya yang dihubungkan melalui  hyperlinks dan URLs.
Protokol
Merupakan bahasa/software standar untuk mengatur komunikasi jaringan komputer
TCP/IP : Transmission Control Protocol/Internet Protocol merupakan cara standar untuk mempaketkan dan menyelamatkan data komputer (sinyal elektronik) sehingga data tersebut dapat dikirim ke komputer yang lain.
Teknologi web
HTTP, URL, DNS dan Homepage
HTTP : Hypertext Transfer Protocol
Adalah protokol yang menentukan aturan yang perlu diikuti oleh web browser dalam meminta dan mengambil suatu dokumen dan oleh web server dalam menyediakan dokumen yang diminta web browser.
Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML
URL : Uniform Resource Locator
URL digunakan untuk menentukan lokasi informasi pada suatu web server.
URL dapat diibaratkan sebagai suatu alamat, yang terdiri dari:
·         Protokol yang digunakan oleh suatu browser untuk mengambil informasi
·         Nama komputer (server) dimana informasi tersebut berada
·         Jalur serta nama file dari suatu informasi
Format umum URL:
Contoh:
http://www.smkn1sukoharjowsb.sch.id/rpl/index.html
Keterangan:
ü  http                                                       : protokol yang digunakan
ü  www.smkn1sukoharjowsb.ac.id        : nama host atau server komputer
ü  rpl                                                           :  jalur/path dari informasi yang dicari
ü  index.html                                          :  nama file
DNS (Domain Name System)
Adalah suatu sistem penamaan standar komputer-komputer di internet dengan tujuan untuk mempermudah pengelolaan server komputer internet.
Contoh :
www.google.com
www.google.co.id
www.smkn1sukoharjowsb.sch.id
Akan lebih mudah kita menuliskan DNS daripada menggunakan alamat IP.

Website (situs web)
Merupakan alamat (URL) yang berfungsi sebagai tempat penyimpanan data dan informasi dengan berdasarkan topik tertentu.
Web Page (halaman web)
Merupakan halaman khusus dari situs web tertentu yang tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lain baik itu dalam page yang sama ataupun web page lain pada website yang berbeda.
Home page
Merupakan sarana dasar untuk memperkenalkan secara singkat tentang apa yang menjadi isi dari keseluruhan website dari suatu organisasi atau pribadi.

Web browser dan web server
Dalam dunia internet selalu terdapat dua sisi yang saling mendukung, yaitu:
1. Server
Penyedia berbagai layanan termasuk web. Layanan web ditangani oleh sebuah aplikasi bernama web server.
2. Client
Bertugas mengakses informasi yang disediakan oleh server. Pada layanan web, client dapat berupa web browser.

Web Browser
ü  Berjalan pada komputer user/client
ü  Merupakan tool untuk melakukan navigasi di web
ü  Menampilkan dokumen web
Contoh : IE, Firefox, Opera

Web Server
ü  Berjalan pada komputer server
ü  Sebagai tempat menyimpan file-file dokumen web sehingga dapat diakses oleh pengguna internet
Contoh : IIS, Apache, Tomcat (java)

Struktur Dokumen HTML
HTML (Hypertext Markup Language ) merupakan standar bahasa yang digunakan untuk menampilkan dokumen web.
Tag markup HTML biasanya disebut tag HTML
Tujuan dari sebuah web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan menampilkan sebagai halaman web. Browser tidak menampilkan tag HTML, tapi menggunakan tag untuk menampilkan isi halaman.
Dokumen HTML biasanya terdiri dari 3 bagian utama yaitu HTML, Head dan Body.
Perkembangan teknologi HTML

Tag Pembuka, Tag isi dan Tag penutup
 Elemen HTML berisi semua dari tag pembuka sampai dengan tag penutup
Contoh
Tag Pembuka
Tag Isi
Tag Penutup
<p>
Ini merupakan paragraf
</p>
<a href=”home.html”>
Merupakan link
</a>
<br />




Mengedit Dokumen HTML
HTML dapat ditulis dan diedit menggunakan berbagai editor seperti Dreamweaver, teks editor (seperti Notepad, Wordpad, dll). Menggunakan editor teks biasa adalah cara terbaik untuk mempelajari HTML.
Dokumen HTML dapat disimpan dengan tipe file .htm atau .html, tidak ada perbedaan keduanya, jadi terserah anda.

TAG HTML
Dokumen HTML selalu diawali dengan tag <html> dan ditutup dengan tag </html>
Tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML

TAG HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Contoh : <head>Web Dasar</head>
Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “titile” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword.
Contoh : <head><title>Praktikum</title></head>

TAG BODY
Tag body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.
Contoh : <body> ……… isi halaman web ……… </body>

Dokumen HTML Pertama
1.       Bukalah teks editor Notepad, ketikkan tag HTML berikut
<html>
<head> </head>
<body>
Praktikum Web Dasar
</body>
</html>
2.       Simpan (save as) dengan nama praktikum1.html, tipe file .html.
3.       Bukalah file tersebut di dalam web browser (IE, opera, firefox, dll).

TAG HEADING
Heading didefinisikan menggunakan tag <h1> sampai dengan <h6>
<h1> merupakan heading (judul) yang paling penting dan dengan ukuran huruf paling besar, sedangakan <h6> ukuran huruf yang paling kecil.
Contoh : <h1>Bab 1</h1>
                  <h2>Sub Bab 1</h2>…….s/d  <h6>…</h6>
Penting :
Gunakan tag HEADING <h1> s/d <h6> hanya untuk judul saja. Jangan untuk menampilkan teks besar atau tebal, sebab mesin pencari menggunakan tag HEADING untuk melihat struktur dan isi suatu halaman web.

TAG <HR>
Untuk menambahkan garis horizontal, menggunakan tag <hr />. Tag ini berguna untuk memisahkan isi halaman web.
Contoh :
                <body>
                ….isi….
                <hr />
                ….isi….
                </body>

KOMENTAR HTML
Komentar dapat dimasukkan di dalam dokumen HTML agar mudah dipahami.
Cara penulisan komentar : <!--ini merupakan komentar -->

PARAGRAF HTML
Pafagraf di dalam HTML menggunakan tag <p>…</p>
Contoh :
<p>isi paragraf pertama</p>
<p>isi pafagraf kedua</p>

BARIS BARU HTML
Untuk memulai baris baru dalam satu paragraf, menggunakan tag <br />
Contoh :
<br />
<p> isi paragraph<br />isi paragraf</p>

MEMFORMAT TEKS
ü  Untuk menampilkan teks tebal menggunakan tag            <b>….</b>
ü  Untuk menampilkan teks Strong menggunakan tag         <strong>…</strong>
ü  Untuk menampilkan teks besar menggunakan tag           <big>…</big>
ü  Untuk menampilkan teks emphasized menggunakan     <em>…</em>
ü  Untuk menampilkan teks miring menggunakan tag          <i>…</i>
ü  Untuk menampilkan teks kecil menggunakan tag              <small>…</small>
ü  Untuk menampilkan subscript menggunakan                     <sub>…</sub>
ü  Untuk menampilkan superscript menggunakan                 <sup>…</sup>
Contoh :
<html>
<body>
<p><b>Teks tebal</b></p>
<p><strong>Teks Strong</strong></p>
<p><big>Teks besar</big></p>
<p><em>Teks emphasized</em></p>
<p><i>Teks</i></p>
<p><small>Teks kecil</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>

HTML LIST
Untuk membuat daftar (list) di dalam dokumen HTML ada 2 cara, yaitu secara urut dan tidak urut.
Membuat daftar secara urut (ordered list) menggunakan tag <ol>…</ol>
Contoh :
<ol>Algoritma</ol>
<ol>Web Dasar</ol>
<ol>SQL Dasar</ol>
Membuat daftar secara tidak urut (unordered list) menggunakan tag <ul>…</ul>
Contoh :
<ul>Alrogitma</ul>
<ul>Web dasar</ul>
<ul>SQL Dasar</ul>

TEKS BERJALAN
Untuk membuat teks berjalan, menggunakan tag <marquee>
Contoh :
<marquee> Teks Berjalan</marquee>

MENAMBAHKAN GAMBAR
Untuk menambahkan gambar, menggunakan tag <img>
Sintak dasar :
<img src = ‘’ />
Atribut src : source (sumber)
Menambahkan alternatif teks :
<img src=’letak/alamat gambar’ alt=’’ />
Atribut alt : alternatif (alternatif teks ditampilkan apabila gambar gagal dimuat)

MENENTUKAN POSISI GAMBAR
Untuk menentukan posisi gambar di kanan, tengah atau kiri dapat menggunakan atribut align.
Nama atribut
Isi
align
top, bottom, middle, left dan right
Contoh :
<img src =’’ alt=’’ align=’left’ />

BEBERAPA ATRIBUT YANG DAPAT DIMASUKKAN KE DALAM TAG <IMG>
Nama atribut
Isi
KETERANGAN
border
pixel
Untuk menambahkan border
Height
Pixel, %
Menentukan tinggi gambar
width
Pixel, %
Menentukan lebar gambar

MEMBUAT TABEL
Untuk membuat tabel , menggunakan tag <table>….</table>
Suatu tabel berisi kolom menggunakan tag <tr>, dan tiap-tiap kolom berisi sel data dengan menggunakan tag <td>.
<tr> = table row
<td> = table data
Didalam tabel data <td> dapat berisi teks, link, gambar, list (daftar), form dan tabel.
Contoh :
<table border="1">
<tr>
                <td>kolom 1, sel 1</td>
                <td>kolom 1, sel 2</td>
</tr>
<tr>
                <td>kolom 2, sel 1</td>
                <td>kolom 2, sel 2</td>
</tr>
</table>

ATRIBUT DI DALAM TABEL
Nama atribut
Isi
KETERANGAN
border
pixel
Untuk menambahkan border
bgcolor
Rgb(x,x,x), #xxxxxx, nama warna
Untuk memberikan warna
width
Pixel, %
Menentukan lebar gambar
cellpadding
pixel
Jarak antara isi dengan tabel
height
Pixel, %
Menentukan tinggi tabel

MEMANIPULASI TABEL
MENAMBAHKAN JUDUL KOLOM
Menambahkan judul suatu tabel, menggunakan tag  <th>…</th> (table header)
Contoh
<table border=’1’>
<tr>
<th> Judul 1</th>
<th>Judul 2</th>
</tr>
<tr>
                <td>kolom 1, sel 1</td>
                <td>kolom 1, sel 2</td>
</tr>
<tr>
                <td>kolom 2, sel 1</td>
                <td>kolom 2, sel 2</td>
</tr>
</table>




MENGGABUNGKAN BEBERAPA KOLOM
Untuk menggabungkan beberapa kolom, menggunakan atribut colspan
Contoh :
<html>
<head>
   <title> Latihan Table Dua </title>
</head>
<body>
 <table border=”1”>
    <tr>
  <td colspan="2" align="center">Satu</td>
 </tr>
 <tr>
<td align=”center”>Dua</td>
  <td align=”center”>Tiga</td>
 </tr>
</table>
</body>
</html>

MENGGABUNGKAN BEBERAPA BARIS
Untuk menggabungkan beberapa baris, menggunakan atriut rowspan
Contoh :
<html>
<body>
<table border="1">
<tr>
  <td rowspan="2">Telephone:</td>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
</body>
</html>

Subscribe to receive free email updates:

0 Response to "Pemrograman WEB Kelas XI SMK"

Post a Comment