Konsep Dasar Web

Internet (kependekan dari interconnection-networking) adalah seluruh jaringan komputer yang saling terhubung menggunakan standar sistem global Transmission Control Protocol/Internet Protocol Suite (TCP/IP) sebagai protokol pertukaran paket (packet switching communication protocol) untuk melayani miliaran pengguna di seluruh dunia.Rangkaian internet yang terbesar dinamakan Internet. Cara menghubungkan rangkaian dengan kaidah ini dinamakan internetworking ("antarjaringan"). 

Gambar : Visualisasi dari beberapa route pada jaringan Internet.

Ada beberapa istilah yang sering digunakan apabila anda bekerja dengan internet diantaranya yaitu:

World Wide Web (WWW/Web)

World Wide Web (WWW/Web) “Suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI)”

Website
Website atau situs web merupakan sebuah alamat tertentu di WWW yang menyediakan informasi tertentu. Untuk membuka sebuah situs web, anda dapat
menggunakan browser.

Web Pages (Halaman Web)
Web pages atau halaman web merupakan bagian dari situs web, apabila situs web diumpamakan merupakan sebuah buku, maka halaman web merupakan lembaran-lembaran kertas penyusun buku tersebut.

Home Page (Halaman Muka)
Home page merupakan halaman muka dari sebuah situs web, atau ibarat cover muka sebuah buku. Homepage biasanya berupa outline dari isi situs web yang bersangkutan.

Browser
Browser adalah aplikasi yang digunakan untuk berselancar didunia internet. Browser dapat memandu pengguna internet untuk berpindah antar situs web dengan mudah.

Uniform Resource Identifier (URI)

Uniform Resource Identifier (URI) Terdiri atas string karakter yang digunakan untuk identifikasi atau memberi nama suatu resource (sumberdaya) di internet. Identifikasi tersebut memungkinkan interaksi dengan representasi dari resouce melalui network (jaringan) dengan menggunakan protokol tertentu.

Hypertext Transfer Protocol (HTTP)

Protokol yang dipergunakan untuk melakukan transfer dokumen dalam World Wide Web (WWW). Protokol ini adalah protokol ringan, tidak berstatus dan generik yang dapat dipergunakan berbagai macam tipe dokumen.

DNS (Domain Name System)
DNS merupakan sistem database terdistribusi yang tidak banyak dipengaruhi oleh bertambanhnya database. DNS menjamin informasi host terbaru akan disebarkan ke jaringan bila diperlukan.

TCP/IP (Transmission Control Protocol / Internet Protocol)
TCP/IP (Transmission Control Protocol/Internet Protocol) merupakan metode-metode yang digunakan untuk menghubungi server. TCP/IP merupakan bahasa standarisasi untuk internet.

IP (Internet Protocol)
IP (Internet Protocol) merupakan protokol yang digunakan dalam internet, secara teknis bermakna suatu bentuk pengisian dan pengalamatan data-data dan informasi yang akan dikirim melalui internet.

Hyperlink
Hyperlink atau disebut link saja merupakan sebuah fasilitas yang sangat berperan mempopulerkan pengguna internet, karena mampu mereferensikan sebuah teks atau gambar ke alamat lain di internet.

Web Browser
Menggunakan web browser mudah, yang diperlukan hanyalah Anda harus memiliki alamat web yang akan dibuka. Alamat ini biasa disebut dengan Uniform Resource Locator (URL).

URL (Universal Resource Locator)
URL merupakan suatu alamat yang menunjukkan sebuah halaman tertentu
internet. Contoh URL adalah: http://www.google.com

Perangkat Lunak Web Server

Web Server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari Client yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML.

Struktur Navigasi

Struktur Navigasi adalah “Susunan menu atau hirarki dari suatu situs yang menggambarkan isi dari setiap halaman dan link atau navigasi tiap halaman pada suatu situs web”. Struktur Navigasi dapat dikatakan sebagai penggambar dari hubungan atau rantai kerja dari seluruh elemen yang akan digunakan dalam aplikasi.

sumber : wikipedia

Pengenalan 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.

Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b> TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web.

Kegunaan lain

• Mengintegerasikan gambar dengan tulisan.
• Membuat Pranala.
• Mengintegerasikan berkas suara dan rekaman gambar hidup.
• Membuat form interaktif

Menyunting format tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:

• Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
• Menampilkan tulisan dalam bentuk cetakan tebal
• Menampilkan sekelompok kata dalam bentuk miring
• Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
• Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markah/Tanda

Secara garis besar, terdapat 4 jenis elemen dari HTML:

• Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
• Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
• Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
• Elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>), dan garis horizontal (<hr>). Konsep hiperteks pada HTML memungkinkan pembuatan tautan pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam pranala (link) yang dapat digunakan:

