Membuat Box Di HTML

Membuat Kotak Kode Script HTML
Caranya, klik mode HTML, lalu masukkan kode berikut ini:
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align:
left;">
Kode Script Anda Di Sini
</div>
Lalu klik lagi mode Compose. Hasilnya akan seperti ini:
Kode Script Anda Di Sini
Kode kotak HTML lainnya:
<div align="left">
<textarea cols="70" name="code" rows="6">
KODE HTML ANDA DI SINI
</textarea>
Cara Lainnya
Membuat Box Dengan Tag Div
Cara Membuat Box Warna

Untuk membuat sebuah box warna, kita bisa menggunakan tag <div>...</div> pada HTML. Dan kita coba
menggunakan tipe Selector ID.
Tulis tag DIV dengan notepad dibawah ini pada file HTML :
<div class=”box1”></div>
Tulis perintah berikut pada file CSS dengan notepad seperti di bawah ini :
.box1 {
width: 300px;
height: 300px;
background: red;
}
Setelah kamu buat seperti itu coba buka pada browser kesayangan kamu. Maka hasilnya akan
seperti ini :
Belajar Membuat Jarak Margin dan Padding CSS
Belajar Margin
Margin adalah sebuah property yang bisa digunakan untuk memberikan jarak antar masing-masing tag
HTML.
Sebagai contohnya, kita akan membuat dua objek kotak yang memiliki jarak antara objek kotak satu
dengan yang lainnya dengan menggunakan tag <div>...</div>. Tulis script HTML dibawah ini pada file
HTML :
<body>
<div class="box"></div>
<div class="box"></div>
</body>
Sekarang, silahkan tuliskan perintah di bawah ini pada file CSS :

