Minggu, 21 Maret 2021

Styling Elemen HTML

Sekarang kita akan mencoba melakukan styling terhadap elemen HTML menggunakan Attribute style.

Kita buat terlebih dahulu script dokumen HTML seperti ini :

<!DOCTYPE html>

<html>

<body>

<h1>HELLO WORLD!</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>

</body>

</html>

Hasilnya seperti ini :

HELLO WORLD!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Selanjutnya kita akan merubah warna background page menjadi misalnya warna powderblue. Maka kita akan menggunakan Attrubute style pada elemen <body> seperti ini :

Baca selengkapnya »

Sabtu, 20 Maret 2021

Pengantar CSS

Sebuah dokumen HTML tanpa CSS itu menurut saya ibaratnya sebuah masakan tanpa bumbu, tidak ada variasi rasa yang bisa kita nikmati.

Karena memang betul, apa-apa yang ditampilkan dari elemen HTML adalah konten dasar dari dokumen HTML tersebut. Tidak ada style, layout, pengaturan font, dan sebagainya.

Sekarang anda bisa lihat, misalnya pada dokumen HTML berikut :

<!DOCTYPE html>

< html >

<head>

</head>

<body>

<h1>Hello World!</h1>

<p>

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

</p>

</body>

</html>

Jalankan script tersebut, maka hasilnya akan seperti ini :

Hello World!

Baca selengkapnya »

Minggu, 14 Maret 2021

HTML PARAGRAPH

Elemen <p> digunakan untuk mendefinisikan paragraf didalam dokumen HTML. Dalam penyajiannya, browser secara otomatis akan menambahkan margin sebelum dan sesudah paragraf, sehingga sebuah paragraf selalu di mulai dengan baris baru.

Jadi, saat anda menuliskan elemen paragraf di baris baru, anda sudah tidak perlu lagi menambahkan elemen break line atau tag <br>. Misalnya saat anda ingin menulis 3 buah paragraf seperti ini :

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Saat script tersebut dijalankan maka hasilnya akan seperti ini :

This is a paragraph.

Sekarang kita lihat, bahwa untuk memisahkan baris antar paragraf, tidak perlu lagi kita memasukan elemen break line <br>.

Permasalahan yang kemudian muncul adalah, kita tidak bisa menentukan secara pasti bagaimana HTML akan di tampilkan jika hanya mengandalkan permainan spasi dan baris saja saat penulisan dokumen HTML. Ini karena browser secara otomatis akan membuang ekstra spasi dan baris saat page di tampilkan.

Sekarang mari kita lihat contoh berikut :

<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>

Anda akan melihat ekstra spasi dan baris yang di buat tidak mempengaruhi tampilan saat script dijalankan :

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.

TAG <hr>

Baca selengkapnya »

Jumat, 12 Maret 2021

HTML HEADINGS

Heading merupakan judul ataupun sub judul dalam sebuah dokumen HTML. Dari mulai judul yang paling umum sampai dengan judul yang paling khusus, atau dari mulai yang paling besar sampai dengan judul yang paling kecil.

Didalam HTML, heading di definisikan dengan tag <h1> sampai dengan tag <h6>. Dimana tag <h1> merepresentasikan judul yang paling utama/ paling umum dan tag <h6> menunjukkan judul yang paling khusus/ judul paling kecil.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

Baca selengkapnya »

Kamis, 11 Maret 2021

HTML Attributes

Dengan Atribut, kita bisa menyajikan sebuah elemen HTML menjadi lebih lebih beragam dan lebih fleksibel. Kita bisa menambahkan berbagai informasi kedalam sebuah elemen sehingga browser bisa menyajikan dokumen HTML sesuai dengan keinginan kita.

Jadi apa itu Atribut ?

Jika di kaitkan dengan Elemen HTML, atribut ini adalah merupakan fitur yang akan membentuk karakteristik elemen tersebut. Sehingga sebuah elemen yang sama jika diberikan atribut yang berbeda akan memiliki ciri-ciri khusus antara satu dan lainnya saat di tampilkan oleh browser.

Atau..., merujuk w3schools.com, atribut dijabarkan seperti ini :

Semua Elemen HTML bisa memiliki Atribut
Atribut memberikan informasi tambahan terhadap suatu elemen
Atribut ditulis pada tag pembuka (start tag)
Atribut biasanya terdiri dari nama dan nilainya (name=”value”)

Begini, Misalnya saja kita akan memuat image pada web page dengan elemen <img> dengan script sebagai berikut :

Maka image gambar.jpg akan dimuat oleh browser sesuai dengan ukuran asli file gambar.jpg. Bagaimana kalau kita ingin mengatur agar ukuran image yang dimuat sesuai dengan keinginan kita ?

