Belajar Dasar Dasar Dan Contoh Pada HTML

HTML & CSS
LAB ICT TERPADU UNIVERSITAS BUDI LUHUR, LAB 02 - 13 JANUARI 2017

Apa itu HTML ?
HTML merupakan singkatan dari HyperText Markup Language.
Menurut Wikipedia sebuah bahasa markah yang digunakan untuk membuat
sebuah halaman web, menampilkan berbagai informasi di dalam sebuah
penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam
berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Format / Ekstensi File HTML, .html (dot html)

Fungsi
- Untuk Membuat Halaman Web
- Sebagai Pondasi Bagi Sebuah Website
- Bisa menampilkan informasi dalam bentuk apapun.
HTML5
Struktur HTML
<!DOCTYPE html>
HTML
<html> <html>
<head> <head>
<title> ... </title> <title> ... </title>
</head> </head>
<body> <body>
</body> </body>
</html> </html>
Elemen HTML
Sebuah elemen HTML umumnya tersusun dari tag pembuka dan tag penutup,
dengan konten yang disimpan diantara keduanya.
<namatag> isi didalam tag </namatag>
Tag HTML adalah nama dari elemen HTML, ditulis di antara tanda kurung sudut
< dan >, misalnya <h1> dan <p>.
Atribut HTML
Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen
HTML.
- Atribut HTML selalu didefinisikan di dalam tag pembuka suatu elemen.
- Semua elemen HTML dapat mengandung atribut, baik itu atribut yang umum
yang dapat dimiliki oleh semua elemen HTML, maupun atribut khusus untuk
elemen HTML tertentu.
Atribut HTML
Nilai atribut dapat menggunakan baik tanda kutip " maupun tanda petik '.
Contoh:
<h1 title=“Bosnya ‘Microsoft’”>Bill Gates</h1>
atau
<h1 title='Bosnya "Microsoft"'>Bill Gates</h1>
Comment
Adakalanya kita harus memberikan penjelasan di dalam dokumen HTML tentang
bagian-bagian tertentu di dalamnya, agar memudahkan kita atau orang lain untuk
memahami isi dari dokumen HTML tersebut. Terlebih lagi bila HTML yang kita
tulis sudah ratusan atau bahkan ribuan baris.


Code
Sebagai (calon) programmer tentu Kamu akan sering bersentuhan dengan kode program. Saat
Kamu membuat tulisan tentang kode programmu, Kamu akan perlu menampilkan kode agar
tampilannya lebih mudah dibaca. Daripada seperti ini:
var x = 5; var y = 6; alert(x + y); var x = 5;
Tentu akan lebih mudah dan nyaman dibaca bila ditulis seperti ini: var y = 6;
alert(x+y);
Maka diperlukan tag html <code>, karena tag <code> bersifat inline, maka diperlukan tambahan
tag yakni <pre> sebelum tag <code>
Text Formatting
<b> - mencetak tebal teks <del> - memberi coretan pada teks

<strong> - menandai teks penting <ins> - mengarisbawahi teks
<i> - mencetak miring teks <sub> - membuat tulisan lebih bawah dari
<em> - memberikan penekanan pada teks garis datar tulisan
<mark> - menandai teks dengan sorotan <sup> - membuat tulisan lebih atas dari
garis datar tulisan
<small> - membuat teks lebih kecil dari
ukuran bawaan
Form
Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima inputan dari
user. Melalui form, user pada sebuah halaman web dapat melakukan interaksi dengan web/sistem
tersebut.
<form action=“” method=“”> <form action=“xxx.html” method=“”> <form action=“” method=“post/get”>
Input elements Input elements Input elements

</form> </form> </form>
.CSS{}
Cascading Style Sheets
Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan
kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa
markup ini salah satunya adalah HTML.
CSS adalah kumpulan kode program yang digunakan untuk mendesain atau
mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain
dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
Fungsi CSS
- Memperindah tampilan
- Membuat halaman web semakin kompleks
Macam-macam CSS
- Inline CSS
- Internal CSS
- Eksternal CSS
Inline CSS
Yang dimaksud Inline CSS adalah kita memasukan kode css langsung dalam tag
HTML.
Contoh: <h1 style=“color:red”>LAB ICT</h1>
Maka hasil yang dari menggunakan inline tersebut, LAB ICT

Internal CSS
Internal CSS adalah kode kode css yang ditempatkan antara tag <head> </head>
Kemudian kita deklarasi css dengan menggunakan tag <style> kemudian di tutup
dengan penutup </style>
Internal CSS
....
........
<head>
<title>Belajar CSS</title>
<style>
.warna { color: red; }
</style>
</head>
....
......
Internal CSS
Untuk memanggil CSS kedalam tag html
...
<h1 class=“warna”>LAB ICT</h1>
...
Maka hasil yang didapat, LAB ICT
Eksternal CSS
Eksternal CSS adalah sebuah kode kode css dimana kode kode css itu sendiri
terpisah dari file HTMLnya, jadi kita memerlukan tag <link> untuk memanggil
file css yang telah kita buat.
Eksternal CSS
....
........
<head>
<title>Belajar CSS</title>
<link rel=“stylesheet” href=“namafile.css” type=“text/css”>
</head>
....
......
Eksternal CSS
Buatlah sebuah File dengan nama “namafile.css”, dan pastikan dalam satu folder
dengan html itu sendiri.
Ketik sebuah code css sebagai berikut

#warna { color: red; }
Eksternal CSS
Untuk memanggil Eksternal CSS sama seperti Internal CSS, namun pada eksternal
CSS harus tau dan benar keberadaan file cssnya itu sendiri.
...
<h1 id=“warna”>LAB ICT</h1>
...
Maka hasil yang didapat, LAB ICT

Belajar Dasar Dasar Dan Contoh Pada HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Belajar Dasar Dasar Dan Contoh Pada HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML & CSS

LAB ICT TERPADU UNIVERSITAS BUDI LUHUR, LAB 02 - 13 JANUARI 2017

Format / Ekstensi File HTML, .html (dot html)

<b> - mencetak tebal teks <del> - memberi coretan pada teks

<form action=“” method=“”> <form action=“xxx.html” method=“”> <form action=“” method=“post/get”>

Input elements Input elements Input elements

Contoh: <h1 style=“color:red”>LAB ICT</h1>

Maka hasil yang dari menggunakan inline tersebut, LAB ICT

Ketik sebuah code css sebagai berikut

Anda mungkin juga menyukai