Scribd
Unggah
30 tayangan

CSS 1

Modul ini membahas pembelajaran CSS dan Javascript untuk kelas X. Materi pembelajaran meliputi pengenalan HTML, CSS, dan Javascript beserta pemrograman dasar masing-masing bahasa. Projek akhir adalah membuat landing page portofolio.

Diunggah oleh

ppg.dhevytripratiwi52
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
30 tayangan

CSS 1

Modul ini membahas pembelajaran CSS dan Javascript untuk kelas X. Materi pembelajaran meliputi pengenalan HTML, CSS, dan Javascript beserta pemrograman dasar masing-masing bahasa. Projek akhir adalah membuat landing page portofolio.

Diunggah oleh

ppg.dhevytripratiwi52
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 17

Modul Materi Pembelajaran CSS & Javascript

Kelas X / Fase E
Semester Genap
Tahun Pelajaran 2023/2024

SMKN 5 Malang

Dhevytri Arum Pratiwi, S.Tr.Kom


ENTER CODE : 975459
Pemrograman Website Sederhana
Pengenalan HTML & pemrograman dasar HTML
Pengenalan CSS dan pemrograman dasar CSS
Pengenalaan Javascript dan pemrograman
dasar Javascriptt

Projek Akhir
Membuat Landing Page
(Halaman Utama Website berupa Portofolio
Kegiatan)
Pertemuan - 1
Peserta didik dapat Mengenal code editor pemrograman web, Apa itu HTML, beserta tag dan
elemen HTML
Software text editor untuk Membuat & Desain Website yang
paling sering digunakan

ADOBE SUBLIME
DREAMWEAVER
VISUAL STUDIO TEXT

Text editor : aplikasi unuk menulis syntax / kode program


Browser : aplikasi untuk menjalankan code html yang sudah ditulis. Seperti Chroems, Mozilla Firefox, Opera dll
Pemrograman HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa
formatting yang digunakan untuk membuat sebuah halaman
website. File HTML dsimpan dalam bentuk .html dan dapat
dijalankan dengan menggunakan web browser. HTML
merupakan pondasi dasar dalam pembuatan website
Kegunaan HTML

Membungkus elemen tertentu Membuat Form


sesuai kebutuhan Membuat Tombol
Membuat heading (format judul) Menampilkan gambar/ video, dll
Membuat Tabel, List, Paragraf
TAG, ELEMEN & ATRIBUT HTML
Tag HTML : Untuk mengenalkan text yang ditulis kepada web
browser.Penulisan tag dalan kurung sudut (<>). Awal tag <...>
sedangkan ahir tag </ ... >. Acuan dalam penggunaan tag adalah :

<h2> ... </h2> untuk membuat heading 2


<body> ... /<body> untuk menunjukkan isi dokumen
html
<head> ... </head> Mendefinisikan bagian kepala
<title> ... <membuat judul halaman>
<div> <mendefinisikan hlaman > <h2> : tag untuk membuat heading 2
<table> mendefinisikan table align: nama atribut
<td> </td> mendefinisikan sel / kolom dalam table center: nilai atribut
<tr> MMembuat baris dakam tabel “Pengenalan atribut HTML” : elemen tag h2
<li? mendefinikan isi list

Elemen html : Isi objek dalam sebuah tag


Atribut html : informasi tambahan dalam tag pembuka untuk memberikan efek
pada isi / elemen html . Yang ditulis dengan “name=value’
Belajar HTML
Pertemuan - 2
Peserta didik dapat memahami Pemrograman HTML Dasar : Membuat Paragraf dan
Menampilkan Gambar menggunakan HTML
Quizziz.com

Code : 874650
Materi

Mengenal Format Text & Membuat Mengenal Anchor Text Menampilkan Gambar
Paragraf
Pertemuan ke-3
1. Pengenalan CSS, Fungsi CSS & Jenis CSS
2. Pemrograman CSS Dasar : Penulisan CSS Inline, Internal, dan Eksternal
Quizziz.com

Code : 510711
Pengenalan CSS
CSS (Cascade Style Sheet) adalah sebuah bahasa untuk mengatur
tampilan web sehingga terlihat lebih menarik dan indah.
Dengan CSS, kita dapat mengatur layout (tata letak), warna, font,
garis, background, animasi, dan lain-lain.
Mempercepat loading halaman web
Satu rangkaian kode CSS dapat digunakan untuk beberapa halaman
01 website. Saat kita membuat website menggunakan CSS, loading
website akan lebih cepat.

Memudahkan pengelolaan kode

FUNGSI CSS 02 Ketika akan merubah background tampilan website, kita bisa
langsung edit/ rubah pada kode CSS tanpa harus mengganti
kode di tiap halaman.
Selain untuk memperindah tampilan
website, ada beberapa fungsi CSS Menawarkan lebih banyak variasi tampilan
diataranya :
03 HTML terbatas saat digunakan untukmengatur tampilan
halaman website. CSS lebih banyak menawarkan style
tampilan, Misal : kita ingin membuat tombol berwarna ataupun
dropdown, dengan menggunakan CSS

Membuat tampilan website lebih rapi di semua halaman


04 CSS mempunyai beragam property yang dapat digunakan untuk
mengatur tampilan website sesuai kebutuhan layar, misalnya dengan
max-width.
Jenis CSS
Eksternal Internal
Penulisan CSS eksternal, membuat file sendiri dengan Penulisan Internal CSS pada file HTML.
formatt .css. Kode bisa ditulis dalam elemen <head> </head> atau
File ini akan dipanggil pada elemen HTML link yang pada elemen <body> </body> pada file html
ditempatkan di bagian <head> ...</head>

Inline
Untuk CSS jenis inline, penulisan langsung pada file html dalam
elemen <body> </body> dengan atribut style. Inline CSS
biasanya digunakan untuk memberikan style pada satu elemen
saja. Kode CSS pada inline lebih diutamakan dari penulisan CSS
internal dan eksternal.
Penulisan CSS
Contoh Tampilan Website

Anda mungkin juga menyukai