(Adhitia Nur Riski) - Laporan Pemrogaman Web Modul 1

LAPORAN TUGAS MODUL 1
HTML DASAR-CSS DESAIN

PEMROGAMAN WEB
NAMA : Adhitia Nur Riski

KELAS : D3 PJJ Fresh TI 2018
NRP : 2103187017
MATA KULIAH : Desain dan Pemrogaman Web
1. Listing Script : HTML Headings
<html>
<body>
<h1>This is Heading 1</h1>
<h2>Heading 2 is Smaller</h2>
<h3>Heading 3 is Smaller Still</h3>
</body>
</html>
Capture Progam :
Penjelasan :
Tag heading adalah sebuah tag/code HTML untuk memperbesar sebuah tulisan. Biasanya
heading tag digunakan dalam membuat judul sebuah document atau artikel. Heading tag sendiri
memiliki 6 tingkatan yang dimulai dari 1 sampai 6. Untuk mencoba menerapkan penggunaan
heading tag cukup mudah.
2. Listing Script : HTML Paragraphs

<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Capture Progam :
Penjelasan :
HTML menyediakan tag khusus untuk membuat paragraf , yaitu dengan menggunakan tag <p>
pada masing-masing baris teks dan lihat bagaiman di dalam jendelan browser anda
3. Listing Script : HTML Links

