ONA GREEN: Hypertext Markup Language

kali ini saya akan menulis sedikit tentang pengetahuan bahasa hypertext markup language yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi didalam sebuah browser Internet. semoga bermanfaat,, kalau ada kesalahan maaf ya !! ini hanya pengetahuanku saja... selamat membaca^_^

1.1. Pengertian Html ( Hypertext Markup Language )

HTML adalah sebuah bahasa markup yang digunakan untuk membuat

sebuah halaman web dan menampilkan berbagai informasi didalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan didunia penerbitan dan percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C).

›Struktur HTML

›Secara umum dokumaen web dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola dasar lengkap.

›Contoh umum HTML :

›Maka hasilnya akan terlihat seperti berikut : (save dengan ekstensi .html)

Keterangan :

- Html : merupakan tag dasar yang mendefinisikan bahwa dokumen ini

adalah dokumen HTML.

- Head : merupakan tag berikutnya setelah

ø <html> untuk menuliskan

keterangan tentang dokumen web yang akan ditampilkan

ø Title : merupakan tag didalam head untuk memberikan judul pada

caption browser web serta topik atau judul dari dokumen web

yang akan ditampilkan dalam browser.

ø Body : merupakan section utama dari web. Pada section ini semua isi

dokumen yang akan ditampilkan didalam browser harus dituliskan.

1.1. Perintah Dasar HTML

›<h1> sampai <h6> : untuk mengubah ukuran teks

›<hr> membuat garis horisontal

› membuat teks miring

› membuat teks tebal

› membuat teks begaris bawah

›<center> menengahkan teks

› memasukan fungsi enter atau ganti baris kebawah

› untuk memisahkan paragraf

› dan <face> untuk mengubah jenis dan ukuran font

›<ul> membuat daftar list

›<li> mendefinisikan list dalam tag

›<ol> membuat daftar list

Keterangan :

ø Tag adalah teks khusus (markup) berupa dua karakter “<dan>”, sebagai contoh <body> adalah tag dengan nama body.

ø Elemen terdiri dari 3bagian yaitu tag pembuka isi dan tag penutup sebagai contoh menampilkan judul dokumen HTMl pada web browser digunakan element title.

ø atribute mendefenisikan property dari suatu element html yg trdr atas nama & nilai.

ø element html menyatakan pada browser bahwa dokumen web yg di gunakan adalah html.

ø element head merupakan kepala dari html.

ø element title merupakan judul dari dokumen html yg di tampilkan pada judul jendela browser.

ø element body elment ini untuk menampilkan isi dokumen html

1.1.1. untuk membuat html diperlukan dua macam

shoftware yaitu : html editor & web browser

*contoh html editor : macromedia dreamweaver,ms.frontpage,notepad,dll

*contoh web browser:internet explorer,mozila firefox,opere,dll

*Langkah mencoba html

1.2. Struktur Dasar HTML

2.3.1 - Definisi HTML

HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW), dan semua nama file dokumen HTML mempunyai ekstensi html atau htm.

Dalam sebuah dokumen HTML anda akan melihat tags. Tags adalah penempatan atau nilai format teks yang memerintahkan browser untuk menampilkan sebuah dokumen html.

2.3.2 Pengertian HTML Tag

Tag dipakai untuk mendeskripsikan sesuatu tentang dokumen HTML.
Tag diletakkan dalam kurung, <seperti ini>. dipakai untuk mendeskripsikan sesuatu tentang dokumen HTML.
Tag diletakkan dalam kurung, <seperti ini>.

Tag ada 2 macam; tag tunggal dan tag berpasangan. Perbedaannya, kalau tag tunggal munculnya sendiri, sedangkan tag yang berpasangan harus ada bagian yang mengawali dan mengakhiri. Bagian yang mengakhiri sama dengan yang mengawali, tapi diawali dengan garis miring (/).

Contoh tag tunggal:

ø menandai akhir dari sebuah paragraf

ø menandai akhir sebuah baris.

ø <HR> membuat sebuah garis horisontal.

Contoh tag berpasangan :

ø <BODY> dan </BODY> menandai awal dan akhir dari tubuh dokumen.

ø dan untuk membuat karakter cetak tebal.

ø dan untuk membuat karakter cetak miring.

2.3.3 Jenis Tag

ø tag < > digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.

ø Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup. Contoh: <td> text yang ditampilkan </td>.

