Jumat, 15 November 2013

Membuat Website Sederhana

Ok, sekarang saatnya kita membuat website sederhana sendiri, tentu dengan informasi yang telah didapat dari tutorial diatas. Walaupun sedikit mungkin info yang didapat coba terapkan aja semuanya yang ada.
Untuk belajar membuat website dengan menerapakan tag HTML, sangat mudah dan cepat. 
Pertama siapkan  teks editor seperti Notepad (PC) atau TextEdit (Mac). Menggunakan teks editor sederhana adalah cara yang baik untuk belajar HTML.
Coba Anda lihat lagi dokumen HTML sederhana, yang diberikan diawal Tuorial ini. Kode tersebut sebenarnya sudah cukup valid sebagai Struktur HTML halaman sebuah Website yang sederhana dan bisa ditampilkan di web browser Anda. Kita akan beri tambahan elemen baru seperti HTML Link, HTML Image, Paragraf baru, HTML Unordered Lists dan Ordered Lists atau juga dengan HTML Table, tentu hasil website lebih lengkap dan menarik. Setelah kita beri tambahan elemen baru tersebut pada contoh dokumen HTML diatas, final kode dokumen  seperti berikut :
Buatlah atau edit kode ini di Notepad Anda
<!DOCTYPE html>
<html>
<head>
      <title>Website Baru Saya</title>
</head>

<body>
<h1>Belajar HTML</h1>

<h2>Apa HMTL itu?</h2>
<p><b>HTML</b> adalah singkatan dari Hyper Text Markup Language.</p>

<p><b>Hyper Text :</b>  metode dimana Anda dapat bergerak leluasa di web - dengan mengklik pada sebuah teks khusus yang disebut "hyperlink" yang membawa Anda ke halaman berikutnya. Kata hiper itu sendiri berarti tidak linear - yaitu Anda dapat pergi ke tempat manapun di Internet kapanpun Anda inginkan dengan hanya mengklik sebuah link (sebuah teks yang berfungsi sebagai link)</p>

<p><b>Markup Language :</b> adalah apa yang tag HTML lakukan dengan text, ini sama seperti Anda menandai bold text, italics text, headings, bullets, dst. ( cara penulisan informasi tata letak dalam dokumen )</p>

<h2>HTML Dasar</h2>
<ul>
 <li>HTML Heading</li>
 <li>HTML Paragraf</li>
        <li>HTML Image</li>
        <li>HTML Link</li>
        <li>HTML Table</li>
<li> Versi-versi HTML
  <ol>
   <li>HTML 4.01</li>
   <li>XHTML 1.0</li>
   <li>HTML5</li>
   <li>XHTML5</li>
  </ol></li>
 </ul>
<h2>Dimana saya belajar HTML?</h2>
<p><a href="http://algocell.blogspot.com/"><img src="http://images.cooltext.com/2747647.gif" alt="ALGO CELL" height="25" width="300" /></a>

<h3>My Table here</h3>
<table border="1">
 <tr>
  <td>Row 1, cell 1</td>
  <td>Row 1, cell 2</td>
  <td>Row 1, cell 3</td>
 </tr>
 <tr>
  <td>Row 2, cell 1</td>
  <td>Row 2, cell 2</td>
  <td>Row 2, cell 3</td>
 </tr>
 <tr>
  <td>Row 3, cell 1</td>
  <td>Row 3, cell 2</td>
  <td>Row 3, cell 3</td>
 </tr>
</table>

<h3>Kesimpulan</h3>
<p><strong>Terima kasih</p>

</body>
</html>
Edit atau letakkan kode dokumen Page HTML ini di Notepad Anda.
Selanjutnya yang perlu anda lakukan adalah menyimpannya ke hard drive Anda dan kemudian buka di browser Anda.
Cara menyimpan dokumen sebagai file HTML:

  • Di Notepad Anda pilih File > pilih Save As....
  • Beri nama File, misal : Websitebaru
  • Tambah ekstensi .html, sehingga menjadi : Websitebaru.html
  • Pilih "All File" pada kotak "Save as Type"
  • Kemudian Save


langkah menyimpan dokumen html di notepad
langkah menyimpan dokumen HTML di notepad
Untuk melihat hasil tampilan Website baru Anda, Double Klik pada file Websitebaru.html tersebut dimana Anda menyimpannya di PC.
Dan hasilnya akan seperti ini Sob, tampilan dibrowser Anda :

website sederhana
hasil membuat website sederhana

Selesai !!

Tidak ada komentar:

Posting Komentar