Laporan Pemrog. Web 1, 2, & 3

LAPORAN

Tugas 1, 2 dan 3

PEMROGRAMAN WEB

DISUSUN OLEH :

ALFATHONY

PTI E1 2014

PROGRAM STUDI PENDIDIKAN TEKNIK INFORMATIKA

JURUSAN PENDIDIKAN TEKNIK ELEKTRONIKA

FAKULTAS TEKNIK

UNIVERSITAS NEGERI YOGYAKARTA

2014/2015

TUGAS 1 MINGGU 2

<html><head><title>About Me</title></head><body> <body background="http://www.wallpaperdisk.com/wallpapers/Crystal-Artistic-Designs/brown%20waves.jpg"><h1>About <font face="Matura MT Script Capitals" color="Brown"> Alfathony </font> </h1><p> My Name is Alfathony <br> and I <strong> Attractive, Kind, </strong> and <strong> Sweet </strong> </br><hr/><ul> <h2> <u> My Classes This Quarter </u> </h2><li> Fisics </li><li> mathematics </li><li> Web Programming </li><li> Computer Systems Organization </li><li> Programming algorithm </li></ul><ol> <h2> <u> My Favorites Movies </u> </h2> <br> <em> (I Actually don't too many movies, so...here goes!) </em> </br><li> The Avengers ( Search in <a href=" http://www.ganool.ca/"> Ganool </a> ) </li><li> Rurouni Kenshin ( Search in <a href=" http://www.ganool.ca/"> Ganool </a> ) </li><li> Big Hero 6 ( not really, but I've seen like 3 movies total so this is my 3rd fave by technicality) ( Search in <a href=" http://www.ganool.ca/"> Ganool </a> ) </li></ol><ul> <h2> <u> My Moods </u> </h2><li> Happy <img src="http://www.graphicsfuel.com/wp-content/uploads/2012/09/emoticon-happy.png" /> </li><li> Sad <img src="http://4.bp.blogspot.com/-kNrN2_bCkOM/U6hziq9_IrI/AAAAAAAAKOY/QcCfmpiuchM/s1600/CryingEmoticon.png" /> </li></ul><ul> <h2> <u> Fun Facts About My Neighbors </u> </h2><li> Naruto : <em> Not giving up, even though he suffered </em> </li><li> Son - Goku : He is man that never <em> Arrogant </em>, even though he was <Strong> Strong </strong> </li></ul></p> </body></html>

TUGAS 2 MINGGU 3

<!DOCTYPE html><html><head><title>About Me</title><link href="style.css" type="text/css" rel="stylesheet" ></link></head><body> <h1>About Alfathony</h1><p class="italic" > My Name is Alfathony and I Attractive, Kind, and Sweet </p><hr/><ul class="bullet" > <h2> My Classes This Quarter </h2><li> Fisics </li><li> Mathematics </li><li> Web Programming </li><li> Computer Systems Organization </li><li> Programming algorithm </li></ul><ol> <h2> My Favorites Movies </h2> <p class="italic2" > (I Actually don't too many movies, so...here goes!) </p><li> The Avengers ( Click <a title="Menuju Ganool.ca" href= "http://www.ganool.ca/"> Here </a> ) </li><li> Rurouni Kenshin ( Click <a title="Menuju Ganool.ca" href= "http://www.ganool.ca/"> Here </a> ) </li><li> Big Hero 6 ( not really, but I've seen like 3 movies total so this is my 3rd fave by technicality) ( Click <a title="Menuju Ganool.ca" href= "http://www.ganool.ca/"> Here </a> ) </li></ol><ul class="bullet2" > <h2> My Moods </h2><li> Happy <a href="http://www.graphicsfuel.com/wp-content/uploads/2012/09/emoticon-happy.png"> <img title="Happy Face" src="http://www.graphicsfuel.com/wp-content/uploads/2012/09/emoticon-happy.png" /> </a> </li><li> Sad <a href="http://4.bp.blogspot.com/-kNrN2_bCkOM/U6hziq9_IrI/AAAAAAAAKOY/QcCfmpiuchM/s1600/CryingEmoticon.png"> <img title="Sad Face" src="http://4.bp.blogspot.com/-kNrN2_bCkOM/U6hziq9_IrI/AAAAAAAAKOY/QcCfmpiuchM/s1600/CryingEmoticon.png" /> </a></li></ul><ul> <h2> Fun Facts About My Neighbors </h2><li> Naruto : Not giving up, even though he suffered </li><li> Son - Goku : He is man that never Arrogant, even though he was Strong </li></ul> </body></html>