ø Tag biasa, contoh (break). tidak perlu ditutup oleh tag , tapi jika sintak yang digunakan tag container, contoh: <h1>, mesti ditutup dengan </h1>.

ø Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td> Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.

2.3.1 Langkah 1 dan Langkah 2

* MEMBUKA NOTEPAD.
* Mengetikkan Sintak/Syntax.

© Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan
<html>
tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>
Kemudian ketikkan <body>.

© Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:

<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
</body>

?
Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML???

Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan di halaman web, By: C.H.I.P. Sensei
</body>
</html>
kalo udah, sekarang save dengan nama dasarHTML.
kalo udah disave, buka data yang tadi di save.
<hr>
<marquee direction="up" behaviour="scroll"> what's up...?</marquee>

1.1. HTML Editor

Dokumen HTML bisa dibuat dengan menggunakan text editor biasa ataupun dengan editor khusus.

- Contoh-contoh HTML Editor :

1.2. Buat file HTML

Anda dapat membuat halaman web atau dokumen HTML dengan editor teks apapun (termasuk Microsoft Notepad, DOS mengedit, Mac SimpleText, dan UNIX vi). Anda mungkin sudah memiliki setidaknya salah satu editor diinstal pada komputer Anda, bahkan jika Anda belum pernah menggunakannya sebelumnya.

Untuk melihat apa yang tampak seperti HTML dan mempelajari tag HTML yang paling dasar, mari kita lihat sebuah dokumen HTML yang sangat sederhana. Di bawah angka menunjukkan halaman Web sederhana di Microsoft Notepad. Anda dapat mengetik teks yang sama di editor Anda sendiri untuk mengikuti bersama dengan bab ini.

Setiap dokumen HTML harus dimulai dengan tag <html> dan diakhiri dengan melengkapi nya, </ html> tag. Selain tag <html>, dokumen ini mencakup tiga pasangan lain dari tag yang harus dimasukkan dalam dokumen HTML:

<head> Dan </ head> pasangan tag digunakan untuk menunjukkan informasi tentang dokumen itu sendiri. Anda akan belajar bagaimana menambahkan beberapa informasi ini dalam bab-bab selanjutnya.
<title> Dan </ title> tag digunakan untuk menambahkan judul Title bar browser Anda. Judul bar adalah pita berwarna di bagian atas setiap aplikasi yang memberikan nama aplikasi.

<body> Dan </ body> tag digunakan untuk mengelilingi setiap teks yang muncul di halaman HTML.

Semua dokumen HTML dipisahkan menjadi dua bagian: kepala dan tubuh. Karena judul berisi informasi tentang dokumen, <title> dan </ title> tag ditempatkan dalam <head> dan </ head> tag.

Jika Anda membuat sebuah halaman HTML sederhana, Anda akan melihat

bahwa empat tag yang sama yang hadir dalam kode ini juga.

2.5.1 Melihat suatu file HTML

Untuk melihat halaman Anda sendiri di browser, Anda harus menyimpannya terlebih dulu. Karena Anda telah membuat dokumen HTML, Anda ingin menyimpan file Anda dengan ekstensi htm. (First.htm, misalnya) sehingga Anda mengenalinya dengan cepat.

Anda dapat melihat file HTML di browser Anda, bahkan ketika file yang disimpan pada komputer Anda daripada pada server Web. Di Internet Explorer, Anda dapat melihat file baru dengan memilih Open dari menu File. Di bawah angka menunjukkan bagaimana Internet Explorer menampilkan file first.htm yang Anda buat pada chapter1.1.

Perhatikan bahwa Title bar berisi teks antara <title> dan </ title> tag dan tubuh browser berisi teks antara <body> dan </ body> tag. Meskipun Anda tidak melihat mereka, perintah HTML yang duduk di belakang layar dari setiap dokumen yang Anda buka di browser Web Anda. Anda dapat melihat perintah HTML dengan memilih Sumber dari menu View dari Internet Explorer. Bila Anda menemukan halaman di web yang Anda sukai, Anda dapat melihat kode sumber untuk mempelajari bagaimana Anda dapat menggunakan HTML untuk membuat sesuatu yang serupa.

2.5.2 XHTML Persyaratan

