Tampilkan postingan dengan label text editor. Tampilkan semua postingan
Tampilkan postingan dengan label text editor. Tampilkan semua postingan

Minggu, 13 September 2015

Tutorial HTML Dasar : 3. Mengenal tag-tag dasar dalam HTML


Hey sabahat Chakra Media Blog, kali ini saya akan memposting sebuah awal dari pembelajaran HTML  kalian nih, langsung saja saya akan memulainya.

Semua bahasa pemrogramman pasti punya gaya penulisan masing-masing, jika teman-teman pernah belajar tentang bahasa pemrogramman lain pasti akan melihat perbedaannya. Dalam HTML juga kita akan mempelajari tentang tag-tag dasar dan struktur penulisan yang benar.

Tag adalah sebuah kode atau tanda yang ditulis untuk membuat web browser mengerti apa yang ingin kita gambarkan di web browser tersebut. Itu menurut saya yah, nah setelah sahabat membaca pengertian tag, mari kita lihat tag-tag paling dasar dan inti dari sebuah HMTL.

Mari kita buka text editor kita, entah itu notepad++,sublime, atau dreamweaver.
Tag pertama yang paling awal yaitu :

<!DOCTYPE html>

kenapa harus memakai tag diatas ?? karena sampai saat ini HTML sudah mencapai versi 5 disebut HTML5. Mungkin sahabat juga bertanya, kenapa ketika pengenalan HMTL sebelumnya contohnya tidak memakai tag diatas ?? karena agar kalian tertarik dulu dan tidak beranggapan kalau HTML itu susah.
sekarang tag selanjutnya :

<html>
       ......
</html>
Tag ini menjadi sebuah bungkus untuk semua tag lain, kecuali yang atas tadi yah. Setiap tag harus ditutup, tanda perbedaan penutup dan pembuka tag yaitu dengan tanda backslash (/).
selanjutnya yaitu :

<head>
     <title>Web Pertamaku</title>
</head>
Tag <head> ini biasa digunakan untuk menyimpan judul web kita. Tapi, selain judul web kita juga bisa menyimpan sebuah file css ataupun javascript. Tag <title> itulah untuk membuat judul web kita.
selanjutnya :

<body>
      <h1>Hello World!, This is my first web.</h1>
</body>
Tag <body> ini biasa dipakai untuk menyimpan semua isi yang ada didalam web sobat. dan tag <h1> ada 6 yaitu dari <h1> sampai <h6>. <h1> ukuran font yang paling besar dan <h6> ukuran font yang paling kecil.

Sekarang mari kita susun bersama di text editor kita :

<!doctype html>
<html>
     <head>
           <title>Web Pertamaku</title>
     </head>
     <body>
           <h1>Hello World!, This is my first web</h1>
     </body>
</html>

Jangan lupa ketika save harus memakai extensi .html,buatlah sebuah folder untuk khusus latihan kita, lalu save dengan nama web_pertamaku.html.


Mari kita lihat apakah berhasil ? buka di web browser kita dengan double klik jika sudah default programnya mozzila/chorme, jika belum tinggal klik kanan open with pilih saja web browser mana yang kita inginkan.. kurang dianjurkan memakai IE(Internet Explorer).


Jika berhasil akan tampil seperti gambar diatas...

cukup sekian untuk pembahasan tentang Mengenal tag-tag dasar HTML, mohon maaf bila ada kesalahan dalam penulisan karena saya juga manusia, yang pasti bila anda menemukan kesalahan tinggal komentar. semoga bermanfaat... jangan lupa kunjungi chakra media lagi sobat...

Sabtu, 12 September 2015

Tutorial HTML Dasar : 2. Mengenal Software Text Editor Yang Bisa Digunakan Untuk Programming



Selamat datang kembali sahabat chakra media blog, senang sekali saya bisa menulis postingan untuk blog ini lagi.Melanjutkan postingan kemarin Tutorial HTML Dasar : 1. Mengenal apa itu HTML dan fungsinya, Sesuai yang di tulis kemarin, saya sekarang akan membahas tentang Mengenal Software Text Editor Yang Bisa Digunakan Untuk Programming khususnya HTML. Oke langsung saja ke pembahasan.

