Top Banner
HTML Basic(1) Ken Ditha Tania
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

Jun 28, 2019

Download

Documents

vutu
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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