Mengenal Tag Tag Dasar di Pemprograman HTML

Oleh Ilmuversity 10.50.00 Posting Komentar

Seperti pada ilmu ilmu lainnya, setiap bahasa pasti memiliki sintak dasar dan itu merupakan pondasi dari sebuah rangkaian yang powerful, begitupun dengan html ini, ia memiliki tag dasar, setiap tag html terdiri dari sebuah tanda < nama tag > dan diakhiri dengan </nama tag> . dan itu merupakan sebuah keharusan, sehingga terkadang belajar html itu seperti secara tidak langsung mengajari kita bahwa apa yang dimulai itu harus diselesaikan dengan penutup.. ya begitulah, sehingga kita bisa memulai pekerjaan yang lainnya, atau membuat aktifitas baru.

sedangkan sebuah dokumen html itu memiliki tag tag dasar / bisa dibilang kerangka / pondasi dan itu merupakan wajib dan tidak dapat dihilangkan jika ingin dokumen htmlnya berjalan dengan benar.

berikut merupakan kerangka dasarnya

<html>

<head>

<title>... </title>

</head>

<body>

...

...

</body>

</html>

dari kode diatas kamu bisa ngliat, bahwa setiap dokumen html itu memiliki tag html yang diakhiri dengan /html juga. Tag html tersebut mengidentifikasi bahwa dokumen yang dibuat merupakan sebuah dokumen html.

head merupakan tag yang berada didalam tag html ( analoginya seperti itu ) dimana tag head tersebut merupakan tag untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan, atau biasanya digunakan untuk meletakkkan relasi css / javascript eksternal, atau juga untuk menempatkan css / javascript internal.

Apa sih itu CSS? CSS merupakan kependekan dari Cascading Style Sheets yaitu kode html untuk menciptakan suatu kumpulan style yang dapat digunakan untuk memperindah tampilan website dengan memaanipulasi kode html. Misalnya tag Heading 1 semuanya mau kita buat berwarna merah. Dengan CSS ini kita tidak perlu memberikan style tiap heading 1 yang kita buat, cukup buat kode css
h1 { color:green;} , maka semua tag heading 1 akan berwarna hijau / green.

menakjubkan bukan? kita tak perlu repot repot lagi menuliskan di tiap tag heading, jika mau merubah warna semua tag heading 1, mudah aja, tinggal ganti green menjadi warna lain yang di inginkan.. dan semua warna heading 1 pun akan berubah. nah itu sekilas aja ya... kalau ingin tau lebih lanjut, bisa di search di google.

Nah kalau Javascript lebih ke sebuah engine interaksi, dan itu tidak akan dibahas disini... okey, kita fokus ke html dolo...

selanjutnya adalah tag title, tag ini merupakan tag yang berada didalam head. tag ini berfungsi untuk menuliskan judul halaman/ dokumen html, yang akan muncul pada caption halaman browser jika halaman html tersebut diakses.

selanjutnya tag body, nah tag ini sudah terpisah dengan tag head.. berarti tag body ini tidak merupakan tag yang ada didalam head lho ya... alias terpisah, tetapi sama sama berada dalam tag html.
Tag body merupakan section utama dalam dokumen web, pada section inilah semua isi dokumen yang akan ditampilkan didalam browser di tuliskan.

nah itulah kerangka dasar / tag tag dasar html ( pondasi yang wajib anda ketahui ) sebelum lanjut ke tahap selanjutnya.

==============================================================

Megenal Tag Heading dalam Pemprograman HTML

Tag heading didalam pemprograman dikodekan dengan h. ada 6 tingkatan heading di pemprograman html, yaitu heading 1 sampai dengan 6. seperti pada fasilitas heading yang ada di ms word.

Tujuan heading ini adalah untuk memformat judul dan subjudul dari suatu halaman web.
nah dibidang SEO ( Search Engine Optimized ) tag ini sangat berguna untuk mendongkrak pencarian di search engine seperti google.

penulisannya sebagai berikut genk,,,

<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1> Iki heading 1</h1>
<h2> Iki heading 2 </h2>
<h3> Iki heading 3 </h3>
<h4> Iki heading 4 </h4>
<h5> IKi heading 5 </h5>
<h6> Iki heading 6 </h6>
</body>
</html>

