FORMAT IMAGE 1 Dec 2009 1:48 PM (15 years ago)

Image atau gambar didalam sebuah dokumen HTML berfungsi untuk menambah daya tarik dari sebuah halaman web. Namun penggunaannya akan mengakibatkan semakin bertambah besarnya penggunaan byte dari dokumen HTML yang secara otomatis akan berakibat pula terhadap kinerja atau memperlambat waktu tampil dari halaman web tersebut. Sedangkan fungsi pengolahan gambar yerdiri atas :

Image Alignment / Perataan Teks Pada Gambar
Image Adjustment / Ukuran Gambar
Image Alternate / Teks Gambar
Image Link / Link Gambar
Image Map / Pemetaan Gambar

Sedang Sintaksnya adalah :

<img src="gambar/sumber gambar">

Pada umumnya gambar yang ditampilkan pada sebuah halaman web akan disajikan bersama dengan teks dari halaman web tersebut. Format gambar yang banyak digunakan dalam halaman web, antara lain GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group).

MULTIPLE STYLE SHEET 30 Nov 2009 11:22 PM (15 years ago)

Multiple Style Sheet adalah style yang dapat digunakan secara bersama dalam pendefinisiannya, baik melalui style sheet secara internal atau style sheet external. Hanya apabila penggunaannya lebih dari satu, maka akan didefinisikan secara umum.

Halaman Style Sheet External

h1 {font-family: Microsoft Sans Serif;
font-size: 16 pt;
font-weight: bold;
color:#006600;
text-align:center}
h1 {font-family: Comic Sans MS;
font-size: 12 pt;
font-weight: bold;
color:#000080;
text-align:justify}

Simpan dengan nana StyleEx2.css

Halaman HTML Multiple Style Sheet

<html>
<head>
<title>
Contoh Penggunaan Multyple Style Sheet
</title>
<link rel="stylesheet" type="text/css" href="StyleEx2.css">
<style type="text/css">


</style>
</head>
<body>
<h1>
Contoh Penggunaan Multyple Style Sheet
</h1>

<hr>
<h2>

</h2>
</body>
</html>

Simpan dengan nama Contoh 5.45.htm, lalu jalankan pada browser seperti pada gambar berikut :

STYLE SHEET INLINE 29 Nov 2009 6:38 PM (15 years ago)

Style Sheet Inline tidak didefinisikan terpisah seperti Style Sheet Internal dan Style Sheet External. Style Sheet Inline langsung didefinisikan pada tag body. Penggunaan style sheet inline akan mengakibatkan semakin besarnya penggunaan byte. Sintaksnya adalah sebagai berikut :

<html>
<head>
.... Isi Head ....
</head>
<body>

.... isi text ....

</body>
</html>

Contoh Style Sheet Inline Dalam Dokumen HTML

<html>
<head>
<title>
Contoh Penggunaan Style Sheet Inline
</title>
</head>

<body>

Contoh Penggunaan Style Sheet Inline


<hr>

</body>
</html>

Simpan dengan nama Contoh 5.44.htm, lalu jalankan pada browser seperti pada gambar berikut :

STYLE SHEET EXTERNAL 25 Nov 2009 6:53 PM (15 years ago)

Style Sheet External adalah style sheet yang didefinisikan secara terpisah di dalam file tersendiri. Pendifinisian halaman style sheet external yang terpisah harus diberikan extention css atau "nama_file.css" dan tidak perlu didefinisikan melalui tag html. Sedangkan untuk dokumen HTML yang digunakan melaui link.

Halaman Style Sheet External

h1 {font-family:Microsoft Sans serif;
font-size" 16pt;
font-weight:bold
color: #006600
text-align: center}

p { font-family:Comic Sans MS;
font-size" 12pt;
font-weight:bold
color: #006600
text-align: justify;}

Simpan dengan nama StyleExl.css

<html>
<head>
<title>
Contoh Style sheet External
</title>
<link rel="stylesheet" type="text/css" href="StyleExl.css">
</head>
<body>
<h1>
Contoh Penggunaan Style Sheet External
</h1>
<hr>

Style Sheet External tidak didefinisikan secara utuh, namun harus dipisahkan atau berbeda halaman atau berbeda file. Cara penggunaannya dibangkitkan melalui link

</body>
</html>

Simpan dengan nama Contoh 5.43.htm, lalu lajankan pada browser seperti pada gambar berikut :

STYLE SHEET INTERNAL 24 Nov 2009 4:53 PM (15 years ago)

Style Sheet Internal adalah style sheet yang didefinisikan di dalam dokumen HTML. Sintaknya adalah sebagai berikut :

