Assalmualikum Lama Nih Gak Posting, Kali Ini Saya Bagiin Tutorial Saya Aja Deh Waktu Tangan Saya Patah, Dan Waktu Itu Baru Bisa Bua Layout, Sebenarnya Udah Lama Sih, Cuman Baru Di Upload Sekarang, Disimak Dan Di tonton yah semoga bermanfaat :)

Dan Ini Link Videonya DISINI

Like Fans Page Facebook Saya Disini

Tweet

Numpang Bentar Ya, Mungkin Dalam membuat Suatu Program Yang Pasti Kita Harus Mengetikkan Syntax Atau Kode Nya Agar Bisa Berjalan Program Itu. Tapi Saya Punya Suatu Ambisi Membuat Aplikasi Untuk Web Designer, Jadi Dia Hanya Menggambar Di Desktop, Terus Setelah Iya Gambar, Gambar Yang Tadi Itu Langsung Ada Kode Di Dalamnya Entah Masuk Akal Atau Nda, Tapi Nggak Ada Yang Gak Mungkin Sih , Siapa Tau Bisa :P

Mohon Doa'nya :D
"Code is Bored My Space"

Tweet

Hmmm Website Profil Menurut Saya Sih Sebagai Mengasah Design Website Kita Karena Yang Pasti Kita Akan Mendesain Website Itu Semau Kita Bukan Dari Client :v, Dan Sebagai Wadah Untuk Mempromosiin Diri Kita Juga Sih, Dan Setiap Saya Googling Saya Pasti Tuh Nemukan Website Profil Atau Portofolio, Dan Web Nya Itu Saya Bookmark, Setelah Terkumpul Lebih Dari 5 Web Profil, Saya Akan Mengeshare Siapa Tau Menginspirasi :v

1. Yang Pasti Web Profil Saya Lah Wkwkwk Kenapa Nggak Terima Orang Saya Yang Posting Jadi Terima Aja ya :v Tapi Web Profil Saya Ini Belum Selesai Karen Lagi Sibuk Ngerjain Web Yang Lainnya :D.
Berikut Screenshootnya ;

DEMO

2. Daniel Kurdoghlian
Siapa Coba Yang Nggak Mengenal Orang Ini Web Designer & Programmer , Android Lover, Yang Buat 1stwebdesigner Dan Yang Akun Twitter Nya Di Follow Sama Firefox.
Berikut Screnshootnya ;

DEMO

3. James Anderson
Tak Banyak Kata-kata tentang Web Yang Satu Ini , Bagus Laho Efek-efek Nya
Berikut Screenshootnya;

DEMO

4. Ryad Karar
Web Profil Yang Bergaya Flat Ini Sangat Enak Dilihat.
Berikut Screenshootnya;

DEMO

5. Rizky Hajar
Seorang Web Developer & System Analyst Of Deka.
Berikut Screenshootnya;

DEMO

6. Tren Walton
Web Yang Full Dengan Gambar Nya Sendiri Tapi Enak Diliat Ini Sempat Mengunggah Saya Mengikuti Desain Web Nya.
Berikut Screenshootnya;

DEMO

Gimana Keren-keren Dan Menginspirasi Bukan Apalagi Yang Nomor 1 :v.
Silahkan Berikan Komentar Web Profil Siapa Yang Paling Bagus Dan Menginspirasi Sekian.
Like Fans Page Facebook Saya Disini

Tweet

Assalamualikum Wr.Wb , Numpang Sebentar Saya Ingin Share Website Yang Kulang Ajar Satu Ini.
Di Kira Sirkuit Apa, Tapi Memang Sih :D

Langsung Saja Liat Web Nya | DEMO

Like Fans Page Facebook Saya Disini
Baca Juga Artikel Saya Yang Sebelumnya " Indahnya Di RPL "

Tweet

Ok Langsung Saja Ya Saja Jelaskan (y)

Tabel
Adalah Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.

Pembuatan Tabel
Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table:

<table>
    <!-- Data -->
</table>

dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen tr:

<table>
    <tr>
        <!-- Isi Baris Tabel -->
    </tr>
    <tr>
        <!-- Isi Baris Tabel -->
    </tr>
</table>

dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td, seperti berikut:

<table>
    <tr>
        <td>NIM</td>
        <td>Nama</td>
    </tr>
    <tr>
        <td>23511000</td>
        <td>Alex Xandra Albert Sim</td>
    </tr>
</table>

maka kita akan mendapatkan sebuah tabel HTML, seperti berikut:

Tabel Standar pada Chrome
Perhatikan bahwa dengan kode minimal kita mendapatkan sebuah tabel tanpa garis pembatas untuk setiap data, dan juga bahwa jumlah kolom dari tabel ditambahkan secara otomatis. HTML tidak membatasi jumlah kolom yang kita buat, selama elemen td berada di dalam elemen tr. Browser secara otomatis akan menambahkan jumlah kolom sesuai dengan jumlah elemen td yang terbanyak pada sebuah tr dalam HTML.
Header dari Tabel
Sebuah tabel umumnya memiliki bagian header, untuk memberikan keterangan mengenai data yang ditampilkan ke pengguna. Sebuah header dari tabel dapat berada di atas (baris pertama) dari tabel, ataupun berada pada ujung kiri (kolom pertama) dari tabel. Gambar di bawah memberikan contoh kedua jenis header tabel pada umumnya.

Atas: Header pada Baris Pertama Bawah: Header pada Kolom Pertama dan Baris Pertama
Tentunya HTML memiliki fasilitas untuk membuat kedua jenis header tersebut, baik secara tampilan maupun secara semantik. Bagaimanakah kita membuat header tabel pada HTML?
Langkah pertama dalam membuat header tabel pada HTML ialah dengan menggunakan elemen th, yang digunakan selayaknya kita menggunakan td. Misalnya, jika ingin membuat baris pertama pada tabel sebagai header, kita dapat mengisikan baris pertama dengan elemen th seluruhnya:

<table>
    <tr>
        <th>NIM</th>
        <th>Nama</th>
    </tr>
    <tr>
        <td>23511000</td>
        <td>Alex Xandra Albert Sim</td>
    </tr>
</table>

dan kita akan mendapatkan hasil sebagai berikut:

Demo Elemen th
perhatikan bagaimana teks “NIM” dan “Nama” secara otomatis dicetak tebal dan rata tengah. Elemen th akan secara otomatis memberikan kedua gaya tampilan tersebut. Jika ingin membuat setiap kolom pertama menjadi header, tentunya kita harus mengisikan kolom pertama pada tiap baris dengan elemen th:

