A.MAKSUD DAN TUJUAN
û Agar mahasiswa dapat membuat halaman web dengan menggunakan kode HTML
û Agar mahasiswa dapat menuliskan kode HTML secara benar sesuai aturan pada kode XHTML
B.PEMBAHASAN
Pada praktikum kali ini dimana kita akan mempelajari tentang HTML yang merupakan suatu bahasa pemrograman yang digunakan untuk membuat suatu aplikasi yang berbasis Web. Maka untuk membangun sebuah Web dan mengakses halaman Web tersebut diperlukan sebuah Editor yang digunakan untuk menuliskan kode-kode HTML lalu Web Server yaitu sebagai server untuk melayani permintaan Klien. dan Web Browser untuk mengakases halaman Web. Maka dalam dokumen HTML mempunyai tag utama yang menandai awal dan akhir dari suatu dokumen tersebut yaitu <html> dan </html>. Tag <html> merupakan
tag pembuka dan tag </html> merupakan tag penutup. Maka langkah selanjutnya yaitu dimana kita akan membuat sebuah halaman Web dengan menggunakan HTML yang menggunakan tag Editor ( Notepad / texped) yang ada dalam sistem operasi Windows maka setelah simpan dokumen teks tersebut dengan menggunakan ekstensi html/htm. ( praktik1.htm ) dan untuk lebih jelasnya di bawah ini merupakan contoh dokumen HTML yang terdapat di modul
tag pembuka dan tag </html> merupakan tag penutup. Maka langkah selanjutnya yaitu dimana kita akan membuat sebuah halaman Web dengan menggunakan HTML yang menggunakan tag Editor ( Notepad / texped) yang ada dalam sistem operasi Windows maka setelah simpan dokumen teks tersebut dengan menggunakan ekstensi html/htm. ( praktik1.htm ) dan untuk lebih jelasnya di bawah ini merupakan contoh dokumen HTML yang terdapat di modul
PRAKTIKUM :
1.Praktek 1
<HTML>
<HEad>
<Title>p.web:ini adalah title</titLE>
</head>
<BODY>
<p>
Mari belajar html dengan menggunakan paragraf
<p>
Ini juga paragraph, silahkan dicoba
<p>
Ada tiga paragraf disini
</body>
</HTml>
HASILNYA :
Langkah selanjutnya adalah dimana kita akan menjalankan halaman Web tersebut dengan menggunakan Web Server yang merupakan suatu perangkat lunak yang berfungsi untuk melayani permintaan halaman web dari klien. Web Server ini harus dalam keadaan aktif apabila kita ingin menjalankan program tersebut. maka pada halaman HTML terdapat sebuah header dan body yang mana pada bagian header biasanya digunakan untuk membuat judul halaman Web. Lalu pada bagian body merupakan bagian utama dari sebuah halaman web, karena pada bagian ini merupakan isi dari halaman web. Apa yang kita tulis di bagian ini akan ditampilkan pada web browser. Maka pada HTML ini, Format penulisannya diatur dengan tag <p> dan <b> yang mana pada tag <p> digunakan untuk membuat paragraf. Sedangkan pada tag <b> pada XHTML digunakan untuk menebalkan tulisan. dan pada tag tersebut dapat ditambahkan atribut align yang berfungsi untuk membuat paragraf rata kiri, rata kanan atau tengah. Maka pada program di atas kita telah menuliskan isi tulisan tersebut secara teratur (setiap paragraf dan baris dipisahkan). Namun setelah dijalankan hasil yang ditampilkan menjadi tidak rapi. Maka setelah itu jalankan perintah tersebut dengan menampilkannya yaitu dengan mengetikkan alamat yang akan ditampilkan
2.cobalah script
<HTml>
<HEAD>
<title>tag br</TITLE>
</head>
<boDY>
Dokumen ini yang akan ditampilkan di web browser anda.
- Web statis adalah web yang berisi informasi-informasi
yang bersifat statis (tetap).
- Web yang dinamis (berubah-ubah) dan dapat saling
berinteraksi dengan user.
- perhatikan paerbedaan antara yang menggunakan br dan yang tidak, selamat mencoba.
</BOdy>
</HTMl>
Hasilnya :
3.
<HTml>
<HEAD>
<title>tag br</TITLE>
</head>
<boDY>
Dokumen ini yang akan ditampilkan di web browser anda.
- Web statis adalah web yang berisi informasi-informasi
yang bersifat statis (tetap).<br>
- Web yang dinamis (berubah-ubah) dan dapat saling
berinteraksi dengan user.<br>
- perhatikan paerbedaan antara yang menggunakan br dan yang tidak, selamat mencoba.
</BOdy>
</HTMl>
Hasilnya :
4. script xHTML
<!DOCTYPE Doctype ditulis di sini>
<html>
<head>
<title>Judul dituliskan di sini</title>
</head>
<body>
Ini dokumen XHTML ditulis di sini, ini
hampir mirip dengan HTML, mudah kan??
</body>
</html>
Hasilnya :
5.
<!DOCTYPE Doctype ditulis di sini>
<html>
<head>
<title>Judul dituliskan di sini</title>
</head>
<body>
Melihat perbedaan-perbadaan di atas maka XHTML sangat
disarankan bagi desainer web yang menginginkan
konsistensi dalam struktur konten halaman webnya. </br>
Selain itu, XHTML lebih compatible untuk diintegrasikan
dengan CSS (Cascade Style Sheet) dibandingkan dengan
HTML.<br/>
Perhatikan perbedaan tag br yang ada di html dan yang
ada di xhtml
</body>
</html>
Hasilnya :
C.TUGAS
D.KESIMPULAN
HTML merupakan bahasa pemrograman yang digunakan untuk membangun suatu aplikasi web. HTML hanya digunakan untuk membentuk web statis saja. Untuk embuat sebuah halamam web dengan menggunakan HTML, kita dapat menuliskan kodenya secara langsung melalui editor teks seperti Notepad jika sistem operasi yang kita gunakan adalah Windows.dan pada dokumen HTML mempunyai tag utama yang menandai awal dan akhir dari suatu dokumen tersebut maka Tag tersebut adalah <html> dan </html>. Tag <html> merupakan tag pembuka dan tag </html> merupakan tag penutup.
E.LISTING
Terlampir
PERTEMUAN KE-2
PENGATURAN TEKS
A.MAKSUD DAN TUJUAN
û Agar mahasiswa dapat membuat tampilan dokumen HTML dengan menggunakan permainan warna, dan brbagai jenis pengaturan teks lainnya.
û Agar mahasiswa dapat membuat daftar item (list) dalam dokumen
B.PEMBAHASAN
Menampilkan teks dihalaman web, dengan mengetikkan teks dalam tag<BODY>…</BODY>, dan untuk mengatur peletakan teks, ada beberapa Tag yang digunakan antara lain :
No. | Tag | Fungsi |
1 | Center | Mengatur posisi teks agar berada ditengah |
2 | DIV | Mengatur teks yang memiliki karakterristik yang sama |
3 | B | Menebalkan cetakan teks |
4 | SMALL | Menampilkan teks lebih kecil dari pada ukuran normal |
5 | BIG | Menampilkan teks lebih besar dari pada ukuran normal |
6 | U | Menambah garis bawah pada teks |
7 | I | Menampilkan teks dengan bentuk tuliasan miring |
8 | SUB | Menampilkan teks sebagai subskrip |
9 | SUP | Menampilkan teks sebagai superskrip |
10 | TT | Menampilkan teks seperti ketikan menggunakan mesin ketik |
11 | FONT | Mengatur jenis, ukuran, dan juga warna font. Dalam tag ini bisa mengandung banyak atribut, antara lain face, color |
HTML mempunyai beberapa tag yang dikhususkan untuk menampilkan teks dalam sebuah daftar item (list). Tag-tag tersebut diantaranya <ul>…</ul>, <ol>…</ol> dan <li>. Untuk lebih jelasnya, di bawah ini adalah contoh penggunaannya yang terdapat di modul praktikum.
Praktikum :
1.cobalah script
<HTML>
<HEAD> <TITLE>Membuat List</TITLE>
</HEAD>
<BODY>
<p align="justify">Teknologi web pada sisi server memungkinkan
pemrosesan kode di dalam server sehingga kode yang sampai pada
pemakai berbeda dengan asli pada server.</p><BR>
<H2>Beberapa contoh teknologi yang berjalan diserver
adalah:</H2>
<UL>Common Gateway Interface<BR>
Proprietary Web Server API<BR>
Active Server Page(ASP)<BR>
Java Servlets dab JavaServer Page(JSP)<BR>
PHP<BR>
</UL>
</BODY>
</HTML>
Tag <ul> akan menampilkan daftar item tanpa penomoran. Teks yang akan dijadikan sebagai daftar item diletakkan diantara tag pembuka <ul> dan tag penutup </ul>. Posisi daftar item tesebut dalam browser nantinya akan lebih masuk ke dalam.
Simpan dokumen di direktori modul2 dengan nama praktik1.htm, dan pada browser diketikkan alamat :
Hasilnya :
2. menggunakan tanda ballet
<HTML>
<HEAD> <TITLE>Membuat List</TITLE>
</HEAD>
<BODY>
<p align="justify">Teknologi web pada sisi server memungkinkan
pemrosesan kode di dalam server sehingga kode yang sampai pada
pemakai berbeda dengan asli pada server.</p><BR>
<H2>Beberapa contoh teknologi yang berjalan diserver
adalah:</H2>
<LI>Common Gateway Interface<BR>
<LI>Proprietary Web Server API<BR>
<LI>Active Server Page(ASP)<BR>
<LI>Java Servlets dab JavaServer Page(JSP)<BR>
<LI>PHP<BR>
</LI>
</BODY>
</HTML>
Kemudian kita akan menambahkan tag <li> pada masing-masing item. Tag <li> berfungsi untuk menampilkan tanda bullet di depan masing-masing item. Tag <li> mempunyai atribut type yang mendefinisikan jenis bullet-nya. Nilai dari atribut type misalnya circle, disc, dan square. Bila atribut type tidak disebutkan, maka nilai default-nya adalah circle.
Buka praktik1.htm dan ubah di bagian tag <ul> menjadi seperti berikut:
Hasilnya :
3.
<HTML>
<HEAD> <TITLE>PROFIL STMIK AKAKOM</TITLE>
<BODY bgcolor ="#808080">
<HI><p align="center"><FONT color ="blue">STMIK AKAKOM
YOGYAKARTA</FONT></p></H2>
<FONT color ="aqua" size="4"> Jln Raya janti no 143 </FONT><BR>
<FONT color ="#00FFFF" size="+1">Yogyakarta 55198 </FONT><BR>
<HR align="center" color="0000FF" noshade size="10">
<H2>Jenjang S1</H2><UL>Teknik Informatika<BR>
Sistem Informasi<BR>
</UL>
<H2>Jenjang D3</H2>
</UL>
Manajemen Informatika<BR>
Teknik Komputer<BR>
Komputerisasi Akuntansi<BR>
</UL>
<H1><p align="right">STMIK AKAKOM YOGYAKARTA</p></H1>
<H1><p align="right">Yang Pertama dan Yang Utama</p></H1>
</BODY>
</HTML>
Untuk memberikan warna pada teks digunakan atribut color yang ditambahkan pada tag <font>. Tag <font> adalah tag yang mengatur tampilan teks. Pada tag tersebut terdapat atribut-atribut diantaranya face (untuk mengatur jenis huruf, mis: Arial, Times New Roman, Verdana), size (untuk mengatur ukuran huruf), dan color (untuk mengatur warna huruf).
Sedangkan untuk menambahkan garis pada akhir tulisan digunakan tag <hr>. Tag <hr> mempunyai beberapa atribut yaitu width (untuk mengatur lebar/panjang garis dengan satuan pixel. Bila tidak disertakan maka lebarnya akan menyesuaikan dengan lebar/panjang dokumen), height (untuk mengatur tinggi garis dengan satuan pixel), color (untuk mengatur warna dari garis) dan noshade (untuk membuat tampilan garis tanpa disertai bayangan).
Hasilnya :
4.LATIHAN
<html>
<head>
<title>latihan modul 2</title>
</head>
<body>
<ul type-"circle">
<li>ini type circle</li>
</ul>
<ul type-"disc">
<li>ini type disc</li>
</ul>
<ul type-"square">
<li>ini type square</li>
</ul>
<br><br>
<ol>
<li>ini penomoran</li>
<li> ini juga penomoran</li>
</ol>
<br><br>
<ol type -"a">
<li>ini penomoran dengan abjad</li>
<li>ini juga dengan abjad</li>
</ol>
</body>
</html>
Hsailnya :
C.TUGAS
D.KESIMPULAN
Link adalah suatu bagian datam halaman web yang berfungsi sebagai penghubung dengan halaman web yang lain. Dalam web link dapat diberikan kepada suatu teks atau gambar. Form adalah tempat dalam halaman web yang digunakan untuk mengisikan data. Data tersebut kemudian kemudian dikirimkan ke halaman tertentu. HTML mempunyai beberapa tag yang dikhususkan untuk menampilkan teks dalam sebuah daftar item (list). Tag-tag tersebut diantaranya <ul>…</ul>, <ol>…</ol> dan <li>.
E.LISTING
Terlampir
Tidak ada komentar:
Posting Komentar