Rabu, 27 Agustus 2014

Pengenalan HTML

Apa itu HTML?
Hypertext Markup Language (HTML) adalah salah satu format yang banyak dipakai dalam pembuatan dokumen halaman web. sederhananya merupakan kode-kode tertentu yang disebut sintaks yang dituliskan kedalam suatu file yang meberikan aturan main pada browser bagaimana dan seperti apa halaman dokumen tersebut ditampilkan. file HTML bereksistensi *.html bisa juga *.htm


Bagaimana Membuat file HTML?
Untuk membuat file HTML bisa dengan editor teks biasa seperti Notepad dll. namun pada saat sekarang telah banyak editor HTML yang memiliki tampilan bersifat WYSIWYG (What You See Is What You Get) Arti : Apa Yang Anda Lihat Adalah Apa Yang Anda Dapatkan, seperti Macromedia Dreamweaver, Adobe GoLive, MS FrontPage, Web Maker, dll
yang bisa menampilakan file tersebut dalam bentuk sintaks HTML biasa maupun seperti apa yang akan ditampilkan browser.
Jika anda pemula sangat saya anjurkan untuk membuat secara manual menggunakan notepad dll dengan langsung mengetikkan kode demi kode HTML ke dalam file yang anda buat. Kenapa? jika menggunakan software tertentu anda tidak akan terbiasa dengan tag HTML.anda akan dimanjakan oleh tools yang digunakan dalam software tersebut untuk membuat tampilan halaman HTML, ini akan menyulitkan jika anda ingin mengedit kembali file tersebut secara manual.Hasil sintaks HTML bisa dilihat di Web Broser seperti Mozila Firefox, Internet Explorer, Goole Crome, dll.

Struktur Dasar Html
Kode HTML harus berada dalam sebuah tag kontainer. Yaitu diawali dengan "<nama_tag>" dan diakhiri dengan
"</namatag>". Struktur dasar HTML berisi elemen-elemen atau tag sebagai berikut:
<html>
<head>
<title>Judul Halaman/Caption</title>
</head>
<body>
Isi web/konten
</body>
</html>
Keterangan:
  • <html>..</html>
    Mendefinisikan bahwa teks yang berada antara kedua tag tersebut adalah file HTML.
  • <head> .. </head>
    Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META dll
  • <title> .. </title>
    Sebagai titel atau judul halaman. Kalimat yang ada dalam tag ini akan muncul pada title bar browser Anda.
  • <body> .. </body>
    Didalam tag inilah yang menjadi inti halaman web yaitu bagian yang akan ditampilkan sebagai isi halaman pada browser. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin,topmargin dll

Sekarang kita langsung saja membuat file HTML, ikuti langkah-langkah berikut :
  • Buat sebuah folder tempat menyimpan file HTML yang akan kita buat.
  • Buka notepad atau editor teks lainnya
  • Ketik kode dasar html di atas, lihat contoh :
<html>
<head>
<title>HTML pertamaku</title>
</head>
<body>
Ayo belajar HTML
</body>
</html>
  • Simpan halaman tersebut kedalam folder yang kita buat sebelumnya dan beri nama misalnya index.htm 
Dalam pemograman web anda harus membuat sebuah file dengan nama index.html yang berfungsi sebagai file pertama yang akan dibuka
  •  Buka file yang telah disimpan tersebut dengan browser anda. caranya dengan index.html > klik kanan > Open With > pilih salah satu browser anda misalnya Internet Explore/Mozilla Firefox.
Diposting oleh di 1 komentar:

Rabu, 27 November 2013

HTML DAFTAR URUTAN

:: HTML DAFTAR URUTAN ::
 
OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.

MATERI:
Element OL(ordered list), Element UL(unordered list), Element LI(list item).
  • ELEMENT OL (Orderd List)
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.

Sintaks:
<ol start="number" type="A"|"a"|"I"|"i"|"1">
........................
</ol>

  • ELEMENT UL (Unordered List)
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.

Sintaks:
<ul  type="circle"|"square"|"disc">
      ..........................
</ul>
  • ELEMENT LI (List Item)
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value berisikan nilai nomor urutan dari attribute type.

Sintaks:
<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">
      ..........................
</li>

LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.


Latihan 1:
Menampilkan teks dengan daftar urut (element OL):

                           Matakuliah MI Semester 1:
                           1. Bahasa Inggris  1
                           2. Matematika 1
                           3. Jaringan Komputer 1
                           4. Konsep Teknologi Informasi
                           5. Keterampilan Komputer dan Pengelolaan Informasi
                           6. Perangkat Keras Komputer
                           7. Sistem Operasi
                         
Nama file: latihan3_1.html
<html>
<head>
<title>Latihan3-1</title>
</head>
<body>
Matakuliah MI Semester 1:
<ol>
     <li>Bahasa Inggris 1</li>
     <li>Matematika 1</li>
     <li>Jaringan Komputer 1</li>
     <li>Konsep Teknologi Informasi</li>
     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>
     <li>Perangkat Keras Komputer</li>
     <li>Sistem Operasi</li>
