Friday, October 28, 2016

BELAJAR HTML

Element HTML

Asalamualakum
Kemarin kita bahas struktur html udah pada paham kan klo belom paham anggap aja udah hehehe
Sekarang saya akan menerangkan tentang  elemen-elemen pada html
Format document  pada Html terdiri dari:

<h1>................</h1>

<br>

<p>…..</p>

<hr>

<pre>………….</pre>

<blcokquote> .... </blockquote>


Yang pertama kita bahas...

<h1> adalah   tag heading untuk  biasanya di gunkan untuk  menandai judul dalam web

<h2> adalah   tag heading untuk  biasanya di gunkan untuk  menandai judul dalam artikel web

<h3> adalah   tag heading untuk  biasanya di gunkan untuk  menandai sub judul atau penjelasan judul dalam web
<h4> adalah   tag heading untuk  biasanya di gunkan untuk  menandai artikel judul terkait  dalam web

<h5> adalah   tag heading untuk  biasanya di gunkan untuk  menandai nama komentar dalam web

<h6> adalah   tag heading untuk  biasanya di gunkan untuk  footer web

Saya juga tidak begitu paham biasanya saya hanya sampai di <h1> sampe <h3> hehehee
Ok dari pada kita pusing dengan penjelasan di atas mending langsung praktek saja

buka notepad atau notepad++ lalu tulis script di bawah ini!

<html>
<head><title>element html</title></head>
<body>

<h1> ini adalah halaman 1</h1>

<h2> ini adalah halaman 2</h2>

<h3> ini adalah halaman 3</h3>

<h4> ini adalah halaman 4</h4>

<h5> ini adalah halaman 5</h5>

<h6> ini adalah halaman 6</h6>
</body>
</html>

Simpan dengan nama element01.html
Hasilnya seperti gambar berikut!














<h1> adalah judul dari artikel web kita
Ok selanjutnya adalah element  <br>

Element ini adalah element untuk membuat garis baru pada kalimat di web html kita
Element <br> tidak perlu menggunakan </br> Karena bias langsung di ekseskusi

Contoh scriptnya adalah!

<html>
<head><title>element html</title></head>
<body>

ini adalah web html yang tidak menggunakan br
karena tidak menggunakan br ini tidak ada garis baru.

<br>ini adalah text menggunakan br<br> karena menggunakan br<br> ini garis baru

</body>
</html>

Simpan dengan nama element02.html
Hasilnya seperti gambar berikut!















Pada baris pertama pada script di atas kalimat tidak menjadi garis baru walaupun di script di garis baru beda dengan script yang menggunakan “<br>” walpun kalimat memanjang tanpa ada enter untuk garis baru akan di eksejusi menjadi garis baru di html.
Semoga mengerti.

1.       Selanjutnya element <p>
Element “<p>” adalah element untuk memulai faragraf baru pada html
Suatu blog atau web informasi sudah pasti mengunakan banyak kalimat dan paragraph nah html membuat element ”<p>” untuk mempermudah membaut tulisan lebih mudah di pahami
Contoh  script html elemen <p>

Contoh 1..

<html>
<head><title>element html</title></head>
<body>
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru

faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru

</body>
</html>

Simpan dengan nama element03.htm
Hasilnya seperti gambar berikut!














Pada contoh ini kalimat  tidak ada paragrafnya karena tidak menggunakan elemen “<p>”
Coba dengan contoh yang menggunakan elemen “<p>”

<html>
<head><title>element html</title></head>
<body>
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
<p>
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf baru
faragraf baru faragraf baru faragraf bar
</body>
</html>

Simpan dengan nama element04.html
Hasilnya seperti gambar berikut!













denagan menggunakan “<p>”  akan ada jarak untuk paragraph space dibawah lihat perbedaan dengan contoh 1 dan contoh 2

Klik NEXT untuk melanjutkan ke <hr> dll


No comments:

Post a Comment