Home Posts filed under Web

6 Des 2016

|

Tutorial HTML : Cara Membuat Kutipan

kutipan html
Pada penulisan sebuah teks sering sekali kita menemui penggunaan Kutipan. untuk menggunakan Tag yang telah disediakan yaitu TAG <q> dan TAG <blockquote> . Di dalam sebuah teks kuitpan biasanya digunakan dalam penulisan suatu Karya Ilmiah yang berfungsi untuk mencantumkan suatu ide, gagasan, atau pendapat dari berbagai Sumber. Pada kali ini kita akan belajar cara memberi atau membuat suatu kutipan di HTML menggunakan TAG <q> dan TAG <blcokquote>.



HTML TAG <q> :

TAG <q> digunakan untuk membuat kutipan pendek dan menyatu dengan teks sehingga TAG<q> ini bersifat inline .

Tag tersebut akan ditampilkan di dalam tanda kutip dan menyatu dengan teks oleh browser.

Contoh Penggunaan Tag <q> :


<!DOCTYPE html>
<html>
  <head>
    <title>Penggunaan Tag q</title>
  </head>
  <body>
    <h2>Saya sedang Belajar di tutrialnyaini.blogspot.co.id</h2>
    <p><q>Saya menulis ini secara Ikhlas dan berharap kalian dapat mengamalkannya</q>, kata doyok.</p>
  </body>
</html>

tag q html


HTML TAG <blockquote> :

TAG <blockquote> digunakan untuk membuat kutipan yang pendek. TAG <blcokquote> termasuk dalam block element sehingga teks akan memisahkan diri dari teks yang ada dan membuat barisan teks baru. dan lebih cocok digunakan untuk kutipan yang penting karena terlihat tegas.

Selain untuk membuat suatu kutipan tag ini biasanya juga digunakan untuk testimoni karena testimoni merupakan pendapat orang lain mengenai suatu produk.

Contoh Penggunaan Tag <blockquote>  : 


<!DOCTYPE html>
<html>
  <head>
    <title>Penggunaan TAG blockquote</title>
  </head>
  <body>
    <h3>Saya sedang belajar HTML di Tutorialnyaini.blogspot.co.id</h3>
    <p>HTML atau Hypertext Markup Language adalah dasar dari semua 
halaman web di internet.</p>
    <p>Berikut adalah defenisi HTML dikutip dari Wikipedia: </p>
    <blockquote>HTML or HyperText Markup Language is the standard 
markup language used to create web pages. 
HTML is written in the form of HTML elements consisting of tags 
enclosed in angle brackets.</blockquote>
  </body>
</html>

tag blockquote html

Penutup

Jika kalian ingin memasukan sebuah ide, gagasan atau orang lain yang bukan berasal dari buah pikir anda pada HTML. saya sarankan untuk menggunakan kedua tag tersebut karena jika anda tidak mengkutipnya maka kemungkinan Artikel kalian di anggap meniru atau Plagiarism oleh Software Plagiarism dan bisa - bisa anda dijatuhkan sanksi karena telah meniru karya orang lain.

Terima Kasih Telah mengunjungi tutorialnyaini.blogspot.co.id. Jika anda suka dengan tutorial yang saya buat silahkan share kepada teman anda dan tekan CTRL + D
Read More
|

Tutorial HTML : Cara Membuat Pangkat di bawah dan di atas

teks subscript dan superscript
Pada kali ini saya akan membahas tentang pangkat di html pada HTML. Untuk membuat pangkat di HTML kita menggunakan TAG <sub> dan TAG <sup> yang telah disediakan di HTML. kedua Tag ini berbeda tapi sama sama menampilkan pangkat Langsung saja kita bahas satu persatu agar kalian lebih mengerti perbedaan kedua TAG tersebut.


HTML TAG <sub> :

TAG <sub> merupakan singkatan dari SubScript. SubScript merupakan karakter kecil yang diletakkan agak kebawah dari garis karater normal. Biasanya Subscript digunakan untuk menulis sebuah persamaan kimia dan matematika. Contoh singkatnya adalah senyawa H2O. dan karakter 2 merupakan karakter subscript.

