Home / All posts

8:29 PM

3-HTML DAFTAR URUTAN :

:: 3-HTML DAFTAR URUTAN ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.

MATERI:
Element OL(ordered list), Element UL(unordered list), Element LI(list item).

ELEMENT OL (Orderd List)
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.

Sintaks:
<ol start="number" type="A"|"a"|"I"|"i"|"1">
........................
</ol>

ELEMENT UL (Unordered List)
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.

Sintaks:
<ul type="circle"|"square"|"disc">
..........................
</ul>

ELEMENT LI (List Item)
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value berisikan nilai nomor urutan dari attribute type.

Sintaks:
<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">
..........................
</li>

LATIHAN

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.

Latihan 1:
Menampilkan teks dengan daftar urut (element OL):

Matakuliah TKJ Semester 1:
1. Bahasa Inggris 1
2. Matematika 1
3. Jaringan Komputer 1
4. Konsep Teknologi Informasi
5. Keterampilan Komputer dan Pengelolaan Informasi
6. Perangkat Keras Komputer
7. Sistem Operasi

Nama file: latihan3_1.html

<html>
<head>
<title>Latihan3-1</title>
</head>
<body>
Matakuliah TKJ Semester 1:
<ol>
<li>Bahasa Inggris 1</li>
<li>Matematika 1</li>
<li>Jaringan Komputer 1</li>
<li>Konsep Teknologi Informasi</li>
<li>Keterampilan Komputer dan Pengelolaan Informasi</li>
<li>Perangkat Keras Komputer</li>
<li>Sistem Operasi</li>
</ol>
</body>
</html>

Latihan 2:
Menampilkan teks dengan daftar urut (element OL):

Matakuliah TKJ Semester 1:
a. Bahasa Inggris 1
b. Matematika 1
c. Jaringan Komputer 1
d. Konsep Teknologi Informasi
e. Keterampilan Komputer dan Pengelolaan Informasi
f. Perangkat Keras Komputer
g. Sistem Operasi

Nama file: latihan3_2.html

<html>
<head>
<title>Latihan3-2</title>
</head>
<body>
Matakuliah TKJ Semester 1:
<ol start="1" type="a">
<li>Bahasa Inggris 1</li>
<li>Matematika 1</li>
<li>Jaringan Komputer 1</li>
<li>Konsep Teknologi Informasi</li>
<li>Keterampilan Komputer dan Pengelolaan Informasi</li>
<li>Perangkat Keras Komputer</li>
<li>Sistem Operasi</li>
</ol>
</body>
</html>

Latihan 3:
Menampilkan teks dengan daftar urut (element OL):

I. Matakuliah TKJ Semester 1:
a. Bahasa Inggris 1
b. Matematika 1
c. Jaringan Komputer 1
d. Konsep Teknologi Informasi
e. Keterampilan Komputer dan Pengelolaan Informasi
f. Perangkat Keras Komputer
g. Sistem Operasi

Nama file: latihan3_3.html

<html>
<head>
<title>Latihan3-3</title>
</head>
<body>
<ol start="1" type="I">
<li>Matakuliah TKJ Semester 1:</li>
<ol start="1" type="a">
<li>Bahasa Inggris 1</li>
<li>Matematika 1</li>
<li>Jaringan Komputer 1</li>
<li>Konsep Teknologi Informasi</li>
<li>Keterampilan Komputer dan Pengelolaan Informasi</li>
<li>Perangkat Keras Komputer</li>
<li>Sistem Operasi</li>
</ol>
</ol>
</body>
</html>

Tugas tambahan:
Ubahlah tampilannya dalam format kombinasi ordered list dan unordered list

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.

LATIHAN

Tugas tambahan:
Ubahlah tampilannya dalam format kombinasi ordered list dan unordered list

2-HTML FORMAT TEKS ::

Unknown 8:27 PM No comments

:: 2-HTML FORMAT TEKS ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks.

MATERI:
Element BR(line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), Element U(underline), Element PRE(preformated text), Element CENTER, Element BASEFONT, Element FONT, Element HR(horizontal rule)

ELEMENT BR (Line Break)
Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.

Sintaks:
 

