DASAR HTML. Disain & Pemrograman Web Herman Tolle, ST., MT

DASAR HTML Disain & Pemrograman Web Herman Tolle, ST., MT. [email protected] http://hermantolle.com

Informatika & Komputer Teknik Elektro Universitas Brawijaya Malang

Akronim  HTTP (Hyper Text Transport Protokol) : protokol komunikasi (pada layer aplikasi TCP/IP) yang mengatur transfer file-file web (teks dan image).  URL (Uniform Resource Location) : alamat yang digunakan untuk menunjuk situs web.  HTML (Hyper Text Markup Language) : bahasa standar untuk membuat tampilan web

Dasar HTML

2

HTML: HyperText Markup Language  Halaman Web ditulis dalam format HTML  HTML adalah plain text yang berisi:  Tag-tag HTML  Teks isi web

 Plain text dapat dibuat dengan :  Notepad, WordPad (Windows 95/98), Simple Text (Macintosh), Vi or pico (UNIX)

 Aplikasi pembangun html : MS-FrontPage, Macromedia Dreamweaver, EditPlus, Adobe GoLive, dll Dasar HTML

3

HTML: HyperText Markup Language  File html hanya berisi teks, tetapi dapat disisipkan tag untuk (memanggil) image, sound, animasi, objek ActiveX, dll  File-file (image, animasi, dll) tersebut berdiri sendiri dan harus diupload ke server bersama file html-nya  Script dapat disisipkan pada halaman web untuk memberikan kemampuan programming pada halaman web  File html dibuka/dilihat dengan aplikasi interner browser. Misalnya: MS Internet Explorer, Netscape, Opera, Mosaic, dll Dasar HTML

4

HTML  Hypertext: kata atau frase yang menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.  Markup: file HTML berisi suatu instruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada browser.  Language: Meski HTML bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Dasar HTML

5

Anatomy of a Tag  Keyword: Nama Tag  e.g., the keyword of the tag is ‘I’

 Type: container or standalone  container: turn an effect on/off e.g. italic text  standalone: a single element e.g.

 Function: menjelaskan elemen / efek Dasar HTML

6

Attributes  Definisi konten  Modifikasi efek  User-defined values  Character, strings, integers, etc.

Dasar HTML

7

Outline Dasar HTML      

Struktur HTML Format Teks Hyperlink List Insert Gambar Tabel

Dasar HTML

8

TAG utk Struktur Dokumen    

, , , <META>, , <SCRIPT>, <STYLE>, <TITLE>

Dasar HTML

9

HTML Skeleton <TITLE>Judul Web Teks (isi web) + script / coding diletakkan disini didalam tag body

Dasar HTML

10

Tag:  Type: container  Function: declares document to be HTML; all content contained inside  Syntax: …  Attributes: none

Dasar HTML

11

Tag:  Type: container  Function: contains tags comprising the document head  Syntax: …  Attributes: none  Related Tags: , , <META>, <SCRIPT>, <STYLE>, <TITLE> Dasar HTML

12

Tag:  Type: standalone  Function: set global HREF, TARGET  HREF used when computing relative URL references  TARGET used when computing frame references for linked documents

 Syntax: Dasar HTML

13

Tag:  Attributes  only one attribute per tag instance  two tags to set defaults for both HREF & TARGET

Dasar HTML

14

Tag:  Example Dasar HTML

15

Tag:  Equivalent to:

Dasar HTML

16

Tag: <META>  Type: standalone  Function:  declares document meta-information: keywords, expiration date, author, page generator, etc.  also used to implement client pull (dynamic update after a delay)

Dasar HTML

17

Tag: <META>  Attributes:  HTTP-EQUIV - specify type of HTTP header to send with the document; commonly REFRESH or EXPIRES  NAME - specifies the document meta-variable you wish to specify: AUTHOR, KEYWORDS, GENERATOR, DESCRIPTION

Dasar HTML

18

Example Meta Tag My page title <META HTTP-EQUIV="REFRESH" CONTENT="X; URL=newpage_or_URL.html">

Dasar HTML

19

Tag: <SCRIPT>  Type: container  Function: contains script code referenced in the  Syntax: <SCRIPT LANGUAGE=“name”>…

Dasar HTML

20

Tag: <SCRIPT>  Attributes:  LANGUAGE - what scripting language SRC - URL of (remote) script code  TYPE - of script code text/javascript

Dasar HTML

21