TAG <sub> termasuk kedalam tipe tag inline yang akan mengikuti alur teks yang ada seelumnya.

Contoh Penggunaan TAG <sub> :


<!DOCTYPE html>
<html>
  <head>
    <title>Menggunakan Tag sub</title>
  </head>
  <body>
    <h2>Sekarang saya belajar di tutorialnyaini.blogspot.co.id</h2>
    <p>Contoh Persamaan Kimia : </p>
    <p>H<sub>2</sub> + O<sub>2</sub> = H<sub>2</sub>O</p>
    <p>Contoh Persamaan Matematika : </p>
    <p>d<sub>1</sub> x d<sub>2</sub> = d<sub>1</sub>d<sub>2</sub></p>
  </body>
</html>

HTML subscript text

HTML TAG <sup> :

TAG <sup> merupakan kependekan dari Superscript. Superscript merupakan sebuah karakter kecil yang diletakan di atas garis normal sebuah karakter dan biasanya diginakan untuk menulis sebuah persamaan Matematika seperti perpangkatan . Contoh singkatnya adalah 32. dan angka 2 merupakan karakter superscript

TAG <sup> ini masuk kedalam tipe tag inline yang berarti akan mengikuti alur teks yang ada sebelumnya

Contoh Penggunaan TAG <sup> :


<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Penggunaan tag sup</title>
  </head>
  <body>
    <h2>Saya Belajar di tutorialnyaini.blogspot.co.id</h2>
    <p>Contoh Persamaan Matematika : </p>
    <p>a<sup>2</sup> x a<sup>5</sup> = a<sup>7</sup></p>
  </body>
</html>

HTML subscript text

PENUTUP

Sekarang kalian telah bisa membuat sebuah pangkat di atas maupun pangkat di bawah untuk menulis sebuah persamaan matematik ataupun persamaan kimia. akan tetapi tag kedua tag ini sangat jarang digunakan tapi apabila anda menulis sebuah artikel mengenai matematika atau kimia maka kedua tag ini akan sering anda gunakan untuk menulis persamaannya.

Terima kasih telah mengunjungi tutorialnyaini.blospot.co.id apabila anda menyukai tutorial yang saya tulis mohon di share ke teman anda teman anda juga mengerti dan Bookmark dengan menekan CTRL + D

Read More
|

Tutorial HTML : Cara Membuat Huruf Tercoret

Strikethrough Text HTML

Pada tutorial kali ini saya akan membagikan bagaimana cara membuat huruf tercoret pada HTML. Untuk membuat huruf tercoret pada HTML tidak semudah pada Aplikasi Pengolah kata yang sering kita gunakan. untuk membuat huruf tercoret HTML telah menyediakan 2 TAG untuk membuat huruf tercoret yaitu tag <s> dan tag <del> 

HTML TAG <s> :

tag <s> merupakan singkatan dari Strikethrough yang membuat huruf tercoret sehingga ketika kita menggunakan tag <s> ini maka html akan menampilkannya dengan huruf tercoret. TAG <s> tidak berarti apa apa hanya sebuah tag untuk merubah format text untuk menampilkannya tercoret

TAG <s> masuk ke dalam tipe tag inline, hal ini berarti akan mengikuti alur teks yang ada. Langsung ke Contoh Penggunaannya saja :

Contoh Penggunaan TAG <s>:


<!DOCTYPE html>
<html>
  <head>
    <title>Tutorial Tag s</title>
  </head>
  <body>
    <h2>Sekarang ini saya belajar di tutorialnyaini.blogspot.co.id</h2>
    <p>Untuk mencoret <s>huruf</s> pada Teks di HTML</p>
  </body>
</html>

TAG s HTML

HTML TAG <del> :

