Pemrograman Web Dasar

Ukuran: px

Mulai penontonan dengan halaman:

Download "Pemrograman Web Dasar"

Widya Yuwono
7 tahun lalu
Tontonan:

1 Pemrograman Web Dasar Definisi HTML HTML adalah singkatan dari HyperText Markup Language adalah salah satu bahasa pemrograman web desain dan juga biasa di sebut script untuk menyusun dokumendokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. Pertemuan ke-2, 12 September 2013 Struktur dasar HTML <html> <head> <title>judul Dokumen HTML</title> </head> <body> Isi Dokumen Web </body> </html> Tag Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag harus ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

2 Element Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Element HTML Tag yang berfungsi untuk membuka dan menutup seluruh isi dalam kode HTML. Isi dokumen yang ingin ditampilkan di dalam browser harus berada di dalam tag ini. Penulisan element HTML : <HTML> Isi dokumen web </HTML> Element Head dan Title Tag Head mendefinisikan bagian kepala dokumen dari halaman web. Tag Head digunakan untuk mendeklarasikan judul dokumen yang menggunakan tag Title. Penulisannya adalah : <HEAD> <TITLE> Judul Dokumen Web </TITLE> </HEAD> Element Body Tag yang mendefinisikan isi halaman web yang ditampilkan oleh browser. Penulisannya adalah : <BODY> Isi halaman Web </BODY>

3 Catatan Catatan : Jika penulisan script salah, maka script tidak terbaca sempurna ( Eror ) sehingga dapat mengganggu penampilan dan dinamika web itu sendiri Atribut Atribut mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut: <TAG Nama_atribut="nilai_atribut" Nama_atribut= nilai_atribut" > </TAG> Atribut (Lanjutan) Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah : <body bgcolor="black" text="yellow">...</body> t "> > Keterangan Tag Keterangan <body>...</body> </b d > element untuk membuat ii isi dokumen Bgcolor= black atribut yang mendefinisikan bahwa warna latar/background dari dokumen web adalah hitam Text= yellow atribut yang mendefinisikan bahwa warna teks dalam dokumen adalah kuning

4 Komentar Seperti dalam bahasa pemrograman yang lainnya, HTML juga memiliki komentar yang dapat digunakan untuk menjelaskan bagian-bagian dari isi dokumen web. Komentar dalam HTML diatur oleh tanda pembuka . Penulisan komentar dalam HTML :  Contoh 1: Sederhana <HTML> <HEAD><TITLE>Dokumen HTML</TITLE></HEAD> <BODY bgcolor="skyblue"> Ini adalah sebuah dokumen HTML dengan judul Dokumen HTML dan warna latar/background biru langit. Terima kasih. </BODY> </HTML> Contoh 2: Heading <HTML> <HEAD><TITLE>Heading</TITLE></HEAD> <BODY> <h1>teks dengan ukuran Heading one</h1> <h2>teks dengan ukuran Heading two</h2> <h3>teks dengan ukuran Heading three</h3> <h4>teks dengan ukuran Heading four</h4> <h5>teks dengan ukuran Heading five</h5> <h6>teks dengan ukuran Heading six</h6> </BODY> </HTML> Contoh 3: Penanganan Font <HTML> <HEAD><TITLE>Font</TITLE></HEAD> <BODY> <FONT face='comic sans ms'> Teks ini i berukuran normal jenis Comic Sans MS dan warna hitam </FONT></BR> <FONT size='5' face='verdana' color='red'> Teks ini berukuran 5 jenis Verdana dan warna merah </FONT></BR> Teks cetak <b>tebal</b> <i>miring</i> <u>garis Bawah</u> <strike>garis tengah</strike> <sup>superscript</sup> p p p dan <sub>subscript</sub> </FONT> </BODY> </HTML>

5 Contoh 4: Paragraf dan Alignment <HTML> <HEAD> <TITLE>Paragraf dan Align</TITLE> </HEAD> <BODY> <P align="left">format paragraf rata kiri</p> <P align="right">format paragraf rata kanan</p> <P align="center">format paragraf rata tengah</p> <P align="justify">format paragraf ini rata kanan-kiri. Format paragraf ini rata kanankiri.format paragraf ini rata kanan-kiri. Format paragraf ini rata kanan-kiri.format paragraf ini i rata kanan-kiri.format ki i paragraf ini rata kanan-kiri.</p> </BODY> </HTML> Contoh 5: Penanganan Gambar <HTML><HEAD><TITLE>Gambar</TITLE></HEAD><BODY> <p><img src='gambar.jpg' height='100' width='100'> Perataan teks di bawah secara default dan gambar asli dengan ukuran 100 x 100 pixel</p> <p><img src='gambar.jpg' height='100' width='100' align='top' border='2'>perataan teks di atas dan border gambar 2 pixel</p> <p align='center'><img src='gambar.jpg' height='100' width='100' align='middle'>perataan teks di tengah</br>dan letak gambar di tengah dokumen</p> </BODY></HTML> Contoh 6: Daftar dengan Bullets dan Numbering <HTML> <HEAD> <TITLE>Bullets dan Numbering</TITLE> </HEAD> <BODY> <P>Daftar menggunakan Bullets</P> <ul type='circle'> <li>sunday</li> <li>monday</li> <li>tuesday</li> </ul> Contoh 6: Daftar dengan Bullets dan Numbering (Lanjutan) <P>Daftar menggunakan Numbering (angka)</p> <ol type='1'> <li>sunday</li> <li>monday</li> <li>tuesday</li> </ol>

6 Contoh 6: Daftar dengan Bullets dan Numbering (Lanjutan 2) <P>Daftar menggunakan Numbering (huruf)</p> <ol type='a'> <li>sunday</li> <li>monday</li> <li>tuesday</li> </ol> Contoh 6: Daftar dengan Bullets dan Numbering (Lanjutan 3) <P>Daftar menggunakan Numbering (huruf romawi)</p> <ol type='i'> <li>sunday</li> <li>monday</li> <li>tuesday</li> </ol> </BODY> </HTML> Selesai Tugas (Kelompok) Sifat : Kelompok (max 3 mahasiswa) Tugas: Buatlah sebuah halaman web yang berisi tentang sebuah berita olahraga Halaman web harus terdiri atas materi pada pertemuan ini. Tunjukkan dalam komentar di halaman web, pada baris tertentu, bahwa bagian itu adalah penanganan tag tertentu dalam HTML (misalnya; penanganan paragraf) Tugas dikumpulkan tercetak disertai identitas pada kuliah minggu depan. Tugas juga dipresentasikan minggu depan.

7 Penilaian Tugas Penilaian terdiri atas penilaian konten dan penilaian presentasi Penilaian konten melihat komponen tag-tag HTML yang disertakan dan juga konten tulisan (berita) Penilaian presentasi melihat bagaimana slide presentasi dan juga pembawaan (penyampaian)

dokumen-dokumen yang mirip

Modul Desain Web Teori + Praktik HTML, CSS, dan Javascript

Modul Desain Web Teori + Praktik HTML, CSS, dan Javascript 2014 Pertemuan II 2.1. Definisi dan Pengertian HTML 2.2.1 Ringkasan Materi HTML merupakan singkatan dari HyperText Markup Language adalah script