Belajar Dokument HTML (Hypertext Markup Language)

42 Tampilan
0
Belajar HTML

Belajar Dokumen HTML – Pada artikel ini kita akan belajar lebih dalam lagi tentang HTML. Setelah membaca artikel sebelumnya yang membahas tentang Belajar Struktur HTML. Kali ini kita akan belajar step by step supaya kita memahami betul dasar dari pembuatan web.

Membuat Teks Format Judul

Teks format judul biasa digunakan untuk judul postingan/artikel dalam halaman web. Untuk membuat teks format judul bisa menggunakan tag <heading>. Tag <heading> terdiri dari beberapa level, untuk lebih jelasnya bisa lihat contoh dibawah ini :

<html>
<head>
<title>Membuat Teks Format Judul</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 :

Membuat Teks Format Judul

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Mengatur Font Pada Halaman

Didalam dokumen HTML kita bisa mengatur format font seperti mengatur jenis huruf, warna huruf, size huruf dll. Untuk mengatur format font dalam dokumen HTML caranya dengan menggunakan tag <font>…..</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 5pt, dengan jenis font Arial berwarna merah, dan hasilnya seperti tulisan yang ada dibawah ini.

Format Font Bentuk Text 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>.

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

Dari code diatas terdapat tag <img src=”image.jpg” height=”80%” width=”20%” alt=”Ini gambar”>, itu artinya kita menampilkan gambar dengan ukuran tingginya 80% dan lebarnya 20% dengan keterangan “Ini gambar”.

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

<html> 
<head> 
<title>Tag 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>

Berikut adalah hasil tampilan dari code di atas :

Tag Title Ini Text Bold
Ini Text Italic
Ini Text Underline
Ini Text Striketrue
Text Superscript: X2
Text Subscript: H2O

Membuat Garis Dalam Dokumen HTML

Tag <hr> digunakan untuk membuat garis pada dokumen HTML.

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

Berikut adalah hasil tampilan dari code di atas :

Membuat Garis

Ini adalah garis


Membuat Link

Ada beberapa jenis pembuatan link dalam HTML:

  • Link untuk menghubungkan antar halaman
  • Link untuk menghubungkan ke sosial media
  • Link untuk menghubungkan ke halaman website
<html>  
<head> 
<title>Belajar link</title>  
</head> 
<body> 
<a href="https://www.ant-site.com">Menuju ke website Ant Site Development
</a>
</body>
</html> 

Berikut adalah hasil tampilan dari code di atas :

Belajar link Menuju ke website Ant Site Development

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>

Berikut adalah hasil tampilan dari code di atas :

Membuat Animasi Marquee ANIMASI MARQUEE(ALTERNATE)

ANIMASI MARQUEE(SCROLL)

ANIMASI MARQUEE(SLIDE)

Membuat List

Untuk membuat list dalam dokumen HTML ada 3 jenis yaitu :

  • Ordered List “<ol>”

Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan, list yang ditampilkan nanti oleh tag <ol> 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>

Berikut adalah hasil tampilan dari code di atas :

web saya TUGAS HARI INI ADALAH :
  1. Memasak
  2. cuci piring
  3. cuci baju
  4. mandi
  5. sarapan
  6. berangkat sekolah
  • Unordered List “<ul>”

Unordered List merupakan pengurutan list dengan menggunakan symbol/bullet. Cara membuatnya sama dengan Ordered List cuma tag <ol> diganti dengan tag <ul>.

<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>

Berikut adalah hasil dari code diatas :

web saya TUGAS HARI INI ADALAH :
  • Memasak
  • cuci piring
  • cuci baju
  • mandi
  • sarapan
  • berangkat sekolah
  • List Tanpa Symbol “<dl>”

Untuk membuat list tanpa menggunakan simbol caranya sama persis dengan pembuatan list dengan tag <ol>/<ul>, hanya saja tag tersebut diganti dengan <dl> lalu tag <li>diganti dengan <dd>.

<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> 

Berikut adalah hasil dari code diatas :

web saya TUGAS HARI INI ADALAH :
Memasak
cuci piring
cuci baju
mandi
sarapan
berangkat sekolah

Membuat Tabel Pada Dokumen HTML

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Untuk membuat tabel pada html menggunakan tag <table> dan diakhiri dengan tag </table> lalu didalam tag <table> dan tag </table> dimasukkan tag <tr> dan </tr> yang bekerja sebagai baris pada tabel lalu di dalam tag <tr> dan tag </tr> terdapat tag <td> dan </td> yang bekerja memberikan sebuah kolom pada tabel. Untuk mengetahui garis tabel tersebut, kita menggunakan atribut ‘border’ pada tag <table>.

<html>
<head>
<title>web saya</title>
</head>
<body>
Daftar siswa
 <table border="1">
  <tr>
   <td>No</td>
   <td>Nama</td>
   <td>Jenis kelamin</td>
  </tr>
  <tr>
   <td>1</td>
   <td>Andi</td>
   <td>laki-laki</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Indah</td>
   <td>perempuan</td>
  </tr>
 </table>
</body>
</html>

Berikut adalah hasil dari code diatas :

web saya Daftar siswa
No Nama Jenis kelamin
1 Andi laki-laki
2 Indah perempuan

Menggabungkan Kolom dan Baris Pada Tabel

Untuk menggabungkan kolom dalam halaman HTML yaitu dengan menggunakan colspan.

<html> 
<head> 
<title>Belajar Tabel</title> 
</head> 
<body> 
  <table border="1"> 
   <tr>  
      <td colspan="2">Colom yang di gabungkan</td> 
   </tr> 
   <tr> 
      <td>Colom 1, Baris 2</td> 
  <td>Colom 2, Baris 2</td>
   </tr> 
  </table> 
</body> 
</html> 

Berikut adalah hasil dari code diatas :

Belajar Tabel
Colom yang di gabungkan
Colom 1, Baris 2 Colom 2, Baris 2

Membuat Tabel didakam Tabel

Berikut adalah codenya untuk membuat tabel didalam tabel

<html>
<head>
<title>web saya</title>
</head>
<body>
spesifik Mawar
<table width="800px" border="1" height="300px">
  <tr>
   <td>
 <table width="245px" height="295px"> 
   <tr>
  <td><img src="image.jpg" width="240px"
height="290px"></td>
  <td>
  <table width="550px" height="290px">
   <tr>
         <td>nama spesies</td>
     <td>:</td>
     <td>mawar</td>
   </tr> 
<tr>
     <td>ciri-ciri</td>
     <td>:</td>
     <td>kelopak berwarna merah, berduri,
tangkai dan daun berwarna hijau</td>
   </tr>
   <tr>
     <td>cara bertahan diri</td>
     <td>:</td>
     <td>duri yang sangat tajam dan beracun
berfungsi untuk pertahanan diri</td>
   </tr>
  </table>
  </td>
   </tr>
 </table>
   </td>  
  </tr>
</table>
</body>
</html>

Berikut adalah hasil dari code diatas :

web saya spesifik Mawar
nama spesies : mawar
ciri-ciri : kelopak berwarna merah, berduri, tangkai dan daun berwarna hijau
cara bertahan diri : duri yang sangat tajam dan beracun berfungsi untuk pertahanan diri

Semoga bermanfaat dan membantu bagi pembaca maupun bagi sabahat developer pemula. Salam Cahtekno.

Leave a Reply

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