HYPERTEXT MARKUP LANGUAGE (HTML) Asep Herman Suyanto info@bambutechno.com http://www.bambutechno.com A. Pengenalan HTML HTML merupakan bahasa yang digunakan untuk menulis halaman web. Biasanya mempunyai ekstensi.htm,.html atau.shtml. HTML tersusun atas tag - tag, digunakan untuk menentukan tampilan dari document HTML yang diterjemahkan oleh browser. Tag tidak case sensitive, jadi bisa gunakan <HTML> atau keduanya menghasilkan output yang sama. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera dan masih banyak yang lainya. Sedangkan Program yang di gunakan untuk membuat document HTML diantaranya: Ms FrontPage, Dreamweaver, Notepad. Kerangka dasar dokumen HTML, yang diatur oleh W3 (World Wide Web) Consurtium, yaitu: <HTML> <HEAD> Deskripsi Dokumen </HEAD> <BODY> Isi Dokumen </BODY> </HTML> Keterangan : - HTML Setiap document HTML biasanya di awali dan di tutup dengan tag HTML, yang memberi tahu browser bahwa yang berada di dalam kedua tag tersebut adalah document HTML. - HEAD Bagian header dari document HTML berada di antara tag HEAD, di dalam bagian ini biasanya memuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML. - BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. B. Heading Heading merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Ada enam tingkatan heading. Latihan : heading.htm 1
<title>tingkatan Heading</title> <h1>heading tingkat pertama</h1> <h2>heading tingkat kedua</h2> <h3>heading tingkat ketiga</h3> <h4>heading tingkat keempat</h4> <h5>heading tingkat kelima</h5> <h6>heading tingkat keenam</h6> C. Paragraf Untuk membuat paragraf diawali tag <p> dan diakhiri </p>. Atribut ALIGN digunakan untuk mengatur posisi paragraf. Left untuk meratakan paragraf di kiri, center untuk meratakan paragraf di posisi tengah horizontal dan right untuk meratakan paragraf di kanan. Latihan : paragraf.htm <title>paragraf</title> <p align="right"> Istilah internet merupakan singkatan dari interconnection Networking. Dan internet bisa diartikan sebagai sebuah jaringan komputer yang sangat besar yang terdiri dari jaringan jaringan kecil yang saling terhubung yang menjangkau seluruh dunia. </p> <p align="center"> Internet mempunyai beberapa fasilitas/ kemampuan pokok seperti World Wide Web,Electronic Mail disingkat e-mail,telnet,file Transfer Protocol disingkat FTP, Gopher,Chat Groups/Internet Relay Chat (IRC),Newsgroup,Mailling List, Melalui fasilitas-fasilitas internet tersebut dapat dan sering digunakan untuk keperluan riset atau melakukan hal yang akan menambah pengetahuan dan wawasan kita. 2
</p> <p align="left"> Pendorong perkembangan internet adalah daya tarik internet yang meliputi communication, information retrieval dan information search (Laudon & Laudon, 2000). Dalam hal daya tarik komunikasi, internet menawarkan berkomunikasi secara elektronik yang relatif mudah dan murah. Internet juga memberikan kemungkinan dan kemudahan untuk mencari dan mengakses berbagai macam informasi khususnya pemanfaatan internet sebagai media riset. </p> D. Blockquote Perintah tag <blockquote> biasa digunakan untuk menulis kutipan teks. Browser akan menampilkan teks menjorok ke dalam atau menampilkan teks dalam bentuk huruf miring. Latihan : blockquote.htm <title>blockquote</title> <h3>peran Mahasiswa dalam Pemilu 2004</h3> <blockquote> Pemilu 2004 adalah salah satu isu yang berada di papan atas saat ini. Sebagian besar media massa membicarakanya, mulai dari polling calon presiden sampai manufer manufer para elite politik beserta janjijanjinya. Tetapi dimanakah keberadaan mahasiswa sebagai pendobrak itu. </blockquote> 3
E. Preformatted Text Preformatted text (PRE) digunakan untuk menampilkan teks sama seperti yang diketikan dalam dokumen HTML. Latihan : pre.htm <title> Preformatted Text</title> <pre> KELOMPOK STUDI MAHASISWA UNIVERSITAS GADJAH MADA UNIT KEGIATAN MAHASISWA PENALARAN ILMIAH http://www.ksm.ugm.ac.id DIVISI - DIVISI : - Humas - Teknologi Informasi - Kewirausahaan - PengKajian dan Penelitian - PSDM </pre> 4
F. Line Break (BR) Tag line break (BR) digunakan untuk menulis teks pada baris berikutnya. Tag <BR> mempunyai baris baru tanpa memberi baris kosong. Latihan : br.htm <title>line Break</title> <p><b>kebiasaan hidup yang bisa mengasah kemampuan menguasai rasa takut sukses dalam kondisi hidup normal baik di kantor atau di mana saja, yaitu:</b> <br>membiasakan diri dengan keberanian berinisitif <br>membiasakan diri dengan berpegang teguh pada pendirian hidup (to persist) ketika inisiatif bertindak telah kita cetuskan <br>membiasakan diri dengan keberanian menaklukkan tantangan hidup (to conquer challenge) atau memiliki mentalitas I CAN. <br>membiasakan diri untuk memperkecil "zona unknown" di wilayah hidup kita dengan mempelajari pengetahuan (knowledge), meningkatkan kemampuan (ability) dan menambah keahlian (skill). <br>membiasakan diri dengan menambah dukungan eksterna 5
G. Font Tag <font> digunakan untuk mengatur huruf dokumen HTML. Beberapa atribut untuk mengatur ukuran huruf, jenis huruf yang digunakan dan warna huruf, yaitu : 1. Ukuran Font Attribut SIZE digunakan untuk mengatur ukuran font. Nilai dimulai dari 1 untuk ukuran terkecil dan nilai 7 untuk ukuran paling besar. 2. Jenis Font Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Dengan cara mengisi jenis font seperti Arial, Times New Roman, dan sebagainya. 3. Warna Font Atribut COLOR digunakan untuk mengatur warna font yang diinginkan. Cara pertama dengan menyebutkan nama warna seperti red, green, dan blue. Sedangkan cara yang kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk red, 00FF00 untuk green, dan 0000FF untuk blue. Latihan : font.htm <title>font</title> <font size=1>ukuran font yang bernilai 1</font><br> <font size=2>ukuran font yang bernilai 2</font><br> <font size=3>ukuran font yang bernilai 3</font><br> <font size=4>ukuran font yang bernilai 4</font><br> <font size=5>ukuran font yang bernilai 5</font><br> <font size=6>ukuran font yang bernilai 6</font><br> <font size=7>ukuran font yang bernilai 7</font><p> <font face="arial"> jenis font ini arial<br> <font face="verdana"> jenis font ini verdana<br> <font face="times New Roman"> jenis font ini Times New Roman<br> 6
<font face="tahoma">jenis font ini tahoma<p> <font color="red"> warna teks ini merah<br> <font color="#00ff00"> warna teks ini hijau<br> <font color="#0000ff"> warna teks ini biru 7