Belajar Script HTML bag 10

Font Stiyle

Salah satu tujuan perancangan halaman web adalah membuat halaman web yang menarik atau "eye catching". Untuk itu dalam suatu paragraph diperlukan suatu variasi huruf atau font style.
Berikut ini beberapa font style yang sering digunakan, antara lain :
Tag Style Keterangan
<b> Huruf tebal (bold)
<i> Huruf miring (italic)
<u> Huruf garis bawah (underline)
<code> Huruf seperti sans serif

Belajar Script HTML bag 9

Tag Font

Dalam mengatur layout sebuah halaman web yang berisi teks, pengaturan besarnya huruf, warna dan ukuran adalah hal yang sangat penting untuk dilakukan oleh seorang perancang web. Pengaturan ini dapat menggunakan tag Font <FONT> dengan sintaksis sebagai berikut :

<font face="nama_font" size="4" color="red">

Ukuran font dapat ditentukan dengan angka 1 sampai 7 dengan nilai default 2. Sedangkan warna dapat diganti dengan warna lain (lihat pada penjelasan tentang atribut warna).
Contoh penggunaan :

<font face="arial" size="5" color="blue">Teks arial biru ukuran 5 </font>
<font face="arial" size="3" color="green">Teks arial hijau ukuran 3</font>


Tampilan di browser :
Teks arial biru ukuran 5
Teks arial hijau ukuran 3

Belajar Script HTML bag 8

Tag Frame

Sistem navigasi sebuah situs web adalah salah satu sistem penunjang yang akan memberikan nilai tambah pada situs tersebut. Semakin sederhana dan mudah sistem navigasi akan semakin baik karena akan semakin memudahkan pengguna untuk menggunakan seluruh fasilitas dan layanan yang ditawarkan.
Untuk itu kita perlu membagi sebuah halaman web kedalam beberapa blok terpisah dan masing-masing blok tersebut diisi dengan halaman web lain. Misalnya kita ingin membagi dua kolom, kolom sebelah kiri untuk halaman navigasi dan halaman sebelah kanannya diisi dengan halaman sebenarnya.
Pembagian sebuah halaman web kedalam beberapa blok ini dapat dilakukan dengan tag Frame. Berikut ini sintaksis bentuk dasarnya :

<FRAMESET TYPE="XX,XX"> </FRAMESET>

Type dapat diganti dengan "Rows" atau "Cols". Cols akan membagi sebuah halaman web secara vertikal sedangkan Rows akan membagi halaman web secara horisontal.
"XX" diganti dengan proporsi lebar atau tinggi blok yang dibagi, dapat diisikan prosentase lebar layar maupun dalam satuan pixel. Ukuran untuk masing-masing bagian dipisahkan dengan tanda koma.
Untuk lebih jelasnya ikuti contoh berikut :
<frameset rows="25%, 75%">
</frameset> 
Contoh diatas berarti membagi dua halaman web secara horisontal, bagian atas memiliki tinggi 25% tinggi halaman web dan halaman web dibawahnya memiliki tinggi 75%.

Selanjutnya kita perlu mengisikan halaman-halaman web lain kedalam blok-blok yang sudah dibagi tadi yaitu dengan tag berikut ini :

<FRAME SRC="nama_halaman.html" NAME="nama_blok">

Untuk lebih jelasnya amati contoh berikut :

<frameset rows="25%, 75%">
<frame src="halaman1.html" name="blok1">
<frame src="halaman2.html" name="blok2">
</frameset> 

 
Salah satu kelebihan yag frame ini adalah dari masing-masing blok yang telah kita bagi tadi masih bisa kita bagi lagi menjadi beberapa blok lagi, sehingga dalam bentuk yang lebih kompleks, tag Frame menjadi :

<FRAMESET rows="15%,70%,15%">
  <FRAME SRC="homepage.htm" NAME="Frame1">
  <FRAMESET cols="15%,70%,15%">
    <FRAME SRC="menu.htm" NAME="Frame2">
    <FRAME SRC="menu2.htm" NAME="Frame3">
    <FRAME SRC="menu3.htm" NAME="Frame4">
  </FRAMESET>
  <FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET>
 
Untuk lebih memahami contoh-contoh penggunaan tag frame, amati beberapa contoh berikut....

Demonstration of tag Table

This is intended to be a tutorial by example of Tables. This covers most of the new tags in tables, though it doesn't necessarily show some of the really creative capabilities available in tables.

A basic 3x2 table

A B C
D E F
<table border>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>

Two demonstrations of rowspan

Item 1 Item 2 Item 3
Item 4 Item 5
<table border>
        <tr>
                <td>Item 1</td>
                <td rowspan=2>Item 2</td>
                <td>Item 3</td>
        </tr>
        <tr>
                <td>Item 4</td> <td>Item 5</td>
        </tr>
</table>
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7
<table border>
        <tr>
                <td rowspan=2>Item 1</td>
                <td>Item 2</td> <td>Item 3</td> <td>Item 4</td>
        </tr>
        <tr>
                <td>Item 5</td> <td>Item 6</td> <td>Item 7</td>
        </tr>
</table>

Demonstration of colspan

Item 1 Item 2
Item 3 Item 4 Item 5
<table border>
        <tr>
                <td>Item 1</td>
                <td colspan=2>Item 2</td>
        </tr>
        <tr>
                <td>Item 3</td> <td>Item 4</td> <td>Item 5</td>
        </tr>
</table>

Demonstration of headers, <th>

Head1 Head2 Head3
A B C
D E F
<table border>
        <tr>
                <th>Head1</th> <th>Head2</th> <th>Head3</th>
        </tr>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>

Demonstration of colspan and Headers

Head1 Head2
A B C D
E F G H
<table border>
        <tr>
                <th colspan=2>Head1</th>
                <th colspan=2>Head2</th>
        </tr>
        <tr>
                <td>A</td> <td>B</td> <td>C</td> <td>D</td> 
        </tr>
        <tr>    
                <td>E</td> <td>F</td> <td>G</td> <td>H</td> 
        </tr>
</table>

Demonstration of multiple headers, colspan

Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H
<table border>
        <tr>
                <th colspan=2>Head1</th>
                <th colspan=2>Head2</th>
        </tr>
        <tr>
                <th>Head 3</th> <th>Head 4</th> 
                <th>Head 5</th> <th>Head 6</th> 
        </tr>
        <tr>
                <td>A</td> <td>B</td> <td>C</td> <td>D</td> 
        </tr>
        <tr>
                <td>E</td> <td>F</td> <td>G</td> <td>H</td> 
        </tr>