• Pranala menuju bagian lain dari page.
• Pranala menuju page lain dalam satu web site.
• Pranala menuju resource atau web site yang berbeda.

Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

Contoh dokumen HTML sederhana

Untuk HTML 4 Strict 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Selamat Datang HTML</title>
 </head>
 <body bgcolor=black text=white>
  <p>Halo dunia!</p>
 </body>
</html>

Untuk HTML 5

<!DOCTYPE HTML>
<html>
 <head>
  <title>Selamat Datang HTML</title>
 </head>
 <body style="background-color: black; color: white;">
  <p>Halo dunia!</p>
 </body>
</html>

Head

Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai dokumen HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.

Contoh:

<meta name="author" content="ubuntu-online"> 

Body

Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML di mana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).

Tag biasanya merupakan suatu pasangan yang disebut dengan:

• Tag awal, dinyatakan dalam bentuk <nama tag>
• Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.

Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>

Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P STYLE="text-align:left"> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah STYLE dengan nilai "text-align:left". Nilai atribut STYLE ditulis dalam bahasa CSS.

sumber : wikipedia

Pembuatan Tabel

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag<Table>.

Elemen table berisi property <tr> untuk menentukan baris (table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table (table data).

Struktur elemen table adalah sebagai berikut:

<table>

   <tr> 

       <td>data baris 1 kolom 1</td>

       <td>data baris 1 kolom 2</td> 

   </tr> 

</table>

Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag <th> ….. </th>

Atribut Elemen Tabel

Width       = panjang(lebar table, pixel atau persen) 

Height      = panjang(tinggi table, pixel atau persen) 

Border      = pixel(tebal garis tepi) 

Cellspacing = pixel(spasi antar sel) 

Cellpadding = pixel(spasi di dalam sel) 

Align       = [left|center|right](perataan table) 

Bgcolor     = warna(warna latar belakang table)

Atribut Table Row

Align  =[left|center|right](perataan sebaris sel secara horizontal) 

Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)
Bgcolor=warna(warna latar belakang baris)

Atribut Tabel Data 

Align   = [left|center|right](perataan horizontal) 

Width   = [top|middle|bottom](perataan vertical)

Height  = pixel(tinggi sel, pixel atau persen)
Bgcolor = warna(warna latar belakang sel)

Tugas
01:tabel1.html 
Salin script HTML berikut untuk mencoba tag table berikut property kolom dan barisnya, jangan lupa disimpan dengan ekstensi .html.kemudian coba di web browser.

<html> 

<head> 

<title>tabel</title> 

</head> 

<body> 

berikut contoh tabel dengan rowspan dan colspan 

<table width="80%" border="2" cellspacing="0" cellpadding="0"> 

  <tr> 

     <td>baris 1 kolom 1</td> 
     <td>baris 1 kolom 2</td> 

  </tr>

  <tr> 

     <td colspan="2">baris 2 kolom 1</td> 

  </tr> 

  <tr> 

     <td rowspan="2">baris 3 kolom 1</td> 

     <td>baris 3 kolom 2</td> 

  </tr> 

</table> 

</body> 

</html>

02: tabel2.html 

<html> 

<head> 

<tittle>penggunaan ALIGN</tittle> 

</head> 

<body> 

  <table border="1"> 

  <caption>Daftar wiraniaga</caption> 

    <tr> 

      <th colspan ="2" rowspan = "2">WIRANIAGA</th> 

      <th colspan ="3">KOTA</th> 

    </tr>

    <tr> 

      <th>SEMARANG</th> 

      <th>Kudus</th>

      <th>Solo</th> 

    </tr> 

    <tr> 

      <th rowspan ="2">Jenis Kelamin</th> 

      <th>Pria</th> 

        <td align= "right">30</td> 

        <td align= "right">20</td> 

        <td align= "right">30</td> 

    </tr> 

    <tr> 

      <th>wanita</th>

        <td align= "right">20</td> 

        <td align= "right">8</td> 

        <td align= "right">18</td> 

    </tr> 

  </table> 

</body> 

</html>

03: tabel3.html

Buatlah dokumen HTML sehingga menghasilkan tampilan tabel seperti berikut ini (aturlah sedemikian rupa pada atribut-atribut tabel untuk mendapatkan dua buah tampilan yang berbeda, sebagaimana dibawah ini).

Tabel 1

Tabel 2 

Tabel dengan Spaning

Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris :

Berikut ini contoh tabel yang menggabungkan kolom :

Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan adalah sebagai berikut
Rowspan = angka(baris yang di span oleh sel) 
Colspan = angka(kolom yang di span oleh sel)