<html>
<head>
<style [atribut] .... Isi Style Sheet .... </style>
</head>

<body>
.... Isi Body ....
</body>
</html>
Contoh Style sheet Internal Dalam Dokumen HTML

</html>
<head>
<title>
Contoh Style sheet Internal Dalam Dokumen HTML
</title>
<style type="text/css">

</style>
</head>
<body>
<h1>
Contoh Style Sheet Dengan Jenis Huruf Comic San MS
</h1>
<hr>

Isi dalam dokumen html ini telah dibangkitkan dengan penggunaan style sheet secara Internal. Artinya pembuatan isi dari dokumen HTML ini tidak memerlukan lagi pengaturan pada tiap bagian dokumen terutama yang terletak pada bagan body.

</body>
</html>

Simpan dengan nama Contoh 5.42.htm , lalu jalankan pada browser seperti pada gambar berikut :

CASCADE STYLE SHEET 24 Nov 2009 4:40 PM (15 years ago)

Cascade Style Sheet dalam dokumen HTML terbagi atas tiga jenis :

FONT COLOR 22 Nov 2009 8:41 PM (15 years ago)

Font Color digunakan untuk menampilkan bentuk dari huruf / karakter yang akan digunakan. Sintaksnya adalah sebagai berikut :

.... Teks ....

Contoh Penggunaan Font Size Dalam Dokumen HTML

<html>
<head>
<title>
Contoh Penggunaan Font Color
</title>
</head> <body>


Artikel Inspiratif 

KEJUJURAN DAN KEBOHONGAN.
 




Sore ini aku mendapat pelajaran



dari seseorang yang menelponku untuk diajak ngobrol ketika pulang dari bekerjanya. Obrolan ini dilakukan dia sambil mengendarai mobilnya.

Keadaan yang demikian hampir setiap sore dilakukan dengan mengunakan telepone genggam. Alasan yang dikemukan adalah untuk menemani menghilangkan kesunyian dan kesepian dalam perjalanan. Salam sapa dari teleponnya dibuka dengan

"
Halo...!!!
"

Lalu kujawab dengan sapaan yang sama.






Selanjutnya kuceritakan

bahwa tadi sewaktu pulang kerja aku ditabrak seorang anak sekolah di depan pasar.Kondisi badan tepatnya kakiku sebelah kiri sedikit memar karena kena benturan dengan kendaraan yang ditumpangi anak tersebut.

Yang menarik dari ceritaku ini

padalah ketidak jujuran anak itu dalam menceritakan kejadian yang semestinya terhadap orang-orang yang menonton atau yang menolong.

Jadi banyak kebohongan-kebohongan yang diceritakannya.


</body>
</html>

Simpan dengan nama Contoh 5.41.htm , lalu jalankan pada browser seperti pada gambar berikut :

FONT SIZE 22 Nov 2009 3:38 AM (15 years ago)

Font Size digunakan untuk menampilkan bentuk dari huruf / karakter yang akan digunakan. Sintaksnya adalah sebagai berikut :

.... Teks .... 

Contoh Penggunaan Font Size Dalam Dokumen HTML

<html>
<head>
<title>
Contoh Penggunaan Font Size
</title>
</head>

<body>



Artikel Inspiratif





KEJUJURAN DAN KEBOHONGAN.

Sore ini aku mendapat pelajaran dari seseorang yang menelponku untuk diajak ngobrol ketika pulang dari bekerjanya. Obrolan ini dilakukan dia sambil mengendarai mobilnya.

Selanjutnya kuceritakan bahwa tadi sewaktu pulang kerja aku ditabrak seorang anak sekolah di depan pasar.Kondisi badan tepatnya kakiku sebelah kiri sedikit memar karena kena benturan dengan

kendaraan yang ditumpangi anak tersebut.

Yang menarik dari ceritaku ini adalah ketidak jujuran anak itu dalam menceritakan kejadian yang semestinya terhadap orang-orang yang menonton atau yang menolong. Jadi banyak kebohongan-kebohongan yang diceritakannya.

</body>
</html>

Simpan dengan nama Contoh 5.40.htm , lalu jalankan pada browser seperti pada gambar berikut :

FONT FACE 20 Nov 2009 9:12 AM (15 years ago)

Font Face digunakan untuk menampilkan bentuk dari huruf / karakter yang akan digunakan. Sintaksnya adalah sebagai berikut :

.... Teks .... 

Contoh Penggunaan Font Face Dalam Dokumen HTML

<html>
<head>
<title>
Contoh Penggunaan Font Face
</title>
</head>

