Monday, March 7, 2016

Session 2 : HTML - Web Design Fundamental

HTML(HyperText Markup Language) digunakan untuk menyediakan tampilan user interface dalam sebuah web application.

Keyword-keyword penting dalam HTML (tag names) menggunakan angle bracket sebagai tanda pembuka dan penutup. contoh : <html> <table>. Terdapat 2 jenis HTML tags:

HTML tags yang berpasangan, yaitu opening tag (contoh: <b>), dan closing tag (contoh: </b>).
HTML tags yang tidak berpasangan, contoh: <img />.

Keyword yang digunakan di dalam HTML bersifat case insensitive, sehingga antara <b> ataupun <B> akan memberikan hasil yang sama.

Software yang dapat digunakan untuk membuat sebuah HTML documents yaitu Notepad, Textpad, Adobe Dreamweaver, Netbeans, Sublime, dan sebagainya.

Basic HTML tags:

<!-- create comment -->

<html>

      <head>

             <title>………….</title>

      </head>

      <body>

              ………..

     </body>

</html>


contoh HTML dasar:

<html>

     <head>

            <title>My First HTML</title>

     </head>

     <body>

            Hello World

     </body>

</html>


Berikut adalah beberapa jenis HTML tags dasar yang sering digunakan:




untuk membuat table dalam HTML, terdapat beberapa HTML tags yang harus diperhatikan, yaitu:

  • <table> </table> : membuat table baru.
  • <tr> </tr> : membuat baris baru dalam table.
  • <td> </td> : membuat kolom baru dalam suatu baris.
  • <th> </th> : membuat header dalam suatu table.Format HTML tags untuk membuat table:


dalam membuat table, juga terdapat HTML tags yang dapat digunakan untuk menggabungkan kolom (colspan) ataupun baris (rowspan).

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>
</head>
<body>
<h1>Contoh atribut colspan dan rowspan </h1>
<table
border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td
colspan="2" >Baris 2, Kolom 2 & 3</td>
    </tr>
    <tr>
        <td
rowspan="2"> Baris 3 & 4, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>


hasil dari HTML tersebut adalah:






Selain untuk membuat table, terdapat juga contoh HTML tags lain dengan fungsi yang berbeda-beda, salah satunya adalah image tags <img /> yang digunakan memasukan gambar ke dalam sebuah website.


Style Sheet atau Cascading Style Sheet digunakan untuk mengatur tampilan web supaya terlihat lebih rapi dan menarik. Dengan adanya CSS, maka kita dapat menampilkan halaman web yang sama dengan format tampilan yang berbeda-beda.

Terdapat 3 cara untuk membuat CSS dalam sebuah HTML, yaitu inline CSS, Internal CSS, dan juga External CSS.

untuk menggunakan External CSS, kita harus menambahkan sebuah tag yang menghubungkan file HTML dengan file CSS yang sudah dibuat. tag yang harus dimasukkan adalah:

<link rel="stylesheet" type="text/css" href="myFile.css" />

dalam pengaturan CSS, terdapat 2 bagian utama, yaitu selector yang merupakan element HTML yang ingin di desain, dan declaration yang terdiri dari property dan value.

No comments:

Post a Comment