</table>

Demonstration of side headers

Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<table border>
        <tr><th>Head1</th>
                <td>Item 1</td> <td>Item 2</td> <td>Item 3</td></tr>
        <tr><th>Head2</th>
                <td>Item 4</td> <td>Item 5</td> <td>Item 6</td></tr>
        <tr><th>Head3</th>
                <td>Item 7</td> <td>Item 8</td> <td>Item 9</td></tr>
</table>

Demonstration of side headers, rowspan

Head1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11
<table border>
        <tr><th rowspan=2>Head1</th>
            <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td>
        </tr>
        <tr><td>Item 5</td> <td>Item 6</td> <td>Item 7</td> <td>Item 8</td>
        </tr>
        <tr><th>Head2</th>
            <td>Item 9</td> <td>Item 10</td> <td>Item 3</td> <td>Item 11</td>
        </tr>
</table>

Sample table, using all of these



Average

Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002
<table border>
        <tr>    <td><th rowspan=2></th>
                <th colspan=2>Average</th></td>
        </tr>
        <tr>    <td><th>Height</th><th>Weight</th></td>
        </tr>
        <tr>    <th rowspan=2>Gender</th>
                <th>Males</th><td>1.9</td><td>0.003</td>
        </tr>
        <tr>    <th>Females</th><td>1.7</td><td>0.002</td>
        </tr>
</table>

Clever uses of rowspan/colspan

A 1 2
3 4
C D
<table border>
        <tr>
                <td align=center rowspan=2 colspan=2>A</td>
                <td>1</td>
                <td>2</td>
        </tr>
        <tr>
                <td>3</td>
                <td>4</td>
        </tr>
        <tr>
                <td align=center rowspan=2 colspan=2>C</td>
                <td align=center rowspan=2 colspan=2>D</td>
        </tr>
        <tr>
        </tr>
</table>

Adjusting margins and borders

A table without borders

Item 1 Item 2 Item 3
Item 4 Item 5
<table>
        <tr>    <td>Item 1</td> <td rowspan=2>Item 2</td> <td>Item 3</td> 
        </tr>
        <tr>    <td>Item 4</td> <td>Item 5</td> 
        </tr>
</table>

A table with a border of 10

Item 1 Item 2
Item 3 Item 4
<table border=10>
        <tr>    <td>Item 1</td> <td> Item 2</td>
        </tr>
        <tr>    <td>Item 3</td> <td>Item 4</td> 
        </tr>
</table>

cellpadding and cellspacing

A B C
D E F
<table border cellpadding=10 cellspacing=0>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>
A B C
D E F
<table border cellpadding=0 cellspacing=10>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>
A B C
D E F
<table border cellpadding=10 cellspacing=10>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>
A B C
D E F
<table border=5 cellpadding=10 cellspacing=10>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>

Alignments, Captions, Subtables

Demonstration of multiple lines in a table

January February March
This is cell 1 Cell 2 Another cell,
cell 3
Cell 4 and now this
is cell 5
Cell 6
<table border>
        <tr>
                <th>January</th>
                <th>February</th>
                <th>March</th>
        </tr>
        <tr>
                <td>This is cell 1</td>
                <td>Cell 2</td>
                <td>Another cell,<br> cell 3</td>
        </tr>
        <tr>
                <td>Cell 4</td>
                <td>and now this<br>is cell 5</td>
                <td>Cell 6</td>
        </tr>
</table>

align=left|right|center

can be applied to individual cells or whole rows
January February March
all aligned center Cell 2 Another cell,
cell 3
aligned right aligned to center default,
aligned left
<table border>
        <tr>
            <th>January</th>
            <th>February</th>
            <th>March</th>
        </tr>
        <tr align=center>
            <td>all aligned center</td>
            <td>Cell 2</td>
            <td>Another cell,<br> cell 3</td>
        </tr>
        <tr>
            <td align=right>aligned right</td>
            <td align=center>aligned to center</td>
            <td>default,<br>aligned left</td>
        </tr>
</table>

valign=top|bottom|middle

can be applied to individual cells or whole rows
January February March
all aligned to top and now this
is cell 2
Cell 3
aligned to the top aligned to the bottom default alignment,
center
<table border>
        <tr>
                <th>January</th>
                <th>February</th>
                <th>March</th>
        </tr>
        <tr valign=top>
            <td>all aligned to top</td>
            <td>and now this<br>is cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td valign=top>aligned to the top</td>
            <td valign=bottom>aligned to the bottom</td>
            <td>default alignment,<br>center</td>
        </tr>
</table>

caption=top|bottom

A top caption
January February March
This is cell 1 Cell 2 Another cell,
cell 3
<table border>
<caption align=top>A top caption</caption>
        <tr>
                <th>January</th>
                <th>February</th>
                <th>March</th>
        </tr>
        <tr>
                <td>This is cell 1</td>
                <td>Cell 2</td>
                <td>Another cell,<br> cell 3</td>
        </tr>
</table>
January February March
This is cell 1 Cell 2 Another cell,
cell 3
A bottom caption
<table border>
<caption align=bottom>A bottom caption</caption>
        <tr>
                <th>January</th>
                <th>February</th>
                <th>March</th>
        </tr>
        <tr>
                <td>This is cell 1</td>
                <td>Cell 2</td>
                <td>Another cell,<br> cell 3</td>
        </tr>
</table>

Nested Tables: Table ABCD is inside Table 123456


1 2

A B

C D
 

4 5 6
<table border>
        <tr> <!-- row 1, table 1 -->
                <td>1</td>
                <td>2</td>
                <td>3
                <table border>
                        <tr> <!-- row 1, table 2 -->
                                <td>A</td>
                                <td>B</td>
                        </tr>
                        <tr> <!-- row 2, table 2 -->
                                <td>C</td>
                                <td>D</td>
                        </tr>
                </table>
                </td>
        </tr>
        <tr> <!-- row 2, table 1 -->
                <td>4</td>
                <td>5</td>
                <td>6</td>
        </tr>
</table>

Table Widths

Basic 50% width

