Makalah Html.docx

Oleh Imas Nurhaerani

627,7 KB 5 tayangan 0 unduhan
 


Bagikan artikel

Transkrip Makalah Html.docx

KATA PENGANTAR Pertama-tama tak lupa saya panjatkan puji syukur kehadirat Allah Tuhan Yang Maha Pengasih. Karena hanya dengan ridhoNyalah saya dapat menyelesaikan makalah ini. Dan tak lupa saya sampaikan terima kasih kepada semua pengajar saya yang telah berjasa membuat saya memiliki kemampuan seperti ini. Tujuan pembuatan e-book ini sebenarnya adalah untuk membantu anda yang yang belum mengenal sama sekali kode HTML atau sudah mengetahui HTML secara garis besar dan ingin menambah kemampuan. Dalam Makalah “Mastering Kode HTML” ini anda akan diajarkan pengetahuan dasar hingga tingkat menengah bagaimana membuat sebuah website dengan cepat. Dalam makalah ini anda tidak diajarkan untuk menggunakan software HTML Editor yang bersifat WYSIWYG (What You See Is What You Get) seperti FrontPage atau DreamWeaver. Penulis sadar bahwa masih banyak kekurangan yang terdapat pada ebook ini. Untuk itu penulis mengharapkan saran dan kritik dari pembaca. Mudah-mudahan dengan hadirnya makalah ini dapat memajukan dan meningkatkan SDM Indonesia khususnya dalam bidang TI. Tasikmalaya, Desember 2005 Penulis i ii DAFTAR ISI KATA PENGANTAR......................................................................................... i DAFTAR ISI........................................................................................................ ii DAFTAR GAMBAR........................................................................................... iii DAFTAR TABEL................................................................................................ iv BAB I PENDAHULUAN.................................................................................... 1 1.1 Latar Belakang.......................................................................................... 1 1.2 Rumusan Masalah..................................................................................... 2 1.3 Tujuan Penulisan....................................................................................... 2 1.3.1 Tujuan Khusus................................................................................ 2 1.3.2 Tujuan Umum................................................................................ 2 1.4 Manfaat Penulisan..................................................................................... 3 1.5 Metode Penulisan...................................................................................... 3 1.6 Sistematika Penulisan................................................................................ 3 BAB II LANDASAN TEORITIS....................................................................... 5 2.1 Pengertian HTML...................................................................................... 5 2.2 Penggunaan Tag pada HTML................................................................... 5 2.3 Daftar Tag pada HTML............................................................................. 6 BAB III PEMBAHASAN....................................................................................15 3.1 Menggunakan Atribut dari Tag.................................................................15 3.1.1 Contoh-contoh penggunaan tag dan atributnya................................15 BAB IV PENUTUP.............................................................................................37 4.1 Kesimpulan...........................................................................................37 4.2 Saran.....................................................................................................37 iii DAFTAR GAMBAR Gambar 3.1 file tag_p.html saat desain time...................................................17 Gambar 3.2 file tag_p.html saat dijalankan.....................................................17 Gambar 3.3 Output file tag_font.html.............................................................19 Gambar 3.4 Output file tag_tabel.html............................................................20 Gambar 3.5. Output file tag_form_input.html................................................23 Gambar 3.6 Output file tag_form_select.html.................................................27 Gambar 3.7 Output file tag_a.html..................................................................29 Gambar 3.8 Output file tag_body.html...........................................................31 Gambar 3.9 Output file tag_img.html.............................................................34 Gambar 3.10. Output file tag_ol_ul_li.html....................................................35 iv DAFTAR TABEL Tabel 2.1 Contoh Penggunaan HTML............................................................... 5 Tabel 2.2 Tag Utama......................................................................................... 6 Tabel 2.3 Tag Modifikasi teks.......................................................................... 7 Tabel 2.4 Tag Font............................................................................................ 8 Tabel 2.5 Tag Link............................................................................................ 8 Tabel 2.6 Tag Gambar...................................................................................... 9 Tabel 2.7 Tag Formating................................................................................... 9 Tabel 2.8 Tag Table..........................................................................................10 Tabel 2.9 Ta g form..........................................................................................12 BAB I PENDAHULUAN 1.1 Latar Belakang Pada awalnya HTML hanyalah halaman-halaman berformat yang bisa dilihat oleh sedikit programbrowser. Sasaran awal HTML adalah menyajikan informasi teks yang memungkinkan pengguna terhubung atau beralih ke halaman-halaman web lainnya atau yang biasa disebut Hyperlink diantara isi dari website. Sekarang ini HTLM tidak hanya mampu memformat teks namun juga menyajikan grafik dan mengatur form-form data. Kebehatan lain HTML adalah semua komputer dengan web browser dapat membaca dan menafsirkan kode HTML terhadap halaman-halaman web yang mereka akses. Sebelum internet populer, orang mengirim data atau sebuah file teks ke seorang teman melalui sebuah jaringan. Anda bisa mengirim file teks atau grafik, atau anda dapat mendownload sebuah file musik dari sebuah sistem bulletin board elektronik ( BBS ). Sekarang, anda masih bisa mendownload file-file dalam berabagai macam format, namun selain itu anda bisa menerima sebuah file berbasis HTML saat menampilkan sebuah halaman web. Salah satu keuntungan dari mengirimkan HTML melalui sebuah koneksi, termasuk file-file data individu, adalah bahwa kode-kode HTML menjalin semua elemen data lainnya yang bersama dengan memformat mereka kedalam sebuah halaman web yang bisa dibaca atau digunakan. HTML(Hyper Text Markup Language) adalah sekumpulan symbolsimbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada pengguna. Tag-tag HTML selalu diawali dengan dan diakhiri dengan dimana x tag HTML seperti b, i, u dan sebagainya. Untuk mempelajari ebook ini anda hanya memerlukan:Text Editor (Notepad, vi, emacs, dsb), Web Browser (Internet Explorer, Opera, FireFox, dsb). 1 2 Hanya dengan bermodalkan dua software bawaan Windows itu saja anda sudah dapat membuat website. Namun Notepad memiliki kekurangan yaitu tidak memiliki syntax highlighting (pewarnaan kode) sehingga relatif cukup menyulitkan. Untuk itu saya merekomendasikan pada anda untuk menggunakan “PHP DESIGNER 2006”. Kelebihan software ini adalah ia memiliki banyak macam syntax highlighting mulai dari HTML, PHP, JAVA dan masih banyak lagi. Namun yang terpenting dari software ini sifatnya FREE. Anda dapat mendownload “PHP DESIGNER 2006” di alamat: http://www.mpsoftware.dk/. NB: Jika anda menggunakan notepad sebagai editor. Pastikan ketika hendak menyimpan file pilihan Save As Type-nya adalah All Files. Hal ini untuk menghindari tersimpannya script kita sebagai file text biasa. Kita asumsikan anda sebagai orang awam yang belum mengenal sama sekali HTML. Jika anda menggunakan program semacam ini dan hanya drag n drop saja tanpa mengerti kodenya maka sama saja anda tidak menguasai teknik pemrograman web secara nyata. Ini akan mempersulit anda jika nanti anda mempelajari bahasa web progromming seperti Java atau PHP. Oleh karena itu, dalam materi yang kita bahas dalam ebook ini menggunakan “PHP Designer 2006” yang sifatnya hanya syntax highlighting. Namun setelah membaca e-book ini dan menguasai HTML anda tentu sudah mengerti dan tidak bingung ketika menggunakan program WYSIWYG. 1.2 Rumusan Masalah 1. Apa yang dimaksud dengan HTML? 2. Apa yang dimaksud dengan Atribut pada HTML? 3. Apa yang dimaksud tag pada HTML? 4. Bagaimana penggunaan tag dan atribut pada HTML? 5. Bagaimana cara membuat website pribadi? 6. Bagaimana cara mengupload file ke server? 3 1.3 Tujuan Penulisan 1.3.1 Tujuan Umum Tujuan pembuatan makalah ini sebenarnya adalah untuk membantu anda yang yang belum mengenal sama sekali kode HTML atau sudah mengetahui HTML secara garis besar dan ingin menambah kemampuan. 1.3.2 Tujuan Khusus 1. Diharapkan dapat mengetahui lebih jauh mengenai HTML. 2. Diharapkan pembaca dapat mengaplikasikan penggunaan tag dan atribut pada HTML. 3. Diharapkan dapat membuat website sendiri menggunakan HTML. 4. Diharapkan paham dalam pengaplikasian atribut pada masing-masing tage. 5. Selain bisa menbuat web sendiri pembaca diharapkan bias menguploakan filenya sendiri ke server. 6. Menyewa webhosting sendiri dari server. 1.4 Manfaat Penulisan Penulisan makalah ini diharapkan bermanfaat bagi pihak pembaca atas pengetahuan lebih lanjut tentang HTML dan pembaca dapat mengerti mengenai penggunaan tag beserta atributnya sehingga bias dalam pengaplikasiannya. 1.5 Metode Penulisan Metode penulisan yang dilakukan oleh penulis dalam mengumpulkan data sebagai bahan makalah ini ialah metode studi pustaka, yaitu dengan cara membaca buku, dari internet dan mencari literature yang berhubungan dengan masalah yang akan dibahas. 4 1.6 Sistematika Penulisan Sistematika penulisan yang digunakan adalah sebagai berikut: 1.6.1 BAB I PENDAHULUAN Pada Bab ini memuat latar belakang, rumusan masalah, tujuan penulisan(Tujuan umum dan Tujuan Khusus), manfaat penulisan, metode penulisan, dan sistematika penulisan. 1.6.2 BAB II LANDASAN TEORI Pada bab ini memuat tentang pengertian HTML, cara penggunaan tag pada HTML, dan daftar tag pada HTML. 1.6.3 BAB III PEMBAHASAN Pada bab ini memuat tentang penggunaan atribut dari tag, contoh penggunaan tag dan atribut, tahap persiapan pembuatan website, sketsa proyek, langkah-langkah membuat website pribadi (personal homepage), pengertian upload, menyewa web hosting, tahap persiapan mengupload, dan langkah-langkah mengupload file ke server. 1.6.4 BAB IV PENUTUP Memuat kesimpulan dan saran atau rekomendasi. BAB II LANDASAN TEORI 2.1 Pengertian HTML Seperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag HTML selalu diawali dengan dan diakhiri dengan dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda seperti tag
, dan lainnya. Sebuah halaman website akan diapit oleh tag ……. Filefile HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML.Pengertian Teknologi Informasi 2.2 Cara Menggunakan Tag pada HTML Tabel 2.1 Contoh Penggunaan HTML No Contoh Hasil 1. Ini tulisan tebal Ini tulisan tebal 2. Ini tulisan miring Ini tulisan miring 3 Ini tulisan bergaris bawah Ini tulisan bergaris bawah 4 Ini baris 1
Ini baris 2 Ini baris 1 Ini baris 2 5 Ini garis horizontal


