7 OSI

<div class="MsoNormal" style="background: white; margin-bottom: .0001pt; margin-bottom: 0in; mso-line-height-alt: 21.0pt; mso-outline-level: 3; vertical-align: baseline;"> <span style="border: none windowtext 1.0pt; color: #292929; font-family: "inherit","serif"; font-size: 23.0pt; mso-bidi-font-family: "Times New Roman"; mso-bidi-font-size: 12.0pt; mso-border-alt: none windowtext 0in; mso-fareast-font-family: "Times New Roman"; padding: 0in;">Pengertian 7 Layer OSI</span><span style="color: #292929; font-family: "Open Sans","serif"; font-size: 27.5pt; mso-bidi-font-family: "Times New Roman"; mso-bidi-font-size: 16.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify; vertical-align: baseline;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7Dd_UXfXhWV2C2QL44aebrJZnjLTX9hM5MgKJACM6H3pMd-1Z1K6SwHC2IO2_cOf_VjXrwrYl38-SoRUIPMcrNQ2Xr9oRq9igdNq5RRcpTCRncnfBRr5yNdl1EOFnyk1PvnUnJG7xbUL/s1600/7layerOsi.gif"><span style="border: none windowtext 1.0pt; color: #3a3a3a; font-family: "inherit","serif"; font-size: 10.5pt; mso-bidi-font-family: "Times New Roman"; mso-border-alt: none windowtext 0in; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; padding: 0in; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter"/> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"/> <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> <o:lock v:ext="edit" aspectratio="t"/> </v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_i1025" type="#_x0000_t75" alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7Dd_UXfXhWV2C2QL44aebrJZnjLTX9hM5MgKJACM6H3pMd-1Z1K6SwHC2IO2_cOf_VjXrwrYl38-SoRUIPMcrNQ2Xr9oRq9igdNq5RRcpTCRncnfBRr5yNdl1EOFnyk1PvnUnJG7xbUL/s200/7layerOsi.gif" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7Dd_UXfXhWV2C2QL44aebrJZnjLTX9hM5MgKJACM6H3pMd-1Z1K6SwHC2IO2_cOf_VjXrwrYl38-SoRUIPMcrNQ2Xr9oRq9igdNq5RRcpTCRncnfBRr5yNdl1EOFnyk1PvnUnJG7xbUL/s1600/7layerOsi.gif" style='width:150pt;height:129pt;visibility:visible;mso-wrap-style:square' o:button="t"> <v:imagedata src="file:///C:\Users\USER\AppData\Local\Temp\msohtmlclip1\01\clip_image001.gif" o:title="7layerOsi"/> </v:shape><![endif]--><!--[if !vml]--><img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7Dd_UXfXhWV2C2QL44aebrJZnjLTX9hM5MgKJACM6H3pMd-1Z1K6SwHC2IO2_cOf_VjXrwrYl38-SoRUIPMcrNQ2Xr9oRq9igdNq5RRcpTCRncnfBRr5yNdl1EOFnyk1PvnUnJG7xbUL/s200/7layerOsi.gif" border="0" height="172" src="file:///C:\Users\USER\AppData\Local\Temp\msohtmlclip1\01\clip_image001.gif" v:shapes="Picture_x0020_1" width="200" /><!--[endif]--></span></a><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">7 Layer OSI adalah sebuah model arsitektural jaringan yang dikembangkan oleh badan International Organization for Standardization (ISO) di Eropa pada tahun 1977. OSI mempunyai sebuah kepanjangan, yaitu : Open System Inter Connection yang merupakan Kumpulan Layer-layer yang tidak salingbergantungan namun saling berkaitan satu sama lainnya, maksud dari pernyataan tersebut adalah masing-masing Layer sudah mempunyai Tugas dan Tanggung Jawab masing-masing dan Saling mengisi satu sama lain, dan sama halnya dengan sebuah kerjasama Kelompok. jika salah satu dari Layer tersebut tidak digunakan berarti tidak akan Terbentuk jaringan.</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 21.0pt; margin-bottom: .0001pt; margin-bottom: 0in; mso-outline-level: 3; text-align: justify; vertical-align: baseline;"> <span style="border: none windowtext 1.0pt; color: #292929; font-family: "inherit","serif"; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-border-alt: none windowtext 0in; mso-fareast-font-family: "Times New Roman"; padding: 0in;">Komponen Penyusun 7 Layer OSI</span><span style="color: #292929; font-family: "Open Sans","serif"; font-size: 16.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify; vertical-align: baseline;"> <span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">7 OSI Layer memiliki 7 Layer yang Terdiri dari :</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">1.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Physical Layer </span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">2.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">DataLink Layer </span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">3.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Network Layer </span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">4.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Transport Layer </span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">5.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Session Layer </span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">6.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Presentation Layer </span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l0 level1 lfo1; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">7.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Application Layer.</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify; vertical-align: baseline;"> <span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Dari ke Tujuh layer tersebuat mempunyai 2 (dua) Tingkatan Layer, yaitu:</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l1 level1 lfo2; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">1.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Lower Layer yang meliputi : Physical Layer, DataLink Layer, dan Network Layer.</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l1 level1 lfo2; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">2.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Upper Layer yang meliputi : Transport Layer, Session Layer, Presentation Layer, dan Application Layer </span><span style="font-family: inherit, serif; font-size: 10.5pt;"><br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 21.0pt; margin-bottom: .0001pt; margin-bottom: 0in; mso-outline-level: 3; text-align: justify; vertical-align: baseline;"> <span style="border: none windowtext 1.0pt; color: #292929; font-family: "inherit","serif"; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-border-alt: none windowtext 0in; mso-fareast-font-family: "Times New Roman"; padding: 0in;">Fungsi Masing-Masing Layer beserta Protokol dan Perangkatnya</span><span style="color: #292929; font-family: "Open Sans","serif"; font-size: 16.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify; vertical-align: baseline;"> <span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Dari ke Tujuh Layer tersebut juga mempunyai Tugas dan Tanggung Jawab masing-masing, yaitu :</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l2 level1 lfo3; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">1.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Physical Layer</span></b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;"> : Berfungsi untuk mendefinisikan media transmisi jaringan, metode pensinyalan, sinkronisasi bit, arsitektur jaringan, topologi jaringan dan pengabelan. Adapun perangkat-perangkat yang dapat dihubungkan dengan Physical layer adalah NIC (Network Interface Card) berikut dengan Kabel - kabelnya</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l2 level1 lfo3; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">2.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">DataLink Layer</span></b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;"> : Befungsi untuk menentukan bagaimana bit-bit data dikelompokkan menjadi format yangdisebut sebagai frame. Pada Layer ini terjadi koreksi kesalahan, flow control, pengalamatan perangkat keras seperti Halnya MAC Address, dan menetukan bagaimana perangkat-perangkat jaringan seperti HUB, Bridge, Repeater, dan Switch layer 2 (Switch un-manage) beroperasi. Spesifikasi IEEE 802, membagi Layer ini menjadi dua Layer anak, yaitu lapisan Logical Link Control (LLC) dan lapisan Media Access Control (MAC).</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l2 level1 lfo3; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">3.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Network Layer</span></b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;"> : Berfungsi untuk mendefinisikan alamat-alamat IP, membuat header untuk paket-paket, dan kemudian melakukan routing melalui<b> </b>internetworking<b> </b>dengan menggunakan Router dan Switch layer-3 (Switch Manage).</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l2 level1 lfo3; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">4.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Transport Layer</span></b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;"> : Berfungsi untuk memecah data ke dalam paket-paket data serta memberikan nomor urut ke paket-paket tersebut sehingga dapat disusun kembali pada sisi tujuan setelah diterima. Selain itu, pada layer ini juga membuat sebuah tanda bahwa paket diterima dengan sukses (acknowledgement), dan mentransmisikan ulang terhadp paket-paket yang hilang di tengah jalan.</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l2 level1 lfo3; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">5.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Session Layer</span></b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;"> : </span><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 10.5pt; padding: 0in;">Berfungsi untuk mendefinisikan bagaimana koneksi dapat dibuat, dipelihara, atau dihancurkan. Selain itu, di layer ini juga dilakukan resolusi nama.</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l2 level1 lfo3; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">6.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Presentation Layer</span></b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;"> : Berfungsi untuk mentranslasikan data yang hendak ditransmisikan oleh aplikasi ke dalam format yang dapat ditransmisikan melalui jaringan. Protokol yang berada dalam Layer ini adalah perangkat lunak redirektor (redirector software), seperti layanan Workstati<i>on</i> (dalam Windows NT) dan juga Network shell (semacam Virtual Network Computing (VNC) atau Remote Desktop Protocol (RDP)).</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 15.75pt; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 26.25pt; margin-right: 0in; margin-top: 0in; mso-list: l2 level1 lfo3; tab-stops: list .5in; text-indent: -.25in; vertical-align: baseline;"> <!--[if !supportLists]--><span style="font-family: inherit, serif; font-size: 10.5pt;">7.<span style="font-size: 7pt; font-stretch: normal; line-height: normal;">       </span></span><!--[endif]--><b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Application Layer</span></b><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;"> : Berfungsi sebagai antarmuka dengan aplikasi dengan fungsionalitas jaringan, mengatur bagaimana aplikasi dapat mengakses jaringan, dan kemudian membuat pesan-pesan kesalahan. Protokol yang berada dalam layer  ini adalah HTTP, FTP, SMTP, dan NFS.</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify; vertical-align: baseline;"> <span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 12pt; padding: 0in;">Demikian Sepatah-duapatah kalimat yang dapat saya sampaikan kepada pemirsa blogger, semoga bermanfaat bagi kalian semua yang membacanya, mohon maaf jika ada salah-salah dari penggunaan bahasa yang kurang berkenan dihati para pemirsa <a href="mailto:yantineng@gmail.com">YantiBlog</a>,Terima Kasih,</span><span style="border: 1pt none windowtext; font-family: inherit, serif; font-size: 10.5pt; padding: 0in;">Wassalamualaikum.</span><span style="font-family: inherit, serif; font-size: 10.5pt;"><o:p></o:p></span></div> <br /> <div class="MsoNormal"> <br /></div>

