Creating Tables

17.26 Diposting oleh seputarwisata.com

Dokumen HTML juga mendukung pembuatan tabel. Tag yang digunakan adalah <table></table>. Disamping itu ada juga tag tambahan yang digunakan untuk memformat kolom dan baris pada tabel, yaitu tag <tr> untuk membuat baris dan tag <td> untuk membuat kolom. Untuk lebih jelasnya, perhatikan contoh di bawah ini.











Kolom 1 baris 1Kolom 2 baris 1
Kolom 1 baris 2Kolom 2 baris 2



Hasilnya:










Kolom 1 baris 1Kolom 2 baris 1
Kolom 1 baris 2Kolom 2 baris 2


Lebih jauh tentang table


Rowspan


















  
    Nama    TTL    Fakultas  
  
    Ahsan    20 Des 1990    Pertanian  
  
    Dwi    2 Januari 1989

















Nama TTL Fakultas
Ahsan 20 Des 1990 Pertanian
Dwi 2 Januari 1989


Colspan














  
    Month    Savings  
  
    January  
  
    February













Month Savings
January
February
Description: Creating Tables Rating: 4.5 Reviewer: seputarwisata.com - ItemReviewed: Creating Tables


Shares News - 17.26
Read More Add your Comment 0 komentar


Images

17.21 Diposting oleh seputarwisata.com

Gambar juga dapat ditambahkan pada dokumen html. Tag yang digunakan untuk menambahkan gambar adalah tag <img>. Contoh penggunaan tag:



Keterangan

  • img = adalah tag image

  • src = adalah atribut yang berisikan alamat gambar, contoh lainnya "images/bunga.jpg", "http://blog.umy.ac.id/bunga.jpg"

  • alt = judul alternatif untuk gambar (opsional)


 

Latihan 8



  • Buat folder dengan nama images, kemudian letakkan sebuah gambar pada folder tersebut

  • panggil gambar menggunakan tag <img> pada halaman index.html

Description: Images Rating: 4.5 Reviewer: seputarwisata.com - ItemReviewed: Images


Shares News - 17.21
Read More Add your Comment 1 komentar


Links

16.41 Diposting oleh seputarwisata.com

Links adalah penghubung antara dokumen/halaman html yang satu dengan dokumen/halaman html yang lain. Contoh tag Link:

klik untuk melihat galeri


Latihan 7


Buat sebuah dokumen html lagi, kemudian beri nama dengan profil.html.
Pada dokumen index.html tambahkan link yang menghubungkannya dengan halaman profil.html.
Selanjutnya refresh browser.Description: Links Rating: 4.5 Reviewer: seputarwisata.com - ItemReviewed: Links


Shares News - 16.41
Read More Add your Comment 0 komentar


List

16.34 Diposting oleh seputarwisata.com

List terkadang dibutuhkan untuk memudahkan penyebutan sesuatu yang berbilang. Ada dua macam list, yaitu ordered list <ol> dan unordered list <ul>.
Contoh:



  1. Anggur

  2. Jambu

  3. Mangga

  4. Alpukat

  5. Semangka




Hasil:

  1. Anggur

  2. Jambu

  3. Mangga

  4. Alpukat

  5. Semangka





  • Jawa Tengah

  • Jawa Barat

  • Jawa Timur

  • Banten

  • DKI Jakarta




Hasil:

  • Jawa Tengah

  • Jawa Barat

  • Jawa Timur

  • Banten

  • DKI Jakarta



Latihan 6:
Buat list dengan kombinasi antara ol dan ul yang hasilnay sebagaimana di bawah ini:


  • Jawa Tengah

    1. Anggur

    2. Jambu

    3. Mangga



  • Jawa Barat

    1. Mangga

    2. Alpukat

    3. Semangka


  • Jawa Timur

    1. Anggur

    2. Jambu

    3. Semangka


  • Banten

    1. Anggur

    2. Rambutan


  • DKI Jakarta

    1. Semangka

    2. Sawo


Description: List Rating: 4.5 Reviewer: seputarwisata.com - ItemReviewed: List


Shares News - 16.34
Read More Add your Comment 0 komentar


Headings

16.24 Diposting oleh seputarwisata.com

Sebagaimana pada Microsoft Word, pada HTMl juga memiliki heading yang bervariasi untuk membedakan antara judul utama dengans ub judul berikutnya. Heading dimulai dari yang terbesar sampai yang terkecil adalah :


Ini Heading 1

Ini Heading 2

Ini Heading 3

Ini Heading 4

Ini Heading 5

Ini Heading 6



Contoh hasilnya pada browser, berikut ini:

Ini Heading 1


Ini Heading 2


Ini Heading 3


Ini Heading 4


Ini Heading 5

Ini Heading 6


Latihan 5


