Dokumen tersebut merupakan portofolio web seseorang bernama Rian Hidayat Saputra. Portofolio tersebut berisi tentang pengalaman dan prestasi yang dimiliki, seperti juara dalam beberapa lomba bidang web technology dan IT. Juga berisi link untuk belajar tentang HTML, CSS, dan PPT.
Dokumen tersebut membahas pengantar tentang HyperText Markup Language (HTML) yang merupakan bahasa format untuk menyajikan dokumen di World Wide Web. HTML digunakan untuk membuat struktur dasar dokumen dan mendefinisikan makna dari konten. Dokumen tersebut juga menjelaskan tag-tag dasar dan fungsi HTML lainnya seperti pengaturan teks, link, gambar, dan tabel.
Laporan ini membahas penggunaan CSS (Cascading Style Sheets) untuk merangkum konsep dasar dan implementasi CSS pada web. CSS digunakan untuk mengatur tampilan dokumen HTML dengan cara memformat teks, gambar, dan elemen lainnya. Laporan ini memberikan contoh script CSS, HTML, dan PHP beserta penjelasan tugas yang meliputi modifikasi gaya teks dan link, penambahan konten ke bagian kanan halaman, dan teks di bagian header.
Web Programming - Cascading Style Sheet Hari Setiaji
Dokumen tersebut memberikan penjelasan mengenai CSS (Cascading Style Sheets) yang mencakup pengertian, keuntungan, cara penulisan kode CSS, jenis selector, konsep inheritance, dan contoh property seperti font, color, dan background.
Website Alam memberikan tutorial pembuatan website tentang alam dengan menggunakan bahasa pemrograman HTML. Tutorial ini membahas tentang instalasi perangkat lunak seperti XAMPP dan Adobe Fireworks, dasar-dasar HTML, rancangan aplikasi berupa flowchart dan desain, serta cara pembuatan website yang terdiri dari berbagai halaman seperti home, profile, photos, about us, dan berbagai kategori seperti pengertian alam, cara melestarikan alam, serta foto-foto keind
Dokumen tersebut membahas pengantar tentang HyperText Markup Language (HTML) yang merupakan bahasa format untuk menyajikan dokumen di World Wide Web. HTML digunakan untuk membuat struktur dasar dokumen dan mendefinisikan makna dari konten. Dokumen tersebut juga menjelaskan tag-tag dasar dan fungsi HTML lainnya seperti pengaturan teks, link, gambar, dan tabel.
Laporan ini membahas penggunaan CSS (Cascading Style Sheets) untuk merangkum konsep dasar dan implementasi CSS pada web. CSS digunakan untuk mengatur tampilan dokumen HTML dengan cara memformat teks, gambar, dan elemen lainnya. Laporan ini memberikan contoh script CSS, HTML, dan PHP beserta penjelasan tugas yang meliputi modifikasi gaya teks dan link, penambahan konten ke bagian kanan halaman, dan teks di bagian header.
Web Programming - Cascading Style Sheet Hari Setiaji
Dokumen tersebut memberikan penjelasan mengenai CSS (Cascading Style Sheets) yang mencakup pengertian, keuntungan, cara penulisan kode CSS, jenis selector, konsep inheritance, dan contoh property seperti font, color, dan background.
Website Alam memberikan tutorial pembuatan website tentang alam dengan menggunakan bahasa pemrograman HTML. Tutorial ini membahas tentang instalasi perangkat lunak seperti XAMPP dan Adobe Fireworks, dasar-dasar HTML, rancangan aplikasi berupa flowchart dan desain, serta cara pembuatan website yang terdiri dari berbagai halaman seperti home, profile, photos, about us, dan berbagai kategori seperti pengertian alam, cara melestarikan alam, serta foto-foto keind
Dokumen tersebut membahas tentang Internet, World Wide Web, URL, DNS, web browser, server dan client, serta bahasa pemrograman server-side dan client-side. HTML dibahas sebagai bahasa markup standar untuk membuat halaman web dan menampilkan berbagai informasi. Struktur dasar HTML dan tag-tag dasarnya dijelaskan secara singkat."
Dokumen tersebut membahas pengantar HTML dan CSS. HTML digunakan untuk membuat halaman web dan menampilkan informasi, sedangkan CSS digunakan untuk mendesain tampilan halaman web. Dokumen tersebut menjelaskan struktur dasar HTML, elemen-elemennya, atribut, komentar, dan form. Untuk CSS dibahas macam-macamnya seperti inline, internal, dan eksternal CSS beserta contoh kodenya.
Dokumen tersebut membahas pengertian HTML sebagai bahasa markup standar untuk menampilkan dokumen web, serta menjelaskan beberapa elemen dasar HTML seperti <html>, <head>, <title>, <body>, dan tag-tag format teks seperti <p>, <h1-6>, <b>, <i>, dan hyperlink.
Dokumen ini memberikan penjelasan singkat tentang struktur dasar HTML dan tag-tag dasar yang digunakan dalam membuat dokumen web. Dibahas pula tentang elemen-elemen penting seperti <html>, <head>, <title>, dan <body> beserta atribut-atributnya.
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEBTeukuMahawira
Bab ini membahas format kaitan dan formulir pada halaman web. Format kaitan mencakup hyperlink dan link yang digunakan untuk menghubungkan halaman web. Sedangkan formulir digunakan untuk menerima masukan dari pengguna melalui berbagai jenis elemen seperti teks, pilihan, dan lainnya. Keduanya menggunakan tag HTML khusus seperti <a>, <form>, dan <input> beserta atribut-atributnya.
Modul ini membahas penggunaan tag-tag dasar HTML untuk membuat halaman web seperti format halaman, gaya teks, dan pengaturan tata letak teks. Modul ini juga membahas cara membuat daftar tak berurut dan tabel menggunakan tag seperti <ul>, <ol>, <li>, <dl>, <dt>, <dd>, dan <table>.
Dokumen tersebut membahas tentang pengenalan HTML (Hypertext Markup Language) sebagai bahasa markup standar untuk mengembangkan halaman web. Terdapat penjelasan mengenai tag, elemen, atribut HTML, serta contoh kode untuk mengatur format teks, warna latar belakang, heading, paragraf, daftar, gambar, dan tautan hyperlink.
Mengenal Struktur Web dan Bahasa Pemerograman HTMLNurdin Al-Azies
Untuk membuat halaman web diperlukan penguasaan HTML dan tujuan distribusi informasi. Teknologi seperti web server dan HTTP digunakan untuk mengirim dokumen HTML antara server dan browser. Dokumen HTML terdiri dari bagian header, body, dan properti untuk mengatur tampilan teks dan latar belakang.
Dokumen tersebut membahas tentang Internet, World Wide Web, URL, DNS, web browser, server dan client, serta bahasa pemrograman server-side dan client-side. HTML dibahas sebagai bahasa markup standar untuk membuat halaman web dan menampilkan berbagai informasi. Struktur dasar HTML dan tag-tag dasarnya dijelaskan secara singkat."
Dokumen tersebut membahas pengantar HTML dan CSS. HTML digunakan untuk membuat halaman web dan menampilkan informasi, sedangkan CSS digunakan untuk mendesain tampilan halaman web. Dokumen tersebut menjelaskan struktur dasar HTML, elemen-elemennya, atribut, komentar, dan form. Untuk CSS dibahas macam-macamnya seperti inline, internal, dan eksternal CSS beserta contoh kodenya.
Dokumen tersebut membahas pengertian HTML sebagai bahasa markup standar untuk menampilkan dokumen web, serta menjelaskan beberapa elemen dasar HTML seperti <html>, <head>, <title>, <body>, dan tag-tag format teks seperti <p>, <h1-6>, <b>, <i>, dan hyperlink.
Dokumen ini memberikan penjelasan singkat tentang struktur dasar HTML dan tag-tag dasar yang digunakan dalam membuat dokumen web. Dibahas pula tentang elemen-elemen penting seperti <html>, <head>, <title>, dan <body> beserta atribut-atributnya.
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEBTeukuMahawira
Bab ini membahas format kaitan dan formulir pada halaman web. Format kaitan mencakup hyperlink dan link yang digunakan untuk menghubungkan halaman web. Sedangkan formulir digunakan untuk menerima masukan dari pengguna melalui berbagai jenis elemen seperti teks, pilihan, dan lainnya. Keduanya menggunakan tag HTML khusus seperti <a>, <form>, dan <input> beserta atribut-atributnya.
Modul ini membahas penggunaan tag-tag dasar HTML untuk membuat halaman web seperti format halaman, gaya teks, dan pengaturan tata letak teks. Modul ini juga membahas cara membuat daftar tak berurut dan tabel menggunakan tag seperti <ul>, <ol>, <li>, <dl>, <dt>, <dd>, dan <table>.
Dokumen tersebut membahas tentang pengenalan HTML (Hypertext Markup Language) sebagai bahasa markup standar untuk mengembangkan halaman web. Terdapat penjelasan mengenai tag, elemen, atribut HTML, serta contoh kode untuk mengatur format teks, warna latar belakang, heading, paragraf, daftar, gambar, dan tautan hyperlink.
Mengenal Struktur Web dan Bahasa Pemerograman HTMLNurdin Al-Azies
Untuk membuat halaman web diperlukan penguasaan HTML dan tujuan distribusi informasi. Teknologi seperti web server dan HTTP digunakan untuk mengirim dokumen HTML antara server dan browser. Dokumen HTML terdiri dari bagian header, body, dan properti untuk mengatur tampilan teks dan latar belakang.
3. Lomba LKS bidang web
technology tingkat
kabupaten Pati tahun 2023
Juara 2
Juara 1
Muhammad Fahmi
‘Ainunnajib
Lomba LKS bidang IT
Software solution for
business tingkat kabupaten
Pati tahun 2022
4. Juara 1
Lomba LKS bidang IT
Software solution for
business tingkat kabupaten
jepara tahun 2022
Juara 2
Lomba LKS bidang IT
Software solution for
business tingkat kabupaten
Jepara tahun 2023
Rian Hidayat
Saputra
8. Definisi
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa markup standar
untuk membuat halaman web, yang kemudian dapat diakses untuk menampilkan
berbagai informasi di dalam web internet (Browser). Bahasa Markup bukan bahasa
pemrograman (programming language).
HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam
komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs
dalam web internet (Browser)
9. Fungsi
Secara umum, fungsi HTML adalah untuk mengolah serangkaian data dan informasi
sehingga suatu dokumen dapat diakses dan ditampilkan di internet melalui layanan web
Fungsi spesifik:
● Membuat halaman website
● Menampilkan berbagai informasi di dalam sebuah browser internet
● Membuat link menuju halaman web lain dengan kode tertentu (hypertext)
19. Tag Paragraf
Tag Fungsi
<p></p> Membuat teks paragraf
<br> Menambah baris baru
<hr> Membuat garis horizontal
<b></b> Membuat tulisan tebal
<i></i> Membuat tulisan miring
<u></u> Membuat tulisan bergaris bawah
27. Type Ordered List
<ol type=”1”></ol> 1. Data
<ol type=”A”></ol> A. Data
<ol type=”a”></ol> a. Data
<ol type=”i”></ol> i. Data
<ol type=”I”></ol> I. Data Note :
Secara default ordered list
adalah ber-type 1
30. Type Unordered List
<ul type=”disc”></ul> ● Data
<ul type=”square”></ul> ❏ Data
<ul type=”circle”></ul> ❖ Data
Note :
Secara default unordered list
adalah ber-type disc
35. Internal Link
Internal Link dapat digunakan apabila
terdapat file html di lokasi yang sama
dengan website yang kita buat
Index.html
page2.html
36. Relative URL
Relative URL dapat digunakan apabila
terdapat file html di dalam folder(folder
dalam folder) tetapi lokasinya masih
dalam satu folder yang sama dengan
website yang kita buat
Index.html
page2.html
37. Relative URL
Relative URL dapat digunakan apabila
terdapat file html di dalam folder(folder
dalam folder) tetapi lokasinya masih
dalam satu folder yang sama dengan
website yang kita buat
Index.html
page2.html
38. Page Anchor
Coba dan identifikasi code di
samping ini lalu klik link yang
berada di atas dan lihat apa
yang terjadi
Perhatikan kotak berwarna
merah! Penulisan href harus
menyesuaikan dengan id
44. Atribut : width & height
Mengatur ukuran lebar & tinggi gambar
Note:
Disarankan menggunakan salah satu (width/height)
supaya mendapatkan gambar yang proporsional
68. Definisi
CSS (Cascade Style Sheet) adalah sebuah markup language untuk mengatur tampilan
web sehingga terlihat lebih menarik dan indah.
Dengan menggunakan CSS, kita dapat mengatur layout (tata letak), warna, font, garis,
background, animasi, dan lain-lain.
69. Fungsi
● Digunakan untuk memilih dan memanipulasi elemen spesifik pada HTML.
● Elemen HTML dipilih berdasarkan tag, id, class, bahkan pola/pater.
● Semakin kompleks struktur HTML, selector juga bisa semakin kompleks / spesifik
76. Example
Note:
● Gunakan tanda titik untuk menyeleksi
sebuah class
● Gunakan tanda # untuk menyeleksi
sebuah id
Pilih tag h1 yang berada di dalam class satu. Lalu, ubah warnanya menjadi merah
Pilih tag h1 yang berada di dalam id dua. Lalu, ubah warnanya menjadi hijau
78. Penempatan
Tipe Penjelasan Syntax
Embed Ditulis di dalam tag <style> <style><style>
Inline Ditulis di atribut elemen HTML; <h1 style= color: cyan;>…</h1>
External Ditulis di file CSS terpisah dengan HTML. <link rel="stylesheet" href="style.css">
79. Embed
Kode CSS yang ditulis di dalam tag <style>. Embed juga dikenal
dengan Internal CSS.
Tag <style> bisa ditulis di dalam tag <head>, bisa juga ditulis di
dalam tag <body>. Namun kebanyakan orang menulisnya di
dalam <head>.
81. Inline
Kode CSS yang ditulis langsung pada atribut style di elemen
HTML.
Kode CSS ditulis langsung tanpa menggunakan kurung kurawal {
... }. Kemudian properti tetap dipisah dengan titik koma.
86. Property Font
Property Fungsi
font-family Mengatur jenis font yang akan digunakan
font-size Mengatur ukuran font
font-weight Mengatur ketebalan font
font-variant Mengubah font menjadi small caps
font-style Mengubah font menjadi bercetak miring
line-height Mengatur jarak antar baris
93. Property Text
Property Fungsi
color Memberi warna pada tulisan
text-align Mengatur format paragraf / teks
text-indent Memberi indentasi pada paragraph / teks
text-decoration Mengatur dekorasi pada teks
text-transform Mengubah jenis huruf menjadi huruf besar, kecil, & kapital
letter-spacing Mengatur spasi antar huruf
word-spacing Mengatur spasi antar kata
120. Property Text
Property Fungsi
background-color Mengatur warna pada background
background-image Mengatur gambar yang akan digunakan pada background
background-position Mengatur posisi gambar pada background
background-size Mengatur ukuran gambar pada background
142. Horizontal Alignment
Properti teks-alignment mengatur
perataan horizontal (kiri, kanan, atau
tengah) dari konten di <th> atau <td>
Secara default, konten elemen <th>
adalah center (rata tengah) dan konten
elemen <td> adalah left (rata kiri)
left
right
justify
center
144. Vertical Alignment
Properti vertical-align mengatur
perataan vertikal (atas, bawah, atau
tengah) konten di <th> atau <td>.
Secara default, konten elemen <th>
dan <td> adalah center (rata tengah).
baseline
middle
bottom
147. Flexbox
Teknik CSS untuk membuat layout atau mengatur
posisi pada sebuah halaman website
Model layout satu dimensi yang dapat mengatur
jarak dan penjajaran antar item dalam sebuah
container
148. Properti pada Container
Property Value Fungsi
display flex Membuat sebuah elemen parent menjadi flex
box dan membuat elemen-elemen di dalamnya
bisa berperilaku flex juga
flex-direction row, row-reverse, column, column-reverse Mengatur arah/urutan items di dalam container
flex-wrap no-wrap, wrap, wrap-reverse Secara default semua items di dalam container
akan berada pada satu baris meskipun
ukurannya sudah tidak cukup wrap
memungkinkan untuk memindahkan items ke
baris di bawahnya
justify-content flex-start, flex-end, center, space-between,
space-around, space-evenly
Mengatur jarak antar items secara horizontal
align-items flex-start, flex-end, center, stretch, base-line Mengatur kesejajaran items secara vertical
align-content flex-start, flex-end, center, stretch, space-
between, space-around
Mengatur jarak antar items terhadap garis
vertical (hanya berfungsi ketika items lebih dari
satu baris)
155. flex-wrap
Secara default semua items di dalam container akan berada pada satu
baris meskipun ukurannya sudah tidak cukup wrap memungkinkan
untuk memindahkan items ke baris di bawahnya.
Value:
● no-wrap
● wrap
● wrap-reverse
156. Wrap
Kotak nomor 5 turun ke
bawah karena panjang
containernya tidak muat
untuk menampung 5 kotak