</ol>
</body>
</html>


Latihan 2:
Menampilkan teks dengan daftar urut (element OL):

                           Matakuliah MI Semester 1:
                           a. Bahasa Inggris  1
                           b. Matematika 1
                           c. Jaringan Komputer 1
                           d. Konsep Teknologi Informasi
                           e. Keterampilan Komputer dan Pengelolaan Informasi
                           f. Perangkat Keras Komputer
                           g. Sistem Operasi
                          
Nama file: latihan3_2.html
<html>
<head>
<title>Latihan3-2</title>
</head>
<body>
Matakuliah MI Semester 1:
<ol start="1" type="a">
     <li>Bahasa Inggris 1</li>
     <li>Matematika 1</li>
     <li>Jaringan Komputer 1</li>
     <li>Konsep Teknologi Informasi</li>
     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>
     <li>Perangkat Keras Komputer</li>
     <li>Sistem Operasi</li>
</ol>
</body>
</html>


Latihan 3:
Menampilkan teks dengan daftar urut (element OL):

                       I. Matakuliah MI Semester 1:
                           a. Bahasa Inggris  1
                           b. Matematika 1
                           c. Jaringan Komputer 1
                           d. Konsep Teknologi Informasi
                           e. Keterampilan Komputer dan Pengelolaan Informasi
                           f. Perangkat Keras Komputer
                           g. Sistem Operasi
                          
Nama file: latihan3_3.html
<html>
<head>
<title>Latihan3-3</title>
</head>
<body>
<ol start="1" type="I">
<li>Matakuliah MI Semester 1:</li>
     <ol start="1" type="a">
        <li>Bahasa Inggris 1</li>
        <li>Matematika 1</li>
        <li>Jaringan Komputer 1</li>
        <li>Konsep Teknologi Informasi</li>
        <li>Keterampilan Komputer dan Pengelolaan Informasi</li>
        <li>Perangkat Keras Komputer</li>
        <li>Sistem Operasi</li>
     </ol>
</ol>
</body>
</html> 

Sumber : http://hans.polinpdg.ac.id/


Tugas TIK. (Uploadkan ke blog masing-masing paling lambat sesuai jadwal pelajaran TIK)
1. Buatlah contoh daftar urutan dengan menggunakan bentuk bullet
2. Tampilkan daftar urutan seperti dibawah ini.
  • Matakuliah MI Semester 1 :
          1. Bahasa Inggris  1
          2. Matematika 1
          3. Jaringan Komputer 1
          4. Konsep Teknologi Informasi

  • Matakuliah MI Semester 2 :
          1. Keterampilan Komputer dan Pengelolaan Informasi
          2. Perangkat Keras Komputer
          3. Sistem Operasi
Diposting oleh di 3 komentar:

Rabu, 24 Oktober 2012

form

HTML <form> Tag

 Attribute  :

Attribute Value Description
actionURLUnuk menentukan pengiriman form-data
methodget
post		Menentukan metode untuk digunakan saat mengirim form-data
nametextNama form
target_blank
_self
_parent
_top		Untuk menampilkan respon yang diterima setelah menyerahkan formulir
contoh :
<form name="contoh_form" action="imanbae@gmail.com" method="get/post">  

Element Input

 </form>