Ini garis horizontal 5 6 Ada beberapa tag yang memilki atribut didalamnya, seperti tag , , dan sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face Untuk lebih memahami atribut lihatlah contoh berikut ini. Ini Font Arial berwarna merah dan berukuran 12 pt Hasil Ini Font Arial berwarna merah dan berukuran 12 pt 1. Atribut color digunakan untuk menentukan warna tulisan. 2. Atribut face digunakan untuk menentukan jenis huruf. 3. Atribut size digunakan untuk menentukan ukuran huruf. 2.3 Daftar Tag pada HTML Berikut ini adalah tabel tag-tag HTML dan fungsinya: Tabel 2.2 Tag Utama Tag Atribut Deskripsi Baris paling atas dari setiap file HTML Informasi umum dari sebuah halaman web Judul halaman. Terdapat pada head 7 background bgcolor bgsound font Link Alink Settingan atribut untuk seluruh dokumen. Vlink Topmargin Leftmargin Marginheight marginwidth Tabel 2.3 Tag Modifikasi teks Tag Deskripsi Contoh Teks tebal Teks tebal Teks miring Teks miring Teks garis bawah Teks garis bawah

 
 Preformatted teks
 
 Contoh teks
 
 

Header 1 Header 1

Header 2 Header 2

Header 3 Header 3

