4. css cascading style sheets · pdf file3/4/2016 · • cisco networking...

PEMROGRAMAN WEB

Indra Gunawan, ST., M.Kom., CEH., CHFI

Curiculum Vitae• Pendidikan :

• S1 Teknik Informatika, Minat Studi Kecerdasarn Buatan, 2007, Universitas Islam Indonesia YogyakartaSkripsi : Membuat Aplikasi Algoritma Genetika utk menyelesaikan Knapsack Problem menggunakan Vb.Net

• S2 Teknik informatika, Minat Studi Digital Forensic, 2014, Cumlaude, Universitas Islam Indonesia YogyakartaThesis : Membangun Aplikasi I-Polink (Indonesian Police Link) yaitu Knowledge Management untuk membantuinvestigasi forensika digital pada Laboratorium Digital Forensic Mabes Polri.

• Pengalaman Kerja :• Software Konsultan +- 4 tahun, 2011, Jakarta dan Batam, telah melakukan implementasi di +- 30 an perusahaan di

Jakarta, Bandung, Denpasar, Pekanbaru dan Batam.• Founder of Ex-java Technologies, 2011-2012, Batam, mempunyai client di pemerintahan, perusahaan lokal

maupun perusahaan asing di Batam.

• International Certification:• Computer Ethical Hacking, ECCouncil.• Computer Hacking Forensic Investigator, ECCouncil.• Cisco Networking Academy Program, Cisco.

CONTACT PERSON

• Email : Igunawan@stt-ibnusina.ac.id• HP / WA : 0857 66666 148

• PIN : 7EC491F9• Blog : http://digital4rainsick.wordpress.com

• Modul silahkan download di KelasOnline/Elearning

ATURAN DAN PENILAIAN

Syarat Ujian UTS : Kehadiran 50%

Syarat Ujian UAS : Kehadiran 50%

Unsur Penilaian :

• Kehadiran : 20%• Tugas : 30%• UTS : 25%• UAS : 25%

Range Nilai :

86 -100 = A71 - 85 = B56 - 70 = C41 – 55 = D<= 40 = E

OUTLINE MATERI

• 1. Introduction• 2. Server-side & Client-side programming • 3. HTML Language• 4. CSS Cascading Style Sheets• 5. CSS vs Framework CSS• 6. PHP Personal Home Page • 7. PHP vs Framework PHP

• 8. CodeIgniter PHP Framework• 9. RDBMS MYSQL• 10. CMS Content Management System • 11. Security Threats• 12. Securing www• 13. Web Server• 14. Hosting & Implementation

REFERENSI

• http://www.w3schools.com/css/• http://www.codeigniter.com/user_guide

• https://en.wikipedia.org/wiki/HTML

CSS• What is CSS ?• Cascading Style Sheets (CSS) is a style sheet language used for describing the look and

formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[1]

• CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.[2] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content, such as semantically insignificant tables that were widely used to format pages before consistent CSS rendering was available in all major browsers.

• CSS makes it possible to separate presentation instructions from the HTML content in a separate file or style section of the HTML file. For each matching HTML element, it provides a list of formatting instructions. For example, a CSS rule might specify that "all heading 1 elements should be bold", leaving pure semantic HTML markup that asserts "this text is a level 1 heading" without formatting code such as a <bold> tag indicating how such text should be displayed.

CSS• EXAMPLE• Background Color

body {background-color: #d0e4fe;

}

h1 {color: orange;text-align: center;

}

p {font-family: "Times New Roman";font-size: 20px;

}

• Background Imagebody {

background-image: url("paper.gif");}

CSS