<table>
    <tr>
        <th>&nbsp;</th>
        <th>Senin</th>
        <th>Selasa</th>
        <th>Rabu</th>
    </tr>
    <tr>
        <th>TI-A</th>
        <td>Basis Data</td>
        <td>Desain Web</td>
        <td>Matematika</td>
    </tr>
    <tr>
        <th>TI-B</th>
        <td>Desain Web</td>
        <td>Struktur Data</td>
        <td>Basis Data</td>
    </tr>
    <tr>
        <th>TI-C</th>
        <td>Struktur Data</td>
        <td>Pemrograman</td>
        <td>Matematika</td>
    </tr>
</table>

dan kita akan mendapatkan header tabel secara vertikal, pada kolom pertama:

Demo Header Vertikal
Untuk menambahkan makna semantik pada header tabel, kita dapat menggunakan dua atribut, yaitu: scope dan headers. Atribut scope digunakan untuk menghubungkan data dengan kolom atau baris dari elemen yang bersangkutan. Misalkan jika pada tabel di gambar Demo Header Vertikal di atas kita memberikan scope pada salah satu header (TI-A) seperti berikut:

<table>
    <tr>
        <th>&nbsp;</th>
        <th>Senin</th>
        <th>Selasa</th>
        <th>Rabu</th>
    </tr>
    <tr>
        <th scope="row">TI-A</th>
        <td>Basis Data</td>
        <td>Desain Web</td>
        <td>Matematika</td>
    </tr>
    <tr>
        <th>TI-B</th>
        <td>Desain Web</td>
        <td>Struktur Data</td>
        <td>Basis Data</td>
    </tr>
    <tr>
        <th>TI-C</th>
        <td>Struktur Data</td>
        <td>Pemrograman</td>
        <td>Matematika</td>
    </tr>
</table>

Berarti kita memberitahukan ke browser bahwa data yang ada pada baris yang sama dengan “TI-A” (dalam kasus ini: “Basis Data”, “Desain Web”, dan “Matematika”) merupakan keterangan untuk “TI-A”. Perlu diingat bahwa karena atribut scope hanya memberikan makna semnatik maka kita tidak akan ada perubahan tampilan. Atribut scope dapat diisikan dengan nilai col, colgroup, row, dan rowgroup. Nilai col dan row cukup jelas, sementara colgroup dan rowgroup akandi jelaskan pada bagian berikutnya.
Sampai di sini, kode untuk membuat tabel beserta makna semantiknya yang ideal ialah sebagai berikut:

<table>
    <tr>
        <th>&nbsp;</th>
        <th scope="col">Senin</th>
        <th scope="col">Selasa</th>
        <th scope="col">Rabu</th>
    </tr>
    <tr>
        <th scope="row">TI-A</th>
        <td>Basis Data</td>
        <td>Desain Web</td>
        <td>Matematika</td>
    </tr>
    <tr>
        <th scope="row">TI-B</th>
        <td>Desain Web</td>
        <td>Struktur Data</td>
        <td>Basis Data</td>
    </tr>
    <tr>
        <th scope="row">TI-C</th>
        <td>Struktur Data</td>
        <td>Pemrograman</td>
        <td>Matematika</td>
    </tr>
</table>

