Belajar HTML Dasar TUNTAS! | Singkat Mudah dan LENGKAP

HTML DASAR LENGKAP

• Word Wide Web

• Mengenal HTML

Word Wide Web

• Dikenal dg istilah Web merupakan salah satu layanan di Internet

• Web pada awalnya merupakan ruang informasi dalam internet

• Dgn menggunakan teknologi Hypertext pemakai dituntun untuk menemukan informasi dgn mengikuti link yang disediakan.

Bagaimana WWW Bekerja?

• Informasi web disimpan dalam dokumen yang disebut Web Pages

• Web Page adalah file-file yg disimpan dlm komputer disebut Web Server

• Komputer-komputer yang membaca web page disebut sebagai Web Client

• Web Client menampilkan web page dgn program yg disebut dg Web Browser

WEB BROWSER

• Web Browser adalah software yg dipakai untuk membaca dan menterjemahkan web pages.

• Web Browser yg sering digunakan adalah Nescape Navigator dan MSIE (Microsoft Internet Exploler), Opera, Mozilla, Avan Browser.

• Browser memanggil web page dari web server dengan sebuah Request.

MENGENAL HTML

• HTML (Hyper Text Markup Language): Dokumen HTML adalah sebuah file teks murni.

• Dokumen HTML diberi dengan nama sembarang dg tambahan extension “.htm” atah “.html”

Defenisi

• Elemen: Merupakan istilah bagi komponen dasar pembentuk dokumen HTML (html, head, Title, dsb).

• TAG: Suatu simbol yang digunakan untuk memberi tanda pada dokumen HTML. Tag HTML menggunakan tanda < dan >

Struktur Dasar Dokumen HTML:

Contoh 1:

Hasil:

Contoh 2:

Hasil:

Setelah mengenal struktur dasar HTML, kita lanjut lagi ke Materi Selanjutnya... (Format Teks)

• Tag-tag Dasar HTML

• Formating Teks HTML

• Font

Tag-Tag Dasar

• <HTML> : Tag dasar HTML, mendefinisikan bawah dokumen adalah HTML

• <HEAD> : menuliskan keterangan tentang dokumen web.

• <TITLE> : Memberi judul/Caption browser web.

• <BODY> : Section utama dari dokumen web.

Paragraf

• Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam penulisan.

• Setiap paragraf harus diawali dengan tag <P> dan diakhiri dg tag </P>

• Bentuk:

Contoh:

<html>

<head>

<title>Paragraf</title>

</head>

<body>

<p align=“right”>SELAMAT DATANG</p>

<p align=“center”>Di Dunia HTML</p>

<p>Elemen paragraf ditandai dengan tag P

dan setiap paragraf baru di tampilkan pada baris baru</p>

<p align="justify">Untuk melihat dokumen HTML secara lokal melalui browser Web (misalkan Internet Explorer) kita buka file tersebut dengan memilih menu FILE dan OPEN FILE.</p>

</body>

</html>

Hasil:

Line Break

• Tag <BR> digunakan untuk pindah baris/Paragraf Baru

<html>

<head>

<title>Paragraf</title>

</head>

<body>

Elemen paragraf <BR>ditandai dengan tag P <BR> dan setiap paragraf baru <BR>

di tampilkan pada baris baru

</body>

</html>

Hasil:

Heading

• Heading bisanya digunakan untuk judul topik dan tag yg digunakan adalah <H1>…<H6>

• Makin besar angka dibelakang H, maka huruf yang akan ditampilkan semakin kecil.

• Bentuk:

Contoh:

<html>

<head>

<title>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>

Hasil:

Contoh lain:

<html>

<head>

<title>Paragraf</title>

</head>

<body>

<h1 align="right">SELAMAT DATANG</h1>

<h3 align="center">Di Dunia HTML</h3>

<p>Elemen paragraf ditandai dengan tag P

dan setiap paragraf baru di tampilkan pada baris baru</p>

<p align="justify">Untuk melihat dokumen HTML secara lokal melalui browser Web (misalkan Internet Explorer) kita buka file tersebut dengan memilih menu FILE dan OPEN FILE.</p>

