Belajar Membuat html Sendiri Dengan Notepad

I. Pengenalan HTML

A. World Wide Web

Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.

World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer.
WWW bekerja merdasarkan pada tiga mekanisme berikut:
Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.
HTML digunakan untuk membuat document yang bisa di akses melalui web.

B. HTML

    Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:
    - Mengontrol tampilan dari web page dan contentnya.
    - Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
    - Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
    - Menambahkan object-object seperti image, audi, video   dan juga java applet dalam document HTML.

C. Browser dan Editor

■    Browser
    Browser merupakan software yang di install di mesin client yang
    berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.
■    Editor
    Program yang di gunakan untuk membuat document HTML, ada banyak
    HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
II. Basic Tag HTML

A. Tag-tag HTML

Command   HTML   biasanya   disebut   TAG,   TAG   digunakan untuk menentukan tampilan dari document HTML.
    <BEGIN TAG> </END TAG>
    Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.
    <HTML> ..... </HTML>

    Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama.

    Bentuk dari tag HTML sebagai berikut:
    <ELEMENT ATTRIBUTE = value>
    Element    - nama tag
    Attribute    - atribut dari tag
    Value    - nilai dari atribut.
Contoh`:
    <BODY BGCOLOR=lavender>
    BODY   merupakan   element,    BGCOLOR(Background)   merupakan atribut yang memiliki nilai lavender.

Struktur HTML Document

Document HTML bisa di bagi mejadi tiga bagian utama:
HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
    <HTML>…..</HTML>
    tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.
HEAD
    Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan "title" sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword.

Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainnya pada tag META.

Body

Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.

<html>
<head>
<title>Welcome to HTML</title>
</head>
<body bgcolor="laveder">
<p>Document HTML yang Pertama</p>
</body>
</html>
Basic HTML Element

Block Level Element

    Block level element yang sering di gunakan :
Heading (H1 sampai H6)
Contoh:
<html>
<head>
<title>Heading Elements</title>
</head>
<body>
    <h1>Heading one</h1>
    <h2>Heading two</h2>
    <h3>Heading three</h3>
    <h4>Heading four</h4>
    <h5>Heading five</h5>
    h6>Heading six</h6>
</body>
</html>

List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Contoh:
1. Unordered List (Bullet) :
Contoh :
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<P>Shedule for HTML Course</P>
    <li>Sunday</li>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
</body>
</html>

Pemformatan Page

Break
Tag <BR> di gunakan untuk memulai baris baru pada document HTML,
tag ini fungsinya mirip dengan carriage return.
Contoh:

<html>
<head>
<title>Break Line</title>
</head>
<body>

<h3>Buliding Dynamic Web Aplication</h3>

If you're building a dynamic web application, <br> start by setting up an application server and <br> connecting to a database.

</body>
</html>

Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalamdocument HTML seperti color, size, style dan lainya. Contoh:
<font color="#9966FF" size="5"> Setting Up Web Server
</font>
<font face="Courier New, Courier, mono">
….
….
….
</font>

Hyperlink

Link Address

Absolute Address - merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file.
Contoh:
http ://www.yahoo.com/index.html

Relatif Address - URL yang tidak menyebutkan protocol dan network locationya (hanya path dan nama filenya).

Anchor

Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut.

<A HREF="URL"> Hypertext </A>
<A HREF="protocol://host.domain:port/path/filename">
Hypertext </A>
Contoh Link Page
Misalkan ada dua document html link1.htm dan link2.htm untuk
membuat link dari link1.htm ke link2.htm :

Link1.htm
<html>
<head>
<title>Link 1 </title>
</head>
<body>
    <center><font size="5" color=hotpink>Creating Link
    </font></center>
    <br>
    <a href="link2.htm"> Click here to view document 2</a>
</body>
</html>
Link2.htm
<html>
<head>
<title>Link 2</title>
</head>
<body>
    <center><font size="5" color=limegreen>Creating Link </font></center>
    <br>
    <a href="link1.htm"> back to document 1</a>
</body>
</html>

Nah itu yang bisa anda pelajari Sendiri dirumah cara membuat HTML di Notepad semoga lebih membantu anda.

Galery Ilmu Pengetahuan

Search This Blog