Style.css

body { font-family: Helvetica; font-size: 10pt; background-image: url("http://www.wallpaperdisk.com/wallpapers/Crystal-Artistic-Designs/brown%20waves.jpg"); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: fixed;}h1, h2 {

font-family: "Times new roman";color: maroon;text-align: left;

}p.italic { font-family: Arial; font-style: italic; font-weight: normal;}h2 { text-decoration: underline; color: black;}p.italic2 { font-style: italic;}ul.bullet { list-style-image: url("http://revitconsultants.com/wp-content/themes/media-master/images/bullet-new.gif");}ul.bullet2 { list-style-type: square;}ol { list-style-image: url("http://4.bp.blogspot.com/-_otA_-gzGhY/VBbs6C0615I/AAAAAAAAACg/qDeVrf-v5hE/s1600/arrow.gif");}

ul { list-style-type: circle;}

a:link { color: blue; text-decoration: none;}a:visited { color: indigo; text-decoration: none;}a:hover {

text-decoration: underline;}a:active { color: lawngreen;}

Index.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title> Index </title><style type="text/css">body { background-image: url("http://linoit.com/entry/image/2122002"), url("http://cdn.flaticon.com/png/256/12426.png");

background-position: right bottom, right top;background-size: auto, 95px;background-repeat: no-repeat;background-attachment: fixed, scroll;background-color: whitesmoke;

}

.textstyle { font-family: "Times new roman";

color: Black;text-align: center;text-shadow: 7px 5px 2px silver;

}hr.garis1 { height: 8px;

background-color: black;}hr.garis2 { height: 5px;

width: 50%;background-color: black;

}a:link { color: blue;

text-decoration: none;}a:visited {

text-decoration: none;}a:hover { text-decoration: underline;}a:active { color: limegreen;}.setborder { border-style: solid;

border-width: 1px;border-color: #aaa;border-left-width: 8px;border-right-width: 5px;border-left-color: blue;

border-right-color: Peru;background-color: #FFFFFF;padding: 15px;line-height: 30px;font-size: 18px;font-weight: bold;color: black;

}#centang { background-image: url("http://www.silverfast.com/img/nl/2012-archive/bullet_icon_big.png");

background-position: right;background-size: 40px;background-repeat: no-repeat;

}</style></head><body><p> <h1 class="textstyle" > Daftar Hasil Tugas Pemrograman Web </h1></p> <hr class="garis1"/> <hr class="garis2"/> <p class="setborder" id="centang" > 16 February - 22 February </p><ul><li> <a title="Program web Html tentang About me" href="Program Web.html"> File html About Me </a> </li></ul> <br/>

<p class="setborder" id="centang" > 23 February - 1 March </p><ul><li> <a title="Program web Html About me dengan file css terpisah" href="About Me.html"> File css About Me </a> </li></ul> <br/>

<p class="setborder" > 2 March - 8 March ( Tidak tersedia ) </p> <br/><p class="setborder" > 9 March - 15 March ( Tidak tersedia ) </p> <br/><p class="setborder" > 16 March - 22 March ( Tidak tersedia ) </p> <br/></body></html>

TUGAS 3 MINGGU 4

<!DOCTYPE html><html><head><meta charset="utf-8"><title> Hello World </title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="javascript/smoothscroll.js"></script>

