Teks yang berisi semua informasi yang akan ditampilkan ke layar utama web browser yaitu

Struktur Dasar HTML dan Tag-tag yang digunakan di html  

Pengertian HTML

HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file text murni yang dapat dibuat dengan editor teks sembarang. Dokumen  ini dikenal sebagai web page. File-file HTML ini berisi instruksi-instruksi yang kemudian diterjemah oleh browser yang ada di komputer client (user) sehingga isi informasinya dapat ditampilkan secara visual dikomputer pengguna (user).

HTML dikenal sebagai bahasa yang digunakan untuk menampilkan dokumen web. Yang bisa dilakukan dengan HTML yaitu :

1.      Mengontrol tampilan dari web page dan contennya.

2.      Mempublikasikan dokumen secara online sehingga bisa diakses dari seluruh dunia.

3.      Membuat online form yang bisa digunakan untuk menangani pendaftaran, transaksi secara online.

4.  Menambahkan obyek-obyek seperti image, audio, video dan juga jaya applet dalam dokumen HTML.

Browser dan Editor

Ada dua cara untuk membuat sebuah web page yaitu dengan HTML editor atau dengan editor text bisa (misalnya notepad atau editplus). Untuk latihan atau mencoba materi sebaiknya menggunakan notepad, setelah itu pada bagian mendekati akhir dapat menggunakan editor HTML, hal ini dimaksudkan agar mudah memahami dan terbiasa secara primitif membuat dokumn web. Sedangkan HTML editor dapat menggunakan software DreamWeaver. Software ini merupakan salah satu software untuk mendesain website atau homepage, selain software front page yang sering kita dengar.

Untuk melakukan penamaan dokumen maka pilih satu nama, sembarang nama kemudian tambahkan sebuah ekstensi “.htm” atau “.html” (tanda kutip tidak perlu ditulikan karena digunakan sebagai penjelas saja). Dan dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh elemen adalah : head, body, table, paragraf dan list. Elemen dapat berupa teks murni atau bukan teks atau keduanya. Untuk itu komponen-komponen yang diperlukan dalam mendesain web adalah :

1.      Sebuah komputer yang siap web. Komputer dengan windows 95/98/NT, Mac atau Unix.

2.      Editor text, notepad atau yang lainnya.

3.      Koneksi ke server web (kalau mungkin koneksi ke internet).

4.      Browser web, direkomendasi Internet Explorer atau Netscape Navigator.

5.      Langkah berikutnya adalah surfing Internet, melihat-lihat website untuk mendapatkan dan membangun ide dari apa yang dilihat.

 Struktur dasar HTML

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML, dinyatakan dengan tag-tag sebagai berikut :

·         HTML

Setiap dokumen HTML selalu diawali dan ditutup dengan tag HTML.

·         HEAD

Bagian head biasanya berisikan tag TITLE, meta tag dan semua script java atau yang lain yang akan dieksekusi di browser. Dibagian inilah kita memberikan bookmark untuk keperluan pencarian (searching) dengan keyword.

·         BODY

Bagian body digunakan untuk menampilkan text, image link dan semua yang akan ditampilkan pada web page.

Semua umum dokumen web dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola dasar sebagai berikut :

Teks yang berisi semua informasi yang akan ditampilkan ke layar utama web browser yaitu

Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan </html> diakhir dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah dokumen HTML. Dalam satu dokumen hanya ada satu lemen HTML.

Section atau elemen head dimulai dengan tag <head> diawal dan tag </head> diakhir. Section ini berisi informasi tentang dokumen htmlnya. Minimal informasi yang dituliskan dalam elemen ini adah judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser, ditandai dengan menggunakan tag <title> dan diakhiri </title>. Sehingga bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilan pada browser. Sedangkan tag TITLE yang berfungsi untuk mengeluarkan judul pada title bar window web browser.

Section atau elemen body ditandai dengan tag <body> diawal dan tag </body> diakhir. Section body merupakan elemen terbesar didalam dokumen HTML. Pada bagian ini anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin disampaikan pada pengguna nantinya.

Baca Juga : Tutorial Blog SEO

Tag-tag dalam <body>:

1.      Warna latar belakang

Menggunakan warna

<body bgcolor=#nnnnnn> . . . </body>

2.      Menggunakan gambar

<body background=”nama_file_gambar”> . . . </body>

3.      Heading

Untuk judul atau sub judul dalam dokumen HTML

<h1 [align=”left”|”center”|”right”|> . . . </h1>

<h2 [align=”left”|”center”|”right”|> . . . </h2>

<h3 [align=”left”|”center”|”right”|> . . . </h3>

4.      Paragraph

Untuk mengatur perataannya (kiri, tengah, kanan).

<p [align=”left”|”center”|”right”|> . . . </p>

5.      Preformatted text

Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML :

<pre> . . . </pre>

6.      Block quote

Untuk mempilkan teks sama seperti yang diketikkan dalam dokumen HTML

<blockquote> . . . </blockquote>

7.      Break

Untuk menulis teks pada baris berikutnya

<br>

8.      Font

Ukuran font

<font size=”n”> . . . </font>

Jenis font

<font size=”n”face=”jenis_font”> . . . </font>

Warna font

<font size=”n”face=”jenis_font” color=”warna”> . . . </font>

9.      Untuk format dokumen

Bold

<b> . . . </b>

Emphasized

<em> . . . </em>

Italic

<i> . . . </i>

Superscript

<sup> . . . </sup>

Subsripted

<sub> . . . </sub>

Struck trough

<del> . . . </del>

10.  Gambar

Untuk memuat gambar ke dalam halaman web

<img scr =”URL”|”name”         height=”n”     width=”n” align=”top”|”center”|”bottom”]/>

11.  Untuk hypertext link

Format

<a href=”address”> . . . </a>

Link ke dokumen lain

<a href=”nama_dokumen”> . . . </a>

Link ke bagian tententu dalam dokumen yang sama

<a href=”#target”> . . . </a>

<a href=”target”> . . . </a>

Link ke alamat URL atau WebSite

<a href=”alamat_URL”> . . . </a>

Link ke alamat E-mail

<a href=”malto:alamat_email”> . . . </a>

Link File yang akan didownload


<a href=”nama_file”> . . . </a>

Semoga bisa bermanfaat gan ^-^