Scribd
Upload
21 views44 pages

Web Applications (2nd Part)

The document discusses HTML and CSS concepts for building web applications. It covers HTML tags for structuring content, CSS selectors for styling elements, and properties related to colors, boxes, and positioning. Class selectors allow targeting specific elements, and CSS rules can be defined externally in separate files.

Uploaded by

Víctor C. Lima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views44 pages

Web Applications (2nd Part)

The document discusses HTML and CSS concepts for building web applications. It covers HTML tags for structuring content, CSS selectors for styling elements, and properties related to colors, boxes, and positioning. Class selectors allow targeting specific elements, and CSS rules can be defined externally in separate files.

Uploaded by

Víctor C. Lima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

Web applications:

Second part*

Dr. José Luis Zechinelli Martini


[email protected]
LIS – 4052

* This presentation was created using the content of Code School courses
Agenda
n Data/document models and languages:
¨ HyperText Markup Language (HTML)
¨ Cascading Style Sheets (CSS)
¨ Images
¨ Fonts and forms

n Programming Web based applications using JavaScript

n The client, the Web server, and the storage support

2
HTML (1)
n HTML is written in text files*:
Ø Web browsers are basically HTML readers

n The content (document text) is put between HTML tags, which have
corresponding opening and closing versions:
<p>Hello world</p>

n Content hierarchy using heading tags:


<h1>Object-oriented programming</h1>
<h2>Definition</h2>
<h3>Fundamental properties</h3>
<h3>Main steps to model an application</h3>

* See examples at http://www.w3schools.com/html/html_examples.asp


3
HTML (2)
n Paragraph tag example:

<h1>Object-oriented programming</h1>
<h2>Definition</h2>
<p>Object-oriented programming (OOP) is a programming paradigm ...
</p>
<h3>Fundamental properties</h3>
...

Ø Paragraph tags are added (where necessary) in between heading


tags

4
HTML (3)
n Unordered list:
¨ <ul> stands for unordered list
¨ Each list item needs to also be put inside of an <li> tag

n Ordered list:
¨ <ol> stands for ordered list
¨ It uses the type attribute Î { "1", "a","A", "i", "I" }

n Nesting tags:
¨ A tag that contains other tags is called the parent
¨ The tags contained in a parent tag are called children

5
HTML (3)
n An HTML document <html> has:

¨ The <!DOCTYPE html> defines the document type to be HTML

¨ A head tag <head> that contains non-visible stuff to load useful scripts
like CSS and JavaScript

¨ A body tag <body> that defines the visible page content

6
HTML links
n HTML links are hyperlinks; a hyperlink is a text or an image you
can click on, and jump to another document

n In HTML, links are defined with the <a> tag:


<a href="url">link text</a>

n Link attributes:
¨ The href attribute sets what page should open when the link is clicked
¨ The target attribute sets where the page you set in the href should open
when the link is clicked, i.e., "_blank" and "_self" values

7
Absolute vs. Relative paths
n Using relative paths, the browser assumes the protocol and server
are the same as the page you are requesting from:
<h1>Definition</h1>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="references.html">References</a></li>
</ul>
…

n Absolute paths need to always be used when linking to pages that


are located on another site/server

8
Ø Supervised work
Agenda
n Data/document models and languages:
ü HyperText Markup Language (HTML)
¨ Cascading Style Sheets (CSS)
¨ Images
¨ Fonts and forms

n Programming Web based applications using Javascript

n The client, the Web server, and storage support

10
CSS: Selectors (1)
n At the beginning, there was no separation between an HTML
document and its presentation

n CSS is code that changes the appearance of HTML documents:


¨ Tags are indicated by creating selectors
¨ Selectors have a very specific syntax
n The syntax needs to be followed or the CSS will not work:
selector {
property: value;
}
n The simplest selector is the type selector, it is just the tag name without <>
brackets

11
CSS: Selectors (2)
n A single selector can change multiple properties: decoration,
color, etc.

n Selectors will select all matching tags on the page and apply
properties:
¨ A descendent selector can be used to select tags only if they are
children of another tag
ul li {
font-size: 24px;
}
¨ A pseudo-selector is a modifier that can be added to a selector to select
a tag only when a certain condition has occurred: :hover, :focus,
:first-child, :last-child, etc.

12
CSS: Colors
n A popular way to choose colors in CSS is to use hexadecimal
numbers:
¨ Each hex color is actually three different parts
¨ Color values for red, green, and blue run from 0-255 decimal or 00-FF
hexadecimal

n By using hexadecimal numbers to set colors, we get 256 possible


combinations for each of the three color channels:
p{
color: red;
color: #FF0000;
}

13
Ø Supervised work
CSS: Displaying tags
n Tags can be displayed vertically (block-level) or horizontally (inline-
level):
¨ block-level tags: h1, h2, h3, p, ul, li
¨ inline-level tags: a, img, input, label

