COPY PASTE: Apa itu HTML

Apa itu HTML?

HTML singkatan dari Hyper Text Markup Language,dalam arti umum,sebuah web adalah sebuah dokumen HTML,yang mana sebuah HTML itu sendiri merupakan bahasa yang menggunakaan tanda-tanda tertentu(Tag)untuk menyatakan kode-kode yang harus diterjemahkan oleh Browser,agar halaman dapat di tampilkan secara benar.

HTML sendiri,sebenarnya hanya dokument biasa,hanya dokumen ini dapat dilakukan untuk pemformatan text,peletakan object,maupun Hypertext yakni text yang berfungsi ganda sebagai penghubung (Link)antara halaman satu dengan yang lain.
Nah!link inilah yang menjadi ciri sekaligus membentuk suatu www (Jaringan global antar text / halaman)

Bagaimana contoh sederhana bentuk sebuah halaman HTML?

Sebagaimana Pengertian Blog pada posting pelajaran-blog.blogspot.com beberapa waktu lalu,bahwa sebuah halaman web yang baik,secara fisik akan terdiri dari sebuah Header,Body,Sidebar dan Footer.

Untuk membentuk sebuah halaman HTML secara sederhana,kita memanfaatkan Notepad pada komputer anda.

Tapi sebelum itu,pergi ke My Document,pilih Folder Option,lalu pilih View,kosongkan check box pada Hide Extentions for Known Filetypes,inihanya untuk memperlihatkan File type dari setiap file di komputer anda.

Setelah itu,buka Notepad dan tuliskan kode di bawah ini :

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<p>Hallo! aku sedang belajar blog di Pelajaran Blog !</p>

</body>

</html>

Setelah itu simpan dengan nama "belajar",yang nantinya di komputer anda akan menjadi"belajar.txt",setelah itu,klik kanan file tersebut pilih Rename rubah menjadi "belajar.htm".

Setelah itu,Open file tersebut,dan anda sudah bisa melihat suatu tampilan halaman HTML yang di maksud.

Apa keterangan dari kode-kode di atas?

Kode HTML,dalam setiap kodenya di awali dengan tanda <> dan di akhiri dengan </>

contoh:

<html>merupakan penandaan bahwa halaman HTML di mulai.

</html>merupakan tanda bahwa halaman html ditutup.

<Head>artinya merupakan awal kepala

</Head>artinya merupakan akhir bagian kepala.

<Title>menujukkan judul yang akan keluar pada Bar atas yang ditutup dengan </title>

<body>isi dari halaman tesebut,seperti contoh HTML diatas,isinya berupa kata "Hallo! aku sedang belajar blog di Pelajaran Blog !"
yang ditutup dengan akhir isi halaman,yaitu </body>

Sedangkan tanda <p> yaitu pembentukan alinea baru,seperti halnya anda menekan Enter pada Ms Word untuk membentuk kursor baru pada Alinea baru,yang mana diakhiri pula dengan tanda </p>.

Untuk membentuk alinea baru bisa juga menggunakan kode <br> dan diakhiri dengan </br>

Gimana? masih kurang jelas?untuk kode-kode pengoptimalan,seperti mempertebal huruf,miring,garis bawah,membuat tabel dan lain-lain silahkan kunjungi di sini.

Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halamanHTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :

Belajar

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :

Belajar

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :

Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :

<b><i><u>Belajar</u></i></b> hasilnya seperti :

Belajar

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :

Belajar

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span>hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

Membuat Huruf Besar semua (uppercase) gunakan kode :

<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :

BELAJAR

Membuat Huruf Small caps gunakan kode:

<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:

Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:

<p>4<sub>2</sub></p>hasilnya seperti ini:

4₂

Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4<sup>2</sup></p> hasilnya seperti ini:

4²

Membuat Huruf bergaris atas gunakan kode:

<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:

Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:

<strike>Belajar</strike> hasilnya seperti ini:

~~Belajar~~

Menentukan jenis huruf gunakan kode:

<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan ukuran huruf gunakan kode:

<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan warna huruf gunakan kode:

<p style="color: green; >Belajar</p> hasilnya seperti ini:

Belajar

Membuat bullet dot bolong gunakan kode:

<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1

DOT 2

DOT 3

Membuat bullet dot kotak gunakan kode:

<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot bulat gunakan kode:

<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Mengatur posisi bullet gunakan kode:

<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>

hasilnya seperti ini:

· DOT 1

· DOT 2

· DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:

<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>

hasilnya seperti ini:

Belajar

Membuat tabel border solid gunakan kode:

hasilnya seperti :

Text

Membuat tabel border dot gunakan kode:

<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border dashed gunakan kode:

<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:

<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Ridge gunakan kode:

<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Insert gunakan kode:

