1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Semua Tentang HTML

Discussion in 'Developer Corner' started by Yusril Ibnu, May 18, 2014.

  1. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    [​IMG]

    [​IMG]

    Apa itu HTML ?

    Sejarah HTML ?

    Apa Kegunaan HTML ?

    Apa Kelebihan dari HTML ?

    1. Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.

    2. Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web yang bersangkutan.
    3. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).

    4.Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
    Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.

    Apa Kekurangan dari HTML ?

    1. Menghasilkan halaman yang statis, yang saya tahu untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash atau Shockwave.

    2. Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
    Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.

    [hr]

    Pemahaman HTML
    secara konsep html menggunakan sistem buka tutup, ambil contoh <b>Tulisan Tebal</b> .
    coba kita lihat..., dibuka dengan tag <b> lalu di tutup dengan tag </b>, namun ada juga yang seperti ini, baris 1 <br /> baris 2 . tag br di tutup dengan ..../> , jelasnya :
    Code:
    <nama tag></nama tag>
    atau
    Code:
    <nama tag />
    Alat yang dibutuhkan untuk membuat HTML

    1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, Notepad, Notepad++.
    2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.

    Kerangka HTML
    Dasar utamanya HTML memiliki Rangka :

    Code:
    <!DOCTYPE html>
    <html>
     <head>
     <title>Judul HTML</title>
     </head>
     <body>
     <p>Ini Sebuah Paragraf</p>
     </body>
    </html>
    Kita lihat kerangka diawali dengan tipe html, berlanjut dengan tag html kemudian kepala, dan badan.
    Coba anda ketik dengan notepad dan simpan dengan format .htm, lalu buka dengan web browser favorit anda.
    lebih jelasnya :


    Tempat Belajar HTML


    1. W3 SCHOOLS (w3schools.com)
    [​IMG]
    Siapa yang belum pernah dengar tentang situs ini? Bisa dibilang sebagai situs terbesar dengan informasi, penjelasan, dan tutorial paling detil mengenai berbagai hal yang berkaitan dengan desain dan pengembangan web. Dalam hal HTML dan CSS, tentu saja ini adalah salah satu resource yang bisa diandalkan. Belum lagi berbagai interface interaktif-nya (Try it Yourself Editor) yang bisa kita gunakan untuk latihan dari tingkat paling dasar hingga advanced. Terdapat pula berbagai informasi dan tutorial javascript, HTML 5, bahasa pemrograman yang berkaitan dengan server (PHP, SQL, ASP, dll), ASP.NET, XML, dll.

    2. Code Academy (www.codeacademy.com)
    [​IMG]
    Ini adalah situs yang paling sering saya kunjungi, terutama dalam belajar dan bertukar pikiran soal pengembangan web (khususnya PHP, API, dan Ruby). Yang paling saya sukai adalah fitur interaktifnya dimana anda bisa langsung mempelajari sekaligus mempraktekkan berbagai level pembelajar HTML dan CSS dengan tahap yang jelas, terstruktur, dan dengan tutorial yang mudah diikuti. Jika anda ingin langsung melihat bagaimana pembelajaran basic-nya, langsung tuju navigasi di footer, dan klik HTML/CSS. Anda juga bisa mengawali pembelajaran dengan mengagumi bagaimana kode-kode bekerja dengan mengisi kolom interaktif di halaman depan. Bagi web developer dan pengagum coding, ini surga buat anda!

    3. HTML.net
    [​IMG]
    Jika anda lebih menyukai "penuturan" untuk memahami dan mencerna materi HTML dan CSS, sekaligus ingin memahami esensi halaman website serta berbagai elemen dan tag-nya, maka situs ini bisa menjadi sumber yang tepat. Plus, anda bisa menggunakan Google Translate dengan mudah jika anda kesulitan dalam memahami bahasa Inggris (hehe). Semua konten memiliki struktur dan sistematika yang jelas, dari A sampai Z, jadi cukup membantu proses pemahaman secara bertahap. Terdapat pula berbagai tutorial lain seperti HTML5, PHP, ASP, dan Javascript.

    4. HTML Dog (www.htmldog.com)
    [​IMG]
    Masih sama dengan model website di atas, situs ini juga menyediakan berbagai tutorial HTML dan CSS. Yang agak berbeda adalah konten dibagi berdasarkan jenis elemen/tag (heading, title, list, link, tabel, form, dan lain sebagainya), sehingga anda bisa masuk ke bagian tertentu secara langsung. Terdapat pula tutorial javascript dasar dimana anda juga bisa berkenalan dengan bahasa javascript.

    5. CSS Easy (www.csseasy.com)
    [​IMG]
    Mungkin bagi anda yang pertama kali masuk website ini akan kebingungan dan menganggap remeh. Ya, situs ini hanya berbicara bagaimana CSS digunakan untuk menyusun layout dasar. Tapi jangan salah, dengan memahami bagaimana layout dasar sebuah halaman web, maka anda sudah masuk ke gerbang awal desain template blog/web, dan memahami bagaimana CSS digunakan sebagai penyusun layout. Terdapat dua jenis layout yang variatif untuk dipelajari, yang pertama berupa fixed layout dan yang kedua berupa fluid layout (yang kemudian bisa digunakan untuk menyusun dasar template responsive juga). Cara yang digunakan untuk mempelajari cukup unik, klik salah satu contoh layout, lalu klik kanan dan pilih "open page source" atau "view source" untuk melihat kode-kode CSS di dalamnya. Simpan halaman tersebut untuk bisa diutak-atik sesuai keinginan.
    Bersambung..., dan akan tetap Update
     
  2. BlueSky

    BlueSky Member

    Joined:
    Feb 21, 2014
    Messages:
    708
    Terasa seperti De ja vu.Aku perasaan pernah liat post ini.
     
  3. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    Thread ini dari berbagai sumber dan sebagian ada dari saya sendiri, memakai bahasa saya sendiri.
    itu perasaan mungkin :goodjob:
     
  4. RizkyDN_

    RizkyDN_ Member

    Joined:
    May 5, 2014
    Messages:
    82
    baru mau belajar pake HTML5 :ketawa:
     
  5. marwanto.se

    marwanto.se New Member

    Joined:
    May 7, 2013
    Messages:
    7,653
    Belum pernah buat web HTML sendiri, cuma pernah pake template Blogger / Wordpress. :ketawa:
     
  6. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    selamat belajar. :goodjob:

    udah coding Template blognya ? :cool:
     
  7. marwanto.se

    marwanto.se New Member

    Joined:
    May 7, 2013
    Messages:
    7,653
    Belum pernah, kalo edit template & tambah widget ya pernah. :v
     
  8. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    HTML sama dengan Cinta...
    Kenapa? Dimana ada Pembukanya, pasti ada Penutupnya
    Contoh...
    Code:
    <3
    ...
    <\3
    <3 = [​IMG]
    <\3 = [​IMG]
    :nangis3:
     
  9. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    sering - sering tambah widget aja...,
    trs ikutin tutorial yang copas ini itu, nanti juga ngerti kok :ketawa:
    #pengalaman
     
  10. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    ya betul"" :ketawa:
     
  11. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    Kepengen sih buat HTML pake tag sendiri tapi resikonya ya sangat terlalu wahh untuk diterima.
     
  12. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    bukanya jadi gak valid w3c ya ?
     
  13. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    Nahh itu tau :ketawa:
     
  14. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    Pengalaman :ketawa:
     
  15. Chrisnado

    Chrisnado Administrator Staff Member

    Joined:
    May 7, 2013
    Messages:
    1,859
    wahh manteb om sharenya +Rep meluncur :hero:
     
  16. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    wah terimakasih +repnya :goodjob:
     
  17. Radith Yoga

    Radith Yoga Active Member

    Joined:
    Mar 22, 2014
    Messages:
    3,260
    mantaap, jdi lebih tau ttg HTML dan dimana tempat belajarnya :goodjob:
     
  18. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    oke semoga bermnfaat :goodjob:
     
  19. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    Jgn Lupakan Penutup, ga ada Penutup = Gak Jalan tuh Function :v
    Code:
    <marquee>
    ...
    </marquee>
    Test HTML
    Code:
    <html>	
    <head>
    <title>Membuat Tulisan Berjalan</title>
    </head>
    <body bgcolor="Red">
    <h1><font color="Blue"><marquee>Ini adalah Tulisan Berjalan Pada Website Kamu :v</marquee></h1>
    </body>
    </html>
     
  20. Radith Yoga

    Radith Yoga Active Member

    Joined:
    Mar 22, 2014
    Messages:
    3,260
    btw. ada kata bersambung, apa masih banyak yg perlu dipelajari ??
     

Share This Page