<link href="mystyle.css" type="text/css" rel="stylesheet" ></head><body><h1 class="firstyle" > Hello World </h1> <ol class="menu" ><li><a href="#BgEarth" class="smoothScroll"> EARTH </a></li> <li><a href="#BgNature" class="smoothScroll"> <span class="exception">NATURAL WONDERS</span> </a></li><li><a href="#BgAbout" class="smoothScroll"> <span class="exception">ABOUT ME</span> </a></li> </ol><div> <article> <div id="BgEarth"></div> <div class="back1"> <h2> Earth </h2><hr class="garis"/><br/><div class="set"><div class="float"><img class="img1" src="http://img2.wikia.nocookie.net/__cb20140807101508/sonicthehedhug/ru/images/1/1e/Earth.png" alt="Our Earth" /><br/> BUMI</div><p class="align"> <span class="bgletter">B</span>umi adalah planet ketiga dari Matahari yang merupakan planet terpadat dan terbesar kelima dari delapan planet dalam Tata Surya.Bumi juga merupakan planet terbesar dari empat planet kebumian Tata Surya. Bumi terkadang disebut dengan dunia atau Planet Biru. Bumi terbentuk sekitar 4,54 miliar tahun yang lalu, dan kehidupan muncul di permukaannya pada miliar tahun pertama. Biosfer Bumi kemudian secara perlahan mengubah atmosfer dan kondisi fisik dasar lainnya, yang memungkinkan terjadinya perkembangbiakan organisme serta pembentukan lapisan ozon, yang bersama medan magnet Bumi menghalangi radiasi surya berbahaya dan mengizinkan makhluk hidup mikroskopis untuk berkembang biak dengan aman di daratan. Sifat fisik, sejarah geologi, dan orbit Bumi memungkinkan kehidupan untuk bisa terus bertahan.</p>

<p class="indent">Litosfer Bumi terbagi menjadi beberapa segmen kaku, atau lempeng tektonik, yang mengalami pergerakan di seluruh permukaan Bumi selama jutaan tahun. Lebih dari 70% permukaan Bumi ditutupi oleh air, dan sisanya terdiri dari benua dan pulau-pulau yang memiliki banyak danau dan sumber air lainnya yang bersumbangsih terhadap pembentukan hidrosfer. Kutub Bumi sebagian besarnya tertutup es; es padat di lapisan es Antarktika dan es laut di paket es kutub. Interior Bumi masih tetap aktif, dengan inti dalam terdiri dari besi padat, sedangkan inti luar berupa fluida yang menciptakan medan magnet, dan lapisan tebal yang relatif padat di bagian mantel. Bumi berinteraksi secara gravitasi dengan objek lainnya di luar angkasa, terutama Matahari dan Bulan. Ketika mengelilingi Matahari dalam satu orbit, Bumi berputar pada sumbunya sebanyak 366,26 kali, yang menciptakan 365,26 hari matahari atau satu tahun sideris. Perputaran Bumi pada sumbunya miring 23,4° dari serenjang bidang orbit, yang menyebabkan perbedaan musim di permukaan Bumi dengan periode satu tahun tropis (365,24 hari matahari). Bulan adalah satu-satunya satelit alami Bumi, yang mulai mengorbit Bumi sekitar 4,53 miliar tahun yang lalu. Interaksi gravitasi antara Bulan dengan Bumi merangsang terjadinya pasang laut, menstabilkan kemiringan sumbu, dan secara bertahap memperlambat rotasi Bumi. Bumi adalah tempat tinggal bagi jutaan makhluk hidup, termasuk manusia. Sumber daya mineral Bumi dan produk-produk biosfer lainnya bersumbangsih terhadap penyediaan sumber daya untuk mendukung populasi manusia global.[29] Wilayah Bumi yang dihuni manusia dikelompokkan menjadi 200 negara berdaulat, yang saling berinteraksi satu sama lain melalui diplomasi, pelancongan, perdagangan, dan aksi militer.</p></div></div><div id="BgNature"></div> <div class="back2"><h2> Natural Wonders </h2><hr class="garis"/><br/><div class="set2"><div class="float2"><img class="img2" src="http://www.uswanderer.com/wp-content/uploads/2012/11/grand-canyon-by-John-Vetterli.jpg" alt="Grand Canyon" /></div><p class="border">The Grand Canyon Arizona ( USA )</p><div class="float3"><img class="img2" src="http://www.listofimages.com/wp-content/uploads/2013/10/iguazu-falls-border-argentina-and-brazil-nature-landscape.jpg" alt="Igazu Falls" /></div><p class="border2">Iguazu Falls in Argentina and Brazil</p><div class="float4"><img class="img2" src="http://fullhdwp.com/images/wallpapers/Japan-Fujiyoshida-and-Mount-Fuji-Wallpaper.jpg" alt="Fujiyama" /></div><p class="border3">Mount Fuji in Japan</p>

