đź’»
Doyatama Code
  • Welcome to Doyatama Code
  • Terms and Conditions
  • Learning Site
  • Editor Online
  • Group Telegram Recommended
  • Project
    • Cek Kata
      • Pengenalan
      • Membuat Backend
      • Membuat Frontend
  • Training
    • Java Programming Language
      • Step 1 - Basic
        • Dasar Algoritma
        • Flowchart
        • Studi Kasus
        • Variabel, Tipe Data dan Operator
        • Pemilihan
        • Pemilihan Bersarang
        • Perulangan
        • Perulangan Bersarang
        • Array 1 Dimensi
        • Array 2 Dimensi
        • Fungsi
        • Fungsi Rekursif
      • Step 1 Assignment
      • Step 2 - Data Structure Algorithm
      • Step 2 - Assignment
    • React Web Frontend Development
      • Step 1 - Basic Javascript
        • JavaScript Dasar untuk React – Variable, Object & Scope
        • JavaScript Dasar untuk React – “this” keyword
        • JavaScript Dasar untuk React – Array methods
        • JavaScript Dasar untuk React – Class & Module
        • HTML Dasar untuk React
      • Step 1 - Assignment
        • Assignment - JavaScript Dasar untuk React - Variable, Object & Scope
        • Assignment - JavaScript Dasar untuk React - "this" keyword
        • Assignment - JavaScript Dasar untuk React - Array methods
        • Assignment - JavaScript Dasar untuk React - Class & Module
        • Assignment - HTML Dasar untuk React
      • Step 2 - Going to React JS
        • Introduction to React JS
        • Components & Props
        • State & LifeCycle
        • Lists & Forms
        • Konsep “Lifting State Up”
      • Step 2 - Assignment
        • Assignment - Introduction to React JS
        • Assignment - Components & Props
        • Assignment - State & LifeCycle
      • Step 3 - Going to Redux
        • Bagaimana Berpikir di React
        • Hooks & Context
        • React Router
        • Redux & React-Redux
        • Redux Middleware menggunakan Redux-Thunk
      • Step 3 - Assignment
      • Step 4 - Deploy and Make Final Project
        • Testing menggunakan Jest & RTL
        • Deployment
        • Final Project – Mocking
        • Final Project – Static Version
        • Final Project – Interactive Version & Deploy
      • Step 4 - Assignment
      • Big Project -
    • Laravel Web Development
      • Step 1 - Basic Web Programming
        • Berkenalan dengan HTML
        • CSS Basic to Ninja
        • CSS Bootstrap
        • Introduction Javascript
        • Dom JavaScript
      • Step 1 - Assignment
      • Step 2 - Materials
      • Step 2 - Assignment
      • Step 3 - Materials
      • Step 3 - Assignment
      • Step 4 - Materials
      • Step 4 - Assignment
      • Big Project
    • React Native Mobile Apps Development
      • Step 1 - Basic
        • Command Line
        • Git
        • Javascript – Intro
        • Javascript – String Properties & Method
        • Javascript – Conditional
        • Javascript – Loop
        • Javascript – Function
        • Javascript – Array
      • Step 1 - Assignment
        • Assignment - JavaScript String Properties & Method
        • Assignment - Javascript Looping
        • Assignment - Javascript Function
        • Assignment - JavaScript Array
      • Step 2 - Materials
        • Javascript – Object
        • Javascript – Class
        • Javascript – Asynchronous
        • Javascript – ES6
        • React Native Intro
      • Step 2 - Assignment
      • Step 3 - Materials
        • Mockup Figma
        • React Native – Components
        • React Native – Styling & Flexbox
        • React Native – Components API & Lifecycle
        • React Native – Navigation
      • Step 3 - Assignment
      • Step 4 - Materials
        • React Native – State Management (Redux)
        • React Native – Build & Release APK/IPA
        • React Native – Codepush
        • React Native – Publish Google Play Store/App Store
        • React Native – Firebase Data Storage
        • React Native – Function Component & Hooks
      • Step 4 - Assignment
    • Learning Database
      • Step 1 - Entity Relationship Diagram
        • Contoh Penerapan Basis Data
        • Introduction to Entity Relationship Diagram (ERD)
        • Introduction to Entity Relationship Diagram (ERD) Part 2
        • ERD to Relational Model
        • ERD to Relational Model Part 2
      • Step 1 - Assignment
      • Step 2 - Normalization
        • What is Normalization ?
        • Normalization 1NF, 2NF And 3NF
        • Normalization 4NF, 5NF
      • Step 2 - Assignment
      • Step 3 - MySQL
        • MySQL - Data Definition Language (DDL)
        • MySQL - Data Manipulation Language (DML)
        • MySQL - Data Retrieval Language (DRL)
        • MySQL - Select JOIN
      • Step 3 - Assignment
    • Boilerplate
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Training
  2. Laravel Web Development
  3. Step 1 - Basic Web Programming

