IFS3103

HTML
&
CSS

PABWE - PENGEMBANGAN APLIKASI BERBASIS WEB

Institut Teknologi Del
20 September 2018
 OUTLINE
1 HTML 5
2 CSS
3 Design Layout Element HTML
4 Advanced HTML and CSS
1 • HTML5 new features
• HTML5 new semantic element
• Input Types, New Form Attributes, and Form
Validation
 Sir Timothy Berners-Lee
The inventor of HTML
Introduction of HTML
• Hypertext Markup Language
• A markup language designed for the creation of web pages and other
information viewable in a browser.
• HTML is a formal Recommendation by the World Wide Web Consortium
(W3C)
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table",
and so on
• Browsers do not display the HTML tags, but use them to render the content
of the page

4
Timeline of HTML

5
 Introduction of HTML5
• HTML5 is a markup language for structuring and displaying the contents of
the World Wide Web. HTML 5 is the fifth revision of the HTML. HTML was
first invented in the 1990, fourth version was made in 1997 and the fifth
version was developed in 2009.
• HTML5 was developed by the W3C (World Wide Web Consortium) in
cooperation with the WHATWG (Web Hypertext Application Technology
Working Group).
• HTML5 defines a single markup language that can be written by means of
HTML and XHTML. Thus the development of HTML5 is a combination of
HTML 4.0 and XHTML 1.1, which has been running separately.
• The main objective the development of HTML5 is to improve HTML
technology to support the latest multimedia technology, easily read by
humans, and is also easily understood by the machine.
6
Difference Between HTML4 and HTML5

7
Difference Between HTML4 and HTML5

8
 Why Use HTML5
• HTML5 is more power full and easier than HTML4.
• It allows to play audio and video on browser
• Using HTML5 you can draw shapes like circle, rectangle,
triangle. Which is not possible in HTML previous version
• In HTML5 direct you can use header and footer tag for define
Header and footer section
• Here <nav> tag are available for declare navigation.
• HTML5 allow to run JavaScript code in background Using web
workers.
• It provides local storage in place of cookies.

9
HTML Element

10
 Anatomy of a Tag
• An HTML tag is a name/keyword surrounded by angle
brackets
• The closing tag needs a slash (/) before the tag name
• Opening tag + closing tag + content = HTML element
• Use only lowercase letters!
• Closing tag Tag name <h1>Content Here</h1> Opening
tag Angle Brackets

11
Structure of HTML Document

12
Most Commonly Used Tags

13
Even More Commonly
Used Tags

14
 Attribute
• Adds extra information to an HTML tag
• The value for an attribute can be placed within either single
or double quotes
• Always go inside the opening tag
• Tags can have multiple attributes
• Separate each attribute with a space Attribute
• Example: <font face="verdana">Content Here</font>

15
Commonly Used Attributes and Values

16
Hyperlink Attributes and Values

17
HTML Table
 New Semantic/
Structural Elements

19
New Input Types

20
New Form Elements

21
 Form Element
The method attribute specifies the
HTTP method (GET or POST) to be
used when submitting the form data:

22
 Fieldset & Legend Element
• The fieldset element represents a set of form controls optionally
grouped under a common name.
• The name of the group is given by the first legend element.
<fieldset>
<legend>Title </legend>
<p>Content</p>
</fieldset>

23
 HTML 5 NEW FORM ATTRIBUTES
• Required: input validation

• Placeholder: a description in an input text

• Pattern: to define an input text with a certain pattern

• Form: an input tag is not always inside <form> tag.

• Autocomplete: to make suggestions in an input text

• Datalist: show choices in a combobox and behave like autocomplete

• Autofocus: to highlight cursor position in a input form, when the page is showed.
24
New Media Elements

25
New HTML5 Graphics

26
 New HTML5 API's
(Application Programming Interfaces)
• The most interesting new API's in HTML5 are:
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• HTML Web Workers
• HTML SSE

Task: Find information about those APIs, and get practice

with it.
27
Browser Compatibility: HTML5
 Form Validation