.box {
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
Setelah itu, simpan dan jalankan pada web browser Mozila Firefox. Maka hasilnya masing-
masing objek kotak akan memiliki jarak 10 piksel seperti gambar dibawah ini :
Property Margin ini kita bisa menentukan dari sudut mana jarak yang ingin kita tentukan. Jarak di bagian
atas, bawah, kanan, ataupun kiri. Dengan menggunakan properti di bawah ini :
Margin-left: 10px;
Margin-right: 10px;
Margin-top: 10px;
Margin-bottom: 10px;
Belajar Padding
Nah, kita sudah bisa membuat jarak antara objek kotak satu dengan objek kotak yang lainnya. Namun
bagaimana cara membuat jarak antara saat sebuah objek teks berada di dalam box.
Untuk menentukan objek teks memiliki jarak dengan tepi pada objek kotak. Maka kita bisa
menggunakan properti padding. Seperti apa contohnya. Silahkan tulis tag <div> pada file HTML kita
seperti di bawah ini :
<div class="box">Hallo, saya adalah Text</div>

Kemudian, silahkan tuliskan script CSS elemen berikut pada file CSS kita.
.box {
width: 100px;
background: red;
margin: 10px;
padding: 20px;
}
Silahkan simpan dan jalankan dengan menggunakan Mozila Firefox. Maka hasilnya akan seperti pada
gambar di bawah ini :
Sama halnya dengan property Margin, property Padding ini kita bisa menentukan dari sudut mana jarak
yang ingin kita tentukan. Jarak di bagian atas-kah, bawah-kah, kanan, atau kiri.
Padding: left;
Padding: right;
Padding: top;
Padding: bottom;
Dengan menggunakan property Margin dan Padding maka tampilan pada halaman website kita akan
menjadi semaki rapih.
Membuat Box Model dengan DIV

Perhatikan gambar ilustrasi dari content, border, margin dan padding pada box model berikut ini:
Dan berikut ini penjelasan beberapa properti yang digunakan untuk membuat box model dengan div :
1. width
Adalah properti CSS yang digunakan untuk mengatur lebar sebuah box model. Nilai properti ini lazim
dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS width pada box model :
1. div {
2. width: 300px;
3. }
2. height
Adalah properti CSS yang digunakan untuk mengatur tinggi sebuah box model. Nilai properti ini juga
lazim dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS height pada box model :
1. div {
2. height: 300px;
3. }
3. min-height
Adalah properti CSS yang digunakan untuk mengatur tinggi minimum sebuah box model. Biasanya kita
gunakan ini untuk menjaga tampilan agar tetap proporsional tidak terpengaruh dari tinggi isi halaman.
Nilai properti min-height dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS min-height pada box model :
1. div {
2. min-height: 300px;
3. }
4. max-height
Adalah properti CSS yang digunakan untuk mengatur tinggi maksimal sebuah box model. Biasanya kita
gunakan ini untuk menjaga tampilan agar tetap proporsional tidak melebihi ukuran yang ditetapkan.
Nilai properti max-height juga dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS max-height pada box model :
1. div {
2. min-height: 300px;
3. }
5. border
Adalah properti CSS yang digunakan untuk menetapkan border sebuah box-model. Dalam mengatur
border kita menetapkan beberapa nilai berikut :
 ketebalan garis border, dengan satuan px misalnya 1px. style

 garis border, misalnya solid (garis penuh), dotted (titik-titik) atau dashed (strip-strip)
 warna garis border, misalnya red, blue atau #ff0000.
Contoh penggunaan CSS border pada box model :
1. div {
2. border: 1px solid #fa5698;
3. }
6. margin
Ada properti CSS yang digunakan untuk mengatur jarak box model terhadap box model atau elemen lain
disamping kiri, kanan atau sebelah atas atau bawah. Urutan nilai margin adalah atas, kanan, bawah dan
kiri.
Jadi jika diset "10px 2px 5px 3px" artinya :
 margin atas = 10px

 margin kanan = 2px
 margin bawah = 5px
 margin kiri = 3px
Contoh penggunaan CSS margin pada box model:
1. div {
2. margin : 10px 2px 5px 3px;
3. }
Selain itu kita juga bisa menetapkan margin khusus untuk bagian tertentu saja misalnya atas seperti
contoh berikut ini :
1. div {
2. margin-top : 10px;
3. }
Jika nilai margin sama untuk tiap bagian, cukup ditulis sekali saja seperti ini :
1. div {
2. margin : 10px;
3. }
7. padding
Ada properti CSS yang digunakan untuk mengatur jarak antara box model dengan isi. Urutan nilai dari
padding sama dengan margin, yaitu atas, kanan, bawah dan kiri.
Contoh penggunaan CSS padding pada box model:
1. div {
2. padding : 2px 2px 2px 2px;
3. }
Selain itu kita juga bisa menetapkan padding khusus untuk bagian tertentu saja misalnya atas seperti
contoh berikut ini :
1. div {
2. padding-top : 1px;
3. }
Jika nilai padding sama untuk tiap bagian seperti contoh diatas, cukup ditulis sekali saja seperti ini :
1. div {
2. padding : 2px;
3. }
Memasang link dengan gambar dengan tag <img>

Selain menggunakan text, link juga bisa dibuat dengan menggunakan gambar. Hal ini biasa dipakai saat
akan menampilkan gambar besar melalui link thumbnail gambar yang berukuran lebih kecil. Atau juga
bisa dipakai saat menampilkan preview post dalam bagian artikel terkait.
Untuk menampilkan link dengan gambar cukup dilakukan dengan meletakkan tag <img> diantara tag
<a>...</a>. Semua atribut yang dipakai pada tag <img> juga bekerja saat dipakai untuk link.
Contoh pemasangan link menggunakan gambar:
<a href="tentang-kami.html" target="_blank" id="link1"><img

src="images/profil.jpg"></a>
Beberapa atribut dalam pemasangan tag <img> :
Atribut SRC
Menunjukkan URL dari file gambar yang akan ditampilkan. Ini merupakan atribut wajib dalam
pemasangan gambar HTML. Jika URL dari file gambar salah atau tidak ditemukan maka browser
otomatis menampilkan gambar "broken-image" yang berupa foto terpecah.
Ada beberapa cara menuliskan URL file image, yaitu:
 Menulis nama file saja, ini dilakukan jika letak file gambar berada satu folder dengan file HTML.
Contoh:
<img src="profil.jpg">
 Menulis nama folder dan nama file, ini dilakukan jika file gambar terletak di folder yang lain.
Contoh:
<img src="/images/profil.jpg">
 Menulis alamat website, lokasi folder dan nama file, ini dilakukan jika file gambar berada disitus
lain. Contoh:
<img src="http://nulis-ilmu.blogspot.com/images/profil.jpg">
Atribut ALT
Digunakan sebagai alternatif text manakala image tidak ditampilkan atau gagal ditampilkan. Teks pada
atribut ALT sebaiknya merupakan deskripsi dari file gambar yang akan ditampilkan. Contoh penggunaan
atribut ALT pada tag <img> :
<img src="profil.jpg" alt="foto-profil">
Atribut WIDTH dan HEIGHT

Digunakan untuk mengatur lebar dan tinggi gambar yang akan ditampilkan. Nilai dari atribut WIDTH dan
HEIGHT berupa angka tanpa disertai satuan px(pixel) sebagaimana ukuran gambar. Aspek rasio WIDTH
dan HEIGHT tidak harus sama dengan ukuran gambar asli, namun untuk menjaga proporsi tampilan
sebaiknya tidak meleset terlalu jauh.
Contoh penggunaan atribut WIDTH dan HEIGHT pada tag <img> :
<img src="profil.jpg" alt="foto-profil" width="150" height="150">
Atribut BORDER
Adalah atribut untuk membuat border atau bingkai dari gambar yang akan ditampilkan. Ukuran border
disini menggunakan satuan, misalnya: px (pixel). Contoh penggunaan atribut BORDER pada tag <img> :
<img src="profil.jpg" alt="foto-profil" width="150" height="150"
border="5px">
Menggunakan STYLE pada tag <img>

Sebenarnya ada cara alternatif yang lebih dianjurkan untuk mengatur setting width dan height gambar
pada HTML, yaitu dengan metode style. Mengapa demikian, karena dengan metode ini kita bisa
mencegah akses pengaturan gambar melalui style luar (misal=CSS) yang tidak kita sadari. Untuk nilai dari
parameter width dan height pada style harus menggunakan satuan, misal: px (pixel). Selain itu mengatur
boder bisa juga dilakukan dengan metode style.
Contoh mengatur width, height dan border gambar pada HTML dengan metode style :
<img src="profil.jpg" alt="foto-profil"
style="width:50px;height:50px;border:1px solid;">
Contoh script lengkap untuk menampilkan gambar pada website :

<!DOCTYPE html>
<html>
<head>
<title>Belajar Menampilkan gambar pada HTML</title>
<body>
Ini contoh tampilan gambar dengan <b>atribut</b> width, height dan
border<br/>
<img src="profil.jpg" alt="foto-profil" width="150" height="150"
border="5px"><br/>
Ini contoh tampilan gambar dengan <b>style</b> width, height dan border<br/>
<img src="profil.jpg" alt="foto-profil"
style="width:150px;height:150px;border:5px solid;"><br/>
</body>
</html>
Tampilan script diatas pada browser :
Cara Membuat Scroll Box
<div
style="padding:3px;overflow:auto;width:auto;height:200px;border:
1px solid grey" >
Kontent Scroll Box
</div>
Keterangan:
*) width = lebar
*) height = tinggi
Cara Membuat Tulisan berjalan dengan html
Kode untuk membuat text bergerak bolak-balik kekanan-kekiri.