n Sometimes block-level tags must be displayed horizontally instead


of vertically:
ul li {
display: inline;
}

16
CSS: Box model (1)
n Every tag shown in the body is contained in an invisible rectangle
called the box:
¨ The box model is a way to describe the borders and spacing in
between the boxes of each tag
¨ There are four parts of the box model

MARGIN
BORDER
PADDING

CONTENT

17
CSS: Box model (2)
n Parts of the box model:

¨ Content area: The content area contains your actual content (text,
images, etc.)

¨ Padding: Padding is added to the top, right, bottom, or left of the


content area

¨ Border: Borders are added around the top, right, bottom, or left of the
padding

¨ Margin: Margins are added to the top, right, bottom, or left of the border

18
CSS: Box model (3)
n The full size of a box can be calculated like this:
¨ content area width
¨ padding-left + padding-right
¨ border-left + border-right
¨ margin-left + margin-right
Ø The full box width is equal to the sum of the above

19
Applying the box model properties (1)
n Padding or margin to one side n Borders just pick one side:
at a time: h2 {
h2 { border-bottom: 6px solid black;
padding-top: 6px; }
padding-right: 3px;
padding-bottom: 0; n Borders all at once:
padding-left: 0;
h2 {
}
border-width: 6px;
border-style: solid;
n Padding or margin all at once border-color: black;
in a clockwise order: } or
h2 { h2 {
padding: 6px 3px 0 0; border: 6px solid black;
} }

20
Applying the box model properties (2)
n Considerations:
¨ Padding is used to control the size of a box without adjusting the size of
the content inside the box
¨ Margin is used to control the space between boxes

n Summary of box model:


¨ Each tag’s content fits in an invisible box
¨ Each tag’s box takes up an entire line
¨ Padding can be used to adjust spacing within a container
¨ Margin can be used to adjust spacing between containers

21
Ø Supervised work
CSS: Class selectors
n In an HTML document, the class attribute specifies one or more
class names for a tag:
Ø It allows differentiate between tags for accessing one of them directly

n Using classes in descendent selectors:


Ø Classes can be used interchangeably with tags, so the way descendant
selectors work does not change

n Writing class and type selectors in the right order:


Ø First declare the broadest rules with type selectors and then get more
specific with class selectors

23
CSS files
Ø CSS selectors can be written inside of a <style> tag in an HTML file:
<head>
<style>
.nav li {
display: inline;
}
…
</style>
</head>

Ø Most of time it’s written in a separate file and connected to the


HTML file with a link tag:
<head>
<link type="text/css" rel="stylesheet" href="main.css">
</head>
24
The div tag
n “div” is short for division:
¨ It is a block-level tag that is a generic way to group related content into
sections on a page
¨ A common way to differentiate between <div> tags is to add a class,
i.e., header and main-content divs

n Use classes to describe what divs contain:


¨ Let the divs handle padding and not the body
¨ Make separated styles to easily see that the header is different from the
main-content: Adjusting the size of divs, centering content
¨ Two main ways to center: auto or text-align

25
Agenda
n Data/document models and languages:
ü HyperText Markup Language (HTML)
ü Cascading Style Sheets (CSS)
¨ Images
¨ Fonts and forms

n Programming Web based applications using Javascript

n The client, the Web server, and storage support

28
Types of Web page images
n Content images:
Ø These are any images that are just as necessary to the page as all of
the text

n Layout images:
Ø These are in the background and are not necessary to understand the
content of the page

n User interface images:


Ø These assist with the interface of the Web page, but are not required to
understand the content of the page

29
Content images (1)
n A content image is created in HTML with the <img> tag:
¨ <img> is an empty tag
¨ Put images in a folder and describe them using the alt attribute:
<img src="images/<file.ext>" alt="<image purpose>">

n How images are loaded:


¨ A browser requests an HTML page
¨ After the HTML page is loaded, the browser could find one or more
<img> tags
¨ For each <img> tag, the browser requests the image
¨ Once the image content is returned, the browser displays it

30
Content images (2)
n <img> is an inline-level tag, but images are often put inside a block-
level tag, for example <ul>:
¨ Remove bullets (list-style-type: none) and spaces (margin: 0 and
padding: 0)
¨ Make the images show horizontally (display: inline) with a space
(padding-left: 20px) in between

n Using an image as a site/logo mark:


¨ <img> is an inline-level tag so it can not be centered with text-align
¨ Instead, set just that image to display: block and center it with the
margin: auto approach

31
Layout images
n Layout images are created with the background property:
¨ background-color: It is advisable to set a color in case of image fails to load
¨ background-image: Relative or absolute path
¨ background-position: The position of the image in a container, e.g., top,
center, or bottom and left, center, or right
¨ background-repeat: Tile the image, e.g., repeat, repeat-x, repeat-y, no-repeat