7 OSI

Pengertian 7 Layer OSI 7 Layer OSI adalah sebuah model arsitektural jaringan yang dikembangkan oleh badan International Organization for ...

Baca selengkapnya »

Membuat layout dengan CSS dan HTML

<div class="MsoNormal" style="background: white; margin-bottom: 0.0001pt; vertical-align: baseline;"> <span style="color: #2f3c4e; font-family: 'britannic bold', sans-serif; font-size: 22.5pt; line-height: 18.75pt; text-align: justify; text-indent: -21.3pt; text-transform: uppercase;">MEMBUAT LAYOUT WEBSITE DENGAN CSS DAN HTML</span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="background: white; border: none 1.0pt; color: #e74b3b; font-family: "open sans" , "serif"; font-size: 15.0pt; padding: 0in;"><a href="http://news.computerfirst.co.id/search/label/Tips%20and%20Trick"><b><span style="color: #e74b3b; text-transform: uppercase;">TIPS AND TRICK</span></b></a></span><span style="font-family: "times new roman" , "serif"; font-size: 22.0pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Sebelum membuat <b><i>website</i></b> seorang <b><i>Web Designer</i></b> harus merancang <b><i>Layout Website </i></b>terlebih dahulu. <b><u>Layout Website</u></b> dikenal dengan <i>Story Board </i>atau <i>Story Boarding</i>. Istilah <i>Story Board</i> sudah tidak asing bagi para <i>Web Wesigner</i>. <b><i>Story Board</i></b> dapat dibuat dengan <i>CSS</i> dan <i>HTML, </i>maka untuk merancang <i>Story Board</i> diperlukan skrip <i>CSS </i>dan skrip <i>HTML</i>.</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <b><i><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Skrip CSS</span></i></b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"> digunakan untuk merancang <i>letak</i> maupun <i>ukuran</i> (<i>tinggi </i>dan <i>lebar</i>) dari <i>elemen-elemen</i> layout web, seperti </span><i><span style="border: none 1.0pt; color: #6d7683; font-family: "britannic bold" , "sans-serif"; font-size: 13.0pt; padding: 0in;">wrapper (pembungkus)</span></i><span style="border: none 1.0pt; color: #6d7683; font-family: "britannic bold" , "sans-serif"; font-size: 13.0pt; padding: 0in;">, <i>header</i>, <i>menu</i>, <i>sidebar</i>,<i>content</i> maupun <i>footer</i> website</span><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">. <b>Wrapper  </b>adalah bagian layout yang paling luar, yang berfungsi sebagai <i>pembungkus</i> dari <i>elemen-elemen</i> layout lainnya seperti <i>header, menu, sidebar</i> dan <i>footer</i>. Sedangkan <b><i>skrip HTML</i></b> berfungsi untuk mengatur/menentukan posisidari <i>elemen-elemen</i> layout website tersebut berdasarkan <i>selector</i> skrip <i>CSS</i>.</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><br /> </span><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><br /> Skrip <i>CSS </i>dan <i>HTML</i> dapat dipelajari di <b>Lembaga Pendidikan Kursus Komputer <i>(IT Training Center)</i></b>, pada program kursus <i>Web Design</i>. <b><i><a href="http://www.computerfirst.co.id/" target="_blank"><span style="color: #2f3c4e; font-weight: normal;">Computer First</span><span style="color: #2f3c4e; font-weight: normal; text-decoration: none;"> </span></a></i></b>adalah <i>Lembaga Pendidikan Kursus Komputer </i>yang membuka program <b><u>Kursus Komputer</u></b> <b><i>Web Design, Web Programming</i></b> maupun <b><i>Web Master</i></b>. Di <b><i><a href="http://www.computerfirst.co.id/" target="_blank"><span style="color: #2f3c4e; font-weight: normal;">Computer First</span></a>,</i></b> <i>HTML</i> dan <i>CSS</i> merupakan materi <i>wajib </i>untuk dipelajari pada program kursus <i>Web Design, Web Programming</i>maupun <i>Web Master</i>. Sehingga lulusan <i>Web Design, Web Programming</i> dan <i>Web Master</i> dari <b><i><a href="http://www.computerfirst.co.id/" target="_blank"><span style="color: #2f3c4e; font-weight: normal;">Computer First</span></a></i></b> mampu merancang<i> Layout Website</i> (<i>Story Board</i>) dengan <i>CSS</i>dan <i>HTML</i>. Selain membuka program kursus diatas, <b><i><a href="http://www.computerfirst.co.id/" target="_blank"><span style="color: #2f3c4e; font-weight: normal;">Computer First</span></a></i></b> juga membuka program kursus <i>Programming, Ms. Office, Multimedia Design, Robotic </i>dan program-program kursus yang lainnya.</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Untuk lebih memahami tentang pembuatan layout website dengan <i>CSS</i> dan <i>HTML</i>, penulis sudah membuat skrip <i>CSS</i> dan <i>HTML</i> dengan langkah-langkah sebagai berikut :</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><br /> </span><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-indent: -21.3pt; vertical-align: baseline;"> <b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">1.</span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 7.0pt; padding: 0in;">   </span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Membuat Rancangan Awal Layout :</span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <b><i><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Rancangan Awal</span></i></b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"> merupakan <i>Rencana Layout</i> yang akan dibuat. <b><i>Rancangan Awal</i></b> ini dapat dibuat dengan menggunakan <i>Ms. Word, Corel Draw</i> atau <i>Adobe Illustrator</i>. Contoh dari Rancangan Awal Website adalah :<o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLz3OkcOru0iri0Ls8iu5jxui5UyjxomwXza89fMUwLavTrjaw8Kh5xoUmlx3DFLVSVLz5dPbCZhBEFtN7Y2nda0Q8JgfhZuJzCP96OWXr7zHobzweftn-854KT6_1gsgqabfRrY8-e4c/s1600/layout.jpg" /></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><br /> </span><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">2.</span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 7.0pt; padding: 0in;">    </span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Membuat Layout Website</span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <b><i><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Layout Website/Story Board</span></i></b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"> dibuat setelah membuat <i>Rancangan Awal</i>. <i>Layout Website/Story Board</i> dibuat dengan menggunakan  <b>CSS</b> (<i>Cascading Stylesheet</i>) secara  eksternal yang disimpan di folder<i> css</i> pada localhost. <b><i>Layout Website</i></b> yang sesuai dengan<i>Rancangan Awal</i> diatas adalah :</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <b><u><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Nama File :</span></u></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"> <i>css/layout.css </i></span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#wrapper{ width:1000px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   height:750px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   background:grey;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   margin-top:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   margin-left:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   margin-right 10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   padding:10px;        </span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#menu { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">               height:50px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">               width:750px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">               background:aqua;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">               float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#pencarian { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      margin-left:50px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      height:50px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      width:200px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      background:red;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#logo { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             margin-right:20px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             height:150px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             width:150px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             background:yellow;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             clear:both;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#header { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 height:250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 width:810px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 background:green;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 padding:10px;   </span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#berita1 { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 margin-right:20px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 height:250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 width: 250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 background:blue;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 clear:both;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#berita2 {  margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  margin-right:20px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  margin-left:260px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  margin-top:-260px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  height:250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  width: 250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  background:blue;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  clear:both;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">} </span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><br /> #berita3 { margin-bottom:10px;<br />                 margin-right:20px;<br />                 margin-left:520px;<br />                 margin-top:-260px;<br />                 height:250px;<br />                 width: 250px;<br />                 background:blue;<br />                 float:left;<br />                 clear:both;<br /> <br /> }<br /> #login { margin-bottom:10px;<br />              margin-left:800px;<br />              margin-top:-260px;<br />              height:200px;<br />              width:200px;<br />              background:brown;<br /> <span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"> </span>            float:left;<br /> }<br /> #footer { margin-bottom:10px;<br />                height:150px;<br />                width:1000px;<br />                background:aqua;<br /> <span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"> </span>              float:left;<br />                padding:0px;<span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">     </span><br /> <span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">} </span></span><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">         </span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">3.</span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 7.0pt; padding: 0in;">    </span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Membuat File Index/Homepage</span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">File<i> <b>Index/Hompage</b></i> dibuat untuk memanggil dan menerapkan skrip <i>layout website</i> yang sudah dibuat pada<i> CSS</i>. Nama <b><i>Id</i></b> atau <b>Class</b> yang sudah dibuat pada file <i>CSS </i>di diletakkan pada elemen <i>div</i> yang dibuat pada file <i>index</i>. File <i> index/homepage </i> disimpan di <i>localhost</i>dengan <i>ekstensi</i> <b>html</b>. Adapun skrip file <i>index </i>tersebut adalah :</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <b><u><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Nama File :</span></u></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"> <i>index.html</i></span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><html></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  <head></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <title>Artikel</title></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <link href="css/layout.css" type="text/css" rel="stylesheet"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  </head></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  <body></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  <center></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  <div id="wrapper"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="menu"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">     MENU</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="pencarian"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">     PENCARIAN</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="logo"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">     LOGO</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="header"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    HEADER</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="berita1"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    BERITA 1</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="berita2"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    BERITA 2</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="berita3"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    BERITA 3</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="login"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    LOGIN</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="footer"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    FOOTER</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  </center></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"></html></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: justify; vertical-align: baseline;"> <b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">2.</span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 7.0pt; padding: 0in;">    </span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Membuat Layout Website</span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <b><i><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Layout Website/Story Board</span></i></b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"> dibuat setelah membuat <i>Rancangan Awal</i>. <i>Layout Website/Story Board</i> dibuat dengan menggunakan  <b>CSS</b> (<i>Cascading Stylesheet</i>) secara  eksternal yang disimpan di folder<i> css</i> pada localhost. <b><i>Layout Website</i></b> yang sesuai dengan<i>Rancangan Awal</i> diatas adalah :</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <b><u><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Nama File :</span></u></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"> <i>css/layout.css </i></span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#wrapper{ width:1000px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   height:750px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   background:grey;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   margin-top:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   margin-left:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   margin-right 10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                   padding:10px;        </span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#menu { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">               height:50px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">               width:750px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">               background:aqua;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">               float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#pencarian { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      margin-left:50px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      height:50px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      width:200px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      background:red;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                      float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#logo { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             margin-right:20px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             height:150px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             width:150px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             background:yellow;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">             clear:both;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#header { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 height:250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 width:810px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 background:green;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 padding:10px;   </span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#berita1 { margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 margin-right:20px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 height:250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 width: 250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 background:blue;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                 clear:both;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">}</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">#berita2 {  margin-bottom:10px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  margin-right:20px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  margin-left:260px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  margin-top:-260px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  height:250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  width: 250px;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  background:blue;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  float:left;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">                  clear:both;</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; text-indent: -14.2pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">} </span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><br /> #berita3 { margin-bottom:10px;<br />                 margin-right:20px;<br />                 margin-left:520px;<br />                 margin-top:-260px;<br />                 height:250px;<br />                 width: 250px;<br />                 background:blue;<br />                 float:left;<br />                 clear:both;<br /> <br /> }<br /> #login { margin-bottom:10px;<br />              margin-left:800px;<br />              margin-top:-260px;<br />              height:200px;<br />              width:200px;<br />              background:brown;<br /> <span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"> </span>            float:left;<br /> }<br /> #footer { margin-bottom:10px;<br />                height:150px;<br />                width:1000px;<br />                background:aqua;<br /> <span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"> </span>              float:left;<br />                padding:0px;<span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">     </span><br /> <span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;">} </span></span><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">         </span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-indent: -14.2pt; vertical-align: baseline;"> <b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">3.</span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 7.0pt; padding: 0in;">    </span></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Membuat File Index/Homepage</span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">File<i> <b>Index/Hompage</b></i> dibuat untuk memanggil dan menerapkan skrip <i>layout website</i> yang sudah dibuat pada<i> CSS</i>. Nama <b><i>Id</i></b> atau <b>Class</b> yang sudah dibuat pada file <i>CSS </i>di diletakkan pada elemen <i>div</i> yang dibuat pada file <i>index</i>. File <i> index/homepage </i> disimpan di <i>localhost</i>dengan <i>ekstensi</i> <b>html</b>. Adapun skrip file <i>index </i>tersebut adalah :</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <b><u><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Nama File :</span></u></b><b><span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"> <i>index.html</i></span></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><html></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  <head></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <title>Artikel</title></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <link href="css/layout.css" type="text/css" rel="stylesheet"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  </head></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  <body></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  <center></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  <div id="wrapper"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="menu"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">     MENU</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="pencarian"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">     PENCARIAN</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="logo"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">     LOGO</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="header"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    HEADER</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="berita1"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    BERITA 1</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="berita2"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    BERITA 2</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="berita3"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    BERITA 3</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="login"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    LOGIN</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    <div id="footer"></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    FOOTER</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">    </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  </div></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">  </center></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"></html></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <br /></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; margin-bottom: .0001pt; margin-bottom: 0in; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;">Jika file<i> index.html </i>dijalankan di browser, maka akan tampil<i> Layout/Story Board</i> sebagai berikut :</span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background: white; line-height: 18.75pt; vertical-align: baseline;"> <span style="border: none 1.0pt; color: #6d7683; font-family: "open sans" , "serif"; font-size: 12.0pt; padding: 0in;"><br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--></span><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <div align="center" class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: center; vertical-align: baseline;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijO5yvl6PklB7RO1AM-3O6sZY413r-_W3BGDmZT3RnpknbL9lJEmibmgOes7D26org28S7Ckq3oG9b3oZXD14gzn-EpziYZysyr4dT84_EDDvb-uZnI-iWomI47f54fUi0LI9JmaEC45c/s1600/layout2.jpg" /></div> <div align="center" class="MsoNormal" style="background: white; line-height: 18.75pt; text-align: center; vertical-align: baseline;"> <span style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #6d7683; font-family: "open sans" , serif;">Demikian artikel ini penulis buat, semoga bermanfaat bagi para pembaca blog<span class="apple-converted-space"> </span></span><b style="background-position: 0px 0px; box-sizing: border-box; outline: 0px; text-align: start; transition: all 0.5s ease;"><i style="background-position-x: 0px; background-position-y: 0px; box-sizing: border-box; outline: 0px; transition: all 0.5s ease;"><span style="border: none windowtext 1.0pt; mso-border-alt: none windowtext 0in; padding: 0in;"><a href="http://yantineng.blogspot.com/">Neng Yanti.</a></span></i></b><span style="color: #6d7683; font-family: "open sans" , "serif"; font-size: 10.5pt;"><o:p></o:p></span></div> <br /> <div class="MsoNormal"> <br /></div>

Membuat layout dengan CSS dan HTML

MEMBUAT LAYOUT WEBSITE DENGAN CSS DAN HTML TIPS AND TRICK Sebelum membuat  website  seorang  Web Designer  harus merancang  Layout Webs...

Baca selengkapnya »