<body>



Artikel Inspiratif





KEJUJURAN DAN KEBOHONGAN.

Sore ini aku mendapat pelajaran dari seseorang yang menelponku untuk diajak ngobrol ketika pulang dari bekerjanya. Obrolan ini dilakukan dia sambil mengendarai mobilnya.

Selanjutnya kuceritakan bahwa tadi sewaktu pulang kerja aku ditabrak seorang anak sekolah di depan pasar.Kondisi badan tepatnya kakiku sebelah kiri sedikitmemar karena kena benturan dengan kendaraan yang ditumpangi anak tersebut.

Kembali pada teman ngobrolku. Secara mendadak telepon gemgamnya yang satu berbunyi. Aku hafal sekali dengan bunyi itu karena ada pesan singkat yang masuk. Lalu dengan sedikit gagap dia menjawab pertanyaanku dari siapa pesan itu? Dia menjawab dari ..... Isi pesan itu disampaikan kepadaku benar atau tidak aku tidak tahu secara persis. Namun yang menarik perhatian adalah kegagapan dia dalam menyampaikan pesan tersebut.

Apalagi ketika perjalanan sudah sampai dirumah dia disambut oleh seseorang yang menyampaikan pesan tadi. Dia menceritakan bahwa pintu rumahnya sudah dibukakan dan sebagainya.

</body>
</html>

Simpan dengan nama Contoh 5.39.htm , lalu jalankan pada browser seperti pada gambar berikut :

FORMAT FONT dan CSS 19 Nov 2009 6:20 PM (15 years ago)

Format Font didalam dokumen HTM: berfungsi untuk membentuk sebuah karakter agar karakter yang dimaksud berbeda dengan karakter yang lainnya di dalam sebuah dokumen HTML. Sedangkan CSS (Cascade Style Sheet) penggunaannya karena mengurangi dampak penggunaan font yang terlalu banyak daam sebuaH halaman web.

Materi yang akan dibahas secara berkelanjutan , adalah :

Format Font dalam sebuah dokumen HTML memiliki beberapa fungsi :

Cascade Style Sheet dalam sebuah dokumen terbagi atas 3 jenis, yaitu :

DEFINITION (Istilah) 18 Nov 2009 8:09 AM (15 years ago)

Untuk membuat sebuah Definition / Istilah dalam sebuah dokumen HTML digunakan Tag <dfn>. Sintaknya adalah sebagai berikut :

<dfn style="font-style: [style]"> .... teks .... </dfn>

Keterangan :

Contoh Penggunaan Tag Citation

<html>
<head>
<title>
Contoh Penggunaan Tag Definition
</title>
</head>

<body>



Contoh Penggunaan Tag Definition






Media Pembelajaran

Untuk meningkatkan prestasi belajat siswa

Ini adalah suatu kendala dalam memberikan tugas perorangan.
<dfn style="font-style:bold">
MPE
</dfn>

Untuk menguasai kendala ini sangat dibutuhkan pemikiran mengembangan media mengajar yang mendekati

realitas

benda.


</body>
</html>

Simpan dengan nama Contoh 4.38.htm , lalu jalankan pada browser seperti pada gambar berikut :

CITATION 17 Nov 2009 6:09 PM (15 years ago)

Untuk membuat sebuah Citation dalam sebuah dokumen HTML digunakan Tag <cite>. Sintaknya adalah sebagai berikut :

<cite> .... teks .... </cite>

Contoh Penggunaan Tag Citation

<html>
<head>
<title>
Contoh Penggunaan Tag Citation
</title>
</head>

<body>



Contoh Penggunaan Tag Citation




<cite>

Ini adalah suatu kendala dalam memberikan tugas perorangan. Untuk menguasai kendala ini sangat dibutuhkan pemikiran mengembangan media mengajar yang mendekati realitas benda.
</cite>


</body>
</html>

Simpan dengan nama Contoh 4.37.htm , lalu jalankan pada browser seperti pada gambar berikut :

QUOTATION (Kutipan Pendek) 17 Nov 2009 1:19 AM (15 years ago)

Sedangkan untuk membuat sebuah kutipan pendek dalam sebuah dokumen HTML digunakan Tag <q>. Sintaknya adalah sebagai berikut :

<q> .... teks .... </q>

Contoh Penggunaan q

<html>
<head>
<body>



Media Pembelajaran



<q>

Ini adalah suatu kendala dalam memberikan tugas perorangan. Untuk menguasai kendala ini sangat dibutuhkan pemikiran mengembangan media mengajar yang mendekati realitas benda.