setiap programmer pasti membutuhkan software untuk pembuatan aplikasinya, maka dari itu sebelum saya membahas HTML, saya akan mengenalkan software yang bisa digunakan untuk pembuatan HTML. Sebenarnya software untuk membuat file HTML sering sekali kita temui di PC atau laptop kita, akan tetapi karena kita belum mengetahuinya jadi software itu terabaikan.

Mari kita lihat software apa saja yang bisa kita gunakan untuk programming HTML yang akan kita pelajari nantinya, softwarenya yaitu :

1. Notepad
   
      Software pertama yang bisa kita gunakan yaitu Notepad. hah Notepad ?? mungkin yang belum tau akan bilang seperti itu karena software atau text editor ini adalah software bawaan windows. Tapi, jangan sangka software ini berguna atau bisa digunakan untuk programming. karena bahasa pemrogramman seperti HTML, PHP, dan teman-temannya itu berbasis text(padahal semua programming juga gitu sih hehehe), tapi kalo pemrogramman yang tidak disebutkan tadi, biasanya harus pakai software tersendiri. Menurut pengalaman saya Notepad ini kurang cocok dipakai untuk dipakai untuk programming, karena tampilannya sendiri sangat simpel, tidak ada penandaan warna di setiap tag-tagnya. Tapi, jika sahabat mahir pakai software ini, saya yakin sahabat sudah hebat dalam pemrogramman. Karena, programmer pun biasanya memakai software khusus text editor untuk programming.

2. Notepad++

      Nah, kalau software ini banyak di gunakan untuk percodingan atau programming (bahasa kerennya). Notepad++ ini memiliki fitur yang plus-plus dari notepad windows. Jika sahabat mengunakan ini, sahabat akan merasakan kenyamanan dalam programming. Kalau sahabat liat di notepad semua fontnya hitam, beda cerita ketika membuka aplikasi ini, karena sahabat akan melihat warna-warna untuk setiap tag HTML kita. Jadi, tidak membuat bosan dan ketika error pun tidak terlalu susah untuk menemukan error tersebut(asalkan sobat tau asal error tersebut pastinya =D hehe). Baik jika sahabat ingin tau lebih banyak tentang software ini bisa download dengan klik Notepad++ .

3. Sublime : Text Editor
    
      Kalo berbicara tentang software ini saya semangat, soalnya ini text editor favorit saya nih. Namanya Sublime : Text Editor, oh iya kalo Notepad++ dan Notepad itu backgroundnya putih, tapi sublime ini kebalikannya, yaitu warna item, tapi ga terlalu item gitu, jadi adem banget dimata. Itulah mengapa saya suka sekali dengan software ini. Dan fiturnya ga beda jauh, pastinya setiap tag coding kita mempunai warna tersendiri gan, dan masih banyak fiturnya yang ga bisa disebutkan saya satu per satu. jika sahabat minat download dan elihat fitur lainnya langsng sa ke web resminya Sublime : Text Editor

4. Adobe Dreamweaver


     Salah satu perusahaan software raksasa di dunia ini juga tidak mau kalah, karena, mungkin menjanjikan juga sebuah text editor. Adobe membuat sebuah text editor bernama Adobe Dreamweaver. jika masih pemula akan sangat terbantu karena anda dipermudah apabila anda masih baru mengenal bahasa pemrograman. fitur yang di tawarkan yaitu anda bisa melihat langsung layout atau rancagan HTML yang kita buat. Akan tetapi software ini berbayar(taulah orang indo mah gimana caranya =D). Akan tetapi menurut saya dreamweaver ini kurang diajurkan karena si pemula menjadi kurang berfikir sobat, kalau menurut saya mending notepad++ atau Sublime : text editor, jika agan nekat boleh juga pakai notepad saja hehehe. Jika ingin mendownload agan bisa cari di google saja.

yah mungkin cukup sekian dari saya, oh iya, sebenarnya software atau text editor yang saya cantumkan diatas itu hanya sebagian dan yang pernah saya coba. Sebenarnya masih banyak sobat, bisa cari saja digoogle untuk yag lainnya yah...

Terima Kasih telah mengunjungi blog saya, Semoga bermanfaat....
Jangan lupa berkunjng kembali, soalnya saya akan memulai pembahan dasar HTML...
Diberdayakan oleh Blogger.