<div class="float5"><img class="img2" src="http://coralreefs.net/wp-content/uploads/2014/11/Great-Barrier-Reef-Holiday-Reef-Fish12.jpeg" alt="The Great Barrier Reef" /></div><p class="border4">The Great Barrier Reef in Australia</p><div class="float6"><img class="img2" src="http://static.seriocomic.com/wp-content/uploads/2011/12/milfordsound.jpg" alt="Milford Sound" /></div><p class="border5">Milford Sound in New Zealand</p><div class="float7"><img class="img2" src="http://www.elminiar.com/wp-content/uploads/2013/02/sahara_desert__tunisia1.jpg" alt="Sahara Desert" /></div><p class="border6">Sahara Desert in Africa</p> </div></div><div id="BgAbout"></div> <div class="back3"><h2> About Me </h2><hr class="garis"/><br/><div class="set3"><p class="align2"> <span class="bgletter2">H</span>ai, saya Alfathony.<br/> Saya seseorang yang berkulit sawo matang, rambut lurus dan tinggi 1.6 m.<br/>Saya tertarik didunia seni, animasi dan Web programming.</p><h3> My Moods </h3><div class="float8"><a href="http://2.bp.blogspot.com/-Ei9saQf8bw4/UFmJs9wDotI/AAAAAAAADnM/xMU2roJDNz0/s640/Binette-typo.png"><img class="img3" src="http://2.bp.blogspot.com/-Ei9saQf8bw4/UFmJs9wDotI/AAAAAAAADnM/xMU2roJDNz0/s640/Binette-typo.png" alt=" Happy Text Emoticon"></a><div class="description">HAPPY</div></div><div class="float9" >

<a href="http://icongal.com/gallery/image/6134/sad_face.png"><img class="img3" src="http://icongal.com/gallery/image/6134/sad_face.png" alt=" Sad Text Emoticon"></a><div class="description">SAD</div></div><div class="float10" ><a href="http://cdn.flaticon.com/png/256/31148.png"><img class="img3" src="http://cdn.flaticon.com/png/256/31148.png" alt=" Mad Text Emoticon"></a><div class="description">MAD</div></div></div> </div> </article></div> </body></html>

Mystyle.css

body { font-family: Helvetica; background-image: url("http://protexic.rarebirdinc.com/sustainability/images/icon-globe-large3.png"), url("http://spiritworld.com.hk/wp content/uploads/2013/05/Spirit-World-Facebook-Cover.jpg"); background-position: 525px 100px, center; background-size: 250px, 100% 100%; background-repeat: no-repeat; background-attachment: local, fixed;}.firstyle { /* -------------------------------------------- CSS Class Selectors ( slide 7/29 ) ---------------------------------------------------------------- */ font-family: "headplane", "Trebuchet MS"; color: ghostwhite; font-size: 70pt; letter-spacing: 8px; text-align: center; text-shadow: 0px 0px 30px white, 0px 0px 40px aqua, 0px 0px 70px aqua, 0px 0px 80px aqua, 0px 0px 100px aqua, 0px 0px 150px aqua, 0px 0px 250px midnightblue; margin-top: 220px;}ol.menu {

font-family: "planet estyle", "gill sans"; color: white; font-size: 20pt; text-align: center; padding: 8px; margin-top: 170px; background-color: black; background-color: rgba(0, 0, 0, 0.8);}li { display: inline; word-spacing: 100px;}span.exception { word-spacing: 0px;}a:link { color: white; text-decoration: none;}a:visited { color: white; text-decoration: none;}a:hover { color: black; text-shadow: 0px 0px 5px white, 0px 0px 10px white; text-decoration: none;}a:active { color: silver; text-decoration: none;}.back1 { background-color: white;

background-color: rgba(255, 255, 255, 0.5); margin-top: 0px; width: 100%; height: 1000px; }.back2 { background-color: white; background-color: rgba(255, 255, 255, 0.4); margin-top: 0px; width: 100%; height: 2500px; }.back3 { background-image: url("http://fc01.deviantart.net/fs70/f/2014/230/9/b/arcade_miss_fortune____sketch_by_ki_mi_ko-d7vo380.jpg"); background-repeat: no-repeat; background-position: center; background-size: 70% 100%; background-color: ghostwhite; margin-top: 0px; width: 100%; height: 700px; }h2, h3 { font-family: helvetica; font-size: 40px; text-align: center; padding-top: 40px;}h3 { font-size: 30px; padding-top: 30px;}