<marquee behavior="alternate">Tulisan Disini</marquee>
Kode untuk membuat tulisan berjalan
<marquee>ISI TULISAN YANG BERJALAN</marquee>
Untuk mempercantik, kita bisa mengubah warna, jenis huruf, dan ukuran teks:
Berikut bermacam kode Marquee yang bisa anda pakai:
style="font-family: Arial; font-size:20px; color:#00FF66;"
Arial adalah jenis huruf

20px adalah ukuran huruf
#00FF66 adalah warna huruf
Silakan lihat contoh berikut untuk membuat kodenya.
<marquee bgcolor="red" style="font-family: Arial; font-size:20px;

color:#00FF66;">WARNA BACKGROUND UNTUK TEKS MARQUEE</marquee>
Kode untuk memberikan warna background pada jalur teks.
Contoh kode, sbb:
<marquee bgcolor="blue">CONTOH BACKGROUND AREA TEKS</marquee>
Silakan ganti kode warnanya.
Kode scrolldelay, untuk mengatur kecepatan/waktu jeda

(milidetik)
Contoh kodenya adalah:
<marquee scrolldelay="500">JEDA TEKS BERJALAN ADALAH 0,50 DETIK</marquee>
Anda bisa ganti angka 500
Kode untuk mengatur kecepatan teks berjalan
Contoh kode:
<marquee scrollamount="10">INI PADA KECEPATAN TEKS BERJALAN 10</marquee>
Silakan ganti angka 10. Semakin besar angka semakin cepat teks berjalan.
Text Berjalan Kiri Kanan
<marquee behavior="alternate" bgcolor="#FFB6C1" scrollamount="5"