Atribut headers sendiri memiliki fungsi yang sama dengan atribut scope, tetapi lebih banyak digunakan untuk tabel-tabel kompleks yang banyak memerlukan penggabungan beberapa sel. Penjelasan mengenai atribut ini akan diberikan ketika pembahasan mengenai penggabungan sel dilakukan.
Pembatas (Border) Tabel
Pembuatan tabel yang telah kita lakukan sampai pada titik ini merupakan tabel yang tidak memiliki pembatas antar sel tabel. Tampilan standar yang diberikan HTML seperti ini sangat jarang dijumpai di dalam dokumen pada umumnya. Biasanya, tabel yang kita jumpai selalu memiliki batas antar setiap sel, sehingga membuat tabel tanpa batas akan menjadi aneh dan membingungkan pengguna.
Untungnya, CSS telah memberikan fasilitas untuk memberikan tabel pada elemen-elemen yang ada, melalui properti border. Kita dapat menggunakan properti ini untuk memberikan garis pembatas antar setiap sel pada tabel, seperti berikut:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table Test</title>

    <style type="text/css">
        table {
            border: 1px solid #C6C6C6;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>&nbsp;</th>
            <th>Senin</th>
            <th>Selasa</th>
            <th>Rabu</th>
        </tr>
        <tr>
            <th scope="row">TI-A</th>
            <td>Basis Data</td>
            <td>Desain Web</td>
            <td>Matematik</td>
        </tr>
        <tr>
            <th>TI-B</th>
            <td>Desain Web</td>
            <td>Struktur Data</td>
            <td>Basis Data</td>
        </tr>
        <tr>
            <th>TI-C</th>
            <td>Struktur Data</td>
            <td>Pemrograman</td>
            <td>Matematika</td>
        </tr>
    </table>
</body>
</html>

Coba jalankan kode di atas untuk mendapatkan hasil seperti berikut:

Pembatas Tabel
Ternyata properti border tidak dapat menghasilkan pembatas pada sel tabel secara otomatis! Untuk menanggulanginya, kita perlu menambahkan kode border tersebut pada elemen td dan th juga, sehingga kode CSS menjadi seperti berikut:

table, td, th {
    border: 1px solid #C6C6C6;
}

dan kita akan mendapatkan pembatas pada setiap sel:

Pembatas Tabel pada Setiap Sel
Seperti yang dapat dilihat pada gambar Pembatas Tabel pada Setiap Sel, secara otomatis browser akan menambahkan jarak pada setiap sel yang ada. Untuk menambah dan mengurangi jarak antar sel ini kita dapat menggunakan properti CSS border-spacing, yang hanya dapat digunakan untuk elemen table. Tambahkan kode CSS baru berikut untuk melihat contoh penggunaan border-spacing:

table {
    border-spacing: 15px;
}

Jarak Tiap Sel pada Tabel
Jika ingin menghilangkan keseluruhan jarak pada sel, kita dapat menggunakan properti border-collapse, yang sama seperti border-spacing hanya dapat digunakan pada elemen table. Properti border-collapse dapat diisikan dengan dua nilai, yaitu separate dan collapse. Nilai standar dari browser ialah separate, yang akan menghasilkan jarak antar sel. Nilai collapse, seperti yang telah dapat ditebak, akan menghilangkan segala jarak antar sel.

table {
    border-collapse: collapse;
}

Menghilangkan Jarak Tiap Sel pada Tabel
Menggabungkan Beberapa Sel
Dalam membuat tabel, seringkali kita akan memerlukan penggabungan beberapa sel sekaligus. Mungkin saja nilai dari sel pada beberapa baris adalah sama. Bisa juga penggabungan dilakukan untuk memperindah tampilan tabel. HTML menyediakan fasilitas untuk menggabungkan beberapa sel dengan menggunakan atribut colspan dan rowspan pada elemen td atau th.
Seperti namanya, colspan digunakan untuk menggabungkan beberapa kolom sekaligus, dan rowspan digunakan untuk menggabungkan beberapa baris sekaligus. Nilai yang diisikan pada kedua atribut ini ialah berapa banyak sel yang ingin digabungkan. Misalnya jika ingin menggabungkan tiga kolom, maka kita dapat menuliskan colspan="3". Setelah menggabungkan sel, tentunya kita harus menuliskan lebih sedikit baris atau kolom pada bagian tabel berikutnya.
Untuk mempermudah ilustrasi, perhatikan kode berikut:

<table>
    <tr>
        <th rowspan="2">Teams</th>
        <th colspan="3">Scores</th>
    </tr>
    <tr>
        <th scope="col">Win</th>
        <th scope="col">Draw</th>
        <th scope="col">Lost</th>
    </tr>
    <tr>
        <th scope="row">Na'Vi</th>
        <td>4</td>
        <td>1</td>
        <td>3</td>
    </tr>
    <tr>
        <th scope="row">invictus Gaming</th>
        <td>6</td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>

yang akan menghasilkan tabel seperti berikut:

Menggabungkan Kolom dan Baris pada Tabel
Perhatikan bagaimana jumlah th berbeda pada baris pertama dan baris kedua, sesuai dengan penggabungan kolom yang dilakukan. th pertama pada baris pertama memiliki atribut rowspan="2" yang berarti sel yang bersangkutan akan bergabung dengan sel pada kolom yang sama di baris berikutnya, sehingga tr untuk baris kedua hanya memiliki tiga buah th. Selanjutnya, th kedua pada baris pertama memiliki atribut colspan="3", yang berarti tiga kolom selanjutnya akan digabungkan ke dalam satu kolom, sehingga hanya terdapat dua th pada baris ini (dua th selanjutnya tidak perlu dituliskan lagi karena telah digabungkan pada th kedua).
Perhatikan juga bagaimana atribut scope digunakan pada th yang relevan (memiliki arti langsung pada data) seperti jumlah kemenangan dan nama tim, tetapi browser tidak dapat secara langsung sel yang bersangkutan merupakan nilai kombinasi. Browser dapat mengetahui bahwa sebuah tim memiliki empat kemenangan, dan Na’vi memiliki skor 4/1/3, tetapi browser tidak dapat mengetahui bahwa Na’vi memiliki empat kemenangan.
Jika kita dapat secara langsung melihat tabel hasil penampilan browser tentunya hal ini tidak menjadi masalah. Tetapi untuk pengguna yang menggunakan alat bantu seperti screen reader, kita perlu memberitahukan secara khusus ke browser sel-sel yang relevan terhadap sebuah nilai. Pemberian makna semantik seperti ini dapat dilakukan dengan memanfaatkan atribut headers pada elemen td.
Atribut headers menerima nilai berupa id dari sel bersangkutan yang memberikan arti pada tabel tersebut. Karena model dari tabel yang mengharuskan kita melihat beberapa sel sekaligus, maka kita dapat mengisikan beberapa id sekaligus ke dalam atribut ini, dengan pemisah berupa spasi. Misalnya, kita dapat memberikan id pada setiap th yang ada pada tabel seperti berikut:
<table>
    <tr>
        <th id="team" rowspan="2">Teams</th>
        <th id="score" colspan="3">Scores</th>
    </tr>
    <tr>
        <th id="win" scope="col">Win</th>
        <th id="draw" scope="col">Draw</th>
        <th id="lost" scope="col">Lost</th>
    </tr>
    <tr>
        <th id="navi" scope="row">Na'Vi</th>
dan kemudian memberitahukan setiap sel yang menyimpan nilai masing-masing id yang relevan terhadap nilai tersebut, seperti berikut:
    <td headers="team navi win score">4</td>
    <td headers="team navi draw score">1</td>
    <td headers="team navi lost score">3</td>
</tr>
sehingga perangkat lunak screen reader mengetahui bahwa sel yang berisi nilai “4” merupakan pencatatan akan jumlah kemenangan sebuah tim yang bernama “Na’vi”. Bahkan sebenarnya sebuah perangkat lunak screen reader yang baik akan membaca sel tersebut sebagai “Teams Na’Vi Win Scores is 4”, sesuai dengan isi dari masing-masing sel.
Struktur Tabel
Meskipun terlihat sederhana, pembangunan tabel yang telah kita lakukan sampai sejauh ini masih merupakan sebuah tabel yang hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri tidak memiliki strukutr, sehingga tidak terdapat organisasi data yang baik. Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat membantu kita dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus bersifat dinamis.
Penambahan kolom dan baris tabel saja tidak cukup untuk mengorganisasikan data pada tabel, karena kita tidak dapat secara langsung mengetahui mana bagian dari tabel yang merupakan data, mana yang merupakan isi data, dan mana yang merupakan nilai agregasi dari data. Kita juga tidak dapat mengetahui tujuan atau deskripsi dari sebuah tabel dengan hanya baris dan kolom tabel. HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen caption, thead, tfoot, dan tbody.
Table Caption
Untuk menambahkan deskripsi atau judul dari sebuah tabel, kita dapat menggunakan elemen caption yang diletakkan di dalam table. Elemen caption ini harus dituliskan setelah tag pembuka tabel. Posisi standar dari sebuah caption ialah di atas tabel, tetapi seperti seluruh elemen lainnya, tentunya kita kita dapat mengubah posisi tersebut dengan menggunakan CSS.

<table>
    <caption>DreamHack Invitational Scores</caption>

Contoh Caption pada Tabel
Perubahan posisi caption sendiri dapat dilakukan dengan menggunakan properti caption-side pada elemen table. Nilai yang dapat diisikan pada properti ini yaitu top, bottom, dan inherit.

table {
    caption-side: bottom;
}

Contoh Caption Bawah pada Tabel
Table Head, Body, dan Foot
Sebuah tabel dapat dibagi menjadi beberapa bagian, biasanya header, footer, dan body. Header dari tabel digunakan untuk mendeskripsikan data, body tabel untuk menampilkan isi data, dan footer dari tabel digunakan untuk menampilkan agregasi dari data tersebut.

Contoh Tabel dengan Header, Body, dan Footer
Elemen-elemen HTML yang digunakan untuk membuat masing-masing bagian dari tabel tersebut yaitu thead, tbody, dan tfoot. Elemen paling pertama yang harus diletakkan setelah caption ialah thead, dan setelah thead, kita bebas meletakkan tfoot atau tbody terlebih dahulu.

<table>
    <caption>...</caption>
    <thead>
      ...
    </thead>
    <tbody>
      ...
    </tbody>
    <tfoot>
      ...
   </tfoot>
</table>

Ok Semoga Bermanfaat Bagi Yang Baru Belajar, Seperti Biasa Agar Nyaman Membaca Tutorial Saya Tanpa Perlu Koneksi Internet Silahkan Download Filennya Dibawah Ini.
Format .docx DISINI
Format .pdf DISINI
Like Fans Page Facebook Saya DISINI

Tweet

" Sebelum Saya Menjelaskan Tentang Indah Nya Di RPL, Saya Ingin Menjelaskan Apa Itu RPL"
'RPL' Mungkin Ke Banyak Kan Siswa Atau Siswi Masih Asing Dengan Jurusan Yang Satu Ini, Jurusan Ini Adalah Jurusan Yang Ada Di Sekolah Atau SMK Tehknologi Informasi Bahkan Di Kota Saya Samarinda Bahkan Di Provinsi Kaltim Yang Saya KeTahui Hanya Ada Dua Sekolah Yang Ada Jurusan RPL Ini Yakni SMK Ti Airlangga Dan SMKN 7 Samarinda.
RPL Merupakan Kepanjangan Dari Rekayasa Perangkat Lunak Yaitu Sebuah Jurusan Tehknologi Informasi Di Tingkat SMK.

Dan Pasti Kalian Bingung Juga Apa Yang Kita Lakukan Pada Saat Kita Di Jurusan RPL Ini , Tidak Jauh Beda Halnya Dengan Jurusan Di Tehknologi Informasi Lainya Seperti Multimedia , Tehknik Komputer Jaringan, Di RPL Sama-sama Otaka-atik Laptop Bedanya Kita Menghadapi Hal Ini;

Ada Yang Mengerti Dari Script Dari Gambar Diatas, Hehe Mungkin Yang Udah Di Jurusan RPL Atau Programmer-programmer Amatir Pasti Mengetahuinya -_- , Ya Maka Dari Itu Saya Menjelaskan Apa Itu RPL Dan Indahnya Di RPL.

Yap Kegiatan Kami Anak-anak 1 RPL Dari SMK Ti Airlangga  Samarinda Ialah Yang Pertama Yang Pasti Turun Sekolah Seperti Sekolah-sekolah Lainnya, Belajar Seperti Sekolah-sekolah Lainnnya, Istirahat Seperti Sekolah-sekolah Lainnya Dan Pulang Seperti Seperti Sekolah-sekolah Lainnnya :D, Yang Membedekan Hanyalah Pelajaran Produktif Nya Yaitu Kita Belajar Membuat Software Menggunakan Aplikasi Visual basic & Eclipse (Java), Belajar Membuat Web Menggunakan Bahasa Pemrogrman HTML & CSS, PHP, Belajar Membuat Game Dan Insyallah Apabila Kami Rajin Dan Konsisten Akan Menjadi Seorang Programmer Dan Web Developer :D .

Husst Diam No Sara Ya Ini Hanya Pendapat Pribadi Saya !
Untung Nya Di RPL "Rekayasa Perangkat Lunak"  Adalah Coba Bayangkan Deh
1. Apabila Kita Di Jurusan Multimedia (MM) Atau Di Tehknik Komputer Jaringan (TKJ), Waktu Kuliah Dari Informasi Yang Saya Dapatkan Pasti Kita Mengenal Bahasa Pemrogramn C++ Waktu Pertama Masuk Kuliah Untungnya Di Tingkat SMK Di Jurusan RPL Kita Udah Mengetahuinya Duluan.
2. Di Jurusan RPL Kita Pasti Akan Bertemu Pelajaran Membuat Web Dan Dalam Pembuatan Web Yang Akan Ada Desainnya Dan Otomatis Kita Harus Belajar Photoshop , Corel Draw, Adobe Ilusator dll Cuman Yang Sering Web Designer Gunakan Adalah Software Photoshop. Dan Di Multimedia Pun Pelajaran Produktif Photoshop,Corel Draw dll Wajib Bisa. Hayo Sama-sama Dapatkan :D
3.  Di Jurusan RPL Kita Pasti Akan Mempelajari Cara Upload File Web Kita Di Internet Bukan Hanya Di Laptop Kita Saja Dan Otomatis Kita Mengetahui Web Server Sama Halnya Yang Di Jurusan TKJ, *hayoo betul nggak ya pendapat saya :3*
Dan Untung Nya Di RPL Segala Pelajaran Kita Dapatkan Asal Ada Kemauan, Niat Dan Konsisten Dari Diri Kita (y).
Hehe Ya Itulah Untung Nya Di RPL
Dan Foto-foto Kegiatan Kami Sehari-harinya;

Terakhir Yang Buat Facebook, Twitter, Point Blank, Lost Saga, Google Itu Anak RPL Loh. Gimana Intinya Jangan Pernah Takut Untuk Mencoba Suatu Hal Yang Baru Saya Saja Dulu Niatnya Masuk Di Jurusan Multimedia Tapi Malah Di Masukkan Di RPL, Setelah Tau Kalau Kaya Gini Rasanya Di Jurusan RPL Saya Pun Bersyukur Masuk Di Jurusan Ini. Asal Ada Niat Dan Konsisten Pasti Akan Merasa Nyaman :)

