workshop 1 create a web from zero
TRANSCRIPT
![Page 1: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/1.jpg)
Create A Web From Zero
#1
Eddy Tungadi
![Page 2: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/2.jpg)
INTRODUCTIONSESSION #1
![Page 3: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/3.jpg)
How A Web Works?
![Page 4: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/4.jpg)
How To Develop A Web
![Page 5: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/5.jpg)
OUR TOOLS
• HTML • CSS• JAVASCRIPT (JQUERY)• PHP
![Page 6: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/6.jpg)
Base Template
Styling
Functionality
Server Side Scripts
![Page 7: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/7.jpg)
Where Should We Start?
![Page 8: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/8.jpg)
The SeriesI. Learning HTML &
CSS
II. Designing in Image Editor
III. Coding Our Theme Design With HTML and CSS Editor
IV. Learning Javascript (JQURY)
V. Server Side Script (PHP)
![Page 9: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/9.jpg)
Descibe HTML and CSS
• Head• Body• Style
Sama seperti tubuh manusia yang memiliki bagian-bagian dengan attribut, style, dan fungsi yang berbeda-beda
![Page 10: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/10.jpg)
How to write the code
![Page 11: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/11.jpg)
Element CategoryTag Dasar
Format Tulisan
Blocks
Links
Frames
Forms (input)
Label (output)
Lists
Images
Tables
Styles
Meta Info
Pemrograman
List• <ul>
<li> first item </li> … </ul>
Form• <FORM
METHOD=”post” ACTION=”mailto:[email protected]”> … </form>
Meta
• <meta http-equiv=”refresh” content=”5;url=foo.html” />
• <meta name=”keywords” content=”Physics, Maths, Science” />
![Page 12: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/12.jpg)
Element with its Attribute#1
Required Attribute
•attribut yang harus dimasukkan agar tag berefek pada halaman web•<img src = “gambar.jpg”>
Option Attribute
•attribut yang sifatnya optional •<img width = ”10%”>
![Page 13: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/13.jpg)
Element with its Attribute#2
Attribut inti sangat penting peranannya dalam pengaturan template web.
Mereka adalah: -Title-Class -Id -name
Core Attribute
• attribut inti untuk pengaturan elemen HTML
• <a title=”Link Ke Google”>Google </a>
Event Attribute
• attribut yang digunakan untuk memanggil event
• <a href= ”http://www.google.com” onmouseover = ”script_mouse()” > Google </a>
![Page 14: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/14.jpg)
IMAGE TO HTMLSESSION #2
![Page 15: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/15.jpg)
How to write the code
![Page 16: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/16.jpg)
NAVIGATIONSESSION #3
![Page 17: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/17.jpg)
How to write the code
![Page 18: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/18.jpg)
TIPS AND TRICKSSESSION #4
![Page 19: Workshop 1 create a web from zero](https://reader033.vdocuments.net/reader033/viewer/2022052900/5562f8bfd8b42a62598b4869/html5/thumbnails/19.jpg)
• PENGGUNA SITUS MELAKUKAN SCAN• LEBIH SEDIKIT LEBIH BAIK • NAVIGASI• KECEPATAN AKSES • BIARKAN PENIKMAT BERBICARA!• PERHATIKAN MONITOR PENGGUNA• BROWSER APA YANG DIGUNAKAN• PLUG IN APA SAJA YANG DIMILIKI PENGGUNA• TAMBAHKAN FUNGSI JAVASCRIPT / JQUERY• KEMBANGKAN BACKEND DENGAN PHP