Width=50% Width=50%
3 4
<table border width="50%">
        <tr><td>Width=50%</td><td>Width=50%</td>
        </tr>
        <tr><td>3</td><td>4</td>
        </tr>
</table>
Item width affects cell size 2
3 4
<table border width="50%">
        <tr><td>Item width affects cell size</td><td>2</td>
        </tr>
        <tr><td>3</td><td>4</td>
        </tr>
</table>
width=100% This is item 2
3 4
<table border width="100%">
        <tr><td>width=100%</td><td>This is item 2</td>
        </tr>
        <tr><td>3</td><td>4</td>
        </tr>
</table>

Centering a table on a page

A B C
D E F
<center>
<table border width="50%">
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>
</center>

Table Width & Nested Tables

Item 1 Item 2
Item A Item B
 
Item 4
<table border width="50%">
        <tr><td>Item 1</td><td>Item 2</td>
        </tr>
        <tr><td>
            <table border width=100%>
                <tr><td>Item A</td><td>Item B</td>
                </tr>
            </table>
            </td>
            <td>Item 4</td>
        </tr>
</table>

height=15%

height=5% Item 2
3 4
<table border width="50%" height="15%">
        <tr><td>height=5%</td> <td>Item 2</td>
        </tr>
        <tr><td>3</td><td>4</td>
        </tr>
</table>

Colored Table Cells

Greetings
Stranger
<table align=center width=50% border=1>
<tr><td bgcolor=#ffdddd>Greetings</td></tr>
<tr><td bgcolor=#ccffff>Stranger</td></tr>
</table>

Belajar Script HTML bag 7

Tag Tabel

Seringkali informasi yang akan ditampilkan adalah informasi olahan yang berbentuk tabel, sehingga kitapun memerlukan format ini di dalam dokumen HTML. Format ini dapat diwujudkan dengan menggunakan tag tabel <tabel>. Sedikit berbeda dengan tag lainnya, tag tabel ini memerlukan tag lainnya untuk menampilkan data dalam bentuk tabulasi. Berikut ini uraiannya :
Tag Parent Fungsi
<table>
</table>
--- tag utama
<caption>
</caption>
<table> Menampilkan judul tabel
<tr></tr> <table> Tag baris
<th></th> <tr> Header table
<td></td> <tr> Tag sel-sel tabel

Berikut ini beberapa atribut tag tabel
Atribut Fungsi
bgcolor warna background
width, height lebar dan tinggi tabel (dalam % atau pixel)
cellspacing jarak antar cell
cellpadding jarak teks ke cell
border lebar garis batas, 0=tanpa garis batas

Berikut ini atribut tag-tag <th> dan <td>, bila disebutkan di tag <tr> maka atribut di tag <th> dan <td> diabaikan
Atribut Fungsi
bgcolor warna background
width, height lebar dan tinggi tabel (dalam % atau pixel)
align (left, right, center) pengaturan posisi horisontal isi sel, rata kanan/kiri/tengah
valign (top, bottom, middle) pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau tengah
colspan=n ekstensi (span) n kolom ke kanan
rospan=n ekstensi (span) n baris ke bawah
nowrap mematikan word wrapping


Contoh Tabel 1 :

<table width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="yellow">
<tr>
<th>sel 1</th>
<th>sel 2</th>
<th>sel 3</th>

</tr>
<tr>
<td align=left> sel 4</td>
<td align=center>sel 5</td>
<td align=right>sel 6</td>

</tr>
<tr bgcolor="orange">
<td width="100" height="75" valign=top>sel 7</td>
<td width="35%" height="75" valign=middle>sel 8</td>
<td height="75" valign=bottom>sel 9</td>

</tr>

</table>
 
sel 1 sel 2 sel 3
sel 4 sel 5 sel 6
sel 7 sel 8 sel 9

Contoh Tabel 2 :
<table width="100%" border="2" cellspacing="5" cellpadding="5" bgcolor="#9999CC">
<tr>
<td width="30%">&nbsp;</td>
<td colspan="3">colspan=3</td>

</tr>
<tr>
<td rowspan="4" bgcolor="#FFFF00">rowspan=4</td>
<td width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>

</tr>
<tr>
<td width="31%">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>

</tr>
</table>
colspan=3
rowspan=4


Contoh Tabel 3 :

Klik disini untuk melihat

Belajar Script HTML bag 6

Tag Hyperlink

Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan :

<A href="url_file_tujuan#section"> Teks hyperlink </A>

Contoh penggunaan :

<A href="tag_hyperlink.html#top">Tag Hyperlink</A>

Tampilan di browser menjadi :

Tag Hyperlink

Untuk membuat section dijelaskan di bagian bawah halaman ini.

Path Relatif dan Path Absolute
Bila file HTML tujuan berada domain name pada yang sama tetapi pada direktori yang tidak sama maka kita bisa menggunakan url relatif, yaitu path name relatif berdasarkan posisi file saat ini. Misalnya kita akan membuka file atas.html yang berada 2 tingkat diatasnya maka hyperlink-nya berbentuk seperti :
<a href="../../atas.html"> Keatas </a>

Bila file yang akan dikaitkan berada pada domain name yang berbeda dengan domain name file yang sekarang ini, maka kita harus menggunakan url lengkap file tujuan tersebut. Misalnya :

<a href="http://www.petra.ac.id">UK Petra</a>

Mailto
Kadang-kadang kita ingin memudahkan bagi pengguna untuk mengirimkan email ke suatu alamat email tertentu. Hal ini dapat dengan mudah dilakukan dengan tag hyperlink ini, yaitu dengan menambah "mailto" dan alamat email tujuan. Sistaksis penulisannya sebagai berikut :

<a href="mailto:saya@petra.com">Kirim email </a>

contoh :

<a href="mailto:duik@peter.petra.ac.id">Dwi Kristianto </a>

Tampilan di browser :

Dwi Kristianto

Anchor Name
Seringkali halaman web adalah halaman yang panjang dan selalu membukanya dari posisi awal akan sangat melelahkan bagi pengguna. Untuk itu akan lebih memudahkan bila kita langsung merujuk pada bagian tertentu sebuah halaman web. Caranya dengan menyisipkan Tag Anchor <a> dengan atribut "name" di bagian dokumen yang akan dituju.
Berikut ini sintaksisnya : 

<a name="nama_section"></a>

