Cara Membuat Biodata diri dengan HTML dan CSS
Wednesday, December 24, 2014
Manajemen Informatika Komputer,
teknik manajemen informatika,
Teknik Website,
teknologi,
Tipshacking
Tugas pertama mata kuliah Pemrogaman Web 1 dikampus 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>about me</title>
<link rel="stylesheet"
href="style.css"
type="text/css">
</head>
<body 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 anda mengklik saya')">Home</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>Link 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 Heading</a></li>
<li><a href="order list.html">Tipe Order List</a></li>
<li><a href="unorder list.html">Tipe Unorder List</a></li>
<li><a href="format font.html">Format Font</a></li>
</div>
<div id="content">
<h2>Biodata Mahasiswa</h2>
<form>
<table>
<tr>
<td>Nama </td>
h</td>
</tr>
<tr>
<td>Tempat lahir</td>
<td>:</td><td>Banda Aceh</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td><td</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td><td>Mahasiswa</td>
</tr>
<tr>
</td>
</tr>
</table>
</div>
<div style="clear : both">
</div>
<div id="footer">
<p align="center">
Copyright Mirzstory 2014<br>
Powered ijes<br>
Pemograman Web I<br>
V-3 AMIKI
</div>
</div>
</body>
</html>
0 Response to "Cara Membuat Biodata diri dengan HTML dan CSS"
Post a Comment