Pengenalan pemrogaman HTML

Bang Fay 12:03

Pengenalan HTML



Sebelum belajar HTML, alangkah lebih baik jika kita memahami konsep dasar HTML terlebih dahulu.



Pengertian HTML

HTML adalah suatu bahasa yang dipergunakan untuk mendeskripsikan halaman web.
  • HTML merupakan singkatan dari Hyper Text Markup Language.
  • HTML bukan merupakan bahasa pemrograman, HTML adalah suatu markup language (bahasa markah).
  • Suatu markup language berupa serangkaian markup tags.
  • HTML menggunakan markup tags untuk mendeskripsikan halaman web.
HTML Tags

HTML markup tags biasa disebut HTML tags.
  • HTML tags berupa keywords atau kata kunci yang diapit oleh tanda kurung seperti <html>.
  • HTML tags biasanya dipakai berpasangan seperti <b> dan </b>.
  • Tag pertama dalam pasangan html tags adalah start tag atau tag awal, sedang tag kedua adalah end tag atau tag akhir.
  • Start tags dan end tags biasa juga disebut opening tags dan closing tags.
HTML Documents = Web Pages
  • HTML documents atau dokumen HTML mendeskripsikan suatu web pages atau halaman web.
  • HTML documents berisi HTML tags dan plain text atau text biasa.
  • HTML documents atau dokumen HTML juga biasa disebut web pages atau halaman web.
HTML Editor

Software atau aplikasi yang dapat digunakan untuk membuat ataupun mengedit program html antaralain sebagai berikut,
  • Dreamweafer
  • Notepad
  • Notepad++
  •  DLL
Tujuan dari sebuah web browser (seperti Internet Explorer, Firefox, Opera, Safari atau Google Chrome) adalah untuk membaca HTML documents kemudian menampilkannya sebagai halaman web. Browser tidak menampilkan HTML tags, tetapi menggunakan tag tersebut untuk menterjemahkan isi dari halaman web.

Pengenalan HTML


Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:
  • Mengontrol tampilan dari web page dan contentnya.
  • Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
  • Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
  • Menambahkan object-object seperti image, audi, video dan juga java applet dalam document HTML.