</q>
</body>
</html>

Simpan dengan nama Contoh 4.36.htm , lalu jalankan pada browser seperti pada gambar berikut :

QUOTATION / Kutipan Panjang (Blockquote) 16 Nov 2009 4:59 AM (15 years ago)

Sedangkan untuk membuat sebuah kutipan pendek dalam sebuah dokumen HTML digunakan Tag <q>. Sintaknya adalah sebagai berikut :

<q> .... teks .... </q>

Contoh Penggunaan Blockquote

<html>
<head>
<title>
Contoh Penggunaan Blockquote/Kutipan Panjang
</title>
</head>

<body>



Media Pembelajaran






Ini adalah suatu kendala dalam memberikan tugas perorangan. Untuk menguasai kendala ini sangat dibutuhkan pemikiran mengembangan media mengajar yang mendekati realitas benda.




<blockquote>
DR.Oemar Hamalik (1983 :21) menyatakan :
Untuk mencapai maksud dan tujuannya, bentuk-bentuk organisasi masyarakat itu, perlu meningkatkan

efisiensi dan efektifitasnya.

Peningkatan efisiensi dan efektifitas tersebut sebagian besar bergantung pada faktor penunjang, yaitu

sarana dan prasarana.

Dengan kata lain hubungan komunikasi interaksi itu akan berjalan dengan lancar dan tercapai hasil yang maksimal, apabila organisasi itu menggunakan alat bantu yang disebut media komunikasi. Jadi yang disebut

media komunikasi adalah

alat bantu yang digunakan oleh suatu organisasi guna tercapainya efisiensi dan efektifitas kerja dengan hasil yang maksimal.

</blockquote>
</body>
</html>

Simpan dengan nama Contoh 4.35.htm , lalu jalankan pada browser seperti pada gambar berikut :

ARAH TEKS 12 Nov 2009 11:45 AM (15 years ago)

Untuk mendifinisikan arah teks dalam dokumen HTML, digunakan perintah/tag <bdo>. Sintaknya adalah sebagai berikut:

<bdo[properti]> .... teks ....</bdo>

Keterangan :

Contoh penggunaan bdo

<html>
<head>
<title>
Contoh Penggunaan Tag bdo
</title>
</head>
<body>




Contoh Penggunaan Tag HTML






Teks berikut akan ditulis terbalik dengan fungsi Tag HTML






1. Belajar Membuat Halaman web. Ternyata Memang Mudah



 


2.


<bdo dir="rtl">
Belajar Membuat Halaman web. Ternyata Memang Mudah
</bdo>




</body>
</html>

Simpan dengan nama Contoh 4.34.htm , lalu jalankan pada browser seperti pada gambar berikut :

ALAMAT (Address) 11 Nov 2009 6:07 PM (15 years ago)

Untuk mendefinisikan sebuah alamat dalam dokumen HTML, digunakan perintah/tag <address>. Sintaknya adalah sebagai berikut :

<address> .... teks .... </address>
Contoh Penggunaan Address

<html>
<head>
<title> Contoh penggunaan Address
</title>
</head>

<body>



Contoh Penggunaan tag Alamat



<hr>
<address>

DOANCO
 
Jl. Nuri II/35 Karangjati
 
Blora - 58219

</address>
</body>
</html>

Simpan dengan nama 4.33.htm, lalu jalankan pada browser seperti pada gambar berikut :

SINGKATAN (ACRONYM) 11 Nov 2009 2:17 AM (15 years ago)

Untuk mendifinisikan sebuah singkatan dalam dokumen HTML, digunakan perintah / tag <acronym>. Sintaknya adalah sebagai berikut :

<acronym[properti]> .... singkatan .... </acronym>

Keterangan :

<html>
<head>
<title>
Contoh Penggunaan Tag
</title>
</head>

<body>

 
Contoh Penggunaan tag
<acronym>
Singkatan 





MENSYUKURI HIDUP MERDEKA
<acronym title="Hari Ulang Tahun"> HUT </acronym>

Hampir disudut perkampungan orang- secara kelompok-kelompok melakukan kegiatan yang saklar, yaitu memperingati hari kemerdekaan.

</body>
</html>

Simpan dengan nama contoh 4.32.htm Lalu jalankan pada browser seperti pada gambar berikut :

XMP 10 Nov 2009 1:09 AM (15 years ago)

Untuk mendifinisikan sebuah xmp dalam dokumen HTML, digunakan perintah tag <xmp> (mirip fungsi plaintext). Sintaksnya adalah sebagai berikut :

<xmp> ....teks.... </xmp>
Contoh Penggunaan XMP

