DOANCO: HTML

Tampilkan postingan dengan label HTML. Tampilkan semua postingan

02 Desember 2009

FORMAT IMAGE

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).

01 Desember 2009

MULTIPLE STYLE SHEET

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 :

30 November 2009

STYLE SHEET INLINE

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 :

26 November 2009

STYLE SHEET EXTERNAL

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 :

25 November 2009

STYLE SHEET INTERNAL

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

Cascade Style Sheet dalam dokumen HTML terbagi atas tiga jenis :

23 November 2009

FONT COLOR

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 :

22 November 2009

.... 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 :

21 November 2009

FONT FACE

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 :

20 November 2009

FORMAT FONT dan CSS

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 :

19 November 2009

DEFINITION (Istilah)

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 :

18 November 2009

CITATION

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 :

17 November 2009

QUOTATION (Kutipan Pendek)

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 :

16 November 2009

QUOTATION / Kutipan Panjang (Blockquote)

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 :

13 November 2009

ARAH TEKS

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 :

12 November 2009

ALAMAT (Address)

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 :

11 November 2009

SINGKATAN (ACRONYM)

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 :

10 November 2009

XMP

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 :

04 Oktober 2009

PALAINTEXT

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.

30 September 2009

LISTING

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 :

Mengenai Saya

Blog Directories

02 Desember 2009

01 Desember 2009

30 November 2009

26 November 2009

25 November 2009

23 November 2009

22 November 2009

21 November 2009

20 November 2009

19 November 2009

18 November 2009

17 November 2009

16 November 2009

13 November 2009

12 November 2009

11 November 2009

10 November 2009

04 Oktober 2009

30 September 2009

Blog Directories

Pengikut

Category

Tutorial Blogger

Tutorial Elektronika

Tutorial CorelDRAW

Tutorial Movie Maker

Seberapa Beratkah Blogmu ?