Untuk menggunakannya link yang akan merujuk ke bagian dokumen itu, ditambahkan '#nama_section" menjadi :

<a href="sebuah_halaman.html#nama_section">langsung ke nama section</a>

Belajar Script HTML bag 5

Tag Image

Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>. Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd, dan sebagainya. Pada umumnya, perancang web hanya menggunakan kombinasi dari tiga format file gambar saja yaitu jpeg, gif dan psd. Sintaksis: 

<IMG src="url_file" width="img_width" height="img_height" vspace="10" hspace="10" alt="alt_teks">

Contoh penggunaan :

<img src="/~webs/images/logo.gif" width="200" height="200" vspace="20" hspace="20" alt="logo halal mui">


Ini adalah teks setelah gambar logo halal mui.
Animasi
Untuk menampilkan animasi file GIF, penggunaannya sama seperti file gambar biasa (lihat contoh penggunaan diatas).

Belajar Script HTML bag 4

Tag List dan Tag Alignment

Tag List.
HTML mendukung beberapa format list, yaitu Unnumbered List dan Numbered List.
1. Unnumbered List
Unnumbered List adalah list yang menggunakan bullet sebagai tanda point.
Contoh sintaksis :

<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>


Hasil render di browser :
  • apples
  • bananas
  • grapefruit

2. Numbered List
List yang menggunakan angka urut sebagai tanda point. Contoh sintaksis :

<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>


Tampilan di browser :
  1. oranges
  2. peaches
  3. grapes
Tag Alignment.
Pengaturan posisi horisontal teks juga menentukan kemudahan bagi pengguna untuk membaca dan mengikuti informasi yang dihasilkan. Pengaturan posisi horisontal teks dapat menggunakan tag Alignment <DIV> dengan sintaksi sebagai berikut :
<DIV align="left/right/center"><>
Contoh penggunaan :

<div align=left>Teks rata kiri</div>
<div align=right>Teks rata kanan</div>
<div align=center>Teks rata tengah</div>



Tampilan di browser :

Teks rata kiri
Teks rata kanan
Teks rata tengah

Belajar Script HTML bag 3

Tag Tunggal, Heading, Paragrap, dan break

Tag Tunggal

Secara umum, tag HTML adalah tag-tag yang berpasangan. Akan tetapi, ada beberapa tag yang tidak berpasangan, misalnya :
  • tag <HR>
  • tag <BR>
  • tag <P>
tag <P> sebenarnya adalah tag yang berpasangan tetapi seringkali tag penutup tidak dicantumkan oleh banyak perancang web.
tag <HR> berfungsi untuk memberikan garis berikut

tag <BR> berfungsi untuk memulai baris baru, misalnya :

Ini adalah baris pertama
Ini adalah baris kedua dengan tag <br>
Heading
Tag Heading ini diperlukan sebagai judul dalam sebuah paragraph, ada 6 (enam) level heading yang disediakan dalam format HTML. Berikut ini sintaksisnya :

<Hn> Teks Heading </Hn>

huruf n diganti dengan angka 1 sampai 6 sesuai dengan level yang dikehendaki.
Paragraph
Jika dokumen HTML berisi teks yang cukup panjang maka sangat diperlukan untuk membaginya kedalam beberapa paragraph untuk memudahkan pembacaan oleh pengguna. Pembentukan elemen paragraph ini menggunakan sintaksis :

<p>Isi teks sebuah paragraph </p>

tag penutup </p> boleh dituliskan boleh tidak, akan tetapi sebaiknya dituliskan untuk mengetahui berakhirnya sebuah paragraf.
Break
Kadangkala kita memerlukan untuk menulis di baris yang baru dalam sebuah paragraf yang sama. Untuk itu kita perlu menggunakan tag line break ini. Tag Break adalah tag tunggal sehingga tidak memiliki tag penutup. Sintaksis tag Break berupa :
<BR>

Belajar Script HTML bag 2

Tag Meta dan Tag Body

1. Tag Meta
Seperti telah dijelaskan sebelumnya, tag-tag pada elemen HEAD tidak akan ditampilkan oleh web browser, tetapi tag-tag pada elemen ini berfungsi untuk memberikan informasi mengenai halaman web dibawahnya.
Di elemen Head ada beberapa tag-tag Meta yang bisa digunakan, tetapi kita akan membahas tiga tag yang cukup penting, yaitu tag meta author, description dan keyword. Tag-tag meta ini tidak memiliki tag penutup seperti tag-tag di elemen body pada umumnya.
Tag Meta Auhtor
Tag ini berfungsi untuk menjelaskan perancang halaman web. Contoh :
<meta name="Author" content="Nama perancang ">
Tag Meta Description
Tag meta ini berfungsi saat kita menggunakan search engine yang akan mengindex website secara otomatis. Program di search engine ini akan mencari deskripsi di website kita dan akan mencarinya di tag meta ini. Contoh :
<meta name="Description" content="Deskripsi website ">
Tag Meta Keyword
Tag ini berfungsi untuk search engine yang bertipe auto robot yang secara otomatis akan mencari kata-kata di tag ini dan meletakkan di database mereka. Bila seseorang mencari dengan kata-kata yang terdapat dalam tag meta ini maka website kita akan termasuk dalam salah satu hasil pencarian. Contoh :
<meta name="Keywords" content="personal">

Berikut ini komposisi ketiganya dalam elemen Head sebuah dokumen HTML :
 
<html>
<head>
<title>Halamanku</title>
<meta name="Author" content="Nama Perancang">
<meta name="Description" content="Deskripsi Website">
<meta name="Keywords" content="personal">
</head>
<body>
contoh Meta Tags 
</body>
</html>
 
2. Tag Body 
Tag Body adalah tag berpasangan dan seluruh content document diletakkan diantaranya. Dalam bentuk yang paling sederhana memiliki format sebagai berikut :

<BODY> </BODY>

Tetapi sebenarnya format tag Body lebih kompleks lagi, karena beberapa setting dokumen kita didalam tag Body ini. Amati contoh berikut :

<BODY BGCOLOR=white TEXT=black
LINK=blue ALINK=green VLINK=red>
</BODY>

Diperlihatkan di contoh, bahwa tag Body memiliki setting tambahan berupa atribut dan value, dengan format sebagai berikut :

<ELEMENT ATTRIBUTE=value>