</body>

</html>

Hasil:

Membuat Garis

• Tag <HR> disisipkan pada tempat garis akan ditampilkan

• Bentuk:

FORMATING TEKS HTML

Teks dokumen HTML dapat diformat secara chusus u/ menunjukkan perbedaan dan penekanan terhadap isi dan maksud dokumen.

Menebalkan teks
Cetak miring
Memberi tekanan pada teks
Memperkecil huruf
Superscript
Subscript
Text Scroll
dsb

Contoh:

<B> BELAJAR HTML </B>

Hasil: BELAJAR HTML

<I> BELAJAR HTML </I>

Hasil: BELAJAR HTML

<U> BELAJAR HTML </U>

Hasil: BELAJAR HTML

<B><I>< U> BELAJAR HTML </U></I></B>

Hasil: BELAJAR HTML

X<sup>3</sup> + 2X<sup>2</sup> - 5

Hasil: X³ + 2X² - 5

H<sub>2</sub>O

Hasil: H₂O

Teks Scrolling/Berjalan

• Tag yg digunakan untuk membuat teks scrolling (teks berjakan) adalah <marquee>

• Atribut tag <marquee>

**Teks Scroll Marquee**
Atribut	Penjelasan
Bgcolor	Warna latar belakang
Width='%'	Lebar Scroll yang di inginkan
Height='%'	Tinggi Scroll yang di inginkan
Direction	<- 'Left' atau 'Right' ->
Behavior	Scroll, Slide atau Alternate
Scrolldelay	Kecepatan Scroll Teks berjalan

Contoh:

<html>

<head>

<title>Marquee</title>

</head>

<body>

<h1>SELAMAT DATANG</h1></marquee>

<h2> SMK DARUSSALAM MAKASSAR </h2></marquee>

</body>

</html>

Font

• Atribut Tag Font

**Tag Font**
Atribut	Penjelasan
Size='n'	Ukuran font 1-7 (Max 7)
Size='+n'	Menaikkan ukuran font sebesar 'n'
Size='-n'	Menurunkan ukuran font sebesar 'n'
Color='Warna'	Warna Font
Face='Nama_Font'	Jenis Font, Contoh 'Arial'

Contoh:

• Penggunaan <Font Size=“”>

<BODY>

</BODY>

Hasil:

Menggunakan Font Color

Contoh:

<HTML>

</BODY>

</HTML>

Hasil:

Menggunakan <Font face=“”>

Contoh:

<FONT face="Arial Black">Font Arial Balck</font><br>

<FONT face="Tahoma">Font Tahoma</font><br>

<FONT face="Comic Sans MS">Font Comic Sans MS</font><br>

<FONT face="Time New Roman">Font Time New Roman</font><br>

<FONT face="Arenski">Font Arenski</font>

</BODY>

Hasil:

Contoh Lain:

Apakah dokumen HTML itu ?</font>

Adalah file teks reguler (file ASCII) yang diciptakan dengan menggunakan editor teks (misalnya, Notepad dalam Windows, Emacs atau vi dalam Unix/Linux) atau dengan menggunakan word processor, yaitu bila menyimpannya dalam format "text only with line breaks"</font>

Adalah dokumen yang tampil dalam Web, dimana semua orang dalam

seluruh jaringan Internet di seluruh dunia dapat mengaksesnya

</body>

Hasil:

Setelah mempelajari Formatting Teks pada Html kita lanjutkan lagi ke Materi selanjutnya.(LIST)

LIST

Untuk Menguraikan Suatu Daftar

ada 2 macam List pada HTML yaitu:

Ordered List

• List dibuat dengan menggunakan angka atau abjad

**Ordered List**
Type	Arti
I	Romawi Besar
i	Romawi Kecil
A	Huruf Besar
a	Huruf Kecil

• Type bila tidak disebutkan, list berbentuk angka

• Tag yang digunakan adalah <OL> dan berpasangan dengan tag <LI> untuk List-nya

