Rabu, 27 April 2016


HTML


Apa itu HTML

  • HTML singkatan dari Hyper Text Markup Language.

  • HTML is not a programming language, it is a markup language (HTML bukan suatu bahasa pemrograman tetapi sebuah bahasa dalam bentuk text yang dapat digunakan untuk menyusun tulisan, gambar, suara, film dan banyak lagi informasi yang bisa ditampilkan).

  • Markup language adalah sebuah set dari  markup tags

  • HTML menggunakan markup tags untuk menjelaskan web pages

 

HTML Tags

HTML markup tags biasa disebut dengan  HTML tags

  • HTML tags adalah keywords (kata kunci) diapit oleh kurung <> (angle brackets) seperti <html>

  • HTML tags normalnya ditulis berpasangan seperti <b> and </b>

  • Pasangan tag pertama disebut start tag, dan yang kedua disebut end tag

  • Start dan end tags juga disebut opening tags dan closing tags.

HTML Documents = Web Pages

  • HTML documents menjelaskan web pages

  • HTML documents terdiri dari HTML tags dan plain text

  • HTML documents disebut juga dengan web pages

Kegunaan dari web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca (read) HTML documents dan  men-displaykannya sebagai web pages. Browser tidak men-display-kan HTML tags, akan tetapi menggunakan tags untuk menginterpretasikan content dari page:

Contoh :

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph</p>

</body>
</html>

 

Keterangan :

  • Text antara <html> dan </html> menjelaskan web page
  • Text antara <body> dan </body> berisi page content
  • Text antara <h1> dan </h1> men-display-kan sebagai heading
  • Text antara <p> dan </p> men-display-kan sebagai paragraph

Yang perlu dilakukan untuk memuat HTML

 

Cukup dengan mengunakan Notepad untuk mengetik Text dan Web Browser (Internet Explorer) untuk menampilkan halaman WEB. Kalau Anda meng-install windows, dua program ini sudah pasti tersedia. Anda juga dapat menggunakan program-program yang lain untuk membuat HTML seperti Front Page, Microsoft Word, Dos Edit, Mac SimpleText, Unix, dll.

  • Tidak diperlukan HTML editor
  • Tidak diperlukan web server
  • Tidak diperlukan web site
  • Cukup menggunakan Notepad

Bagaimana menjalankan HTML?

Dengan cara mengetik di editor kemudian disimpan dalam file dengan akhiran (extension) .html, misalnya coba.html. Kemudian file yang berakhiran .html tersebut dibuka di Internet Explorer, jadilah sudah program HTML.

 

Bagaimana program HTML Online?

Hubungkan program HTML dengan salah satu Internet Service Provider (ISP) yang dikehendaki. Dapat juga menggunakan provider dari www.google.com dengan cara upload file atau dengan provider lainnya.

HTML Basic Document

<html>

<head>

 

<title>Document name goes here</title>
</head>

<body>
Visible text goes here
</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>

A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

<frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>

<textarea name="Comment" rows="60" cols="20"></textarea>

</form>

 

Contoh :

 

MEMBUAT BIODATA


1.) Buat file baru di notepad, yang saya beri nama oneone.html, twotwo.html, threethree.html, fourfour.html, dan fivefive.html. Dimulai dari file oneone, di dalam file ini terdapat menu home yang akan menampilkan gambar dan tulisan 'siapa saya' yang akan me-link ke tempat lain, disini saya me-link ke tulisan di dalam blog saya. Seperti di bawah ini :



Source Code berikut merupakan perintah untuk memasukkan background, dan tulisan sesuai dengan style font yang kita inginkan:

               <body background=back2.jpg>

                <font size=1 face=tahoma color=black>Pemrograman Berbasis Web</font>

                <hr size=1 width=150 align=left>

                <font size=7 face=verdana color=blue<b><strong>Daftar Riwayat Hidup</b></strong></font>

                <hr size=5 align=center noshade>


Dan untuk membuat kelima menu tersebut agar dapat me-link ke halaman selanjutnya, perintahnya adalah :

 |<a href=oneone.html>HOME</a> |<a href="twotwo.html">|DATA  PRIBADI</a>

 | <a href="threethree.html">PENDIDIKAN  FORMAL</a> |<a href="fourfour.html"> PENGALAMAN    

KERJA </a> |

 |<a href="fivefive.html"> SOCIAL NETWORKING </a> |<hr>


Ini untuk memasukkan gambar : <img src="tami.jpg" width="200" height="250" />. Dan untuk me-link ke halaman lain (Disini me-link ke tulisan di blog saya), jika mengklik 'siapa saya?' maka akan masuk ke halaman yang dituju:

<ul type=square>

               <ul type=square>

                <li><a href=http://tamipujiutami.blogspot.com/2012/09/siapa-saya.html>Siapa Saya?</a>

</ul>


Ini adalah contoh tampilan dari file oneone.html yang merupakan menu home:



Jika kita meng-klik 'siapa saya', maka akan menampilkan blog tulisan saya yang berjudul 'Siapa Saya' seperti di bawah ini :



2.) Sekarang kita isi file notepad selanjutnya yaitu twotwo.html. dalam file tersebut terdapat menu data pribadi, seperti tampilan di bawah ini :



Source Code untuk membuat halaman tersebut hampir sama dengan file oneone yang sebelumnya, disini hanya ditambah dengan pembuatan tabel dengan 2 baris dan 2 kolom, untuk pembuatan tabel, berikut adalah source code programnya:



3.) Untuk menu pendidikan formal (threethree.html), pengalaman kerja(fourfour.html), dan social networking(fivefive.html), source code yang digunakan sama, hanya perlu di edit sesuai dengan isi yang akan kita buat, tampilan dari masing-masing menu seperti di bawah ini:


- Menu Pendidikan formal


Diposting oleh di

3 komentar:

Langganan: Posting Komentar (Atom)