Dan Saya Sarankan Masuklah Di Jurusan RPL Kalian Yang Ingin Masuk Di Jurusan RPL Bisa Daftar Kok Di SMK TI Airlangga  Info Lebih Lengkapnya DISINI Atau Bisa Daftar Di SMKN 7 Samarinda

Kunjungin Website Portal Kami Disini
Like Fans Page Facebook Saya Disini
Follow Akun Twitter Saya Disini
Dan Jangan Lupa Tinggalkan Komentar :

Tweet

:/ Lumayan Lama Gak Posting, hehe Karena Saya Belakangan Ini Tidak Pernah Buka Blogger Sehingga Terbengkalai Seperti Ini, wkwk Kali Ini Saya Akan Membahas Tentang Memasukkan Gambar, Lagu, Dan Video Pada HTML , Ok Lah Langsung Saja Kita Bahas :D

1. Menambahkan Gambar

Untuk menambahkan gambar pada HTML, kita dapat menggunakan elemen img. Elemen img sendiri merupakan elemen yang bersifat self-contained, yaitu tidak memiliki tag penutup. Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua cara, yaitu tempat dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut.

Berikut adalah contoh penggunaan tag img:

<img src="images/sintel.png" alt="Sintel merupakan sebuah film singkat.">

<img src="http://i.imgur.com/cYWveEa.jpg" alt="Contoh Pengunaan URL untuk src.">

