Home All posts

4 Des 2016

|

Tutorial HTML : Cara Membuat Huruf Miring

Cara Membuat Huruf Miring HTML
Merubah Format Teks menjadi huruf miring merupakan suatu hal yang biasa kita lakukan pada Aplikasi Pengolah kata seperti MS. Word. Akan tetapi pada HTML kita memerlukan tag <i> atau <em> untuk merubah teks menjadi miring dan juga membahas Perbedaan kedua tag tersebut :

HTML TAG <i>

Tag <i> adalah singkatan dari italic. Italic merupakan sebutan untuk karakter text yang ditulis miring. Pada awalnya, tag <i> tidak memiliki arti struktur apa-apa, dan pernah berstatus deprecated yang artinya disarankan untuk tidak digunakan lagi.

Hal ini terjadi karena tag <i> semata-mata bertujuan untuk membuat huruf italics, atau garis miring. Sebagian programmer berpendapat bahwa tag yang bertujuan visual seperti ini sebaiknya tidak dipakai dan dialihkan kepada CSS.

Pada era HTML5 saat ini, tag <i> tetap dipertahankan, namun defenisinya diganti menjadi “alternative voice”. Alternative Voice dimaksudkan untuk menandai bagian artikel yang ‘pengucapan’ atau ‘mood‘-nya berbeda, seperti untuk menandai kata atau kalimat yang berasal dari bahasa asing.

Tag <i> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <i> di dalam HTML:

Contoh Penggunaan Tag <i> :


<!DOCTYPE html>
<html>

  <head>
    <title>Membuat Huruf Miring HTML</title>
  </head> 

  <body>
    <h3>Saya sedang belajar HTML di tutorialnyaini.blogspot.co.id</h3>
    <p>HTML adalah singkatan dari <i>Hypertext Markup Language</i></p>
  </body> 

</html>

Cara Membuat Huruf Miring HTML

HTML TAG <em>

Tag <em> adalah singkatan dari Stresses Emphasis. Stresses Emphasis ditujukan untuk menandai bagian text yang perlu di tekankan. Dalam implementasinya, tag <em> akan ditampilkan dengan huruf miring, sehingga mirip dengan tag <i>.
Tag <em> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Contoh Penggunaan Tag <em> :


<!DOCTYPE html>
<html>

  <head>
    <title>Membuat Huruf Miring HTML</title>
  </head>
 
  <body>
    <p>Saya sedang belajar HTML di <em>tutorialnyaini.blogspot.co.id</em></p>
    <p>HTML adalah singkatan dari Hypertext Markup Language</p>
  </body>

</html> 

Cara Membuat Huruf Miring HTML

Penutup  

Walaupun keduanya sama-sama ditampikan dengan garis miring, tag <i> dan tag <em> dimaksudkan untuk tujuan yang berbeda. Tag <em> digunakan untuk penekanan kata, sedangkan tag <i> digunakan untuk kata asing yang pengucapannya berbeda.

Dalam penggunaan sehari-hari, kedua tag ini sering dipertukarkan. Bahkan tag <i> lebih sering digunakan dibandingkan dengan tag <em>. Beberapa programmer juga berpendapat bahwa kita tidak harus mengikuti aturan perbedaan ini, dan menggunakan apa yang lebih familiar selama hal itu tidak menjadi masalah.

Terima Kasih telah mengunujungi tutorialnyaini.blogspot.co.id jika kalian suka dengan tutorial / artikel yang telah saya tulis tekan CTRL + D dan Bagikan kepada Teman teman anda



Read More

3 Des 2016

|

Tutorial HTML : Cara Membuat Huruf Tebal dalam Teks

membuat Huruf Tebal HTML

Pada Tutorial kali ini saya akan membagikan cara membuat huruf tebal pada teks di HTML, Tapi untuk membuat huruf menjadi tebal di HTML harus menggunakan tag dan di HTML telah disediakan Tag Untuk Membuat huruf menjadi tebal yaitu <strong> dan <b>.

HTML <b> TAG :

Menurut spesifikasi HTML5, tag <b> harus digunakan sebagai pilihan terakhir bila tidak ada tag lain yang lebih sesuai. dan untuk kasus tag <b> kebanyakan browser akan menampilkan teks menjadi Tebal .

Contoh Penggunaan Tag <b> beserta Output:


<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Huruf tebal di HTML</title>
  </head>
  <body>
    <p>Kali ini saya sedang belajar di
     <b>Tutorialnyaini.blogspot.com</b> untuk membuat huruf <b>Tebal</b> di HTML
  </body>
</html>

Screenshot Huruf Tebal HTML

 HTML <strong> TAG :