loop="10">Kiri Kanan</marquee>
Kode Text Berjalan Turun/Naik
<marquee behavior="scroll" direction="down" bgcolor="#00da000" loop="-2">Text

Berjalan Turun.<br/>Selamat Datang,<br/> Semoga Menyenangkan.</marquee>
Untuk text berjalan naik, ganti kata 'down' menjadi 'up'.

Kode untuk mengatur arah teks bergerak (kiri, kanan, atas,
bawah)
Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan

teks.
Contoh kode adalah sbb:
<marquee direction="left">TEKS BERJALAN KE KIRI</marquee>
Ganti left sesuai yang diinginkan.
KODE HTML
Alinea
<p align="center">Membuat alinea di halaman site. Diarea ini kamu masukkan

content site kamu.</p>
Hasil :
Membuat alinea di halaman site. Diarea ini kamu masukkan content site kamu.
note: Align "center" bisa diubah menjadi "left" atau "right".
Untuk alinea dengan background warna :
<p align="right" style="background: #5F9EA0">Alinea dengan background

warna</p>
Break
Digunakan untuk memberi jarak/spasi/baris baru.
Tanpa kode 'break' : Midi. Games. Aplikasi. HP.
Dengan kode 'break' : <br/>Midi.<br/>Games.<br/>Aplikasi.<br/>HP.<br/>
Hasil :
Tanpa kode 'break' : Midi. Games. Aplikasi. HP.
Dengan kode 'break' :
Midi.
Games.
Aplikasi.
HP.
Input Link
<a href="http://alinz.wen.ru">HOME</a>
Input Image
<img src="http://alinz.tvn.hu/gbz/smilies/dor.gif">
Input Image dengan URL/Link
<a href="http://alinz.tvn.hu/browserinfo.php"><img
src="http://alinz.tvn.hu/gbz/smilies/senam.gif"></a>
Heading
<h1>HEADING</h1> <h2>HEADING</h2> <h5>HEADING</h5>
Hasil :
HEADING
HEADING
HEADING
Daftar Index Bullet
<ul><li>MP3</li><li>Midi</li><li>Wallpaper</li><li>Games</li></ul>
Hasil :
 MP3
 Midi
 Wallpaper
 Games
Daftar Index Angka
<ol><li>MP3</li><li>Midi</li><li>Wallpaper</li><li>Games</li></ol>
Hasil :
1. MP3
2. Midi
3. Wallpaper
4. Games
Daftar Index Bullet 2
<il><li>MP3</li><li>Midi</li><li>Wallpaper</li><li>Games</li></il>
Hasil :
 MP3
 Midi
 Wallpaper
 Games
Garis Pembatas
<hr></hr>
<hr size="1"></hr>
<hr size="3"></hr>
<hr size="5"></hr>
Kode HTML untuk membuat gambar berjalan dari arah kanan ke kiri dengan tinggi
area 132px, lebar area 100% di atas background putih adalah sebagai berikut :
<marquee bgcolor="#ffffff" direction="left" height="132px" scrollamount="5"

width="100%"> <img src="URL Gambar-1" /> </marquee>
Kode HTML untuk membuat gambar berjalan dari arah kiri ke kanan dengan tinggi
area 132px, lebar area 100% di atas background kuning adalah sebagai berikut
:
<marquee bgcolor="#ffff00" direction="right" height="132px" scrollamount="5"

width="100%"> <img src="URL Gambar-2" /> </marquee>
Kode HTML untuk membuat gambar berjalan bolak-balik dari kanan ke kiri dengan
tinggi area 132px, lebar area 100% di atas background biru adalah sebagai
berikut:
<marquee behavior="alternate" bgcolor="#0000ff" height="132px"