<html>
<head>
<title>
Contoh Penggunaan XMP
</title>
</head>

<body>
 INTI KEBIJAKSANAAN



<hr>

 <var>
By Doanco
 
08/11/2009
</var>


 
Sebuah cerita
<var>
inspiratif
</var>



 
<var>
Konon ada seorang raja muda yang pandai.
</var>


<xmp>

Ia memerintahkan sEmua mahaguru terkemuka untuk berkumpul dan menulis semua kebijaksanaan yang ada didunia ini. Merekapun segera mengerjakannya dan empat puluh tahun kemudian mereka telah menghasilkan ribuan buku berisi kebijaksanaan. Raja yang pada saat itu telah mencapai usia enampuluh tahun, berkata kepada mereka, "Saya tidak mungkin dapat membaca ribuan buku. Ringkaslah semua dasar-dasar kebijaksanaan itu"

</xmp>


<var>
Setelah sepuluh tahun
</var>

 <xmp>

Bekerja untuk meringkas dasar-dasar kebijaksanaan yang diambil dari ribuan buku tersebut, para mahaguru berhasil meringkas seluruh kebijaksanaan dalam seratus jilid. "Itu masih terlalu banyak, kata sang raja. Saya telah berusia tujuh puluh tahun. Peraslah semua kebijaksanaan itu dalam inti yang paling dasariah."

</xmp>



 <xmp>

Maka orang-orang bijak itu kembali mencoba dan memeras semua kebijaksanaa didunia kedalam hanya satu buku. Tapi pada waktu itu Raja telah berbaring di tempat tidur menjelang kematiannya. Maka pemimpin kelompok mahaguru itu memeras lagi buku kebijaksanaan itu menjadi hanya satu pernyataan, â??Manusia hidup, lalu menderita, kemudian mati.
</xmp>

<var>
Satu-satunya hal yang tetap bertahan adalah: Cinta KASIH".
</var>



</body>
</html>

Simpan dengan nama contoh 4.31. Lalu jalankan pada browser seperti pada gambar berikut :

PALAINTEXT 3 Oct 2009 3:54 PM (15 years ago)

Untuk mendifiniasikan sebuah plaintext dalam dokumen HTML, digunakan perintah/tag <plaintext>. Dokumen HTML yang didalamnya terdapat sebuah plaintext akan menampilkan seluruh text dan tagnya dalam sebuah browser. Sintaknya adalah sebagai berikut :

<plaintext> .... teks .... </palintext>

Contoh Penggunaan Plaintext

<html>
<head>
<title>
Contoh Penggunaan Plaintext
</title>
</head>
<body>



APAKAH TUHAN MENCIPTAKAN KEJAHATAN



<hr>

 
<var>
by Doanco
29/09/2009
</var>







<var>
Apakah Tuhan menciptakan segala yang ada? Apakah kejahatan itu ada?
</var>

<var>
Apakah Tuhan menciptakan kejahatan?
</var>



<Plaintext>


<var>
Seorang Profesor dari sebuah universitas terkenal menantang mahasiswa-mahasiswanya dengan pertanyaan ini,
</var>

“Apakah Tuhan menciptakan segala yang ada?”.


<var>
Seorang mahasiswa dengan berani menjawab, “Betul, Dia yang menciptakan semuanya”.
</var>


“Tuhan menciptakan semuanya?” Tanya professor sekali lagi. “Ya, Pak, semuanya” kata mahasiswa tersebut.

<var>
Profesor itu menjawab, “Jika Tuhan menciptakan segalanya, berarti Tuhan menciptakan Kejahatan.
</var>
Karena kejahatan itu ada, dan menurut prinsip kita bahwa pekerjaan kita menjelaskan siapa kita, jadi kita bisa berasumsi bahwa Tuhan itu adalah kejahatan.”


<var>
Mahasiswa itu terdiam dan tidak bisa menjawab hipotesis professor tersebut.
Profesor itu merasa menang dan menyombongkan diri
</var>
bahwa sekali lagi dia telah membuktikan kalau agama itu adalah sebuah mitos.


<var>
Mahasiswa lain mengangkat tangan dan berkata, “Profesor, boleh saya bertanya sesuatu?”
</var>



</plaintext>
</body>
</html>

Simpan dengan nama Contoh 4.30.htm lalu jalankan pada browser seperti gambar berikut :

Catatan :
Tag Preformated tidak boleh diletakkan berdampingan dengan tag Paragraf . Karena keduanya memiliki fungsi yang sama yang akan mengakibatkan tampilan sebuah halaman akan tampak adanya baris kosong antara tag paragraf dan tag preformated.