Menurut Spesifikasi HTML5, tag <strong> adalah tag untuk menunjukkan bahwa sebuah kalimat itu penting dengan menampilkan cara menampilkan teks lebih tebal dari ukuran semula.

Contoh Penggunaan Tag <strong> beserta Output:


<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Huruf tebal di HTML</title>
  </head>
  <body>
    <p>Kali ini saya sedang belajar di <strong>Tutorialnyaini.blogspot.com</strong> untuk membuat huruf <strong>Tebal</strong> di HTML <strong>Menggunakan Tag strong </strong>
  </body>
</html>

screenshot huruf tebal html

Penutup 

Pada spesifikasi HTML5 kedua tag tersebut memiliki tampilan yang sama akan tetapi dengan pengertian yang berbeda seperti yang di sebutkan di atas dan tag <b> lebih sering di gunakan dari pada tag <strong>. Akan Tetapi menggunakan teks tersebut untuk penulisan judul, dan lebih baik menggunakan tag <h1> sampai dengan <h6> untuk menampilkan sebuah judul karena tag <b> tidak dapat dibaca dengan baik oleh mesin penelusuran seperti Google, Bing, Ask.com, dll.

Saya kira anda sudah cukup memahami cara membuat Huruf tebal dalam suatu teks di HTML dan jika ada pertanyaan silahkan comment pada halaman ini dan follow sosial media saya.

Terima Kasih telah mengunjungi Blog Jika anda menyukainya tekan CTRL + D
Read More

2 Des 2016

|

Tutorial HTML : Cara Mengubah Warna Teks tanpa CSS

Mengubah / Memberi Warna Tulisan HTML

Untuk kali ini saya akan membagikan bagaimana caranya mengubah warna teks menggunakan HTML saja tanpa CSS kalian bisa menggunakan tag font <font> dengan menambah kan attribut color pada tag font, akan tetapi cara ini tidak saya rekomendasikan karena cara ini tidak mensupport untuk file HTML5, karena tag font ini <font> sudah kuno untuk digunakan di HTML5.

Akan tetapi jika anda memaksa untuk menggunakan di file HTML5 akan masih tetap bisa tampil di browser, akan tetapi tidak tervalidasi ketika anda sudah mulai hosting atau mempublikasikan file HTML tersebut.

Dan pada jaman sekarang kebanyakan orang mengubah warna teks tidak menggunakan bahasa HTML akan tetapi menggunakan bahasa CSS karena mendukung untuk file HTML5

Attribut color pada teks font bernilai nama warna yang telah disupport oleh browser anda, dan ada 140 nama warna yang telah disupport oleh browser modern seperti Chrome, Firefox, Edge. Selain menggunakan nama warna anda juga bisa menentukan warnanya dengan menggunakan nilai rgb atau hexnya

agar kalian lebih memahaminya coba perhatikan contoh dibawah ini :

Source Code : 

<!DOCTYPE html>
<html>
  <head>
    <title>Mengubah Warna Tulisan menggunakan HTML</title>
  </head>
  <body>
    <h1>Contoh pemberian warna pada HTML</h1>
    <h4>Teks ini menggunakan colornames :
      <font color="red">Merah</font>
      <font color="green">Hijau</font>
      <font color="blue">Biru</font>
    </h4>
    <h4>Teks ini menggunakan RGB(0-255,0-255,0-255) :
      <font color="rgb(255, 0, 0)">Merah 255</font>
      <font color="rgb(0,255,0)">Hijau 255</font>
      <font color="rgb(0,0,255)">Biru 255</font>
    </h4>
    <h4>Teks ini menggunakan HEXADECIMAL :
      <font color="#FF0000">Merah 255</font>
      <font color="#00FF00">Hijau 255</font>
      <font color="#0000FF">Biru 255</font>
    </h4>
  </body>
</html>

Output :

Output Ubah Warna Tulisan HTML

PENJELASAN :

Dari Contoh di atas kita bisa lihat outputnya bahwa teks akan berubah menjadi warna sesuai warna yang telah di tentukan akan tetapi jika kita menggunakan color name akan berbeda warna ketika kita menggunakan hexadecimal dan rgb
karena color name merupakan warna yang memiliki nilai hexadecimal tertentu sedangkan pada rgb warnanya tidak sesuai dan hal itu yang membuat tag font tidak digunakan lagi karena telah usang

PENUTUP

