Scribd
Upload
12 views19 pages

HTML Part 1

Html

Uploaded by

Salma Zopi habibah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views19 pages

HTML Part 1

Html

Uploaded by

Salma Zopi habibah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

PEMROGRAMAN INTERNET

Program Studi Sarjana Terapan Teknik Telekomunikasi

Materi 1 :
Hyper Text Markup Language (HTML)

Disusun Oleh :
Silfia Rifka - Herry Setiawan

2024
Pengantar

Apa itu HTML?


HTML adalah bahasa markup standar untuk halaman web. HTML adalah singkatan dari HyperText Markup Language dan digunakan
untuk membuat konten dan struktur halaman web mana pun.
Jika menganggap tubuh manusia sebagai halaman web, maka HTML adalah kerangka tubuh. HTML adalah blok penyusun halaman
web. HTML diciptakan oleh Berners-Lee pada akhir tahun 1991, tetapi "HTML 2.0" adalah spesifikasi HTML standar pertama yang
diterbitkan pada tahun 1995.

• HTML adalah singkatan dari Hyper Text Markup Language


• HTML adalah bahasa markup standar untuk membuat halaman Web
• HTML menjelaskan struktur halaman Web
• HTML terdiri dari serangkaian elemen
• Elemen HTML memberi tahu browser cara menampilkan konten
• Elemen HTML memberi label pada bagian konten seperti "ini adalah judul", "ini adalah paragraf", "ini adalah
tautan", dll.
Contoh Sederhana
2 Dokumen HTML
• Deklarasi <!DOCTYPE html> mendefinisikan
bahwa dokumen ini adalah dokumen HTML5
• Elemen <html> adalah elemen akar dari
halaman HTML
• Elemen <head> berisi informasi meta tentang
halaman HTML
• Elemen <title> menentukan judul untuk halaman
HTML (yang ditampilkan di bilah judul browser
atau di tab halaman)
• Elemen <body> mendefinisikan badan
dokumen, dan merupakan wadah untuk semua
konten yang terlihat, seperti judul, paragraf,
gambar, hyperlink, tabel, daftar, dll.
• Elemen <h1> mendefinisikan judul yang besar
• Elemen <p> mendefinisikan paragraf
Dasar HTML

Basic Tag

Elemen

Attribut

Heading

Comment

Paragraph

Formating

Background
Basic Tag
HTML
Heading Tag Paragraph Tag
Tag heading digunakan untuk menentukan heading dokumen. Anda Tag <p> menawarkan cara untuk menyusun teks Anda ke
dapat menggunakan berbagai ukuran untuk heading. HTML juga dalam beberapa paragraf yang penting untuk membuat konten
memiliki enam tingkatan heading, yang menggunakan elemen <h1>, web yang terorganisasi dengan baik dan mudah dibaca. Setiap
<h2>, <h3>, <h4>, <h5>, dan <h6>. Saat menampilkan heading apa paragraf teks harus berada di antara tag pembuka <p> dan tag
pun, browser menambahkan satu baris sebelum dan satu baris
penutup </p> seperti yang ditunjukkan di bawah ini dalam
setelah heading tersebut.
contoh.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head>
<title>Heading Example</title> <head>
</head> <title>Paragraph Example</title>
<body> </head>
<h1>This is heading 1</h1> <body>
<h2>This is heading 2</h2> <p>Here is a first paragraph of text.</p>
<h3>This is heading 3</h3> <p>Here is a second paragraph of
<h4>This is heading 4</h4>
text.</p>
<h5>This is heading 5</h5>
<p>Here is a third paragraph of text.</p>
<h6>This is heading 6</h6>
</body> </body>
</html> </html>
Basic Tag
HTML

Line Break Tag Centering the Content


Setiap kali Anda menggunakan elemen <br />, apa pun yang mengikutinya dimulai dari
baris berikutnya. Tag ini adalah contoh elemen kosong, di mana Anda tidak
Dapat menggunakan tag <center> untuk
memerlukan tag pembuka dan penutup, karena tidak ada yang dapat disisipkan di
antara keduanya.
meletakkan konten apa pun di tengah halaman
atau sel tabel mana pun.
Tag <br /> memiliki spasi di antara karakter br dan garis miring. Jika Anda
menghilangkan spasi ini, browser lama akan kesulitan menampilkan jeda baris,
sedangkan jika Anda menghilangkan karakter garis miring dan hanya menggunakan
<br>, maka itu tidak valid dalam XHTML.

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<head> <head>
<title>Line Break Example</title> <title>Centering Content Example</title>
</head>
</head>
<body>
<body>
<p>This text is not in the center.</p>
<p>
<center>
Hello <br /> You are on time.<br <p>This text is in the center.</p>
/> </center>
Thanks<br /> Mahnaz </body>
</p> </html>
</body>
Basic Tag
HTML
Horizontal Lines Preserve Formatting
Garis horizontal digunakan untuk membagi bagian-bagian dokumen Terkadang, Anda ingin teks Anda mengikuti format yang sama persis dengan format
penulisannya dalam dokumen HTML. Dalam kasus ini, Anda dapat menggunakan tag
secara visual. Tag <hr> membuat garis dari posisi saat ini dalam
praformat <pre>.
dokumen ke margin kanan dan membagi garis tersebut sesuai Tag pra umumnya digunakan untuk merender kode yang dapat diprogram dalam
dengan posisinya. Tag <hr /> adalah contoh elemen kosong, di dokumen. Teks apa pun di antara tag pembuka <pre> dan tag penutup </pre> akan
mana Anda tidak memerlukan tag pembuka dan penutup, karena mempertahankan format dokumen sumber. Artinya, jika Anda menambahkan karakter
tidak ada yang dapat disisipkan di antara keduanya. baris baru di antara dua huruf, karakter tersebut akan tercermin dalam dokumen
sebagaimana adanya.