Atribut alt, yang bersifat opsional, berguna untuk memberikan keterangan gambar secara semantik. Keterangan ini juga akan ditampilkan ketika mouse diletakkan di atas gambar, dan ketika gambar tidak dapat ditemukan.

Catatan: Dukungan format gambar yang ada pada HTML diserahkan kepada masing-masing pembuat browser. Begitupun, sangat disarankan untuk menggunakan format gambar yang didukung oleh hampir semua perangkat secara umum, seperti png, jpg, atau gif.

Layaknya elemen-elemen lain pada HTML, kita dapat mengubah tampilan elemen img dengan menggunakan 

CSS.

Mengubah Ukuran Gambar

Perubahan ukuran gambar dapat dilakukan dengan menggunakan properti width dan height, seperti pada elemen-elemen lainnya. Yang perlu diperhatikan dalam perubahan ukuran ialah bagaimana sebuah gambar dapat menyesuaikan ukuran yang tepat ketika kita hanya memberikan salah satu dimensi. Misalnya, sebuah gambar dengan ukuran asli 800x600 akan secara otomatis berubah menjadi 1024x768 meskipun kita hanya mengisikan nilai width saja. Browser secara otomatis akan menghitung rasio panjang dan lebar gambar lalu menyesuaikan ukuran gambar dengan nilai yang kita berikan.

Tetapi perlu diingat bahwa pengisian nilai width dan height dengan rasio panjang-lebar yang tidak tepat tentunya akan menyebabkan gambar menjadi “tertarik”. Untuk lebih jelasnya, coba jalankan kode berikut pada gambar yang diberi nama gambar.jpg:

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Perubahan Ukuran Gambar</title>

    <style type="text/css">

        #set-width {

            width: 360px;

        }

        #set-height {

            height: 600px;

        }

        #set-width-height {

            width: 600px;

            height: 300px;

        }

    </style>

</head>

<body>

    <img src="images/gambar.jpg" id="standar"> <br>

    <img src="images/gambar.jpg" id="set-width"> <br>

    <img src="images/gambar.jpg" id="set-height"> <br>

    <img src="images/gambar.jpg" id="set-width-height">

</body>

</html>

2. Perubahan Posisi Gambar
Seperti yang dapat dilihat pada kode sebelumnya, elemen img merupakan inline level element. Menambahkan gambar pada tengah-tengah teks akan menyebabkan gambar tersebut diselipkan ditengah-tengah teks, mengacaukan alur teks, seperti pada kode berikut:

<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis  nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute
<img src="http://i.imgur.com/r03c371.jpg">
irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

Berikut Hasil Output Dari Percobaan No.2

Gimana Tampan Kan Gambar Diatas :v

3. Menambahkan Lagu Atau Audio

Selain menampilkan gambar, HTML juga memiliki fitur untuk menambahkan pemutar suara (audio) pada dokumen web. Elemen audio digunakan untuk tujuan ini, dan sama seperti elemen img, kita harus memberikan nilai tempat menyimpan file audio melalui atribut src. Tetapi berbeda dengan img, elemen audio memiliki tag penutup:

<audio src="audios/piano.mp3"></audio>

Secara normal, ketika kita memasukkan elemen audio seperti pada kode di atas, kita tidak akan dapat melihat elemen audio, dan bahkan file audio yang dimasukkan tidak akan dapat dimainkan. Untuk menampilkan elemen audio, kita harus menambahkan atribut controls pada elemen:

<audio src="audios/piano.mp3" controls></audio>

dan jika kita ingin memastikan audio dapat dimainkan secara otomatis ketika halaman selesai diunduh oleh browser, kita dapat menggunakan atribut autoplay:

<audio src="audios/piano.mp3" controls autoplay></audio>

Tentunya selain ketiga atribut di atas kita juga memiliki atribut lainnya, yaitu loop dan preload. Seperti namanya, atribut loop digunakan untuk memastikan audio dapat diputar kembali secara otomatis ketika sudah selesai dimainkan. Atribut preload sendiri berfungsi untuk mengatur seberapa banyak data yang ingin dikirimkan ke browser ketika pertama kali mengunduh audio. Atribut preload dapat diisikan dengan tiga nilai, yaitu none, auto, dan metadata. Seperti namanya, none berarti tidak ada data yang diunduh terlebih dahulu, auto melakukan unduh terhadap informasi-informasi mengenai file audio (durasi, nama seniman, dst), dan metadata hanya mengunduh informasi tentang file audio (tanpa mengunduh audio itu sendiri).

Elemen Audio standar pada Chrome

Sumber Suara Tambahan

Ketika menambahkan audio pada dokumen web, terdapat beberapa hal yang harus kita perhatikan untuk memastikan bahwa audio dapat dimainkan dengan benar oleh pengguna. Hal paling utama yang perlu diperhatikan ialah apakah browser pengguna dapat menjalankan file audio yang diberikan tanpa masalah. Beberapa browser open source seperti Firefox menolak file audio tertutup seperti WMV dan hanya dapat menjalankan format OGG. Untuk menanggulangi hal ini, kita dapat memberikan beberapa jenis format file sekaligus dan membiarkan browser memilih format yang dapat dijalankannya.

