Pertemuan 1 - Struktur Dasar HTML 5

Desain Web Meet 1
Struktur HTML 5
Topic Pembahasan
1.Mengenal Struktur HTML 5

2.Elemen dan Atribut HTML 5
3.Heading, Paragraf, Comment
E-Commerce Marketing Plan 2

HTML
 HTML atau hypertext markup language adalah sebuah bahasa markup yang menjadi
salah satu dasar pembuatan website.
 Pada dasarnya, HTML digunakan untuk

menunjukkan elemen-elemen yang
terdapat pada suatu halaman website.
Setiap elemen ditunjukkan dengan tag
<> (pembuka) dan </> (penutup).
 Kedua tag tersebut berisi inisial yang

mewakili sebuah elemen halaman
website. Contohnya adalah <p> yang
merepresentasikan sebuah paragraf.
3
Struktur HTML 5
 HTML adalah bahasa markup yang paling sering
digunakan dalam pembuatan website. Sejak mulai
mengudara di 2014, versi kelima HTML telah digunakan
secara luas. Akan tetapi, sudah tahukah Anda apa itu
HTML5? Apa perbedaan HTML dan HTML5?
Lorem
Ipsum
Sc: https://www.niagahoster.co.id/
4
Perbedaan HTML dan HTML5
 Versi keempat dari HTML telah digunakan sejak 1997.
Tentunya teknologi internet dan website telah
berkembang pesat sejak itu. Nah, HTML5 adalah
perbaikan dari HTML. Versi ini diciptakan sebagai solusi
untuk kebutuhan saat ini — salah satunya adalah
dukungan untuk membuat website yang bersifat mobile-
friendly.
Lorem
Ipsum
Sc: https://www.niagahoster.co.id/
5
Keunggulan HTML 5
1. Penanganan Error yang Lebih Baik
2. Kemudahan untuk Membuat Aplikasi Web
3. Syntax yang Lebih Sederhana
4. Dukungan untuk Pembuatan Website Responsive
5. Support untuk Konten Video dan Audio
6. Dukungan untuk Grafik Vektor
7. Kompatibel dengan lebih Banyak Browser
8. Penyimpanan Informasi secara Lokal
9. Fokus Otomatis pada Kolom Form
10. Menjalankan JavaScript di Web Browser
6
Perkembangan HTML
HTML v2.0 (24 November 1995)
HTML v3.0 (14 Januari 1996) struktur HTML lebih tertata rapi dan mampu
Lorem menampilkan form dokumen. Dengan adanya
HTML v3.0 tidak memiliki umur yang lama. Itu
disebabkan karena ada versi terbaru dari versi 3 3 Ipsum
2 form tersebut, Anda bisa memasukkan alamat,
nama, saran dan kritik pada suatu dokumen.
Lorem
Lorem Ipsum
Ipsum
HTML v1.0
HTML v4.0
(14 Januari 1996) - 5 Mei 2000
tidak heran jika versi ini memiliki
banyak sekali kelemahan termasuk
Dibandingkan versi sebelumnya, versi ini hadir tampilannya yang masih sangat
dengan banyak perubahan dari v3. Beberapa sederhana.
diantaranya ada di tabel, link, image, text, meta,
form dan imagemaps.
HTML Story’s 1
4 HTML 5
HTML
HTML v5.0 (28 Oktober 2014)
7
Struktur Tag, Elemen, Atribut
1. Tag: yaitu sintaks <..> dan </..> yang digunakan untuk

membuat sebuah elemen HTML.
2. Elemen: yaitu objek atau simpul HTML yang membentuk
satu-kesatuan struktur halaman web.
3. Atribut: adalah informasi tambahan untuk elemen HTML
yang kita buat, misal atribut lebar dan tinggi pada tag
<img>.
8
Apa itu Tag?
HTML adalah sebuah markup yang membentuk
struktur tubuh halaman web. HTML tersusun dari
berbagai element. Dan tiap element, selalu ditulis Jadi, tag adalah teks yang
dengan sebuah tag pembuka <nama-tag> dan tag berada di antara tanda <..> dan
penutup </nama-tag>. Meskipun ada beberapa
tag yang hanya perlu dibuka, dan tidak perlu juga </...>.
ditutup.
Di antara contoh-contoh tag dalam HTML:

•<html> - elemen root dari dokumen HTML
•<head> - untuk mendefinisikan meta data, judul, styles, dan lain-lain dari dokumen HTML
•<body> - untuk mendefinisikan body dari dokumen HTML (body adalah bagian yang terlihat oleh user)
•<p> - untuk membuat elemen paragraf
•<a> - untuk membuat elemen link
•<button> - untuk membuat elemen tombol
9
Apa itu Elemen?
Elemen dalam HTML adalah sebuah komponen Cara membuatnya pun dengan menuliskan dua buah
HTML. Elemen juga bisa dikatakan sebagai node tag dengan nama <button>.
atau simpul yang membentuk hirarki pohon Sebagaimana dalam kode berikut:
dokumen HTML
Bayangkan kita memiliki dua buah tombol html seperti berikut:
Berarti, kita memiliki 2 buah elemen HTML berupa tombol.