<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Outset gunakan kode:

<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat Tabel Biasa gunakan kode :

<table border="1"width="200"><td>Text</td></table>

hasilnya seperti:

Text

Membuat Tabel berwarna gunakan kode :

<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

Membuat Tabel berwarna tak berbingkai gunakan kode :

<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

Baca Juga Yang Ini..

Klik tombol 'Buat Popular Post' di bawah ini jika anda merasa konten/postingan yang sedang anda baca sangat menarik dan bermanfaat bagi anda.

Menampilkan Kode Pada Artikel

Hallo! Update lagi nih!

Lagi musim naikin Page Rank maupun Traffic,kita harus rajin mosting..betul ga?
Meskipun postingan banyak yang Tong kosong nyaring bunyinya yang penting bermanfaat.

Meletakkan kode di dalam postingan,sebenarnya hanya masalah penyesuaian saja,maksudnya,agar sang blog
tidak dibikin bingung,makanya kode yang ingin kita tampilkan pada postingan harus di parse dulu.

Apa jadinya kalau tidak di Parse?

Jika kode yang ingin kita tampilkan tidak di parse terlebih dahulu,maka saat kita akan mempublikasikan,akan ada peringatan kesalahan format dan bahkan kode tidak tampil,sekalipun berhasil di publikasikan,betul ga?

Untuk mengantisipasinya ya hanya memparse kodenya.

Parse ! Parse ! apaan sich ?

Parse menurut saya pribadi,ya hanya mengganti karakter kode menjadi notasi lain,misal :
Untuk tanda-tanda di bawah ini :

< notasinya : <
> notasinya : >
& notasinya : &
" notasinya : "
± notasinya : ±
Spasi notasinya :

Contoh:
Saya ingin menampilkan kode <body> pada posting,maka saya saat memosting harus menuliskan <body>.Jelas khan ?

Contoh lain,saya ingin pembaca mengcopy kode berikut :

<html>
<head>
</head>
<body>
<a href="http://pelajaran-blog.blogspot.com/">Klik Disini</a>
</body>
</html>

Maka,saya dalam memposting harus menuliskan sebagai berikut :

<html>
<head>
</head>
<body>
<a href="http://pelajaran-blog.blogspot.com/">Klik Disini</a>
</body>
</html>

Parse kode,..bener ga sich artinya kaya' gitu ? Gubrak !

Membuat Tex Area (3 Macam)

Text Area Biasa

Biasanya text area di gunakan untuk menyimpan kode-kode Html/Javascript ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="5" cols="20" readonly>

Aku   Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang   pada ngiri ama aku karena aku terlalu tampan!! :)

</textarea></p>

Keterangan :
rows="6", menunjukan tinggi dari text area.
Cols="20", menunjukan lebar dari text area.

Hasilnya akan seperti di bawah ini :

Text Area Dengan Memakai HighLight /Select

Highlight atau Select All,yaitu dimana saat kita tekan tombol Select All,maka kode dalam text area akan otomatis terblok semua.

Untuk kodenya,copy paste di bawah ini :

<div>
<form name="Select All code">

<p align="left" style="margin-top: 0;   margin-bottom: 0"><textarea style="width: 184; height:   120" name="txt" rows="100" wrap="VIRTUAL"   cols="55" readonly>

Aku   Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang   pada ngiri ama aku karena aku terlalu tampan!! :)

</textarea></p>
</div>
<p align="left" style="margin-top: 0; margin-bottom: 0">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All">

Contoh hasilnya :

Yang berperan penting untuk highlightnya sebenarnya hanya pada kode

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">

jadi,jangan sampai dirubah ya :)

Text Area Select Otomatis

Anda pasti pernah khan mengunjungi suatu situs yang memberikan sebuah kode html,seperti kode Adsense,dll.

Ya,kode akan terblok sendiri,hanya dengan menggerakkan mouse diatas bidang kodenya.

Untuk kode dan contohnya lihat disini

Selamat mencoba :)

Membuat Tempat Kode Script / Html

Seperti yang pernah saya posting beberapa waktu yang lalu,hanya kali ini menggunakan kodeyang sangat sederhana.seperti saat ingin memposting suatu blog,dan ingin menyampaikan kode kepada pengunjung,biasanya kita mengalami kesulitan.

Misalnya kesalahan yang terjadi karena hasil kode seperti penulisan tanda <head> atau<tabel> akan berbeda hasilnya saat posting telah di publikasikan,bahkan tidak akan muncul pada artikel yang telah di publikasikan.

Untuk itu,penulisan tanda-tanda/karakter seperti <,>,",&,dll harus dituliskan dengan notasi yang berbeda.Untuk menandai/membuat bidang atau tempat untuk kode(hanya bersifat hiasan saja),copy paste kode di bawah ini :