• Data validation doesn’t just help to keep your data clean, but it also
helps improve the user experience. For example, datalists can provide
auto-complete in text boxes suggesting options to the user.
• Remember: Even with client side input validation, it is always
important to validate data on the server to ensure consistency and
security in your data.
• Validation constrain attributes:
• The pattern attributes
• The required attributes
• The min, max, step attributes
• The maxlength attribute
• The novalidate attribute
29
Task

30
2
(Cascading Style Sheet)
 The Idea of CSS
• Q: What will you do if you want to change the
background color of a static web page?
• The Answer:
• Open the HTML file with your editor
• Find script <BODY BGCOLOR=#hexadecimal>
• Change the hexadecimal with color that you want
• Save

32
 Another Question
•Q: How if you want to change background color
of one hundred websites, what you should do?

33
Is there a smart and fast way to do it?

Yes, use
CSS
34
HTML and CSS

35
 What is CSS?
• CSS stands for Cascading Style Sheet.
• CSS (Cascading Style Sheets) enables the separation of
HTML document from document presentation, such as
layout, colors, fonts, text, background, borders and floats.
• Created in CERN physics lab in Geneva, around 1995.
• Styles are stored in .css files(external CSS) enabling web
masters to change website layout by editing one single file.
• One of the most useful and helpful tools web designers and
web developers use to build professional websites with unique
look and feel.

36
 Type of CSS

Cascading)Style)Sheet

Inline Internal External

37
 Inline CSS
• An inline style may be used to apply an unique style for a
single element.
• To use inline styles, add the style attribute to the relevant
element.
• The style attribute can contain any CSS property.
• The example below shows how to change the color and the left
margin of a <h1> element.
• Example:

38
 Internal CSS
• An internal style sheet may be used if one single page has an
unique style.
• Internal styles are defined within the <style> element, inside the
<head> section of an HTML page.
• Example:

39
 External CSS
• With an external style sheet, you can change the look of an
entire website by changing just one file!
• Each page must include a reference to the external style sheet
file inside the <link> element. The <link> element goes inside
the <head> section. Example:
• An external style sheet can be written in any text editor. The file
should not contain any html tags. The style sheet file must be
saved with a .css extension.
• The file should not Here is how the "myStyle.css" looks:

40
 CSS Style Priority

• Now there could be one more scenario that you have a

style set more than once on the same document.
• Note: the position-based priority.

41
 CSS Rule Set

• Selector is simply the element that linked to a particular

style. Any HTML element is a possible CSS selector.
• Declaration = Properties + Value
• Properties are things which styles to be defined.
• Value is the style defined of the properties.

42
 Selector

Element Class ID

43
 Element Selector
• Element selector usually named Tag Selector.
• If you want to apply the same style to all instance of a specific
element in a document then you apply the style using an
Element Selector.
• In an Element Selector you choose an element with its tag
name and apply the style on that.
• For example we want to apply the colour red to all h1
elements that appear on the document.
• Example:

44
 Class Selector
• You can select an element on the name of the class associated
with it and apply the style to that.
• You select the element on the basis of class using a .(dot)
• Usually you use the class selector when you want to
apply a specific style to a different set of elements.
• Example:

45
 ID Selector