n Selector example:
body {
background-color: #5f5f5f;
background-image: url(images/file.ext);
background-position: center center;
background-repeat: no-repeat;
} or
body { background: #5f5f5f url(images/file.ext) center center no-repeat; }
32
User interface images (1)
n Writing on top of background images:
¨ Create a div container (HTML file)
¨ Associate it a background image (CSS file)
¨ Put text tags inside of it (HTML file)
¨ Characterize the look of the text (CSS file)

n HTML code:
<div class="featured-image">
<h3>Featured image</h3>
</div>

33
User interface images (2)
n CSS selectors:
.featured-image {
width: 630px;
height: 246px;
background: #ffffff url(images/albaalum.jpg) left top no-repeat;
}
.featured-image h3 {
margin: 0;
color: black;
padding: 50px 0 0 50px;
text-transform: uppercase;
}

34
Floating images
n Displaying an image to the left of block-level tags:
¨ Put the image and the block-level tags all in one <ul> <li> container
(HTML file)
¨ Float the image left (CSS file)
¨ Set some right padding so the image does not touch right up against the
block-level tags (CSS file)

n HTML code: n CSS selector:


<ul class="list"> .list img {
<li> float: left;
<img src = … > padding-right: 10px;
<h3> … </h3> }
<p> … </p>
</li>
</ul>

35
Fonts
n Fonts and styles can be controlled with CSS using:
¨ font-family: set font and fallback fonts, e.g., Helvetica, Arial, "Time New
Roman", sans-serif, …
¨ font-size: small, medium, large, smaller, larger, inherit, initial, unset,
percentages, ems, …
¨ font-weight: normal = 400, bold = 700, inherit, initial, unset, …
¨ font-style: normal, italic, oblique, inherit, initial, unset
¨ line-height: set the margin for each line in a box, e.g., normal, inherit,
initial, unset, percentages, ems, unitless, …

Ø Each browser has default font styles: Not all fonts are installed in all
browsers!

37
Fonts: Examples
n HTML code: n CSS selectors:
<body> body {
… font-family: Helvetica, Arial, sans-serif;
<div class="main-content"> }
<h2>Definition</h2> .main-content p {
<p>Object-oriented … </p> line-height: 26px;
<h3>Fundamental … </h3> }
…
</div> .footer p {
… color: black;
text-align: center;
<div class="footer"> font-weight: 400;
<p>&copy; 2015 - Wikipedia</p>
font-size: smaller;
</div>
font-style: normal;
… text-transfrorm: none;
</body> }

38
Forms (1)
n Forms are a way for a Web page to get input from a user:
¨ Forms usually contain things like labels, inputs of several different
types, text areas, and a submit button
¨ NOTE: A process user input requires server-side code

n A simple form:
<form>
<label for="email-subject">Email subject</label>
<input type="text" id="email-subject">
<input type="submit" value="Click to send">
</form>

39
Forms (2)
n Common form input types:
¨ The <input type="text"> defines a one-line input field for text input
¨ The <input type="email"> is used for input fields that should contain an e-
mail address
¨ The <input type="checkbox"> lets a user select ZERO or MORE options of
a limited number of choices
¨ The <input type="radio"> defines a radio button, it lets a user select ONE
of a limited number of choices
¨ The <input type="file"> defines a file input button
¨ The <input type="password"> defines a password field

¨ The <input type="submit"> defines a button for submitting a form to a


form-handler

40
Forms (3)
n Using a textarea instead of an input:
¨ input tags should be used for short or single-line user inputs
¨ The textarea tag is used for multi-line user input
Ø Unlike inputs, a textarea needs an opening and closing tag

n Example:
<form>
<label for="email-content">Content</label>
<textarea id="email-content"></textarea>
<input type="submit" value="Click to send">
</form>

41
Styling forms (1)
n Labels and inputs are inline-level tags, but it usually makes sense to
display one on top of the other like block-level instead of side-by-
side

n Label and input selectors: n Attribute input selector:


label, input { input[type=submit] {
display: block; width: 200px;
}
font-size: 30px;
label { }
margin-bottom: 10px;
}
input {
width: 500px;
margin-bottom: 25px;
}
42
Styling forms (2)
n Styling the container around n Styling textarea with similar
an input: styles:
input[type=text] { textarea {
border: 2px solid #7facaa; border: 2px solid #7facaa;
font-size: 24px; font-size: 24px;
padding: 7px; padding: 7px;
} margin-bottom: 25px;
width: 500px;
height: 400px;
}

43
Styling forms (3)
n Creating a separate style for a checkbox input:
¨ The checkbox is small
¨ Use an attribute selector to make just this input and its label display
inline

n Example:
input[type=checkbox], label[for=delivery-receipt] {
display: inline;
}
…
<form>
<label for="delivery-receipt">Get a delivery receipt?</label>
<input type="checkbox" id="delivery-receipt">
</form>

44
The final form

45

You might also like