• Bentuk:

<LI> Teks

…..

<LI> Teks

</OL>

Contoh:

<HTML>

<BODY>

<B>SERBA GRATIS DARI INTERNET</B>

<B><LI>Penyelenggara E-mail Gratis!</B>

<LI>DALAM NEGERI :

<OL>

<LI>Telkom

<LI>BolehMail

</OL>

<LI>LUAR NEGERI :

<OL>

<LI>Yahoo

<LI>Excite

</OL>

<B><LI>Penyelenggara Web Space Gratis!</B>

</OL>

</BODY>

</HTML>

Hasil:

Unordered List

• List dibuat dengan menggunkana simbol (bullet)

• Type list unordered

**Unordered List**
Type	Arti
Disc	Bulatan Penuh
Circle	Bulatan Kosong
Square	Segi Empat Penuh

• Tag yang digunakan adalah <UL> berpasangan dengan tag <LI>

• Bentuk:

<LI> Teks

…..

<LI> Teks

</UL>

Contoh:

<HTML>

<BODY>

<B>SERBA GRATIS DARI INTERNET</B>

<UL>

<LI><B>Penyelenggara E-mail Gratis!</B>

<UL>

<LI>DALAM NEGERI :

<UL>

<LI><U>Telkom</U>

<LI><U>BolehMail</U>

</UL>

<LI>LUAR NEGERI :

<UL>

<LI><U>Yahoo</U>

<LI><U>Excite</U>

</UL>

<LI><B>Penyelenggara Web Space Gratis!</B>

</ul>

</BODY>

</HTML>

Hasil:

Setelah mempelajari List "Ordered List dan Unordered List kita lanjutkan ke materi selanjutnya.(IMAGE)

IMAGE

Image (gambar) dalam suatu web merupakan daya tarik bagi pengunjung.

Umumnya browser menampilkan inline image (gambar disajikan bersamaan dg teks).

Image yg dpt ditampilkan dalam web site adalah jenis GIF, JPG, XBM, dan PNG

• Bentuk Umum

• Atribut Image

**Ordered List**
Type	Arti
Width	Menentukan lebar Image
Height	Menentukan tinggi Image
Align	Perataan Image Top, Bottom, Middle, Left, Right
Alt	Menentukan alternatif Image
Border	Memberi bingkai pada Image

Mengubah Ukuran Image/Gambar

<HTML>

<BODY>

<IMG SRC="Ayuazhar.gif"> (ukuran asli)

<IMG SRC="Ayuazhar.gif" WIDTH="45" HEIGHT="60"> (45x60 pixel)

<IMG SRC="Ayuazhar.gif" WIDTH="180" HEIGH="240"> (180x240 pixel)

</BODY>

</HTML>

Hasil:

Alternatif Image

<HTML>

<BODY>

</BODY>

</HTML>

Hasil:

Image Border

• Memberi bingkai pada image

<HTML>

</BODY>

</HTML>

Hasil:

Image Sebagai Link

• Image juga dapat dijadikan sbg Link

• Bentuk:

Contoh:

Setelah mempelajari tag Image/Gambar kita lanjutkan ke materi selanjutnya. (TABEL)

Tabel dalam HTML

• Tabel digunakan untuk menyajikan data dalam betuk baris dan kolom.

• Elemen-Elemen Tabel:

Elemen Penjelasan

<table>…</table> Mendefinisikan sebuah tabel

<caption>…</caption> Medefinisikan Judul Tabel

<tr>…</tr> Mendefinisikan sebuah Baris

Elemen lanjutan

Elemen Penjelasan

<td>…</td> Medefinisikan sebuah Kolom

<th>…</th> Mendefinisikan Header Tabel

Atribut Tag <TABLE ….>

**Atribut Tag Table**
Atribut	Penjelasan
Align	Perataan Tabel: [Left,Center,Right]
Border	Memberi Bingkai Tabel
Bgcolor	Latar Belakang Warna
Background	Latar belakang image
Bordercolor	Memberi warna pada bingkai
Cellpading	Jarak antara Sel dan isi Sel
Cellpading	Spasi antara Sel
Width	Lebar Tabel
Height	Tinggi Tabel

