Mengubah Warna Teks Pada HTML

Mengubah Warna Teks Pada HTML

HTML menyediakan elaman FONT yang dapat digunakan untuk mengubah warna, ukuran dan jenis font suatu teks. Ada bermacam-macam jenis font yang bisa digunakan pada dokumen HTML. Jenis-jenis
font seperti ARIAL, TIMES NEW ROMAN, CENTURY GOTHIC, COURIER NEW
dan sebagainya.

Penggunaannya pada HTML
<Font Face=”arial”>Font jenis Arial</font>  
 <Font Face=”Comic San MS”> Jenis Font Comic San MS</font>  

Secara garis besar atribut-atribut yang digunakan elemen FONT adalah sebagai
berikut :

  1. Size : Diisi dengan angka 1 sampai 7 Digunakan untuk mengatur ukuran font
  2. Color : Nama warna RGB (#XXXXXXXXX) Digunakan untuk mengubah warna font
  3. Face : Jenis font Digunakan untuk mengubah jenis font
Penggunaan atribut-atribut tersebut dapat di satukan dalam satu elemen FONT sehingga akan diperoleh gabungan dari warna, ukuran dan jenis font.

Contoh dalam HTML

<html>   
 <body>   
 <font size=”6” color=”green” face=”arial”>Gabungan beberapa atribut  
 pada suatu teks</font>  
 </body>   
 </html>   

Hasilnya akan tampak seperti pada gambar dibawah:

Demikian semoga bermanfaat
Mengubah Warna Teks Pada HTML

Mengubah Warna Teks Pada HTML

 HTML menyediakan elaman FONT yang dapat digunakan untuk mengubah warna, ukuran dan jenis font suatu teks. Penggunaan warna pada teks mulai diperkenalkan dengan menggunakan atribut COLOR pada elemen FONT. Pendefinisian warna dapat dilakukan dengan dua cara yaitu, melalui nama warna atau menggunakan nilai RGB warna.

Adapun warna yang dikenal pada HTML 3.2 hanya 16 warna.
  1. Aqua 
  2. Black
  3. Blue
  4. Fuchsia
  5. Gray
  6. Green
  7. Lime
  8. Maroon
  9. Navy
  10. Olive
  11. Purple
  12. Red
  13. Silver
  14. Teal
  15. White
  16. Yellow
Penggunaan pada HTML adalah sebagai berikut:

<font color =”red”>teks berwarna merah</font>  
 <font color=”#8A2BE2”>Teks berwarna Blueviolet</font>  


Demikian semoga bermanfaat



Menentukan Ukuran Teks Pada HTML

Menentukan Ukuran Teks Pada HTML

HTML menyediakan elaman FONT yang dapat digunakan untuk mengubah warna, ukuran dan jenis font suatu teks. Untuk mengatur ukuran suatu teks, elemen FONT menyediakan atribut SIZE dengan nilai dari 1 sampai 7. Semakin besar angka, maka semakin besar ukuran teks tersebut.

Contoh berikut memperlihatkan kode HTML dengan menggunakan berbagai ukuran font :

<font size=1>ukuran teks=1</font>
<font size=2>ukuran teks=2</font>
<font size=3>ukuran teks=3</font>
<font size=4>ukuran teks=4</font>
<font size=5>ukuran teks=5</font>
<font size=6>ukuran teks=6</font>
<font size=7>ukuran teks=7</font>

Perhatikan potongan listing dibawah:

<html>   
 <body>   
 <font size=1>ukuran teks=1</font> <br>  
 <font size=2>ukuran teks=2</font> <br>  
 <font size=3>ukuran teks=3</font> <br>  
 <font size=4>ukuran teks=4</font> <br>  
 <font size=5>ukuran teks=5</font> <br>  
 <font size=6>ukuran teks=6</font> <br>  
 <font size=7>ukuran teks=7</font> <br>  
 </body>   
 </html>   

Hasilnya Pada browser akan tampak seperti gambar dibawah:


Demikian semoga bermanfaat
Phisical Style Pada HTML

Phisical Style Pada HTML

Phisical style adalah suatu jenis format yang diberikan pada teks tanpa tergantung pada jenis dari elemen dasar teks tersebut. Elemen-elemen ini sudah sering kita pakai dalam program pengolah kata, seperti menebalkan atau membuat miring suatu teks.

Adapun elemen-elemen pisik yang dapat diterapkan pada dokumen HTML adalah :

<B>Untuk menebalkan teks</B>
<I>Untuk membuat teks terlihat miring</I>
<U>Untuk menggarisbawahi teks</U>
<S>Untuk memberikan coretan pada teks</S>
<BLINK>Membuat teks berkedip (khusus netscape)</BLINK>
<TT>Menampilkan teks dalam format typewriter<TT>
<BIG>Untuk membesarkan teks<BIG>
<SMALL> Untuk mengecilkan teks<SMALL>
<SUB>Membuat teks subscript<SUB>
<SUP>Membuat teks superscript<SUP>

Berikut Syntaxnya:

<html>   
 <body>   
 <B>Untuk menebalkan teks</B> <br>  
 <I>Untuk membuat teks terlihat miring</I><br>  
 <U>Untuk menggarisbawahi teks</U><br>  
 <S>Untuk memberikan coretan pada teks</S><br>  
 <BLINK>Membuat teks berkedip (khusus netscape)</BLINK><br>  
 <TT>Menampilkan teks dalam format typewriter<TT><br>  
 <BIG>Untuk membesarkan teks<BIG><br>  
 <SMALL> Untuk mengecilkan teks<SMALL><br>  
 <SUB>Membuat teks subscript<SUB><br>  
 <SUP>Membuat teks superscript<SUP>   
  </body>   
  </html>   

Berikut adalah contoh tampilan phisical style pada browser


Demikian Semoga Bermanfaat
Cara Membuat Teks Preformat

Cara Membuat Teks Preformat

Dalam sebuah dokumen HTML jarak antara teks dengan teks yang lain adalah satu spasi. Begitu juga dengan antara satu kalimat dengan kalimat yang lain, yaitu satu spasi. Berapapun jumlah spasi atau jumlah baris yang kita ketikkan, browser akan menampilkannya sebagai  satu spasi.

Agar browser menampilkan jarak yang sesunggunya sesuai dengan dokumen web yang kita ketikkan maka teks harus diberi tanda tag <pre> diawal dan tag </pre> di akhir teks yang bersangkutan.
Dengan Tag <pre> atau preformat teks yang dibuat pada dokumen html akan ditampilkan oleh browser seperti aslinya. Tag ini akan menampilkan ukuran font dengan lebar-fix, spasi, baris baru dan tab seperti yang dibuat pada dokumen web.

Contoh teks preformat

<!--- Teks Preformat -->  
 <html>  
 <body>  
 <pre>  
   Void node: :Remove()  
   {  
     If (pref)  
     Pref - > next = next ;  
   Else  
     Parent - > SetContent (null);  
   If (next)  
     Next - > pref = pref ;  
   Parent = null;  
   }  
 </pre>  
 </body>  
 </html>  

 Hasilnya akan tampak seperti gambar dibawah:



Dalam teks yang dibuat dengan preformat kita masih bisa menyisipkan tag lain untuk pemformatan, tapi hal ini sangat tidak dianjurkan
Cara Membuat Format Teks Html

Cara Membuat Format Teks Html

Kita dapat memformat teks dalam dokumen html yang gunanya untuk membedakan teks secara khusus dari teks yang lain.Teks yang diformat secara khusus bertujuan untu memberikan penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan boleh ditampilkan dengan huruf tebal, huruf miring, digaris bawahi dll.

Ada beberapa pemformatan teks :
•    Menebalkan huruf
•    Memiringkan huruf
•    Memberi tekanan pada teks (emphasize)
•    Mengecilkan huruf
•    Superscript
•    Subscript

Lihat contoh dibawah


<!--- teks format-->  
 <html>  
 <body>  
 <br>  
 <strong> Teks ini ditebalkan </strong> <br>  
 <big> Teks ini besar </big><br>  
 <em> Teks ini emphasize </em><br>  
 <I> teks ini miring/italic </I><br>  
 <small> Teks ini kecil </small><br>  
 Teks ini <sub> subscript </sub><br>  
 Teks ini <sup> superscript </sup>  
 </body>  
 </html>  

Hasilnya seperti gambar

Demikian Semoga Bermanfaat
Cara Membuat Marquee pada HTML

Cara Membuat Marquee pada HTML

Marquee adalah penulisan sebuah teks berjalan pada dokumen html. Sintaks penulisan marquee adalah sebagai berikut :

<marquee [property]> teks marquee </marquee>

Properti adalah kemampuan yang dimiliki pada tag marquee
•    Behavior yaitu cara atau teknik dari marquee untuk menjalankan teks. Nilainya adalah scroll atau mengulang searah teks, slide atau menggulung searah teks dan teks berjalan bolak-balik
•    Direction yaitu Arah teks berjalan

Untuk membuat marquee atau berjalan silahkan ketikkan listing berikut.

<!--marquee -->  
 <html>  
 <head>  
 <title> teks berjalan </title>  
 </head>  
 <body>  
 <p> <marquee>Ini adalah marquee default, Teks ini akan berjalan secara otomatis dari kanan ke kiri. </marquee> </p>  
 <p> <marquee direction="right">Teks dengan marquee ini akan berjalan secara otomatis dari kiri ke kanan. </marquee> </p>  
 </body>    

Simpan sebagai marquee.html dan jalankan pada browser maka hasilnya akan seperti gambar dibawah.



Demikian semoga bermanfaat
Cara Membuat Garis Mendatar Pada HTML

Cara Membuat Garis Mendatar Pada HTML

Sebuah garis dapat disisipkan dalam suatu dokumen yang umumnya digunakan untuk memisahkan antar bagian atau pragraf. Penggaris mendatar dituliskan dengan tag <hr> diakhir dokumen.

Syntax Penggaris Mendatar

<p> Penggaris Mendatar </p>  
 <hr>  
 <p> Penggaris Mendatar 2 </p>  
 <hr>  

Cara Membuat Line Break Pada HTML

Cara Membuat Line Break Pada HTML

Line break ( ganti baris) adalah penulisan  suatu dokumen html yang akan ditampilkan pada baris baru tanpa harus berganti pragraf. Jadi disini teks yang dituliskan akan ditampilkan pada baris selanjutnya didalam satu pragraf. Untuk penulisannya digunakan tag <br> sebelum teks dituliskan.

Untuk membuat line break buka notepad dan ketikkan listing dibawah.




<!-- Line Break -->  
 <html>  
 <head>  
 <title> line break </title>  
 </head>  
 <body>  
 <p>Ini adalah line break. <br>Line break digunakan untuk membuat tulisan tampil pada baris baru pada satu pragraf.  
 <br>Untuk membuat line break digunakan tag &lt;br&gt;  
 Bukan dengan menggunakan/menekan "enter",  
 Karna  
 dengan  
 menggunakan  
 "Enter"  
 berapa  
 kalipun  
 browser  
 tetap  
 akan  
 menyatukan  
 tulisan  
 tersebut.  
 </body>  
 </html>  

Selanjutnya save as dengan nama linebreak.html. Uji file dan hasilnya akan tampak seperti gambar.


Demikian semoga bermanfaat
Cara Membuat Heading Pada HTML

Cara Membuat Heading Pada HTML

Teks dalam dokumen umumnya mempunya judul topic. Pada teks html judul ini disebut heading. Heading tulisan akan ditampikan dengan huruf besar dan ditebalkan. Heading juga sering digunakan untuk penekanan makna dari suatu kata atau kalimat yang akan dituliskan.

Ada 6 tingkat heading didalam html yang dinomori dari satu sampai enam. Nomor satu merupakan nomor yang terbesar, dan nomor enam adalah nomor yang terkecil. Setiap heading dituliskan dengan tag <h1> dan ditutup dengan tag </h1>.


Contoh:
<h1> Heading satu </h1>

Tag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris-align.
•    Kiri – left (default)
•    Tengah – center
•    Kanan –right

Agar lebih jelas buka notepad anda dan ketikkan listing berikut :

<html>  
 <head>  
 <title> Heading </title>  
 </head>  
 <body>  
 <h1> Ini heading 1 </h1>  
 <h2> Ini heading 2 </h2>  
 <h3> Ini heading 3 </h3 >  
 <h4> Ini heading 4 </h5>  
 <h5> Ini heading 5 </h5>  
 <h6> Ini heading 6</h6>  
 <p> Gunakan tag heading hanya untuk penulisan heading.  
 <br> Jangan gunakan tag ini hanya untuk memperbesar suatu teks. </p>  
 </body>  
 </html>  


Simpan sebagai heading.html dan hasilnya akan seperti  gambar dibawah ini :


Selanjutnya untuk men gatur tata letak heading dalam baris –align, ketikkan listing berikut :

<!—heading 2-->  
 <html>  
 <head>  
 <title> Heading dengan alignment </title>  
 </head>  
 <body>  
 <h1> Heading Kiri </h1>  
 <br> Heading Kiri adalah heading Default. Tanpa harus menuliskan pasisi “left” seperti di bawah, posisi heading secara default akan berada di kiri.  
 <h1 align =”left”> Heading Kiri </h1>  
 <h1 align =”center”> Heading Kanan </h1>  
 <h1 align =”right”> Heading Kanan </h1>  
 </body>  
 </html>  

Setelah di save dan dijalankan pada browser maka hasilnya akan tampak seperti gambar dibawah .



Demikian Semoga bermanfaat....
Cara Membuat Paragraf Pada HTML

Cara Membuat Paragraf Pada HTML

Pragraf digunakan untuk memisahkan antara paragraf yang satu dengan berikutnya. Penulisan pragraf
Dimulai dengan tag <p>. Diakhir pragraf tidak diharuskan untuk menuliskan </p> sebagai akhir pragraf.
Dan untuk setiap pergantian pragraf harus dituliskan kembali tag <p>. Paragraph ada yang bertipe rata kiri, tengah, kanan dan justify.

 Agar lebih jelas, ketikkan listing dibawah pada notepad sobat dan save as pragraf1.html

<!—contoh pragraf1-->  
 <html>  
 <head>  
 <title> Pragraf 1</title>  
 </head>  
 <body>  
 <p> Pragraf digunakan untuk memisahkan antara paragraf yang satu dengan berikutnya. Penulisan pragraf dimulai dengan tag &lt;p&gt;. Diakhir pragraf tidak diharuskan untuk menuliskan &lt;/p&gt; sebagai akhir pragraf.</p>  
 <p> Ini adalah pragraf kedua. Untuk setip pergantian pragraf harus dituliskan kembali tag &lt;p&gt; diawal pragraf. </p>  
 </body>  
 </html>  

 Hasilnya seperti gambar dibawah






Selanjutnya ketikkan listing berikut pada note pad dan beri nama pragraf2.html.

<!—contoh pragraf dengan align-->  
 <html>  
 <head>  
 <title> Pragraf2</title>  
 </head>  
 <body>  
 <p align="left"> Teks rata kiri </p>  
 <p align="center"> Teks rata kiri </p>  
 <p align="right"> Teks rata kiri </p>  
 <p align="justify">Paragraph ini bertipe justify. Dimana semua teks pada dokumen akan dibuat lurus sama dengan batas tepi halaman. Tag &lt;p&gt; dan &lt;/p&gt; merupakan default atau bentuk baku tag pragraf dimana teks atau paragraf akan  
 berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag  
 &lt;p&gt; maka browser akan menganggap rata kiri.</p>  
 </body>  
 </html>  

 Setelah diuji pada browser maka hasilnya akan seperti gambar dibawah



Demikian Semoga Bermanfaat....

Tag Body Pada HTML

Tag Body Pada HTML

Tag Body merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang akan ditampilkan pada browser harus dituliskan.
Cara penulisannya :
<body> di awal setelah tag <head>
</body> diakhir sebelum tag </html>

Pada tag body terdapat beberapa atribut namun ada dua yang terpenting yaitu background dan bgcolor. Atribut background digunakan untuk membuat sebuah gambar menjadi latar dari halaman. Sedangkan bgcolor digunakan untuk menset warna dari latar halaman website. Kali ini yang akan dibahas hanyalah tag bgcolor karena tag background nilainya sama dengan tag image.
Tag Dasar Pada HTML

Tag Dasar Pada HTML

HTML memiliki beberapa tag dasar dasar diantaranya:

1. Html

Tag dasar yang mendefinisikan bahwa dokumen adalah dokumen html. Tag ini merupakan keharusan bagi pemrogram web untuk menuliskannya dalam dokumen sebagai tag pembuka dan penutup.
<html> diawal dokumen
</html> di akhir dokumen
Cara Menyimpan File HTML

Cara Menyimpan File HTML

Cara Menyimpan File HTML
Pada dasarnya setiap dokumen atau file yang disimpan secara default atau secara otomatis akan diberikan sebuah extention atau akhiran. ntuk dokumen yang disimpan dengan menggunakan format HTML, maka pada setiap dokumen yang disimpan harus ditambahkan sebuah akhiran .htm atau .html (dibaca dot htm atau dot html).
Sekilas Tentang HTML

Sekilas Tentang HTML

Sekilas Tentang HTML
HTML adalah kependekan dari Hyper text Markup Language. Dokumen HTML adalah file teks murni yang  menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web, yang dapat dibuat dengan editor teks sembarang. Editor untuk memdesain suatu web dibagi 2 yaitu yang bersifat text murni dan yang WYSIWYG (Graphic) Editor untuk text, anatara lain Notepad dan
Ultra Edit. Sedang editor WYSIWYG adalah Netscape dan Front Page.