Video Tutorial Web Design Pariwisata Jawa Timur
Video tutorial ini q buat sebagai dokumentasi skul dari hasil lomba web design tingkat jawa timur di smkn 2 kediri tgl 13-15 maret 2009, silahkan di download list di bawah ini, semoga bermanfaat. Password: eliastutik
Opening
Create Database
Manage Site
Config
Admin 1
CSS Style
Form Home
Proses Input
Result Table
Background Table
Proses Delete
Proses Edit
Admin 2
Booking Penerbangan
Caution Form
Form Login
Proses Login & Logout
Photoshop
Design Tombol
Design Banner bagian 1
Design Banner bagian 2
Design Banner bagian 3
Design Banner bagian 4
Design Menu
Design Counter
Design Page Background Bawah
Design Page Background Result
Design Page Background Index
Design Panah
Banner Home
Animasi Tombol
Effect Sound
Tanggal & Waktu di Flash
Banner Pariwisata
Import Video
Page Index
Counter
Link Menu
Inner Join
Booking Penerbangan & Hotel
Jangan lupa password untuk mendownload nya adalah eliastutik
Semoga Bermanfaat, amin
eli astutik
Minggu, 15 Maret 2015
preformatted text
Membuat Preformatted Text di HTML
Preformatted Text
Preformatted Text <pre> digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen HTML
Contoh: pre.htm
<html>
<head>
<title>Belajar Preformatted Text</title>
</head>
<body>
<pre>
w w w . i l m u website . c o m
-------------------------------------------------------------------
tulisan di atas menggunakan jenis font SimSun dan menggunakan spasi
-------------------------------------------------------------------
</pre>
</body>
</html>
eli astutik di
Preformatted Text
Preformatted Text <pre> digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen HTML
Contoh: pre.htm
<html>
<head>
<title>Belajar Preformatted Text</title>
</head>
<body>
<pre>
w w w . i l m u website . c o m
-------------------------------------------------------------------
tulisan di atas menggunakan jenis font SimSun dan menggunakan spasi
-------------------------------------------------------------------
</pre>
</body>
</html>
eli astutik di
blockquote
Membuat Blockquote di HTML
Blockquote
Perintah tag <blockquote> digunakan untuk menulis kutipan teks. Pada saat di browser, teks akan tampil menjorok ke dalam.
Contoh: blockquote.htm
<html>
<head>
<title>Belajar Blockquote</title>
</head>
<body>
<h3>Pengertian Blockquote</h3>
<blockquote>Blockquote adalah elemen yang berfungsi untuk menampilkan teks dengan menjorok ke dalam.</blockquote>
</body>
</html>
Blockquote
Perintah tag <blockquote> digunakan untuk menulis kutipan teks. Pada saat di browser, teks akan tampil menjorok ke dalam.
Contoh: blockquote.htm
<html>
<head>
<title>Belajar Blockquote</title>
</head>
<body>
<h3>Pengertian Blockquote</h3>
<blockquote>Blockquote adalah elemen yang berfungsi untuk menampilkan teks dengan menjorok ke dalam.</blockquote>
</body>
</html>
blockquote
Membuat Blockquote di HTML
Blockquote
Perintah tag <blockquote> digunakan untuk menulis kutipan teks. Pada saat di browser, teks akan tampil menjorok ke dalam.
Contoh: blockquote.htm
<html>
<head>
<title>Belajar Blockquote</title>
</head>
<body>
<h3>Pengertian Blockquote</h3>
<blockquote>Blockquote adalah elemen yang berfungsi untuk menampilkan teks dengan menjorok ke dalam.</blockquote>
</body>
</html>
Blockquote
Perintah tag <blockquote> digunakan untuk menulis kutipan teks. Pada saat di browser, teks akan tampil menjorok ke dalam.
Contoh: blockquote.htm
<html>
<head>
<title>Belajar Blockquote</title>
</head>
<body>
<h3>Pengertian Blockquote</h3>
<blockquote>Blockquote adalah elemen yang berfungsi untuk menampilkan teks dengan menjorok ke dalam.</blockquote>
</body>
</html>
blockquote
Membuat Blockquote di HTML
Blockquote
Perintah tag <blockquote> digunakan untuk menulis kutipan teks. Pada saat di browser, teks akan tampil menjorok ke dalam.
Contoh: blockquote.htm
<html>
<head>
<title>Belajar Blockquote</title>
</head>
<body>
<h3>Pengertian Blockquote</h3>
<blockquote>Blockquote adalah elemen yang berfungsi untuk menampilkan teks dengan menjorok ke dalam.</blockquote>
</body>
</html>
Blockquote
Perintah tag <blockquote> digunakan untuk menulis kutipan teks. Pada saat di browser, teks akan tampil menjorok ke dalam.
Contoh: blockquote.htm
<html>
<head>
<title>Belajar Blockquote</title>
</head>
<body>
<h3>Pengertian Blockquote</h3>
<blockquote>Blockquote adalah elemen yang berfungsi untuk menampilkan teks dengan menjorok ke dalam.</blockquote>
</body>
</html>
comment tag
Contoh: komentar.htm
<html>
<body>
<h1>Judul Pertama</h1><!--dipertunjukan sebagai judul-->
<p>Paragraf Pertama</p><!--dipertunjukan sebagai paragraf-->
</body>
</html>
Tag <!-- ... -->
Tag Komentar (Comment) adalah bagian dari kode yang tidak dieksekusi/dijalankan dan komentar tidak ditampilkan dalam browser. Komentar dapat dimasukkan/disisipkan kedalam kode HTML. Komentar dibuat untuk memperjelas atau memberi keterangan pada kode HTML.
Tips – Bagaimana cara melihat source code dari HTML
Pernakah Anda melihat suatu halaman web dan heran. “Hai! Bagaimana cara membuat seperti itu?”
Untuk menemukannya, pada aplikasi browser (Mozilla Firefox, Opera, Internet Explore) klik menu View klik Source atau Page Source atau klik kanan View Page Source
eli astutik diakses minggu, 15 maret 2015
<html>
<body>
<h1>Judul Pertama</h1><!--dipertunjukan sebagai judul-->
<p>Paragraf Pertama</p><!--dipertunjukan sebagai paragraf-->
</body>
</html>
Tag <!-- ... -->
Tag Komentar (Comment) adalah bagian dari kode yang tidak dieksekusi/dijalankan dan komentar tidak ditampilkan dalam browser. Komentar dapat dimasukkan/disisipkan kedalam kode HTML. Komentar dibuat untuk memperjelas atau memberi keterangan pada kode HTML.
Tips – Bagaimana cara melihat source code dari HTML
Pernakah Anda melihat suatu halaman web dan heran. “Hai! Bagaimana cara membuat seperti itu?”
Untuk menemukannya, pada aplikasi browser (Mozilla Firefox, Opera, Internet Explore) klik menu View klik Source atau Page Source atau klik kanan View Page Source
eli astutik diakses minggu, 15 maret 2015
deklarasi doctype
Deklarasi Doctype
Contoh: jenis_dokumen.htm
Dokumen HTML dengan doctype versi XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>doctype versi XHTML 1.0 Transitional</title>
</head>
<body>
Isi dokumen
</body>
</html>
Deklarasi <!DOCTYPE>
Deklarasi <!DOCTYPE> harus menjadi hal pertama dalam dokumen HTML Anda, sebelum tag <html>.
Deklarasi <!DOCTYPE> bukanlah tag HTML melainkan intruksi untuk web browser mengetahui jenis versi halaman HTML yang sedang digunakan.
Deklarasi <!DOCTYPE> mengacu pada Document Type Definition (DTD). DTD menetapkan aturan untuk bahasa markup, sehingga browser membuat konten dengan benar.
Doctype tersedia dalam rekomendasi W3C
HTML 4.01 Strict
DTD ini berisi semua elemen dan atribut HTML, tetapi tidak termasuk presentasional elemen font. Fremeset tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
DTD ini berisi semua elemen dan atribut HTML, termasuk presentasional elemen font. Frameset tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
DTD ini sama dengan DTD HTML 4.01 Transitional, namun memungkinkan penggunaan Frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
DTD ini berisi semua elemen dan atribut HTML, tetapi tidak termasuk presentasional elemen font. Fremeset tidak diperbolehkan. Markup harus ditulis dengan format XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
DTD ini berisi semua elemen dan atribut HTML, termasuk presentasional elemen font. Fremeset tidak diperbolehkan. Markup harus ditulis dengan format XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
DTD ini sama dengan DTD XHTML 1.0 Transitional, namun memungkinkan penggunaan Frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
DTD ini sama dengan DTD XHTML 1.0 Strict, tetapi memungkinkan Anda untuk menambahkan modul(misalnya untuk memberikan dukungan ruby untuk bahasa Asia Timur).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
eli astutik diakses, minggu 15 maret 2015
Contoh: jenis_dokumen.htm
Dokumen HTML dengan doctype versi XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>doctype versi XHTML 1.0 Transitional</title>
</head>
<body>
Isi dokumen
</body>
</html>
Deklarasi <!DOCTYPE>
Deklarasi <!DOCTYPE> harus menjadi hal pertama dalam dokumen HTML Anda, sebelum tag <html>.
Deklarasi <!DOCTYPE> bukanlah tag HTML melainkan intruksi untuk web browser mengetahui jenis versi halaman HTML yang sedang digunakan.
Deklarasi <!DOCTYPE> mengacu pada Document Type Definition (DTD). DTD menetapkan aturan untuk bahasa markup, sehingga browser membuat konten dengan benar.
Doctype tersedia dalam rekomendasi W3C
HTML 4.01 Strict
DTD ini berisi semua elemen dan atribut HTML, tetapi tidak termasuk presentasional elemen font. Fremeset tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
DTD ini berisi semua elemen dan atribut HTML, termasuk presentasional elemen font. Frameset tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
DTD ini sama dengan DTD HTML 4.01 Transitional, namun memungkinkan penggunaan Frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
DTD ini berisi semua elemen dan atribut HTML, tetapi tidak termasuk presentasional elemen font. Fremeset tidak diperbolehkan. Markup harus ditulis dengan format XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
DTD ini berisi semua elemen dan atribut HTML, termasuk presentasional elemen font. Fremeset tidak diperbolehkan. Markup harus ditulis dengan format XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
DTD ini sama dengan DTD XHTML 1.0 Transitional, namun memungkinkan penggunaan Frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
DTD ini sama dengan DTD XHTML 1.0 Strict, tetapi memungkinkan Anda untuk menambahkan modul(misalnya untuk memberikan dukungan ruby untuk bahasa Asia Timur).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
eli astutik diakses, minggu 15 maret 2015
html color code
HTML Color Code - Diurut Berdasarkan Nilai Hex
Color Name HEX Color
Black #000000
Navy #000080
DarkBlue #00008B
MediumBlue #0000CD
Blue #0000FF
DarkGreen #006400
Green #008000
Teal #008080
DarkCyan #008B8B
DeepSkyBlue #00BFFF
DarkTurquoise #00CED1
MediumSpringGreen #00FA9A
Lime #00FF00
SpringGreen #00FF7F
Aqua #00FFFF
Cyan #00FFFF
MidnightBlue #191970
DodgerBlue #1E90FF
LightSeaGreen #20B2AA
ForestGreen #228B22
SeaGreen #2E8B57
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
LimeGreen #32CD32
MediumSeaGreen #3CB371
Turquoise #40E0D0
RoyalBlue #4169E1
SteelBlue #4682B4
DarkSlateBlue #483D8B
MediumTurquoise #48D1CC
Indigo #4B0082
DarkOliveGreen #556B2F
CadetBlue #5F9EA0
CornflowerBlue #6495ED
MediumAquaMarine #66CDAA
DimGray #696969
DimGrey #696969
SlateBlue #6A5ACD
OliveDrab #6B8E23
SlateGray #708090
SlateGrey #708090
LightSlateGray #778899
LightSlateGrey #778899
MediumSlateBlue #7B68EE
LawnGreen #7CFC00
Chartreuse #7FFF00
Aquamarine #7FFFD4
Maroon #800000
Purple #800080
Olive #808000
Gray #808080
Grey #808080
SkyBlue #87CEEB
LightSkyBlue #87CEFA
BlueViolet #8A2BE2
DarkRed #8B0000
DarkMagenta #8B008B
SaddleBrown #8B4513
DarkSeaGreen #8FBC8F
LightGreen #90EE90
MediumPurple #9370D8
DarkViolet #9400D3
PaleGreen #98FB98
DarkOrchid #9932CC
YellowGreen #9ACD32
Sienna #A0522D
Brown #A52A2A
DarkGray #A9A9A9
DarkGrey #A9A9A9
LightBlue #ADD8E6
GreenYellow #ADFF2F
PaleTurquoise #AFEEEE
LightSteelBlue #B0C4DE
PowderBlue #B0E0E6
FireBrick #B22222
DarkGoldenRod #B8860B
MediumOrchid #BA55D3
RosyBrown #BC8F8F
DarkKhaki #BDB76B
Silver #C0C0C0
MediumVioletRed #C71585
IndianRed #CD5C5C
Peru #CD853F
Chocolate #D2691E
Tan #D2B48C
LightGray #D3D3D3
LightGrey #D3D3D3
PaleVioletRed #D87093
Thistle #D8BFD8
Orchid #DA70D6
GoldenRod #DAA520
Crimson #DC143C
Gainsboro #DCDCDC
Plum #DDA0DD
BurlyWood #DEB887
LightCyan #E0FFFF
Lavender #E6E6FA
DarkSalmon #E9967A
Violet #EE82EE
PaleGoldenRod #EEE8AA
LightCoral #F08080
Khaki #F0E68C
AliceBlue #F0F8FF
HoneyDew #F0FFF0
Azure #F0FFFF
SandyBrown #F4A460
Wheat #F5DEB3
Beige #F5F5DC
WhiteSmoke #F5F5F5
MintCream #F5FFFA
GhostWhite #F8F8FF
Salmon #FA8072
AntiqueWhite #FAEBD7
Linen #FAF0E6
LightGoldenRodYellow #FAFAD2
OldLace #FDF5E6
Red #FF0000
Fuchsia #FF00FF
Magenta #FF00FF
DeepPink #FF1493
OrangeRed #FF4500
Tomato #FF6347
HotPink #FF69B4
Coral #FF7F50
Darkorange #FF8C00
LightSalmon #FFA07A
Orange #FFA500
LightPink #FFB6C1
Pink #FFC0CB
Gold #FFD700
PeachPuff #FFDAB9
NavajoWhite #FFDEAD
Moccasin #FFE4B5
Bisque #FFE4C4
MistyRose #FFE4E1
BlanchedAlmond #FFEBCD
PapayaWhip #FFEFD5
LavenderBlush #FFF0F5
SeaShell #FFF5EE
Cornsilk #FFF8DC
LemonChiffon #FFFACD
FloralWhite #FFFAF0
Snow #FFFAFA
Yellow #FFFF00
LightYellow #FFFFE0
Ivory #FFFFF0
White #FFFFFF
eli astutik diakses minggu, 15 maret 2015
Color Name HEX Color
Black #000000
Navy #000080
DarkBlue #00008B
MediumBlue #0000CD
Blue #0000FF
DarkGreen #006400
Green #008000
Teal #008080
DarkCyan #008B8B
DeepSkyBlue #00BFFF
DarkTurquoise #00CED1
MediumSpringGreen #00FA9A
Lime #00FF00
SpringGreen #00FF7F
Aqua #00FFFF
Cyan #00FFFF
MidnightBlue #191970
DodgerBlue #1E90FF
LightSeaGreen #20B2AA
ForestGreen #228B22
SeaGreen #2E8B57
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
LimeGreen #32CD32
MediumSeaGreen #3CB371
Turquoise #40E0D0
RoyalBlue #4169E1
SteelBlue #4682B4
DarkSlateBlue #483D8B
MediumTurquoise #48D1CC
Indigo #4B0082
DarkOliveGreen #556B2F
CadetBlue #5F9EA0
CornflowerBlue #6495ED
MediumAquaMarine #66CDAA
DimGray #696969
DimGrey #696969
SlateBlue #6A5ACD
OliveDrab #6B8E23
SlateGray #708090
SlateGrey #708090
LightSlateGray #778899
LightSlateGrey #778899
MediumSlateBlue #7B68EE
LawnGreen #7CFC00
Chartreuse #7FFF00
Aquamarine #7FFFD4
Maroon #800000
Purple #800080
Olive #808000
Gray #808080
Grey #808080
SkyBlue #87CEEB
LightSkyBlue #87CEFA
BlueViolet #8A2BE2
DarkRed #8B0000
DarkMagenta #8B008B
SaddleBrown #8B4513
DarkSeaGreen #8FBC8F
LightGreen #90EE90
MediumPurple #9370D8
DarkViolet #9400D3
PaleGreen #98FB98
DarkOrchid #9932CC
YellowGreen #9ACD32
Sienna #A0522D
Brown #A52A2A
DarkGray #A9A9A9
DarkGrey #A9A9A9
LightBlue #ADD8E6
GreenYellow #ADFF2F
PaleTurquoise #AFEEEE
LightSteelBlue #B0C4DE
PowderBlue #B0E0E6
FireBrick #B22222
DarkGoldenRod #B8860B
MediumOrchid #BA55D3
RosyBrown #BC8F8F
DarkKhaki #BDB76B
Silver #C0C0C0
MediumVioletRed #C71585
IndianRed #CD5C5C
Peru #CD853F
Chocolate #D2691E
Tan #D2B48C
LightGray #D3D3D3
LightGrey #D3D3D3
PaleVioletRed #D87093
Thistle #D8BFD8
Orchid #DA70D6
GoldenRod #DAA520
Crimson #DC143C
Gainsboro #DCDCDC
Plum #DDA0DD
BurlyWood #DEB887
LightCyan #E0FFFF
Lavender #E6E6FA
DarkSalmon #E9967A
Violet #EE82EE
PaleGoldenRod #EEE8AA
LightCoral #F08080
Khaki #F0E68C
AliceBlue #F0F8FF
HoneyDew #F0FFF0
Azure #F0FFFF
SandyBrown #F4A460
Wheat #F5DEB3
Beige #F5F5DC
WhiteSmoke #F5F5F5
MintCream #F5FFFA
GhostWhite #F8F8FF
Salmon #FA8072
AntiqueWhite #FAEBD7
Linen #FAF0E6
LightGoldenRodYellow #FAFAD2
OldLace #FDF5E6
Red #FF0000
Fuchsia #FF00FF
Magenta #FF00FF
DeepPink #FF1493
OrangeRed #FF4500
Tomato #FF6347
HotPink #FF69B4
Coral #FF7F50
Darkorange #FF8C00
LightSalmon #FFA07A
Orange #FFA500
LightPink #FFB6C1
Pink #FFC0CB
Gold #FFD700
PeachPuff #FFDAB9
NavajoWhite #FFDEAD
Moccasin #FFE4B5
Bisque #FFE4C4
MistyRose #FFE4E1
BlanchedAlmond #FFEBCD
PapayaWhip #FFEFD5
LavenderBlush #FFF0F5
SeaShell #FFF5EE
Cornsilk #FFF8DC
LemonChiffon #FFFACD
FloralWhite #FFFAF0
Snow #FFFAFA
Yellow #FFFF00
LightYellow #FFFFE0
Ivory #FFFFF0
White #FFFFFF
eli astutik diakses minggu, 15 maret 2015
Langganan:
Postingan (Atom)