Jadi kalau kita lihat kembali contoh diatas maka, tag Body adalah elemen, sementara BGCOLOR, TEXT, LINK, ALINK dan VLINK adalah atribut. white, black, blue, green dan red adalah value.
Kesimpulannya, tag menjelaskan arti elemen secara umum sedangkan atribut menjelaskan lebih detail. Untuk lebih jelasnya, mari kita pelajari arti masing-masing atribut tersebut.

BGCOLOR=white

Atribut ini menjelaskan warna background untuk seluruh dokumen. Warna putih (white) dapat diganti dengan red, blue, green, black atau warna yang lain. Bisa juga menggunakan color code yang akan dibahas kemudian.

TEXT=black

Atribut ini mengatur warna teks di halaman web dan warna hitam (black) juga bisa digantikan dengan warna lain.

LINK=blue

Ini adalah warna hyperlink sebelum di-click. Sebaiknya memang warna hyperlink berbeda dengan warna teks untuk memudahkan pengguna.

ALINK=purple

Atribut ini mengeset warna link saat akan di-click (didekati dengan mouse).

VLINK=red

Atribut ini mengeset warna link setelah sebuah link dikunjungi.
Background pada tag Body
Salah satu atribut penting di tag Body adalah BACKGROUND. Atribut ini berfungsi untuk memberikan tampilan latar belakang sebuah gambar dan atribut ini akan menimpa atribut BGCOLOR. Untuk dapat menggunakannya kita harus tahu dimanakah letak file gambar yang akan kita gunakan. Untuk lebih jelasnya amati contoh berikut :

<BODY BGCOLOR=white TEXT=black
LINK=blue ALINK=green VLINK=red
BACKGROUND="/~webs/images/walls1.png">
</BODY>

Jangan lupa untuk menambahkan tanda kutip diantara alamat file gambar yang akan digunakan.
 
 

Belajar Script HTML bag 1

Setelah kita memahami apa itu HTML dan apa itu tag HTML. Sekarang mari kita mulai coba menylis  dan menerapkannya. Dan untuk tidak menyulitkan dalam memahaminya, disini kuta akan mempelajarinya tahap demi tahap.
Sebaiknya seluruh tag yang digunakan dalam sebuah halaman web menggunakan standard HTML tertentu. Untuk saat ini versi terakhir standard HTML adalahHTML 4.0.
Dokumen HTML terbagi dalam dua bagian besar yaitu bagian head dan bagian body. 
Bagian head berfungsi untuk memberikan informasi-informasi penting tentang dokumen HTML tersebut dan informasi tersebut tidak ditampilkan di layar monitor. 
Sementara itu, bagian body adalah berisi semua instruksi untuk mengatur seluruh tampilan halaman web di web browser dan informasi lain yang tidak termasuk dalam bagian head. 
Berikut ini bentuk paling sederhana sebuah halaman web :
  <html>
  <head>
  <title>Halaman sederhana...</title>
  <!-- bagian header berisi informasi tambaha yang 
       menjelaskan dokumen ini dan 
       tidak ditampilkan -->
  </head>
  <body>
  <!-- semua instruksi untuk mengatur tampilan -->
  <h3> Halaman web sederhana... </h3>
  </body>
  </html>
 
Simpan file pada localdost file komputer anda dan lihat hasil yang di tampilkan.
Selanjutnya silahkan klik Belajar Script HTML bag 2

Apa Itu Tag HTML ?

Saat web browser menampilkan sebuah halaman web, web browser membaca halaman web tersebut dari sebuah file teks dan kemudian mencari kode-kode special (dalam hal ini adalah tag HTML) yang ditandai dengan karakter "<" dan ">".
Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Format umum tag HTML adalah :
<nama_tag> Teks yang akan ditampilkan </nama_tag>
Sebuah contoh, misalnya judul halaman ini menggunakan tag header : 
<h3> Apa itu tag HTML ? </h3>
Tag tersebut akan memberikan informasi kepada web browser untuk menampilkan teks "Apa itu tag HTML ?" dengan style header level 3. Tag HTML dapat menginstruksikan web browser untuk menebalkan sebuah teks (bold), menampilkan dengan format miring/italic, membuatnya sebagai sebuah header dengan level tertentu, atau membuatnya sebagai sebuah hyperlink ke halaman web yang lain.
Sebuah tag penutup </nama_tag> selalu diberikan karakter "/", yang berfungsi untuk memberhentikan proses tagging kepada web browser. Banyak tag HTML yang selalu berpasangan dengan cara seperti ini. Bila kita lupa memberikan tag penutup maka web browser akan menganggap bahwa tag tersebbut berlaku untuk keseluruhan dokumen dan hasil tampilan halaman web tersebut tidak seperti yang kita inginkan.
Penulisan tag-tag HTML tidak memperhatikan penggunaan huruf (case in-sensitive), apakah menggunakan huruf besar atau huruf kecil, akan menghasilkan tampilan yang sama.
Tidak seperti di bahasa pemrograman, kesalahan akibat peletakan atau penggunaan tag HTML tidak akan mengakibatkan sistem komputer menjadi hang atau rusak. Kesalahan tersebut hanya akan berakibat pada tampilan halaman web tersebut.
Web browser memang sengaja dirancang dengan kemampuan mengenali dan melaksanakan 'hanya' beberapa tag HTML dari keseluruhan tag standard W3C. Bila ada tag HTML yang tidak diketahui dalam halaman web yang sedang diproses, web browser akan mengabaikannya seakan-akan tag tersebut tidak ada.
Contoh : <tagsaya><h3>Apa itu tag HTML ? </h3></tagsaya>
akan menampilkan tampilan yang sama dengan <h3>Apa itu tag HTML ? </h3>. Jadi tag <tagsaya> dan </tagsaya> sama sekali diabaikan oleh web browser.

Apa Itu HTML ?

HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.
File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara lain : Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML ini juga bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file tersebut disimpan dengan format text-only.
Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun saat pembuatannya menggunakan satu OS tertentu saja.

Cinta yang tulus