Dari tutorial di atas kita dapat menyimpulkan bahwa sebaiknya tidak menggunakan tag font untuk mengubah warna dan lebih baik menggunakan CSS untuk mengubah warna. Tapi saya membuat Tutorial ini agar kalian mengerti bagaimana mengubah warna teks dengan menggunakan HTML saja tanpa menggunakan CSS karena sebelum kalian mengenal CSS kalian harus mengenal terlebih dahulu HTML, karena HTML merupakan sebuah Bahasa untuk menampilkan sebuah konten pada sebuah Halaman Web.

Sedangkan CSS dan JavaScript hanya untuk memperindah tampilan dari suatu konten HTML, dan jika di analogikan HTML adalah sebuah Rumah, sedangkan CSS adalah cat dan aksesoris yang berada di dalam rumah, dan JavaScript adalah sebagai Lukisan pada sebuah rumah yang membuat rumah anda lebih cantik.

Sekian Tutorial yang dapat saya buat saya berharapa kalian dapat memahaminya dengan baik. dan Jangan Lupa Bookmark jika anda menyukai tutorial yang saya buat.
Read More

1 Des 2016

|

Tutorial HTML : Cara Membuat Heading

HTML 5 Logo
Dalam postingan kali ini, saya akan membahas tentang Heading pada atribut HTML. Untuk attribut heading, HTML sudah menentukan ada enam klasifikasi heading yakni heading 1 sampai 6. Yakni “<h1> .... </h1>, <h2>....</h2>, hingga <h6>....</h6>“. Semakin besar nilai pada heading, maka semakin kecil teks yang akan tercetak.

Penggunaan heading ini bisa digunakan untuk melakukan penjudulan. Seperti halnya dengan memuat sebuah makalah, bab akan tercetak dengan lebih tebal, dan untuk subbab-nya akan tercetak lebih kecil.

Mengenal Heading HTML

Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa. Tidak hanya sekedar untuk memberikan penampilan yang lebih tegas dan penekanan, TAG Heading juga sangat penting dalam kaitannya dengan teknik Search Engine Optimization (SEO). - See more at: https://www.codepolitan.com/tutorial/belajar-html-cara-membuat-heading#sthash.dSUrEPkz.dpuf

Mengenal Heading pada HTML

Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang telah disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default di tampilkan oleh browser dengan ukuran lebih tebal (bold) dan lebih besar dari pada teks biasa. Tidak hanya untuk memberi penampilan yang lebih tegas dan penakanan, TAG Heading juga berkaitan dengan Search Engine Optimization (SEO).

Tapi perlu diperhatikan meskipun ukuran dari TAG Heading lebih besar dan Lebih Tebal dari teks biasa jangan sekali kali kalian menggunakan TAG Heading untuk memperbesar tulisan. Gunakanlah TAG Heading hanya untuk membuat judul dan sub-judul, bukan malah untuk membuat tulisan yang berukuran lebih besar. Karena untuk memperbesarkan tulisan kita bisa menggunakan element pada HTML dan bisa juga menggunakan CSS yang akan kita pelajari lebih dalam nanti.

Langsung saja ke Contoh penggunaan dari Heading agar kalian lebih memahami :

Contoh Penggunaan TAG Heading

Perhatikan code dibawah ini : 


<!DOCTYPE HTML>
<html>
  <head>
    <title>TAG Heading HTML</title>
  </head>
  <body>
    <h1>Heading H1</h1>
    <h2>Heading H2</h2>
    <h3>Heading H3</h3>
    <h4>Heading H4</h4>
    <h5>Heading H5</h5>
    <h6>Heading H6</h6>
  </body>
</html>

Berikut ini penampakannya jika dijalankan di web browser :

Screenshot Membuat Heading HTML

Berikut ini contoh Penggunaan pada HTML untuk membuat judul dan sub-judul beserta tulisan paragraf :


<!DOCTYPE HTML>
<html>
  <head>
    <title>Penggunaan TAG Heading HTML</title>
  </head>
  <body>
    <h1>Judul Utama</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <h2>Sub Judul</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <h2>Sub Judul</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <h3>Sub dari Sub Judul</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo   consequat.</p>
  </body>
</html>

Screenshot Membuat Heading HTML

Begitulah cara membuat Heading pada HTML, Jika sobat sobat disini menyukai tutorial yang saya buat jangan lupa untuk menekan CTRL + D dan share tutorial ini ke teman teman anda agar teman anda juga bisa memahami, dan mengerti apa yang anda telah pelajari

Thanks for Visit
Read More
|

Tutorial HTML : Cara Membuat Paragraf

HTML5 LOGO

Pada Tutorial kali ini kita akan membahas tentang tag paragraf dan bagaimana penulisannya dalam sebuah dokumen HTML
Read More
Langganan: Komentar (Atom)