ELEMENT P (Paragraph)
Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag penutup sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf.
Element P mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").

Sintaks:

..........................


ELEMENT H1,H2,H3,H4,H5,H6 (Header)
Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi horizontal dari header (default: "left").

Sintaks:
<hx align="left"|"center"|"right">
..........................
</hx>

x : 1 ... 6

ELEMENT B (Bold)
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).

Sintaks:

..........................


ELEMENT I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).

Sintaks:

..........................


ELEMENT U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).

Sintaks:

..........................


ELEMENT PRE (Preformated text)
Element PRE berfungsi untuk menampilkan teks seperti apa adanya.

Sintaks:
<pre>
..........................
</pre>

ELEMENT CENTER
Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.

Sintaks:
<center>
..........................
</center>

ELEMENT BASEFONT
Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web browser. Attribute dari element ini adalah size yang merupakan ukuran huruf dengan nilai "1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya adalah "3" pixel. Element ini tidak mempunyai tag penutup.

Sintaks:
<basefont size="pixel">

ELEMENT FONT
Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute color untuk merubah warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan size untuk merubah ukuran huruf (pixel).

Sintaks:

..........................


ELEMENT HR (Horizontal Rule)
Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara horizontal ("left", "center", "right"), size untuk ukuran ketebalan garis ("pixel"), width untuk ukuran panjang garis ("persen"), dan noshade (garis solid).

Sintaks:
<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>

LATIHAN

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.

Latihan 1:
Menampilkan teks dengan ganti baris (element BR):

Belajar bahasa pemrograman web. Dengan materi dasar HTML. Dan JSP

Belajar bahasa pemrograman web.
Dengan materi dasar HTML.
Dan JSP.

Nama file: latihan2_1.html

<html>
<head>
<title>Latihan2-1</title>
</head>
<body>
Belajar bahasa pemgrograman web. Dengan mater dasar HTML. Dan JSP. 
 Belajar bahasa pemrograman web. Dengan materi dasar HTML. Dan JSP.
</body>
</html>

Latihan 2:
Menampilkan teks dalam bentuk paragraf (element P):

Tampilan teks sebelum paragraf.

Tampilan teks paragraf pertama.

Tampilan teks paragraf kedua.

Tampilan teks setelah paragraf.

Nama file: latihan2_2.html

<html>
<head>
<title>Latihan2-2</title>
</head>
<body>
Tampilan teks sebelum paragraf.
Tampilan teks paragraf pertama.
Tampilan teks paragraf kedua.
Tampilan teks setelah paragraf.
</body>
</html>

Tugas tambahan:
Gantilah setiap tag dengan element BR, dan lihat hasilnya.

Latihan 3:
Menampilkan posisi horizontal kelurusan paragraf:

Paragraf ini pada posisi rata kiri (default)
Paragraf ini pada posisi rata tengah
Paragraf ini pada posisi rata kanan
Paragraf ini pada posisi rata kiri

Nama file: latihan2_3.html

<html>
<head>
<title>Latihan2-3</title>
</head>
<body>
Paragraf ini pada posisi rata kiri (default)
Paragraf ini pada posisi rata tengah
Paragraf ini pada posisi rata kanan
Paragraf ini pada posisi rata kiri
</body>
</html>

Latihan 4:
Menampilkan teks sebagai header (element H):

Ini Heading-1

Ini Heading-2

Ini Heading-3

Ini Heading-4

Ini Heading-5

Ini Heading-6

Nama file: latihan2_4.html

<html>
<head>
<title>Latihan2-4</title>
</head>
<body>
<h1>Ini Heading-1</h1>
<h2>Ini Heading-2</h2>
<h3>Ini Heading-3</h3>
<h4>Ini Heading-4</h4>
<h5>Ini Heading-5</h5>
<h6>Ini Heading-6</h6>
</body>
</html>

Tugas tambahan:
Tempatkanlah tampilan isi element H3 di kanan dan H5 di tengah.

Latihan 5:
Menampilkan teks dalam format tebal, miring dan garis bawah:

Ini normal teks
Ini teks tercetak tebal (bold)
Ini teks tercetak miring (italic)
Ini teks tercetak garis bawah (underline)