nah liat sendiri hasilnya genk.....

===================================================

Mengenal Tag Horisontal Ruler / Garis Horisontal

Tag horisontal ini berfungsi untuk menampilkan garis horisontal tiga dimensi di dalam halaman web yang anda buat. bedanya dengan tag lain ya genk, untuk tag horisontal ruler <hr> ini tidak memerlukan tag penutup </hr>

terdapat beberapa atribut elemen horisontal ruler :

align : [left | center | right] default center
size : menggunakan pixel ( tebal garis, default 2 )
width : panjang ( lebar garis, pixel atau pesen, default 100%)

berikut penulisannya :

<html>
<head>
<title> horisontal ruler </title>
</head>
<body>
<h1> genbisoft untuk semua </h1>

<hr width="80%">
</body>
</html>

liat sendiri hasilnya genk....

=========================================================

Penggunaan Tag Paragraph di Pemprograman HTML

Untuk tag Paragraph di kodekan dengan kode . berfungsi layaknya paragraf dokumen di word. Di dalam pemprograman html juga terdapat pengaturan paragraf lho... dalam elemen paragraf tersebut memiliki atribut : align=[ left | center | right ]

tidak lain seperti di dokumen word, atribut tersebut berfungsi untuk mengatur aligment / rata kiri, rata tengah, maupun rata kanan. Jadi anda hanya perlu memilih salah satu dari ketiga pilihan tanpa harus memberi kurung buka dan kurung tutup, defaultnya untuk aligment adalah rata kiri / left.

contoh pengaplikasiannya adalah sebagai berikut :

<html>
<head><title>Belajar Tag Paragraf</title>
</head>
<body>
<h1>genbisoft learn</h1>
<hr width=85%" align="left">
<h2>belajar html</h2>
<p align="right">tidak hanya review dan layanan jasa saja, genbisoft juga ingin membagikan sedikit ilmu yang dimiliki untuk anda </p>
</body>
</html>

hasilnya liat sendiri ya genk...

==========================================

Fungsi Enter dalam Tag Break di Pemprograman HTML

Kalau biasanya kita memakai tombol enter untuk berganti baris di ms word, tetapi berbeda di pemprograman html, yang dikenal dengan tag break .. artinya istirahat kali yeee.... :D

fungsinYa sama seperti tombol enter, yaitu memberi baris baru dalam halaman web, tag ini pada situasi tertentu memang tidak memerlukan tag penutup, dimana tag break di kodekan dengan kode tag , tetapi pada situasi lain tag break memerlukan tag penutup, dimana bukan seperti tag penutup pada umumnya di pemprograman html melainkan tag penutupnya digabung langsung... contohnya seperti ini .
tetapi intinya sama genk dengan , hanya pada generasi html 5 aja gan lebih dikenal dengan kode 

contoh penulisannya sebgai berikut :

<html>
<head>
<title>Belajar menggunakan Break</title>
</head>
<body>
<h2> Belajar menggunakan break dengan genbisoft </h2>

<p> Genbisoft membuka layanan pembuatan website<br/>ada berbagai ragam layanan pembuatan website<br/> antara lain:<br/>pembuatan landing page<br/>pembuatan web dinamis<br/>
</p>


</body>
</html>

hasilnya lihat sendiri ya genk.....

==============================================================

Teknik PemFormatan Karakter di Pemprograman HTML

Format karakter merupakan hal yang penting didalam dokumen html, karena format karakter ini dapat memperindah desain halaman html kamu. Ada 3 tipe pemformatan karakter, yaitu : Logical Format , Physical FOrmat, Preformatted Text, dan Blockquote.

Mari kita bahas 1 per 1...

Logical Format, Pemformatan yang menerapkan layout dokumen secara logis dan terstruktur. Tag tag yang termasuk logical format adalah sebagai berikut :

<cite>, digunakan untuk menandai suatu kutipan ( citation )
<code>, digunakan untuk menampilkan kode - kode pemprograman misalnya bahasa php.
, digunakan untuk menendai suatu teks yang ditekankan oleh penulis.
<kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.
<samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
, dgunakan untukmenandai bagian yang terpenting dari suatu teks.
<var>, digunakan untuk menampilkan nama vvariabel.
<dfn>, digunakanuntuk menandai sebuah subdefinisi dari daftar definisi.