Cinta
Cinta membuat orang tertawa
Cinta membuat orang menangis
Cinta juga membuat orang gembira, bersedih, menyesal, merajuk, bahkan putus asa
Semua karena cinta...
Cinta yang tulus suci hanya karena Allah semata
Cinta yang tulus tidak pernah berharap harus dibalas
Cinta yang tulus selalu ingin melihat yang dicintai bahagia, dengan segala pengorbanannya
Cinta yang tulus akan ikhlas menerima semuanya, siapapun dia, seperti apa dia
Cinta yang tulus tak memandang cantik tampan keriput peot rupanya
Cinta yang tulus hanya ingin berbuat untuk yang dicintai tanpa meminta untuk diberi
Cinta yang tulus siap menerima kecewa demi bahagianya yang di cintai
Cinta yang tulus aku bingung apa lagi... hehe
Cinta itu buta katanya..
Aku ikhlas menerima keputusanmu,
Karna aku hanya ingin melihat kau bahagia sayang, bersama siapapun dirimu.
Karna aku menyayangimu sepenuh hatiku
Karna aku menyayangimu dengan ikhlasku
Karna aku menyayangimu tuk mencari ridho Allah semata..
Karna aku tidak bisa bicara lagi..
Aku cinta 
Allahu akbar..!
.............
...

Silaturrahmi adalah ibadah.

FirmanNya,

فَهَلْ عَسَيْتُمْ إِن تَوَلَّيْتُمْ أَن تُفْسِدُوا فِي اْلأَرْضِ وَتُقَطِّعُوا أَرْحَامَكُمْ أُوْلَئِكَ الَّذِينَ لَعَنَهُمُ اللهُ فَأَصَمَّهُمْ وَأَعْمَى أَبْصَارَهُمْ
Artinya: “Maka apakah kiranya jika kamu berkuasa kamu akan membuat kerusakan di muka bumi dan memutuskan hubungan kekeluargaan ? Mereka itulah orang-orang yang dilaknati Allah dan ditulikanNya telinga mereka, dan dibutakanNya penglihatan mereka.” (QS Muhammad 47:22-23).

Sabda Rasulullah Shallallahu’alahi Wasallam ,

مَنْ أَحَبَّ أَنْ يُبْسَطَ لَهُ فِي رِزْقِهِ وَأَنْ يُنْسَأَ لَهُ فِي أَثَرِهِ فَلْيَصِلْ رَحِمَهُ
Artinya: “Barangsiapa yang senang untuk dilapangkan rizkinya dan diakhirkan ajalnya (dipanjangkan umurnya), maka hendaklah ia menyambung (tali) silaturahim.”

Silaturahmi merupakan satu ibadah yang sangat agung, mudah dilaksanakan dan membawa keberkahan yang besar. Namun banyak orang yang mengabaikannya, seakan hal ini tidaklah penting. Sebagai kaum muslimin hendaknya mampu mengedapankan hal ini. Tidak melalaikan ataupun melupakannya. Sehingga dapat menyisihkan waktunya untuk melaksanakan amalan ini. Bukankah silaturahmi merupakan satu kebutuhan yang dituntut fitrah manusia? Karena dapat menyempurnakan rasa cinta dan interaksi sosial antar umat manusia. Silaturahmi juga merupakan dalil dan tanda kedermawanan serta ketinggian akhlak seseorang.
Pererat tali silaturrahmi sesama keluarga muslim. Jangan nodahi ibadah silaturrahmi. Karena ini anjuran Tuhan yang Esa.
Allahu Akbar..

Istri-istri Nabi Muhammad saw

Khadijah binti Khuwailid

Ia merupakan isteri Nabi Muhammad yang pertama. Sebelum menikah dengan Nabi, ia pernah menjadi isteri dari Atiq bin Abid dan Abu Halah bin Malik dan telah melahirkan empat orang anak, dua dengan suaminya yang bernama Atiq, yaitu Abdullah dan Jariyah, dan dua dengan suaminya Abu Halah yaitu Hindun dan Zainab.
Berbagai riwayat memaparkan bahwa saat Muhammad s.a.w. menikah dengan Khadijah, umur Khadijah berusia 40 tahun sedangkan Nabi hanya berumur 25 tahun. Tetapi menurut Ibnu Katsir, seorang tokoh dalam bidang tafsir, hadis dan sejarah, mereka menikah dalam usia yang sebaya. Nabi Muhammad s.a.w. bersama dengannya sebagai suami isteri selama 25 tahun yaitu 15 tahun sebelum menerima wahyu pertama dan 10 tahun setelahnya hingga wafatnya Khadijah, kira-kira 3 tahun sebelum hijrah ke Madinah. Khadijah wafat saat ia berusia 50 tahun.
Ia merupakan isteri nabi Muhammad s.a.w. yang tidak pernah dimadu, karena semua isterinya yang dimadu dinikahi setelah wafatnya Khadijah. Di samping itu, semua anak Nabi kecuali Ibrahim adalah anak kandung Khadijah.
Maskawin dari nabi Muhammad s.a.w. sebanyak 20 bakrah dan upacara perkawinan diadakan oleh ayahnya Khuwailid. Riwayat lain menyatakan, upacara itu dilakukan oleh saudaranya Amr bin Khuwailid.
Pernikahannya dengan Khadijah menghasilkan keturunan hanya enam orang, yaitu: Al Qasim, Zainab, Ruqayyah, Ummu Kultsum, Fatimah, dan Abdullah.
Al Qosim mendapat julukan Abul Qosim, sedangkan Abdullah mempunyai julukan at Thoyib at Thohir yang berarti "Yang Bagus dan Lagi Suci".

Sawdah binti Zam'ah

Nabi menikah dengan Sawdah setelah wafatnya Khadijah dalam bulan itu juga. Sawdah adalah seorang janda tua. Suami pertamanya ialah al-Sakran bin Amr. Sawdah dan suaminya al-Sakran adalah di antara mereka yang pernah berhijrah ke Habsyah. Saat suaminya meninggal dunia setelah pulang dari Habsyah, maka Rasulullah telah mengambilnya menjadi isteri untuk memberi perlindungan kepadanya dan memberi penghargaan yang tinggi kepada suaminya.
Acara pernikahan dilakukan oleh Salit bin Amr. Riwayat lain menyatakan upacara dilakukan oleh Abu Hatib bin Amr. Maskawinnya ialah 400 dirham.

Aisyah binti Abu Bakar