<!DOCTYPE html> <!DOCTYPE html>


<html>
<html>
<head>
<head>
<title>Horizontal Line Example</title>
<title>Preserve Formatting Example</title>
</head>
</head>
<body>
<body>
<p>
<pre>
This is paragraph one and should be on top
This
</p>
<hr /> text
<p> is
This is paragraph two and should be at pre-formatted.
bottom </pre>
</p> </body>
</body> </html
Basic Tag
HTML
<!DOCTYPE html>
<html>
Nonbreaking Spaces
Misalnya, jika Anda ingin menggunakan frasa "12 <head>
Angry Men." Di sini, Anda tidak ingin browser klien <title>Nonbreaking Spaces Example</title>
memisahkan "12, Angry" dan "Men" menjadi dua </head>
baris.
<body>
Dalam kasus, di mana Anda tidak ingin browser <p>
klien memecah teks, Anda harus menggunakan An example of this technique appears
entitas spasi tanpa putus &nbsp; alih-alih spasi in the movie "12 Angry Men."
normal. </p>
<p>
An example of this technique appears
in the movie "12&nbsp;&nbsp;&nbsp;&nbsp;Angry
Men."
</p>
</body>

</html>
Attribute HTML
Atribut HTML digunakan untuk memberikan • Nama: Berisi properti yang ingin kita tetapkan. Misalnya,
elemen paragraf <p> dalam contoh ini memiliki atribut yang
informasi tambahan tentang elemen HTML,
namanya align, yang dapat Anda gunakan untuk
atribut adalah kata kunci yang dicadangkan. menunjukkan perataan paragraf pada halaman.
Kita telah melihat beberapa tag HTML dan • Nilai: Berisi nilai yang kita inginkan untuk ditetapkan sebagai
penggunaannya seperti <h1>, <h2>, <p>, nilai properti dan selalu diletakkan dalam tanda kutip. Contoh
<br>, <hr> dan tag lainnya. Sejauh ini kita di bawah ini menunjukkan tiga kemungkinan nilai atribut align:
left, center dan right
menggunakannya dalam bentuk yang paling
sederhana, tetapi sebagian besar tag HTML <!DOCTYPE html>
<html>
juga dapat memiliki atribut, yang merupakan
<head>
bit informasi tambahan. <title>HTML Attribute Example</title>
</head>
Atribut digunakan untuk menentukan <body>
<p align="left">Left Aligned</p>
karakteristik elemen HTML dan ditempatkan di
<p align="center">Center
dalam tag pembuka elemen. Semua atribut Aligned</p>
terdiri dari pasangan kunci & nilai : <p align="right">Right Aligned</p>
<tag attribute="Value">...<tag> </body>
</html>
Elemen HTML
Elemen HTML terdiri dari tag pembuka, tag penutup, dan konten di antaranya. Elemen HTML adalah
komponen dokumen HTML, yang memberi tahu browser bagaimana konten harus ditampilkan. Elemen ini
berisi instruksi pemformatan, makna semantik, dan konten.
Elemen HTML
Perbedaan antara tag dan elemen 1.Elemen HTML Sederhana
<!DOCTYPE html>
<html>
Semua elemen HTML dibuat
<head>
menggunakan tag HTML. Namun,
<title>HTML Smiple Element</title>
elemen HTML didefinisikan oleh </head>
sepasang tag pembuka dan tag penutup. <body>
Di dalam tag ini, kita menempatkan <h1>This is Header Element</h1>
konten dokumen HTML yang selanjutnya <p>This is Paragrapgh Element</p>
menciptakan tata letak dan struktur </body>
</html>
halaman web.

Misalnya, <p> adalah tag pembuka