Tag: <TITLE>  Type: container  Function: give the document a descriptive title (used in history list, title bar, bookmarks, etc.  Syntax: <TITLE>…  Attributes: none  Example: <TITLE>Web Site Tips Dasar HTML

22

Tag:  Type: container  Function: contains all text and tags inside the document  Syntax: isi halaman web Dasar HTML

23

Colors  Color attributes can be:  one of the 16 reserved color names: BLACK, WHITE, AQUA, SILVER, GRAY, MAROON, RED, PURPLE, FUSCHIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL  specified by an RBG hexadecimal triplet: e.g., #FFFFFF (white)

Dasar HTML

24

Tag:  Attributes:  ALINK - link color when clicked  BACKGROUND - URL of an image to use (will be tiled to fit)  BGCOLOR - background color  LINK - link color (unvisited)  TEXT - default text color  VLINK - link color (visited) Dasar HTML

25

Tag:  Type: standalone  Function: set default size, color, typeface for  Syntax:

Dasar HTML

26

Tag:  Attributes:  COLOR - one of 16 reserved names or an RGB hexadecimal triplet  FACE - list of typefaces (uses first available)  SIZE - integer value from 1 to 7 (default is 3); mapped to point size by browser according to user preferences

Dasar HTML

27

Tag:  Example

Dasar HTML

28

Format Teks  Font: jenis font dan ukuran huruf  Formatting Karakter:  Huruf tebal, cetak miring, underline,

 Text Flow: Ganti baris, ganti paragraph, garis horisontal  Heading: judul, sub judul  Formatting Frasa Dasar HTML

29

Tag:  Type: container  Function: modify font properties of the contained text  Syntax: …

Dasar HTML

30

Tag:  Attributes:  COLOR - one of 16 reserved names or an RGB hexadecimal triplet  FACE - list of typefaces (uses first available)  SIZE - integer value from 1 to 7; or increment / decrement relative to base font

 Example Warning!

Dasar HTML

31

Text Flow Tags 
(Line Break; untuk pindah ke baris berikut) 
(Plain Paragraph; ganti paragraph-sama dengan 2 line break) 


(Horizontal Line Rule)  … (Used to indent long quotations)

Dasar HTML

32

Character Formatting Tags    

… (Bold) … (Italic) <EM>… (Emphasis, usually italic) <STRONG>… (Strong Emphasis; usually bold)

 …  (Blinking text. Very Annoying. Only works in Netscape Navigator)

Dasar HTML

33

Character Formatting Tags       

Bigger Text <S>Stricken Text <SMALL>Smaller Text <SUB>Subscript <SUP>Superscript Fixed-width Chars Underlined Text Dasar HTML

34

Heading Tags 
Header 1
= Header 1 
Header 2
= Header 2  … 
Header 6
= Header 6

Dasar HTML

35

Phrase Formatting       

HTML
email
citation Code Sample ~~deleted text~~ defining instance <EM>Emphasized Text Dasar HTML

36

Tag: LINKS  Type: container  Function: define hyperlink  Syntax: ABOUT ME

Dasar HTML

37

Tag:  Attributes:  HREF – file or URL address for hyperlinks target  TARGET – target frame or page    

_blank : open link file/url in new window _self : same frame _top : whole page _parent : parent frame

Dasar HTML

38

Tag:  … (Creates a link to a web page)  … (Creates a link to a target in the current document)

 … (Defines the target to which you are linking)

Dasar HTML

39

Contoh:  Company Profile  Google

Dasar HTML

40

Lists  ordered lists (automatically numbered)  unordered lists (bullet points)

Dasar HTML

41

Ordered Lists displayed as: Outline
Outline
1. Introduction
Introduction
2. Body
Body 3. Conclusion
Conclusion 4. Endnotes
Endnotes

Dasar HTML

42

Unordered Lists Types of Lists

ordered lists
unordered lists
definition lists

Dasar HTML

displayed as: Types of Lists • ordered lists • unordered lists • definition lists

43

Insert Images Tag: IMG  Type: standalone  Function: insert image  Syntax:  Attribut:  SRC: nama file gambar  ALT: text yang akan muncul ketika mouse over gambar atau jika browser tidak support image

Dasar HTML

44

Tables  Untuk membuat tabel, dapat juga digunakan untuk membuat layout halaman web … …

Header
Column 1 Column 2 Column n

Dasar HTML

45

Tables      

Additional attributes of the tag are: Align to define where the table should go. Width = width of the table (either a number or %). Border to define if there would be a border. Cellspacing = distance between cells. Cellpadding = distance between edge of a cell and the cell contents.

Dasar HTML

46

Comments  comments may be added to an HTML file to inform those who would modify or maintain the pages example:

Dasar HTML

47

Next Week  Table  Cascading Style Sheet

Dasar HTML

48

Kelas G  Membuat Review buku, album, film Format Tugas  Buat dokumen html, nama file: 01-nim.html  Buat dalam folder dg nama: 01-nim  Dikirim ke email dosen: [email protected]  Subject: [Web-G-01]nim  Deadline: 24 September 2014, 23.59 WIB Dasar HTML

49

Tugas  Membuat web pribadi, 5 halaman:  Index (depan)  About Me (Data Pribadi)  My Favorite (Hobby)  My Special Links  Dampak Internet  Syarat: Gunakan hanya pengolah teks (Notepad)!  Tanpa tabel, boleh ada image dan background, gunakan sebanyak mungkin tag dasar yang ada  Send ke Email dan VLM

Dasar HTML

50

Tugas kelas F  Membuat sebuah halaman web Review sebuah Produk (bebas), menggunakan semua TAG yg sudah dipelajari  Format Tugas dalam folder: Web-F-01-NIM  Folder berisi file html dan gambar  Di ZIP dan dikirim ke email dosen: [email protected]  Deadline: 25 September 2014, jam 23.59 WIB Dasar HTML

51

   

FORM Object ActiveX HTML5 Special Tag

 Style

Dasar HTML

52

DASAR HTML. Disain & Pemrograman Web Herman Tolle, ST., MT

Recommend Documents

Header 1

= Header 1 

Header 2

= Header 2  … 

Header 6