TAG <del> merupakan singkatan dari delete yang berfungsi untuk menunjukan kata yang salah dan dihapus dengan menampilkan huruf secara tercoret seperti kalian ingin menghapus kata yang salah di dalam kertas dan tidak ada Stipo pasti kalian coret. Untuk memberikan pembetulan dari kata tersebut kalian memerlukan TAG <ins> untuk menunjukkan bahwa kata tersebut adalah pembetulannya.

TAG <del> masuk ke dalam tipe tag inline, hal ini berarti akan mengikuti alur teks yang ada. Langsung ke Contoh Penggunaannya saja :

Contoh Penggunaan Tag <del> :


<!DOCTYPE html>
<html>
  <head>
    <title>Tutorial Tag s</title>
  </head>
  <body>
    <h2>Sekarang ini saya belajar di tutorialnyaini.blogspot.co.id</h2>
    <p>Untuk mencoret <s>huruf</s> pada Teks di HTML</p>
  </body>
</html>

tag del html

PENUTUP

Jika kalian hanya ingin menampilkan huruf tercoret tanpa memiliki tujuan kalian bisa menggunakan TAG <s>. Tetapi jika huruf yang kalian coret tersebut bertujuan  untuk menampilkan huruf yang telah dihapus kalian bisa menggunakan TAG <del>
Read More

5 Des 2016

|

Tutorial HTML : Cara Memberi Garis Bawah pada Teks

Underline Text

Untuk Tutorial kali ini saya akan membagikan Cara Memberi garis bawah pada HTML. pada HTML ada tag untuk memberi garis bawah / undeline untuk teks. yaitu dengan menggunakan tag <u> dan tag<ins>.

HTML TAG <u> :

Tag <u> adalah singkatan dari underline, atau garis bawah. Tag ini digunakan untuk membuat karakter text dengan garis bawah. Sama seperti tag <i> dan <b>, tag <u> tidak memiliki tujuan apa-apa dan lebih kepada tampilan dari text.

Tag <u> masuk kedalam tipe tag inline, yang akan mengikuti alur text yang ada.
Agar kalian cepat memahaminya langsung saja perhatikan contoh dibawah ini beserta outputnya.

CONTOH :


<!DOCTYPE html>
<html>
<head>
<title>Memberi garis bawah pada teks</title>
</head>
 
<body>
<h3>Sekarang saya sedang belajar di tutorialnyaini.blogspot.co.id</h3>
<p><u>HTML</u> atau <u>Hypertext Markup Language</u> 
adalah dasar dari semua halaman web di internet. 
Jika anda ingin mempelajari cara membuat website,
maka hal pertama yang harus dipelajari adalah HTML</p>
</body>
 
</html>

HTML Underline Tag


HTML TAG <ins> :

Tag <ins> adalah kependekan dari Insert. Tag <ins> ditujukan untuk bagian text baru yang ditambahkan ke dalam konten web. Tag <ins> dirancang untuk menegaskan bagian text yang sebelumnya tidak ada. Tag ini adalah kebalikan dari tag <del>.
Tag <ins> saya masukkan ke dalam tutorial ini karena secara default web browser menampilkan tag <ins> dengan garis bawah. Tag ini termasuk jenis inline element.
Berikut adalah contoh penggunaan tag <ins> di dalam HTML:

CONTOH : 


<!DOCTYPE html>
<html>
<head>
<title>Memberi garis bawah pada teks</title>
</head>
 
<body>
<h3>Sekarang saya sedang belajar di tutorialnyaini.blogspot.co.id</h3>
<p><ins>HTML</ins> atau Hypertext Markup Language 
adalah dasar dari semua halaman web di internet. 
Jika anda ingin mempelajari cara membuat website,
maka hal pertama yang harus dipelajari adalah <ins>HTML</ins></p>
</body>
 
</html>

HTML insert Tag


PENUTUP

Secara pribadi, saya menggunakan tag <u> untuk bagian text yang tidak ditujukan apa-apa selain mempertegas penulisan. Namun apabila ada bagian text yang ditambahkan kemudian, tag <ins> akan membantu struktur konten dari HTML.
Read More

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
Langganan: Postingan (Atom)