<html>
<body>
<a href="http://www.w3schools.com">This is a link to the
w3schools Web site.</a>
</body>
</html>
Capture Progam :
Penjelasan :
link (juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen
yang lain atau sumber lain. Seperti halnya suatu kutipan di dalam literatur. Dikombinasikan
dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta
untuk memperoleh sumber yang direferensikan.
4. Listing Script : HTML Images

<html>
<body>
<img src="w3schools.jpg" width="104" height="142" />
</body>
</html>
Capture Progam :
Nb : Link gambar Default

Penjelasan :
<img> element memiliki beragam attribute yang dapat ditulis sesuai kebutuhan. Akan tetapi,
hanya dua attribute yang wajib ditulis pada setiap <img /> element, yaitu src dan alt attribute. src
attribute menujukkan sumber file tersebut berada, sedangkan alt menujukkan alternatif text yang
akan muncul sebagai pengganti apabila gambar tersebut tidak dapat ditampilkan.
5. Listing Script : HTML Rules (Lines)

<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<hr />
</body>
</html>
Capture Progam :
Penjelasan :
HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan huruf p,
sebagai berikut : <p>.HTML <hr> element digunakan untuk memisahkan konten atau paragraf
satu dengan lainnya berdasarkan pengelompokkan tema atau topik masing-masing, istilahnya
adalah paragraph-level thematic break.
6. Listing Script : HTML Comments

<html>
<body>

<p>This is a regular paragraph</p>
</body>
</html>
Capture Progam :
Penjelasan :
Elemen ini digunakan untuk menambahkan komentar ke dokumen HTML. Komentar HTML
dimulai dengan <! –– dan komentar ditutup dengan ––>. Komentar HTML dapat dilihat oleh
siapa saja yang melihat kode sumber halaman, tetapi tidak diberikan saat dokumen HTML
dirender oleh penelusuran
7. Listing Script : HTML Line Breaks

<html>
<body>
<p>This is<br />a para-<br />graph with line breaks</p>
</body>
</html>
Capture Progam :
Penjelasan :
HTML New Line: Line Breaks dalam HTML
1. Pemutusan garis ditentukan oleh elemen HTML <br>. Tag ini membantu Anda memformat
paragraf HTML Anda;
2. Elemen <br> adalah elemen HTML kosong, yang artinya tidak memiliki tag akhir;
3. Gunakan elemen <br> saat pemisah baris tanpa paragraf baru diperlukan.
8. Listing Script : HTML Output Tips

<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser ignores your layout!</p>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <p> pada skrip tersebut berguna untuk membuat sebuah paragraf yang akan di keluarkan
(output) saat skip di tampilkan di browser
9. Listing Script : HTML Output Tips 2

<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of
your browser window. If you resize the browser window, the
number of lines in this paragraph will change.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <p> pada skrip tersebut berguna untuk membuat sebuah paragraf yang akan di keluarkan
(output) saat skip di tampilkan di browser
10. Listing Script : HTML Text Formatting

<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></
p>
</body>
</html>
Capture Progam :
Penjelasan :
HTML juga mendefinisikan elemen-elemen khusus untuk mendefinisikan teks dengan makna
khusus.HTML menggunakan elemen seperti <b> dan <i> untuk memformat output, seperti teks
tebal atau miring.
11. Listing Script : HTML Preformatted Text

<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks and shows the text in a monospace font.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Capture Progam :
Penjelasan :
Elemen HTML <pre> mewakili teks yang sudah diformat yang harus disajikan persis seperti
yang ditulis dalam file HTML. Teks biasanya diterjemahkan menggunakan font non-
proporsional ("monospace"). Ruang kosong di dalam elemen ini ditampilkan sebagai tertulis
12. Listing Script : HTML “Computer Output” Tags

<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>Note:</b> These tags are often used to display computer/
programming code on the page.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
<code> Menentukan kode pemrograman
<kbd> Menentukan input keyboard
<samp> Menentukan output komputer
<var> Menentukan variabel
13. Listing Script : HTML Address
<html>
<body>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <address> mendefinisikan informasi kontak untuk penulis / pemilik dokumen atau artikel.
Jika elemen <address> ada di dalam elemen <body>, itu mewakili informasi kontak untuk
dokumen.
Jika elemen <address> ada di dalam elemen <article>, elemen ini mewakili informasi kontak
untuk artikel itu.
Teks dalam elemen <address> biasanya dirender dalam huruf miring. Sebagian besar browser
akan menambahkan jeda baris sebelum dan sesudah elemen alamat.
14. Listing Script : HTML Abbreviations and Acronyms

<html>
<body>
<abbr title="United Nations">UN</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out
version when holding the mouse pointer over the acronym
or abbreviation.</p>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <abbr> mendefinisikan singkatan atau akronim, seperti "UN ,WWW". Tip: Singkatan dan akronim adalah versi
singkat dari sesuatu yang lain. ... Menandai singkatan dapat memberikan informasi yang berguna untuk browser,
sistem terjemahan dan mesin pencari.
15. Listing Script : HTML Text Direction

<html>
<body>
<p>
If your browser supports bidirectional override (bdo), the
next line will be written from the right to the left
(rtl):
</p>
<bdo dir="rtl">
Here is some backward text
</bdo>
</body>
</html>
Capture Progam :
Penjelasan :
ltr Default. Arah teks kiri-ke-kanan
rtl Arah teks kanan-ke-kiri
otomatis Biarkan browser mengetahui arah teks, berdasarkan konten (hanya disarankan jika arah
teks tidak diketahui)
16. Listing Script : HTML Quotations
<html>
<body>
A blockquote quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is
a long quotation. This is a long quotation. This is a long
quotation.
</blockquote>
<p><b>The browser inserts line breaks and margins for a
blockquote element.</b></p>
A short quotation:
<q>This is a short quotation</q>
<p><b>The q element does not render as anything special.</
b></p>
</body>
</html>
Capture Progam :
Penjelasan :
Elemen HTML <q> menunjukkan bahwa teks terlampir adalah kutipan inline pendek. Sebagian
besar browser modern menerapkan ini dengan mengelilingi teks dalam tanda kutip. Elemen ini
dimaksudkan untuk kutipan pendek yang tidak memerlukan jeda paragraf; untuk kutipan panjang
gunakan elemen <blockquote>
17. Listing Script : HTML Deleted and Inserted Text
<html>
<body>
<p>
a dozen is
<del>twenty</del>
<ins>twelve</ins>
pieces
</p>
<p>
Most browsers will <del>overstrike</del> deleted text and
<ins>underscore</ins> inserted text.
</p>
<p>
Some older browsers will display deleted or inserted text as
plain text.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <del> digunakan untuk mengidentifikasi teks yang telah dihapus dari dokumen tetapi
dipertahankan untuk menunjukkan sejarah modifikasi yang dibuat pada dokumen. Pasangkan
elemen <del> dengan elemen <ins> untuk mengidentifikasi teks yang dimasukkan yang
menggantikan teks yang dihapus.
18. Listing Script : HTML Background 1

<html>
<body style="background-color:gray">
<h2>Look: Colored Background!</h2>
</body>
</html>
Capture Progam :
Penjelasan :
Properti background-color mendefinisikan warna latar belakang untuk elemen HTML.
19. Listing Script : HTML Background 2

<html>
<body bgcolor="gray">
<h2>Look: Colored Background!</h2>
<p>For future-proof HTML, use HTML styles instead:</p>
<p>style="background-color:gray"</p>
</body>
</html>
Capture Progam :
Penjelasan :
Properti background-color mendefinisikan warna latar belakang untuk elemen HTML.
20. Listing Script : HTML Font Family, Color, and Size

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:courier new; color:red; fontsize:
20px;">A paragraph</p>
</body>
</html>
Capture Progam :
Penjelasan :
21. Listing Script : HTML Font Family, Color, and Size 2

<html>
<body>
<p><font size="2" face="Verdana">
This is a paragraph.
</font></p>
<p><font size="5" face="Times" color="red">
This is another paragraph.
</font></p>
</body>
</html>
Capture Progam :
Penjelasan :
22. Listing Script : HTML Text Alignment

<html>
<body>
<h1 style="text-align:center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page.
The heading above is aligned to the center of this page.
The heading above is aligned to the center of this page.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Penyelarasan Teks. Anda dapat mengatur perataan elemen HTML apa pun menggunakan aturan
gaya perataan teks. perataan teks dapat digunakan untuk mengatur perataan paragraf, bagian dari
dokumen, atau bahkan seluruh dokumen. perataan teks dapat digunakan untuk mengatur perataan
ke kiri, kanan, tengah, atau dibenarkan.
23. Listing Script : HTML Open a Link in a New Browser Window

<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
cukup tambahkan atribut target = "_ blank" ke tautan Anda (anchor tag). Sekarang ketika
pengunjung Anda mengklik tautan itu, tautan itu akan terbuka di jendela atau tab baru
(tergantung pada browser web yang mereka gunakan dan bagaimana mereka mengonfigurasi
browser itu).
24. Listing Script : HTML The Target attribute
<html>
<body>
<a href=http://www.w3schools.com/ target="_blank">Visit
w3schools!</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Cukup tambahkan atribut target = "_ blank" ke tautan Anda (anchor tag). Sekarang ketika
pengunjung Anda mengklik tautan itu, tautan itu akan terbuka di jendela atau tab baru
(tergantung pada browser web yang mereka gunakan dan bagaimana mereka mengonfigurasi
browser itu).
25. Listing Script : HTML Links on the Same Page

<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter 4</a></h2>
<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
</body>
</html>
Capture Progam :
Penjelasan :
Untuk menyisipkan tautan, gunakan tag <a> dengan atribut href untuk menunjukkan alamat
halaman target. Contoh: <a href="http://www.google.com">. Anda dapat membuat tautan ke
halaman lain di situs web Anda hanya dengan menulis nama file: <a href="page2.html">. Tautan
juga dapat digunakan untuk melompat ke tempat lain di halaman yang sama.
26. Listing Script : HTML Creating a mailto: Link

<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20
again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20
to <b>ensure</b> that the browser will display your text
properly.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Cara Membuat Tautan Mailto HTML. Tautan mailto ditulis dalam format yang sama dengan
hyperlink kecuali Anda menggunakan mailto: sebagai pengganti http: // dan alamat email Anda
sebagai ganti alamat halaman atau URL. Anda harus memasukkan kode </A> di akhir baris agar
tautan mailto berfungsi.
27. Listing Script : HTML Creating a mailto: Link 2

<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@microsoft.com?cc=someoneelse@
microsoft.com&bcc=andsomeoneelse2@microsoft.
com&subject=Summer%20Party&body=You%20are%20invited%20
to%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20
to <b>ensure</b> that the browser will display your text
properly.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Cara Membuat Tautan Mailto HTML. Tautan mailto ditulis dalam format yang sama dengan
hyperlink kecuali Anda menggunakan mailto: sebagai pengganti http: // dan alamat email Anda
sebagai ganti alamat halaman atau URL. Anda harus memasukkan kode </A> di akhir baris agar
tautan mailto berfungsi.
28. Listing Script : HTML Creating an Image Link

<html>
<body>
<p>Create a link attached to an image:
<a href="default.htm">
<img src="smiley.gif" alt="HTML tutorial" width="32"
height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="default.htm">
<img border="0" src="smiley.gif" alt="HTML tutorial"
width="32" height="32" />
</a></p>
</body>
</html>
Capture Progam :
Penjelasan :
Tautan Gambar HTML
1. <a> adalah tag tautan.
2. atribut href mengatur URL untuk ditautkan.
3. <img> adalah tag mulai gambar.
4. Atribut src mengatur file gambar.
5. atribut judul mengatur teks tooltip gambar.
6. alt adalah atribut teks alt tag gambar.
7. set atribut style dengan css lebar dan tinggi gambar.
8. </a> adalah tag akhir tautan.
29. Listing Script : HTML img Tag and the src Attribute
<html>
<body>
<p>
An image:
<img src="constr4.gif" width="144" height="50" />
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <img> mendefinisikan gambar di halaman HTML. Tag <img> memiliki dua atribut yang
diperlukan: src dan alt. Catatan: Gambar tidak secara teknis dimasukkan ke dalam halaman
HTML, gambar terkait dengan halaman HTML. Tag <img> menciptakan ruang penyimpanan
untuk gambar yang dirujuk.
30. Listing Script : HTML Insert Images from Different Locations

<html>
<body>
<p>An image from another folder:</p>
<img src="/images/chrome.gif" width="33" height="32" />
<p>An image from w3schools:</p>
<img src="http://www.w3schools.com/images/w3schools_green.
jpg" width="104" height="142" />
</body>
</html>
Capture Progam :
Penjelasan :
31. Listing Script : HTML Background Images

<html>
<body background="background.jpg">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</
p>
<p>If the image is smaller than the page, the image will repeat
itself.</p>
</body>
</html>
Capture Progam :
Penjelasan :
Properti background-image menetapkan satu atau lebih gambar latar belakang untuk suatu
elemen.
Secara default, gambar latar belakang ditempatkan di sudut kiri atas elemen, dan diulang secara
vertikal dan horizontal.
Tip: Latar belakang suatu elemen adalah ukuran total elemen, termasuk padding dan border
(tetapi bukan margin).
Tip: Selalu atur warna latar untuk digunakan jika gambar tidak tersedia
32. Listing Script : HTML Aligning Images

<html>
<body>
<p>The text is aligned with the image
<img src="hackanm.gif" align="bottom" width="48" height="48"
/>
at the bottom.</p>
<img src="hackanm.gif" align="middle" width="48" height="48"
/>
in the middle.</p>
<img src="hackanm.gif" align="top" width="48" height="48" />
at the top.</p>
<p><b>Note:</b> The bottom alignment is the default!</p>
</html>
</body>
Capture Progam :
Penjelasan :
Atribut align menentukan perataan gambar menurut elemen di sekitarnya. Elemen <img> adalah
elemen inline (tidak memasukkan baris baru pada halaman), artinya teks dan elemen lain dapat
membungkusnya. Oleh karena itu, dapat berguna untuk menentukan perataan gambar sesuai
dengan elemen sekitarnya.
33. Listing Script : HTML Aligning Images 2

<html>
<body>
<p>This image appears
<img src="hackanm.gif" width="48" height="48" />
exactly where it is placed in the code.</p>
<p><img src="hackanm.gif" width="48" height="48" />
This image appears exactly where it is placed in the code.</
p>
<p>This image appears exactly where it is placed in the
code.
<img src="hackanm.gif" width="48" height="48" /></p>
</body>
</html>
Capture Progam :
Penjelasan :
Atribut align menentukan perataan gambar menurut elemen di sekitarnya. Elemen <img> adalah
elemen inline (tidak memasukkan baris baru pada halaman), artinya teks dan elemen lain dapat
membungkusnya. Oleh karena itu, dapat berguna untuk menentukan perataan gambar sesuai
dengan elemen sekitarnya.
34. Listing Script : HTML Floating Images
<html>
<body>
<p>
<img src="hackanm.gif" align="left" width="48" height="48"
/>
A paragraph with an image. The align attribute of the image
is set to "left". The image will float to the left of this
text.
</p>
<p>
<img src="hackanm.gif" align="right" width="48" height="48"
/>
A paragraph with an image. The align attribute of the image
is set to "right". The image will float to the right of
this text.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
properti float digunakan untuk membungkus konten di sekitar gambar. properti float mengambil
salah satu dari dua nilai kiri atau kanan. Properti float menentukan apakah elemen html
mengapung ke kiri atau ke tepi kanan elemen yang mengandung. setiap elemen memiliki properti
float yang ditetapkan, akan dikeluarkan dari aliran normal dan mengambang seperti yang
ditentukan
35. Listing Script : HTML Adjusting Image Sizes

<html>
<body>
<p>
</p>
<p>
</p>
<p>
</p>
<p>You can make an image smaller or larger by changing the
values of the height and width attributes.</p>
</body>
</html>
Capture Progam :
Penjelasan :
1. Gunakan elemen HTML <img> untuk menentukan gambar.
2. Gunakan atribut src HTML untuk menentukan URL gambar.
3. Gunakan atribut alt HTML untuk menentukan teks alternatif untuk gambar, jika tidak dapat
ditampilkan.
4. Gunakan atribut lebar dan tinggi HTML untuk menentukan ukuran gambar.
36. Listing Script : HTML alt Attribute

<html>
<body>
<p>
An image:
<img src="../constr4.gif" alt=”Site_Under_Construction”
width="200" height="50" />
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Atribut alt yang diperlukan menentukan teks alternatif untuk gambar, jika gambar tidak dapat
ditampilkan. Atribut alt memberikan informasi alternatif untuk gambar jika pengguna karena
alasan tertentu tidak dapat melihatnya (karena koneksi lambat, kesalahan dalam atribut src, atau
jika pengguna menggunakan pembaca layar).
37. Listing Script : HTML Creating an Image Map

<html>
<body>
<p>Click on the sun or on one of the planets to watch it
closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.
htm" />
<area shape="circle" coords="90,58,3" alt="Mercury"
href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.htm" />
</map>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <map> digunakan untuk mendefinisikan peta gambar sisi klien. Peta-gambar adalah gambar
dengan area yang dapat diklik.
Atribut nama yang diperlukan dari elemen <map> dikaitkan dengan atribut usemap <img> dan
menciptakan hubungan antara gambar dan peta.
Elemen <map> berisi sejumlah elemen <area>, yang menentukan area yang dapat diklik di peta
gambar.
38. Listing Script : HTML Creating HTML Tables

<html>
<body>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</html>
</body>
Capture Progam :
Penjelasan :
Untuk membuat halaman web dengan tabel, ikuti langkah-langkah ini:
Buka editor teks Anda.
Di editor teks, buat dokumen teks baru. ...
Masukkan HTML berikut: <! ...
Simpan file sebagai table.html. ...
Buka table.html di editor teks Anda. ...
Ubah kode di table.html menjadi yang berikut: <!
39. Listing Script : HTML Creating HTML Tables 2
<html>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</html>
</body>
Capture Progam :
Penjelasan :
40. Listing Script : HTML Creating HTML Tables 3

<html>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
41. Listing Script : HTML Table Borders

<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Atribut border menentukan apakah perbatasan harus ditampilkan di sekitar sel tabel atau tidak.
42. Listing Script : HTML Headings in a Table

<html>
<body>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1855</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Tabel HTML berisi kumpulan kolom dan baris data aktual dan setiap baris terdiri dari satu atau
beberapa sel, yang bisa berupa tajuk atau sel data. Informasi header dalam tabel didefinisikan
dengan tag <th>. Elemen <th> mendefinisikan sel header dalam sebuah tabel.
43. Listing Script : HTML Empty Cells in a Table

<html>
<body>
<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Sel kosong dalam tabel sering menyebabkan masalah bagi penulis HTML. Browser dapat
menampilkan sel-sel tersebut tanpa batas bahkan jika sel-sel lain memiliki batas. Dokumen ini
membahas berbagai cara untuk menangani masalah ini serta menghindarinya dengan membuat
sel kosong. Misalnya, dalam statistik ada konvensi untuk menyajikan berbagai jenis data yang
hilang.
44. Listing Script : HTML Table with a Caption

<html>
<body>
<h4>This table has a caption, and a thick border:</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Elemen <caption> digunakan untuk menambahkan keterangan ke tabel HTML. <caption> harus
muncul dalam dokumen HTML sebagai keturunan pertama dari induk <tabel>, tetapi dapat
diposisikan secara visual di bagian bawah tabel dengan CSS.
45. Listing Script : HTML Cells Spanning Multiple Columns

<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Dalam HTML, sel yang mengangkang ini dikenal sebagai spanning cell. Anda bisa membuat
spanning cell melintasi baris dan kolom (dan keduanya) menggunakan dua atribut yang
ditentukan untuk tag <td> dan <th>. Seperti yang Anda duga, atribut colspan membuat sel yang
merentang dua atau lebih kolom.
46. Listing Script : HTML Tags Inside a Table
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Tag Tabel HTML
Deskripsi Tag
<table> Menentukan tabel
<th> Menentukan sel header dalam sebuah tabel
<tr> Menentukan baris dalam sebuah tabel
<td> Menentukan sel dalam tabel
47. Listing Script : HTML Cell Padding

<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Padding sel adalah ruang antara batas sel dan konten di dalam sel. Untuk mengatur lapisan sel
dalam HTML, gunakan atribut style. Atribut style menentukan gaya inline untuk suatu elemen.
Atribut digunakan dengan tag HTML <table>, dengan padding properti CSS.
48. Listing Script : HTML Cell Spacing

<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Atribut cellspacing menentukan ruang, dalam piksel, di antara sel. Catatan: Jangan bingung ini
dengan atribut selpadding, yang menentukan ruang antara dinding sel dan konten sel
49. Listing Script : HTML Table Background Colors and Images

<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="gray">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1" background="bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
Atribut bgcolor menentukan warna latar belakang tabel
50. Listing Script : HTML Cell Background Colors and Images

<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="gray">First</td>
<td>Row</td>
</tr>
<tr>
<td background="bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
51. Listing Script : HTML Aligning Cell Content

<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
</tr>
<tr>
<td align="left">Make-Up</td>
</tr>
<tr>
<td align="left">Food</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
The align attribute specifies the horizontal alignment of the content in a cell.
52. Listing Script : HTML frame Attribute

<html>
<body>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<html>
<body>
Capture Progam :
Penjelasan :
Atribut frame <table> tidak didukung dalam HTML. Gunakan CSS sebagai gantinya.
Atribut frame menentukan bagian mana dari tabel luar yang berbatasan yang harus terlihat.
Kiat: Mungkin lebih baik untuk TIDAK menentukan bingkai, dan menggunakan CSS untuk
menerapkan batas.
53. Listing Script : HTML frame Attribute 2

<html>
<body>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
menerapkan batas.
54. Listing Script : HTML frame Attribute 3

<html>
<body>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
menerapkan batas.
55. Listing Script : HTML Using frame and border to Control Table Borders
<html>
<body>
<table frame="hsides" border="3">
<tr>
<td>First row</td>
</tr>
</table>
<br />
<table frame="vsides" border="3">
<tr>
<td>First row</td>
</tr>
</table>
</body>
</html>
Capture Progam :
Penjelasan :
56. Listing Script : HTML Unordered Lists

<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Capture Progam :
Penjelasan :
Daftar Tanpa Urutan HTML. Daftar tidak berurutan adalah kumpulan item terkait yang tidak
memiliki urutan atau urutan khusus. Daftar ini dibuat dengan menggunakan tag HTML <ul>.
Setiap item dalam daftar ditandai dengan peluru.
57. Listing Script : HTML Unordered Lists 2
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
</body>
</html>
Capture Progam :
Penjelasan :
Daftar Tanpa Urutan HTML. Daftar tidak berurutan adalah kumpulan item terkait yang tidak
memiliki urutan atau urutan khusus. Daftar ini dibuat dengan menggunakan tag HTML <ul>.
Setiap item dalam daftar ditandai dengan peluru.
58. Listing Script : HTML Ordered Lists

<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Capture Progam :
Penjelasan :
Tag Daftar HTML
Deskripsi Tag
<ul> Menentukan daftar tidak terurut
<ol> Menentukan daftar yang dipesan
<li> Menentukan item daftar
<dl> Menentukan daftar deskripsi
59. Listing Script : HTML Different Types of Ordering

<html>
<body>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</html>
Capture Progam :
Penjelasan :
Ada tiga jenis daftar dalam HTML dan masing-masing memiliki tujuan dan makna tertentu:
Daftar tidak berurutan - Digunakan untuk mengelompokkan serangkaian item terkait, tanpa
urutan tertentu. Daftar yang dipesan - Digunakan untuk mengelompokkan satu set item terkait,
dalam urutan tertentu.
60. Listing Script : HTML Different Types of Ordering 2

<html>
<body>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</html>
Capture Progam :
Penjelasan :
Ada tiga jenis daftar dalam HTML dan masing-masing memiliki tujuan dan makna tertentu:
Daftar tidak berurutan - Digunakan untuk mengelompokkan serangkaian item terkait, tanpa
urutan tertentu. Daftar yang dipesan - Digunakan untuk mengelompokkan satu set item terkait,
dalam urutan tertentu.
61. Listing Script : HTML Definition Lists

<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Capture Progam :
Penjelasan :
tag <dd> digunakan untuk menjelaskan item dalam daftar definisi. Dalam HTML5, tag <dd>
digunakan untuk menggambarkan istilah / nama dalam daftar deskripsi.
62. Listing Script : HTML Nested Lists

<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Capture Progam :
Penjelasan :
Cara yang tepat untuk membuat daftar bersarang HTML adalah dengan <ul> bersarang sebagai
anak dari <li> yang menjadi miliknya. Daftar bersarang harus berada di dalam elemen <li> dari
daftar yang bersarang.
63. Listing Script : HTML Nested Lists 2

<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Capture Progam :
Penjelasan :
Cara yang tepat untuk membuat daftar bersarang HTML adalah dengan <ul> bersarang sebagai
anak dari <li> yang menjadi miliknya. Daftar bersarang harus berada di dalam elemen <li> dari
daftar yang bersarang.
64. Listing Script : HTML input Tag and Attributes

<html>
<body>
<form action="">
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
</body>
</html>
Capture Progam :
Penjelasan :
Deskripsi Nilai Atribut
maxlength number Menentukan jumlah karakter maksimum yang diperbolehkan dalam bidang
teks
min number Menentukan nilai minimum.
multiple multiple Menentukan bahwa pengguna dapat memasukkan beberapa nilai
name text Menetapkan nama ke kontrol input.
65. Listing Script : HTML Check Boxes

<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</body>
</html>
Capture Progam :
Penjelasan :
The <input type="checkbox"> defines a checkbox.
The checkbox is shown as a square box that is ticked (checked) when activated.
Checkboxes are used to let a user select one or more options of a limited number of choices.
66. Listing Script : HTML Radio Buttons

<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked"
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>
</body>
</html>
Capture Progam :
Penjelasan :
<Input type = "radio"> mendefinisikan tombol radio. Tombol radio biasanya disajikan dalam
kelompok (kumpulan tombol radio yang menjelaskan sekumpulan opsi terkait). Hanya satu
tombol radio dalam suatu grup yang dapat dipilih secara bersamaan.
67. Listing Script : HTML Drop-Down List
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Capture Progam :
Penjelasan :
Kotak pilih juga disebut kotak drop-down menyediakan opsi untuk mendaftar berbagai pilihan
dalam bentuk daftar drop-down, dari mana pengguna dapat memilih satu atau lebih opsi. Tag
<select> digunakan untuk membuat daftar tarik-turun dalam HTML, dengan tag <option>.
68. Listing Script : HTML Drop-Down List 2

<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Capture Progam :
Penjelasan :
Kotak pilih juga disebut kotak drop-down menyediakan opsi untuk mendaftar berbagai pilihan
dalam bentuk daftar drop-down, dari mana pengguna dapat memilih satu atau lebih opsi. Tag
<select> digunakan untuk membuat daftar tarik-turun dalam HTML, dengan tag <option>.
69. Listing Script : HTML Text Area

<html>
<body>
<textarea rows="10" cols="30"> The cat was playing in the
garden. </textarea>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <textarea> mendefinisikan kontrol input teks multi-baris.
Area teks dapat menampung jumlah karakter yang tidak terbatas, dan teks ditampilkan dalam
font dengan lebar tetap (biasanya Kurir).
Ukuran area teks dapat ditentukan oleh atribut cols and row, atau bahkan lebih baik; melalui
properti tinggi dan lebar CSS.
70. Listing Script : HTML Buttons

<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <button> mendefinisikan tombol yang dapat diklik.
Di dalam elemen <button> Anda dapat meletakkan konten, seperti teks atau gambar. Ini adalah
perbedaan antara elemen ini dan tombol yang dibuat dengan elemen <input>.
Tip: Selalu tentukan atribut type untuk elemen <button>. Browser yang berbeda menggunakan
tipe default yang berbeda untuk elemen <button>
71. Listing Script : HTML Fieldset

<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form action="">
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is
too old.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Tag <fieldset> digunakan untuk mengelompokkan elemen terkait dalam formulir.
Tag <fieldset> menggambar kotak di sekitar elemen terkait
72. Listing Script : HTML Form Examples

<html>
<body>
<form name="input" action="html_form_action.asp"
method="get">
Type your first name:
<input type="text" name="FirstName" value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="LastName" value="Mouse" size="20">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input
to a new page called html_form_action.asp.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
73. Listing Script : HTML Form with Check Boxes

<html>
<body>
method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike"
checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>
If you click the "Submit" button, you send your input to a
new page called html_form_action.asp.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
The checked attribute is a boolean attribute.
When present, it specifies that an <input> element should be pre-selected (checked) when the
page loads.
The checked attribute can be used with <input type="checkbox"> and <input type="radio">.
74. Listing Script : HTML Form with Radio Buttons

<html>
<body>
method="get">
Male:
<input type="radio" name="Sex" value="Male"
checked="checked">
<br>
Female:
<input type="radio" name="Sex" value="Female">
<br>
<input type ="submit" value ="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input
to a new page called html_form_action.asp.
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Atribut tindakan menentukan tindakan yang akan dilakukan ketika formulir dikirimkan.
Biasanya, data formulir dikirim ke halaman web di server ketika pengguna mengklik tombol
kirim.
Dalam contoh di atas, formulir data dikirim ke halaman di server yang disebut
"/action_page.php".
75. Listing Script : HTML Send E-Mail from a Form

<html>
<body>
<form action="MAILTO:someone@w3schools.com" method="post"
enctype="text/plain">
<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail"
value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
Capture Progam :
Penjelasan :
76. Listing Script : HTML Color Values

<html>
<body>
<p style="background-color:#C0C0C0">
Color set by using hex value
</p>
<p style="background-color:rgb(192,192,192)">
Color set by using rgb value
</p>
<p style="background-color:gray">
Color set by using color name
</p>
</body>
</html>
Capture Progam :
Penjelasan :
Color Name Hex Color Code RGB Color Code
Black #000000 rgb(0, 0, 0)
Red #FF0000 rgb(255, 0, 0)
Maroon #800000 rgb(128, 0, 0)
Yellow #FFFF00 rgb(255, 255, 0)

(Adhitia Nur Riski) - Laporan Pemrogaman Web Modul 1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

(Adhitia Nur Riski) - Laporan Pemrogaman Web Modul 1

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN TUGAS MODUL 1

HTML DASAR-CSS DESAIN

NAMA : Adhitia Nur Riski

2. Listing Script : HTML Paragraphs

3. Listing Script : HTML Links

4. Listing Script : HTML Images

Nb : Link gambar Default

5. Listing Script : HTML Rules (Lines)

6. Listing Script : HTML Comments

7. Listing Script : HTML Line Breaks

8. Listing Script : HTML Output Tips

9. Listing Script : HTML Output Tips 2

10. Listing Script : HTML Text Formatting

11. Listing Script : HTML Preformatted Text

12. Listing Script : HTML “Computer Output” Tags

14. Listing Script : HTML Abbreviations and Acronyms

15. Listing Script : HTML Text Direction

18. Listing Script : HTML Background 1

19. Listing Script : HTML Background 2

20. Listing Script : HTML Font Family, Color, and Size

21. Listing Script : HTML Font Family, Color, and Size 2

22. Listing Script : HTML Text Alignment

23. Listing Script : HTML Open a Link in a New Browser Window

25. Listing Script : HTML Links on the Same Page

26. Listing Script : HTML Creating a mailto: Link

27. Listing Script : HTML Creating a mailto: Link 2

28. Listing Script : HTML Creating an Image Link

30. Listing Script : HTML Insert Images from Different Locations

31. Listing Script : HTML Background Images

32. Listing Script : HTML Aligning Images

33. Listing Script : HTML Aligning Images 2

35. Listing Script : HTML Adjusting Image Sizes

36. Listing Script : HTML alt Attribute

37. Listing Script : HTML Creating an Image Map

38. Listing Script : HTML Creating HTML Tables

40. Listing Script : HTML Creating HTML Tables 3

41. Listing Script : HTML Table Borders

42. Listing Script : HTML Headings in a Table

43. Listing Script : HTML Empty Cells in a Table

44. Listing Script : HTML Table with a Caption

45. Listing Script : HTML Cells Spanning Multiple Columns

47. Listing Script : HTML Cell Padding

48. Listing Script : HTML Cell Spacing

49. Listing Script : HTML Table Background Colors and Images

50. Listing Script : HTML Cell Background Colors and Images

51. Listing Script : HTML Aligning Cell Content

52. Listing Script : HTML frame Attribute

53. Listing Script : HTML frame Attribute 2

54. Listing Script : HTML frame Attribute 3

56. Listing Script : HTML Unordered Lists

58. Listing Script : HTML Ordered Lists

59. Listing Script : HTML Different Types of Ordering

60. Listing Script : HTML Different Types of Ordering 2

61. Listing Script : HTML Definition Lists

62. Listing Script : HTML Nested Lists

63. Listing Script : HTML Nested Lists 2

64. Listing Script : HTML input Tag and Attributes

65. Listing Script : HTML Check Boxes

66. Listing Script : HTML Radio Buttons

68. Listing Script : HTML Drop-Down List 2

69. Listing Script : HTML Text Area

70. Listing Script : HTML Buttons

71. Listing Script : HTML Fieldset