Memberikan beberapa format file dapat dilakukan dengan menambahkan elemen source di dalam elemen audio, seperti berikut:

<audio controls>

    <source src="audios/piano.ogg" type="audio/ogg">

    <source src="audios/piano.mp3" type="audio/mpeg">

</audio>

Nilai pada atribut type harus diisikan dengan kode media Internet (MIME), sesuai dengan format yang diinginkan. Baca di sini untuk melihat daftar MIME untuk format-format umum yang dijumpai pada Internet.

Tambahan lagi, selain memberikan sumber suara dalam bentuk file audio, kita juga dapat menambahkan sumber berupa flash player untuk browser yang belum mendukung elemen audio. Penambahan elemen flash player dilakukan layaknya menambahkan elemen flash standar pada browser, tetapi tidak akan dibahas lebih jauh pada artikel ini karena penambahan tersebut akan memerlukan perubahan pada sisi server juga. Singkatnya, penambahan elemen flash dapat dilakukan kira-kira seperti berikut:

<audio controls>

    <source src="audios/piano.ogg" type="audio/ogg">

    <source src="audios/piano.mp3" type="audio/mpeg">

    <object type="application/x-shockwave-flash"

            data="player.swf?audio=piano.mp3">

        <paran name="movie" value="player.swf?audio=piano.mp3">

        <p>Tidak terdapat dukungan browser untuk flash.</p>

    </object>

</audio>

Kode di atas merupakan kode yang paling aman untuk memastikan audio dapat dijalankan oleh pengguna, karena browser modern yang mendukung elemenn audio umumnya telah mendukung format OGG, dan untuk browser yang tidak mendukung, norma yang ada ialah menggunakan flash player untuk menyajikan audio / video.

Berikut Hasil Outputnya :D

4. Menambahkan Video
Penambahan video pada dokumen HTML dilakukan dengan elemen video, yang sangat mirip dengan elemen audio. Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan pada elemen video, sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format. Karenanya, setelah mengetahui tentang tag audio, kita dapat dengan mudah menambahkan video seperti berikut:

<video controls autoplay>
    <source src="videos/trailer.ogv" type="video/ogg">
    <source src="videos/trailer.mp4" type="video/mp4">
</video>

dan sama seperti pada kasus audio, umumnya browser telah mendukung format OGV, sehingga penambahan kedua format standar (OGV dan MP4) umumnya telah cukup untuk mendukung seluruh browser modern. Jika ingin menambahkan dukungan video flash, kita dapat menambahkannya dengan cara yang sama dengan pada elemen audio:

<video controls autoplay>
    <source src="videos/trailer.ogv" type="video/ogg">
    <source src="videos/trailer.mp4" type="video/mp4">

    <object type="application/x-shockwave-flash"
            data="player.swf?video=trailer.mp4">
        <param name="movie" value="player.swf?video=trailer.mp4">
        <p>Tidak ada dukungan flash</p>
    </object>
</video>

Dan Ini Hasil Output Nya ;

Hasil Output Itu Saya Buka Dengan Google Chrome.

Ok Selesai Agar Kalian Nyaman Membaca Tutorial Saya Tanpa Perlu Koneksi Ke Internet

Silahkan DOWNLOAD File .docx Nya DISINI
Silahkan DOWNLOAD File .pdf Nya DISINI
Like Fans Page Facebook Saya DISINI

Tweet

Bahas Tentang Form Pada HTML Yok Semoga Menambah Ilmu Dan Bermanfaat :)

Sebuah form merupakan bagian dari dokumen web yang dapat diisikan oleh pengguna, untuk memeberikan informasi tertentu dari pengguna kepada website. Sebuah form sangat penting dalam sebuah aplikasi web, terutama aplikasi web dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna. Ok Langsung Saja Lah :D

Inisialisasi Form

Form pada HTML dibuat dengan menggunakan elemen form. Elemen form harus membungkus seluruh elemen-elemen masukan form lain untuk memastikan masukan informasi pengguna dapat dibaca oleh aplikasi web. Pembungkusan elemen-elemen masukan dilakukan sama seperti kita membungkus elemen-elemen lain pada div:

Berikut Contohnya ;

<form action="#" method="post">

    ....

</form>

Seperti yang dapat dilihat pada kode di atas, terdapat dua atribut yang wajib dimiliki oleh elemen form. Atribut pertama ialah action, yang berfungsi untuk memberitahukan browser alamat pengiriman dari data-data yang diisikan pengguna di dalam form. Idealnya parameter ini diisikan dengan sebuah URL pada server yang melakukan pemrosesan data.

Elemen Masukan Form

Terdapat banyak elemen-elemen masukan pada form, yang dapat digunakan oleh pengguna untuk mengisikan data dengan yang berbeda-beda jenisnya. Bagian ini akan membahas tiap-tiap elemen masukan form, beserta dengan cara pembuatannya.

 1). Elemen Masukan Teks: TextField dan TextArea

Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan menggunakan dua buah elemen: textarea dan input. textarea digunakan untuk masukan teks yang terdiri dafi beberapa baris, sementara input digunakan untuk masukan teks yang hanya satu baris.

Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya langsung memasukkan tag-nya saja:

Berikut Contohnya;

<textarea>

</textarea>

selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag untuk mendapatkan nilai masukan standar:

<textarea>

    Contoh isi textarea

</textarea>

Berikut Contoh Penggunaan Elemen TextArea
Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan menggunakan properti height dan width.

Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya tidak dapat digunakan untuk seluruh kasus pengisian data. Seringkali kita menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input:

<input type="text">

Berikut Output Dari Kode Diatas :)

Contoh Penggunaan Elemen Input

Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks yang ada, sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan pada atribut type yaitu:

1. color

2. datetime-local

3. number

4. tel

5. week

6. date

7. email

8. range

9. time

10. datetime

11. month

12. search

13. url

14. password

15. text

16. file

Elemen Pemilihan: Radio Button, Checkbox, dan Dropdown

Selain mengisikan data berupa teks, seringkali kita juga menemukan data berupa pilihan, misalnya jenis kelamin atau hobi. Pengisian data seperti ini biasanya memberikan beberapa pilihan kepada pengguna, dan pengguna dapat memilih satu atau beberapa pilihan yang diberikan.

Jika kita ingin memberikan pilihan kepada pengguna, dan memastikan pengguna hanya memilih satu pilihan saja, kita dapat menggunakan radio button. Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan atribut type bernilai :code`radio`:

