(6b-Pw1-To1) Kelvin Ilyas + 41518120066

Fakultas Program Studi Mata Kuliah Di susun Oleh
Fakultas Ilmu Komputer Informatika Pemograman Web 1 Kelvin Ilyas / 41518120066
1. Jelaskan dan berikan contoh Physical Formatting & Logical Formatting

Physical Formatting : Format yang digunakan untuk melakukan text formatting
secara fisik tanpa adanya maksud tertentu dari penggunaannya. Biasanya digunakan
hanya untuk memperlihatkan bahwa sebuah teks tidak datar sehingga tidak
membosankan saat di lihat.
Contoh: “Saya adalah mahasiswa Teknin Informatika di Universitas Mercu Buana”
Teknik Informatika di tebalkan karna hanya agar text dapat terlihat menarik sehingga
tidak membosankan saat di lihat.
Tag-tag Physical Formatting:
TAG FUNGSI
<b> … </b> Bold (karakter tebal)
<i> … </i> Italic (karakter miring)
<u> … </u> Underline (karakter bergaris bawah)
<s> … </s> Strike ( karakter coret = <strike> )
<big> … </big> Karakter besar
<small> …
Karakter kecil
</small>
<blink> … </blink> Karakter berkedip
<sup> … </sup> Superscript (perpangkatan)
<sub> … </sub> Subscript (perpangkatan bawah)
<tt> … </tt> Teletype
Logical Formatting: Format yang digunakan untuk melakukan text formatting

secara logic berdasarkan makna atau maksud dari sebuah teks. Biasanya digunakan
untuk mengisyaratkan arti tertentu dari sebuah teks.
Contoh: “ Saya adalah Mahasiswa di Universitas Mercu Buana”
Mahasiswa di berikan style font Italic dan Universitas Mercu Buana di berikan style
font bold yang dimaksudkan ada penekanan/maksud dari sebuah teks tersebut.
Bahwa dia adalah seorang Mahasiswa, dan dia menegaskan bahwa dia adalah
Mahasiswa di Mercu Buana
Tag-tag Logical Formatting:
STYLE NAME TAG STYLE
Pada
Emphasize (penegasan) <em>
umumnya italic
Strong emphasize (penegasan) <strong> Pada umumnya bold
Pada
Citation (kutipan) <cite>
umumnya italic
Pada
Definition (penjelasan) <dfn>
umumnya italic
Abbreviation (singkatan) <abbr> Tooltip
Code (syntax / command) <code> Monospaced font
2. Jelaskan dan berikan contoh Elment/tag hatml

a. Tag Paragraf
No Nama Tag Fungsi
1 <p> Membuat paragraf
2 <br> Membuat baris baru
3 <pre> Memfortmat teks atau kalimat
Contoh:
<p> Welcom To My Page </p>
<br> Nama saya Kelvin
<pre>
#include <iostream.h>
If(nilai = 0){ goto home; }
</pre>
Tampilan:
b. Tag font
No Nama Tag Fungsi
1 <font> Tag untuk membuat font, warna, dan size text

