Belajar HTML

BELAJAR HTMLHyper Text Markup Language

www.BambangHerlandi.web.id

1

HTML INTRODUCTION

HTML Example

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

2

EXAMPLE EXPLAINED

DOCTYPE merupakan deklarasi mendefinisikan tipe dokumen

Teks antara <html> and </html> menjelaskan halaman web

Teks antara <body> and </body> adalah isi halaman yang

terlihat

Teks antara <h1> and </h1> ditampilkan sebagai judul

Teks antara <p> and </p> ditampilkan sebagai paragraf

KETERANGAN:

<!DOCTYPE html> dideklarasikan pada doctype untuk HTML5.

3

WHAT IS HTML?

HTML adalah bahasa untuk mendeskripsikan halaman web

HTML singkatan dari Hyper Text Markup Language

HTML adalah bahasa pengkodean

Sebuah bahasa kode adalah seperangkat tag kode

Tags menggambarkan isi dokumen

Dokumen HTML berisi tag HTML dan teks biasa

Dokumen HTML juga disebut halaman web

4

HTML TAGS

HTML tag markup biasanya disebut tag HTML

Tag HTML adalah kata kunci (nama tag) dikelilingi oleh kurung

sudut seperti <html>

Tag HTML biasanya datang dalam pasangan seperti <b> dan

</ b>

Tag pertama dalam pasangan adalah tag awal, tag kedua

adalah tag akhir

Tag akhir ditulis seperti tag awal, dengan garis miring sebelum

nama tag

Mulai dan tag akhir juga disebut tag pembuka dan tag penutup

PENULISAN

<tagname>content</tagname>

5

HTML ELEMENTS

"HTML tag" dan "elemen HTML" sering

digunakan untuk menggambarkan hal yang

sama.

Tapi tegasnya, elemen HTML adalah segalanya

antara tag awal dan tag akhir, termasuk tag:

HTML Element:

<p>This is a paragraph.</p>

6

WEB BROWSERS

Tujuan dari web browser (seperti Google

Chrome, Internet Explorer, Firefox, Safari)

adalah untuk membaca dokumen HTML dan

menampilkan mereka sebagai halaman web.

Browser tidak menampilkan tag HTML, tapi

menggunakan tag untuk menentukan

bagaimana isi dari halaman HTML yang akan

disajikan / ditampilkan kepada pengguna:

7

HTML PAGE STRUCTURE

Di bawah ini adalah visualisasi dari struktur

halaman HTML:

9

HTML VERSIONS

Sejak awal web diluncurkan, ada banyak versi

HTML:

Version Year

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012

XHTML5 2013

10

THE <!DOCTYPE> DECLARATION

Deklarasi <!DOCTYPE> membantu browser

untuk menampilkan halaman web dengan

benar.

Ada banyak dokumen yang berbeda di web,

dan browser hanya dapat menampilkan

halaman HTML 100% benar jika ia tahu tipe

HTML dan versi yang digunakan.

11

Deklarasi umum

HTML5

<!DOCTYPE html>

HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

12

WRITING HTML USING NOTEPAD OR TEXTEDIT

HTML dapat diedit dengan menggunakan editor HTML profesional seperti: Adobe Dreamweaver

Microsoft Expression Web

CoffeeCup HTML Editor

Notepad++

Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit (Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML.Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.

13

STEP 1: START NOTEPAD

Buka aplikasi Notepad dengan cara:

Start

All Programs

Accessories

Notepad

14

STEP 2: EDIT YOUR HTML WITH NOTEPAD

Ketik kode HTML Anda ke Notepad Anda:

15

STEP 3: SAVE YOUR HTML

Pilih Simpan sebagai .. dalam menu file

Notepad ini.

Bila Anda menyimpan file HTML, Anda dapat

menggunakan salah satu. Htm atau ekstensi

file html.. Tidak ada perbedaan, itu

sepenuhnya terserah Anda.

Simpan file dalam folder yang mudah diingat,

seperti W3Schools.

16

STEP 4: RUN THE HTML IN YOUR BROWSER

Memulai browser web Anda dan buka file html Anda

dari File, Open menu, atau hanya menelusuri folder

dan double-klik file HTML Anda.

Hasilnya akan terlihat seperti ini:

17

HTML BASIC - 4 EXAMPLES

Jangan khawatir jika contoh menggunakan tag

Anda belum belajar.

Anda akan belajar tentang mereka dalam bab-

bab berikutnya.

18

HTML HEADINGS

HTML judul didefinisikan dengan <h1> sampai

<h6> tags.

Example

<h1>This is a heading</h1>



19

HTML PARAGRAPHS

Paragraf HTML didefinisikan dengan tag <p>

Example

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

20

HTML LINKS

HTML link didefinisikan dengan tag <a>.

Example

<a href="http://www.w3schools.com">This is a

link</a>

Catatan:

Alamat link ditentukan dalam atribut href.

21

HTML IMAGES

Gambar HTML didefinisikan dengan tag <img>.

Example

<img src="w3schools.jpg" width="104"

height="142“ title=“W3 Schools” />

Catatan:

Nama file dan ukuran gambar disediakan

sebagai atribut.

22

REFERENSIhttp://www.w3schools.com

23

Belajar HTML

Internet

Transcript of Belajar HTML