Friday, July 10, 2020
Home > Uncategorized > Html element,attribut dan styles

Html element,attribut dan styles

Didalam HTML pasti ada yang namanya element,nah element-element inilah yang ada didalam body karena berupa isi dari dokumen

yuk langsung aja ke scriptnya :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>
<i>Text ini miring </i>
<br>
<b>Text ini tebal<b>

</body>
</html>

silahkan copas script diatas agar lebih tau untuk mempraktekannya

kemudian attribut sendiri contohnya untuk menampilkan gambar dan mengirim link ke page berikutnya.

Contohnya gimana??silahkan simak gambar dibawah ini

Saya membuat sebuah folder yang namanya coba kemudian didalam folder ada 2 file dengan nama yang berbeda dan ektensinya sama (.html)

dan ini script file page1.html

<!DOCTYPE html>
<html>
<body>
  <h1>Hai selamat datang ini adalah page 1</h1>
  <h1>My First Heading</h1>
    <p>My first paragraph.</p>  
      <a href="page2.html">Ayok ke page 2</a>
</body>
</html>

dan untuk file page2.html isi scriptnya seperti ini

<!DOCTYPE html>
<html>
<body>
  <h1>Hai selamat datang anda berada di page 2</h1>
  <h1>My First Heading</h1>
    <p>My first paragraph.</p>  
      <a href="page2.html">Kembali ke page 1</a>
</body>
</html>

silahkan contohin script diatas kemudian kalian buka dengan web browser(google chrome).

Nah untuk fungsi styles ini berguna mengubah warna text,memberi ukuran sesuai selera,memberi posisi text,berikut contoh scriptnya

<!DOCTYPE html>
<html>
<body>
  <h1>Hai selamat datang ini adalah page 1</h1>
  <h1>My First Heading</h1>
    <p style="text-align: center;">My first paragraph.</p>  
      <a href="page2.html">Ayok ke page 2</a>
      <p style="font-size: small;">Hello word</p>
      <p style="color:red">brooww</p>
</body>
</html>

Masih banyak lagi tag-tag kita perlu ketahui tapi sampai disini dulu artikelnya.

Oke dicoba dulu jika ada yang kurang dimengerti kalian bisa tanya-tanya di kolom komentar yang telah saya sediain

 

Jangan lupa subscribe agar kalian dapet notif dari kami dan share jika artikel ini bermanfaat

Good byee..

 

Leave a Reply

Your email address will not be published. Required fields are marked *