esjeyuk

Blog Esjeyuk ini dibuat untuk berbagi informasi tentang blog tentang SEO,smartphone dan Tutorial lainya tujuan dari pembuatan blog ini adalah agar pembaca bisa lebih mengerti tentang SEO,Blogger dan tutorial lainnya

» » Modul 2 Pure HTML (Pelatihan Es Jeyuk Team)

Modul 2 Pure HTML (Pelatihan Es Jeyuk Team)

Oleh

TAG BODY DAN ATRIBUTNYA
Atribut ini digunakan untuk mengeset gambar untuk digunakan sebagai latar belakang pada sebuah halaman. Kita cukup menggunakan atribut berikut untuk memilih sebuah gambar untuk dijadikan latar belakang. Cara penulisannya adalah sebagi berikut:
<body background="url gambar/lokasi penyimpanan gambar">
Contoh:
<html>
<head>
<title>Judul Dokumen</title>
</head>
<body background="images/bg.jpg">
Mengganti background dokumen HTML dgn gambar
</body>
</html>
Bgcolor menentukan warna latar belakang dari halaman web. Misalnya, untuk mengatur warna latar belakang halaman agar berwarna merah, kita dapat menggunakan
tag berikut :
<body bgcolor="#222222?” >
3. TEXT
Atribut ini berguna untuk menentukan warna standar dari teks yang ada pada halaman tersebut.
4. LINK
Atribut ini berguna untuk menentukan warna standar dari tautan (link) yang ada pada halaman tersebut sebelum di-klik.
5. VLINK
Berguna untuk menentukan warna standar dari tautan (link) yang ada pada halaman tersebut ketika telah di-klik.
6. ALINK
Berguna untuk menentukan warna standar dari tautan (link) pada halaman tersebut ketika kursor berada diatasnya.

7. MARGIN
TOPMARGIN dan LEFTMARGIN digunakan untuk menentukan jarak atas dan tepian pada halaman. Tag ini akan terbaca pada browser Internet Explorer, sedangkan untuk browser Netscape tag yang digunakan adalah MARGINHEIGHT dan MARGINWIDTH.
8. onLoad
Tag onLoad digunakan untuk menjalankan suatu perintah ketika suatu halaman html dibuka. Contoh: <body onload="alert('Selamat')">
9. onUnload Tag
onUnLoad digunakan untuk menjalankan suatu perintah ketika suatu halaman html tutup.
Contoh: <body onUnload="alert('Selamat Tinggal')">


Lebih dalam dengan HTML yang Sesungguhnya
MEMBUAT TEKS FORMAT JUDUL
Teks format judul biasa digunakan untuk judul postingan/artikel dalam halaman web. contohnya seperti gambar dibawah ini.


Untuk membuat teks format judul bisa menggunakan tag heading. Tag heading terdiri dari beberapa level, untuk lebih jelasnya lihat contoh di bawah ini:

<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>


Berikut adalah hasil tampilan dari code di atas:


MENGATUR FONT PADA HALAMAN HTML


Didalam dokumen html kita bisa mengatur format font seperti mengatur jenis huruf, warna huruf, size/ukuran huruf dll. Untuk mengatur format font dalam dokumen html caranya dengan menggunakan tag <font>...</font>.
Dibawah ini adalah contoh penggunaan tag font.

<html>
<head>
<title> Format Font </title>
</head>
<body >
<font size="5pt" face="Arial" color="red">
Bentuk Text arial berwarna merah
</font>
</body>
</html>

Dari code diatas terdapat tag <font size=”5pt” face=”arial” color=”red”>, itu artinya kita mengatur font pada dokumen html dengan ukuran 5 pt, dengan jenis font arial berwarna merah.


MENAMPILKAN GAMBAR PADA DOKUMEN HTML
Dalam dokumen html kita dapat menampilkan gambar, untuk menampilkan gambar di dokumen html biasanya menggunakan tag <img>. Berikut adalah contoh penggunaan tag <img>.


<html>
<head>
<title>Belajar ambil gambar</title>
</head> <body>
<img src="image.jpg" height="80%" width="20%" alt="Ini gambar "> </body>
</html>

Membuat Text Bold, Italic, Underline, Striketrue, Supersript dan Subscript

<html>
<head>
<title></title>
</head>
<body >
<b>Ini Text Bold</b><br>
<i>Ini Text Italic</i><br>
<u>Ini Text Underline</u><br>
<s>Ini Text Striketrue</s></br>
Text Superscript: X<sup>2</sup><br>
Text Subscript: H<sub>2</sub>O
</body>
</html>

 
Membuat Garis Dalam Dokumen HTML
Tag hr digunakan untuk membuat garis pada dokumen html. Contoh:

<html>
<head>
<title>Membuat Garis</title>
</head> <body>
<h1 align="right">Ini adalah garis</h1>
<hr align="right" width="60%" color="#FF0000"
size="3"> </body>
</html>


Membuat Link

Ada 4 jenis pembuatan link dalam html:
  • Link untuk menghubungkan antar halaman
  • Link untuk menghubungkan ke bagian halaman lain
  • Link untuk menghubungkan ke halaman website lain
  • Link untuk menghubungkan ke alamat email




<html>
<head>
<title>Belajar link</title>
</head> <body>
<a href="http://www.cbs-bogor.net">Menuju CBS Bogor
</a>
</body>
</html>

Membuat Animasi Teks Bergerak



Tag Marquee digunakan untuk membuat animasi teks jalan pada dokumen html.

<html>
<head>
<title>Membuat Animasi Marquee</title>
</head> <body>
<marquee behavior="alternate"
bgcolor="#0099FF">ANIMASI
MARQUEE(ALTERNATE)</marquee><br><br>
<marquee behavior="scroll" bgcolor="#0099FF"
direction="left">ANIMASI MARQUEE(SCROLL)</marquee><br><br>
<marquee behavior="slide" bgcolor="#0099FF" >ANIMASI
MARQUEE(SLIDE)</marquee><br><br>
</body>
</html>

Membuat List

Ada 3 jenis list dalam dokumen html yaitu:
1. Ordered List “<ol>”
Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. list yang ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail.


<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>
Pada Ordered List “<ol>” secara default pengurutan akan diurutkan dengan angka. Jika anda ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan atribut type pada tag <ol>
Contoh: 

Contoh:



<html>

<head>

<title>web saya</title>

</head>

<body>

TUGAS HARI INI ADALAH :

<ol type="A">

<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>
Ketika script di atas di jalankan makan pengurutan list akan berubah, pengurutan akan diurutkan dengan huruf.


2. Unordered List <ul>
Unordered List merupakan pengurutan list dengan menggunakan symbol/bullet. Cara membuatnya sama dengan Ordered List hanya saja tag <ol> diganti dengan tag <ul>.
Contoh:


<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ul>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ul>
</body>
</html>
 
 
3. List tanpa bullet <dl>
Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis dengan pembuatan list dengan tag ol/ul, hanya saja tag <ul> diganti dengan <dl> lalu tag <li> diganti dengan <dd>
Contoh:


html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<dl type=>
<dd>Memasak</dd>
<dd>cuci piring</dd>
<dd>cuci baju</dd>
<dd>mandi</dd>
<dd>sarapan</dd>
<dd>berangkat sekolah</dd>
</dl>
</body>
</html>



Tag : Pelatihan
0 Komentar untuk "Modul 2 Pure HTML (Pelatihan Es Jeyuk Team)"

Komentar yang relevan NO SPAM

Back To Top