Senin, 31 Oktober 2011

Membuat Paragraf dan Judul dalam HTML

3. Membuat Paragraf dan Judul dalam HTML

Sekarang kita akan membahas tentang cara membuat paragraf dan judul. Kembali lagi ke analogi membuat kue, untuk membuat 'kue' paragraf tentu kita harus tahu bahan-bahannya bukan? Untuk membuat 'kue' paragraf bahan-bahan yang dibutuhkan hanyalah <p>, sedangkan untuk judul kita akan membutuhkan <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Setelah bahan-bahannya kita ketahui maka kita akan mulai membuat 'kue'nya. Masih ingat kan struktur html itu seperti apa? yap seperti hamburger, maka untuk membuat 'kue' paragraf ini kalian akan menjepit isi dari paragraf kalian dengan bahan yang telah kalian ketahui sebelumnya yaitu <p> dan </p>.
Anggap kalian akan bercerita mengenai pengalaman kalian liburan ke pantai. Tentunya paragraf yang akan kalian buat tidak begitu jauh dari apa yang kami tulis berikut ini,
"Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer. Kami pergi kesana karena diajak oleh Ayah untuk melepas penat. Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai disana pukul 11 siang. 

Sesampainya disana kami langsung mencari restoran karena kami semua sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap semalam di hotel dan pulang keesokan harinya."
Untuk membuat paragraf seperti diatas maka kita tulis struktur html dasar yaitu <html>, <head>, dan <body> lalu kita masukkan bahan untuk membuat paragraf yaitu <p> lalu masukkan isinya, seperti berikut ...
view plaincopy to clipboardprint?
  1. <html>  
  2.     <head>  
  3.         <title>Belajar Membuat Paragraf</title>  
  4.     </head>  
  5.     <body>  
  6.           
  7.     <p>  
  8.     "Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.   
  9.     Kami pergi kesana karena diajak oleh Ayah untuk melepas penat.   
  10.     Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai   
  11.     disana pukul 11 siang.  
  12.     </p>  
  13.     <p>  
  14.     Sesampainya disana kami langsung mencari restoran karena kami semua   
  15.     sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang   
  16.     telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung   
  17.     menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan   
  18.     bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah   
  19.     menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada   
  20.     pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari   
  21.     terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap   
  22.     semalam di hotel dan pulang keesokan harinya."  
  23.     </p>      
  24.   
  25.     </body>  
  26. </html>  
Perhatikan kode html diatas, karena contoh paragraf terdiri dari dua paragraf maka kode yang dibuat pun harus menggunakan dua <p> dan dua </p>. Kalian dapat mencoba kode diatas ke dalam papan tulis yang disediakan dibawah. Lalu bagaimana agar paragraf yang kalian tampilkan memakai huruf miring semua seperti pada contoh diatas? Untuk membuat tulisan miring atau cetak tebal, atau bergaris bawah kalian harus mengetahui bahan tambahan yang diperlukan, yaitu <i>, <b>, dan <u>. Masing-masing tag ini merupakan kepanjangan dari italic (huruf miring), bold (cetak tebal), dan underline (garis bawah). Cara memakai bahan-bahan ini bagaimana? Sama seperti hamburger kita, dijepit saja isinya, lihat kode dibawah ini ...
view plaincopy to clipboardprint?
  1. <html>  
  2.     <head>  
  3.         <title>Belajar Membuat Paragraf</title>  
  4.     </head>  
  5.     <body>  
  6.           
  7.     <p>  
  8.     <i>  
  9.     "Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.   
  10.     Kami pergi kesana karena diajak oleh Ayah untuk melepas penat.   
  11.     Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai   
  12.     disana pukul 11 siang.  
  13.     </i>  
  14.     </p>  
  15.     <p>  
  16.     <i>  
  17.     Sesampainya disana kami langsung mencari restoran karena kami semua   
  18.     sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang   
  19.     telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung   
  20.     menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan   
  21.     bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah   
  22.     menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada   
  23.     pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari   
  24.     terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap   
  25.     semalam di hotel dan pulang keesokan harinya."  
  26.     </i>  
  27.     </p>      
  28.   
  29.     </body>  
  30. </html>  
Lihat, mirip seperti hamburger kan :) .
Dalam membuat paragraf tentu kalian sewaktu-waktu akan membutuhkan paragraf yang rata kiri, rata kanan, rata tengah, dan rata kanan kiri. Untuk membuat ini kalian akan membutuhkan atribut yang bernama "align". Ada 4 nilai align, yaitu left (rata kiri), right (rata kanan), centre (rata tengah), dan justify (rata kanan kiri). Sekarang lihat kode dibawah untuk cara pemakaian atribut ini.
view plaincopy to clipboardprint?
  1. <p align="right">  
  2.     Sesampainya disana kami langsung mencari restoran karena kami semua   
  3.     sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang   
  4.     telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung   
  5.     menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan   
  6.     bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah   
  7.     menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada   
  8.     pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari   
  9.     terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap   
  10.     semalam di hotel dan pulang keesokan harinya.  
  11. </p>  
Untuk menjadikannya rata kiri atau tengah tinggal mengganti kode "right" menjadi "left" atau "centre".
Judul dari paragraf atau Heading dalam bahasa Inggris menggunakan bahan-bahan yang telah disebutkan di awal tulisan yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. <h1> adalah judul utama dan paling besar sedangkan <h6> adalah yang paling kecil. Contoh penulisan judul paragraf dapat kalian lihat dibawah.
view plaincopy to clipboardprint?
  1. <h1>Contoh Judul Paragraf</h1>  
  2. <h2>Contoh Judul Paragraf</h2>  
  3. <h3>Contoh Judul Paragraf</h3>  
  4. <h4>Contoh Judul Paragraf</h4>  
  5. <h5>Contoh Judul Paragraf</h5>  
  6. <h6>Contoh Judul Paragraf</h6>  
