adalah salah satu format bahasa yang digunakan untuk pembuatan sebuah aplkasi yang berjalan di suatu halaman website yang dijalankan pada web browser untuk kode nya bisa dilihat dibawah ini
<HTML> .......... </ HTML>Definisi Elemen dan Tag HTML
Sebuah dokumen HTML disusun oleh beberapa elemen atau lebih dikenal dengan komponen-komponen dasar. Elemen dapat memiliki teks murni, atau bukan teks, atau belakang. Elemen atau komponen tersebut misal Kepala, bodi, paragraf, list, dll.
Untuk memberi sebuah elemen dalam suatu komponen HTML digunakan tag. Tag HTML terdiri dari sebuah [(<) (nama tag) (>)] contoh <h1>, tag pada umumnya derpasangan (misalnya <h1> dengan </ h1>, tanda / pada tag pasangan memberikan tanda itu tag ini merupakan pembatas akhir Elemen yang terbuka oleh tag awal. Jadi secara umum tulisan sebuah tag adalah <nama tag> … </ nama tag> selain itu dalam penamaan tag tidak menganut case sensitive.
Elemen dasar yang harus dimiliki dalam pembuatan dokumen HTML adalah tag html, tag body, dan tag head. Elemen head berisi informasi tentang dokumen, seddangkan elemen tubuh berisi teks dan elemen lainnya. Lebih jelasnya adalah sebagi berikut.
<Html> <Head> .......... informasi dokumen ...... </ Head> <Body> ....... informasi yang ada pada halaman browser ...... </ Body> </ Html>
Kepala
Ada tag berikutnya setelah tag html, digunakan untuk keterangan tentang dokumen web yang akan ditampilkan. Penulisan tag seperti berikut ini:
<Html> <head> ........................ </ head> </ html>
Judul
Ada tag di dalam kepala yang digunakan untuk menarik judul dari dokumen HTML, yang akan muncul pada caption halaman browser jika halaman tersebut diakses. Penulisan tag seperti berikut ini:
<Html> <Head> <Title> Judul Dokumen </ title> </ head> .................. </ html>
Tubuh
Merupakan section utama dalam dokumen web. pada section ini semua dokumen yang akan ditampilkan didalam browser harus dituliskan penulisan tag seperti berikut ini:
<html> <head> <title> Judul Dokumen </title> </head> <body> ....... isi dokumen........... </body> </html>
Heading
Tag heading (hx) digunakan untuk memformat heading ( judul dan subjudul ) dari suatu halaman web. ada enam buah heading yang dikenal HTML, yaitu dari (h1) sampai dengan (h6):
<html> <head> <title> Judul Dokumen </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>
Horizontal Ruler
Tag Horizontal ruler berfungsi untuk menampilkan garis horizontal tiga dimensi didalam halaman web anda. tag horizontal ruler juga tidak memerlukan elemen penutup
Atribat elemen horizontal ruler:
align : [left|center|right] default center
size : pixel ( tebal garis, default 2 )
width : panjang ( lebar garis, pixel atau persen, default 100% ) noshade ( garis solid )
contoh:
<html> <head> <title> Horizontal Ruler </title> </head> <body bgcolor="#222222" text="#FF0000"> <h1> Ecommers Book </h1> <hr width="80%" align="left"> <h4> Hot Releases in Books </h4> <p>Outliers: The Story Of Success</p> </body> </html>Paragraf
tag paragraf <p> berfungsi layaknya untuk mengatur antar paragraf dalam halaman web anda. Dalam elemen paragraf terdapat atribut: align=[left | center | right | yang berfungsi sebagai pengatur perataan paragraf jika anda cukup memilih salah satu dari ketiga pilihan tanpa harus memberi kurung buka dan tutup dan defaultnya adalah left.
<html> <head> <title> Paragraf</title> </head> <body bgcolor="#222222" text="#FF0000"> <H1>Ecommerce Book</H1> <hr width="85%" align="left"> <h4> hot New Releases in Books</h4> <p> Outliers: The Story of Seccess</p> </body></html>List
List item merupakan perintah yang digunakan dalam HTML untuk membuat daftar atau mengelompokan kata ordered List( Numbering ) ordered List digunakan untuk membuat daftar dimana setiap bagianya memliki nomer secar berurut. Ordered List dimulai dengan tag<ol> dan diakhiri </ol>. Untuk menyatakan tiap bagianya digunakan tag<li> dan tidak diperlukan tag penutup, Atribut elemen list yaitu:
TYPE=[1 | a | A | i | I ] (default 1 )
contoh
<html> <head> <title>order list</title> </head> <body> <h2>Kategori Buku</h2> <ol Type="a"> <li>Multimedia <li>Datbase <li>Pemrograman Web <li>Ekonomi <li>Hukum </ol> </body></html>Unordered List (Bullet).berbeda dengan ordered list dalam unordered list tidak dijumpai urutan dalam suatu daftar. setiap bagian dari unordered list ditandai dengan tanda bullet. untuk membuat daftar dengan tanda ini digunakan tag awal<ul> tag penutup </ul> dan untuk tiap bagiannya digunakan tag<li> tanpa tag penutup. Atribut elemen list yaitu
TYPE=[ disc | square | cicle ] (default disc )
<html> <head> <title> unored list</title> </head> <body> <h2>Kategori Buku</h2> <ol Type="a"> <li>Multimedia <li>Datbase <li>Pemrograman Web <li>Ekonomi <li>Hukum </ol> </body></html>Break
Tag break<br> berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web anda. tag break tidak memerlukan tag penutup tag.
<html> <head> <title> Paragraf</title> </head> <body bgcolor="#222222" text="#FF0000"> <H1>Ecommerce Book</H1> <hr width="85%" align="left"> <h4> hot New Releases in Books</h4> <p> Outliers: The Story of Seccess<br>Against all Enmien<br>Thirteen Reasons Why<br> The Walkingdead Volume 14: No way out TP<br>other </p> </body></html>Format Karakter
Format terhadap karakter yang ditampilkanj akan sangat berguna untuk membuat sebuah dokumen HTML yang menarik. Pemformatan karakter tersebut mencakup beberapa hal:
Logical Format.
Logical Format akan menerepkan layout dokumen secara logis dan terstruktur. Tag-tag yang termasuk logical format adalah sebagai berikut:
- <cite>, digunakan untuk menandai susuatu kutipan
- <code>, digunakan untuk menampilkan kode-kode pemprograman misalnya bahasa PHP
- <em>, digunakan untuk menandai suatu text yang ditekankan oleh penulis.
- <kbd> digunaka untuk menandai teks yang akan dimasukan oleh user melalui keyboard
- <samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
- <strong>, digunakan untuk menandai bagian yang terpenting dari suatu teks.
- <var>, digunakan untuk menampilkan nama variable.
- <dfn>digunkan untuk menandai sebuah subdefinisi dari daftar definisi.
<html> <head> <title> logical format</title> </head> <body> <cite> Albert Einstein</cite> adlah toko ilmuan Fisika<br><br> untuk menampilkan isi variable dipemrograman PHP adalah:<code> echo"$content";</code><br><br> saya berkata,"saya bisa<em>pasti bisa</em><br><br> untuk melihat direktori ketikan<kbd>dir</kbd><br><br> pada abjad terdapat 5 huruf vocal, yaitu<samp>AEIUO</samp><br><br> kata terakhir yang diucapkannya adalah <strong>Aku Mnecintaimu!</strong><br><br> Kode program tersebut diiterasi sebanyak<var>N</var> kali <br><br> <dfn>Kambing adalah hewan pemakan Rumput.</dfn> </body></html>Physical Format.
Physical Format adalah format terhadap fisik suatu font. tag-tag yang termasuk physical format adalah sebagai berikut:
- <b> untuk menampilkan huruf tebal.
- <i> untuk menampilkan huruf miring.
- <u> untuk menampilkan garis bawah pada teks
- <tt> untuk menampilkan huruf seperti huruf mesin ketik
- <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.
- <big>, untuk menampilkan ukuran huruf yang lebih tebal
- <small>, untuk menampilkan ukuran huruf yang lebih kecil
- <sub>, untuk menampilkan subscript
- <sup>, untuk menampilkan superscript
<html> <head> <title> memformat karakter</title> </head> <body> <H1>Ecommerce Book</H1> <b>kalimat ini akan dicetak tebal </b><br> <i>kalimat ini akan dicetak miring </i><br> <u>kalimat ini akan bergaris bawah </u><br> <strike>kalimat ini akan bergaris tengah </strike><br> <tt>kalimat ini akan menampilkan seperti huruf mesin ketik </tt><br> untuk menampilkan<sub>subscript</sub><br> untuk menampilkan<sub>superscript</sup><br> </body></html>Blockquotes
Tag <BLOCKQUOTE> Untuk membuat identitas Paragraf, kita bisa menggunakan blockquote dengan perintah tersebut browser akan menampilkan teks menjorok mendalam kedalam atau menampilkan teks.
<html> <head> <title>quotes/indentase</title> </head> <body> <font color=”#222222” size=”7”>qoutes atau identasi </font> <p> Dengan html anda bisa mengatur text yang anda buat dengan mengatur tag Blockquotes <blockquotes> ini adlah paragraf yang menggunkan blockquotes, anda dapat melihat perbedaannya ketika script ini dijalankan. </blockquotes> nah anda sudah mengetahui perbedaannya kan?? Jadi belajar HTML tidak sulit dan anda bisa mencoba banyak hal disini </p> </body> </html>Preformatted Text.
Performatted text <PRE> digunakan untuk menampilkan text sama seperti yang anda ketikan dalam dokumen HTML. Browser akan menampilkan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam tels yang ditampilkan oleh aplikasi berbasis teks.
Sebagai contoh, cobalah latihan berikut:
<html> <head> <title>Formating Teks</title> </head> <body> <font color=”#222222” size=”7”>qoutes atau identasi </font> <p> <pre> Menampilkan teks sama seperti yang anda ketikan dalam dokumen HTML </pre> </p> </body> </html>Font
Dengan tag <font> anda bisa menentukan format tampilan font dalam dokumen HTML seperti color, size style dan lainnya.
- Ukuran Font
- Jenis Font
- Warna Font
- Dengan menyebutkan nama warna seperti red, green, blue.
- Dengan nilai RGB dari satu warna misalnya FF0000 untuk red, 00FF00 untuk green dan 0000FF untuk Blue.
<html> <head> <title>Formsting teks</title> </head> <body> <p><font color=”#222222” size=”7”>menggunakan Font dan Atribut </font></p> <p> <font face=”verdana”> teks ini menggunakan atribut Face</font><br> <font Size=”+3”> teks ini menggunakan atribut size</font><br> <font color=”#990000”> teks ini menggunakan atribut COLOR</font><br> </P> </body> </html>Karakter Khusus
Tanda lebih kecil (<) dan lebih besar (>) merupakan tag HTML , lalu bagaimana cara untuk menuliskan tanda tersebut ke dalam dokumen web kita? Caranya adalah dengan menuliskan entitas karakter yang mempunyai 3 bagian: sebuah ampersad(&), sebuah nama entitas atau sebuah # dan nomer entitas, dan sebuah titik koma
Contoh
Untuk menam pilkan tanda lebih kecil kita harus menuliskan : < atau <
<html> <head> <title>memformat karakter</title> </head> <body> Ampersand & <br> « angel quotation mark (left)<br> angel quotation mark (right)" <br> " tanda kutip "<br> Lebih kecil <<br> Lebih besar ><br> Tanda kali ×<br> Copyright © <br> </body> </html>Grouping Element
Tag DIV dan SPAN digunakan untuk mengelompokan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan blocklevel content. <html> <head> <title>Div dan span</title> </head> <body> <div> Divis 1 <p> Div digunakan untuk mengelompokan group element biasanya untuk blocklevel element</p> <div align=”center”> Divisi 2 <p> paragraf ini ditulis dengan alignment center.</p> </body> </html>Hyperlink
Dengan hyperlink ini berbagai halaman web yang berbeda dapat saling dihubungkan. Untuk membuat link anda dapat menggunakan perintah anchor (a) untuk membuat link ke dokumen HTML lain dengan perintah berikut
<a href=”nama_dokumen”> teks pada browser</a>
Bisa juga membuat lnk dalam sebuah dokumen HTML. Untuk itu perlu disediakan nama anchor lokasi tujuan dari link tersebut. Fungsi Anchor sangant berguna jika dokumen HTML yang anda buat memuat banyak informasi. Nama ancor dibuat dengan menambahkan atribut”name”
Contoh:
<a name=”HTML dan CSS”> HTML dan CSS</a> Cara melakukan link dibagian tersebut yaitu: <a href=”nama_anchor”>teks pada browser</a>Tabel
Tabel banyak digunakan kaena dapat menampilkan informasi yanmg ringkas dan mudah dibaca. Untuk membuat table digunakan tag awalan <table> dan tag penutup </table>
Tag <table> memiliki bagian beberapa bagian penting, yaitu;
- <caption>…</caption> digunakan untuk membentuk judul table. Judul table ini akan terletak diluar tabel, bisa dibagian atas atau bisa juga dibagian bawah
- <th>….</th> digunakan untuk meletakan judul tabel dibagian paling atas atau paling kiri dari suatu tabel. Tabel header akan dicetak dalam huruf tebal.
- <tr>….</tr> diapakai untuk membentuk baris pada suatu tabel
- <td>….</td> digunakan sebagai tempat menulis data atau informasi dalam tabel
<html> <head> <title>Tabel</title> </head> <body> <table width=”363” border=”2” bordercolor=”#0000FF”> <caption>membuat tabel</caption> <tr> <td width=”120”> baris 1 kolom 1</td> <td width=”110”> baris 1 kolom 2</td> </tr> <tr> <td > baris 2 kolom 1</td> <td > baris 2 kolom 2</td> </tr> <tr> <td > baris 3 kolom 1</td> <td > baris 3 kolom 2</td> </tr> </table> </body> </html>Frame
Frame digunakan untuk membagi jendela browser memjadi beberapa bagian dan masing – masing bagian terdiri dari dokumen HTML tersendiri,. Frame pertama kali diperkenalkan oleh Nescape Navigator 2.0
Untuk membuat sebuat frame, tag yang digunakan adalah:
- Tag <frameset> mempunyai beberapa atribut:
- Rows: membuat frame secara mendatar (baris) sekaligus mendefinisikan lebar masing-masing.
- Cols : membuat frame secara vertikal (colom) sekaligus mendefinisikan lebar masing- masing
- Bordercolor: mendefinisikan warna bingkai frame.
Dengan nilai tetap
<frameset rows=”100,240,400”>
Dngan nilai presentase
<frameset cols=”30%,40%,30%”>
Dengan nilai proporsional
<frameset rows=”*,2*,3*”>
Dengan nilai tetap, setiap frame didefinisikan dalam ukuran pixel. Cara ini kurang baik karena jika resolusi monitor user tidak sama dengan resolusi monitor pada saat perancangan frame, maka frame yang terbentuk akan menjadi kacau. Dengan nial presentase lebar setiap frame didefinisikan sebagi presentase dari lebar jendela browser sehingga resolusi komputer tidak akan terpengaruh .
Dengan nilai proposional, lebar setiap frame juga didefinisikan sebagai persentase dari lebar jendela browser, hanya saja pembacanya agak berbeda.
- Tag <frame> mempunyai beberapa atribut:
- Src: menentuan nama file HTML yang akan digunakan sebagai isi frame.
- Marginheight: menentukan batas atas dan bawah antar dokumen dengan bingkai dalam fixel
- Marginwidth: menentukan batas kiri dan kanan antara dokumen denga bingkai dalam pixel
- Scrolling: menentukan apakah frame dapat memiliki scroll bar, nilainya Yes, No Auto
- Noresize: jika atribut ini disebutkan maka ukuran frame tidak dapat dirubah
- Name: mendefinisikan nama dari objek frame; bisa sebagai tujuan link.
- Border: menentukan ukuran bingkai frame.
- Tag <noframe> digunakan untuk menampilkan sebuah alternativ dokumen jika browser tidak mendukung penggunaan frame. Sebuah frame dapat didefinisikan didalam frame lain.
<html> <head> <title>frame kiri</title> </head> <body> <table bgcolor=”0000FF”> <H1> bingkai sebelah kiri </ h1> </ Body> </ Html>
<Html> <Head> <Title> frame Kanan </ title> </ Head> <Body> <Table bgcolor = "0000FF"> <H1> bingkai sebelah kanan </ h1> </ Body> </ Html>
<Html> <Head> <Title> contoh penggunaan Frame </ title> </ Head> <Frameset cols = 30 &, **> <Frame src = framekiri.html "> <Frame src = framekanan.html "> </ Html>
Tidak ada komentar:
Posting Komentar