BASIC TAG HTML
  1. Struktur HTML Document

    • HTML
      Setiap document HTML harus di awali dan di tutup dengan tag HTML
      <HTML> ... </HTML>

    • HEAD
      Bagian header dari document HTML di apit oleh tag
      <HEAD> ... </HEAD>
      di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag META.

    • BODY
      Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.
      <BODY> ... </BODY>

  2. Basic HTML Element

    • Block Level Element Block level element yang sering di gunakan : Heading (H1 sampai H6).
      <H1>..........</H1>
      <H2>..........</H2>
      <H3>..........</H3>
      <H4>..........</H4>
      <H5>..........</H5>
      <H6>..........</H6>

    • Paragraf (P) List Item(LI) List item di gunakan untuk mengelompokkan databaik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada dua macam list yang bisa anda tambahkan ke document HTML:
      • Unordered List (Bullet)
        TAGATTRIBUTEVALUEDescription
        <UL> </UL>TYPESQUAREBullet Kotak
        DISCBullet Titik
        CIRCLE Bullet Lingkaran
      • Ordered List (Numbering)
        TAGATTRIBUTEVALUEDescription
        <OL> </OL>TYPEI iUpper Roman Lower Roman
        A aUpercase Lowercase
        <OL> </OL>STARnBegin Number

    • Definition List
      Definition List terdiri diapit oleh tag
      <DL>..........</DL>
      dan
      <DT>..........</DT>
      tag menentukan definition term serta
      <DD>..........</DD>
      tag menentukan definition itu sendiri.

    • Horizontal Rules(HR)
      Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.
      AttributeDescription
      Position menetukan posisi dariHR, dengan value :
      canter | right | left.
      Width Untuk menentukan panjang HR default 100%
      Size Untuk menentukan tebal dari HR dalam pixel
      NoshadEfek bayangan.

    • Pemformatan Page Break
      Tag
      <BR>
      di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return. (enter)

    • Font
      Dengan tag
      <FONT> ... </FONT>
      anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.
      AttributeDescription
      color Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal (#000000 - #ffffff)
      size Untuk menentukan ukuran dari font 1 - 7
      face Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri.

    • Color
      Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB
      Hexadecimal Color
      #FF0000 Red
      #00FF00Green
      #0000FF Blue
      #000000Black
      #FFFFFFWhite

    • Alignment
      Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.
      ValueDescription
      Left Rata kiri
      Right Rata kanan
      CenterRata tengah
      JustifyRata kanan kiri

    • Format text
      • Physical Formatting
        • TagDescription
        <B> ... </B>Bold text
        <I> ... </I>Italic text
        <U> ... </U>Underline Text
        <BIG> ... </BIG>Untuk ukuran yang lebih besar dari normal
        <SMALL> ... </SMALL>Untuk ukuran yang lebih kecil dari normal
        <STRIKE> ... </STRIKE>Untuk memberi garis di tengah text
        <SUP> ... </SUP>Superscript text
        <SUB> ... </SUB>Subscript text
        <CENTER> ... </CENTER>Center document

      • Logical Formatting
        TagDescription
        <EM> ... </EM>Text miring
        <I> ... </I>
        <STRONG> ... </STRONG>Text tebal
        <B> ... </B>
        <DEL> ... </DEL>Mencoret text
        <STRIKE> ... </STRIKE>
        <INS> ... </INS>Underline text
        <U> ... </U>

      • Preformatted text Tag
        <PRE> ... </PRE>
        di gunakan untuk menampilkan text sesuai dengan format slinya.
    • Hyperlink
      • Link Address
        • Absolute Addressmerupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file.
          Contoh:
          http ://www.yahoo.com/index.html
        • Relatif AddressURL yang tidak menyebutkan protocol dan network locationya (hanya path dan nama filenya).

      • Anchor Anchor tag
        <A> ... </A>
        untuk menentukan hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuandari hyperlink tersebut.
        <A HREF="URL"> HYPERTEXT</A>
        <A HREF="PROTOKOL://HOST.DOMAIN:PORT/PATH/FILENAME"> HYPERTEXT </A>

  3. TABLE
    • Membuat table
      Tag
      <TABLE> ... </TABLE>
      digunaka untuk membuat table dalam document HTML , bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag
      <TD> ... </TD>
      . Berikutnya kalo anda ingin membuat beberapabaris cell dalam table gunakan tag
      <TR> ... </TR>
      .
    • Pemformatan table
      Untuk memformat perataan textdi dalam table anda bisa gunakan attribute(vertical Alignment)
      AttributeValue
      AlignCenter | justify | left | right
      ValignBASELINE | TOP | BOTTOM | MIDDLE
    • Merge cell
      Tag
      <TD>
      memiliki atribut colspanuntuk merge column dan rowspan untuk merge baris.

  4. IMAGE
    • Format Image
      Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan
      1. GIF (Graphical Interchange Format) (.GIF)
      2. JPEG (Joint Photographic Expert Image) (.JPG)
      3. PNG (Portable Network Graphics)

      <IMG SRC=”URL”>
      AttributeValueDescription
      AlignCenter | justify | left | right | Baseline | top | bottom | middle> Top, bottom, middle digunak menentukan posisi image terhadap text
      > Left, right, center untuk menentukan posisi image di document
    • FORM
      • Kegunaan Form
        Berikut ini beberapa contoh kegunaan Form dalam web:
        1. memperoleh data-data user baik nama, alamat dan data lainnya
        2. memperoleh informasi pembelian secara online
        3. memperoleh feedback dari user mengenai website anda.

      • Form Element
        Tag <FORM> digunakan untuk membuat form dalam document HTML.
        Attribute Description
        ACCEPTMendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form. Syntax:
        ACCEPT=”Internet Media Type”
        METHOD Menentukan bagaimana data akan di kirim ke server. GET – data akan di kirim dengan menggunakan query string pada URL.
        POST – data akan di kirim ke server sebagai block data ke script. Syntax:
        METHOD=”POST|GET”
        ACTION Menentukan lokasi dari script yang akan memproses data dari form Syntax:
        ACTION=”URL”


Sebagai contoh silahkan buat file html berikut menggunakan Notepad saja yang sudah ada pada windows kalian masing - masing. setelah itu tuliskan format tags html berikut ini :

1
2
3
4
5
6
7
 
<html>
<head>
<title>Judul Dokumen Ini</title> 
<body>
 Penulisan informasi web
</body>
</html>
 

Setelah itu Save as dengan estesi ".html". setelah itu klik 2 kali pada file tadi, dan secara otomatis akan membuka melalui web browser anda sendir dan lihat hasilnya.

Cara menyimpan ( tulis dulu semua tags nya)

Kemudian simpan seperti penampilan diatas

Hasil dari penulisan tags html yang tadi

sekarang tinggal kalian semua berkreasi sesuai dengan imajinasi kalian masing masing selamat mencoba. :)
Tags
Bang Fay

Posted by Bang Fay

Post a Comment

0 Comments