<input type="radio" name="sex" value="pria"> Pria <br>

<input type="radio" name="sex" value="wanita"> Wanita

Berikut Hasil Output Dari Kode Diatas;





Jika ingin memberikan pengguna kemampuan untuk memilih banyak pilihan sekaligus, kita dapat menggunakan elemen checkbox. Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai atribut type-nya berisikan checkbox.

<input type="checkbox" name="day" value="senin"> Senin <br>

<input type="checkbox" name="day" value="selasa"> Selasa <br>
<input type="checkbox" name="day" value="rabu"> Rabu

Berikut Contoh Output Dari Kode Diatas ;

Dropdown list.

Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen, yaitu select dan option. Elemen select membungkus seluruh elemen option yang ada, untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari dropdown yang diinginkan. Perhatikan kode di bawah :)

<select name="country">
    <option value="indonesia">Indonesia</option>
    <option value="malaysia">Malaysia</option>
    <option value="filipina">Filipina</option>
    <option value="vietnam">Vietnam</option>

</select>

Berikut Hasil Output Nya;

Tombol pada Form
Setelah pengguna mengisikan data-data yang diminta oleh dokumen web, tentu saja pengguna harus mengirimkan data tersebut ke server. Pengiriman data dapat dilakukan pengguna melalui tombol khusus yang disediakan oleh HTML.

Tombol Pengiriman
Pembuatan tombol pengiriman juga dilakukan dengan menggunakan elemen input, yang atribut type-nya diisikan dengan nilai submit, seperti berikut:

<input type="submit" name="submit" value="Masukkan Form">

Berikut Contoh Output Nya;

Label
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan, dan harus memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan, sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik pada teks yang dihasilkan oleh elemen label.

Kode Nya;

<label for="username">Username</label>

<input type="text" name="username" id="username">

Fieldset
Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan.
Secara standar, elemen fieldset akan memberikan border di sekitar grup elemen-elemen di dalamnya, yang tentunya dapat diubah dengan menggunakan CSS. Berikut adalah contoh penggunaan fieldset:
Berikut Kode Nya;

<fieldset>
    <label for="username">Username</label>
    <input type="text" name="username" id="username">
    <label for="password">Password</label>
    <input type="text" name="password" id="password">
</fieldset>

Berikut Hasil Outputnya ;

Validasi Masukan Pada Form
Seringkali dalam pengembangan form pada aplikasi, terdapat elemen-elemen yang tidak wajib diisikan oleh pengguna dan elemen-elemen yang wajib diisikan oleh pengguna. Aplikasi kemudian akan melakukan pengecekan terhadap nilai masukan dari pengguna, apakah nilai yang wajib ada sudah diisikan atau belum. Jika nilai belum diisikan maka aplikasi akan menolak form pengguna, dengan pesan kesalahan yang menjelaskan bahwa terdapat isian yang wajib diisi oleh pengguna. Proses pengecekan kewajiban isi atau berbagai batasan lain ini dikenal dengan nama validasi.
Validasi pada elemen-elemen form HTML dilakukan dengan beberapa cara, yaitu:
1. Atribut requied pada elemen-elemen masukan yang wajib diisikan. Jika pengguna tidak mengisikan elemen maka browser secara otomatis akan memberikan peringatan kepada pengguna dan membatalkan pengiriman form. Contoh penggunaan atribut ini yaitu:

<input type="text" name="username" requied>

2. Pengunaan atribut type yang benar, untuk memastikan browser dapat melakukan pengecekan nilai yang diisikan pengguna dengan format sesuai dengan yang dispesifikasikan pada standar HTML. Misalnya, jika menggunakan type="email", maka pengguna tidak dapat mengisikan bukanemail sebagai masukan form.

Dan Berikut Hasil Output Nya ;

Hhha Dan Itu Lah Form-form Pada HTML :D
Agar Lebih Nyaman Memahami Nya Dan Membacanya Tanpa Pelru Koneksi Silahkan,
Download Format DOCX Nya DISINI
Download Format PDF Nya DISINI
Dan Like Fans Page Facebook Saya Disini

Tweet

LAYOUT
 Hai Kali Ini Saya Akan Membahas Layout Atau Bentuk Halaman Web Yang Akan Kita Buat Nantinya :)
" Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS. "

Dalam Sebuah Halaman Web Umumnya Memiliki Element-element, Berikut Contoh Gambarnya ;

Elemen Header

Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.

Elemen Navigation

Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.

Elemen Sidebar

Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

Lalu Bagaimana kita dapat membuat layout umum seperti yang tampak pada gambar Elemen-elemen Layout pada Dokumen Web di atas? Sebelum membuat layout, tentunya kita terlebih dahulu harus mengetahui cara pengukuran elemen pada HTML. Karena tanpa dapat mengukur elemen dengan benar, kita tidak akan dapat membuat layout yang bagus.

Box Model

Salah satu prinsip mendasar dalam menyusun elemen-elemen HTML ialah Box Model. Apa itu box model? Konsep box model pada dasarnya merupakan konsep yang menyatakan bahwa elemen-elemen yang ada di dalam HTML adalah berbentuk kotak. Sekali lagi, seluruh elemen HTML berbentuk kotak. Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari elemen, margin, padding, dan border dari elemen tersebut.

Semua elemen juga dapat dikategorikan ke dalam dua cara penampilan, yaitu:

• Block Level Element merupakan elemen yang selalu dimulai pada baris baru, dan menambahkan baris baru pada akhir elemen. Hal ini menyebabkan elemen yang bersifat block akan selalu berada pada baris barunya sendiri ketika dituliskan. Contoh dari elemen block: p, h1, dan blockquote.

• Inline Level Elements merupakan elemen yang tidak membuat baris baru ketika dibuat. Elemen ini akan mengikuti alur dokumen sebagaimana mestinya, dan memiliki ukuran tinggi yang ditentukan serta ukuran lebar yang sesuai dengan isi elemen. Contoh dari elemen inline: span, b, i.

Perlu diperhatikan bahwa karena sifatnya, sebuah elemen inline tidak akan dapat menampung elemen blok (memiliki elemen blok di dalamnya), sementara elemen blok dapat menampung elemen blok maupun inline.

Berikut Contoh Kode Nya ;

Elemen H1

Elemen p otomatis membuka baris baru dari elemen h1, tetapi elemen bold ini tidak

Seperti yang telah saya dijelaskan sebelumnya, sebuah elemen HTML berbentuk kotak, dan ukurannya dipengaruhi oleh isi elemen, margin, padding, dan border.

