Home / HTML / Langkah-langkah membuat Biodata Diri dengan HTML

Langkah-langkah membuat Biodata Diri dengan HTML

HTML atau Hypertext Markup Language adalah dasar dari semua halaman web di internet. HTML bukanlah sebuah bahasa pemprograman. HTML merupakan bahasa markup yang berisi perintah-perintah dengan format tertentu yang terstruktur untuk menampilkan tampilan tertentu.  Belajar HTML merupakan proses pertama yang umumnya di lakukan oleh para web programmer. Setelah selesai mempelajari HTML, kita akan memiliki kemampuan untuk membuat halaman web statis. HTML merupakan kependekkan dari Hyper Text Markup Language. Software yang di gunakan pada pembelajaran HTML yaitu dengan menggunakan software Notepad++.

Sebuah HTML merupakan sebuah file teks yang berisi tag-tag markup. Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman. Tag sederhananya adalah kode-kode tertentu yang menjadi pengenal bahwa kode tersebut adalah HTML dan bisa diterjemahkan oleh browser dengan tampilan tertentu. File Html juga harus memiliki ektensi htm atau html. Tag-tag saling berpasangan dan bersarang.

Struktur HTML

  • Document Information

<html> </html>

  • Document Header

<head>            </head>

  • Document Body

<body> </body

Struktur Dasar Dokumen HTML

<html>

            <head>

                        <title> Judul Halaman </title>

            </head>

                        <body>

                                    Tuliskan tag html lain disini

                        </body>

</html>

Penjelasan baris per baris:

  • Untuk setiap tag pada HTML diapit oleh tanda baca lebih kecil dan lebih besar. Bisa di lihat bahwa tag pertama adalah <html> yang memiliki pasangan dengan di tambahin tanda baca garis miring yang di letakkan di akhir script yaitu </html>
  • Tag HTML <html> akan berfungsi untuk memberitahukan kepada browser bahwa inilah awal dari dokumen HTML dan tag pasangannya yaitu </html> yang menyatakan bahwa inilah akhir dari dokumen html.
  • Untuk teks di antara <head> dan di akhiri dengan </head> merupakan teks yang memberitahukan mengenai informasi header. Untuk informasi header sendiri tidak di munculkan pada jendela browser.
  • Untuk selanjutnya yaitu teks di antara <title> merupakan judul dari halaman maupun dokumen yang akan di buat. Judul pada <title> akan di tampilkan  di browser. Tag <title> juga memilik pasangan yaitu </title> yang terletak di bagian penutup jika telah selesai membuat judul pada script yang telah di buat.
  •   Untuk tag diantara teks body <body> merupakan teks yang ditampilkan pada browser yang kita buat. Semua isi yang akan kita buat kita letakan di antara <body> yang diapit dengan pasangan penutupnya yaitu </body>.

Contoh Dokumen HTML

Penjelasan Elemen HTML

  • Elemen HTML dimulai dengan tag pembuka <b>
  • Isi dari elemen HTML adalah teks di tebalkan
  • Elemen HTML di akhiri dengan tag penutup </b>

                                                Membuat BIODATA DIRI

            Untuk membuat biodata diri melalui HTML, kita memerlukan sebuah software yaitu Notepad++. Langkah utama dalam membuatnya yaitu sebagai berikut:

  • Buka software Notepad++ yang telah ada pada laptop
  • Lalu klik new pada tampilan monitor laptop
  • Ketikkan semua script yang akan di buat dalam kertas lembar kerja tersebut.

Seperti pada langkah utama di bawah ini

  • Membuat NAMA dan NIM

Script dalam membuat sebuah program harus di awali dengan <html > dan di tutup dengan </html>. Sebuah program yang akan dibuat di kerjakan pada bagian <body> dan di tutup dengan </body>. Dan jangan lupa jika setiap membuat script pada HTML untuk menulis nama kita di setiap tag <title> dan di tutup dengan </title>. Contoh:

                                    <title> ANI LESTARI </title>

            Script:  <html>