Difinisi dan penggunaan
elemen form dapat berisi satu atau lebih, elemen form tersebut antara lain :
  • <input>

    • Text Fields

      <input type="text"> defines a one-line input field that a user can enter text into:
      <form>
      First name: <input type="text" name="firstname"><br>
      Last name: <input type="text" name="lastname">
      </form>
      How the HTML code above looks in a browser:
      First name:
      Last name:

      Password Field

      <input type="password"> defines a password field:
      <form>
      Password: <input type="password" name="pwd">
      </form>
      How the HTML code above looks in a browser:
      Password:  

      Radio Buttons

      <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
      <form>
      <input type="radio" name="sex" value="male">Male<br>
      <input type="radio" name="sex" value="female">Female
      </form>
      How the HTML code above looks in a browser:
      Male
      Female

      Checkboxes

      <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
      <form>
      <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
      <input type="checkbox" name="vehicle" value="Car">I have a car
      </form>
      How the HTML code above looks in a browser:
      I have a bike
      I have a car

      Submit Button

      <input type="submit"> defines a submit button.
      A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
      <form name="input" action="html_form_action.asp" method="get">
      Username: <input type="text" name="user">
      <input type="submit" value="Submit">
      </form>
      How the HTML code above looks in a browser:
      Username:
  • <textarea>
    •  <textarea rows="4" cols="50">Isi textarea</textarea>
                      
  • <button>
    •  <form name="input" action="html_form_action.asp" method="get">
      Username: <input type="text" name="user">
      >input type="submit" value="Submit" >||>input type="reset" value="Batal" >
      </form>
      How the HTML code above looks in a browser:
      Username: ||
  • <select>
    •  Create a drop-down list with four options:
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
      Contoh :





  • <option>

    •  Create a drop-down list with four options:
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>





  • <optgroup>

    •  <select>
        <optgroup label="Swedish Cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </optgroup>
      </select>
      Contoh :





  • <fieldset>

    •  





  • <label>  

    •  
    Sumber : http://www.w3schools.com/

    Diposting oleh di 1 komentar:

    Rabu, 03 Oktober 2012

    Materi Pembuatan Tabel HTML

    TABLE HTML
    • Tag <table> adl awal pembuatan tabel
      • atribut :
      -. Border adl bingkai tabel
      -. Width adl ukuran tabel (dengan menggunakan %)
      contoh : <table border="1" width="100%"> isi tabel </table>
    • Tag <tr> adl untuk membuat baris pada tabel
      • contoh : <tr> isi baris </tr>
    • Tag <td> adl untuk membuat kolom pada tabel
              atribut :
              -. Align adl Posisi hurup secara horizontal
              -. Valign adl Posisi hurup secara vertikal
              -. Width adl ukuran kolom (dengan menggunakan %)
              -. Colspan adl Penggabungan kolom
              -. Rowspan adl Penggabungan baris
              contoh : <td width="50%" align="center" valign="top" colspan="2"> isi kolom </td>
    Contoh pembuatan tabel
    <HTML>
    <HEAD>
     <TITLE>MEMBUAT TABEL</TITLE>
    <HEAD>
    <BODY>
    <TABLE BORDER="1" WIDTH="50%">
      <TR>
        <TD>1</TD>
        <TD>2</TD>
        <TD>3</TD>
        <TD>4</TD>
      </TR>
      <TR>
        <TD>5</TD>
        <TD>6</TD>
        <TD>7</TD>
        <TD>8</TD>
      </TR>
      <TR>
        <TD>9</TD>
        <TD>10</TD>
        <TD>11</TD>
        <TD>12</TD>
      </TR>
      <TR>
        <TD>13</TD>
        <TD>14</TD>
        <TD>15</TD>
        <TD>16</TD>
      </TR>
    </TABLE>
    </BODY>
    </HTML>

    <HTML>
    <HEAD>
     <TITLE>MEMBUAT TABEL</TITLE>
    <HEAD>
    <BODY>
    <TABLE BORDER="1" WIDTH="50%" BACKGROUND="TULIPS.JPG" >
      <TR BGCOLOR="RED">
        <TD>1</TD>
        <TD COLSPAN="2">2 & 3</TD>
        <TD>4</TD>
      </TR>
      <TR>
        <TD ROWSPAN="2">5 & 9</TD>
        <TD>6</TD>
        <TD>7</TD>
        <TD>8</TD>
      </TR>
      <TR>
        <TD>10</TD>
        <TD COLSPAN="4" ROWSPAN="4">11,12,15&16</TD>
      </TR>
      <TR>
        <TD>13</TD>
        <TD>14</TD>
      </TR>
    </TABLE>
    </BODY>
    </HTML>
    Diposting oleh di Tidak ada komentar:

    Senin, 10 September 2012

    Latihan Pemograman HTML ke-1

    <html>
    <head>
       <title>Contoh Web Latihan ke-1</title>
    </head>
    <body>
    <center>
    <table width="100%" border="0">
     <tr>
      <td width="20%" align="center" valign="center"><IMG SRC="LOGO.GIF" WIDTH="90" HEIGHT="130"></TD>
      <td width="60%" align="center" valign="center"><font color="blue" size="5"> DINAS PENDIDIKAN NASIONAL<BR></font>
      <font color="#DDDD" size="6">UPTD SMA NEGERI 1 KUNINGAN<BR></font>
      Jl. Siliwangi 55 Kuningan<br>
      </TD>
      <td width="20%" align="center" valign="center"><IMG SRC="1.GIF" WIDTH="130" HEIGHT="130"></TD>
     </tr>
    </table>
    <HR>
    <table width="100%" border="1">
     <tr>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">MENU</TD>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">HOME</TD>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">PROFIL</TD>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">AKADEMIK</TD>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">EKSKUL</TD>
     </TR>
     <tr>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">HOME</TD>
      <td width="20%" align="center" valign="center" COLSPAN="16" ROWSPAN="4" bgcolor="#DDDD">SMAN 1 KUNINGAN<br><IMG SRC="LOGO.GIF" WIDTH="90" HEIGHT="130"></TD>
     </TR>
     <tr>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">PROFIL</TD>
     </TR>
     <tr>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">AKADEMIK</TD>
     </TR>
     <tr>
      <td width="20%" align="center" valign="center" bgcolor="#DDDDD">EKSKUL</TD>
     </TR>
    </TABLE>
    </body>
    </HTML>
    Diposting oleh di 36 komentar:
    Langganan: Postingan (Atom)