masukkan kode di atas pada file yang sudah Anda buat sebelumnya kemudian lihat hasilnya.Description: Headings Rating: 4.5 Reviewer: seputarwisata.com - ItemReviewed: Headings


Shares News - 16.24
Read More Add your Comment 0 komentar


Page Titles , Paragraph, Emphasis, Strong, Underline, Strikethrough, & Line Break

16.12 Diposting oleh seputarwisata.com

Title


Setiap halaman HTMl memiliki page title atau judul halaman. Title memiliki tag:
ini Page title atau judul halaman

Letak tag title berada di antara tag <head> dan </head>.

Paragraph


Paragraph mempunyai tag <p> </p> dan letaknya di antara tag <body> dan </body>. Contoh

Ini paragraf pertama

Ini paragraf ke dua



Sedangkan Paragraf mempunyai tag-tag pendukung lainnya seperti:

Emphasis, untuk memiringkan teks
 Strong, untuk menebalkan teks
 Underline, untuk mmeberi garis bawah
untuk memberi garis di tengah

 adalah line break untuk membuat baris baru


catatan: tag <br /> adalah tag yang tidak memiliki penutup

Latihan 3






Judul halaman



Saat ini saya sedang belajar bahasa html
ternyata html itu mudah, asyik, dan menyenangkan.



Description: Page Titles , Paragraph, Emphasis, Strong, Underline, Strikethrough, & Line Break Rating: 4.5 Reviewer: seputarwisata.com - ItemReviewed: Page Titles , Paragraph, Emphasis, Strong, Underline, Strikethrough, & Line Break


Shares News - 16.12
Read More Add your Comment 0 komentar


Basic HTML

00.54 Diposting oleh seputarwisata.com

Sebagaimana telah disebutkan pada artikel sebelumnya, HTML (Hypertext Markup Language) adalah sebuah bahasa scripting yang dapat menghasilkan halaman web. HTML dapat dibuat dengan menggunakan editor apapun seperti notepad,  Dreamweaver, Editplus dll. Sedangkan hasilnya dapat dipreview/dilihat menggunakan browser apapun.

Dasar HTML


Latihan 1


Tulislah teks berikut ini pada Notepad (Start>Program>Accessories>Notepad).
Ini adalah website pertamaku

Kemudian simpan file tadi pada drive D:\Nama Anda dengan nama file index.html. Berikut ini cara menyimpan file agar berekstensi .html.



Langkah selanjutnya adalah, buka file yang sudah kita buat di atas menggunakan browser. Caranya adalah dengan mengklik dua kali pada file tersebut. Berikut ini hasilnya jika dilihat melalui browser.



Tag, Atribut dan Elemen

Struktur dasar bahasa HTML adalah tag. Setiap halaman HTML terdiri dari kumpulan bemacam-macam tag. Contoh tag:


, , , , <p>, <h1>, <h2>, <div>, <b> <table>, dll<br/></pre><br/><br/><h3>Tag penutup</h3><br/><br/>Hampir semua tag memiliki penutup kecuali beberapa bagian kecil. Contoh<br/><br/><pre><br/>tag <html> ditutup oleh tag </html><br/>tag <p> ditutup oleh tag </p><br/></pre><br/><br/>Setiap tag yang memiliki tag penutup harus wajib diakhiri dengan tag penutup.<br/><br/><h4>Latihan 2</h4><br/><br/>Ketikkan kode di bawah ini pada file yang telah kita buat dengan menghapus terlebih dahulu tulisan yang sedah kita buat sebelumnya.<br/><br/><pre><br/><!DOCTYPE html><br/><html><br/><head><br/><title>Title of the document


The content of the document......




Simpan kemudian refresh browser dengan menekan tombol F5.

Keterangan
digunakan untuk memberikan informasi bahwa dokumen ini bertipe html
 adalah tag pembuka dokumen html
 tag yang memuat berbagai informasi terkait dokumen html dan hal-hal yang dibutuhkan seperti title, meta description, keyword, dll.
 tag yang memuat semua isi dokumen

Atribut

Setiap tag dapat memiliki atribut, yang berupa tambahan informasi. Atribut muncul di dalam tag pembuka dan nilai mereka selalu di dalam tanda kutip. Contoh:
Teks ini memiliki align center
 
Kita akan menemukan tag dengan atribut yang lebih kompleks nanti. Insya Allah.

Elemen

Elemen adalah segala sesuatu yang terletak diantara tag dan penutupnya (termasuk tagnya). Contoh:
Jika title adalah tag, maka:
"judul web"
 bisa kita katakan title element, atau elemen titel.
"
paragraf teks
"
 bisa kita katakan paragraph element, atau elemen paragraf.

Referensi: HTMLDogDescription: Basic HTML
Rating: 4.5
Reviewer: seputarwisata.com - 
ItemReviewed: Basic HTML







Shares News
- 
00.54





Read More

Add your Comment


1 komentar