.garis { height: 6px;

width: 30%; background-color: black; border-top-left-radius: 100px 3px; border-bottom-left-radius: 100px 3px; /* Rounded corners with border-radius ( slide 21/29 ) */ border-top-right-radius: 100px 3px; border-bottom-right-radius: 100px 3px; margin-top: -20px;}/* ----------------------- Centering a block element: auto margins ( slide 29/29 ) ---------------------------- */div.set, div.set2, div.set3 { margin-left: auto; margin-right: auto; width: 60%; background-color: transparent;}div.set2 { width: 74%;}div.set3 { width: 50%; background-color: transparent;}.float { float: right; width: 210px; margin: 0 0 15px 20px; padding: 10px; border: 1px solid gray; background-color: rgba(0, 0, 0, 0.5); text-align: Center; font-weight: bold; color: white;}.float2, .float3, .float4, .float5, .float6, .float7 { float: left;

width: 477px; height: 276px; margin: 0 30px 15px 0; border: 8px groove gray; /* ---------------------------- CSS Properties for Border ( slide 18/29 ) -------------------------------- */}.float3, .float5, .float7 { float: right; margin: 50px 0px 15px 30px; border: 8px ridge gray; /* ---------------------- CSS Properties for Border ( slide 18/29 ) -------------------------- */}.float4, .float6 { margin: 50px 30px 15px 0;}.float8, .float9, .float10 { float: left; text-align: center; padding: 4px; /* ------------ CSS Properties for Padding ( slide 22/29 ) -------------- */ height: auto; width: auto; margin-right: 6px; /* ------------ CSS Properties for Margin ( slide 25/29 ) ---------------- */ border: 4px outset limegreen; /* ----------------- CSS Properties for Border ( slide 18/29 ) --------------------- */ background: rgba(255, 255, 255, 0.7);}.img1, .img3 { width: 200px; /* -----------------------CSS properties for dimensions ( slide 28/29 ) ----------------------- */ height: 200px;}.img2 { width: 477px; height: 276px;}

span.bgletter { float: left;

width: 0.7em; font-family: "Times new roman"; font-size: 400%; line-height: 70%;}span.bgletter2 { text-align: center; font-family: "Times new roman"; font-size: 400%; line-height: 70%; }p.align, p.indent { text-align: justify; line-height: 150%;}p.indent { text-indent: 50px;}p.align2 { font-size: 12pt; font-weight: bold; font-style: italic; text-align: center; line-height: 170%;}p.border, p.border2, p.border3, p.border4, p.border5, p.border6 { font-family: "times new roman"; color: white; font-size: 20px; border: thin hidden transparent; margin-left: 500px; /* ------------ CSS Properties for Margin ( slide 25/29 ) ---------------- */ background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)); border-radius: 12px; /* ----------- Rounded corners with border-radius ( slide 21/29 ) -------------- */ border-left: 10px solid gray; /* ------------------ CSS Properties for Border ( slide 18/29 ) --------------- */ padding: 15px;

}p.border2, p.border4, p.border6 { text-align: right; margin-top: 300px; /* ------------ CSS Properties for Margin ( slide 25/29 ) ---------------- */ margin-right: 500px; margin-left: 0px; background: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0)); border-right: 10px solid gray; /* --------------------- CSS Properties for Border ( slide 18/29 ) ---------------------- */ border-left: none;}p.border3 { margin-top: 310px;}