Atribut Tabel tag <TR>

**Atribut Tabel Tag TR**
Atribut	Penjelasan
Width='n'	Lebar Baris
Height='n'	Tinggi Baris
Bgcolor="warna"	Warna latar belakang sel pada tag
Background="image"	Menggunakan gambar sebagai latar belakang
Bordercolor="warna"	Menggunakan gambar sebagai latar belakang

Atribut Tabel tag <TD>

**Atribut Tabel Tag TD**
Atribut	Penjelasan
Width='n'	Lebar Kolom/Sel
Height='n'	Tinggi Kolom/Sel
Colspan='n'	Menggabung 'n' Sel Kolom
Rowspan='n'	Menggabung 'n' Sel Baris
Bgcolor="warna"	Warna latar belakang sel pada tag
Background="image"	Menggunakan gambar sebagai latar belakang
Bordercolor="warna"	Menggunakan gambar sebagai latar belakang

Mengatur Border

• Border adalah garis yang mengelilingi sebuah tabel.

• Contoh:

<html>

<head><title>Untitled</title></head>

<body>

<P>Menggunakan tag <font face=courier new><b><

TABLE BORDER="10"></b></font><P>

<TR>

<TD>Baris #1 Kolom #1</TD>

<TD>Baris #1 Kolom #2</TD>

</TR>

<TR>

<TD>Baris #2 Kolom #1</TD>

<TD>Baris #2 Kolom #2</TD>

</TR>

</TABLE></body></html>

Hasil:

Menggabung Sel:

• Menggabung kolom

<TR>

</TR>

<TR>

</TR>

</TABLE></BODY>

Hasil:

• Menggabung Baris

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

Hasil:

Setelah mempelajari materi Tabel kita lanjutkan ke materi selanjutnya. (FORM)

FORM

• Form digunakan untuk mendapatkan masukkan dari pengguna.

Sintak:

</FORM>

• ACTION = Tempat menspesifikasikan URL yang akan digunakan sbg pemroses field input form.

• URL = Lokasi dokumen yang akan melakukan proses terhadap input dari form.

• METHOD digunakan untuk menyatakan bagaimana data yang berasal dari FORM dikirim kepada program CGI

Jenis-Jenis Tag dari FORM

• Text

• Radio

• Check box

• List

• Buttom

• Text Area

Tag Text

• Bentuk:

<INPUT TYPE=“TEXT” NAME=“variabel” SIZE=n

MAXLENGTH=n>

Contoh:

Nama : <INPUT TYPE=“TEXT” NAME="NAMA" SIZE="23">

E-mail : <INPUT TYPE=“TEXT” NAME="EMAIL" SIZE="30">

Hasil:

Tag Radio

• Bentuk:

<INPUT TYPE=“radio” NAME=“variabel”

VALUE=“nilai" checked>

Keterangan:

-NAME = untuk menentukan variabel yang dipakai menerima data

-VALUE = untuk memberi nilai pada variabel yang disebutkan pada NAME

-CHECKED = pilihan diberikan secara langsung

Contoh:

Penilaian Anda Tentang <I>HomePage</I> ini :

<INPUT TYPE="radio" NAME="PENILAIAN" VALUE="Baik" checked>Baik -

<INPUT TYPE="radio" NAME="PENILAIAN" VALUE="Cukup">Cukup -

<INPUT TYPE="radio" NAME="PENILAIAN" VALUE="Kurang">Kurang

Hasil:

Tag Checkbox

• Bentuk:

Keterangan:

-NAME = untuk menentukan variabel yang dipakai menerima data

-VALUE = untuk memberi nilai pada variabel yang disebutkan pada NAME

-CHECKED = pilihan diberikan secara langsung

Contoh:

Yang Menarik Perhatian Anda dalam Situs Ini :<BR>

<INPUT TYPE="checkbox" NAME="INTEREST"