Aisyah adalah satu-satunya isteri Muhammad yang masih gadis pada saat dinikahi. Aisyah dinikahkan pada tahun 620 M. Akad nikah diadakan di Mekkah sebelum Hijrah, tetapi setelah wafatnya Khadijah dan setelah Muhammad menikah dengan Saudah. Upacara dilakukan oleh ayahnya Abu Bakar dengan maskawin 400 dirham.
Hadits mengenai umur Aisyah tatkala dinikahkan adalah problematis. Hisyam bin ‘Urwah adalah satu-satunya yang mengabarkan tentang umur pernikahan Aisyah, yang didengarnya dari ayahnya. Bahkan Abu Hurairah ataupun Malik bin Anas tidak pernah mengabarkannya. Beberapa riwayat yang termaktub dalam buku-buku hadits berasal hanya dari Hisyam sendiri, dan hadits ini dianggap dhaif.[rujukan?] Hisyam mengutarakan hadits tersebut tatkala telah bermukim di Irak, dan ia pindah ke negeri itu dalam umur 71 tahun.
Hisyam bin ‘Urwah menyatakan bahwa Aisyah dinikahkan ketika berumur 6 tahun. Muhammad tidak bersama dengannya sebagai suami-isteri melainkan setelah berhijrah ke Madinah. Ketika itu, Aisyah berumur 9 tahun sementara nabi Muhammad berumur 53 tahun. Mengenai hal ini Ya’qub bin Syaibah berkata: “Yang dituturkan oleh Hisyam sangat terpecaya, kecuali yang disebutkannya tatkala ia sudah pindah ke Irak.” Ibnu Syaibah menambahkan bahwa Malik bin Anas menolak penuturan Hisyam yang dilaporkan oleh penduduk Irak.[1] Dalam buku tentang sketsa kehidupan para perawi hadits, tersebut bahwa saat Hisyam berusia lanjut ingatannya sangat menurun.[2]
Menurut Tabari, keempat anak Abu Bakar (termasuk Aisyah) dilahirkan oleh isterinya pada zaman Jahiliyah, artinya sebelum 610 M.[3] Apabila Aisyah dinikahkan sebelum 620 M, maka ia dinikahkan pada umur di atas 10 tahun dan hidup sebagai suami-isteri dengan Muhammad dalam umur di atas 13 tahun. Menurut Abd alRahman bin Abi Zannad: “Asmah 10 tahun lebih tua dari Aisyah.”[4] Menurut Ibnu Hajar al-'Asqalani, Asmah hidup hingga usia 100 tahun dan meninggal tahun 73 atau 74 Hijriyah.[5] Apabila Asmah meninggal dalam usia 100 tahun dan meninggal dalam tahun 73 atau 74 Hijriyah, maka Asma berumur 27 atau 28 tahun pada waktu Hijrah, sehingga Aisyah berumur (27 atau 28) - 10 = 17 atau 18 tahun pada waktu Hijrah. Itu berarti Aisyah mulai hidup berumah tangga dengan Muhammad pada waktu berumur 19 atau 20 tahun.

Hafshah binti Umar bin al-Khattab

Hafsah seorang janda. Suami pertamanya Khunais bin Hudhafah al-Sahmiy yang meninggal dunia saat Perang Badar. Ayahnya Umar meminta Abu Bakar menikah dengan Hafsah, tetapi Abu Bakar tidak menyatakan persetujuan apapun dan Umar mengadu kepada nabi Muhammad. Kemudian rasulullah mengambil Hafsah sebagai isteri. Hafsah Binti Umar (wafat 45 H)
Hafshah binti Umar bin Khaththab adalah putri seorang laki-laki yang terbaik dan mengetahui hak-hak Allah dan kaum muslimin. Umar bin Khaththab adalah seorang penguasa yang adil dan memiliki hati yang sangat khusyuk. Pernikahan Rasulullah . dengan Hafshah merupakan bukti cinta kasihnya kepada mukminah yang telah menjanda setelah ditinggalkan suaminya, Khunais bin Hudzafah as-Sahami, yang berjihad di jalan Allah, pernah berhijrah ke Habasyah, kemudian ke Madinah, dan gugur dalam Perang Badar. Setelah suami anaknya meninggal, dengan perasaan sedih, Urnar menghadap Rasulullah untuk mengabarkan nasib anaknya yang menjanda. Ketika itu Hafshah berusia delapan belas tahun. Mendengar penuturan Umar, Rasulullah memberinya kabar gembira dengan mengatakan bahwa ia bersedia menikahi Hafshah.
Jika kita menyebut nama Hafshah, ingatan kita akan tertuju pada jasa-jasanya yang besar terhadap kaum muslimin saat itu. Dialah istri Nabi yang pertama kali menyimpan Al-Qur’an dalam bentuk tulisan pada kulit, tulang, dan pelepah kurma, hingga kemudian menjadi sebuah kitab yang sangat agung.

Hindun binti Abi Umayyah (Ummu Salamah)

Salamah seorang janda tua mempunyai 4 anak dengan suami pertama yang bernama Abdullah bin Abd al-Asad. Suaminya syahid dalam Perang Uhud dan saudara sepupunya turut syahid pula dalam perang itu lalu nabi Muhammad melamarnya. Mulanya lamaran ditolak karena menyadari usia tuanya. Alasan umur turut digunakannya ketika menolak lamaran Abu Bakar dan Umar al Khattab.
Lamaran kali kedua nabi Muhammad diterimanya dengan maskawin sebuah tilam, mangkuk dari sebuah pengisar tepung.

Ramlah binti Abu Sufyan (Ummu Habibah)

Ummu Habibah seorang janda. Suami pertamanya Ubaidillah bin Jahsyin al-Asadiy. Ummu Habibah dan suaminya Ubaidullah pernah berhijrah ke Habsyah. Ubaidullah meninggal dunia ketika di rantau dan Ummu Habibah yang berada di Habsyah kehilangan tempat bergantung.
Melalui al Najashi, nabi Muhammad melamar Ummu Habibah dan upacara pernikahan dilakukan oleh Khalid bin Said al-As dengan maskawin 400 dirham, dibayar oleh al Najashi bagi pihak nabi.

Juwayriyah (Barrah) binti Harits

Ayah Juwairiyah ialah ketua kelompok Bani Mustaliq yang telah mengumpulkan bala tentaranya untuk memerangi nabi Muhammad dalam Perang al-Muraisi'.
Setelah Bani al-Mustaliq tewas dan Barrah ditawan oleh Tsabit bin Qais bin al-Syammas al-Ansariy. Tsabit hendak dimukatabah dengan 9 tahil emas, dan Barrah pun mengadu kepada nabi.
Rasulullah bersedia membayar mukatabah tersebut, kemudian menikahinya.

