Scribd
Unggah
82 tayangan

Fundamental HTML + Css 1

Dokumen tersebut membahas tentang HTML dan CSS. HTML adalah bahasa markup yang digunakan untuk menampilkan konten di browser web, sedangkan CSS digunakan untuk mengatur tampilan dan tata letak konten HTML. Dokumen ini menjelaskan tag-tag dasar HTML beserta fungsinya dan memberikan contoh kode HTML sederhana.

Diunggah oleh

Ikha Kim
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
82 tayangan

Fundamental HTML + Css 1

Dokumen tersebut membahas tentang HTML dan CSS. HTML adalah bahasa markup yang digunakan untuk menampilkan konten di browser web, sedangkan CSS digunakan untuk mengatur tampilan dan tata letak konten HTML. Dokumen ini menjelaskan tag-tag dasar HTML beserta fungsinya dan memberikan contoh kode HTML sederhana.

Diunggah oleh

Ikha Kim
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/ 11

FUNDAMENTAL

HTML + CSS
MUHAMAD RIZKY FAJAR FEBRIAN
APA ITU HTML DAN CSS?
HTML adalah kependekan dari Hypertext Markup Language. Artinya adalah bahasa markup (penanda)
berbasis text atau bisa juga disebut sebagai formatting language (bahasa untuk memformat), Jadi sudah
jelas bahwa HTML bukanlah bahasa pemrograman, melainkan bahasa markup/formatting. Sedangkan CSS
adalah Cascading Style Sheet untuk mempercantik tampilan HTML.

2
PERSIAPAN
# WEB BROWSER

Hal yang wajib dipersiapkan adalah web


browser untuk menampilkan halaman web
yang telah dibuat dengan HTML dan CSS.

Direkomendasikan untuk menggunakan


google chrome atau firefox.

Ada yang tahu perbedaan web browser


dan search engine?

This Photo by Unknown Author is licensed under CC BY-SA

3
PERSIAPAN
#Text editor
Text editor adalah tools yang digunakan
untuk membantu menulis kode program.

Contohnya ada sublime text, visual studio


code, notepad, notepad ++, atom, vim dll.

Disarankan menggunakan sublime text


karena ringan namun sangat banyak fitur.

4
HTML
Semua halaman web yang kalian buka seperti
facebook.com, twitter.com, google.com dll itu
ditampilkan dengan menggunakan HTML. Jadi bisa
dibilang html itu adalah bahasa dasar untuk
menampilkan halaman web pada web browser.

Kita bisa lihat kode yang dituliskan pada halaman web


google.com
Buka http://www.google.com kemudian klik kanan
dan klik “Inspect Element”

5
MEMBUAT WEBSITE 0.5 MENIT

Penulisan Code pada HTML Hasil yang ditampilkan pada browser

6
STRUKTUR FILE HTML

Penulisan Code pada HTML Hasil yang ditampilkan pada browser

Ada beberapa tak yang harus ditulis dan sudah menjadi ketentuan.

7
Tag Dasar HTML
Seperti yang sudah kita ketahui HTML hanya me Tag Fungsi
markup suatu dokumen, Sebagai analogi seperti kita
menggunakan ms Word untuk menebalkan, <!DOCTYPE html> Untuk mendefinisikan tipe dokumen
memiringkan teks, membuat tabel, gambar, garis <html> Tak pembuka untuk membuat dokumen HTML
bawah, judul, list dll.
<head> Untuk mendefinisikan bagian kepala html
Nah pada HTML digunakanlah tak HTML. Contoh
untuk memiringkan teks dapat ditulis sebagai berikut <title> Untuk mendefinisikan judul halaman
<i>Web pertama saya</i> <body> Untuk mendefinisikan bagian body/isi dok html

<!-- ... --> Untuk memberi komentar/keterangan

8
Tag Fungsi

<h1> Untuk membuat heading atau judul

<p> Untuk membuat paragraf

<i> Untuk membuat teks miring


Lebih lanjut Tag HTML <b> Untuk membuat teks tebal
Seperti yang sudah kita ketahui HTML hanya me <u> Untuk membuat teks bergaris bawah
markup suatu dokumen, Sebagai analogi seperti kita
menggunakan ms Word untuk menebalkan, <a> Untuk mendefinisikan anchor / link antar dokumen html.
memiringkan teks, membuat tabel, gambar, garis
bawah, judul, list dll. <img> Untuk mendefinisikan gambar

Nah pada HTML digunakanlah tak HTML. Contoh <ul> atau <ol> Untuk mendefinisikan daftar dalam format bullet
untuk memiringkan teks dapat ditulis sebagai berikut
<li> Untuk mendefinisikan daftar list
<i>Web pertama saya</i>
<hr> Untuk membuat garis horizontal

<br> Untuk membuat baris baru

<table> Untuk membuat tabel

<form> Untuk membuat formulir

<sub> Untuk membuat subscript

<sup> Untuk membuat superscript

<div> Untuk membuat division atau bagian


9
PRAKTIKUM

10
TUGAS PRAKTIKUM

Tag HTML Tugas PKL Pandonga Creative Pertemuan 26 Maret


2021
<!DOCTYPE html> <h6> • Buatlah file html sederhana menggunakan tag html
<html> <p> sesuai tabel di samping (gunakan semua)
<head> <i> • Tema file html yang dibuat bebas. Contoh :
Halaman selamat datang, biodata, portfolio dll
<title> <u>
• Gunakan struktur html sesuai materi yang telah
<body> <b> diajarkan
<h1> <a> • Desain dan atur halaman html yang kalian buat
semenarik mungkin. (nilai ++)
<h2> <ul>
• Tugas dikumpulkan maksimal tanggal 04 Juli 2021
<h3> <ol> pukul 12.00 WIB melalui link
<h4> <hr> https://forms.gle/jvQYcirBJHrz8qcr9
<h5> <br>
11

Anda mungkin juga menyukai