paragraf dan </p> adalah tag penutup
paragraf yang sama, tetapi <p>Ini adalah
paragraf</p> adalah elemen paragraf.
Elemen HTML
2. HTML Nested Element 3. HTML Empty Element

Dalam contoh ini kita akan membuat satu Dalam contoh ini kita akan membuat elemen
elemen bersarang, satu elemen induk, dan dua kosong di antara dua elemen sederhana.
elemen anak di dalam elemen induk. <!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <head>
<title>HTML Smiple Element</title>
<head> </head>
<title>HTML Nested Element</title> <body>
</head> <h1>This is Header Element</h1>
<body> <hr>
<p> <p>This is Paragrapgh Element</p>
This is parent element containing </body>
<span>Child Elelement 1</span> &
<span>Child Elelement 2</span>.
</p>
</body>
</html>
HTML - Attributes
Ada beberapa aturan dan karakteristik atribut seperti bagaimana kita harus menggunakan atribut pada elemen atau tag
HTML.

• HTML menyediakan informasi <!DOCTYPE html>


<html>
tambahan tentang elemen
• Atribut harus selalu disebutkan di <head>
tag pembuka. <title>HTML Attribute Example</title>
• Semua elemen HTML dapat </head>
memiliki atribut kecuali beberapa
seperti <head>, <title>, dll. <body>
<p align="left">Left Aligned</p>
<p align="center">Center Aligned</p>
<p align="right">Right Aligned</p>
</body>

</html>
HTML - Attributes

<!DOCTYPE html>
HTML Global Attributes <html>
<head>
Global attributes are common to all HTML
<title>HTML id Attribute</title>
elements and can be used universally. Some of
<style>
the most important global attributes include: #html{
color: red;
}
HTML id Attribute #html{
color:green;
Atribut id dari tag HTML dapat digunakan untuk }
mengidentifikasi secara unik setiap elemen </style>
dalam halaman HTML. Jika Anda memiliki dua </head>
<body>
elemen dengan nama yang sama dalam
<p id="html">
halaman Web (atau style sheet), Anda dapat This para explains what is HTML
menggunakan atribut id untuk membedakan </p>
antara elemen yang memiliki nama yang sama. <p id="css">
This para explains what is CSS
</p>
</body>
</html>
HTML - Attributes

HTML title Attribute


<!DOCTYPE html>
<html>
Atribut title memberikan judul yang disarankan
untuk elemen tersebut. Sintaks untuk atribut title
<head>
serupa dengan yang dijelaskan untuk atribut id.
<title>HTML title Attribute</title>
</head>
Perilaku atribut ini akan bergantung pada elemen
yang membawanya, meskipun sering
<body>
ditampilkan sebagai tooltip saat kursor berada di
<h3 title="Hello HTML!">
atas elemen atau saat elemen sedang dimuat.
Hover mouse here to see my title
</h3>
</body>

</html>
HTML - Attributes

<!DOCTYPE html>
HTML class Attribute <html>

<head>
<title>HTML class Attribute</title>
Atribut class digunakan untuk <style>
.borderStyle{
mengaitkan elemen dengan style sheet,
border: solid black 5px;
dan menentukan kelas elemen. Anda }
akan mempelajari lebih lanjut tentang .colorStyle{
penggunaan atribut class saat color:red;
}
mempelajari Cascading Style Sheet </style>
(CSS). </head>

<body>
<p class="borderStyle colorStyle" >
Welcome to Tutorialspoint...
</p>
</body>

</html>
HTML - Attributes

HTML style Attribute


<!DOCTYPE html>
<html>
Atribut style memungkinkan Anda
menentukan aturan Cascading Style <head>
Sheet (CSS) dalam elemen. <title>HTML style Attribute</title>
</head>

<body>
<p style="font-family:arial; color:#FF0000;">
Welcome to Tutorialspoint...
</p>
</body>

</html>
HTML - Headings
Heading using h1-h6 tags
Judul HTML digunakan untuk menentukan
hierarki (tingkatan) dan struktur konten pada
<!DOCTYPE html>
halaman web. Judul HTML menciptakan
<html>
hierarki visual, dengan judul tingkat tertinggi,
<body>
yaitu h1, yang menunjukkan konten terpenting
<h1>This is heading 1</h1>
atau judul utama, dan judul tingkat lebih
<h2>This is heading 2</h2>
rendah seperti h2, h3, h4, dst. untuk subtopik.
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h5>This is heading 6</h5>
</body>
</html>
HTML - Headings

<!DOCTYPE html>
Heading using CSS properties <html>
<head>
Dalam contoh ini kita akan menggunakan <style>
properti font-size dan font-weight CSS untuk p{
membuat elemen heading dari elemen font-size: 24px;
paragraf. font-weight: bold;
}
</style>
</head>
<body>
<p>Tutorialspoint</p>
<p>Simply Easy Learning</p>
</body>

</html

You might also like