Html Default

LANGKAH 1

  • MEMBUKA NOTEPAD.

LANGKAH 2

  • 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.

sumber : http://www.ilmuwebsite.com/tutorial-html/dasar-dasar-membuat-sebuah-web-html

============================================================================

< B >

untuk membuat teks tebal

Cnth :     <b> selamat datang </b>

Hasil:     selamat datang

< I >

untuk membuat teks atau tulisan miring

Cnth:      <i> selamat datang </i>

Hasil:     selamat datang

============================================================================

< u >

membuat teks bergaris bawah

Cnth:      <u> selamat datang </u>

Hasil:     selamat datang

============================================================================

< br >

untuk  memasukkan fungsi enter.

jika perintah <br> di beri diawal atau diakhir baris maka kalimat berikut akan di cetak pada baris berikutnya.

Cnth:
<html>
<head> <title> test2 </title>
</head>
<body>
    selamatdatang
<br> kaputama </br>
</body>
</html>
                  Hasil:selamat datang
                        kaputama

============================================================================

< p >        
berfungsi memisahkan paragraph yang satu dengan yang lain.

<p  align  center> :untuk rata tengah
Cnth    : <center> selamat dating </center>
Hasil   : selamat datang

<p  align  right> :untuk rata kanan
Cnth    : <right> selamat dating </right>
Hasil   : selamat datang

<p  align  left> : buntuk rata kiri
Cnth    : <left> selamat datang </left>
Hasil   : selamat datang

< p  align  justify> :untuk rata kiri dan kanan
Cnth    :selamat datang

============================================================================

Table warna yng bisa di gunakan…

Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa #rrggbb. Berikut ini adalah 16 nama warna beserta kodenya dalam format heksa (harap diingat bahwa tulisan 0 adalah angka nol, bukan huruf O).

cara pembuatan syntax nya :

<HTML>

<BODY BGCOLOR=”#FFFF00″ TEXT=”#FF0002″>

Tulisan ini akan tampak dalam browser.

</BODY>

</HTML>

black #000000 blue #0000FF olive #808000
white #FFFFFF fuchsia #FF00FF green #008000
red #FF0000 gray #808080 teal #008080
yellow #FFFF00 silver #C0C0C0 navy #000080
lime #00FF00 maroon #800000 purple #800080
aqua #00FFFF

Untuk mengubah ukuran font, gunakan atribut SIZE:

<HTML><BODY> <FONT SIZE=”1″>Font Size 1</FONT>, <FONT SIZE=”2″>Font Size 2</FONT>, <FONT SIZE=”3″>Font Size 3</FONT>, <FONT SIZE=”4″>Font Size 4</FONT>, <FONT SIZE=”5″>Font Size 5</FONT>, <FONT SIZE=”6″>Font Size 6</FONT>, <FONT SIZE=”7″>Font Size 7</FONT>

</HTML></BODY>

Sedangkan untuk mengubah warna tulisan, menggunakan atribut COLOR:

<HTML><BODY> <FONT COLOR=”blue”>Tulisan warna biru</FONT>, <FONT COLOR=”red”>Tulisan warna merah</FONT>, <FONT COLOR=”yellow”>Tulisan warna kuning</FONT>

</HTML></BODY>

LINK ATAU KAITAN

Sekarang kita akan belajar membuat link yang merupakan ciri khas dari dokumen web. Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda ke bagian lain dari dokumen web. Sebuah link biasanya ditandai dengan teks warna biru bergaris bawah atau pointer mouse yang berubah menjadi telunjuk tangan. Untuk membuat sebuah teks atau gambar menjadi sebuah link, kita lakukan dengan mengapitnya dengan tag pembuka <A HREF> dan tag penutup </A>. Jadi rumusnya kira-kira sebagai berikut:

<A HREF=”lokasi_tujuan”>link</A>.

Contoh link yang menuju ke situs lain: detik.com. Inilah kode sumbernya:

<A HREF=”http://www.detik.com”>hidayatullah online</A>

lebih lengkap copy link di bawah.

sumber :  http://www.freewebs.com/buatsite/index.htm

============================================================================

width

Di gunakan untuk menentukan lebar dalm pembuatan table

<TABLE BORDER=1 WIDTH=100%>
 <TR>
 <TD>kolom 1 dari baris 1</TD>
 <TD>kolom 2 dari baris 1</TD>
 </TR>
 <TR>
 <TD>kolom 1 dari baris 2</TD>
 <TD>kolom 2 dari baris 2</TD>
 </TR>
 </TABLE>

============================================================================

penggunaan Valign dalam table

di gunakan untk mengatur text secara vertikal

<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150 ALIGN=left VALIGN=top>kiri atas</TD>
<TD WIDTH=250 ALIGN=right VALIGN=middle>kanan tengah</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150 ALIGN=right VALIGN=bottom>kanan bawah</TD>
<TD WIDTH=250 ALIGN=center VALIGN=middle>tengah tengah</TD>
</TR>
</TABLE>

sumber :  http://www.freewebs.com/buatsite/index.htm

============================================================================

TYPE

di gunakan untuk menentukan tanda dari simbol-simbol subjudul.

<ul type=”square”>

<li>item pertama</li>

<li>item kedua</li>

<li>item ketiga</li>

hasil nya :

  • item pertama
  • item kedua
  • item ketiga

============================================================================

MENAMPILKAN APA ADANYA

Meskipun browser tidak mengenali spasi lebih dari sekali , tabulasi dan pembuatan baris dengan enter, namun dengan menggunakan tag <PRE> maka browser akan menampilkan teks apa adanya, maksudnya spasi dianggap spasi, tabulasi dianggap tabulasi dan enter dianggap enter. Bahkan font-nya pun muncul sesuai aslinya. Begini contohnya:

<HTML><BODY><PRE><B>Pantun Petuah</B>Berakit-rakit     ke huluBersenang-senang kemudianBersakit-sakit     dahulu

Bersenang-senang kemudian

</PRE>

</BODY></HTML>

Simpanlah file di atas sebagai file HTML kemudian tampilkan dalam browser, hasilnya akan seperti ini:

Pantun Petuah

Berakit-rakit     ke hulu
Bersenang-senang kemudian

     Bersakit-sakit     dahulu
     Bersenang-senang kemudian

Tag <PRE> ini sangat diperlukan bila kita ingin menampilkan dalam halaman web sekumpulan karakter ASCII dalam susunan tertentu seperti contoh berikut ini:

    ___________________
   |,-----.,-----.,---.\
   ||     ||     ||    \\
   |`-----'|-----||-----\`----.
   [       |    -||-   _|    (|
   [  ,--. |_____||___/.--.   |
   =-(( `))-----------(( `))-==
      `--'             `--'

Anda tertarik dengan gambar di atas? Itu dinamakan ASCII Art.

sumber :  http://www.freewebs.com/buatsite/index.htm

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: