Materi 2 - 4 Pengenanan HTML

Materi Pembelajaran
PEMROGRAMAN WEB
1. Profesi dalam pengembangan aplikasi web
Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi, bagaimana dengan profesi
yang berada dalam lingkungan pengembangan aplikasi web? Berikut ini adalah profesi-profesi yang
langsung terkait dalam pengembangan aplikasi web, diantaranya :
A. Web Designer
Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan tampilan sebuah
Website
B. Web Programmer
Web Programmer bertugas dalam melakukan pengcodingan atau pemograman sebuah website agar
dinamis.
C. Web Administrator
Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem Operasi Server, baik itu
mulai dari instalasi sampai kepada masalah (troubleshooting)
D. Web Master
Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai dari disain, program
dan keamanan server namun tidak terlalu turut mencampuri ke masing-masing divisi, cukup dengan
mempertanggun jawabkan atas jalannya suatu situs (web).
2. Sejarah web
Internet adalah jaringan komputer yang saling terhubung. Tidak ada perusahaan yang memiliki
internet, yang merupakan upaya kerja sama diatur oleh sistem standar dan aturan. Tujuan dari
menghubungkan komputer bersama-sama, tentu saja, adalah untuk berbagi informasi. Ada banyak
cara informasi dapat dikirimkan antar komputer, termasuk email, transfer file (File Transfer
Protocol), dan banyak layanan yang lebih khusus yang dibangun dalam layanan Internet. Metode ini
standar untuk mentransfer data atau dokumen melalui jaringan dikenal sebagai protokol.
WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa (CERN : Organisation
Europeenne pour la Recherche Nucleaire), Jenewa, Swiss. Pada tahun 1989 Berners-lee membuat
pengajuan untuk proyek pembuatan hiperteks global, kemudian pada bulan Oktober 1990, 'World
Wide Web' sudah dapat dijalankan dalam lingkungan CERN. Pada musim panas tahun 1991, WWW
secara resmi digunakan secara luas pada jaringan Internet.
3. Cara Kerja Web
Bagaimana cara kerja website? Cara kerja website pada dasarnya yaitu input,
Website adalah halaman informasi yang disediakan melalui jalur internet sehingga bisa diakses di
seluruh dunia selama terkoneksi dengan jaringan internet.
Website merupakan komponen atau kumpulan komponen yang terdiri dari teks, gambar, suara,
video, animasi dan lain sebagainya. Sehingga lebih merupakan media informasi yang menarik untuk
dikunjungi. Semua website pasti mempunyai domain dan web server. Domain bisa kita analogikan
sebagai alamat rumah, sedangkan web server sebagai rumah untuk menyimpan berbagai perabotan
rumah tangga.
Bagaimana cara website bekerja?
Pertama, misal Anda ingin mencari informasi melalui mesin pencari (Search Engine) Google
Tentunya terlebih dahulu menjalankan aplikasi web browser baik itu internet explorer,
Mozilla, Chrome, Opera dan lain sebagainya.
Lalu ketikkan URL (Uniform Resource Locator) atau domain di web browser, misalnya
www.google.com atau google.com
Domain yang diketikkan tadi akan diterjemahkan menjadi alamat IP.
Web server menerima permintaan / request dan akan memprosesnya dan memerikan hasil
data / output seperti pada gambar berikut ;
Arief Nur S – Pemrograman Web
1
4. Perangkat Pengembang Aplikasi Web
Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi perangkat keras dan
perangkat lunak.
A. Perangkat Keras
Untuk lingkungan pengembangan web yang nyaman, berikut ini peralatan yang sebaiknya
disediakan:
 Komputer Utama,
Utama dengan operating system Macintosh, Windows, ataupun Linux. Perusahaan
pengembangan web profesional cenderung berbasis Macintosh.
 Memori tambahan
tambahan.
ahan sebaiknya computer memiliki memori yang besar, karena dalam
pengembangan web cenderung kita akan membuka beberapa aplikasi sekaligus.
 Sebuah monitor besar.
besar Meskipun bukan keharusan, monitor besar memudahkan untuk desainer
visual. Semakin besar monitor, semakin banyak jendela dan panel kontrol dapat terbuka pada
waktu yang sama.
B. Perangkat Lunak
Untuk perangkat lunak pengembangan web dapat dikelompokkan menjadi beberapa, diantaranya :
1. Web page authoring
Ini adalah kelompok perangkat lunak seperti desktop publishing tetapi format yang dihasilkan
adalah halaman web. Aplikasi ini biasanya bersifat “WYSIWYG” (What You See Is What You
Get, dibaca “whizzy-wig”) yaitu apa yang kamu lihat, itulah yang kamu dapatkan. Jadi aplikasi
ini biasanya ketika membuat tampilannya seperti yang akan dihasilkan.
Beberapa contoh aplikasi yang termasuk dalam kelompok ini :
 Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi perusahaan Adobe, aplikasi ini
banyak digunakan oleh pengembang web. Memiliki banyak fasilitas dan fiture.
2. Editor
Ini adalah kelompok perangkat lunak yang kebalikan dari Adobe Dreamweaver Microsoft
Expression Web. Aplikasi ini tidak lagi “WYSIWYG” (What You See Is What You Get”) tetapi
lebih ke kode HTML.
Beberapa contoh aplikasi yang termasuk dalam kelompok ini :
 TextPad (Windows saja). TextPad adalah plain-text sederhana dan murah untuk editor kode