Berikut Contoh Kode Nya;

Box Model

Box Model

Dan Itulah Hasil Dari Kode Diatas;

Properti Margin dan Padding
Setiap browser memberkan jarak antar elemen secara standar, agar elemen-elemen HTML dapat ditampilkan dengan optimal. Jarak antar elemen ini berbeda-beda, tergantung kepada browser yang mengimplementasikan. Untuk mengubah jarak antar elemen, kita dapat menggunakan properti margin.
Terkadang kita juga ingin memberikan jarak di dalam elemen sendiri, yaitu jarak dari konten elemen ke pembatas (border) elemen. Jarak ini dikenal dengan nama padding. Padding kerap digunakan untuk memberikan warna latar yang baik pada elemen. Berikut adalah contoh kode pengunaan margin dan padding:

div { margin: 10px; padding: 15px; }

Border
Border, sebagai pemberi tanda batas elemen memisahkan margin dan padding. Terdapat tiga properti utama yang membentuk sebuah border, yaitu border-width, border-style, dan border-color.
border-width
Seperti namanya, properti ini menentukan ketebalan border, yang diisikan dengan nilai pixel. Contoh kode adalah sebagai berikut:

div {
    border-width: 10px;
}

border-style
Menentukan cara penampilan dari border. Pilihan nilai yang dapat diisikan yaitu: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, dan outset. Ingin mengetahui kegunaan masing-masing nilai? Silahkan coba implementasikan elemen tersebut! Jika tidak diisikan, maka secara otomatis nilai yang dipilih ialah none, sehingga border tidak akan tampak.
Contoh kode:

div {
    border-style: dotted;
}

border-color
Seperti namanya, memberikan warna kepada border. Jika warna tidak diberikan, maka border akan menjadi warna hitam. Contoh kode:

div {
    border-color: red;
}

Ketiga properti di atas seringkali digunakan bersamaan, karena ketergantungan antar properti tersebut dalam membuat border yang indah. Penggabungan ketiga properti dapat ditulis dalam properti border seperti berikut:

div {
    border: 1px solid red;
}

Dan seperti yang dapat dilihat dari kode di atas, tentunya urutan penulisannya ialah border-width border-style border-color.
Meskipun seluruh elemen pada dasarnya berbentuk kotak, CSS memungkinkan kita untuk menampilkan elemen dengan sedikit variasi, yaitu memberikan sudut bulat kepada elemen.

Contoh Elemen dengan Sudut Bulat
Kita dapat menggunakan properti border-radius untuk membuat efek sudut bulat, seperti pada kode di bawah:

div { border-radius: 10px; }

Penyusunan Elemen

Pengukuran elemen dengan mengikut sertakan box model hanya merupakan sebagian pengetahuan yang diperlukan untuk membuat layout halaman yang sempurna. Pengetahuan lain yang harus dimengerti juga ialah cara menyusun elemen-elemen yang ada di dalam dokumen. Bagian ini akan membahas bagaimana menyusun elemen-elemen yang ada dalam dokumen, dengan berbagai teknik yang disediakan oleh HTML dan CSS.
 Berikut Contoh Kodenya;

<p>
    Ini adalah sebuah paragraf, yang didalamnya terdapat
    elemen <b>bold</b>, <i>italic</i>, <em>emphasis</em>,
    dan <strong>strong</strong>.
</p>

Pada kode di atas, elemen p merupakan penampung dari elemen b, i, em, dan strong. Bagaimana jika kita tidak ingin menggunakan p untuk menampung seluruh elemen-elemen yang ada? Untuk menampung elemen-elemen secara generik, kita dapat menggunakan elemen div. Elemen div merupakan elemen yang dirancang sebagai penampung dari elemen lainnya, sehingga elemen ini tidak memiliki makna semantik.
Berikut Contoh Kode Nya;

<div class="wrapper">
    <section id="articles">
        <article>
            <!-- Teks -->
        </article>
        <article>
            <!-- Teks -->
        </article>
        <article>
            <!-- Teks -->
        </article>
    </section>
    <aside>
        <nav>
            <!-- Menus -->
        </nav>
    </aside>
</div>

Dapat dilihat bagaimana div.wrapper di atas menampung banyak elemen-elemen blok lainnya. Dengan kode HTML di atas, panjang dari elemen-elemen yang ada di dalam div.wrapper tidak akan pernah lebih panjang dibandingkan dengan div.wrapper itu sendiri. Coba jalankan kode di bawah untuk melihat bagaimana elemen-elemen yang ada di dalam div.wrapper tidak dapat melewati ukuran div.wrapper itu sendiri: berikut contohnya ;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .wrapper {
                background: red;
                color: white;
                height: 600px;
                width: 800px;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue sagittis dictumst in dolor
            scelerisque pid, sociis enim porttitor et, porta porttitor. Tincidunt egestas
            ultricies, scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis dis. Nisi vel porta
            turpis arcu nec diam penatibus, et sit integer enim scelerisque ut amet?
            Nascetur nisi parturient lundium augue?
            </p>
            Odio sagittis cursus et ut ridiculus pulvinar habitasse, elementum et tristique non,
            nisi porttitor magna! Tristique adipiscing penatibus sed nunc. Non pulvinar vut
            porttitor! Odio nisi porttitor sit tincidunt dictumst, massa rhoncus.
            Sociis enim habitasse enim, nunc nascetur, ridiculus, et mus nascetur, augue ultricies
            aliquet mus a adipiscing amet?
            </p>
        </div>
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue sagittis dictumst in dolor
            scelerisque pid, sociis enim porttitor et, porta porttitor. Tincidunt egestas
            ultricies, scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis dis. Nisi vel porta
            turpis arcu nec diam penatibus, et sit integer enim scelerisque ut amet?
            Nascetur nisi parturient lundium augue?
            </p>
    </body>
</html>

Mungkin Segitu Aja Kali Ya Bahasan Saya Tentang Layout Pada Dunia Web.
' ketemu lagi nanti di postingan selanjutnya ya :D'
Jangan Lupa Like Fans Page Facebook Saya Disini  .

Agar Lebih Nyaman Membaca Postingan Saya Tanpa Perlu Koneksi Internet,
Download File Docx Nya Disini
Download File PDF Nya Disini

DAN MOHON MAAF APABLA POSTINGAN SAYA KURANG JELAS

Tweet