Pemograman Web

Web - HTML

1
 Web
• Web
– is a system of interlinked hypertext documents
that are accessed via the Internet.
– a system of Internet servers that support specially 
formatted documents. The documents are
formatted in a markup language
called HTML (HyperText Markup Language) that
supports links to other documents, as well
as graphics, audio, and video files.

2
 Linear vs Hypertext Documents
This figure shows how topics can be related in a hypertext
fashion,
as opposed to a linear fashion.

3
Infrastruktur Web

4
 Protokol HTTP
• The Hypertext Transfer Protocol (HTTP) is designed to
enable communications between clients and servers.
• HTTP works as a request-response protocol between a
client and server.
• A web browser may be the client, and an application on
a computer that hosts a web site may be the server.
• Example: A client (browser) submits an HTTP request to
the server; then the server returns a response to the
client. The response contains status information about
the request and may also contain the requested content.

5
 HTTP Method
• GET - Requests data from a specified resource
– the query string (name/value pairs) is sent in the
URL of a GET request
• POST - Submits data to be processed to a
specified resource
– the query string (name/value pairs) is sent in the
HTTP message body of a POST request

6
  GET POST
Encoding type application/x-www-form- application/x-www-form-
urlencoded urlencoded or multipart/form-
data. Use multipart encoding for
binary data

Restrictions on data length
Yes, when sending data, the GET No restrictions
method adds the data to the
URL; and the length of a URL is
limited (maximum URL length is
2048 characters)

Restrictions on data type Only ASCII characters allowed No restrictions. Binary data is also
allowed
Security GET is less secure compared to POST is a little safer than GET
POST because data sent is part of because the parameters are not
the URL stored in browser history or in
web server logs
Visibility Data is visible to everyone in the Data is not displayed in the URL
URL

7
 Other HTTP Methods
Method Description
HEAD Same as GET but returns only HTTP headers and no document body

PUT Uploads a representation of the specified URI

DELETE Deletes the specified resource

OPTIONS Returns the HTTP methods that the server supports

CONNECT Converts the request connection to a transparent TCP/IP tunnel

8
 HTTP Status Messages
• When a browser requests a service from a
web server, an error might occur.

– 1xx: Information
– 2xx: Successful
– 3xx: Redirection
– 4xx: Client Error
– 5xx: Server Error

9
 Contoh
Message: Description:
100 Continue The server has received the request headers, and the
client should proceed to send the request body
200 OK The request is OK (this is the standard response for
successful HTTP requests)
400 Bad Request The request cannot be fulfilled due to bad syntax
401 Unauthorized The request was a legal request, but the server is
refusing to respond to it. For use when authentication is
possible but has failed or not yet been provided
403 Forbidden The request was a legal request, but the server is
refusing to respond to it
404 Not Found The requested page could not be found but may be
available again in the future
500 Internal Server Error A generic error message, given when no more specific
message is suitable
502 Bad Gateway The server was acting as a gateway or proxy and
received an invalid response from the upstream server

10
 Web Pages and Web Browsers
• Browser
– Browse-er
– an act of casual looking or reading

• Category
– Text
– Graphical

11
12
13
 HTML
• HTML - HyperText Markup Language
– Standard markup language used to create web
pages
– markup language : language used to describe the
elements of web documents for example,
headings, paragraphs, or images through the use
of tags

14
 Versions of HTML
This figure presents a history of the various versions of HTML that have been released
by the World Wide Web Consortium (W3C).

15
Sampel HTML

16
 HTML Document’s Structure
• Head

• Body

17
 HTML Elements
• Elements are designators that define the
structure and content of objects within a page
• Identified by Tags

• Exp :
– Link (Anchor)
– Paragraph

18
 HTML Tags
• Identifying web page elements
• In Pair
– Opening Tag
– Closing Tag

• Exp :
– Link : <a> …</a>
– Paragraph : <p>…</p>

19
20
 HTML Attributes
• Attributes are properties used to provide
additional information about an element.

• Exp :
– Link :
<a href="http://shayhowe.com/">Shay
Howe</a>

21
 Interpretation of the <H1> tag by Different
Browsers
This figure shows how three different browsers might interpret a line of HTML code.

22
 CSS
• Form the presentation layer of the user
interface.
– Structure (XHTML)
– 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.
– <font>
– <b>
– <i>
• CSS allows us to make global and instantaneous
changes easily.
 The Cascade
• the combination of the browser’s
default styles, external style
sheets, embedded, inline, and
even user-defined styles.
 CSS Inheritance
• Allows elements to “inherit” styles from
parent elements.
• Priority : a more specific style is set on a child
element, the element looks to the parent
element for its styles.
 Using Style Sheets
• External Style Sheet
<link href=“stylesheet” type=“text/css” href=“style.css” />

– Also a “media” descriptor (screen, tv, print, handheld, etc)

– Preferred method.

• Embedded Styles
<style type=“text/css”>
body {}
</style>

• Inline Styles
<p style=“font-size: 12px”>Lorem ipsum</p>
Understanding How Styles Are Written
 Type (Element) Selector
Specify the style for a single HTML element.

body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}
 Grouping Elements
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;
}
 Advanced CSS Selectors
• Descendant Selector
body h1 { }
#navigation p {}

• Adjacent Sibling Selectors

p.intro + span {}

• Child Selectors
div ol > p {}

• Universal Selector
* {}

• Attribute Selectors
div[href=“http://home.org”]

• Pseudo-Class Selectors
a:active {}
#nav:hover {}
 CSS Units & Colors
• Units
–%
– in
– cm
– mm
– em
– px
– pt
• Colors
– color name (red, etc)
– rgb(x,x,x)
– #rrggbb (HEX)
Color Value
 CSS Fonts
• Font-family
• Font-weight
• Font-style
• Font-size
 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;

 CSS Font Properties
• A font family is a collection of related fonts
(typically differ in size, weight, etc.)

• font-family property can accept a list of

families, including generic font families
 CSS Font Properties

generic
fonts are
system-
specific
 CSS Font Properties
• Many properties, such as font-size, have a value that is a
CSS length
• All CSS length values except 0 need units
 CSS Font Properties

Computed value
of font-size
property
 CSS Font Properties
• Reference font defines em and ex units
– Normally, reference font is the font of the element
being styled
– Exception: Using em/ex to specify value for
font-size

parent element’s font is

reference font
CSS Font Properties
 The Box Model
• Every element in the DOM
(Document Object Model)
has a conceptual “box” for
presentation.

• The box consists of margin,

padding, border, content
(width, height), and offset
(top, left)
 CSS Box Model
• Every rendered element occupies a box:

(or outer edge)

(or inner edge)

CSS Box Model
CSS Box Model