Tutorial Belajar HTML Dasar Untuk Pemula

-

Pengenalan HTML
1. Apa itu HTML?
Semua halaman web yang sering anda buka, seperti facebook.com, twitter.com,
google.com dan lain sebagainya ditampilkan dengan menggunakan HTML. Jadi bisa
dikatakan HTML adalah bahasa dasar untuk menampilkan halaman web pada web
browser. 
Buka Web browser anda lalu bukalah sebuah situs, http://www.google.com misalnya.
     1. Lalu klik kanan di sembarang area, dan pilih “Inspect element” (menu paling
 akhir)

                 
2. Perhatikan kode hasil inspect element, yang terlihat adalah sebagai berikut


        Baris pertama pasti diawali dengan <!DOCTYPE HTML>, ini menandakan bahwa dokumen yang sedang anda buka saat ini adalah HTML. Begitu juga dengan baris
kedua : <HTML>, kode tersebut menandakan bahkan kode-kode yang ditulis di dalamnya adalah kode HTML. Jika anda ingin tahu kepanjangan HTML, HTML adalah kependekan dari Hypertext
Markup Language. Artinya adalah bahasa markup (penanda) berbasis text atau bisa juga disebutsebagai formatting language (bahasa untuk memformat), Jadi sudah jelas bahwa HTML bukanlah bahasa pemrograman, melainkan bahasa markup/formatting.
2. Membuat Website dalam 1 Menit
Sudah siap membuat website? Kita mulai membuat website hanya dalam 1 menit!
1. Bukalah Notepad (All Programs > Accessories > Notepad)
2. Ketikkan teks berikut :
      Website pertama saya
3. Pilih menu File > Save As
4. Beri nama ‚latihan1.html‛ (tanpa tanda kutip)
5. Pada bagian Save as type, pilih All Files (*.*) Lalu klik tombol save.


6. Sekarang klik dua kali file HTML yang telah anda buat, (atau Klik dan Drag ke Web
     Browser anda, disini saya menggunakan Google Chrome)


Demonstrasi di atas hanyalah langkah untuk membuat file HTML, mudah bukan?
3. Pengenalan Tag HTML
Seperti yang saya sebutkan sebelumnya, bahwa HTML adalah bahasa Markup, artinya bahasa HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai
penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau aplikasi Word Processing lainnya.
Ketika membuat sebuah dokumen word, biasanya kita melakukan formatting pada teks.
seperti menebalkan teks, memiringkan, memberi garis bawah, Membuat Penjudulan
(Heading), membuat list (Daftar) dan lain sebagainya. Pada HTML, formatting ini bisa kita
sebut dengan Proses Markup dan akan dilakukan dengan menggunakan tag HTML.
Misalnya, untuk mem-format suatu teks menjadimiring kita tambahkan tag <em>atau<i>.
Edit file sebelumnya, menjadi seperti berikut :  

Website <em>pertama</em> saya

Dan ketika dibuka kembali pada browser, anda dapat melihat kata pertama menjadi miring.

<em> .. </em>

disebut dengan Tag HTML, yang digunakan untuk me-markup(memformat)
dokumen HTML. Perhatikan bahwa setiap tag memiliki pasangan yakni tag penutupnya.
Artinya hanya teks yang berada di dalam tag tersebut yang akan diberi format miring.
Tag penutup ditandai dengan penambahan tanda slash (/) sebelum nama tagnya.
Berikut ini adalah anatomi dari tag HTML :

<namatag atribut=‚nilai Atribut‛>
 Isi atau Konten
</namatag>

Setiap tag HTML bisa menjadi “isi” dari tag HTML lainnya, untuk membuat suatu hierarki
dari dokumen HTML. Dalam setiap tag HTML bisa disisipkan berbagai atribut yang berfungsi untuk
menampung informasi-informasi tertentu, misalnya atribut id dan class yang berfungsi
untuk memberi nama suatu tag sebagai referensi CSS atau javascript nantinya.
Sekarang bagaimana jika teks yang dimiringkan tersebut ingin kita tebalkan? Untuk
menebalkan teks anda dapat menggunakan tag <strong>atau<b>, menjadi seperti berikut:\

Website <strong><em>pertama</em></strong> saya

Komentar

Posting Komentar

Postingan populer dari blog ini

Simple Painting dengan adobe photosop cs6

-
Gambar
  Pada kesempatan kali ini saya akan menjelaskan bagaimana membuat design sederhana bertema Painting. Pada dasarnya Tutorial Simple Painting ini merupakan pengembangan dari Tutorial yang pernah buat sebelumnya dengan mengkombinasikan teknik Smudge, Toned, dan Tracing Rambut menggunakan Stroke Path. Berikut adalah stock yang akan saya olah :   Langkah pertama, buka image stock pada Adobe Photoshop dan Duplicate Layer seperti contoh di bawah ini :   Selanjutnya tekan Shift + Ctrl + U untuk merubah Image menjadi hitam putih kemudian Duplicate Layer Hitam putih tersebut dan pada layer hasil Duplicate kedua beri efek Invert atau tekan shortcut Ctrl + I seperti contoh di bawah ini : Selanjutnya pada Layer yang telah diberi efek Invert, ubah blendingnya menjadi Color Dodge kemudian lanjutkan dengan memberikan efek Gaussian Blur (Gunakan naluri anda untuk setting nominalnya) seperti contoh di bawah ini : ...
Baca selengkapnya

TUTORIAL PHP

-
Gambar
 PHP PDO MySQL, Simpan Edit Hapus Data dengan PDO PDO (PHP Data Objects) adalah php extension untuk mengakses database, sama seperti mysql_query atau mysql_fetch_array. Saat ini fungsi seperti mysql_query dan mysql_fetch_array sudah di- deprecated dan akan segera dihapus. Oleh karena itu kita perlu segera beralih menggunakan PDO atau MySQLi untuk menyimpan, edit atau hapus data. PDO bisa dipakai untuk mengakses beberapa database berbeda, sedangkan MySQLi hanya untuk database mysql. Jika saat ini kita menggunakan database MySQL dan di kemudian hari berganti menggunakan database PostgreSQL maka kita tidak perlu lagi mengubah kode yang sudah dibuat. Membuat Koneksi ke Database dengan PDO Sebelumnya kita membuat koneksi ke database menggunakan fungsi mysql_connect seperti: $host = "localhost" ; $user = "root" ; $password = "" ; $database_name = "test" ; mysql_connect ( $host , $user , $password ) ; ...
Baca selengkapnya

Tutorial CSS PDF Lengkap

-
Tutorial CSS PDF Lengkap Panduan CSS –  Cascading Style Sheet atau biasa disingkat CSS, digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text sampai memformat layout. Tujuan digunakkannya CSS sendiri adalah untuk memperoleh konsistensi style pada elemen tertentu. Jadi, bisa ditarik kesimpulan pengertian CSS adalah suatu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. CSS merupakan standar pembuatan dan pengaturan style (font, warna, jarak, bentuk, dan lain-lain). Dengan adanya CSS memudahkan kita untuk memisahkan antara bagian presentasi dan isi dari website yang dibuat. Sebelum ada membaca lebih jauh artikel tutorial css pdf lengkap ini, ada baiknya anda mengetahui kegunaan CSS lainnya dalam pembuatan web, diantaranya: 1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur. 2. Ukuran file menjadi lebih kecil sehingga load file lebih cepat, sehingga kinerja webs...
Baca selengkapnya