HTML DASAR (bab3f) : List Menu (OrderList)

Diposting oleh Unknown di 03.38 Rabu, 17 Oktober 2012 0 komentar

Tag <OL> digunakan untuk membuat sebuah Ordered List yang berupa nomor. Tag <OL> memiliki atribut TYPE yang dapat digunakan untuk menentukan bentuk bulet yang digunakan dalam list. Ada lima bentuk yang dapat dipilih pada atribut TYPE, yaitu : 1, a, A, i, I. Setiap teks yang akan dimaasukkan dalam list, ditandai dengan Tag <LI> di bagian depan teks tersebut.


MEMBUAT ORDERED :
save di   : My Documents\LatihanWeb\Bab3\
nama file : bab3f.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT LIST ORDERED</TITLE>
</HEAD>
<BODY>
Pilih menu makanan yang anda suka : <BR>
<OL TYPE=1>
<LI>Nasi Pecel</LI>
<LI>Nasi Goreng</LI>
<LI>Kakap Bakar</LI>
</OL>
<BR>

Pilih menu minuman yang anda suka : <BR>
<OL TYPE=A>
<LI>Es Jeruk</LI>
<LI>Jus Jambu Merah</LI>
<LI>Es Lemon Tea</LI>
</OL>
<BR>

Pilih Tempat yang ingin Anda kunjungi : <BR>
<OL TYPE=i>
<LI>New York</LI>
<LI>Hongkong</LI>
<LI>Kutub Utara</LI>
</OL>
</BODY>
</HTML>




HTML DASAR (bab3e) : List Menu UnOrderList

Diposting oleh Unknown di 00.00 0 komentar

Tag <UL> digunakan untuk membuat sebuah Unordered List. Tag <UL> memiliki atribut TYPE yang dapat digunakan untuk menentukan bentuk bulet yang digunakan dalam list. Ada tiga bentuk yang dapat dipilih pada atribut TYPE, yaitu : disc, square,circle. Setiap teks yang akan dimaasukkan dalam list, ditandai dengan Tag <LI> di bagian depan teks tersebut.


MEMBUAT UNORDERED :
save di   : My Documents\LatihanWeb\Bab3\
nama file : bab3e.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT LIST UNORDERED</TITLE>
</HEAD>
<BODY>
Pilih menu makanan yang anda suka : <BR>
<UL TYPE=disc>
<LI>Nasi Pecel</LI>
<LI>Nasi Goreng</LI>
<LI>Kakap Bakar</LI>
</UL>
<BR>

Pilih menu minuman yang anda suka : <BR>
<UL TYPE=square>
<LI>Es Jeruk</LI>
<LI>Jus Jambu Merah</LI>
<LI>Es Lemon Tea</LI>
</UL>
<BR>

Pilih Tempat yang ingin Anda kunjungi : <BR>
<UL TYPE=circle>
<LI>New York</LI>
<LI>Hongkong</LI>
<LI>Kutub Utara</LI>
</UL>
</BODY>
</HTML>



HTML DASAR (bab3d) : Link Anchor

Diposting oleh Unknown di 23.20 Selasa, 16 Oktober 2012 0 komentar

Hyperlink juga dapat digunakan untuk meloncat ke bagian (section) tertentu dalam halaman web yang sama. bagian yang dituju harus di tandai terlebih dahulu menggunakan atribut ID dalam tag <A>.. Dan untuk meloncat ke bagian yang sudah ditandai, tuliskan nama bagian tersebut dalam atribut HREF dengan diawali karakter "#".


MEMBUAT HYPERLINK DALAM BAGIAN HALAMAN YANG SAMA:
save di   : My Documents\LatihanWeb\Bab3\
nama file : bab3d.html

<HTML>
<HEAD>
<TITLE>LATIHAN HYPERLINK KE BAGIAN HALMN YANG SAMA</TITLE>
</HEAD>
<BODY>
Klik bgian yang ingin dituju :
<BR>
<A HREF=#bagian1>Menuju Bagian 1</A>
<BR>
<A HREF=#bagian2>Menuju Bagian 2</A>
<BR>
<A HREF=#bagian3>Menuju Bagian 3</A>
<BR>
<BR>
<HR>

<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>

