Lesson 1 Introduction

        I.    Pengertian Web Programming

Web Programming adalah suatu kegiatan yang dilakukan seseorang untuk membuat suatu website yang dapat dilihat orang banyak. Orang-orang biasanya mengenal web dengan istilah www (World Wide Web). Www berjalan dengan protokol HTTP (Hyper Text Transfer Protocol).

     II.    HTML (Hyper Text Markup Language)

Sebuah website disusun dengan syntax HTML (Hyper Text Markup Language), tapi
terkadang juga digabungkan dengan CSS (Cascading Style Sheets), Javascript, dan sebagainya. HTML pertama kali muncul pada tahun 1991 dan lalu terus berkembang hingga saat ini dengan versi HTML5. HTML5 memiliki banyak kelebihan diantara versi terdahulunya, yang paling terlihat mampu memasukan video kedalam website tanpa harus menggunakan Flash Plug-ins. HTML terdiri dari HTML Tags dan HTML elements.

 III.    HTML Tags

HTML Markup atau biasa disebut HTML Tags adalah seperti suatu perintah yang dipergunakan untuk mengatur/men-design suatu website. HTML tags memiliki ciri-ciri yaitu:

     i.        Berada didalam kurung sudut “<” dan “>”

    ii.        Biasanya muncul berpasangan antara pembuka tag dan penutup tag, contoh: <center> </center>

   iii.        Penutup tag selalu diberikan slash (/) sebelum tag ditulis, contoh: </p>

Jenis- jenis HTML Tags

a.    Heading

Syntax: <h”1-6”> … </h”1-6”>

ð Digunakan untuk menentukan prioritas suatu judul bab, sub bab, dll. Semakin besar angka, semakin kecil prioritas.

Syntax dan Output:

<h1> Web Programming </h1>  Web Programming

<h2> Web Programming </h2> Web Programming

<h3> Web Programming </h3> Web Programming

<h4> Web Programming </h4> Web Programming

<h5> Web Programming </h5> Web Programming

<h6> Web Programming </h6> Web Programming

b.    Image

Syntax: <img /> atau <img src=”path/to/file/name”/>

  ð  Digunakan untuk memasukkan gambar ke dalam halaman website.

Example:

<img src=”web/photo_1.jpg”/>

Apabila file image terdapat di folder diatas folder html maka di gunakan syntax:

<img src=”…/photo_1.jpg”/>

(Setiap tanda “…/” berarti menaikan 1 folder dari folder html.)

c.    List

ü  Unordered List (UL)

Syntax:

<ul type=”..”>

          <li> … </li>

          <li> … </li>

          <li> … </li>

</ul>

ð Berfungsi membuat list dengan menggunakan sebuah symbol dan biasanya daftar data tersebut dapat ditulis dengan acak.

Contoh:

<b>Daftar Belanja:</b>

<ul type=”circle”>

          <li> Gula</li>

          <li> Garam </li>

          <li> Micin </li>

</ul>

Output:

Daftar Belanja:

   o   Gula

   o   Garam

   o   Micin

ü  Ordered List

Syntax:

<ol type=”..”>

          <li> … </li>

          <li> … </li>

          <li> … </li>

</ol>

ð Berfungsi untuk membuat list yang berurutan.

Contoh:

<b>Nama:</b>

<ol type=”A”>

          <li> Andrew</li>

          <li> Davin </li>

          <li> Tom </li>

</ol>

Output:

Nama:

      A.   Andrew

      B.    Davin

      C.    Tom

d.    Font

ü  Italic

Syntax:

<i> … </i>

  ð  Membuat tulisan menjadi Miring.

Contoh:

<i> Web Programming </i>

Output:

Web Programming

ü  Bold

Syntax:

<b> … </b> atau <strong> … </strong>

  ð  Membuat tulisan menjadi tebal.

Contoh:

<b>Web Programming</b> atau <strong> Web Programming </strong>

Output:

Web Programming

ü  Horizontal Line

Syntax:

<hr/>

  ð  Membuat Horizontal Line.

Contoh:

<h1> Web Programming </h1>

<hr/>

Output:

Web Programming

---

ü  Rata Tengah

Syntax:

<center> … </center>

  ð  Membuat tulisan menjadi rata tengah.

Contoh:

<center> Web Programming </center>

Output:

Web Programming

ü  Paragraph

Syntax:

<p> … </p>

  ð  Membuat suatu paragraph baru.

Contoh:

<p> Saya senang belajar Web Programming </p

Output:

Saya senang belajar Web Programming

ü  Break/Enter

Syntax:

<br/>

  ð  Membuat text pindah ke garis baru.

Contoh:

Web Programming <br/>Is<br> Easier Than What You Think

Output:

Web Programming

Is

Easier Than What You Think

ü  Space

Syntax:

&nbsp;

  ð  Berfungsi untuk membuat “spasi”. Syntax ini digunakan apabila owner dari website ingin memberikan banyak spasi di kalimatnya, karena disaat membuat suatu kalimat di website kita tidak bisa membuat lebih dari 1 spasi.

Contoh:

<p> Web           Programming </p>

Output: Web Programming

<p> Web&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Programming</p>

Output: Web      Programming

e.    Link

Syntax:

<a> … </a>

  ð  Berfungsi untuk membuat suatu kata yang apabila di klik dapat menuju website lain.

Contoh:

Text menjadi Link

<a href=”davinbongyoga.blogspot.com”> Home Page </a>

Output:

Home Page

(Apabila tulisan “Home Page” di klik maka website akan langsung menuju ke halaman davinbongyoga.blogspot.com)

Gambar menjadi Link

<a href=”davinbongyoga.blogspot.com”><img src=”path/to/file_name”/></a>

Output:

(gambar yang apabila diklik akan langsung dialihkan ke website davinbongyoga.blogspot.com)