06.25
Unknown
1. Jelaskan
apa yang dimaksud dengan HTML? (2 point)
2. Jelaskan
apa yang dimaksud dengan CSS? (2 point)
3. Tuliskan
sintaks pada dokumen HTML yang benar untuk (2point)
a. Menyisipkan
gambar (image)
b. Menyisipkan
link
4. Buatlah
file design.html dengan penulisan
CSS : eksternal style sheet! (lihat gambar
1 design web ) dibawah ini (4 point)
Gambar 1 design
web
warna : hitam
|
cari.png
|
||
menu1.png
|
menu2.png
|
menu3.png
|
menu4.png
|
warna: biru
|
warna:
kuning
|
||
warna
: hijau
|
|||
warna
: putih
|
|||
warna : putih
|
|||
Kriteria
design web
|
|
*)
tinggi keseluruhan
*)
lebar keseluruhan
*)
background
*)
judul
|
:
1400px
:
800 px
:
sesuai dengan nama –nama gambar/warna diatas
 Sesuai soal pda soal a dan b design.html
dan external-style-sheet.css |
Jawab :
1.
HTML
adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman
standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat
diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser) .
2.
Cascadng Style Sheets (CSS ) adalah
sebuah file berisi baris kode untuk memberitahukan pada web browser bagaimana
sebuah halaman HTML ditampilkan, umumnya presentasi yang diatur adalah tampilan
dan format halaman sebuah dokumen. css digunakan
secara luar untuk mengatur gaya tampilan sebuah halaman website yang tertulis dalamn HTML.
3.
jawab
a.
Menyisipkan gambar : <img src=”riris.jpg”
width=”200px” height=”200px”
b.
Menyisipkan
link : <a
href=”riris_18.html”>link ke web petanian </a>
warna : hitam
|
cari.png
|
||
menu1.png
|
menu2.png
|
menu3.png
|
menu4.png
|
warna: biru
|
warna:
kuning
|
||
warna
: hijau
|
|||
warna
: putih
|
|||
warna : putih
|
|||
<html>
<head><title>design
html dan eksternal-style sheet css</title>
<style
type="text/css">
Body {Background-color:grey}
#kotak_satu { height:200px;
width:800px;}
#kotak_besar { height:100px;
width:800px;}
#kotak_besarb { height:300px;
width:800px;}
#kotak_besarc { height:300px;
width:800px;}
#kotak_hitam {height:200px;
width:600px; background-color :black; float:left;}
#kotak_search {height:200px;
width:200px; background-color :orange; float:right;}
#kotak_menua {height:100px;
width:200px; background-color :pink; float:left;}
#kotak_menub {height:100px;
width:200px; background-color :red; float:right;}
#kotak_menuc {height:100px;
width:200px; background-color :pink; float:right;}
#kotak_menud {height:100px;
width:200px; background-color :red; float:right;}
#kotak_biru {height:300px;
width:600px; background-color :blue; float:left;}
#kotak_kuning {height:100px;
width:200px; background-color :yellow; float:left;}
#kotak_hijau {height:100px;
width:200px; background-color :green; float:left;}
#kotak_putih {height:100px;
width:200px; background-color :white; float:left;}
#kotak_bawah {height:300px;
width:800px; background-color :white; float:left;}
</style>
</head>6
<body>
<div
id="kotak_satu">
<div
id="kotak_hitam"><img src="7.jpg"
width="269px" height="188px"></div>
<div
id="kotak_search"><img src="1.png"
width="200px" height="100px"></div>
</div>
<div
id="kotak_besar">
<div
id="kotak_menua"><img src="2.png"
width="200px" height="100px"></div>
<div
id="kotak_menub"><img src="3.png"
width="200px" height="100px"></div>
<div
id="kotak_menuc"><img src="4.png"
width="200px" height="100px"></div>
<div
id="kotak_menud"><img src="5.png"
width="200px" height="100px"></div>
</div>
<div
id="kotak_besarb">
<div
id="kotak_biru">...</div>
<div
id="kotak_kuning">...</div>
<div
id="kotak_hijau">...</div>
<div
id="kotak_putih">...</div>
</div>
<div
id="kotak_besarc">
<div
id="kotak_bawah"><h1>SELAMAT BERGABUNG
</h1></div>
0 komentar:
Posting Komentar