Jadi untuk menggabungkan 4 baris seperti table di atas adalah : 
<td rowspan="4"> …….</td>

Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah : 
<th colspan="4"> …….</th>

Tugas
1. Buatlah dokumen HTML berikut ini :
<html>
<head> 
<title>Tabel Dengan Rowspan</title> 
</head> 
<body> 
    <table width="500" border="1"> 
        <tr> 
            <th scope="col">Nama Perumahan </th> 
            <th scope="col">Tipe / Luas tanah (m²)</th> 
        </tr> 
        <tr> 
            <td rowspan="4">Griya Indah Permai </td> 
            <td>21 / 60 </td> 
        </tr> 
        <tr> 
            <td>36 / 90 </td>
        </tr> 
        <tr> 
            <td>45 / 120 </td> 
        </tr> 
        <tr> 
            <td>54 / 120 </td> 
        </tr> 
     </table> 
</body> 
</html>

2. Buatlah dokumen HTML berikut ini : 
<html> 
<head> 
<title>Tabel dengan Colspan</title> 
</head> 
<body> 
  <table width="500" border="1"> 
    <tr> 
       <th scope="col">Perumahan</th> 
       <th colspan="4" scope="col">Tipe / Luas tanah (m²) </th> 
    </tr> 
    <tr>
       <td>Griya Indah Permai </td> 
       <td>21/60</td> 
       <td>36/90</td> 
       <td>45/120</td> 
       <td>54/120</td> 
    </tr> 
  </table> 
</body> 
</html>

3. Buatlah dokumen HTML dari tampilan tabel berikut ini :

4. Buatlah dokumen HTML dari tampilan tabel berikut ini :

Pemformatan Teks

Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen web:

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.

Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :

Tag HTML Pemformatan Teks

Tag      Deskripsi 

<b>      Mendefinisikan teks tebal
<em>     Mendefinisikan teks menekankan 

<i>      Mendefinisikan teks miring
<small>  Mendefinisikan teks kecil 

<strong> Mendefinisikan teks penting

<sub>    Mendefinisikan teks di bawah garis 

<sup>    Mendefinisikan teks di atas garis
<ins>    Mendefinisikan teks sisipan 

<del>    Mendefinisikan teks dicoret
<mark>   Mendefinisikan teks ditandai

Tag HTML “keluaran komputer”

Tag      Deskripsi 

<code>   Mendefinisikan teks kode komputer
<kbd>    Mendefinisikan teks keyboard 

<samp>   Mendefinisikan teks contoh kode
<var>    Mendefinisikan teks variabel 

<pre>    Mendefinisikan teks terformat

HTML Citations, Quotations, and Definition Tags
Tag          Deskripsi 

<abbr>       Mendefinisikan sebuah singkatan
<address>    Mendefinisikan alamat atau kontak informasi 

<bdo>        Mendefinisikan arah teks
<blockquote> Mendefinisikan bagian yang dikutip dari sumber lain 

<q>          Mendefinisikan sebuah kutipan pendek
<cite>       Mendefinisikan judul karya 

<dfn>        Mendefinisikan sebuah istilah definisi

Latihan

1. Format Teks

<html>

<head>

<title>Format Teks</title>

</head>

<body>

  <p> <b>Tulisan ini ditebalkan (bold)</b> </p>

  <p> <strong>Tulisan ini ditebalkan (strong)</strong> </p> 

  <p> <em>Tulisan ini miring (emphasize) </em> </p> 

  <p> <big>Tulisan ini besar (big)</big> </p> 

  <p> <i>Tulisan ini miring (italic) </i> </p> 

  <p>Tulisan ini _subscript </p> 

  <p>Tulisan ini ^superscript </p> 

</body> 

</html> 

2. Pre Format

<html>

<head>

<title>Preformat </title>

</head>

<body>

<h2>Daftar Harga Kopi:</h2>

<pre> 

Kopi Hitam..........3.000 

Kopi Putih..........4.000 

Kopi Susu...........3.500 

</pre> 

Harga sewaktu-waktu bisa berubah. 

</body> 

</html>

3. Pre Format

<html>

<head>

<title>Tag Preformatted</title>

</head>

<body>

<pre>

This section provides a brief overview of the menus in Dreamweaver. 

    The File menu and Edit menu contain the standard menu items

    for File and Edit.

menus, such as New, Open, Save, Save All, Cut, Copy, Paste,

Undo,and Redo

</pre>

<pre>

Ini adalah

preformatted text.

Menampilkan     spasi

Dan line break apa adanya. 

</pre>

<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa pemrograman komputer :</p> 

<pre>

for i = 1 to 10

     print i

next i

</pre>

</body>

</html>