Contoh:
<font face="arial" size="5" color="blue">Conotoh Teks Arial warna biru </font>
Tampilan:
c. Tag Table
No Nama Tag Fungsi
1 <table> Membuat tabel pada web
2 <tr> Membuat baris pada tabel
3 <td> Membuat kolom pada tabel
Membuat judul pada kolom.
4 <th>
Contohnya nama, kelas, dan alamat.
6 border Mengatur garis tabel
7 border-collapse Mengatur batas garis tabel
8 padding Mengatur padding pada cell
9 text-align Mengatur perataan pada konten tabel
Menggabungkan beberapa kolom.
11 colspan
Kalau di office disebutnya Merge Cell
12 rowspan Menggabungkan beberapa baris
Contoh: Tampilan:
border
<html>
th th th
<style>
table, th, td {
padding tr
border: 1px solid black;
td td td
padding: 5px; Text-align=
} “center”
table { penempatan
text di
border-spacing: 15px;
tengah/cent
}
</style>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Umur</th>
</tr>
<tr text-align="center">
<td>Kelvin</td>
<td>Ilyas</td>
<td>20</td>
</tr>
</table>
</html>
d. Tag Gambar
No Nama Tag Fungsi
1 <img> Elemen untuk mendefinisikan gambar
2 src Atribut untuk menentukan URL gambar
Mendefinisikan teks pada gambar, jika
3 alt
gambar tidak dapat ditampilkan
4 width – height Menentukan ukuran gambar
Contoh:
<img src="img_me.jpg" alt="Koala" width="300" height="300">
Tampilan:
e. Tag Heading
No Nama Tag Fungsi
Membuat judul atau heading
1 <h1> s/d <h6>
(Semakin besar skala header smakin kecil tampilan headernya)
Contoh:
<h1>Contoh Heading 1</h1>
<p>Sample text 1</p>
<hr>
<h2>Contoh Heading 2</h2>
<p>Sample text 2</p>
<hr>
<h6>This is heading 2</h6>
<p>This is some other text.</p>
f. Tag Link
No Nama Tag Fungsi
1 <a> Tag untuk membuat hyperlink
Tag untuk membuat hubungan antara dokumen dan
2 <link> sumber daya eksternal (paling sering digunakan untuk
link ke style sheet/css)
Contoh:
<link rel="stylesheet" type="text/css" href="sample.css">
<h2>Contoh Link</h2>
<p>Paragraf pertama <i>external css</i>.</p>
<h4>Saya sedang belajar HTML dari
<a href="https://www.google.com">Google</a></p> </h4>
Tampil:
g. Tag Style
No Nama Tag Fungsi
1 style Atribut untuk elemen styling pada HTML
background-
2 color Memberikan warna latar belakang
3 color Memberi warna pada teks
4 font-family Mengubah font pada teks
5 font-size Mengatur ukuran font
6 text-align Mengatura perataan teks
Contoh:
<h1 style="text-align:center;">Text Tengah</h1>
<p style="text-align:right;">Text Kanan</p>
Tampil:
h. Tag List
No Nama Tag Fungsi
Untuk membuat tampilan daftar menggunakan simbol
1 <ul> seperti bullet, cyrcle, dan lainnya.
2 <ol> Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya
3 <li> Menentukan berbagai item yang ingin ditampilkan
Contoh:
<h2>Contoh List</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Tampil:
i. Tag Span & Div
No Nama Tag Fungsi
1 <span> tag span termasuk kedalam in-line tag.
2 <div> Tag div termasuk kedalam jenis block-line
Jenis Block Line adalah tag yang ‘ingin’ berdiri sendiri, dan memisahkan
diri dari tag disekitarnya.
Jenis In-Line adalah tag yang tidak membuat blok baru di dalam struktur
HTML. Tampil:
Contoh:
<html>
<style type="text/css">
#paragraf {
font-weight: bold;
}
.miring{
font-style: italic;
}
</style>
<head>
<title>Belajar HTML </title>
</head>
<body>
<p>
<strong>This is a <em>paragraf</em>. </strong>
</p>
<div id="paragraf">
Ini juga Sebuah <span class="miring">paragraf</span>
</div>
</body>
</html>
3. Jelaskan dan berikan contoh Absolute Path dan Relative Path
Absolute Path adalah sebuah jalur yang biasa digunakan dalam URL yang dimulai
dari direktori root atau direktori asal
Relative Path adalah sebuah jalur yang dimulai dari direktori akhir dimana file HTML
di jalankan.
Misal:
- Letak file HTML yang di jalankan dan unutk mengakses folder gambar :
"D:\kelvin\ desktop \test.html"
- Absolute path gambar yang akan diakses :
"D:\kelvin\desktop\gambar\test_gambar.jpg"
- Relative path dari gambar berdasarkan posisi file HTML yang
mengaksesnya : "gambar\test_gambar.jpg"
- {Direktori Root/Asal} + {relative path} => {absolute path}
- "D:\kelvin\ desktop \" +"gambar\test_gambar.jpg" =>"D:\kelvin\desktop\gambar\
test_gambar.jpg”

(6b-Pw1-To1) Kelvin Ilyas + 41518120066

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

(6b-Pw1-To1) Kelvin Ilyas + 41518120066

Diunggah oleh

Hak Cipta:

Format Tersedia

Fakultas Program Studi Mata Kuliah Di susun Oleh

Fakultas Ilmu Komputer Informatika Pemograman Web 1 Kelvin Ilyas / 41518120066

1. Jelaskan dan berikan contoh Physical Formatting & Logical Formatting

Logical Formatting: Format yang digunakan untuk melakukan text formatting

2. Jelaskan dan berikan contoh Elment/tag hatml

1 <font> Tag untuk membuat font, warna, dan size text

diri dari tag disekitarnya.

Anda mungkin juga menyukai