<table border="0"width="361"><tr><td bgcolor="#E0E0E0"
width="353"> Kode anda Disini</td></tr></table>

Bagian "Kode anda Disini" yang berwarna hijau diatas,untuk area,artikel yang ingin anda posting.

Sedangkan,jika anda ingin menyampaikan/memposting suatu kode html/javascript,tetap di area yang berwarna hijau diatas(jika ingin kode berada dalam sebuah tabel),
dengan catatan:karakter dari kode yang ingin anda sampaikan,di ubah dalam sebuah notasi.Untuk lebih jelasnya lihat Ilustrasi di bawah ini :

Jika saya ingin menuliskan <head> pada artikel saya,maka pada saat memposting saya akan menuliskan sebuah kode :

<head>

Notasi yang tercetak tebal di atas (< dan > ),saat posting terpublikasikan,akan tampil menjadi karakter < dan >.

Untuk lebih jelasnya soal notasinya anda bisa baca di sini.

Sudah jelas khan ?
Untuk simbol atau karakter yang lain seperti; $,#,*,dll bisa anda tuliskan seperti biasanya.

Menghias Text Area Pada Blog

Setelah posting tentang membuat meta y_key dan meletakkan sebuah object gambar sebelum Judul post pada blog beberapa hari lalu,pelajaran kali ini kita akan membahas tentang bagaimana belajar tentang menghias text area pada blog.

Bagi yang belum tahu bagaimana cara membuat text area,anda bisa baca di membuat text area(3 macam) pada artikel blog ini.

Maksudnya menghias text area?

Ya,utuk meletakkan sebuah kode pada artikel,biasanya kita memakai sebuah text area yang berbentuk form,meskipun Pelajaran Blog jarang menggunakan area jenis ini (ribet,he..).

Contoh text area biasa seperti ini :

dengan kode seperti ini :

<form name="contohtextarea"><textarea name="txt" rows="3" cols="30" readonly>Text Anda Disini</textarea></form>

**rows dan cols menentukan ukuran text area,disitu anda edit sesuai keinginan anda.

Tapi jika anda menginginkan sebuah form area kode yang berbeda,anda bisa coba contoh-contoh text area di bawah ini:

Menghias Text Area Contoh #1

Text area di atas:

Background berwarna kuning
Border berwarna biru (dot)
Warna Text Merah
Text bergaris bawah

Untuk kodenya copy kode di bawah ini :

<form><textarea rows="3" cols="30" background-color="green"

style="color: red; background-color:   yellow; text-decoration: underline; border-style: dotted; border-color:   blue">Text Anda Disini</textarea></form>

Menghias Text Area Contoh #2

Text area di atas:

Background berwarna Hijau
Border berwarna Kuning (solid)
Text Huruf Besar (Uppercase)
Warna Text Putih

Untuk kodenya copy kode di bawah ini :

<form><textarea   rows="3" cols="30" style="color: white;   background-color: green; text-transform: uppercase; border-style: solid;   border-color: yellow">Text Anda Disini</textarea></form>

Menghias Text Area Contoh #3

Text area di atas:

Background berwarna Biru
Border berwarna Merah (solid)
Text Tanpa bergaris bawah
Warna Text Kuning

Untuk kodenya copy kode di bawah ini :

<form><textarea   rows="3" cols="30" style="color: yellow;   background-color: blue; border-style: solid; border-color: red" >Text   Anda Disini</textarea></form>

Menghias Text Area Contoh #4

Text area di atas:

Background berwarna Hijau
Border berwarna gray/abu-abu(solid)
Warna text Putih dan berhuruf tebal
Kode terinstall/terblok otomatis

Untuk kodenya copy kode di bawah ini :

<form   name="contohtextarea"><textarea name="txt"   rows="3" cols="30"   onmouseover="this.form.txt.select()" readonly ; style="color:   white; background-color: green; font-weight: bold; border-color:gray">Text   Anda Disini</textarea></form>

Untuk jenis-jenis yang lain anda bisa modif sendiri,selamat mencoba ya:)

COPY PASTE

text maarque kanan

salju

Jumat, 30 Desember 2011

Apa itu HTML

Menampilkan Kode Pada Artikel

Apa jadinya kalau tidak di Parse?

Parse ! Parse ! apaan sich ?

Membuat Tex Area (3 Macam)

Text Area Biasa

Text Area Dengan Memakai HighLight /Select

Text Area Select Otomatis

Menghias Text Area Pada Blog

Maksudnya menghias text area?

Menghias Text Area Contoh #1

Menghias Text Area Contoh #2

Menghias Text Area Contoh #3

Menghias Text Area Contoh #4

Tidak ada komentar:

Posting Komentar