XHTML, revisi terbaru dari HTML, menambahkan unsur lain yang diperlukan untuk halaman web Anda: <! DOCTYPE> tag. Tag ini akan muncul di bagian atas file dan mengidentifikasi file sebagai dokumen HTML sesuai dengan persyaratan XHTML. Jika Anda adalah untuk membuat dokumen XHTML-conforming, itu akan terlihat seperti berikut:
<DOCTYPE html!
PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd ">
<Html xmlns = "http://www.w3.org/1999/xhtml"
xml: lang = "en" lang = "en">
<head>
<title> saya Halaman XHTML </ title>
</ Head>
<body>
 ini adalah halaman XHTML pertama saya. 
</ Body>
</ Html>

Anda mungkin telah memperhatikan satu perubahan lebih dari elemen yang dibutuhkan HTML: Tag <html> memiliki beberapa atribut baru: xmlns, xml: lang, dan lang. Dalam HTML, Anda hanya harus menyertakan tag <html> untuk mengidentifikasi dokumen sebagai file HTML, XHTML tapi mengharuskan Anda menggunakan xmlns atribut untuk menghubungkan dokumen Anda dengan definisi W3C XHTML, yang terus berkembang. Di bawah angka menunjukkan bagaimana halaman XHTML, dibuat sebelumnya, akan muncul dalam browser.

selain itu juga tampilan ini dapat kita tambahkan background color,mengubah tulisan dalam text,mengubah heading,hiperlink,paragraph,garis dan tambahan gambar pada halaman tersebut:

ø berikut akan saya jelaskan 1 per 1:

html
head title monica danesa /title /head

html
body bg style="color:yelow;"
font face="arial",size="15"
/body
/html

html
body
h1 digunakan untuk menampilkan heading 1 /h1
h2 digunakan untuk menampilkan heading 2 /h2
hr digunakan untuk menampilkan garis /hr
/body
/html

html
body
p cara ini digunakan umtuk menapilkan spasi pada tampilan ini /p
p align="center" bisa juga di atur letaknyabagimana kemauan kita /p br/
/body
/html
(br/ => digunakan untuk menampilkan spasi)

html
body
img src="gambar.jpg" height="50" width="40"
hl type="a"
li monica
li kenya
li untuk menampilkan lis
/hl
a hrec="http//google.com" ke google /a
/body
/html

Dokumen HTML menggunakan font default dari Windows (Sistem OperasiKomputer) atau browser (Internet Explorer), biasanya Times New Roman dengan ukuran 12 point. Kita bisa mengubah jenis, warna dan ukuran font sesuai dengan selera kita menggunakan tag diikut denganatribut-atributnya.

Misalnya untuk mengubah jenis font kita gunakan atribut FACE:<HTML><BODY>Ini adalah font <FONT

FACE="Arial">Arial, ini adalah font

<FONTFACE="Verdana">Verdana, dan ini adalah font <FONT

FACE="Impact">Impact</HTML></BODY>

Bila dilihat dalam

Ini adalah font Arial, ini adalah font Verdana, dan iniadalah font Impact Untuk mengubah ukuran font, gunakan atribut

SIZE:<HTML><BODY><FONT

SIZE="1">Font Size 1, 

Font Size 2,

<FONTSIZE="3">Font Size 3, Font Size

4, Font Size5,

Font

Size 6, Font Size

7</HTML></BODY>Bila dilihat dalam browser, akan tampak seperti ini:Font Size 1, Font Size 2, Font Size 3, Font Size 4, FontSize 5, Font Size 6,

Font Size 7 Sedangkan untuk mengubah warna tulisan, menggunakan atribut

COLOR:<HTML><BODY>Tulisan warna

biru, Tulisan warnamerah, <FONT

COLOR="yellow">Tulisan warna kuning</HTML></BODY>Bila

dilihat dalam browser, akan tampak seperti ini:Tulisan warna biru, Tulisan warna

merah, Tulisan warnakuningDalam satu tag FONT kita bisa menggabungkan lebih

dari satu atribut. Perhatikan contoh berikut:<HTML><BODY><FONT

FACE="Arial" SIZE="2">Font Arial ukuran 2, <FONT

FACE="Verdana"COLOR="red">Font Verdana warna merah, <FONT

FACE="Impact SIZE="5"COLOR="blue">Font Impact ukuran 5 warna

biru</HTML></BODY>Bila dilihat dalam browser, akan tampak

seperti ini:Font Arial ukuran 2, Font Verdana warna merah, FontImpact ukuran 5 warna biru.