VALUE="EmailGratis" checked> E-mail Gratis

<INPUT TYPE="checkbox" NAME="INTEREST"

VALUE="WebSpaceGratis"> Web Space gratis

<INPUT TYPE="checkbox" NAME="INTEREST"

VALUE="ImageEditorGratis"> Image Editor Gratis

Hasil:

Tag Select

• Bentuk:

…

</SELECT>

Keterangan:

-NAME = untuk menentukan variabel yang dipakai menerima data

-OPTION = Menentukan teks yang akan ditampilkan pada daftar (list)

-SELECTED = Nilai default

Contoh:

DARI MANA ANDA BERASAL :

<OPTION Value=“makassar” SELECTED>Makassar

<OPTION Value=“semarang” >Semarang

<OPTION Value=“yogyakarta” >Yogyakarta

<OPTION Value=“surabaya” >Surabaya

<OPTION Value=“medan” >MEDAN

<OPTION Value=“kalimantan” >Kalimantan

<OPTION Value=“manado” >Manado

</SELECT>

Hasil:

Tag Textarea

• Bentuk:

Keterangan:

-NAME = untuk menentukan variabel yang dipakai menerima data

-ROWS = Menentukan maksimum jumlah baris

-COLS = menentukan maksimum jumlah kolom

Contoh:

KOMENTAR ANDA TENTANG HOME PAGE INI :<BR>

Hasil:

Tag Button/Tombol

• Bentuk:

Keterangan:

-TYPE = untuk menentukan TYPE tombol

-VALUE= Menentukan Teks dari tombol

Contoh:

Hasil:

Contoh Lengkap:

<HTML>

<HEAD>

<TITLE>SURVEI PENGUNJUNG</TITLE>

</HEAD>

<CENTER><H2><U>DATA PENGUNJUNG</U></H1>

Nama : <INPUT NAME="NAMA" SIZE="23">

E-mail : <INPUT NAME="EMAIL" SIZE="30">

Penilaian Anda Tentang <I>HomePage</I> ini :

<INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Baik" checked>Baik -

<INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Cukup">Cukup -

<INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Kurang">Kurang

Yang Menarik Perhatian Anda dalam Situs Ini :<BR>

<INPUT NAME="INTEREST" TYPE="checkbox"

VALUE="EmailGratis" checked> E-mail Gratis

<INPUT NAME="INTEREST" TYPE="checkbox"

VALUE="WebSpaceGratis"> Web Space gratis

<INPUT NAME="INTEREST" TYPE="checkbox"

VALUE="ImageEditorGratis"> Image Editor Gratis<P>

DARI MANA ANDA BERASAL :

<OPTION SELECTED>Makassar

<OPTION>Semarang

<OPTION>Yogyakarta

<OPTION>Surabaya

<OPTION>MEDAN

<OPTION>Kalimantan

<OPTION>Sulawesi

</SELECT><P>KOMENTAR ANDA TENTANG HOME PAGE INI :<BR>

</FORM>

</body>

</html>

Hasil:

SELESAI!!! ( ^o^) /

WARBYAZAAAH!! :'V CAPEKNYA :'3

Saya rasa sudah cukup untuk Materi Pembelajaran HTML Dasar ini, dan tentu saja saya sadar akan banyaknya kekurangan di artikel ini, namun saya rasa ini sudah bisa membuat teman-teman mengerti akan HTML Dasar kan. Semoga Bermanfaat bagi kita semua. dan Selamat Berkreasi dengan HTML. :'D

O iya jika ada yang kurang mengerti atau mau ditanyakan silahkan berkomentar di kolom komentar yak!

Kurang dan Lebihnya mohon dimaafkan

Sekian dan Terimakasih!

Wassalam! ( ^o^) /

Belajar HTML Dasar TUNTAS! | Singkat Mudah dan LENGKAP

0 Komentar untuk "Belajar HTML Dasar TUNTAS! | Singkat Mudah dan LENGKAP"

Popular Post

Like Suzunime!

Category

Archive

Visit My Partners ^_^