berikut contoh penulisannya :

<html>

<head><title> format karakter logical</title></head>

<body>

<cite> zizarun </cite> adalah pendiri genbisoft.<br> <br>

untuk menampilkan isi variabel isi variabel di pemprograman PHP adalah : <code> echo "$content";</code> <br><br>

kita yakin, " kita bisa <em>pasti bisa</em>." <br><br>

untuk melihat direktori, ketikkan <kbd>dir</kbd>/ <br><br>

pada abjad terdapat 5 huruf vokal, yaitu <samp>AIUEO</samp>. <br><br>

kata yang diucapkannya adalah <strong> Aishiteru yo </strong> <br><br>

kode program itu di eksekusi sebanyak <var>N</var>kali . <br><br>

<dfn> sAmpi adalah hewan pemakan rumput. </dfn>

</body>

</html>

lihat sendiri hasilnya ya genk...

selanjutnya Physical Format, ini merupakan format terhadap fisik suatu font. antara lain :

, digunakan untuk menebalkan huruf
, digunakan untuk menmformat hurum menjadi miring, seperti italic gitu...
, digunakan untuk menampilkan garis bawah pada teks, seperti underline gitu..
<tt>, digunakan untuk memformat huruf seperti huruf mesin ketik.
<strike>, digunnakan untuk menampilkan garis horisontal pada bagian tengah huruf... biasanya digunakan untuk diskon harga.. hehe
<big>, digunakan untuk memformat ukuran huruf menjadi llebih besar.
, digunakan untuk memformat ukuran huruf menjadi lebih kecil.
, digunakan untuk menampilkkan subscript.
, digunakan untuk menampilkan superscript.

nah.. berikut contoh penulisannya :

<html>

<head><title>memformat karakter</title></head>

<body>

<b> kalimat ini dicetak tebal. </b> <br>

<i> kalimat ini dicetak miring </i><br>

<u> kalimt ini dicetak berrgaris bawah </u><br>

<strike>kalimat ini bergaris tengah</strike><br>

<tt>menampilkan huruf mesin ketik</tt><br>

<big>besar</big>itu besar<br>

<small>kecil</small>itu kecil<br>

untuk menampilkan <sub>subscript</sub><br>

untuk menampilkan <sup>superscript</sup>

</body>

</html>

nah hasilnya cek nndiri ya genk....

selanjutnya adalah indentasi paragrraf, kita menggunakan tag <blockquote>, nah blockquote ini seperti namanya... quote menampilkan quote... di browse akan menampilkann teks menjorok ke dalam.

<html>

<head><title>quotes</title>

</head>

<body>

<font color="#666" size="7"> quote indentasi </font>

<p> dengn html, anda dapat mengatur indentasi  teks yang anda buat dengan blockquote <blockquote>ini adalah paragraf yang menggunakan blockquote</blockquote>

nah.. sudah tau kan perbedaannya </p>

</body>

</html>

nah.. hasilnya liat ndiri ya genk...

selanjutnya adalah fungsi tag Preformatted text yang didalam pemprograman html dikodekan dengan <pre> fungsinya tidak lain adalah untuk menampilkan teks sesuai ketikan dalam dokumen html. browser biasanya akan menampilkan teks tersebut dalam font monospaced.

berikut penulisannya :

<html>

<head><title>preformating teks</title></head>

<body>

<p>

<pre> menampilkan teks sesuai dengan yang diketik pada dokumen htnl </pre>

</p>

</body>

</html>

hasilnya cek sendiri ya genk...

========================================

Anda Telah Membaca #Ilmu HTML (Pemprograman)
yang di tulis oleh
Team - GenBisoft Creative Media
Tahun 2016 - All Right Reserved
http://ilmuversity.pasarsambilan.com
Facebook : Ilmuversity
Twitter : Ilmuversity
Youtube : Ilmuversity

- Dilarang Mengcopy Artikel tanpa Seizin Penulis -

ILMUVERSITY