Baca selengkapnya »

Senin, 08 Maret 2021

ELEMEN-ELEMEN DASAR HTML

Sebuah elemen HTML dibentuk oleh start tag, konten, dan end tag, sehingga segala sesuatu dari mulai Start Tag sampai dengan End Tag disebut sebagai elemen.

Jika digambarkan strukturnya sbb :

<tagname>Content … </tagname>

Contohnya pada elemen HTML yang sudah kita tulis sebelumnya :

<h1>My First Heading</h1>

<p>My First paragraph</p>

Jika dipecah ke dalam sebuah tabel, maka akan nampak seperti ini :

Start tag	Element content	End tag
<h1>	My First Heading	</h1>
<p>	My First paragraph	</p>

Ada juga beberapa elemen yang tidak memiliki konten, seperti misalnya tag line break <br> Elemen seperti ini disebut dengan Empty Element, dan empty element tidak memerlukan End tag.

Nested Element (Elemen bersarang).

Pada dasarnya semua dokumen HTML berisi elemen bersarang. Apa itu elemen bersarang ?

Baca selengkapnya »

Sabtu, 06 Maret 2021

CONTOH DASAR SCRIPT HTML

Sebelumnya kita telah melihat struktur dasar sebuah dokumen HTML, dimana ternyata isi dokumen HTML adalah semua tentang Elemen.

Sekarang saya akan mencoba menuliskan untuk anda contoh-contoh sebagai dasar pemahaman HTML yang akan anda pelajari selanjutnya.

Tentang bagaimana cara menulis, menyimpan, dan menjalankan contoh-contoh script HTML yang akan kita pelajari pada chapter ini, silahkan anda baca kembali chapter sebelumnya disini :

EDITOR HTML

Baiklah, kita coba mengingat kembali struktur HTML yang sudah kita baca pada bagian yang telah lalu.

Baca selengkapnya »

Kamis, 04 Maret 2021

EDITOR HTML

Bagaimana kalau ingin belajar HTML, tools apa yang diperlukan ?

Mungkin ini pertanyaan yang ada dalam benak anda saat anda akan memulai mempelajari HTML, terutama jika anda memang benar-benar awam tentang hal ini.

Jawabnya, Teks editor !!

Ya, benar..., untuk mempelajari HTML tool yang anda perlukan hanyalah sebuah tesk editor. Jika anda pengguna Windows, maka cukup dengan notepad maka anda sudah bisa belajar HTML dari A sampai Z.

Cukup mudah bukan ?!

Memang banyak editor HTML yang lebih profesional, namun untuk pembelajaran disarankan menggunakan teks editor sederhana. Setidak nya ini yang disarankan oleh www.w3schools.com.

Gampangnya, yuk kita praktekan....

Baca selengkapnya »

Selasa, 02 Maret 2021

ELEMEN DAN STRUKTUR DASAR HTML

Untuk membuat sebuah halaman web, maka setidaknya kita harus menguasai HTML. Kenapa saya katakan "setidak nya !" ?, karena memang jika hanya dengan HTML maka halaman web (web page) yang dihasilkannya pun sederhana, hanya tampilan standar saja.

Walaupun begitu, HTML ini mau tidak mau harus di pelajari jika anda ingin menguasai pemrograman berbasis web atau web programming.

Lalu apa itu HTML ?

Menurut w3schools.com, HTML adalah sebagai berikut :

Kepanjangan dari Hyper Text Markup Language
Merupakan standar bahasa markup dalam pembuatan halaman web
HTML menggambarkan struktur dari sebuah halaman web
Berisi kumpulan Elemen yang mengatur bagaimana suatu kontent akan di tampilkan oleh Browser. Elemen HTML juga akan menandai setiap konten, sehingga konten akan di tampilkan sesuai dengan tujuannya, seperti misalnya konten ini berfungsi sebagai sebuah heading, yang ini paragraf, ini sebuah link, dan lain sebagainya.

Baca selengkapnya »

Kelas Tutorial

Halaman

Minggu, 21 Maret 2021

Styling Elemen HTML

HELLO WORLD!

Sabtu, 20 Maret 2021

Pengantar CSS

Hello World!

Minggu, 14 Maret 2021

HTML PARAGRAPH

TAG <hr>

Jumat, 12 Maret 2021

HTML HEADINGS

Kamis, 11 Maret 2021

HTML Attributes

Senin, 08 Maret 2021

ELEMEN-ELEMEN DASAR HTML

Nested Element (Elemen bersarang).

Sabtu, 06 Maret 2021

CONTOH DASAR SCRIPT HTML

Kamis, 04 Maret 2021

EDITOR HTML

Selasa, 02 Maret 2021

ELEMEN DAN STRUKTUR DASAR HTML