p.border5 { margin-top: 300px;}p.border6 { margin-top: 305px;}div.description { font-family: "Arial Rounded MT"; font-weight: Bolder; text-align: center; padding: 5px 0; /*-- ----------- CSS Properties for Padding -------------- */ background: rgba(0, 0, 0, 0.4);}

Index.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title> Index </title>

<style type="text/css">body { background-image: url("http://linoit.com/entry/image/2122002"), url("http://cdn.flaticon.com/png/256/12426.png");

background-position: right bottom, right top;background-size: auto, 95px;background-repeat: no-repeat;background-attachment: fixed, scroll;background-color: whitesmoke;

}

.textstyle { font-family: "Times new roman";

color: Black;text-align: center;text-shadow: 7px 5px 2px silver;

}hr.garis1 { height: 8px;

background-color: black;}hr.garis2 { height: 5px;

width: 50%;background-color: black;

}a:link { color: blue;

text-decoration: none;}

a:visited { text-decoration: none;

}a:hover { text-decoration: underline;}a:active { color: limegreen;}.setborder { border-style: solid;

border-width: 1px;border-color: #aaa;border-left-width: 8px;border-right-width: 5px;border-left-color: blue;border-right-color: Peru;background-color: #FFFFFF;padding: 15px;line-height: 30px;font-size: 18px;font-weight: bold;color: black;

}#centang1, #centang2, #centang3 { background: #FFFFFF url("http://www.silverfast.com/img/nl/2012-archive/bullet_icon_big.png") no-repeat right;

background-size: 40px;}

</style>

</head><body><p> <h1 class="textstyle" > Daftar Hasil Tugas Pemrograman Web </h1></p> <hr class="garis1"/> <hr class="garis2"/> <p class="setborder" id="centang1" > 16 February - 22 February </p><ul><li> <a title="Program web Html tentang About me" href="Program Web.html"> File html About Me </a> </li></ul> <br/>

<p class="setborder" id="centang2" > 23 February - 1 March </p><ul><li> <a title="Program web Html About me dengan file css terpisah" href="About Me.html"> File css About Me </a> </li></ul> <br/>

<p class="setborder" id="centang3"> 2 March - 8 March </p> <ul><li> <a title="Program web Html dengan penerapan materi ke-4" href="Me.html">File Tugas 3</a> </li></ul> <br/>

<p class="setborder" > 9 March - 15 March ( Tidak tersedia ) </p> <br/><p class="setborder" > 16 March - 22 March ( Tidak tersedia ) </p> <br/></body></html>

PEMBAHASAN

TUGAS 1 MINGGU 2.

Tugas Membuat file html tentang about me. Menggunakan tag – tag dasar html seperi <title>, ( <h1> , <h2>, …. <h6>), <hr>, <p> , <br/>, <a>

<img>, <em>, <strong>, <ul> dan <ol> dst.

TUGAS 2 MINGGU 3.

Tugas membuat file html yang dikembangkan dari sebelumnya. Dimana pada tugas pertama style hanya mengunakan HTML saja. Pada tugas

kedua tugas ditambahkan dengan menyisipkan link di html ke sebuah file css. Singkatnya membuat sebuah file html lengkap dengan style

cssnya.

TUGAS 3 MINGGU 4.

Membuat sebuah dokumen html dengan menerapkan penggunaan selector dan attribut class atau ID didalam dokumen cssnya. Diterapkan juga

penggunaan property Border, margin, dan padding. Pada dokumen html yang saya buat juga menerapkan link kesebuah section didalam sebuah

halaman tertentu. Dimana browser akan scroll kebawah ketika link yang dimaksud di klik. Dan juga saya juga menerapkan css pseudo class

pada link tersebut.

Documents

Laporan Pemrog. Web 1, 2, & 3