1 / 35

Pengenalan Web dan HTML

PPT ini ditujukan bagi teman teman yang masih baru dalam hal Pemrograman.

calvinsims
Download Presentation

Pengenalan Web dan HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PENGENALAN WEB DAN HTML By. Calvin Samuel Simbolon

  2. Perkenalan Hi, saya Calvin Calvin Samuel Simbolon Namasaya Calvin Samuel Simbolon, sayaseoranganak SMK kelas 10, sayasangatmenyukaiduniaPemrograman, sayamembuat PPT iniuntukmembantutemantemandalammemahamimateriPemrogramanDasar. Sayaserang Web Developer

  3. The only way to learn a new programming language is by writing programs in it. -Dennis Ritchie -

  4. PokokBahasan 01 02 03 04 Pengantar Programming Pengantar Website Frontend and Backend HTML Dasar Apaitupemrograman, software pendukung, jenisjenis, dll Apaitu website, Bagianbagianpada website, dan lain lain Pengertian, fungsi, dan skill yang harusdikuasai Strukturdasar HTML, danaturanpenulisan syntax pada HTML

  5. Pengantar Programming Apaitupemrograman, software pendukung, jenisjenis, dll

  6. ApaituPemrograman PEMROGRAMAN MERUPAKAN SUATU PROSES YANG MELIPUTI MENULIS, TESTING,  MEMPERBAIKI, DAN MEMAINTENACE (MEMELIHARA) PERINTAH-PERINTAH (KODE/ SCRIPT) SEBUAH PROGRAM KOMPUTER Content Here You can simply impress your audience and add a unique zing.

  7. Proses Pemrograman Wrting Code Programmermenuliskode-kode program menggunakanbahasapemrogramantertentu. Rilis Code programmer akanmelakukanrilis (biasanyaadaversi program alfa, beta,danstable) dantesting. Testing Code programmer akan mencari apakah ada kesalahan (debug) pada program yang sudah dirisil Memerbaiki programmerakanmencaridimanaletakkesalahankemudianmemperbaikinya Memelihara programmer akanmerilis program  denganversi yang lebihbaru. Laluakandilakukanpemeliharaansecaraberkala

  8. Software Pendukung Untukmembuat program aplikasidekstop, web, ataupun android kitamembutuhkan software pendukung. Salah satunyaadalah IDE. IDE ( Integrated Development Environment ) merupakan software aplikasibiasanyaberbasis GUI yang digunakansebagaitempatmenuliskansetiapbaris-bariskodebahasapemrograman. Di IDE inijugakitabisamenjalankan (Running ) program aplikasi yang sudahdibuat 01 02 Debugger Code Editor / Text Editor Build Autmation Intelegent Code Completion Debugger merupakanFituruntukmenemukansebuah Bud / kesalahan program Code editor adalah software untukmenulis script code Fituruntukmemerbaiki bug secara automatic 03 04

  9. Visual Studio Code Sublime Text Editor CONTOH IDE Atom Text Editor

  10. Menurut Wikipedia, Bahasapemrograman, atauseringdiistilahkanjugadenganbahasakomputerataubahasapemrogramanKomputer, adalahinstruksistandaruntukmemerintahKomputer . Bahasapemrogramaninimerupakansuatuhimpunandariaturansyntax dansemantik yang dipakaiuntukmendefinisikanProgram komputer. BahasaPemrograman

  11. JENIS JENIS DEVELOPER MenurutTugasnya front-end adalahtampilan yang dapatdilihat User. User jugabisaberinterkasipadabagianini .bagianinijugadisebut "sisi client" karenamelibatkansemuahal yang terjadipada device client. bagianinidibangunmenggunakan HTML,CSS,danJavaScript Back-End adalahbagianbelakanglayardarisebuahwebsite.  yang menjadibagianback-endialahserver,database,danaplikasi. Bahasapemogramanuntukback-end developmentdiantaranyaadalah PHP, Ruby, Python, danbanyaklainnya. Full-stack developerbekerjapadabagianfront-enddanback-end. Merekamenguasai HTML, CSS, JavaScript, dansatuataulebihbahasapemogramanback-end.

  12. JENIS JENIS DEVELOPER MenurutProduk yang Dihasilkan Web Developer adalahPengembang Web yang bekerjauntukmerancang, membuat, danmemeliharasitus web danaplikasi web. Jadibisadiartikanpengembang web adalahseseorang yang berhubungandenganpembuatansuatu website. Mobile developermerupakanseorangprogrammer yang sudahterlatihdanbisamembuatsebuahprodukberupaaplikasi. Merekamelakukanpekerjaannyasesuaidenganprinsip-prinsipdesaindanjugaimplementasirekayasaperangkatlunak, tugasmobile developerberbedadenganweb developer. Game Developeradalahsebuahprofesi di manaseseorangmembuatsuatupermainandenganbahasapemogramantertentu yang nantinyadipublikasikan. Merekajugadapatmenciptakanberbagai software untuksebuahpermainan

  13. Pengantar Website Apaitu website, kegunaandanbagiannya

  14. Apaitu Website Website adalahsebuahkumpulanhalamanpadasuatu domain di internet  yang dibuatdengantujuantertentudansalingberhubungansertadapatdiaksessecaraluasmelaluihalamandepan (home page) menggunakansebuah browser menggunakanURL  website. Content Here You can simply impress your audience and add a unique zing.

  15. BAGIAN UTAMA PADA WEBSITE Add Text Simple PowerPoint Presentation Header Footer Sidebar Navigation Content / Main Header merupakanbagianteratasdarisebuah Website, padabagianinibiasanyaberisi Menu, Logo perusahaan, dlll Footer merupakanbagianterbawahpadasebuah website, yang biasanyaberisi contact us, ataupunbagian Copyright Sidebar biasanyadiisidenganiklan, namuninibukanlahhal yang wajibadapadasebuah website Navigation memudahanandadalammenujukehalaman lain padasuatu website Padabagian Content / Main adalahbagiandimanaisidarisebuah website tersebutditampilkan. DisebutjugabagianUtama NB : Untukmemperdalambagianpada website, akandiperdalampadamingguke 3 nanti, PPT terpisah

  16. Membuat Website 2 Cara membuatWesite Secaragambaranumum, terdapat 2 jeniscaramembuat website Dengan Coding Membuat Website Tanpa Coding Kamubisamembuatsebuah website denganbahasamarkupdanbahasapemrograman. (HTML, CSS, JS, PHP) Kamujugabisamembuatsebuah website tanpa skill programming. Yaitudenganmemanfaatkanlayanan web instan

  17. Kelebihan & Kekurangan Tanpa Coding Dengan Coding Kelebihan Kekurangan Kelebihan Kekurangan Membuah website tanpa skill programming jugabisa, denganmemandfaatkanlayanan web instan (Wordpress, Blogger, dll) Membuatsebuah website denganpengetahiuandan skill programming. Menggunakanbahasapemrograman HTML, CSS, JS, PHP, dll. Kelebihandarimemakailayanan web instanyaituadalahmudahdalampembuatannyadanjuga gratis Kekurangandalammembuat web secarainstanadalah website kitabersifatstatis, danmemilikifitur yang terbatas, bahkankitahanyabisamegisibagian main saja. Membuat website dengan Coding memilikikelebihanbahwa website kitabisalebihbervariasidandapatmemilikifiturtakterbatas Tentusajadalam proses pembuatannyajauhlebihribet, danberbayar, namunhampirsemuainstansimemakaimetode Coding.

  18. web dinamisadalahsitusweb yang kontennyadapatdiperbaharuisecaraberkaladenganmudah. Dan dapatdiupdatetanpaharusmengubahscriptnyakembali Script = HTML, CSS, JS, PHP, MySQL, dll Web statisadalahwebdimanapenggunanyatidakdapatmengubahwebsitesecaralangsungmelalui browser. Jadiweb statisinidapatdiubahsecara manual saja.   Script = HTML, CSS Website Dinamis & Statis

  19. Frontend and Backend Apaperbedaan, fungsidan skill ygharusdikuasaioleh FE dan BE

  20. front-end adalahtampilan yang dapatdilihat User. User jugabisaberinterkasipadabagianini .bagianinijugadisebut "sisi client" karenamelibatkansemuahal yang terjadipada device client. bagianinidibangunmenggunakan HTML,CSS,danJavaScript Back-End adalahbagianbelakanglayardarisebuahwebsite.  yang menjadibagianback-endialahserver,database,danaplikasi. Bahasapemogramanuntukback-end developmentdiantaranyaadalah PHP, Ruby, Python, danbanyaklainnya. Full-stack developerbekerjapadabagianfront-enddanback-end. Merekamenguasai HTML, CSS, JavaScript, dansatuataulebihbahasapemogramanback-end.

  21. Skill Seorang Front-End Front End Developer Mengoptimalisai website Melakukan Testing danDebbuging Responsive Design Framework CSS & Js Javascript HTML, CSS Salah satuciri website yang baikialahdapatdiaksesdengancepat. Olehkarenaitusangatpentinguntukmemerhatikan Loading UntukmelihathasildarisebuahCodingan, seorang FE wajibbisamenguasai skill iniuntukmengeteshasildaripekerjaannya Tentusajapengguna website memakailebihdari 1 jenisperangkat, olehsebabitukitaharusmemiliki skill Respnsive web. Ada banyak framework yang dimilikiJs, dan CSS. Seorang FE minimal harustahucaramenggunakan framework tersebut Selainbahasamarkup HTML, CSS. Seorang FE Dev, wajibmenguasai skill Javascript, untukmengaturfungsidari website tsb HTML dan CSS merupakan skill PertamadanUtama yang harusdimilikiseorang FE Dev

  22. Skill Seorang Back-End Back End Developer Membuat Ide Konsep Melakukanrisetdanevaluasitampilan Mengembangkan program danmelakukan testing Mengatasipermasalahanserver Membuatkode program MerancangStruktur Model data Website terbaikadalah website yang memilikiprodukataukonten yang selaludiperbarui. Setiaphari, tugasdari backend developer adalahuntukmembuat ide dankonsepuntukditambahkanpada website tersebut. Dalamhalini Back End harusdapatberkomunikasidgn FE, untukdapatmelakukanevaluasihasilakhirdari website yang telahdibuat Aplikasisetiapsaatpastiakanmengalamiperkembanganbaikdarisisi client maupun server. Untukitulah, perluadanyapengembangan program denganmenggunakan framework khususuntukmempermudah proses penulisankode program.  Setelahberhasilmengembangkansebuah program, makalangkahberikutnyaadalahmelakukanpengujiankode program tersebut. Developer akanmulaimengecekapakahterdapat program masiherror ataupungagalberjalandengansemestinya Tugasseorang backend developer adalahuntukmengatasipermasalahantersebut. Biasanya, bug seringditemukanpada server sehinggaperlusegeradiperbaiki agar tidakadaerror yang muncul.  Kodeprogram yang dibuattentulahharusmemilikisistemkeamanan yang baik agar tidakmudahuntukdiserangolehgangguandariluarseperti hacking, cracking, dll.  Tugaspertama yang dilakukanadalahmerancangsebuahstruktur model data. Langkahinisangatlahpenting agar pengembanganaplikasidapatdilakukandenganbaikdanmemudahkandalampengerjaanaplikasi yang dilakukanolehtim.

  23. Soft Skill Seorang Programmer Presentasi Teliti BerpikirKritis Soft Skill Programmer Kerja Tim & Mandiri Networking (mudahberadaptasi) Kreatifitas & Inovasi Komunikasi

  24. HTML Dasar Apaitu HTML, struktur HTML, danaturanpenulisan Syntax pada HTML

  25. Hypertext Markup Language (HTML) adalahbahasa markupstandaruntukdokumen yang dirancanguntukditampilkan di Peramban internet. InidapatdibantuolehteknologisepertiCascading Style Sheet (CSS) danBahasa ScriptingsepertiJavaScript dan VBScript . Elemen HTML digambarkanolehtag, ditulismenggunakantandakurungsudutt. Tag seperti<img /> dan <input /> langsungperkenalkankontenkedalamhalaman. Tag lain seperti <p> mengelilingidanmemberikaninformasitentangteksdokumendanmungkinmenyertakan tag lain sebagai sub-elemen. Perambantidakmenampilkan tag HTML, tetapimenggunakannyauntukmenafsirkankontenhalaman. Hyper Text Markup Language

  26. Tag Dasar HTML Inimerupakan tag tagdasar yang perlu km ketahui di html Nb : akandiperjelaspadapptterpisah The <!DOCTYPE html> declaration defines that this document is an HTML5 document The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a large heading The <p> element defines a paragraph

  27. Jenis Tag pada HTML <HTML> <></> </> Single Tag HTML Tag HTML berpasangan Single tag pada HTML merupakan tag yang tidakmemiliki tag penutup. Contoh = img, br, hr Tag pada HTML yang memiliki tag pembukadan tag penutup Contoh = head, meta, body, p, h1, dll

  28. Any Question??

  29. Contact Me Calvin Samuel Simbolon “Don’t stop learning untill you proud” WA = +6281227426908 IG = @calvins.simbolon Hi! I’m Calvin A Web Developer Focus on Front End Dev

  30. THANK YOU Keep Learning, Keep Coding

More Related