LISTING 30 Sep 2009 5:08 AM (15 years ago)

Untuk mendifinisikan sebuah listing dalam dokumen HTML, digunakan perintah / tag <listing>. Biasanya hasil dari sebuah tetxt yang dilisting dalam satu paragraf dengan paragraf lainnya akan digabungkan menjadi satu paragraf, tetapi apabila ditambahkan tag paragraf, maka fungsi listing tidak akan tampak hasilnya. Sintaksnya adalah sebagai berikut :

<listing> .... teks .... </listing>

Contoh Penggunaan Listing

<html>
<head>
<title>
Contoh Penggunaan Preformated Text
</title>
</head>
<body>



DIMANA RUANG BELAJARKU....??????



<hr>



<var>
by Doanco
30/09/2009
</var>






Pagi ini saya datang ke sekolah dengan niatan untuk mengajar. Semalam saya menyiapkan segala keperluan untuk mengajar.






<var>
Karena materi yang kuajarkan adalah materi yang cukup rumit karena hampir sebagaian besar menyangkut etika dalam pelaksanaan bekerja.
</var>


Sebenarnya saya merasa malu dan risi dengan beberapa komentar yang disampaikan anak-anak lewat dunia maya (facebook) sebagai media untuk menyampaikan "unek-uneknya" itu. Seperti : "Sudah bayar sekolah tetapi tidak dapat ruang belajar, sekolah ...!(kata-kata jorok sekali),

<var>
sekolahe dibakar ae!, Ngene iki mending ning blandong(cafe tempat kumpul anak sekolahan) yo,,,pesan cappucino plus dengerke lagu2 klasik - ayo mulih ae!, demo ae....!!!!"
</var>


</listing>


<listing>

Mereka menyampaikan pesan-pesan tersebut dengan bahasa yang lugas dan tegas, apa adanya. yang pada prinsipnya saya menangkap bahwa mereka belajar merasakan tidak ada kenyaman.

</listing>

<listing>

Perlu disadari bahwa ruang kelas merupakan salah satu faktor yang mempengaruhi, pertama: mempengaruhi proses belajar para murid dalam menerima suatu pelajaran, dan kedua: mempengaruhi guru dalam menyampaikan pelajaran. Ruangan kelas yang baik adalah ruangan yang dapat digunakan anak-anak untuk mempelajari segala sesuatu dengan nyaman. Dalam menciptakan ruang kelas yang nyaman ini diperlukan berbagai penyesuaian kondisi di dalam ruang kelas tersebut.

</listing>
</body>
</html>

Simpan dengan nama Contoh 4.29.htm lalu jalankan pada browser seperti gambar berikut :

PREFORMATED TEXT 29 Sep 2009 2:47 AM (15 years ago)

Untuk mendifinisikan sebuah text preformate dalam dokumen HTML, digunakan erintah / tag <pre> agar tampak berbeda dengan teks yang lainnya. Biasanya hasil dari sebuah text yang terformat akan seperti text yang ditampilkan apa adanya. Sintaksnya adalah sebgai berikut :

<pre> .... teks .... </pre>

Contoh Penggunaan Preformated Text

<html>
<head>
<title>
Contoh Penggunaan Preformated Text
</title>
</head>
<body>



DIMANA RUANG BELAJARKU....??????



<hr>



<var>
by Doanco
13/09/2009
</var>




<pre>

Pagi ini sy datang ke sekolah dengan niatan untuk mengajar. Semalam saya menyiapkan segala keperluan untuk mengajar. Karena materi yang kuajarkan adalah materi yang cukup rumit karena hampir sebagaian besar menyangkut etika dalam pelaksanaan bekerja. Namun apa yang terjadi? Ketika saya mau mengajar kuperhatikan anak2 masih diluar. Kemudian kutanyakan pada mereka mengapa tidak masuk dikelas. Mereka sontak menjawab:"Tidak ada ruangan untuk belajar, pak? Lalu kataku dengan heran :"Hah..! Apa? Tidak ada ruangan?" Dengan perasaan jengkel anak2 saya tinggal pergi lalu saya tanya pada beberapa rekan pengajar. Bagaimana hal ini bisa terjadi?


<var>
Sebenarnya saya merasa malu dan risi dengan beberapa komentar yang disampaikan anak-anak lewat dunia maya (facebook) sebagai media untuk menyampaikan "unek-uneknya" itu. Seperti : "Sudah bayar sekolah tetapi tidak dapat ruang belajar, sekolah ...!(kata-kata jorok sekali), sekolahe dibakar ae!, Ngene iki mending ning blandong(cafe tempat kumpul anak sekolahan) yo,,,pesan cappucino plus dengerke lagu2 klasik - ayo mulih ae!, demo ae....!!!!"
</var>


