Assalammu’alaikum warahmatullahi wabarakatuh..
Jumpa lagi para PEMBACA singgah DIGASIRA, hari ini saya akan bahas mengenai tag-tag html dasar.
Apa sih HTML itu?
HTML adalah Hypertext Markup Language yang artinya bahasa pemrograman yang berbasis web. HTML dapat ditulis ke dalam notepad ataupun dreamweaver.
Apasih fungsi HTML sendiri?
HTML berfungsi sebagai bahasa pemrograman yang dapat dipakai dalam memprogram web, contohnya saya jika kita mempunyai blog kita dapat mengedit blog kita agar terlihat menarik dengan menggunakan HTML.
Cukup disini dahulu pembahasan mengenai HTML..
Mariii kita lanjut membahas tag-tag HTML, sebelum anda mencoba tag pada blog ada baiknya anda mencoba tag-tag ini pada notepad atau dreamweaver terlebih dahulu yaa!!
Didalam tag-tag di akan saya bahas, sebelumnya saya akan menjelaskan tag-tag dasar dan fungsinya masing-masing:
Tag <head> digunakan untuk membuat kepala dokumen
Tag <title> digunakan untuk membuat judul
Tag <body> digunakan untuk membuat isi dokumen
Tag <br> digunakan untuk membuat garis baru (spasi ke bawah)
1. Latihan ke – 1
<html>
<head>
<title> Latihan Tag Memformat Text </title>
</head>
<body> ini text normal <br>
<small> teks ini berukuran kecil </small> <br>
<i> ini text yang tercetak miring </i> <br>
<b> ini text yang tercetak tebal </b> <br>
<u> ini text yang tercetak bergaris bawah </u> <br>
contoh superscript = X <sup> 2 </sup> <br>
<strike> ini text yang tercoret </strike> <br>
contoh subscript = H <sub> 2 </sub> O <br>
<font size = 5 face = arial> contoh menggunakan tag font <font>
</body>
</html>
2. Latihan ke – 2
<HTML>
<HEAD>
<TITLE> Latihan Tag P, BR, HR </TITLE>
</HEAD>
<BODY> <P> ini adalah paragraf pertama, yang terdiri dari beberapa baris, yaitu baris satu <BR> baris dua <BR> baris tiga </p>
<p align = center> ini adalah paragraf kedua yang terdiri atas 2 buah baris, yaitu baris satu <BR> baris kedua </P>
<HR SIZE= 10>
</BODY>
</HTML>
*notes
Tag <P> digunakan untuk membuat Paragraf
Tag <BR> digunakan untuk membuat spasi ke bawah
Tag <HR> digunakan untuk membuat garis
3. Latihan ke – 3
Tag heading digunakan untuk membuat Heading pada artikel kita
Berikut tag Heading
<HTML>
<HEAD>
<TITLE> Latihan Tag Heading </TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
</BODY>
</HTML>
4. Latihan ke - 4
Tag Marquee digunakan agar tulisan dapat berjalan dan Tag Blink digunakan agar tulisan berkedip
<html>
<head>
<title> jenis-jenis pergerakan marquee dan blink </title>
</head>
<body bgcolor="purple">
<marquee direction="left"> berjalan dari sebelah kanan ke kiri </marquee> <br>
<marquee direction="right"> berjalan dari sebelah kiri ke kanan </marquee> <br>
<marquee behavior="alternate"> berjalan bolak-balik dari kanan ke kiri dst </marquee> <br>
<marquee direction="up"> berjalan ke atas </marquee> <br>
<marquee direction="down"> berjalan ke bawah </marquee> <br>
<blink> teks ini akan berkedip </blink>
</body>
</html>
5. Latihan ke – 5
<html>
<head> <title> Ordered List </title>
</head>
<body>
<center>PT.ASKES (persero)</center>
<center>Pelayanan Kesehatan Yang Dijamin</center>
<br>
<br>
<OL>
<OL TYPE="I">
<LI>Pelayanan Kesehatan Tingkat Pertama
<LI>Pelayanan Kesehatan Tingkat Lanjut
<LI>Pelayanan Kesehatan Lain
</ol> <br>
<oL>
<ol TYPE="A">
<li>Pelayanan Kesehatan Tingkat Pertama, Meliputi :
<ol type="1">
<li>Administrasi Pelayanan
<li>Pemeriksaan
<li>Pengobatan
<li>Konsultasi Medis
</ol>
<li>Pelayanan Kesehatan Rujukan, Meliputi:
<ol type="a">
<li>Rawat Jalan
<li>Rawat Inap
<li>Perawatan Inap non intensif
<li>Perawatan Inap di ruang intensif
</ol>
<li>Iuran Jaminan Kesehatan, Meliputi :
<ol type="i">
<li>Iuran PBI
<li>Iuran PPU
<li>Iuran PPBU
<li>Iuran Konsultasi Medis
</ol>
</ol>
</body>
</html>
6. Latihan ke – 6
<HTML>
<HEAD>
<TITLE> FUNGSI ENTER </TITLE>
</HEAD>
<BODY BGCOLOR="PINK">
<H1><CENTER> PENGATURAN TEKS </CENTER></H1>
<BR><BR>
<I> TULISAN INI AKAN DITULIS MIRING </I><BR>
<B> TULISAN INI AKAN DITULIS TEBAL </B><BR>
<U> TULISAN INI AKAN DIGARIS BAWAHI </U>
<BR><BR>
<!--MEMBUAT BOLD, ITALIC DAN UNDERLINE-->
<CENTER> <FONT COLOR="RED">KALAU INI MAH AKAN DITENGAH</FONT></CENTER>
<H4><B><I> Falsafah Hidup </I></B></H4>
<P ALIGN="RIGHT"> Kehidupan terus berputar, terkadang berada <BR>
di atas terkadang berada di bawah. Namun, mengapa manusia <BR>
selalu mengejar-ngejar <U><I> status sosial </I></U>. Ketenaran <BR>
kekayaan dan kekuasaan <B> untuk apa sebenernya semua itu? </B>
</BODY>
</HTML>
7. Latihan ke – 7
<html>
<head>
<title> Dokumen 1 </title>
</head>
<center>
<font size="5" color="purple" face="book antiqua"> <marquee behavior="alternate"> WISUDA STMIK SURYA INTAN </marquee> </font>
</center>
<HR size="7" color="red">
<br>
<body bgcolor="cyan">
wisuda yang diadakan perguruan tinggi STMIK pada tanggal 25 september<br>
yang dihadiri lebih kurang 800 wisudawan bertempat di <br>
Gedung Islamic Center Kotabumi. <br>
<a href="hal2.html">Berita selanjutnya...</a>
</body>
</html>
*note : teks yang diberi warna biru adalah alamat atau nama file notepad yang akan disambungkan
8. Latihan ke – 8
<html>
<head>
<title> Dokumen 2</title>
</head>
<center>
<font size="5" color="limegreen"> Detil Berita Wisuda </font>
</center>
<body bgcolor="cyan">
<font face="arial" color="purple">Para wisudawan terdiri dari berbagai jurusan antara lain, </font> <BR>
<ol type="1">
<li>S1 SISTEM INFORMASI<BR>
<li>S1 TEKNIK INFORMATIKA<BR>
<li>D3 MANAJEMEN INFORMATIKA<BR>
</ol>
<a href="Hal1.html">kembali...</a>
</body>
</html>
*note : teks yang diberi warna biru adalah teks link ke halaman sebelumnya
9. Latihan ke – 9
<html>
<head>
<title> Menampilkan Gambar </title>
</head>
<body>
<marquee behavior="alternate" Direction="Left"><h1>Ini adalah Homepage yang menampilkan Gambar :</h1></marquee>
<br><br>
<IMG Border="5" SRC="d.jpg" Height="250" Width="175">
<center><IMG Border="5" SRC="t.jpg" Height="250" Width="175"></center>
<p align="right"> <IMG border="5" SRC="d.jpg" Height="250" Width="175">
</body>
</html>
*note : gambar harus dalam satu folder dan namanya harus sesuai dengan nama gambarnya