<A ID=bagian1>Bagian Kesatu</A>
<P>Ini adalah bagian kesatu, bagian ini ditandai dengan ID=bagian1 </P>
<HR>

<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>

<A ID=bagian2>Bagian Kedua</A>
<P>Ini adalah bagian kedua, bagian ini ditandai dengan ID=bagian2 </P>
<HR>


<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>

<A ID=bagian3>Bagian Ketiga</A>
<P>Ini adalah bagian ketiga, bagian ini ditandai dengan ID=bagian3 </P>
<HR>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
<P>&nbsp</P>
</BODY>
</HTML>



HTML DASAR (bab3c) : Membuat Hiperlink ke File Beda Folder

Diposting oleh Unknown di 23.10 12 komentar

Kita akan mencoba membuat link ke latihan bab 1 dan bab 2 yang telah kita simpan dalam latihan yang sudah-sudah. Untuk keluar Folder menggunakan code "../" (titik titik  slash).


MEMBUAT HYPERLINK KE FILE YANG BERBEDA FOLDER :
save di   : My Documents\LatihanWeb\Bab3\
nama file : bab3c.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT HYPERLINK KE FILE YANG BERBEDA FOLDER</TITLE>
</HEAD>
<BODY>
Ini Hyperlink ke Latihan Bab 1 E :
<A HREF="../BAB1/bab1e.html">Buka Latihan Bab 1 E</A>
<BR><BR>
Ini Hyperlink ke Latihan Bab 1 F :
<A HREF="../BAB1/bab1f.html">Buka Latihan Bab 1 F</A>
<BR><BR>
Ini Hyperlink ke Latihan Bab 2 A :
<A HREF="../BAB2/bab2a.html">Buka Latihan Bab 2 A</A>
<BR><BR>
Ini Hyperlink ke Latihan Bab 2 B :
<A HREF="../BAB2/bab2b.html">Buka Latihan Bab 2 B</A>
<BR><BR>
</BODY>
</HTML>


HTML DASAR (bab3b) : Membuat Link ke File Lain

Diposting oleh Unknown di 21.04 0 komentar

Karena sub bab ini kita belajar tentang link ke file lain, maka kita akan buat dua file html.


MEMBUAT HYPERLINK KE FILE LAIN :
save di   : My Documents\LatihanWeb\Bab3\
nama file : bab3a-1.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT HYPERLINK KE FILE LAIN</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>HALAMAN PERTAMA</H1>
<BR><BR><BR>
Klik <A HREF="bab3b-2.html">di sini</A> untuk menuju ke halaman ke dua.
</CENTER>
</BODY>
</HTML>


-------------------------------------------------------------

save di   : My Documents\LatihanWeb\Bab3\
nama file : bab3b-2.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT HYPERLINK KE FILE LAIN</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>SELAMAT DATANG DI FILE KE DUA</H1>
<BR><BR><BR>
Klik <A HREF="bab3b-1.html">di sini</A> untuk KEMBALI  ke halaman ke PERTAMA.
</CENTER>
</BODY>
</HTML>


HTML DASAR (bab3a) : Membuat Hyperlink ke Halaman Web Lain

Diposting oleh Unknown di 00.34 Sabtu, 13 Oktober 2012 0 komentar

