HTML (Hypertext Markup Language) and Css (Cascading Style Sheets)

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

HTML (Hypertext Markup Language) and Css (Cascading Style Sheets)

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML (Hypertext Markup Language) and Css (Cascading Style Sheets)

Încărcat de

Drepturi de autor:

Formate disponibile

HTML (HYPERTEXT MARKUP LANGUAGE) AND

CSS (CASCADING STYLE SHEETS)

FAKULTAS ILMU KOMPUTER - UNIVERSITAS BRAWIJAYA 11/26/2016

• Hypertext Markup Language

• Attribute and Value of Atrribute

Structure Inline Elements

New Form Input Types

• Custom attribute (data-customAttrName)

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

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

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

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

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

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

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

• Identifier or class? What’s the difference?

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

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

S-ar putea să vă placă și