Header 4 Header 4
Header 5 Header 5 8
Header 6 Header 6 Subscript Sub Superscript Super script script Tabel 2.4 Tag Font Tag Atribut Deskripsi Color Size name Mengubah gaya suatu huruf Tabel 2.5 Tag Link Tag Atribut Deskripsi Href Target style Membuat link ke dokumen atau class situs lainnya. name id Tabel 2.6 Tag Gambar 9 Tag Atribut deskripsi Src Alt Name Menampilkan sebuah gambar. Border Height weight Tabel 2.7 Tag Formating Tag Deskripsi contoh
Digunakan untuk mengatur Sample of text in a block
text dan gambar dalam quote format suatu tag
Unordered List (digunakan • item 1 dengan
  • )
    Ordered List (digunakan dengan
  • 1. Item 1
  • Elemen List
    Definition List Sample text 10
    Definition Term Sample text
    Definition Description Sample text Sample

    Paragraf Text
    Ganti baris Sample
    Garis horizontal Text
    Menengah elemen
    Sample Tabel 2.8 Tag Table Tag atribut Deskripsi border cellpadding cellspacing width height name
  • id title bgcolor background align valign Mengatur semua elemen table 11 height bgcolor background Membuat baris baru align valign title colspan rowspan height width bgcolor background align Membuat kolom valign title colspan rowspan height width align Header(kepala tabel). Otomatis ke valign tengah dan tebal. bgcolor background 12 height width valign diapit tag. bgcolor background height width align valign bgcolor Format yang berlaku bagi kolom background colspan Tabel 2.9 Tag form Tag Atribut
    method
    action name text password hidden Deskripsi Mengatur elemen dari form 13 radio Variasi dari tipe elemen form checkbox submit image reset name text value Sample tex width maxlength name password value width *********** maxlength hidden radio name Digunakan untuk membuat value variable hidden. name Radio 1 value name checkbox submit Radio 2 value checked Check 1 value Check 2 src Tombol height 14 image width reset alt name border name Reset size Membuat combo-box. Digunakan selected bersama dengan option