• BACKGROUND COLORbody {

background-color: #b0c4de;}

• With CSS, a color is most often specified by:• a HEX value - like "#ff0000"• an RGB value - like "rgb(255,0,0)"• a color name - like "red"

Tips : You can use Image Editor application such as Photoshop to see hex/rgb value

CSSTEXT STYLING

• TEXT COLORbody {

color: blue;}

h1 {color: #00ff00;

}

h2 {color: rgb(255,0,0);

}

• TEXT ALLIGNMENTh1 {

text-align: center;}

p.date {text-align: right;

}

p.main {text-align: justify;

}

CSS• TEXT DECORATION

<style>h1 {

text-decoration: overline;}h2 {

text-decoration: line-through;}

h3 {text-decoration: underline;

}</style>

• TEXT TRANSFORMATION<style>p.uppercase {

text-transform: uppercase;}

p.lowercase {text-transform: lowercase;

}

p.capitalize {text-transform: capitalize;

}</style>

CSSFONT• FONT FAMILY

<!DOCTYPE html><html><head><style>p.serif {

font-family: "Times New Roman", Times, serif;}p.sansserif {

font-family: Arial, Helvetica, sans-serif;}</style></head><body><h1>CSS font-family</h1><p class="serif">This is a paragraph, shown in the Times New Roman font.</p><p class="sansserif">This is a paragraph, shown in the Arial font.</p></body></html>

CSS• FONT STYLE

<!DOCTYPE html><html><head><style>p.normal {

font-style: normal;}p.italic {

font-style: italic;}p.oblique {

font-style: oblique;}</style></head><body><p class="normal">This is a paragraph in normal style.</p><p class="italic">This is a paragraph in italic style.</p><p class="oblique">This is a paragraph in oblique style.</p></body></html>

CSS• FONT SIZE

<!DOCTYPE html><html><head><style>h1 {

font-size: 40px;}

h2 {font-size: 30px;

}

p {font-size: 14px;

}</style></head><body>

<h1>This is heading 1</h1><h2>This is heading 2</h2><p>This is a paragraph.</p><p>This is another paragraph.</p>

</body></html>

CSS• LINK

<!DOCTYPE html><html><head><style>/* unvisited link */a:link {

color: #FF0000;}/* visited link */a:visited {

color: #00FF00;}/* mouse over link */a:hover {

color: #FF00FF;}/* selected link */a:active {

color: #0000FF;}</style></head><body><p><b><a href="default.asp" target="_blank">This is a link</a></b></p><p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p><p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p></body></html>

CSS• LIST

<!DOCTYPE html><html><head><style>ul.a {list-style-type: circle;}ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}</style></head><body><p>Example of unordered lists:</p><ul class="a">

<li>Coffee</li><li>Tea</li><li>Coca Cola</li>

</ul><ul class="b">

<li>Coffee</li><li>Tea</li><li>Coca Cola</li>

</ul><p>Example of ordered lists:</p><ol class="c">

<li>Coffee</li><li>Tea</li><li>Coca Cola</li>

</ol><ol class="d">

<li>Coffee</li><li>Tea</li><li>Coca Cola</li>

</ol></body></html>

CSS• AN IMAGE AS THE LIST

<!DOCTYPE html><html><head><style>ul {

list-style-image: url('sqpurple.gif');}</style></head><body><ul>

<li>Coffee</li><li>Tea</li><li>Coca Cola</li>

</ul></body></html>

CSS

• LIST – CROSS BROWSER SOLUTIONul {

list-style-type: none;padding: 0px;margin: 0px;

}

ul li {background-image: url(sqpurple.gif);background-repeat: no-repeat;background-position: 0px center; padding-left: 15px;

}

CSS• TABLE

CSSTABLE• TABLE BOARDER

table, th, td {border: 1px solid black;

}

• TABLE BOARDER table {

border-collapse: collapse;}

table, td, th {border: 1px solid black;

}</style>

CSS

• TABLE COLOR<style>table, td, th {

border: 1px solid green;}

th {background-color: green;color: white;

}</style>

CSS• BOX

CSS• BOX EXAMPLE

<!DOCTYPE html><html><head><style>div {

background-color: lightgrey;width: 300px;padding: 25px;border: 25px solid navy;margin: 25px;

}</style></head><body>

<div>EXAMPLE PARAGRAPH.</div>

</body></html>

CSS• Width and Height of an Element

<!DOCTYPE html><html><head><style>div {

width: 320px;padding: 10px;border: 5px solid gray;margin: 0;

}</style></head><body><img src="klematis4_big.jpg" width="350" height="263" alt="Klematis"><div>The picture above is 350px wide. The total width of this element is also 350px.</div></body></html>

CSS• PADDING

<!DOCTYPE html><html><head><style>p {

background-color: yellow;}

p.padding {padding-top: 25px;padding-right: 50px;padding-bottom: 25px;padding-left: 50px;

}</style></head><body><p>This is a paragraph with no specified padding.</p><p class="padding">This is a paragraph with specified paddings.</p></body></html>

CSS• POSITION• 1. POSITION : STATIC

<!DOCTYPE html><html><head><style>div.static {

position: static;border: 3px solid #8AC007;

}</style></head><body><h2>position: static;</h2><div class="static">This div element has position: static;</div><div class="static">This div element has position: static;</div></body></html>

CSS• 2. POSITION : RELATIVE

<!DOCTYPE html><html><head><style>div.relative {

position: relative;left: 30px;border: 3px solid #8AC007;

}</style></head><body><h2>position: relative;</h2><p>An element with position: relative; is positioned relative to its normal position:</p><div class="relative">This div element has position: relative;</div></body></html>

CSS• 3. POSITION : FIXED

<!DOCTYPE html><html><head><style>div.fixed {

position: fixed;bottom: 0;right: 0;width: 300px;border: 3px solid #8AC007;

}</style></head><body><h2>position: fixed;</h2><p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p><div class="fixed">This div element has position: fixed;</div></body></html>

CSS• 4. POSITION : ABSOLUT

<!DOCTYPE html><html><head><style>div.relative {

position: relative;width: 400px;height: 200px;border: 3px solid #8AC007;

} div.absolute {

position: absolute;top: 80px;right: 0;width: 200px;height: 100px;border: 3px solid #8AC007;

}</style></head><body><h2>position: absolute;</h2><p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p><div class="relative">This <div> element has position: relative;

<div class="absolute">This <div> element has position: absolute;</div></div></body></html>

CSS• CSS LAYOUT – FLOAT & CLEAR

<!DOCTYPE html><html><head><style>div {border: 3px solid blue;}.clearfix {

overflow: auto;}nav {float: left;

width: 200px;border: 3px solid #8AC007;}

section {margin-left: 206px;border: 3px solid red;}

</style></head><body><div class="clearfix"><nav><span>nav</span><ul><li><a target="_blank" href="/default.asp">Home</a></li>

<li><a target="_blank" href="default.asp">CSS</a></li><li><a target="_blank" href="/html/default.asp">HTML</a></li><li><a target="_blank" href="/js/default.asp">JavaScript</a></li>

</ul></nav><section><span>section</span><p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>

</section><section><span>section</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p></section>

</div></body></html>

CSS• VERTICAL MENU<!DOCTYPE html><html><head><style>ul {

list-style-type: none;margin: 0;padding: 0;}

a {display: block;width: 60px;background-color: #dddddd;}

</style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li>

</ul><p>A background color is added to the links to show the link area.</p><p>Notice that the whole link area is clickable, not just the text.</p></body></html>

CSS• HORIZONTAL MENU

<!DOCTYPE html><html><head><style>ul {list-style-type: none;

margin: 0;padding: 0;overflow: hidden;}

li {float: left;}a:link, a:visited {

display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: #98bf21;text-align: center;padding: 4px;text-decoration: none;text-transform: uppercase;}

a:hover, a:active {background-color: #7A991A;}</style></head><body><ul>

<li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li>

</ul></body></html>

�����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������