•
•
You can select an element on its id and apply a style to that.
• You select an element on the basis of its id using a hash (#) on
CSS.
• So let us consider again the receding HTML that we used in the
class selector.
• Example:

46
Application of CSS in HTML

47
 CSS Combinators
• A combinator is something that explains the relationship between the
selectors.
• A CSS selector can contain more than one simple selector.
• Between the simple selectors, we can include a combinator.
• There are four different combinators in CSS3:
• Descendant selector (space)
• Child selector (>)
• Adjacent sibling selector (+)
• General sibling selector (~)

48
 CSS Combinators Detail
• Descendant selector (space)
• (E F) matches an element F that’s a descendant of an element E.
• Child selector (>)
• (E > F) matches an element F that’s a child of an element E. The difference
here is that F must be a direct child of E.
• Adjacent sibling selector (+)
• (E + F) matches an element F immediately preceded by an element E.
• General sibling selector (~)
• (E ~ F) matches an element F preceded by an element E. Unlike the above
this will match any sibling and not just the first.

49
Example of CSS Combinators

50
 Attribute Selector
• CSS [attribute] Selector
• CSS [attribute=“value”] Selector
• CSS [attribute ~= “value”] Selector
• CSS [attribute |= “value”] Selector
• CSS [attribute ^= “value”] Selector
• CSS [attribute $= “value”] Selector
• CSS [attribute *= “value”] Selector

Task: So, what the meaning of those tags?

51
CSS Pseudo-Class

52
 CSS Properties
• Font
• Color & background
• Text
• List
• Box model
• Visual formatting model
• Media types
• Visual effect
• Positioning scheme

53
 Font
• font-family: <fontname> eg. p {font-family: Arial, Verdana, "Times New
Roman”}
• font-style: normal | italic eg. p {font-style: italic}
• font-variant: normal | small-caps eg. p {font-variant: small-caps}
• font-weight: normal | bold | bolder | lighter | 100-900 eg. p {font-weight:
bold} p {font-weight: 400}
• font-size: xx-small | x-small | small | medium | large | x-large | xx-large eg.
font-size: larger | smaller
• font-size: <length> | <percentage> eg. p {font-size: large}, p {font-size:
smaller}, p {font-size: 200px}, p {font-size: 150%}
• font: [<style>||<variant>||<weight>]? <size>[/<line-height>]? <family>

54
 Color and Background
• color: <color> eg. p {color: red}, p {color: #448F2C}, p {color: rgb(255,0,0)}, p {color:
rgb(100%,50%,25%)}
• background-color: <color> | transparent eg. body {background-color: transparent}
• background-image: <url> | none eg. body {background-image: none}, body
{background-image: url(http://www.site.com/logo.gif)}
• background-repeat: repeat | repeat-x | repeat-y | no-repeat eg. body {background-
repeat: no-repeat}
• background-attachment: scroll | fixed eg. body {background-attachment: fixed}
• background-position: [<percentage>|<length>]{1,2}
• background-position: [ top | center | bottom] || [ left | center | right]
• background: [ <color> || <image> || <repeat> || <attachment> || <position> ] eg. body
{background: url("chess.png") gray 50% repeat fixed }

55
 Text
• text-indent: <length> | <percentage> eg. p {text-indent: 5em}
• text-align: left | right | center | justify eg. p {text-align: justify}
• text-decoration: none | [ underline || overline || line-through || blink ] eg. p {text-
decoration: underline overline}
• text-shadow: none | [ <color> || <length> <length> <length>? ] eg. h1 {text-shadow:
3px 3px 5px red}
• text-transform: capitalize | uppercase | lowercase | none eg. h1 {text-transform:
capitalize}
• letter-spacing: none | <length> eg. p {letter-spacing: 3px} , p {letter-spacing: -1px}
• word-spacing: none | <length> eg. p {word-spacing: 2em}
• line-height: normal | <number> | <length> | <percentage> eg. p {line-height: 1.5}
• white-space: normal | pre | nowrap

56
 List
• list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman |
upper-roman | lower-alpha | lower-latin | upper-alpha | upper-latin | none eg. ul {list-
style-type: circle}
• list-style-image: <url> | none eg. ul {list-style-image: url(smiley.gif)}
• list-style-position: inside | outside eg. ul {list-style-position: inside}
• list-style: <style> || <position> || <image>

57
 Box Model
• margin-[top|right|bottom|left]: <length> | <percentage> | auto - div {margin-top:
10px} - div {margin-right: 20%} - div {margin-bottom: -5px} - div {margin-left: 20pt}
• margin: [ <length> | <percentage> | auto ]{1,4} - div {margin: 3em} - div {margin: 1em
2em} - div {margin: 5em 2em 3em} - div {margin: 8em 4em 15em 10em}
• padding-[top|right|bottom|left]: <length> | <percentage> | auto - div {padding-top:
10px} - div {padding-right: 20%} - div {padding-bottom: -5px} - div {padding-left:
20pt}
• padding: [ <length> | <percentage> | auto ]{1,4} - div {padding: 8em 4em 15em
10em}
• border-[top|right|bottom|left]-width: thin | medium | thick | <length>

58
 Design Layout
Element HTML
3
HTML Layout Elements

60
 HTML Layout Techniques
• There are four different ways to create
multicolumn layouts.
• HTML tables
The <table> element was not designed to be a layout tool! The purpose
of the <table> element is to display tabular data. So, do not use tables
for your page layout!
• CSS float property
It is common to do entire web layouts using the CSS float property. Float
is easy to learn - you just need to remember how the float and clear
properties work. Disadvantages: Floating elements are tied to the
document flow, which may harm the flexibility.
61
 HTML Layout Techniques
• CSS Frameworks
If you want to create your layout fast, you can use a framework, like
W3.CSS or Bootstrap.
• CSS flexbox
Flexbox is a new layout mode in CSS3. Use of flexbox ensures that
elements behave predictably when the page layout must accommodate
different screen sizes and different display devices. Disadvantages: Does
not work in IE10 and earlier.

62
 CSS Floats
• The float property specifies whether or not an element should float.
• The clear property is used to control the behavior of floating elements.
• Example 1:
img {
float: right;
margin: 0 0 10px 10px;
}
• Example 2:
div {
clear: left;
}

63
 CSS Flexbox
• Flexbox consists of flex containers and flex items
• A flex container is declared by setting the display property of an
element to either flex (rendered as a block) or inline-flex
(rendered as inline).
• Inside a flex container there is one or more flex items.
• Everything outside a flex container and inside a flex item is rendered
as usual.
• Flexbox defines how flex items are laid out inside a flex container.
• Flex items are positioned inside a flex container along a flex line. By
default there is only one flex line per flex container.

64
 CSS Flexbox Example
<!DOCTYPE html>
</head>
<html>
<body>
<head>
<style>
<div class="flex-container">
.flex-container {
display: -webkit-flex; <div class="flex-item">flex item 1</
div>
display: flex;
<div class="flex-item">flex item 2</
width: 400px;
div>
height: 250px;
<div class="flex-item">flex item 3</
background-color: lightgrey;
div>
}
</div>
.flex-item {
background-color: cornflowerblue;
</body>
width: 100px;
</html>
height: 100px;
margin: 10px;
}
</style>

65
CSS Flexbox Example

66
 Responsive Web
Design
4
Advanced HTML & CSS
Illustration of Responsive Web Design

68
 Responsive Web Design
• The responsive web design term itself was coined, and largely
developed, by Ethan Marcotte.
• Responsive Web design is the approach that suggests that design
and development should respond to the user’s behavior and
environment based on screen size, platform and orientation.
• Responsive Web Design makes your web page look good on all
devices (desktops, tablets, and phones).
• Responsive Web Design is about using CSS and HTML to resize,
hide, shrink, enlarge, or move the content to make it look good on
any screen.

69
 Responsive Web Design Example
<!DOCTYPE html>
<div class="city">
<html lang="en-us">
<h2>London</h2>
<head>
<p>London is the capital of England.</
<style> p>
.city { </div>
float: left; <div class="city">
margin: 10px; <h2>Paris</h2>
padding: 10px; <p>Paris is the capital of France.</p>
max-width: 200px; </div>
height: 100px; <div class="city">
border: 1px solid black; <h2>Tokyo</h2>
} <p>Tokyo is the capital of Japan.</p>
</style> </div>
</head> <div class="city">
<body> <h2>New York</h2>
<h1>Responsive Web Design Demo</h1> <p>The City of New York is the most
<h2>Resize this responsive page!</h2> populous city.</p>
</div>
</body>
</html>

70
Result of Responsive Web Design

71
 Reference
• HTML5 Up and Running O'Reilly, 2010
• Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development Copyright ©
2010 by Peter Lubbers, Brian Albers, Frank Salim
• Ardhana, Kusuma. Pemrograman HTML5. Jakarta : MediaKom, 2013.
• HTML5 and CSS Tutorial, https://www.w3schools.com/html/default.asp
• Lecture Note IMK ”Static Web Using HTML5” https://cis.del.ac.id/prkl/perkuliahan/view?
q=a9rpLWma7kvcUiaRvXqREd5RaUCoI-kXx5OJz9akiCs
• Duckett, Jon HTML and CSS: Design and Build Websites 1st Edition, John Wiley & Sons, 2011

72
Are you like
this guy?
THANK YOU!
Happy Coding!