scrollamount="5" width="100%"> <img src="URL Gambar-3" /> </marquee>
Kode HTML untuk membuat gambar berjalan dari kanan ke kiri dimana gambar
tersebut merupakan sebuah life link yang tertuju pada suatu URL. Gambar
tersebut akan berhenti setiap kali mouse didekatkan dan akan kembali bergerak
setelah mouse menjauh.
<marquee align="left" bgcolor="#c9fbd3" direction="left" height="132"

onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5"
width="100%"> <a href="Link URL-1"><img src="URL Gambar-1" /></a> <a
href="Link URL-2"><img src="URL Gambar-2" /></a> <a href="Link URL-
3"><img src="URL Gambar-3" /></a> </marquee>
Catatan Penting : #FFFF00 adalah kode keksadesimal untuk warna kuning,

#C9FBD3 adalah kode heksadesimal untuk warna hijau muda, #0000FF adalah kode
heksadesimal untuk warna biru dan seterusnya. Lebih lengkapnya dapat dilihat
pada artikel sebelumnya mengenai kode warna. Ganti semua URL Gambar (URL
Gambar-1, URL Gambar-2, dan URL Gambar-3) dengan URL gambar Anda sendiri.
Ganti semua Link URL (Link URL-1, Link URL-2, dan Link URL-3) sesuai
kebutuhan.

<marquee behavior="alternate" direction="left" scrollamount="3"

onmouseover="stop();" onmouseout="start();">
<span style="padding: 0px;">
<a href="Link_1" target="_blank" style="text-decoration:none;outline:none;"

title="Title_1">
<img src="Gambar_1" border="0">
</a>
</span>

title="Title_2">
</a>
</span>

title="Title_3">
</a>
</span>
</marquee>

catatan :
1. Ganti Link_1, Link_2, dan Link_3 dengan 'link' Anda.

2. Ganti Title_1, Title_2, dan Title_3 dengan 'Title' Anda.
3. Ganti Gambar_1, Gambar_2, dan Gambar_3 dengan 'File Gambar' Anda.
4. Pada attribute behavior, Anda dapat merubahnya dengan 'scroll atau
slide'.
5. Pada attribute direction, Anda dapat merubahnya dengan 'right, down',
atau up'.
6. Pada attribute scrollamount, Anda dapat merubah value'nya dengan angka
yang Anda inginkan.
Membuat menu bertingkat
The HTML Structure

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
First up we’ll need to create the HTML structure for our CSS menu. We’ll use HTML5 to house
the navigation menu in a <nav> element, then add the primary navigation links in a simple
unordered list.
<nav>
<ul>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">User Experience</a></li>
</ul>
</li>
</ul>
</nav>
The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each
one being a complete unordered list inserted within the <li> of its parent menu option.
<nav>
<ul>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">User Experience</a></li>
</ul>
</li>
</ul>
</nav>
The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. These
links are placed into another unordered list and inserted into the “Web Design” <li>.
So far this leaves us with a neat layout of links with the sub-menus having a clear relation to
their parents.
The CSS Styling

nav ul ul {
display: none;
}
nav ul li:hover > ul {

display: block;
}
Let’s begin the CSS by getting the basic dropdown functionality working. With CSS specificity
and advanced selectors we can target individual elements buried deep in the HTML structure
without the need for extra IDs or classes. First hide the sub menus by targeting any UL’s within a
UL with the display:none; declaration. In order to make these menus reappear they need to be
converted back to block elements on hover of the LI. The > child selector makes sure only the
child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
We can then start to style up the main navigation menu with the help of CSS3 properties such as
gradients, box shadows and border radius. Adding position:relative; will allow us to
absolutely position the sub menus according to this main nav bar, then display:inline-table
will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the
subsequent list items without the use of overflow:hidden, which would hide the sub menus and
prevent them from appearing.
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975
40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975
40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
The individual menu items are then styled up with CSS rules added to the <li> and the nested
anchor. In the browser this will make the link change to a blue gradient background and white
text.
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
The main navigation bar is now all styled up, but the sub menus still need some work. They are
currently inheriting styles from their parent elements, so a change of background and the
removal of the border-radius and padding fixes their appearance. To make sure they fly out
underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the
bottom).
The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed
vertically with thin borders separating each one. A quick hover effect then darkens the
background to act as a visual cue.
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all
the sub-menu styling already, so all they need is to be positioned absolutely to the right
(left:100%) of the relative position of the parent <li>.

