membuat biodata diri dengan html dam css
Cara Membuat Biodata diri dengan HTML dan CSS
Tugas pertama mata kuliah Pemrogaman Web 1 dikampus AMIKI Banda Aceh disuruh Membuat Biodata Diri dengan HTML dan CSS. kita kreasikan dengan tabel beserta foto profil kita. Biar terlihat rapi meski cuma dasar membuat tabel html yg masih statis. Kurang Lebihnya nanti yang akan kita buat Tabel biodata dengan HTML dan CSS tampilanya seperti Gambar dibawah ini :
Tabel (table) pada HTML
Sekilas tentang tabel.
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Cara membuat tabel.
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Sebagai mahasiswa IT, pasti dapat mata kuliah pemrograman web. Salah satunya kita akan mendapatkan sks dasar mengenai HTML. Mungkin anda bosan dengan beberapa data diri anda yang hanya dapat terlihat secara offline dan online melalui media sosial. Kali ini kita akan mencoba mempelajari bagaimana mengkoding sebuah file HTML yang akan dimunculkan pada browser - browser yang anda miliki dengan mengklik data tersebut yang telah disimpan oleh notepad ++ sebagai file HTML. Hasilnya seperti diatas bila anda ketikkan koding seperti ini, berikut kodingnya :
<Html>
<Head>
<Title> Tentang Aku </ title>
<Link rel = "stylesheet"
href = "style.css"
type = "text / css">
</ Head>
<Tubuh onload = "alert ( 'Halaman ini Telah Selesai di loading')">
<Html>
<Div id = "wrapper">
<Div id = "header">
</ Div>
<Div id = "menu">
<Ul>
<Li> <a href="home.html"onclick="alert('hai Andari mengklik saya')"> Rumah </a> </ li>
<Li> <a href="biodata mahasiswa.html"onclick="alert('Hello')"> About Me </a> </ li>
<Li> <a href=""> Tutorial </a> </ li>
<Li> <a href="http://layarmonitordatar.blogspot.com"onclick="alert('hello')"> HTML </a> </ li>
<Li> <a href="http://layarmonitordatar.blogspot.com"> CSS </a> </ li>
<Li> <a href="http://layarmonitordatar.blogspot.com"> Pemrograman </a> </ li>
</ Ul>
</ Div>
<Div id = "sidebar">
<H2> Tautan Tutorial </ h2>
<Li> <a href="tabel.html"> PENGGUNAAN Tabel </a> </ li>
<Li> <a href="form.html"> PENGGUNAAN Form </a> </ li>
<Li> <a href="heading.html"> PENGGUNAAN Pos </a> </ li>
<Li> <a href="order list.html"> Tipe Orde PT </a> </ li>
<Li> <a href="unorder list.html"> Tipe Unorder PT </a> </ li>
<Li> <a href="format font.html"> Format Font </a> </ li>
</ Div>
<Div id = "content">
<h2>Biodata Mahasiswa</h2>
<Form>
<Table>
<Tr>
<Td> rumah </ td>
<Td> </ td> <td> Mirza Ardian Syah </ td>
</ Tr>
<Tr>
<td>Tempat lahir</td>
<Td>: </ td> <td> Banda Aceh </ td>
</ Tr>
<Tr>
<td>Tanggal Lahir</td>
<Td> </ td> <td> 14. Februar 1991 </ td>
</ Tr>
<Tr>
<Td> Pekerjaan </ td>
<Td> </ td> <td> Mahasiswa </ td>
</ Tr>
<Tr>
<Td> Alamat </ td>
<Td> </ td> <td> Jln.Sultan Alaide Mahmudsyah komp.Baperis </ td>
</ Tr>
</ Table>
</ Div>
<Div style = "clear: both">
</ Div>
<Div id = "footer">
<P align = "center">
Copyright Mirzstory 2014 <br>
Pemograman Web I<br>
V-3 membuat teman-teman
</ Div>
</ Div>
</ Body>
</ Html>
Comments
Post a Comment