Shafiyah binti Huyay

Shafiyah anak dari Huyay, ketua suku Bani Nadhir, yaitu salah satu Bani Israel yang berdiam di sekitar Madinah. Dalam Perang Khaibar, Shafiyah dan suaminya Kinanah bin al-Rabi telah tertawan. Dalam satu perundingan setelah dibebaskan, Safiyah memilih untuk menjadi isteri nabi Muhamad. Sofiah binti Huyai bin Akhtab (wafat 50 H).
Shafiyah memiliki kulit yang sangat putih dan memiliki paras cantik, menurut Ummu Sinan Al-Aslamiyah, sehingga membuat cemburu istri-istri Muhammad yang lain. Bahkan ada istri Muhammad dengan nada mengejek, mereka mengatakan bahwa mereka adalah wanita-wanita Quraisy, wanita-wanita Arab sedangkan dirinya adalah wanita asing (Yahudi). Bahkan suatu ketika Hafshah sampai mengeluarkan lisan kata-kata, ”Anak seorang Yahudi” hingga menyebabkan Shafiyah menangis. Muhammad kemudian bersabda, “Sesungguhnya engkau adalah seorang putri seorang nabi dan pamanmu adalah seorang nabi, suamimu pun juga seorang nabi lantas dengan alasan apa dia mengejekmu?” Kemudian Muhammad bersabda kepada Hafshah, “Bertakwalah kepada Allah wahai Hafshah!” Selanjutnya manakala dia mendengar ejekan dari istri-istri nabi yang lain maka diapun berkata, “Bagaimana bisa kalian lebih baik dariku, padahal suamiku adalah Muhammad, ayahku (leluhur) adalah Harun dan pamanku adalah Musa?”[6] Shafiyah wafat tatkala berumur sekitar 50 tahun, ketika masa pemerintahan Mu'awiyah.

Zaynab binti Jahsy

Zaynab merupakan isteri Zaid bin Haritsah, yang pernah menjadi budak dan kemudian menjadi anak angkat nabi Muhammad s.a.w. setelah dia dimerdekakan.
Hubungan suami isteri antara Zainah dan Zaid tidak bahagia karena Zainab dari keturunan mulia, tidak mudah patuh dan tidak setaraf dengan Zaid. Zaid telah menceraikannya walaupun telah dinasihati oleh nabi Muhammad s.a.w..
Upacara pernikahan dilakukan oleh Abbas bin Abdul-Muththalib dengan maskawin 400 dirham, dibayar bagi pihak nabi Muhammad s.a.w.

Zaynab binti Khuzaymah

Zaynab putri Khuzaymah bin al-Harits bin Abdullah bin Amr bin Abdu Manaf bin Hilal bin Amir bin Sha’sha’a bin Muawiyah. Dijuluki “Ibu orang-orang miskin” karena kedermawanannya terhadap orang-orang miskin. Sebelumnya menikah dengan Muhammad, ia adalah istri dari Abdullah bin Jahsy. Ada riwayat yang mengatakan ia istri Abdu Thufail bin al-Harits, tetapi pendapat pertama adalah yang sahih. Ia dinikahi oleh Muhammad pada tahun ke 3 H dan hidup bersamanya selama hanya dua atau tiga bulan., karena Zainab binti Khuzaimah meninggal dunia sewaktu Muhammad masih hidup.

Maymunah binti al-Harits

Maymunah binti al-Harits bin Hazn bin Bujair bin al-Harm bin Ruwaibah bin Abdullah bin Hilal bin Amir bin Sha’sha’a bin Muawiyah bibi dari Khalid bin Walid dab Abdullah bin Abbas. Rasulullah saw menikahinya di tempat yang bernama Sarif suatu tempat mata air yang berada sembilan mil dari kota Mekah. Ia adalah wanita terakhir yang dinikahi oleh Muhammad. Wafat di Sarif pada tahun 63 H.

Maria al-Qabtiyya

Mariah al-Qibthiyah ialah satu-satunya istri Nabi yang berasal dari Mesir. Ia seorang mantan budak Nabi yang telah dinikahi dan satu-satunya pula yang dengannya Nabi memperoleh anak selain Khadijah yakni Ibrahim namun meninggal dalam usia 4 tahun. Mariyah al-Qibtiyah wafat pada 16H/637 M.
Seorang wanita asal Mesir yang dihadiahkan oleh Muqauqis, penguasa Mesir kepada Rasulullah tahun 7 H. Setelah dimerdekakan lalu dinikahi oleh Rasulullah dan mendapat seorang putra bernama Ibrahim. Sepeninggal Rasulullah dia dibiayai oleh Abu Bakar kemudian Umar dan meninggal pada masa kekhalifahan Umar.
Seperti halnya Sayyidah Raihanah binti Zaid, Mariyah al-Qibtiyah adalah teman (stlh dibebaskan Rasulullah) yang kemudian ia nikahi. Rasulullah memperlakukan Mariyah sebagaimana ia memperlakukan istri-istrinya yang lainnya. Abu Bakar dan Umar pun memperlakukan Mariyah layaknya seorang Ummul-Mukminin. Dia adalah istri Rasulullah satu-satunya yang melahirkan seorang putra, Ibrahim, setelah Khadijah.
Allah menghendaki Mariyah al-Qibtiyah melahirkan seorang putra Rasulullah setelah Khadijah. Betapa gembiranya Rasulullah mendengar berita kehamilan Mariyah, terlebih setelah putra-putrinya, yaitu Abdullah, Qasim, dan Ruqayah meninggal dunia.
Mariyah mengandung setelah setahun tiba di Madinah. Kehamilannya membuat istri-istri Rasul cemburu karena telah beberapa tahun mereka menikah, namun tidak kunjung dikaruniai seorang anak pun. Rasulullah menjaga kandungan istrinya dengan sangat hati-hati. Pada bulan Dzulhijjah tahun kedelapan hijrah, Mariyah melahirkan bayinya yang kemudian Rasulullah memberinya nama Ibrahim demi mengharap berkah dari nama bapak para nabi, Ibrahim. Lalu ia memerdekakan Mariyah sepenuhnya.