Membuat Box Di HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Box Di HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat Kotak Kode Script HTML

Caranya, klik mode HTML, lalu masukkan kode berikut ini:

Lalu klik lagi mode Compose. Hasilnya akan seperti ini:

Kode Script Anda Di Sini

Kode kotak HTML lainnya:

Membuat Box Dengan Tag Div

Cara Membuat Box Warna

Sekarang, silahkan tuliskan perintah di bawah ini pada file CSS :

<div class="box">Hallo, saya adalah Text</div>

Membuat Box Model dengan DIV

 ketebalan garis border, dengan satuan px misalnya 1px. style

Contoh penggunaan CSS border pada box model :

Jadi jika diset "10px 2px 5px 3px" artinya :

 margin atas = 10px

Contoh penggunaan CSS margin pada box model:

Contoh penggunaan CSS padding pada box model:

Memasang link dengan gambar dengan tag <img>

<a href="tentang-kami.html" target="_blank" id="link1"><img

<img src="profil.jpg" alt="foto-profil">

Atribut WIDTH dan HEIGHT

Contoh penggunaan atribut WIDTH dan HEIGHT pada tag <img> :

<img src="profil.jpg" alt="foto-profil" width="150" height="150">

Menggunakan STYLE pada tag <img>

Contoh script lengkap untuk menampilkan gambar pada website :

Cara Membuat Scroll Box

Cara Membuat Tulisan berjalan dengan html

Kode untuk membuat text bergerak bolak-balik kekanan-kekiri.

Kode untuk membuat tulisan berjalan

<marquee>ISI TULISAN YANG BERJALAN</marquee>

style="font-family: Arial; font-size:20px; color:#00FF66;"

Arial adalah jenis huruf

Silakan lihat contoh berikut untuk membuat kodenya.

<marquee bgcolor="red" style="font-family: Arial; font-size:20px;

Kode untuk memberikan warna background pada jalur teks.

Contoh kode, sbb:

<marquee bgcolor="blue">CONTOH BACKGROUND AREA TEKS</marquee>

Silakan ganti kode warnanya.

Kode scrolldelay, untuk mengatur kecepatan/waktu jeda

Contoh kodenya adalah:

<marquee scrolldelay="500">JEDA TEKS BERJALAN ADALAH 0,50 DETIK</marquee>

Anda bisa ganti angka 500

Kode untuk mengatur kecepatan teks berjalan

<marquee scrollamount="10">INI PADA KECEPATAN TEKS BERJALAN 10</marquee>

Text Berjalan Kiri Kanan

<marquee behavior="alternate" bgcolor="#FFB6C1" scrollamount="5"

Kode Text Berjalan Turun/Naik

<marquee behavior="scroll" direction="down" bgcolor="#00da000" loop="-2">Text

Untuk text berjalan naik, ganti kata 'down' menjadi 'up'.

Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan

Contoh kode adalah sbb:

<marquee direction="left">TEKS BERJALAN KE KIRI</marquee>

Ganti left sesuai yang diinginkan.

<p align="center">Membuat alinea di halaman site. Diarea ini kamu masukkan

note: Align "center" bisa diubah menjadi "left" atau "right".

Untuk alinea dengan background warna :

<p align="right" style="background: #5F9EA0">Alinea dengan background

Digunakan untuk memberi jarak/spasi/baris baru.

Tanpa kode 'break' : Midi. Games. Aplikasi. HP.

Dengan kode 'break' : <br/>Midi.<br/>Games.<br/>Aplikasi.<br/>HP.<br/>

Tanpa kode 'break' : Midi. Games. Aplikasi. HP.

Dengan kode 'break' :

Input Image dengan URL/Link

<h1>HEADING</h1> <h2>HEADING</h2> <h5>HEADING</h5>

Daftar Index Bullet