Sunteți pe pagina 1din 32

HTML (HYPERTEXT MARKUP LANGUAGE) AND

CSS (CASCADING STYLE SHEETS)

FAKULTAS ILMU KOMPUTER - UNIVERSITAS BRAWIJAYA 11/26/2016


HTML

• Hypertext Markup Language


• Bare Minimum of HTML Structure
• <!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<p>Let’s rock the browser with HTML5</p>
</body>
</html>
MORE HTML
• Document type:
• HTML5
<!DOCTYPE html>

• XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
MORE HTML (2)

• Language
<html lang=“en”>
• Character Encoding in HTML5
<head>
...
<meta charset=“utf-8”>
<head>
XHTML:
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
MORE HTML (3)
• Stylesheet (CSS)
<head>
...
<link href=“styles.css” rel=“stylesheet”>
<head>
• Javascript
<head>
...
<script src=“jscript.js”></script>
<head>
TAG, ATTRIBUTE, VALUE

• Tag
• Void element: <input> <hr> <br>
• Non void element:
<a>Link</a>

• Attribute and Value of Atrribute


• <input name=“email” value=“who@where.com”>
• Atrribute: name, value
• Value: email, who@where.com
STANDARD HTML TAGS
• Heading • Form
<h1>, <h2>, .... <form>
• Table • Form Component
<table>, <tr>, <th>, <td>, <tbody>, <input>, <select>, <textarea>
<thead>
• Link/Anchor
• Paragraph
<a>
<p>
• Layer (Box)
• List
<div>
<ol>, <ul>, <li>
• Formatting
• Image
<strong>, <em>, <sub>
<img>
• Line Break
• Horizontal Line
<br>
<hr>
NEW TAGS IN HTML5

Structure Inline Elements


• <section> - to define sections of pages • <mark> - to indicate content that is marked in some
• <header> - defines the header of a page fashion
• <footer> - defines the footer of a page • <time> - to indicate content that is a time or date
• <nav> - defines the navigation on a page • <meter> - to indicate content that is a fraction of a
• <article> - defines the article or primary content on a page known range - such as disk usage
• <aside> - defines extra content like a sidebar on a page • <progress> - to indicate the progress of a task
• <figure> - defines images that annotate an article towards completion
NEW TAGS IN HTML5

Dynamic Support
• <details>
• provides details about an element. This would be like tooltips in non-Web applications.
• <datagrid>
• creates a table that is built from a database or other dynamic source
• <menu>
• an old tag brought back and given new life allowing you to create a menu system on your Web
pages
• <command>
• defines actions that should happen when a dynamic element is activated
NEW TAGS IN HTML5

Dynamic Support
• <canvas> - an element to give you a drawing space in JavaScript on your
Web pages. It can let you add images or graphs to tool tips or just create
dynamic graphs on your Web pages, built on the fly.
• <video> - add video to your Web pages with this simple tag.
• <audio> - add sound to your Web pages with this simple tag.
NEW TAGS IN HTML5

New Form Input Types


• datetime • time
• datetime-local • number
• date • range
• month • email
• week • url
• figure
• figcaption
DEPRECATED TAGS IN HTML5

<acronym> <frameset>
<applet> <isindex>
<basefont> <noframes>
<big> <noscript>
<center> <s>
<dir> <strike>
<font> <tt>
<frame> <u>
NEW CUSTOM ATTRIBUTES
• <div id=“ticker” data-custom=“custom-value”>
• <div id=“receipt” data-orderno=“120”>

• Custom attribute (data-customAttrName)


• data-symbol, data-orderno
• Value of custom attribute
• custom-value, 120
• Getting value of an attribute (Javascript)
• elementName.getAttribute(attrName);
CSS?

• Cascading Style Sheets (CSS) form the presentation layer of the


user interface.
• Structure (HTML)
• Behavior (Client-Side Scripting)
• Presentation (CSS)
• Tells the browser agent how the element is to be presented to the
user.
WHY CSS?
• CSS removes the presentation attributes from the structure
allowing reusability, ease of maintainability, and an
interchangeable presentation layer.
• HTML was never meant to be a presentation language.
Proprietary vendors have created tags to add presentation to
structure.
• <font>
• <b>
• <i>
• CSS allows us to make global and instantaneous changes easily.
USING CSS
• External Style Sheet
<link rel=“stylesheet” type=“text/css”
href=“location.css” />
• Embedded Styles
<style type=“text/css”>
body {}
</style>
• Inline Styles
<p style=“font-size: 12px”>Lorem ipsum</p>
CSS SYNTAX

selector/element {
property: value;
}

The selector can either be a grouping of elements, an indentifier, class,


or single XHTML element (body, div, etc)
TYPE (ELEMENT) SELECTOR

Specify the style(s) for a single XHTML element.

body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}
GROUPING ELEMENTS

Allows you to specify a single style for multiple elements at one


time.

h1, h2, h3, h4, h5, h6 {


font-family: “Trebuchet MS”, sans-serif;
}
THE CLASS SELECTOR

<p class=“intro”>This is my introduction


text</p>

.intro {
font: 12px verdana, sans-serif;
margin: 10px;
}
THE IDENTIFIER SELECTOR

<p id=“intro”> This is my introduction text</p>

#intro {
border-bottom: 2px dashed #fff;
}
CSS SELECTORS

• Identifier or class? What’s the difference?


• An identifier is specified only once on a page and has a higher
inheritance specificity than a class.
• A class is reusable as many times as needed in a page.
• Use identifiers for main sections and sub-sections of your
document.
CSS FONTS

• Font-family
• Font-weight
• Font-style
• Font-size
CSS UNITS & COLORS
• Units
• %
• in
• cm
• mm
• em
• px
• pt
• Colors
• color name (red, etc)
• rgb(x,x,x)
• #rrggbb (HEX)
CSS LAYOUT
• Margin
• Padding
• Border
• Z-index
• Positioning
• Width
• Height
• Float
• Text-align
• Vertical-align
CSS TEXT

• Text-indent
• Text-align
• Text-decoration
• Letter-spacing
• Text-transform
• Word-spacing
• White-space
CSS BACKGROUND

• Background-color
• Background-image
• Background-position
• Background-repeat
CSS LISTS

• List-style
• List-style-image
• List-style-position
• List-style-type
CSS SHORTHAND
• Consolidates many styles into a single declaration.
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 12px;

 font: bold 12px verdana, sans-serif;

padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 10px;

 padding: 5px 8px 5px 10px;


TERIMA KASIH
THANK YOU