digunakan tag <BASEFONT> yang ditempatkan diantara tag <HEAD> dan </HEAD>.

Contoh: <HTML><HEAD><BASEFONT FACE="arial" SIZE="10"

COLOR="blue"></HEAD><BODY>Font default untuk semua tulisan pada

halaman ini adalah font arial dengan ukuran 10 dan warna

biru.</HTML></BODY>Cobalah buat dalam sebuah file HTML kemudian lihat

hasilnya dalam browser!SUBSCRIPT DAN SUPERSCRIPTSubscriptadalah tulisan yang agak kecil dan letaknya agak di bawah sedangkan superscript adalah tulisanyang agak kecil dan letaknya agak di atas. Untuk menulis subscript kita gunakan tag sedang untuk menulis superscript kita gunakan tag .

<HTML><BODY>Tulisan NormalTulisan

SubscriptTulisan NormalTulisan

Superscript</HTML></BODY>Beginilah hasilnya dalam browser:

Tulisan Normal Tulisan Subscript.

2.5.3 Elemen HTML

Exp: html, body, head, table, dll

Exp: BgColor, Leftmargin, Rightmargin, Topmargin, Bottommargin, Link, Vlink, Alink

Exp: red, #fff, rgb(),dll

2.5.4 Gambar HTML Dasar

1. Gambar HTML Dasar

ø Cara meng-compile website:

1. Menggunakan Tag Heading

2. Menggunakan tag font untuk format huruf

3. Menggunakan tag font dan tag br untuk ganti baris

4. Menggunakan bullets dan numbering

5. Menggunakan format tag seperti bold, italic, underline, Superscript, dll

Isikan kode tag html diatas ke dalam program notepad.
Kemudian save as “all type”, simpan di “Local Disk C” xampp – Htdocs
Beri nama file dengan nama index.html

6. Menempatkan Komentar

7. Menggunakan Tag untuk paragraf dan Tag <pre>

Untuk tak pre digunakan sebagai pembuatan tulisan yang tata letaknya dapat kita atur sesuai dengan penampilan pada saat pembuatan di notepad.

8. Menggunakan Tag <div>

9. Menggunakan Tag <dl>,<dd>,<dt>

10. Menyisipkan gambar (image)

11. Membuat Hyperlink

12. Penggunaan Tabel

Tag-Tag yang digunakan :

<TABLE> untuk pembuatan table dengan atribut BORDER untuk member bingkai

<CAPTION> menetukan judul table

<TR> membuat baris dalam table

<TH> membuat judul kolom

<TD> membuat sel data

13. Penggabungan sel dengan tag <ROWSPAN>

Atribut ROWSPAN ditempatkan pada tag <TD>

14. Penggabungan sel dengan tag <COLSPAN>

Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>

15. Pengaturan jarak pada tabel

CELLSPACING mengatur jarak bagian sel terhadap tepi dalam bingkai table

CELLPADDING mengatur jarak teks terhadap tepi kiri

16. Contoh Layout Web 3 baris 2 kolom

17. Hasil Layout Web 3 baris 2 kolom

Isikan kode tag html diatas ke dalam program notepad.
Kemudian save as “all type”, simpan di “Local Disk C” xampp – Htdocs
Beri nama file dengan nama index.html

17. Penggunaan Tag Embed

Tag digunakan untuk memasukkan file video atau audio. Hasil yang ditampilkan tag ini tergantung browser masing-masing karena EMBED mengharuskan browser yang digunakan telah terinstall suatu plugin yang mendukung untuk memainkan file musik atau video yang terdapat pada halaman HTML tersebut.

Contoh :

2.6 Penggunaan Tag

1. Input Data dengan Input

2. Penggunaan Tipe Chexbox

3. Penggunaan Tombol Radio, Komentar dan Upload Data

4. Pemilihan dengan Select

4. Mengaplikasikan Music dan Video menggunakan HTML 5

2.6.1 Macam – Macam Type Input

Text
Number
Date
Password
Option

- Chexbox (bisa dicentang semua)

- Radio (pilihan harus satu)

- Option (pilihan drop down)

6. Text Area

7. Button

- Button

- Submit

- Next

ONA GREEN

Translate

Senin, 28 Oktober 2013

Hypertext Markup Language

Tidak ada komentar:

Posting Komentar