html basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...html(1) •html ( hyper text...

18
HTML Basic(1) Ken Ditha Tania

Upload: vutu

Post on 28-Jun-2019

229 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

HTML Basic(1)

Ken Ditha Tania

Page 2: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

HTML(1)

• HTML ( Hyper Text Markup Language)

– Hypertext, Halaman web bukan hanya terdiri dari text tetapi

terdapat juga multimedia

– Markup Penggunaan simbol(tag) untuk mengidentifikasikan

struktur text tersebut

• Perintah di HTML menggunakan link untuk berpindah antar halaman (biasanya tampak berwarna biru dan bergaris bawah/hyperlinks)

Page 3: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

HTML(2)

EVOLUSI HTML • HTML 1 , Berners-Lee, 1989

• HTML 2.0, IETF, 1994

• HTML 3.2, W3C, 1996

• HTML 4.0, W3C, 1997

• XHTML 1.0, W3C,2000

• XHTML 2.0, W3C, 2004

• etc

Page 4: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

HTML(2)

• Ekstensi file :*.htm atau *.html (case sensitif)

• HTML mempunyai 3 tipe komponen:

– Elemen : tag html

– Attribut : informasi sebuah elemen

– Entitas : karakter non-AsCII text

Page 5: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

HTML elemen

• Terdiri dari – <html> – <head> – <title> – <body> – <h1> – <p> – <hr> – <br/> – <strong> – <big> – <small> – <I>

– <em> – <u> – <s> – <sub> – <sup> – <pre> – <address> – <abbr> – <img> – <a> – <table> – <th> – <thead>

– <caption> – <tr> – <td> – <ol> – <ul> – <li> – <frame> – <form> – <input> – <select> – <option> – <Textarea> – <Font>

Page 6: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Atribut

• Syntax : <tag attribute =“value ” attribute =“value”>

• Ex : elemen </img> menggunakan attribute src utk menspesifikasikan lokasi gambar

• Contoh lainnya pada code diatas : width, height, align, hspace

Page 7: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Entitas

• Entitas adl special character

• ASCII didefinisikan ,tapi tidak termasuk : trademark, symbol, fraction, dan accented character

Page 8: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Membuat halaman web

• Membuat dokumen html atau membuat halaman web di html editor kemudian melihat hasilnya di web browser

• Setiap dokumen html harus mempunyai sintak dasar

Page 9: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Membuat halaman web

• Cobalah code berikut

Page 10: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Membuat halaman web(3)

• Simpan file dg extension .html atau .htm

• Lihat hasil dbrowser

Page 11: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Basic Tag HTML (1)

• HTML

• Head

Page 12: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Basic Tag HTML (2)

• Title

• Body

Page 13: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Text layout

Page 14: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Output

Page 15: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Separating block of text

Page 16: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Output

Page 17: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Aligning Text

Page 18: HTML Basic(1)si.ilkom.unsri.ac.id/wp-content/uploads/2018/11/2a-html...HTML(1) •HTML ( Hyper Text Markup Language) –Hypertext, Halaman web bukan hanya terdiri dari text tetapi

Output