</pre>

<pre>

Mereka menyampaikan pesan-pesan tersebut dengan bahasa yang lugas dan tegas, apa adanya. Yang pada prinsipnya saya menangkap bahwa mereka belajar merasakan tidak ada kenyaman.


</body>
</html>

Simpan dengan nama Contoh 4.28.htm lalu jalankan pada browser seperti gambar berikut :

Catatan :
Tag Preformated / <pre> tidak boleh diletakkan berdampingan dengan tag Paragraf . Karena keduanya memiliki fungsi yang sama yang akan mengakibatkan tampilan sebuah halaman akan tampak adanya baris kosong antara tag paragraf dan tag preformated.

VARIABEL 3 Jul 2009 11:23 AM (15 years ago)

Untuk mendifinisikan sebuah variabel dalam dokumen HTML, digubakan sebuah peritah / tag <var> agar tampak berbeda dengan teks yang lainnya. Sintaksnya adalah sebagai berikut :

<var> .... teks .... </var>

Contoh
Penggunaan Variabel

<html>
<head>
<title>
Contoh Penggunaan Variabel
</title>
</head>

<body>


SOLIDARITAS


<hr>




<var>
by Doanco
 
03/07/2009
</var>






Kedua anak tidak di rumah, yang bisa saya kerjakan ya hanya merenung dan mengkhayal.
<var>
Dalam khayalan saya berandai-andai.
</var>
"Andaikan saya menjadi orang kaya, saya akan menggunakan kekayaan itu untuk kegiatan-kegiatan kemanusiaan. Saya akan mendirikan panti asuhan, panti jompo, rumah sakit, memberikan bea-siswa dan sebagainya.




<fonr face="Comic Sans MS" size="2">

<var>
Saya akan peduli dengan orang orang-orang miskin dan menderita.
</var>

Pokoknya saya akan mewujudkan rencana itu dengan sebagian harta yang kumiliki untuk

<var>
menolong orang lain.
</var>



</body>
</html>

Simpan dengan nama Contoh 4.27.htm, lalu jalankan pada browser seperti gambar berikut :

TEXT TELETYPE 2 Jul 2009 5:46 PM (15 years ago)

Untuk mendifinisikan text teletype dalam dokumen HTML, digunakan sebuah perintah / tag <tt> agar tampak berbeda dengan teks yang lainnya. Sintaksnya adalah sebagai berikut :

<tt> .... teks .... &glt;/tt>

Contoh :
Penggunaan text Teletype

<html>
<head>
<title>Contoh Text Teletype</title>
</head>

<body>


29/06/2009


Di ATAS ATAU DI BAWAH ?


<hr>




<tt>
Beberapa waktu yang lalu saya dan kedua anak saya ke Yogyakarta.
</tt>

Kami sempat mampir ke sebuah Galery/studio. Ada seorang pematung yang membuat patung yang ditemani seorang Pria sebut saja Dedy.





<tt>

Saya memberanikan diri bertanya pada pematung :

</tt>
"Bung, patung yang anda buat ini apakah pesanan orang atau anda sedang membuat sebuah karya patung".
<tt>

Kemudian pematung itu menjawab katanya :

</tt>
"Patung yang saya buat ini adalah isterinya Bapak ini (maksudnya adalah Dedy). <tt>
Dengan berguman
</tt>
"OOO..." terus saya melanjutkan melihat karya-karya seni yang dipajang rapi. 

</body>
</html>

Simpan dengan nama Contoh 4.26.htm lalu jalankan pada browser seperti pada gambar berikut :

CONTOH COMPUTER CODE 27 Jun 2009 8:31 PM (15 years ago)

Untuk mendifinisikan contoh dari Computer Code dalam dokumen HTML, digunKn sebuah perintah / tag <samp> agar tampak berbeda dengan teks yang lainnya. Sintaksnya adalah sebagai berikut :

<samp> ....teks.... </samp>

Contoh
Penggunaan Contoh Computer Code

<html>
<head>
<title>Penggunaan Contoh Computer Code</title>
</head>

<body>


28/06/2009
 



MEMBELI WAKTU


<hr>




<samp>
Setiap hari ayah selalu pulang kerja pada malam hari.
</samp>

Seperti biasanya ayah ini pulang malam hari, dan merasa amat lelah dan uring-uringan ketika anaknya yang berumur 10 tahun menunggu di depan pintu.