<table width=”500″ border=”1″ bgcolor=”aqua” align=”left” height=”20″>

<tr>

<td>NAMA</td><td>:</td><td>ANI LESTARI</td>

            </tr>

            <tr>

                        <td>NIM</td><td>:</td><td>1604112</td>

            </tr></table>

</html>

            Tampilan pada browser

  • Membuat  Jurusan dan Alamat

            Script:  <html>

<table width=”500″ border=”1″ bgcolor=”aqua” align=”left” height=”20″>

<tr>    

<td>JURUSAN</td><td>:</td><td>TEKNIK INFORMATIKA</td>

</tr>

<tr>

            <td>ALAMAT</td><td>:</td><td>LINK II KELURAHAN HINAI KIRI</td>

</tr></table>

</html>

Tampilan pada browser

  • Membuat Tempat Lahir dan Tanggal,Bulan,Tahun

Script:        <html>

<table width=”500″ border=”1″ bgcolor=”aqua” align=”left” height=”20″>

<tr>

<td>TEMPAT LAHIR</td><td>:</td><td>HINAI KIRI, LANGKAT</td>

<tr>           

<td>TANGGAL, BULAN, TAHUN LAHIR</td><td>:</td><td>18 MARET 1999</td>

<tr></table></html>

Tampilan pada browser

  • Membuat Jenis Kelamin dan Agama

Script:        <html>

<table width=”500″ border=”1″ bgcolor=”aqua” align=”left” height=”20″>

<tr>    

<td>JENIS KELAMIN</td><td>:</td><td>PEREMPUAN</td>

<tr>

<td>AGAMA</td><td>:</td><td>ISLAM</td>

<tr></table>

</html>

Tampilan pada browser

  • Membuat  Hobi dan Email

Script:        <html>

<table width=”500″ border=”1″ bgcolor=”aqua” align=”left” height=”20″>

<tr>

<td>HOBI</td><td>:</td><td>READING and WRITEING</td>

<tr>

<td>EMAIL</td><td>:</td><td>ANILESTARI18031999@gmail.com</td>

</tr></table>

</html>

            Tampilan pada browser

  • Membuat Bacaan Copy Right

Script:        <table><tr><td colspan=”3″>copyright@anilestari</td></tr></table>

Tampilan pada browser

            Setelah selesai membuat semua script pada lembar kerja, langkah berikutnya yaitu menyimpan sebuah file. Berikut langkah-langkahnya:

  1. Tekan CTRL+S untuk menyimpan
  2. Simpan di Local Disk (D:)
  3. Buat lah sebuah folder baru untuk menyimpan file dengan klik new folder
  4. Ganti nama new folder dengan nama kita. Jika membuat nama, untuk HTML jangan menggunakan spasi.
  5. Lalu simpan file tersebut dalam folder, untuk menyimpan beri ekstensi yaitu .html

Semua script di atas telah menujukkan bagaimana cara membuat bioata diri yang benar dan rapi, serta telah di lengkapi oleh tabel sehingga memudahkan untuk melihat lebih jelas tanpa harus bingung jika berantakan karena belum di beri tabel. Untuk hasil keseluruhan dari script di atas adalah sebagai berikut:

Setelah file di simpan, maka buka lah hasil script pada salah satu aplikasi internet. Aplikasi yang biasa di gunakan yaitu Google Chrome.

Maka inilah Tampilan di browser

Hasil tampilan pada jendela browser yang telah di buat dengan menggunakan hasil script di atas.

Comments

comments

Tutorial Lain

Membuat Database, Tabel Berelasi dan View di SQL Server 2010 - form connect to server-

Membuat Database, Tabel Berelasi dan View di SQL Server

Sebelum membuat Aplikasi yang terkoneksi dengan database menggunakan Visual Basic, seperti pada tutorial Membuat Laporan …

Leave a Reply

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