Pemrograman Web DASAR HTML

Ukuran: px

Mulai penontonan dengan halaman:

Download "Pemrograman Web DASAR HTML"

Handoko Lesmono
7 tahun lalu
Tontonan:

1 Pemrograman Web DASAR HTML

2 HTML Dasar HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs. Untuk belajar HTML dasar sebaiknya Anda ketikkan di Notepad. Dasar HTML 2

3 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) HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web): MS- FrontPage, Macromedia Dreamweaver, EditPlus, Adobe GoLive, dll Dasar HTML 3

4 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, Google Crome, Opera, Mosaic, dll Dasar HTML 4

5 HTML Sederhana <HTML> <HEAD> <TITLE>Judul Web</TITLE> </HEAD> <BODY> Hello Word!! </BODY> </HTML> Setelah diketikkan, Anda simpan dengan nama latihan.html. Untuk melihat hasilnya, double click file yang telah Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi.htm, tetapi supaya sama, maka sebaiknya digunakan ekstensi.html. Dasar HTML 5

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

7 Tag: <BODY> Type: container Function: contains all text and tags inside the document Syntax: <BODY BGCOLOR= color BACKGROUND= image LINK= link_color ALINK= active_link_color VLINK= visited_link_color TEXT= text_color > isi halaman web </BODY> Dasar HTML 7

8 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 8

9 Tag: <BODY> 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 9

10 Tag: <BASEFONT> Type: standalone Function: set default size, color, typeface for <BODY> Syntax: <BASEFONT SIZE= size COLOR= color FACE= list_typefaces > Dasar HTML 10

11 Tag: <BASEFONT> 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 11

12 Tag: <BASEFONT> Example <BASEFONT SIZE=5 COLOR= navy FACE= Arial,Helvetica > Dasar HTML 12

13 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 13

14 Tag: <FONT> Type: container Function: modify font properties of the contained text Syntax: <FONT SIZE= size COLOR= color FACE= list_typefaces > </FONT> Dasar HTML 14

15 Tag: <FONT> 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 <FONT SIZE= +1 COLOR= red > Warning!</FONT> Dasar HTML 15

16 Text Flow Tags <BR> (Line Break; untuk pindah ke baris berikut) <P> (Plain Paragraph; ganti paragraphsama dengan 2 line break) <BR><BR> <HR> (Horizontal Line Rule) <BLOCK QUOTE> </BLOCK QUOTE> (Used to indent long quotations) Dasar HTML 16

17 Character Formatting Tags <B> </B> (Bold) <I> </I> (Italic) <EM> </EM> (Emphasis, usually italic) <STRONG> </STRONG> (Strong Emphasis; usually bold) <BLINK> </BLINK> (Blinking text. Very Annoying. Only works in Netscape Navigator) Dasar HTML 17

18 Character Formatting Tags <BIG>Bigger Text</BIG> <S>Stricken Text</S> <SMALL>Smaller Text</SMALL> <SUB>Subscript</SUB> <SUP>Superscript</SUB> <TT>Fixed-width Chars</TT> <U>Underlined Text</U> Dasar HTML 18

19 Heading Tags <H1>Header 1<H1>= Header 1 <H2>Header 2<H2> = Header 2 <H6>Header 6<H6> = Header 6 Dasar HTML 19

20 <html> <head> <title> Latihan Pertamaku </title> </head> <body bg color="#000000"> <p align="left"> Paragraf ini akan rata kiri<br> Paragraf ini akan rata kiri<br> Paragraf ini akan rata kiri<br> <p> br digunakan untuk ganti baris <br><br> <b>kalimat ini akan dicetak Bold </b> <br> <i>kalimat ini akan dicetak Italic </i> <br> <b><i>kalimat ini akan dicetak Bold dan Italic</i></b> <hr width="1000"><br> Perintah hr digunakan untuk membuat garis </body> </html>

22 Tag: <A> LINKS Type: container Function: define hyperlink Syntax: <A HREF= about.htm TARGET= _blank >ABOUT ME</A> Dasar HTML 22

23 Tag: <A> 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 23

24 Contoh: <a href= page2.html >Company Profile </a> <a href= > Google</a> Dasar HTML 24

25 Lists ordered lists (automatically numbered) unordered lists (bullet points) Dasar HTML 25

26 Ordered Lists Outline<BR> <OL> <LI>Introduction <LI>Body <LI>Conclusion <LI>Endnotes </OL> displayed as: Outline 1. Introduction 2. Body 3. Conclusion 4. Endnotes Dasar HTML 26

27 Unordered Lists Types of Lists<BR> <UL> <LI>ordered lists <LI>unordered lists <LI>definition lists </UL> displayed as: Types of Lists ordered lists unordered lists definition lists Dasar HTML 27

28 Insert Images Tag: IMG Type: standalone Function: insert image Syntax: <IMG SRC= logo.gif ALT= Logo > Attribut: SRC: nama file gambar ALT: text yang akan muncul ketika mouse over gambar atau jika browser tidak support image Dasar HTML 28

29 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 29

30 Table Untuk membuat tabel, dapat juga digunakan untuk membuat layout halaman web <html> <head> <title> Latihan Table </title> </head> <body> <table border= 1 > <tr> <td align= center >Satu</td> <td align= center >Dua</td> </tr> <td align= center >Tiga</td> <td align= center >Empat</td> </table> </body> </html> Dasar HTML 30

31 Table <html> <head> <title> Latihan Table Dua </title> </head> <body> <table border= 1 > <tr> <td colspan= 2 align= center >Satu</td> </tr> <tr> <td align= center >Dua</td> <td align= center >Tiga</td> </tr> </table> </body> </html>

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

33 <HTML> <HEAD> <TITLE>Halaman pembuka </TITLE> </HEAD> <BODY bgcolor="#ffffff" background="images/gambar1.gif" text="#ff0000"> Background Gambar </BODY> </HTML>

34 Tugas Membuat web pribadi, 2 halaman: Home / Profile Berita Internet Terkini Syarat: Gunakan hanya pengolah teks (Notepad)! Boleh dengan tabel, boleh ada image dan background, gunakan sebanyak mungkin tag dasar yang ada Send ke Dasar HTML 34

dokumen-dokumen yang mirip

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

DASAR HTML. Disain & Pemrograman Web Herman Tolle, ST., MT. DASAR HTML Disain & Pemrograman Web Herman Tolle, ST., MT. emang@ub.ac.id http://hermantolle.com Informatika & Komputer Teknik Elektro Universitas Brawijaya Malang Akronim HTTP (Hyper Text Transport Protokol)