MEMBUAT HIPERLINK KE HALAMAN URL WEB LAIN :
maksud dari Hyperlink ini adalah untuk menghubungkan ke halaman lain. halaman ini bisa berupa alamat situs web yang sudah ada maupun berupa nama file berformat web( js / html / htm / php dan sebagainya).
Saat ini kitta membahas tentang hyperlink ke halaman url web lain. Untuk hyperlink ke url lainmenggunakan tag <a>..</a> ,  dalam atribut Href wajib memakai "http://" jika tidak maka akan dibaca sebagai nama file.
atributnya adalah :
-Href = alamat yang di tuju.
-target= tujuan penempatan halaman yang dipanggil. (SELF/TOP/PARENT = akan mengganti halaman semula dengan halaman yang baru saja dipanggil.   BLANK= akan membuka halaman yang dipanggil ke dalam halaman yang baru.


save di   : My Documents\LatihanWeb\Bab3\
nama file : bab3a.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT HYPERLINK KE WEB LAIN</TITLE>
</HEAD>
<BODY>
Ini Hyperlink ke web facebook :
<A HREF="http://www.facebook.com"  target="_self"> Buka web facebook</A>
<BR><BR>

Ini Hyperlink ke web yahoo :
<A HREF="http://www.yahoo.com" target="_blank"> Buka web yahoo</A>
<BR><BR>

Ini Hyperlink ke web google :
<A HREF="http://www.google.com" target="top"> Buka web GOOGLE</A>
<BR><BR>

</BODY>
</HTML>



HTML DASAR (bab2c) : Membuat Karakter Text

Diposting oleh Unknown di 10.14 Jumat, 12 Oktober 2012 0 komentar

beberpa karakter, misal "&", tidak dapat ditampilkan begitu saja kedalam web. karaktertersebut harus ditulis dalam kode tertentu agar dapat ditampilkan dengan baik dalam web.


MEMBUAT KARAKTER :
save di   : My Documents\LatihanWeb\Bab2\
nama file : bab2c.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT KARAKTER</TITLE>
</HEAD>
<BODY>
<FONT SIZE=10>
<CENTER>
&quot;  &amp;  &lt;
<BR>
&gt;  &copy; &reg;
<BR>
&plusmn;  &AElig; &aelig;  &Eacute;  &eacute;
</CENTER>
</FONT>
</BODY>
</HTML>




HTML DASAR (bab2b) : Memformat Teks dengan Tag Font

Diposting oleh Unknown di 23.40 Kamis, 11 Oktober 2012 0 komentar

Untuk memformat/men-setting tulisan dapat juga kita menggunakan tag Font, Tag Font ini dapat men-setting bentuk tulisan, warna tulisan, serta ukuran tulisan.
Tag <FONT> memiliki atribut SIZE, COLOR dan FACE untuk memformat Teks


MEMFORMAT TEKS DENGAN TAG <FONT> :
save di   : My Documents\LatihanWeb\Bab2\
nama file : bab2b.html

<HTML>
<HEAD>
<TITLE>LATIHAN FORMAT TEKS DENGAN TAG FONT</TITLE>
</HEAD>
<BODY>
<FONT COLOR="RED" SIZE=5 FACE="VERDANA">
    TEKS BERWARNA MERAH, SIZE=5, BENTUK HURUF=VERDANA
</FONT>
<BR><BR>
<FONT COLOR="RED" SIZE=5 FACE="sans-serif">
    TEKS BERWARNA MERAH, SIZE=5, BENTUK HURUF=SANS-SERIF
</FONT>
<BR><BR>
<FONT COLOR="GREEN" SIZE=10 FACE="SANS-SERIF">
    TEKS BERWARNA HIJAU, SIZE=10, BENTUK HURUF=SANS-SERIF
</FONT>
<BR><BR>
<FONT COLOR="GREEN" SIZE=10 FACE="pristina">
    TEKS BERWARNA HIJAU, SIZE=10, BENTUK HURUF=PRISTINA
</FONT>
<BR><BR>
<FONT COLOR="BLUE" SIZE=15 FACE="MISTRAL">
    TEKS BERWARNA BIRU, SIZE=15, BENTUK HURUF=MISTRAL
</FONT>
<BR><BR>
<FONT COLOR="BLUE" SIZE=15 FACE="TERMINAL">
    TEKS BERWARNA BIRU, SIZE=15, BENTUK HURUF=TERMINAL
</FONT>
<BR><BR>
</BODY>
</HTML>




HTML DASAR (bab2a) : Memformat Teks

Diposting oleh Unknown di 23.32 0 komentar

<B>...</B> Membuat huruf tebal.
<U>...</U> Membuat teks bergaris bawah.
<i>...</i> Membuat teks miring.
<BIG>...</BIG> Memperbesar teks dari ukuran normal.
<SMALL>...</SMALL>Memperkecil teks dari ukuran normal.
<SUB>...</SUB> Membuat subscrip
<SUP>...</SUP> Membuat superscrip.
<STRIKE>...</STRIKE>Membuat teks tercoret di tengah.



MEMFORMAT TEKS :
save di   : My Documents\LatihanWeb\Bab2\
nama file : bab2a.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMFORMAT TEKS</TITLE>
</HEAD>
<BODY>
TEKS NORMAL
<BR>
<B>TEKS TEBAL</B>
<BR>
<U>TEKS BERGARIS BAWAH</U>
<BR>
<i>TEKS MIRING</i>
<BR>
<BIG>TEKS DENGAN TAG BIG</BIG>
<BR>
<SMALL>TEKS DENGAN TAG SMALL</SMALL>
<BR>
CH<SUB>3</SUB>COOH
<BR>
X<SUP>3</SUP>
<BR>
<STRIKE>TEKS TERCORET DI TENGAH</STRIKE>
</BODY>
</HTML>



HTML DASAR (bab1f) : Membuat Heading

Diposting oleh Unknown di 19.55 0 komentar

UNtuk membuat Heading menggunakan tag <H>. Dan mempunyai 6 jenis heading.
<H1>....</H1> yang paling besar font-nya.
<H6>....</H6> yang paling kecil font-nya.

MENGATUR HEADING :
save di   : My Documents\LatihanWeb\Bab1\
nama file : bab1f.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT HEADING</TITLE>
</HEAD>
<BODY>
<H1>Ini Teks Dengan HEADING 1</H1>
<H2>Ini Teks Dengan HEADING 2</H2>
<H3>Ini Teks Dengan HEADING 3</H3>
<H4>Ini Teks Dengan HEADING 4</H4>
<H5>Ini Teks Dengan HEADING 5</H5>
<H6>Ini Teks Dengan HEADING 6</H6>
</BODY>
</HTML>




HTML DASAR (bab1e) : Membuat Paragraf

Diposting oleh Unknown di 19.11 0 komentar

Tag <P> digunakan untuk memisahkan teks yang berbeda pada paragraf berbeda dan memiliki atribut ALIGN untuk mengatur perataan paragraf.

Tag <pre> digunakan untuk menampilkan apa adanya seperti yang kita ketik pada editor.


MEMBUAT PARAGRAF :
save di   : My Documents\LatihanWeb\Bab1\
nama file : bab1e.html

<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT PARAGRAF</TITLE>
</HEAD>
<BODY>
<P>HTML adalaah kependekan dari Hyper Text Markup Language, merupakan sebuah bahasa Scripting yang berguna untuk menuliskan halaman web. Pada halaman web, HTML dijadikan sebagai bahasa script dasar yang berjalan bersama berbagai bahasa Scripting Pemrograman lainnya</P>
<P ALIGN="CENTER">Semua bahasa scripting yang berjalan dibawah Web dapat didukung oleh HTML, biasanya bahasa-bahasa tersebut melakukan Embeded Script pada tag-tag HTML. Semua bahasa scripting yang berjalan dibawah Web dapat didukung oleh HTML, biasanya bahasa-bahasa tersebut melakukan Embeded Script pada tag-tag HTML.</P>
<P ALIGN="RIGHT">YANG TERPENTING ADALAH TETAP CEMANGAAT UNTUK SELALU MAU BELAJAR,,,,!!!</P>
<PRE> Karena HTML hanyalah merupakan kode scripting dan bukan merupakan program kompiler maka kita dapat menuliskan semu kode-kode program dengan menggunakan editor yang kta sukai.
misalnya : - Macromedia Dreamwever
- Front Paage
- Home Site
- Notepad++
atau juga dapat menggunakan NotePad sebagai editor standart bawaan OS WINDOWS.</PRE>
</BODY>
</HTML>




HTML DASAR bab1d : Membuat Garis HTML

Diposting oleh Unknown di 06.41 0 komentar

Tag <HR> digunakan untuk membuat garis lurus harisontal di dalam web. Tag <HR> memiliki atribut SIZE, WIDTH dan COLOR untuk mengatur tunggi/ketebalan dan panjang/lebar dan warna garis.

Tag <BR> digunakan untuk berganti baris.


MEMBUAT GARIS :
save di   : My Documents\LatihanWeb\Bab1\
nama file : bab1d.html

<HTML>
<HEAD>
<TITLE>AKU BELAJAR MEMBUAT GARIS</TITLE>
</HEAD>
<BODY>
AKU SEDANG BELAJAR MEMBUAT GARIS <BR>
DAN AKU MENIKMATI PEMBELAJARAN SEPERTI INI.<BR><BR>
<BR>
INI ADALAH GARIS LURUS HORISONTAL BIASA <HR>
<BR><BR>
INI ADALAH GARIS LURUS HORISONTAL DENGAN SIZE = 7 <HR SIZE=7>
<BR><BR>
INI ADALAH GARIS LURUS HORISONTAL DENGAN LEBAR 50% DARI LAYAR<HR WIDTH="50%">
<BR><BR>
INI ADALAH GARIS LURUS HORISONTAL DENGAN SIZE= 10
DAN LEBAR 135 PIXEL DENGAN WARNA KUNING <HR SIZE=10 WIDTH=135>
</BODY>
</HTML>





link Video Tutorial

HTML Background Gambar (bab 1 c)

Diposting oleh Unknown di 22.26 Jumat, 05 Oktober 2012 0 komentar
Kita dapat membuat background berupa image atau gambar dengan memberi atribut BACKGROUND dalam tag <body>. Dengan catatan file gambar yang akan kita buat background terdapat di dalam 1 folder master atau jika dalam tutorial ini disarankan file gambar maksimal berada di dalam folder "LatihanWeb" yang berada di My Documents. Dan untuk file-nya sendiri tidak semua ekstensi dapat di baca browser, tapi kita gunakan gambar yang ber-ektensi *.gif karena hampir semua browser dapat membaca file *.gif


MEMBUAT BACKGROUND GAMBAR :
save di   : My Documents\LatihanWeb\Bab1\
nama file : bab1c.html

<html>
<head>
<title>MEMBUAT BACKGROUND GAMBAR</title>
</head>
<body background="Winter.gif" text="WHITE">
 KITA BUAT BACKGROUND BERUPA GAMBAR BROOO,,,,,!!!!<br />
        ihhhhhuuuuiiiiiyyyy,,,,,,,
</body>
</html>




Video Tutorial HTML Bab 1c - Youtube

HTML Bgcolor dan Warna Text (bab 1b)

Diposting oleh Unknown di 22.05 0 komentar

Warna latar belakang dan warna text dapat diatur dengan cara mengubah nilai atribut BGCOLOR &amp; TEXT dalam tag <body>. terdapat 15 jenis warna yang dpt dipilih secara langsung, yaitu : SILVER, GRAY, WHITE, MROON, RED, PURPLE, FUCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, TEAL, AQUA. selain itu juga dapt menggunakan kombinasi 6 karakter dari 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. yang diawali karakter "#". contoh <body bgcolor="#ff0011" text="GREEN">.



MENGATUR WARNA BACKGROUND DAN WARNA TEXT
save di   : My Documents\LatihanWeb\Bab1\
nama file : bab1b.html

<html>
<head>
<title>WARNA BACKGROUN DAN WARNA TEKS</title>
</head>

<body bgcolor="MAROON" text="#ffffff">
 AKU MEMBUAT BACKGROUND MENJADI MERAH MAROON <br />
 DAN WARNA TEKS KU BUAT MENJADI PUTIH,,,,
</body>
<html>
</html>



Video Tutorial HTML Bab 1b -Youtube

HTML Dasar (bab 1 a)

Diposting oleh Unknown di 21.20 0 komentar

HTML merupakan kependekan dari Hyper Text Markup Languge. Ini merupakan standart yang digunakan oleh protokol http (hyper text transfer protocol).
ciri HTML :
1. Tersusun oleh tag-tag sebagai penandan, karena inilah maka disebut sebagai markup language, misalnya : <html>.....</html>
2. Pada umumnya memiliki tag pembuka <html> dan kemudia memiliki tag penutup </html>, namun ada beberapa yang tidak memiliki tag penutup, misalnya <br>, <hr> dan sebagainya.
3. tidak case sensitif (huruf besar dan kecil dianggap sama).
4. file ber-extention atau berupa  *.html atau  *.htm.



MEMBUAT JUDUL BINGKAI DAN ISI :
save di   : My Documents\LatihanWeb\Bab1\
nama file : bab1a.html

<HTML>
<HEAD>
<TITLE>Di sini tempatnya Judul web kita</TITLE>
</HEAD>
<BODY>
DI SINI KITA DAPAT MENULIS ISI WEB KITA,,,,,,
:)
</BODY>
</HTML>



Langganan: Postingan (Atom)