PEMROGRAMAN WEB
KELAS : X_ TKJ
KOMPETENSI KEAHLIAN : TEKNIK KOMPUTER DAN JARINGAN
MEMAHAMI FORMAT TEKS PADA HALAMAN WEB
MENYAJIKAN TEKS DALAM FORMAT TERTENTU PADA
HALAMAN WEB
ANATOMI DOKUMEN WEB
Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo,
navigation, content, white space dapat
digambarkan sebagai berikut :
Gambar Anatomi Dokumen Web
Containing BlockLogo
Navigation Content
Whitespace
Footer
1. Containing Block
Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.
2. Logo
Logo meruapakan Identitas perusahaan, organisasi, pemilik situs.
3. Navigation
Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
4. Content
Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.
5. Footer
Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.
6. Whitespace
Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi
TEORI DASAR HTML
Untuk membangun sebuah halaman web, dibutuhkan sebuah bahasa pemrograman yang lebih dikenal dengan web scripting.
Berdasarkan letak proses interpreter, maka web scripting dibagi menjadi 2, yaitu yang bersifat client side dan server side
Client side dilakukan oleh web browser seperti Internet Explorer, Firefox, Netscape dan Opera.
Contoh bahasa client side: HTML, CSS, Javascript, VBscript, XML.
Server side dilakukan oleh web server seperti PWS (Personal Web Server untuk sistem operasi Windows 98), IIS (untuk Sistem Operasi Windows 2000/Windows XP), Apache, Tomcat, Xitami, ZOPE.Untuk contoh bahasa server side: ASP
(.Net), PHP, JSP, CFM, CGI/PL
DASAR HYPER TEXT MARKUP LANGUAGE
Web scripting yang bersifat client side akan menghasilkan web page yang statis, artinya lebih menekankan pada desain format tampilan informasi dan informasi yang disajikan tidak dapat diupdate seketika, karena tidak dapat dilakukan request interaktif dari pengguna, dan proses tidak terjadi di server sehingga tidak akan menghasilkan output apapun.
Sehingga sangatlah tidak mungkin untuk menciptakan aplikasi web yang
bersifat dinamis dengan web scripting yang bersifat client side,jadi harus
dikombinasikan dengan web scripting yang bersifat server side.
PENGERTIAN HTML
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (Script) yang digunakan untuk membangun sebuah halaman web.
HTML merupakan standar bahasa yang digunakan untuk menampilkan dokumen web
Ekstensi File : ‘html’ atau ‘htm’
Tidak diperlukan suatu program editor khusus untuk menggunakan kode-kode
perintah HTML. Dapat dipergunakan Notepad, Edit Plus, Sublime Text atau editor lain yang berbasis GUI (Graphical User Interface) seperti Microsoft Frontpage,
Macromedia Dreamweaver, Adobe GoLive.
Dengan program ini, kita tidak perlu mengetik kode HTML-nya, semua perintah
diwujudkan secara icon base. Tetapi kemampuan penguasaan terhadap kode-kode HTML sangatlah diperlukan, sehingga disarankan untuk menguasai kode perintah
HTML menggunakan editor teks (contoh Notepad)
Editor HTML: Notepad, atau aplikasi khusus scripting seperti Sublime Text dan yang lain.
STRUKTUR DASAR HTML
Dokumen HTML mempunyai susunan dasar atau struktur file. Susunan dokumen html dibuka dengan sebuah tag<html>dan berakhir dengan tag </html>
Contoh Struktur dasar HTML :
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>Berisi tentang text, gambar,atau apapun yangtampil pada dokumen web.
</body>
</html>
TAU KAH ANDA ???
Tag adalah Unsur
bahasa atau elemen HTML dinyatakan
dengan tanda khusus
: “<tag>” dan “</tag>
APLIKASI TEXT EDITOR/CODE EDITOR
Dalam dunia pengkodean atau pemrograman pasti tidak lepas dengan yang namanya Text Editor. Apapun bahasa pemrograman yang ditulis entah
itu PHP, C++, Ruby, Java, dan lainnya pasti menggunakan text editor ataupun IDE (Integrated Development Environment).
Proses pembuatan aplikasi web akan menjadi lebih mudah dan cepat dengan bantuan berbagai fitur dan tools yang ada pada text editor.
dan untuk sesi ini kita akan bekerja dengan text editor :
Sublime Text Notepad++
ATURAN PENULISAN HTML
Memiliki struktur minimal dari dokumen HTML (head dan body) Dalam dokumen HTML diperlukan tag <HEAD></HEAD>
Di dalam tag ini diletakkan judul web page dengan menggunakan tag <TITLE>judul web page</TITLE>
Sedangkan di dalam tag <BODY></BODY> berisikan isi dari web page
Bentuk tulisan di atas disebut “tag”.Tag memiliki pembuka <tag>, tetapi tidak semua memiliki penutup </tag>.Tag memberi instruksi interpreter kepada browser (misalnya Internet Explorer).Contoh pada dokumen di atas, tag yang pertama memberitahukan kepada browser bahwa dokumen HTML dengan tag pembuka <HTML> pada awal dokumen, dan tag penutup </HTML> pada akhir dokumen.Dalam dokumen HTML,
penggunaan tag-tag penutup HTML disesuaikan dengan urutan penggunaan tag tersebu Penulisan tag-tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi. Sehingga diperbolehkan menyusun tag- tag HTML secara continue horizontal seperti berikut:<HTML><HEAD><TITLE>Judul Web
Page</TITLE></HEAD></HTML>
ATURAN PENULISAN HTML
• Di dalam sebuah tag HTML, terdapat atribut tag.Atribut yang terkandung dalam tag satu dengan yang lain belum tentu sama.Atribut yang dipakai tidak memiliki urutan pendefinisian tertentu.Atribut tag digunakan untuk memodifikasi sifat-sifat dari tag, bergantung dari nilai yang diberikan.Namun, juga ada atribut tag yang tidak
memiliki nilai.
• Penulisan tag bersifat non-case sensitive. Artinya, bahwa penulisan tag dengan huruf besar atau dengan huruf kecil akan dianggap sama. Sebagai contoh:
<Setelah tanda ”<“ harus langsung diikuti oleh tag dan ditutup dengan tanda”>”, tidak boleh ada spasi, angka, tanda baca.Nama atau istilah untuk tag adalah standart. Tidak dapat dibuat sendiri.Nama tag harus mengikuti standar W3C, yaitu sebuah lembaga atau organisasi internasional yang mengatur standarisasi web (HTML> akan sama dengan <html> atau <HtMl>
• Penulisan tag-tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi. Sehingga diperbolehkan menyusun
tag- tag HTML secara continue horizontal seperti berikut:<HTML><HEAD><TITLE>Judul Web Page</TITLE></HEAD></HTML>
MEMBUAT DOKUMEN WEB PERTAMAKU
1. Heading
Heading digunakan untuk menampilkan format huruf yang besar dan dicetak tebal, biasanya digunakan untuk judul topik utama dari sebuah paragraf,
ukurannya dari yang terbesar <H1> sampai dengan yang terkecil <H6>Untuk mengatur posisi heading
digunakan atribut “align”, contoh: <H1 align=“…”>
ditutup dengan </H1>Nilai atribut: left (rata kiri),
center (rata tengah), right (rata kanan)
DOKUMEN WEB PERTAMAKU
2. Paragraf
Untuk memformat padagraf agar rata kiri,, kanan atau
tengah, digunakan tag pembuka <P align=“…”> dan
penutup </P>
DOKUMEN WEB PERTAMAKU
3. Background untuk halaman web
Untuk membuat backround dihalaman web menjadi berwarna bisa dibuat dengan memberikan kode :
<BODY bgcolor = “green” text=“yellow”>
FORMAT TEKS HALAMAN WEB
4. Breaking Now
Tag <Br> digunakan untuk berpindah ke baris baru dalam isi dokumen.Ini adalah salah satu tag yang tidak memerlukan tag penutup.
5. Bold, Italic, Under line, Subscript, Superscript, Stripe
Berikut adalah cara memberikan efek cetak huruf dalam dokumen HTML Untuk memberikan efek huruf tebal (bold)
<b>kata atau kalimat</b>
Untuk memberikan efek huruf miring (italic)
<i>kata atau kalimat</i>
Untuk memberikan efek huruf yang diberi garis bawah (under line)
<u>kata atau kalimat</u>
PENGATURAN PROPERTI DOKUMEN
Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen <body>.
Sebagai contoh adalah pengaturan warna latar
belakang halaman, wana teks, warna link dan
lain-lain
ATRIBUT ELEMEN <BODY>
•
BACKGROUND = Lokasi dan nama file (latar belakng dokumen image dokumen)
•
BGCOLOR = Warna (warna latar belakng dokumen, default putih)
•
TEXT = Warna (warna teks dokumen, default hitam)
•
LINK = Warna (warna link dokumen, default biru)
•
VLINK = Warna (warna visited link dokumen, default ungu)
•
ALINK = Warna (warna aktif link dokumen, default merah)
TAG HTML PEMFORMATAN
TEKS
• “Everybody in this country should learn to program a computer,
because it teaches you how to think.”
• ~ Steve Jobs ~
“karena dengan belajar algoritma dan membuat program
