Jumat, 19 Juni 2015

Cara Membuat Tampilan Sederhana pada Web dengan HTML

Cara Membuat Tampilan Sederhana pada Web dengan HTML


HTML adalah pembentuk dasar dari hampir setiap website, tidak peduli seberapa besar atau kecil website tersebut.
Jadi, pada saat anda selesai belajar tentang HTML, anda akan siap untuk melanjutkan dengan teknologi web lain seperti CSS, Java Script dan teman-temannya.

Seperti yang akan kita pelajari, tidak ada teknologi atau bahasa yang secara individu memungkinkan penciptaan website modern dan aplikasi web. Sebaliknya, website terdiri dari beberapa teknologi yang memberi kita kebebasan untuk merangkai dan mengkombinasikannya menjadi sesuatu yang baru, seperti kita bermain puzzle.
Mari kita membuat halaman web pertama yang sederhana, langkah demi langkah. Untuk membuat website, yang kita butuhkan adalah teks editor dan web browser.

Mari kita mulai dengan teks editor, Sebuah Teks Editor hanyalah sebuah program yang mampu menciptakan atau memodifikasi file teks biasa, dan setiap komputer sudah dilengkapi dengan teks editor yang tipenya tergantung OS. Jika Anda menggunakan Windows, kita akan mulai dengan menggunakan Notepad. Jika Anda menggunakan Mac, Anda dapat menggunakan TextEdit di folder aplikasi Anda.
Namun, berhati-hatilah, karena aplikasi pengolah kata yang lebih canggih seperti Microsoft Word atau Pages di Mac, seringkali akan memberikan tambahan aturan styling dan metadata yang tersembunyi dari pandangan Anda. Aturan styling yang tidak terlihat ini akan mengganggu pembuatan halaman HTML kita, jadi pastikan bahwa Anda menggunakan editor teks dasar. Seperti yang saya katakan, TextEdit pada Mac atau Notepad pada Windows akan bekerja dengan baik untuk saat ini.

Disini kita menggunakan Notepad/Notepad++. Setelah Anda membuka Notepad/Notepad++, mari kita mulai dengan mengetikkan:

<!DOCTYPE html>
<html>
<head>
<style>
#header {
    background-color:Cadetblue;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#FAEBD7;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>
</head>


<body>
<div id="header">
<h1><font face="Berlin Sans FB Demi"color="#FF6347">Path</h1></font>
</div>

<div id="nav">
<br><a href="https://m.facebook.com/Radovic.lass?fref=nf&pn_ref=story&ref_component=mbasic_home_header&ref_page=%2Fwap%2Fprofile_timeline.php&refid=17">Facebook</a></li>
<br><a href=https://twitter.com/lastriyantii?lang=en">Twitter</a></li>
<br><a href=blog.path.com"color="#FF6347">Path</a></li></h1></font>
</div>

<div id="section">
<h1><font face="Agency FB"color="#808080">Jejaring Sosial</h1>
<p>
Path didirikan oleh perusahaan Swasta di kantor pusat San Fransisco, California, Amerika Serikat.
Tokoh utama yang mendirikan Path adalah Dave Morin, Shawn Fanning, Dustin Mierau. Dengan 25 karyawan path resmi
diluncurkan pada bulan November 2010 dengan bahasa Inggris, Arab, Norwegia, Belanda, Perancis, Jerman, Yunani,
Indonesia, Italia, Jepang, Korea, Mandarin Sederhana, Mandarin Tradisional, Melayu, Portugis, Rusia, Spanyol,
Swedia, Thai
</p>
<p>
Sama halnya seperti Fb, Twitter, Line, dll. Path adalah sebuah aplikasi jejaring sosial pada telepon pintar yang memungkinkanpenggunanya
untuk berbagi gambar dan juga pesan.
Saya Lastri yanti Mahasisa STT Ibnu Sina Batam Semester 2 Informatika.
</p>
</div>
<div id="footer">
<marquee><font color="#8B0000">Copyright © Lastriyanti/Smt2/T.Informatika/STT Ibnu Sina
</div>
</body>
</html>


Selanjutnya, simpan scrip di atas dalam satu folder (Folder bebas dibuat terserah anda)
Sekarang bukalah broser anda, bisa menggunakan Mozilla firefox ataupun Google Chrome dan bukalah file html yang sudah anda simpan tersebut. maka hasil tampilannya akan seperti berikut ini: 

Selamat, Anda telah membuat halaman web pertama Anda. Tetapi ingat ya.., membuat website yang lebih kompleks akan membutuhkan usaha yang lebih juga.
Happy Nyekrip! Terimakasih telah berkunjung. Salam optimis:)
#tugas2

0 komentar:

Posting Komentar