di Windows.
Arief Nur S – Pemrograman Web
2
 Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat dipreteli namun memiliki
banyak fungsi (seperti kode warna dan ikhtisar kode penuh) bagi pengembang web.
 Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti alur kerja yang visual, alat-alat
manajemen file, dan built-in akses terminal.
 Textmate oleh MacroMates (hanya Macintosh). Editor teks canggih ini memiliki alat
manajemen proyek dan antarmuka yang terintegrasi dengan sistem operasi Mac. Hal ini
semakin populer karena disesuaikan, kaya fitur, dan murah.
 BBEdit oleh Bare Bones Software (hanya Macintosh). Untuk pengembang web banyak fitur
shortcut yang besar telah membuat editor terkemuka berbasis Mac
3. Aplikasi editing gambar dan menggambar
Untuk menambahkan gambar ke halaman web, akan perlu program editing gambar.
Berikut ini beberapa aplikasi yang cukup populer :
 Adobe Photoshop.
Photoshop Photoshop dapat dikatakan sebagai standar industri untuk penciptaan
gambar baik dalam cetak maupun dunia web.
 Adobe Photoshop Elements.
Elements Versi ini lebih ringan dari Photoshop dirancang untuk mengedit
foto dan manajemen, tetapi beberapa penggemar menemukan bahwa ia memiliki semua alat
yang diperlukan untuk menempatkan gambar pada halaman web
Arief Nur S – Pemrograman Web
3
Materi Pembelajaran
Anatomi dokumen web
1. DasarDasar-Dasar HTML
HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data
antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis
atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML
berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini
dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks biasa
tersebut.
2. Struktur Dasar HTML
HTML merupakan singkatan dari HyperText Markup Language adalah sebuah bahasa
pemrograman yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses
untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser)
Fungsi HTML :
1. Membuat halaman web.
web.
Menampilkan berbagai informasi di dalam sebuah browser Internet.
2. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
Struktur Dasar HTML
<html>
<head>
<title>
disini judul dokumen html
</title>
</head>
<body>
Disini penulisan informasi web
</body>
</html>
Penjelasan struktur dasar HTML diatas :
A. Tag
Adalah teks khusus (markup) berupa dua karakter "<
<" dan ">
>", sebagai contoh <body>
adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag
penutup(ditambahkan karakter backslash"/" setelah karakter "<
<").
Contoh :
<p>Ini adalah sebuah paragraf</p>
Keterangan :
Tag <p> adalah tag pembuka, dan tag </p> adalah tag penutup dari “paragraf”.
B. Element
Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.
Contoh :
<p> Ini adalah sebuah paragraf </p>
Keterangan :
“Ini adalah sebuah paragraf “ adalah element dari tag <p>.
C. Attribute
Attribute merupakaninformasi tambahan yang diberikan kepada tag. Informasi ini bisa
berupa instruksi untuk warna dari text, besar huruf dari text, dll.
syntax :
Arief Nur S – Pemrograman Web
4
nama-attribute=“nilai-attribut”
Setiap atribut memiliki pasangan nama/name dan nilai/value) dan ditulis dengan
name=”value”. Value diapit tanda kutip, boleh tanda kutip satu (‘) atau dua (“).
Contoh :
< p align=“center”>SMK Negeri 1 Bintan</p>
Penjelasan
Penjelasan :
1. <p align=“center”>
Merupakan tag pembuka yang telah diberi attribute.
2. </p>
Merupakan tag penutup.
3. SMK Negeri 1 Bintan
Merupakan konten atau element.
4. align=“center”
Merupakan suatu attribute.
5. Align
Merupakan nama attribute.
6. “center”
Merupakan nilai attribute.
3. Format Text HTML
A. Tag <b>
Mendefinisikan teks tebal
Sintak :
<b>
.....
</b>
Contoh :
<b> tulisan dengan tampilan teks tebal </b>
B. Tag <i>
Mendefinisikan teks miring
Sintak :
<i>
….
</i>
Contoh :
<i> tulisan dengan tampilan teks cetak miring </i>
C. Tag <u>
Mendefinisikan teks dengan garis bawah
Sintak :
<u>
……
</u>
Contoh :
<u> tulisan dengan tampilan teks tercetak garis bawah </u>
D. Tag <del>
Mendefinisikan teks dicoret
<del>
……
</del>
E. Tag <small>
Arief Nur S – Pemrograman Web
5
Mendefinisikan teks kecil
<small>
……
</small>
F. Tag <sup>
Mendefinisikan teks di atas garis
<sup>
……
</sup>
Contoh :
Untuk menampilkan text 22=4
Sintak :
<body>
2 <sup>2</sup>=4
</body>
G. Tag <sub>
Mendefinisikan teks di bawah garis
Sintaks :
<sub>
……
</sub>
Contoh :
Untuk menampilkan text H2O pada browser
Sintaks :
<body>
H<sub>2</sub>O
</body>
4. Format Paragraph html
Membuat paragraf dalam sebuah halaman web. Tag <p> mempunyai attribute align yang
bernilai "left", "center", "right" , “justify”.
Sintaks:
<p align="left"|"center"|"right“|”justify”>
.....................
</p>
Contoh :
Hasilnya setelah dijalankan di browser
Arief Nur S – Pemrograman Web
6
Arief Nur S – Pemrograman Web
7