HTML – Web Design Fundamental

How to Code HTML Documents

HTML: bahasa untuk membuat sebuah halaman web, menampilkan berbagai informasi di web browser dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII untuk menghasilkan tampilan wujud yang terintegrasi.

HTML tags: keyword (nama tag) dengan tanda < sebagai pembuka, dan tanda > sebagai penutup.  Contoh: <head>, <body>, <title>, dll. HTML tags tidak case-sensitive. Menggunakan <b> atau <B> menunjukkan hasil yang sama.

Software: notepad, textpad, Adobe Dreamweaver, Netbeans, dll

2 Jenis HTML tags:

1. Berpasangan

Contoh: <tr> [opening tag] dan </tr> [closing tag])

2. Tidak berpasangan

Contoh: <img />, <input />, <button />

 

Basic HTML Tags

1

Contoh

CaptureCapture

How to Code Common Tags

  • Boldface (menebalkan tulisan)

<b>Jennifer Laura bold</b>        –output: Jennifer Laura bold

  • Kombinasi Boldface dan Italic (memiringkan tulisan)

<b><i>Jennifer Laura bold and italic</b></i>          –output: Jennifer Laura bold and italic

  • Line break (enter): The text for line1<br>The text for line 2

 

Basic HTML Tags

Capture

 

Table

Capture

 

Table with Colspan and Rowspan

CaptureCapture

 

Anchor Tag

Membuat link dengan <a href=”……”> …</a>. Contoh:

<a href=”https://jenniferlaura92.wordpress.com”> Click here to go to Jennifer’s site </a>

 

Image

Memasukkan gambar dengan <img>. Contoh:

<img src=”jenniferlaura.jpg” width=”350″ height=”600″>

 

How to Use a Style Sheet

Style Sheet

Dengan menggunakan style sheet, semua halaman web akan memiliki tampilan yang seragam yang dapat dengan cepat dan mudah dimodifikasi. Style sheet dapat disebut dengan external style sheet, atau linked style sheet, dan merupakan style sheet yang populer dalam serangkaian cascading style sheet. External style sheet biasanya disimpan di direktori sendiri, dan CSS digunakan sebagai ekstensi untuk nama file-nya

CSS Rules: selector atau >= 1 declaration

Selector adalah elemen HTML yang di-edit. Declaration mengandung property dan value.

Picture1

External CSS – Example

CaptureCapture

Picture2

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s