Kalian dapat melihat perbedaan keenam judul tersebut dengan menuliskannya di papan tulis.
Pada bagian penjelasan tag dijelaskan atribut-atribut lain yang berkaitan dengan paragraf dan judul. Kalian dapat menemukannya secara lengkap disana. Pelajaran berikutnya yaitu HTML link atau tautan
Diposting oleh di Tidak ada komentar:
Label:

Dasar-Dasar HTML

Tutorial HTML

2. Dasar-dasar HTML

Pengetahuan pertama tentang HTML yang harus kamu miliki adalah struktur dari HTML. Struktur HTML ini dapat kamu ibaratkan seperti Hamburger. Pernah makan? Kalau belum, kamu akan melihat roti bulat yang ditumpuk-tumpuk dengan isi sayuran didalamnya. Struktur HTML ini mirip seperti Hamburger, sayuran yang dijepit oleh roti tersebut adalah isi dari kedua tag HTML yang menjepitnya. Apa itu tag? Sekarang kita langsung lihat saja pada struktur sederhana dari HTML.
Di bawah ini adalah struktur dasar suatu file html,
view plaincopy to clipboardprint?
  1. <html>  
  2.     <head>  
  3.         <title>Sedang Belajar</title>  
  4.     </head>  
  5.     <body>  
  6.           
  7.         aku belajar html nih ..  
  8.   
  9.     </body>  
  10. </html>  
kode yang dimulai dengan tanda "<" dan diakhiri dengan tanda ">" (tanpa tanda kutip) merupakan tag-tag HTML. Tag-tag ini menandai bagian-bagian pada halaman situs agar ditampilkan sesuai dengan standar tampilannya. Tag HTML dasar adalah yang kalian lihat diatas, yaitu html, head, dan body, inilah roti dari hamburger kita, mereka masing-masing menjepit isinya. Perhatikan kode paling atas dan paling bawah, yaitu
view plaincopy to clipboardprint?
  1. <html>  
dan
view plaincopy to clipboardprint?
  1. </html>  
Kedua tag tersebut adalah tag utama dari HTML, segala yang terdapat dalam tag ini adalah bagian dari html.
Berikut ini adalah penjelasan singkat mengenai tag dasar diatas. Tag <head> dan </head> digunakan untuk meletakkan informasi-informasi penting yang tidak ditampilkan oleh browser sehingga ketika kita tidak akan melihatnya pada halaman situs. Tulisan didalam <head> dan </head> hanya dapat dilihat apabila kita mengklik 'View Source' pada browser Internet Explorer, atau 'View Page Source' pada Mozilla Firefox. Keduanya dapat ditemukan dengan klik kanan pada halaman situs yang dilihat. Tag <head> ini umumnya berisi judul (tag <title> dan </title>) dari halaman situs dan beberapa informasi tambahan lainnya.
Tag <body> dan </body> adalah isi dari halaman situs. Disini tulisan, gambar, tabel, kalian akan ditampilkan di browser. Itulah mengapa tag ini disebut body atau badan. Ada banyak tag-tag HTML lain yang bisa ditampilkan disini misalnya <img> untuk menampilkan gambar, <p> untuk menampilkan paragraf, <table> untuk menampilkan tabel, dan masih banyak lagi. Tag-tag ini dapat kalian temukan definisinya dan cara pemakaiannya pada pembahasan khusus tag.
Satu hal mendasar lagi yang harus kalian ketahui dalam membangun situs kalian menggunakan html adalah atribut. Atribut berbeda dengan tag, atribut adalah keterangan untuk tag. Misalnya untuk tag body ada beberapa atribut seperti bgcolor, dan background. Contohnya seperti dibawah ini,
view plaincopy to clipboardprint?
  1. <html>  
  2.     <head>  
  3.         <title>Sedang Belajar</title>  
  4.     </head>  
  5.     <body bgcolor=red>  
  6.           
  7.         aku belajar html nih ..  
  8.   
  9.     </body>  
  10. </html>  
Atribut bgcolor=red artinya adalah, "Tampilkan latar belakang merah pada halaman situs..". Sehingga latar belakang dari halaman yang kalian buat akan berwarna merah. Atribut-atribut yang lain dapat kalian temukan pada bagian tag yang bersangkutan.
Penjelasan diatas merupakan dasar-dasar dari HTML. Kalian dapat mencobanya sendiri di komputer kalian dengan menggunakan notepad atau wordpad, caranya dengan menulis kode-kode html dalam notepad atau wordpad lalu simpan sebagai [dot]html. Jangan lupa untuk memilih pilihan 'All Files' untuk 'Save as Type'nya sehingga file yang tersimpan bukan [dot]txt. Atau kalian juga dapat mencobanya langsung disini, dengan menulis kode-kode tersebut di papan tulis dibawah ini. Setelah selesai kalian dapat melihat hasilnya dengan menekan tombol 'Lihat Hasilnya!'. Papan tulis ini akan ada di setiap pelajaran HTML berikutnya untuk memudahkan kalian mencoba kode-kode HTML dalam pelajaran tersebut.
Diposting oleh di Tidak ada komentar:
Label:
Langganan: Postingan (Atom)