Pada pertemuan
III mempelajari cara mengimplementasikan html untuk
merancang
tampilan web.
Seperti yang biasanya
dilakukan,langkah awal untuk memulainya adalah:
1. Buka
aplikasi Notepad
Start – klik Notepad
2. Buat
ketiga struktur HTML
<html>
<head>
</head>
<body>
</body>
</html>
3.
Simpan
kode dengan nama yang diinginkan, kali ini saya menimpan nya dengan nama P3.1.html ingat untuk membuat “.html”
4.
Buka
file
yang telah disimpan melalui web browser apa saja
Untuk tahap ini akan digunakan CSS. CSS(Cascading Style
Sheet) merupakan bahasa yang digunakan untuk memformat tag-tag yang ada. Css
dapat digunakan dalam kode HTML dengan 3 cara yaitu:
- Inline CSS
Adalah kode CSS yang ditulis langsung pada atribut/elemen
HTML.
Contoh: <p
style=" font-family
:verdana;
line-height
:25px;
color
:pink;
background-color:black;">
- Internal CSS
Digunakan
untuk memberi style yang hanya berlaku pada satu laman web style yang
diberikan,diapit oleh tag<style>
</style> dan diletakkan pada bagian <head> </head>.
Contoh: <head>
<title> Praktikum 3.1 </title>
<style>
a {
text-decoration: none;
}
a:hover{
color :yellow;
}
</style>
</head>
- External CSS
Merupakan file yang berektensi .css yang hanya berisi
kode-kode style. Tujuan menggunakan eksternal CSS adalah untuk memisahkan kode
style dengan struktur dan tipe onten laman web. Eksternal CSS dapat
diaplikasikan pada lebih dari satu laman Web.
Ada 2 hal yang akan kita buat
kali ini, jadi langsung saja pada yang pertama:
Ø Rancang halaman utama yang pertama
logo
|
|||
home
|
product
|
data
|
Login
|
CODE:
<html>
<head>
<title> Praktikum 3.1 </title>
<style>
a {
text-decoration: none;
}
a:hover{
color :yellow;
background-color:black;
font-size :20px;
}
</style>
</head>
<body>
<table border=1px width=85%>
<tr>
<td colspan=4> <img
src=LOGOBP.PNG> </td> *colspan=Menggabungkan
kolom
</tr>
<tr>
<td align=center> <a href=>
Home </a> </td>
<td align=center> <a href=>
Product </a> </td>
<td align=center> <a href=>
Data </a> </td>
<td align=center> <a href=>
Login </a> </td>
</tr>
<tr>
<td colspan=4><h1> Home
</h1>
<p style="font-family :verdana;
line-height :25px;
color :pink;
background-color:black;
text-align :justify;
text-indent :30px;
padding-left :10px;
padding-right :10px;
">
<span style ="font-size :20px;
color :black;
background :white;"> Blackpink
</span>
adalah salah satu idol kpop
terpopuler pada zaman modern ini.
Bahkan orang-orang yang bukan
kpopers menikmati lagu yang dinyanyikan
mereka dengan judul "Ddu Ddu
Ddu". Blacpink masih sangat muda dibanding idol
lainnya, namun sudah banyak menerima
penghargaan karena mampu menarik perhatian
masyarakat korea maupun mancanegara
termasuk di Indonesia. Fandom mereka bernama
BLINK, dan sudah banyak sekali BLINK
di Indonesia. Memang Idol dengan 4 member ini
yaitu Jisoo,Lisa,Rose dan Jenie
sangat berpengaruh di banyak khalangan mastarakat.
</p>
<p style="font-family :verdana;
line-height :25px;
color :black;
background-color :pink;
text-align :center;
text-indent :30px;
padding-left :10px;
padding-right :10px; ">
<span style ="font-size
:20px;
color :pink;
background
:white;"> Blackpink </span>
adalah salah satu idol kpop
terpopuler pada zaman modern ini.
Bahkan orang-orang yang bukan
kpopers menikmati lagu yang dinyanyikan
mereka dengan judul "Ddu Ddu
Ddu". Blacpink masih sangat muda dibanding idol
lainnya, namun sudah banyak menerima
penghargaan karena mampu menarik perhatian
masyarakat korea maupun mancanegara
termasuk di Indonesia. Fandom mereka bernama
BLINK, dan sudah banyak sekali BLINK
di Indonesia. Memang Idol dengan 4 member ini
yaitu Jisoo,Lisa,Rose dan Jenie
sangat berpengaruh di banyak khalangan mastarakat.
</p>
</td>
</tr>
<tr>
<td colspan=4 align=center
bgcolor=pink>Hakcipta©BPBLINK </td>
</tr>
</table>
</body>
</html>
Dan beginiah hasil dari
rancangan pertama
Ø
Rancang halaman produk yang kedua
logo
|
||||||||||
home
|
product
|
data
|
Login
|
|||||||
|
||||||||||
CODE:
<html>
<head>
<title> Praktikum 3.2.1 </title>
<style>
a {
text-decoration: none;
}
a:hover{
color :yellow;
background-color:black;
font-size :30px
}
</style>
</head>
<body>
<table border=1px width=85%>
<tr>
<td colspan=4> <img
src=LOGO2.PNG> </td>
</tr>
<tr>
<td align=center> <a href=>
Home </a> </td>
<td align=center> <a href=>
Product </a> </td>
<td align=center> <a href=>
Data </a> </td>
<td align=center> <a href=> Login
</a> </td>
</tr>
<tr>
<td colspan=4><h1>
Product </h1>
<table>
<tr>
<td rowspan=3> <img src =
P1.PNG> </td>
<td> <img src = P2.PNG>
</td>
<td> <img src = P3.PNG>
</td>
</tr>
<tr>
<td> <img src = P4.PNG>
</td>
<td> <img src = P5.PNG>
</td>
</tr>
<tr>
<td> <img src = P6.PNG>
</td>
<td> <img src = P7.PNG>
</td>
</tr>
</table>
<tr>
<td colspan=4 align=center
bgcolor=pink>Hakcipta©BPBLINK </td>
</tr>
</table>
</body>
</html>
Dan beginiah hasil dari
rancangan kedua:
Terimakasih untuk kunjungan anda
Please like 💜, comment and share
Semoga Bermanfaat dan selamat mencoba 😊😊
Tidak ada komentar:
Posting Komentar