Berkenalan dengan HTML

Apa itu HTML ??

HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah sebuah bahasa standar untuk pembuatan halaman web. Dengan adanya HTML, kita dapat membedakan struktur yang tersusun dari sebuah halaman melalui tag atau elemen-elemen penyusunnya.

Elemen atau tag pada HTML dikenali oleh browser seperti google chrome, firefox atau Ms Edge, dll. Browser tersebut mengidentifikasi setiap elemen penyusun HTML dan ditampilkan sesuai karakteristik elemen tersebut. Contohnya sebuah elemen paragraph akan ditampilkan sebagai tulisan panjang, atau sebuah elemen pranala/link akan dicetak dengan warna biru dan ketika mouse mendekat kursornya berubah menjadi telunjuk, dsb.

Contoh sebuah halaman HTML sederhana:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Dari contoh di atas kita dapat mengidentifikasi elemen-elemen nya seperti berikut

  • element <!DOCTYPE html> mengartikan bahwa dokumen ditulis dengan versi HTML5

  • elemen <html> adalah elemen induk atau elemen utama yang sering disebut juga root element dari sebuah halaman HTML.

  • elemen <head> berisi informasi tentang halaman HTML yang sedang dibuat

  • elemen <title> adalah judul dari halaman HTML yang akan tampil di tab browser.

Elemen pada HTML

Elemen atau sering disebut dengan tag pada HTML adalah penyusun dari sebuah halaman web yang dapat dikenali oleh browser dan ditampilkan oleh browser sesuai karakteristik masing-masing.

Sebuah elemen HTML terdiri dari tag pembuka(start/open tag), atribut (attribute), isi (content), dan tag penutup(close tag).

Pada ilustrasi di atas merupakan sebuah elemen paragraph dibuka dengan tag pembuka <p> . Di dalam tag pembuka tersebut terdapat atribut class yang disematkan ke dalam tag. Isi atau content dari sebuah tag paragraph <p> akan ditampilkan sebagai paragraf. lalu terakhir sebuah tag ditutup dengan sebuah tag penutup.

catatan

Tidak semua elemen HTML memiliki tag penutup seperti <input> <img> <meta> .

Elemen di dalam elemen (nested element)

sebuah elemen HTML dapat terisi dengan elemen-elemen lain di dalamnya. Semua dokumen HTML yang kita lihat di halaman web terdiri dari kumpulan elemen bersarang atau elemen yang mengandung elemen lain di dalamnya.

Contohnya halaman berikut:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Pada contoh di atas elemen <html> adalah root element dan merupakan elemen utama di dokument HTML. elemen tersebut dibuka dengan tag pembuka <html> dan ditutup dengan </html>. Lalu di dalam elemen <html> terdapat elemen <body> . elemen <body> merupakan elemen yang akan ditampilkan ke halaman web yang diawali dengan tag pembuka <body> dan ditutup dengan sebuah tag penutup </body> , dan seterusnya sehingga terciptalah sebuah halaman web yang utuh.

Heading HTML

Heading Pada HTML berfungsi untuk membuat judul atau subtitle pada tampilan website

List HTML

Terdapat 2 jenis list di HTML yaitu Unordered dan Ordered

HTML Input Types

Beberapa Input type yang bisa di gunakan di HTML:

  • <input type="button">

  • <input type="checkbox">

  • <input type="color">

  • <input type="date">

  • <input type="datetime-local">

  • <input type="email">

  • <input type="file">

  • <input type="hidden">

  • <input type="image">

  • <input type="month">

  • <input type="number">

  • <input type="password">

  • <input type="radio">

  • <input type="range">

  • <input type="reset">

  • <input type="search">

  • <input type="submit">

  • <input type="tel">

  • <input type="text">

  • <input type="time">

  • <input type="url">

  • <input type="week">

Input Form HTML

Dropdown

Berfungsi untuk menampilkan dropdown list kedalam tampilan website

Textarea

Berfungsi Membuat inputan yang jauh lebih lebar

attribute cols untuk lebar nilai kolom dari inputan dan attribute rows untuk besar nilai baris dari inputan

Link Download Text Editor

* pilih salah satu

Referensi lain :

sumber

PreviousStep 1 - Basic Web ProgrammingNextCSS Basic to Ninja

Last updated 2 years ago

Was this helpful?

Visual Studio Code :

Atom :

Sublime Text :

Belajar HTML dari Dasar oleh Sekolah Koding:

tulisan ini disarikan dari halaman dokumentasi W3schools :

https://code.visualstudio.com/download
https://atom.io/
https://www.sublimetext.com/download
https://www.youtube.com/playlist?list=PLCZlgfAG0GXC9ojTmU95BRefbJoi4clY-
https://www.w3schools.com/html/default.asp