Cara membuatnya pun dengan menuliskan dua buah tag dengan
nama <button>.
10
Apa itu Atribut?
Atribut adalah sebuah tambahan argumen atau
aksesoris terhadap suatu elemen HTML. Atribut
hanya ditulis pada tag pembuka. Dan atribut
Contoh:
berfungsi untuk menambahkan informasi
tambahan pada suatu elemen HTML <img
src="https://upload.wikimedia.org/wikipedia
/commons/thumb/6/61/HTML5_logo_and_wordmark
.svg/800px-
HTML5_logo_and_wordmark.svg.png">
Kita juga bisa mengatur panjang dan tinggi dari

elemen gambar dengan menambahkan <img
atribut width dan atribut height. Perhatikan src="https://upload.wikimedia.
contoh berikut: org/wikipedia/commons/thumb/6/
61/HTML5_logo_and_wordmark.svg
/800px-
HTML5_logo_and_wordmark.svg.pn
g" width="120" height="40">
11
Practice 1
<!DOCTYPE html>
<html>
<head>
<title>Elemen Pada HTML</title>
</head>
<body>
<button>Tombol Kiri</button>
<button>Tombol Kanan</button>
<img
src="https://upload.wikimedia.org/wikipedia/comm
ons/thumb/6/61/HTML5_logo_and_wordmark.svg/
800px-HTML5_logo_and_wordmark.svg.png"
width="400" height="400">
</body>
</html>

Heading HTML
HTML headings, adalah judul atau

subjudul yang ingin Anda tampilkan di
halaman web.
HTML headings , didefinisikan

dengan tag <h1>to .<h6>
13
Practice 2
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

HTML Paragraphs
HTML Paragraphs, Paragraf selalu dimulai

pada baris baru, dan biasanya berupa
blok teks.
Sebuah paragraf selalu dimulai pada

baris baru, dan browser secara otomatis
menambahkan beberapa spasi (margin)
sebelum dan sesudah paragraf.
15
Practice 3
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>

Tampilan HTML
Anda tidak dapat memastikan bagaimana HTML akan

ditampilkan.
Layar besar atau kecil, dan jendela yang diubah ukurannya

akan menghasilkan hasil yang berbeda.
Dengan HTML, Anda tidak dapat mengubah tampilan

dengan menambahkan spasi atau baris tambahan dalam
kode HTML Anda.
Browser akan secara otomatis menghapus spasi dan garis

tambahan saat halaman ditampilkan:
17
Practice 4
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of
the browser window. If you resize the browser window, the number of
lines in this paragraph will change.
</p>
</body>
</html>

HTML Comment Tag
Komentar HTML tidak ditampilkan di browser, tetapi dapat

membantu mendokumentasikan kode sumber HTML Anda.
Perhatikan bahwa ada tanda seru (!) di tag awal,

tetapi tidak di tag akhir.
19
Practice 5
<!DOCTYPE html>
<html>
<body>



</body>
</html>
Shortcut: CTRL + /

Thank You
Meet 1

Pertemuan 1 - Struktur Dasar HTML 5

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 1 - Struktur Dasar HTML 5

Diunggah oleh

Hak Cipta:

Format Tersedia

Desain Web Meet 1

1.Mengenal Struktur HTML 5

E-Commerce Marketing Plan 2

 Pada dasarnya, HTML digunakan untuk

 Kedua tag tersebut berisi inisial yang

1. Tag: yaitu sintaks <..> dan </..> yang digunakan untuk

Di antara contoh-contoh tag dalam HTML:

Bayangkan kita memiliki dua buah tombol html seperti berikut:

Berarti, kita memiliki 2 buah elemen HTML berupa tombol.

Kita juga bisa mengatur panjang dan tinggi dari

E-Commerce Marketing Plan 12

HTML headings, adalah judul atau

HTML headings , didefinisikan

E-Commerce Marketing Plan 14

HTML Paragraphs, Paragraf selalu dimulai

Sebuah paragraf selalu dimulai pada

E-Commerce Marketing Plan 16

Anda tidak dapat memastikan bagaimana HTML akan

Layar besar atau kecil, dan jendela yang diubah ukurannya

Dengan HTML, Anda tidak dapat mengubah tampilan

Browser akan secara otomatis menghapus spasi dan garis

E-Commerce Marketing Plan 18

Komentar HTML tidak ditampilkan di browser, tetapi dapat

Perhatikan bahwa ada tanda seru (!) di tag awal,

E-Commerce Marketing Plan 20

Anda mungkin juga menyukai