Nama file: latihan2_5.html

<html>
<head>
<title>Latihan2-5</title>
</head>
<body>
Ini normal teks 
Ini teks tercetak tebal (bold) 
Ini teks tercetak miring (italic) 
Ini teks tercetak garis bawah (underline)
</body>
</html>

Tugas tambahan:
Buat teks tercetak miring dan tebal.

Latihan 6:
Menampilkan teks dalam bentuk apa adanya (element PRE):

Ini bentuk penulisan preformated text
apapun bentuknya tulisan ini akan ditampilkan
pada web browser
seperti apa adanya, alias yang ditulis

Nama file: latihan2_6.html

<html>
<head>
<title>Latihan2-6</title>
</head>
<body>
<pre>
Ini bentuk penulisan preformated text
apapun bentuknya tulisan ini akan ditampilkan
pada web browser
seperti apa adanya, alias yang ditulis
</pre>
</body>
</html>

Latihan 7:
Menampilkan teks pada posisi tengah jendela web browser (element CENTER):

Teks ini terletak di tengah layar web browser
dengan menggunakan element CENTER

Nama file: latihan2_7.html

<html>
<head>
<title>Latihan2-7</title>
</head>
<body>
<center>
Teks ini terletak di tengah layar web browser 
dengan menggunakan element CENTER
</center>
</body>
</html>

Latihan 8:
Menampilkan teks berdasarkan element BASEFONT:

Teks ini mempunyai size = 1
Teks ini mempunyai size = 2
Teks ini mempunyai size = 3
Teks ini mempunyai size = 4
Teks ini mempunyai size = 5
Teks ini mempunyai size = 6
Teks ini mempunyai size = 7

Nama file: latihan2_8.html

<html>
<head>
<title>Latihan2-8</title>
</head>
<body>
<basefont size="1">Teks ini mempunyai size=1 
<basefont size="2">Teks ini mempunyai size=2 
<basefont size="3">Teks ini mempunyai size=3 
<basefont size="4">Teks ini mempunyai size=4 
<basefont size="5">Teks ini mempunyai size=5 
<basefont size="6">Teks ini mempunyai size=6 
<basefont size="7">Teks ini mempunyai size=7
</body>
</html>

Latihan 9:
Menampilkan teks dengan menggunakan element FONT:

Teks dengan format color=fuchia; size=+2; face=verdana
Teks dengan format color=gray; size=6; face=algerian
Teks dengan format color=red; size=-1; face=impact

Nama file: latihan2_9.html

<html>
<head>
<title>Latihan2-9</title>
</head>
<body>

Teks dengan format color=fuchsia; size=+2; face=verdana 


Teks dengan format color=gray; size=6; face=algerian 


Teks dengan format color=red; size=-1; face=impact

</body>
</html>

Latihan 10:
Menampilkan garis horizontal menggunakan elemen HR:

Nama file: latihan2_10.html

<html>
<head>
<title>Latihan2-10</title>
</head>
<body>
<hr align="left" size="6" width="30%">
<hr align="left" size="6" width="30%" noshade>
</body>
</html>

Tugas tambahan:
Buatlah garis horizontal di bawah ini dengan size=5, align=center dengan urutan width 40%, 20%, 10%:

1-HTML DASAR ::

Unknown 8:26 PM No comments

:: 1-HTML DASAR ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML.

MATERI:
Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY.

STRUKTUR DASAR DOKUMEN HTML
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.

Struktur dasar dokumen HTML adalah sebagai berikut:

<html>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>
Disini penulisan informasi Web
</body>
</html>

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:

a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:

<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML

Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar

................

Contoh penulisan tag-tag yang salah

................

c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">

d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.

Sintaks:
<html>
..........
</html>

e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.

Sintaks:
<head>
...........
</head>

f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.

Sintaks:
<title>
.........
</title>

g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.

Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
..............
</body>

Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.

LATIHAN

Latihan 1:
Menampilkan teks:

Belajar bahasa pemrograman web ternyata mudah juga :)

Nama file: latihan1_1.html

<html>
<head>
<title>Latihan1-1</title>
</head>
<body>
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>

Tugas tambahan:
Gantilah teks tersebut dengan teks lainnya.