<samp>

Eee, itu bukan urusanmu.

</samp>

Apa yang membuat kamu mengajukan pertanyaan itu?" jawab si ayah dengan sedikit menahan perasaan geramnya.

<samp>

Saya hanya ingin tahu saja kok ayah.

</samp>
Tolong, beritahu saya, berapa sebenarnya gaji ayah sejam?"


</body>
</html>

Simpan dengan nama Contoh 4.25.htm lalu jalankan pada browser seperti pada gambar berikut :

KEYBOARD 25 Jun 2009 6:05 PM (15 years ago)

Untuk mendifinisikan teks keyboard dalam dokumen html, digunakan perintah / tag <kbd> agar tampak berbeda dengan teks yang lainnya. Sintaks dari keyboard adalah sebagai berikut :

<kbd> .... teks .... </kbd>
Contoh
Penggunaan Keyboard

<html> <head> <title>Contoh Keyboard</title> </head> <body> 26/06/2009 DITINGGAL...... <hr> <kbd> Kita hidup bukan untuk selama-lamanya. </kbd> Cepat atau lambat, pada suatu hari nanti kita akan meninggal atau ditinggal. Mungkin kita perlu menyiapkan diri jika ditinggal oleh orang yang kita kasihi. Selama hidup berumah tangga, saya tidak ada pikiran bahwa isteriku akan dipanggil Tuhan disaat aku membutuhkan dia untuk mempersiapkan kedua anaku yang masing-masing sekolah di kelas 2 SMA dan SD kelas 6. <kbd> Karena penyakit kanker </kbd> yang dideritanya yang memisahkan aku dengan dia karena Tuhan punya rencana yang berbeda dengan apa yang menjadi keinginan dan harapanku. Ketika anak-anak, saya tinggal pergi tanpa pamit (pergi melayat ke Purworejo karena mertua teman sekerja meninggal dunia). Dia gelisah, mencari informasi keberadaan orangtuanya. <kbd> Semestinya ayah sudah pulang </kbd> dari kerja kok sekarang belum pulang? Apa yang terjadi dengan ayah? Ada apa ayah tak pulang? Kira-kira demikian kalau boleh digambarkan secara sekilas kegelisahan anak saya tersebut. </body> </html>

Simpan dengan nama Contoh 4.24.htm lalu jalankan pada browser seperti gambar berikut :

DOANCO View RSS

FORMAT IMAGE 1 Dec 2009 1:48 PM (15 years ago)

MULTIPLE STYLE SHEET 30 Nov 2009 11:22 PM (15 years ago)

STYLE SHEET INLINE 29 Nov 2009 6:38 PM (15 years ago)

STYLE SHEET EXTERNAL 25 Nov 2009 6:53 PM (15 years ago)

STYLE SHEET INTERNAL 24 Nov 2009 4:53 PM (15 years ago)

CASCADE STYLE SHEET 24 Nov 2009 4:40 PM (15 years ago)

FONT COLOR 22 Nov 2009 8:41 PM (15 years ago)

FONT SIZE 22 Nov 2009 3:38 AM (15 years ago)

FONT FACE 20 Nov 2009 9:12 AM (15 years ago)

FORMAT FONT dan CSS 19 Nov 2009 6:20 PM (15 years ago)

DEFINITION (Istilah) 18 Nov 2009 8:09 AM (15 years ago)

CITATION 17 Nov 2009 6:09 PM (15 years ago)

QUOTATION (Kutipan Pendek) 17 Nov 2009 1:19 AM (15 years ago)

QUOTATION / Kutipan Panjang (Blockquote) 16 Nov 2009 4:59 AM (15 years ago)

ARAH TEKS 12 Nov 2009 11:45 AM (15 years ago)

ALAMAT (Address) 11 Nov 2009 6:07 PM (15 years ago)

SINGKATAN (ACRONYM) 11 Nov 2009 2:17 AM (15 years ago)

XMP 10 Nov 2009 1:09 AM (15 years ago)

PALAINTEXT 3 Oct 2009 3:54 PM (15 years ago)

LISTING 30 Sep 2009 5:08 AM (15 years ago)

PREFORMATED TEXT 29 Sep 2009 2:47 AM (15 years ago)

VARIABEL 3 Jul 2009 11:23 AM (15 years ago)

TEXT TELETYPE 2 Jul 2009 5:46 PM (15 years ago)

CONTOH COMPUTER CODE 27 Jun 2009 8:31 PM (15 years ago)

KEYBOARD 25 Jun 2009 6:05 PM (15 years ago)