Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan Kedua

    Diunggah oleh

    Logis Fanromik
    2 tayangan12 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    2 tayangan12 halaman

    Pertemuan Kedua

    Diunggah oleh

    Logis Fanromik

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 12

    Pertemuan Kedua (19 & 20 April 2011) HTML

    Materi DASAR-DASAR HTML

    Pengertian HTML HTML merupakan singkatan dari Hypertext Markup Language yaitu suatu bahasa yang digunakan untuk membuat halaman web. Ciri utama yang menandakan bahasa HTML adalah tag dan elemen.

    Elemen Dalam HTML, elemen dikategorikan menjadi dua yaitu : HEAD : yang berfungsi memberikan informasi tentang suatu dokumen HTML, seperti judul web page, descripsi situs, keyword dan lain sebagainya. BODY : elemen yang digunakan untuk menentukan isi yang akan ditampilkan oleh browser seperti paragrap, list, tabel, dan lain sebagainya

    Tag Dalam HTML tag dinyatakan dengan tanda "<" dan diakhiri dengan ">". Sebagian besar kode HTML terdapat diantara tag kontainer, artinya selalu ada tag pembuka misalkan <namatag> dan ada tag penutup misalkan </namatag>. Tetapi ada sebagian tag HTML yang tidak menggunakan tag penutup misalkan tag <br>. Contoh tag kontainer :
    <table boder=1> <tr> <td>Contoh tag kontainer</td> </tr> </table>

    Contoh tag tanpa penutup


    <image src="gambarku.gif"> <br>

    Ada tiga tag utama dalam HTML yaitu :

    1. tag <HTML> : berfungsi menyatakan dokumen HTML 2. tag <HEAD> : berfungsi memberikan informasi tentang dokumen HTML 3. tag <BODY> : berfungsi memberikan informasi data yang akan ditampilkan secara umum penulisan HTML adalah sebagai berikut :
    <HTML> <HEAD> ..... ..... .... </HEAD> <BODY> ...... ...... ...... </BODY> </HTML>

    Atribut Setiap tag terkadang mempunyai atribut tersendiri yang menentukan informasi atau bentuk tampilan dari tag yang digunakan sebagai contoh tag <image> mempunyai atribut "src" sebagai informasi file image yang ingin ditampilkan. Contoh :
    <image src="gambarku.gif">

    src adalah atibut dari tag <image>, sedang gambarku.gif adalah nilai dari atribut src.

    Tag-tag HTML yang sering digunakan

    Pada elemen HEAD TITLE Digunakan untuk menentukan judul halaman web Contoh :
    <TITLE>My Web Site</TITLE>

    Tulisan diantara tag <title> di atas akan dimunculkan di title bar My Web Site

    Gambar 15 (Penggunaan Tag <title>)

    META Tag meta berfungsi sebagai bagian yang digunakan dalam pencarian, misalkan search engine, seperti yahoo, atau google. Kata-kata yang pertama kali dicari oleh search engine adalah kata-kata yang terdapat di tag <meta>. Dalam tag meta terbagi menjadi beberapa elemen, misalkan untuk keyword, deskripsi web dan lain sebagainya. Contoh : memberikan informasi tentang keyword situs :
    <meta name="keyword" content="situs pribadi, situs indah">

    memberikan informasi tentang penjelasan situs :


    <meta name="description" content="Situs pribadi ku, memberikan segudang informasi bermanfaat">

    Pada Elemen BODY: Heading Membuat heading menggunakan tag <h1></h1>, <h2></h2>, <h3></h3>, dan seterusnya. contoh :
    <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

    Gambar 16 (Penggunaan Heading)

    Paragraf membuat paragraf menggunakan tag <p></p> contoh :


    <p> HTML merupakan kepanjangan dari Hipertext MarkUp Language yaitu suatu bahasa yang digunakan untuk membuat Web Page. HTML terdiri dari elemen dan tag. </p>

    Pindah Baris Untuk pindah baris menggunakan ke baris berikutnya menggunakan tag <br> contoh :
    <p> Nama : Abdul Hanan <br> Alamat : Bekasi <br> e-mail : n_hnn@hotmail.com<br> </p>

    Blockqoute Tag <BLOCKQOUTE> digunakan untuk menulis kutipan teks. Di browser akan menampilkan tulisan yang menjorok ke dalam. Contoh :
    <h3>Sepintas HTML</h3> <blockqoute> HTML merupakan kepanjangan dari Hipertext MarkUp Language yaitu suatu bahasa yang digunakan untuk membuat Web Page. HTML terdiri dari elemen dan tag. </blockqoute>

    Center Tag <center> digunakan untuk menengahkan tulisan di dalam halaman contoh :
    <center>Teks di tengah</center>

    Membuat List Ordered List <ol> : membuat daftar item dengan tiap item dengan menggunakan angka Unordered List <ul> : membuat daftar item dengan menggunakan tanda bullet. Contoh :
    <p>Jenis-Jenis Olahraga</p> <ol> <li> Basket </li> <li> Sepak Bola </li> <li> Bulu Tangkis </li> <li> Volly </li> </ol> <p>Menu Hari ini</p> <ul> <li> Nasi Putih </li> <li> Tahu </li> <li> Tempe </li> <li> Ayam Bakar </li> </ul>

    Hypertext Link Hypertext Link, yaitu informasi yang satu dengan yang lainnya dapat berhubungan dalam jaringan. Karena kemajuan teknologi hypertext link bukan lagi hanya menggunakan teks biasa, melainkan sudah bisa dalam bentuk multimedia sehingga disebut Link. Untuk membuat Link menggunakan tag <a> ... </a>. Tag ini menggunakan atribut HREF yang digunakan untuk menghubungkan dokumen lain, bentuk penulisannya sebagai berikut :
    <a href=http://www.belajar-gratis.com>Situs Belajar-Gratis.com</a> <a href=dok.htm> Dokumen Lain </a>

    Gambar 17 (Penggunaan Hyperlink)

    Praktek I FORMAT LAPORAN Laporan terdiri dari : 1. KATA PENGANTAR 2. DAFTAR ISI 3. PENDAHULUAN a. Berisi landasan teori masing-masing modul b. Dapat pula mengambil modul atau referensi lain 4. PERMASALAHAN Berisi soal soal laporan yang akan dipecahkan 5. PEMECAHAN Berisi pemecahan masalah yang dimanifestasikan dalam bentuk flowchart dan program 6. PEMBAHASAN Berisi pemecahan masalah singkat modul tentang pemecahan yang diberikan 7. PENUTUP i. Berisi Kesimpulan ii. Berisi saran dan kesan Pertemuan Ketiga (26 & 27 April 2011)
    <HTML> <HEAD> <TITLE> FORMAT LAPORAN </TITLE> </HEAD> <BODY> <center> <table border="1" width="60%" > <tr> <td width="100%" height="395"> <p align=center> FORMAT LAPORAN <p align=left> Laporan terdiri dari :</p> <ol> <li> KATA PENGANTAR <li> DAFTAR ISI <li> PENDAHULUAN <ol type="a"> <li> Berisi landasan teori masing-masing modul <li> Dapat pula mengambil modul atau referensi lain </ol> <li> PERMASALAHAN <br> Berisi soal soal laporan yang akan dipecahkan <li> PEMECAHAN <br> Berisi pemecahan masalah yang dimanifestasikan dalam bentuk flowchart dan program <li> PEMBAHASAN <br>

    Berisi pemecahan masalah singkat modul tentang pemecahan yang diberikan <li> PENUTUP <ol type=i> <li> Berisi Kesimpulan <li> Berisi saran dan kesan </ol> </td> </tr> </table> </BODY> </HTML>

    Praktek II Untuk bahan praktek ketik kode-kode HTML berikut :


    <html> <head> <title>My Web Site</title> <meta name="keywords" content="situs pribadi, situs keren"> <meta name="description" content="Situs Pribadi yang menampilkan semua informasi yang dibutuhkan"> </head> <body> <center><h1>My Web Site</h1></center> <br> <p>Selasmat datang di situs pribadi ini, beragam informasi yang akan anda dapatkan diantaranya : <ul> <li>Informasi Tentang data diri</li> <li>Informasi Tentang keluarga</li> <li>Dan Informasi lainnya</li> </ul> </p> <p>Silahkan anda lihat link-link informasi yang berharga dibawah ini : </p> <p><strong>Belajar Gratis </strong> : <a href="http://www.belajargratis. com">http://www.belajar-gratis.com</a> memberikan informasi pelajaran sekolah dan TI, khusus untuk pelajar<br> <strong>Ilmu Komputer</strong> : <a href="http://www.ilmukomputer.

    com">http://www.ilmu-komputer.com</a> ilmu komputer<br>

    memberikan

    informasi

    tentang

    <strong>ICT Centre Jakarta</strong> : <a href="http://www.ictcentre.net">http://www.ictcentre.net</a> Center of ICT Studies Of Jakarta </p> </body> </html>

    Simpan file tersebut dengan nama praktek-1.htm pada folder C:\apache\htdocs. Jalankan browser dan ketikkan alamat URL-nya : http://localhost/praktek-1.htm.

    Gambar 18 (Test Praktek)

    Test 1. Sebutkan elemen utama dan tiga tag dasar dalam HTML! 2. Sebutkan langkah-langkah membuat daftar pada HTML! 3. Dengan menggunakan sintak-sintak HTML, buatlah seperti di bawah ini!

    DATA MAHASISWA TEKNIK INFORMATIKA No. 1. 2. 3. 4. Jawaban : 1. <HTML></HTML>; <HEAD></HEAD>; <BODY></BODY> 2. Langkah-langkahnya :
    <ol> <li> <ol type="a"> <li> <li> </ol> <ol type=i> <li> <li> </ol>

    Nama

    NPM

    Asal Sekolah

    3. Langkah-langkahnya :
    <html> <head> <title> Membuat Tabel </title></head> <body> <center> <b><u>DATA MAHASISWA TEKNIK INFORMATIKA <br/><br/></b></u> <table border="2" cellpadding="2" cellspacing="2" width="60%"> <tr><th><b>No</td><th>Nama</th><th>NPM</th><th>Asal Sekolah</th></b></tr> <tr><td>1.</td><td>Suci Pratiwi</td><td>G1A008020</td><td>SMA Negeri 2 Kota Bengkulu</td></tr> <tr><td>2.</td><td>Widhia Oktoeberza</td><td>G1A008023</td><td>SMA Negeri 3 Kota Bengkulu</td></tr>

    <tr><td>3.</td><td>Handrie <tr><td>4.</td><td>Amwaluddin Negeri Medan</td></tr> </table> </body> </html>

    Noprison</td><td>G1A008066</td><td>SMA Lubis</td><td>G1A008002</td><td>SMA

    Negeri 5 Kota Bengkulu</td></tr>

    Tugas Buatlah halaman web yang terdiri dari halaman utama, profil diri dan riwayat hidup, proses registrasi, dan link ke halaman lain. Tugas diprint screen dan dikumpul pada pertemuan selanjutnya sebelum praktikum dimulai dengan format tugas yang sudah ditentukan.

    Materi untuk laporan PENDAHULUAN MEMBANGUN SEBUAH HOMEPAGE SEDERHANA

    HTML dirancang untuk dipakai di media World Wide Web, atau yang lebih dikenal dengan cyber world atau dunia maya. World Wide Web adalah jaringan beribu ribu computer yang dibagi menjadi dua kategori; Client dan Server. Server menyimpan informasi dan memproses data yang diminta client, dan kemudian mengirim informasi yang client. Server juga mengirimkan perintah perintah dalam bentuk HyperText Markup Language (HTML) kepada client tentang bagaimana cara menampilkan informasi. Hamper semua informasi di World Wide Web dapat diakses secara langsung, karena setiap dokumen, file dan gambar mempunyai alamat tertentu yang disebut Uniform Resource Locators (URLs). URL memiliki empat bagian. Yang pertama, adalah protokol http://, (HyperText Transfer Protokol). Yang kedua, nama domain, yang merupakan kelompok computer yang terhubung ke internet. Yang ketiga disebut directory path, dimana merupakan area khusus di server dimana item item disimpan. Setiap kerja directory path pada web server sama seperti pada computer desktop. Yang keempat dari URL adalah nama file dokumen, untuk menentukan file khusus yang sedang diakses.

    HTML yang paling sederhana tanpa menggunakana compiler khusus adalah dengan menggunakan NotePad. Dimana pada saat penge-save-an, ekstensi .txt diganti dengan .htm atau .html. Dan disimpan dengan tipe All Files. Setiap file html harus mencantumkan <HTML> pada awal dokumen dan ditutup dengan tag </HTML>. Tag tag yang dipakai dalam HTML bukanlah tag case sensitive, sehingga memungkinkan pada WebDesigner untuk menggunakan lower-case maupun uppercase. Tag yang paling sering dipakai dalam HTML adalh tag paragraph (<P> ditutup dengan </P>). Selain itu HTML juga menyediakan format heading (<<Hx> ditutup dengan </Hx>, heading level (x) dari 1 sampai dengan 6. Untuk mengatur alignment paragraph digunakan tag <p align =alignment yang diinginkan> dan ditutup dengan </P>. Untuk menebalkan, memiringkan, dan menggaris-bawahi huruf masing-masing menggunakan tag <b>, <i>, dan <u> lalu ditutup dengan tag </b>, </i>, dan </u>.

    MEMBUAT DAFTAR DI HTML

    A. PENDAHULUAN Daftar di HTML secara garis besar terdiri dari dua kelompok, yaitu daftar teratur dan daftar yang tidak teratur. Untuk data yang tidak teratur, Browser Web menempatkan bullet atau penanda lain di depan setiap item dalam daftar. Daftar yang tidak teratur dimulai dengan tag <ul> sebagai tanda daftar yang tidak teratur dimulai di sini. Kemudian untuk pengganti bullet dipakai tag <lh> lalu setelah item daftar di entri, ditutup dengan tag </lh>, untuk kemudian mengetikkan tag <lh> untuk setiap entri item yang baru. Setelah semua item di daftar telah di-entri, daftar ditutup dengan tag </ul>. Tag <ol> dipakai untuk daftar teratur. Tag <lh> diperlukan untuk membuat judul. Dan untuk meng-entri item dipakai tag <li>. Untuk daftar teratur dengan metode pengurutan dengan memakai huruf capital, tag <ol> ditambah komentarnya menjadi <ol type=A>, atau <ol type=a> untuk huruf kecil, atau <ol type=I> untuk huruf Romawi. Daftar definisi, yaitu item yang dibuat terpisah, baris pertama istilah, kemudian definisinya pada baris kedua dengan alignmen baris kedua agak diposisikan ke dalam. Daftar definisi dimulai dengan tag <DI>. Baris pertama memakai tag <DT> dan baris kedua memakai tag <DD>.

    Anda mungkin juga menyukai