Latihan 2:
Merubah warna teks menjadi merah:

Belajar bahasa pemrograman web ternyata mudah juga :)

Nama file: latihan1_2.html

<html>
<head>
<title>Latihan1-2</title>
</head>
<body text="red">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>

Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.

Latihan 3:
Merubah warna background menjadi hitam.

Nama file: latihan1_3.html

<html>
<head>
<title>Latihan1-3</title>
</head>
<body text="red" bgcolor="black">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>

Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.

Latihan 4:
Merubah background dengan suatu gambar.

Nama file: latihan1_4.html

<html>
<head>
<title>Latihan1-4</title>
</head>
<body text="red" bgcolor="aqua" background="./images/image027.jpg">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>

catatan:
./images/ = nama direktori file gambar disimpan
image027.jpg = nama file gambar

Tugas tambahan:
Cobalah untuk file gambar: image050.jpg, image052.jpg, image058.jpg dan image060.jpg.

Tabel (table) HTML

Unknown 8:24 PM No comments

Tabel (table) HTML Sekilas tentang tabel. Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan. Cara membuat tabel. Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag
adalah untuk membuat tabel kemudian di ikuti dengan tag (table rows) adalah untuk membuat baris pada tabel kemudian tag

(table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

Cell 1 - Baris 1 Kolom 1	Cell 2 - Baris 1 Kolom 2
Cell 3 - Baris 2 Kolom 1	Cell 4 - Baris 2 Kolom 2
Cell 5 - Baris 3 Kolom 1	Cell 6 - Baris 3 Kolom 2

Hasil: Cell 1 – Baris 1 Kolom 1 Cell 2 – Baris 1 Kolom 2 Cell 3 – Baris 2 Kolom 1 Cell 4 – Baris 2 Kolom 2 Cell 5 – Baris 3 Kolom 1 Cell 6 – Baris 3 Kolom 2 Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag
. Mengatur lebar dan tinggi tabel. Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height. Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Hasil: Baris 1 Kolom 1 Baris 1 Kolom 1 Baris 2 Kolom 1 Baris 2 Kolom 2 Baris 3 Kolom 1 Baris 3 Kolom 2 Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut. Menggabungkan kolom pada tabel Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Hasil: Gabungan Kolom 1&2 pada Baris 1 Baris 2 Kolom 1 Baris 2 Kolom 2 Baris 3 Kolom 1 Baris 3 Kolom 2 Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
Gabungan Baris 1&2 pada Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Hasil: Gabungan Baris 1&2 pada Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 2 Baris 3 Kolom 1 Baris 3 Kolom 2 Mengatur jarak kolom pada tabel Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Hasil: Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Hasil: Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Membuat titel pada tabel. Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag

tepat setelah tag dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom. Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

Disini adalah titel tabel ini
Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Hasil: Disini adalah titel tabel ini Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Membuat background pada tabel Untuk membuat background pada tabel kita gunakan atribut style dengan properti background. Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Hasil: Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px. Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px. Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0. ...

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Hasil: Header Kolom 1 Header Kolom 2 Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 1 Baris 2 Kolom 2 Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.

gambar (image) HTML

Unknown 8:22 PM No comments

Gambar (image) HTML Dengan gambar atau image akan membuat website lebih menarik dan enak di pandang, tapi perlu diperhatikan bahwa semakin banyak gambar di website kita maka semakin lama juga waktu yang dibutuhkan untuk mengakses website kita. Format Gambar Untuk format gambar ada 3 macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF dan PNG bisa digunakan untuk membuat gambar yang transparan serta biasa juga digunakan untuk gambar yang warnanya minim seperti untuk logo, banner, icon, dsb, Gif bisa membuat gambar animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan warna yang memadai digunakan format JPG. Memasukkan gambar ke HTML Untuk memasukkan gambar ke dalam dokumen HTML digunakan elemen img di ikuti dengan src (source) sebagai sumber atau lokasi dari gambar.

Ketika memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting harus selalu disertakan dengan elemen img yaitu alt, width dan height. Alt (alternate) adalah sebagai teks alternatif yang ditampilkan oleh browser ketika gambar tidak dapat ditampilkan atau ditemukan sedangkan width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel(px).

Contoh:

Hasil: Gambar Avril Memposisikan Gambar Untuk memposisikan gambar ke kiri dan ke kanan digunakan atribut style dengan properti float di ikuti dengan nilai (value) left (kiri) atau right (kanan). Contoh membuat gambar disebelah kanan

Hasil: Gambar Avril Membuat gambar di tengah dokumen Untuk membuat gambar berada ditengah dokumen HTML kita harus memasukkan gambar tersebut di dalam blok elemen seperti p, div, table dsb. Kemudian kita masukkan atribut style dengan properti text-align kedalam elemen blok tersebut, dalam contoh kita akan menggunakan elemen div.

Hasil: Gambar Avril Membuat border gambar Untuk membuat border pada gambar anda dapat menambahkan atribut style dengan properti border dengan nilai dalam px atau jika ingin menghilangkan border anda cukup menuliskan style="border:none" Berikut adalah contoh gambar dengan border 4px warna hitam.

Hasil: Gambar Avril

Background HTML

Unknown 8:20 PM No comments

Background HTML Kalau sebelumnya kita menggunakan atribut background dan bgcolor dalam pelajaran HTML tentang Background HTML, sekarang kita akan belajar membuat latar belakang atau background tersebut dengan menggunakan atribut style. Untuk membuat background dengan warna di gunakan properti background-color. Membuat background di halaman website dengan warna: ... Contoh di dalam dokumen HTML:

Contoh membuat background warna dengan atribut style background-color.

Hasil: lihat Preview Contoh background di dalam tag HTML:

Paragraf dengan background aqua

Hasil: Paragraf dengan background aqua Untuk nilai dari properti background-color tersebut kita bisa menggunakan kode RGB, Hexadecimal maupun Nama Warna.

Warna background menggunakan kode RGB

Warna background menggunakan kode Hexadecimal

Warna background menggunakan Nama Warna

Hasil dari ketiga kode HTML diatas akan sama: Warna background menggunakan kode RGB Warna background menggunakan kode Hexadecimal Warna background menggunakan Nama Warna Klik link berikut untuk melihat kode hexadecimal dan nama warna, untuk RGB dapat menggunakan tool kode warna RGB. Untuk membuat background dengan gambar di gunakan properti background-image. Membuat background dengan gambar di dokumen HTML: ... background Sebagai contoh kita akan menggunakan gambar di samping (background.jpg) untuk membuat background di dokumen HTML, ukuran gambar tersebut adalah 100px X 100px :

Contoh membuat background gambar dengan atribut style background-image.

Hasil: lihat Preview Maka secara otomatis browser akan mengisi penuh halaman website dengan gambar tersebut secara berulang (repeat) baik secara vertikal maupun horizontal. Dengan adanya pengulangan ini maka dengan gambar ukuran 1 x 2px, hanya 2 titik (pixel) yaitu putih dan abu-abu kita dapat membuat background seperti berikut. Hasil: Lihat Preview Untuk pengaturan pengulangan tersebut dapat menggunakan properti background-repeat dengan nilai atau value: no-repeat, repeat, repeat-x dan repeat-y. Contoh jika kita ingin membuat pengulangan secara horizontal maka kita dapat menambah kode repeat-x ke dalam contoh diatas: ... Hasil: lihat Preview Sedangkan untuk pengulangan secara vertikal kita tambahkan kode repeat-y: ... Hasil: lihat Preview Anda bisa melakukan latihan selanjutnya dengan mengganti gambar dan nilainya. Untuk memposisikan background digunakan properti background-position dengan value top=atas, right=kanan, bottom=bawah left=kiri dan center=tengah atau dengan nilai x dan y. Sebagai contoh kita akan menggunakan gambar berikut yang berukuran 800px X 1px dengan nama bg-example.png. bg-example Kita akan membuat agar gambar tersebut berada tepat ditengah dokumen dengan pengulangan (repeated) secara vertikal. Hasil: lihat Preview

informasi

informasi berita terkini, teknologi, sosial, kebudayaan

8:29 PM

3-HTML DAFTAR URUTAN :

2-HTML FORMAT TEKS ::

Ini Heading-1