Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
GROW YOUR FRONTEND SKILLS
1. GROW YOUR TALENT WITH US!
Speakers:
Alexandra Constandache
alexandra_constandache@beenear.com
Alexandru Pradais
alexandru_pradais@beenear.com
Iasi, martie 2014
2. GROW YOUR TALENT WITH US!
FRONTEND DEVELOPMENT – LABORATOR 1
Iasi, martie 2014
3. The architecture of a Web Browser
A web browser must be able to:
• Get information from different web addresses
• Understand the information retrieved
• Transform the information from simple information
to a visual user experience
• Understand and interpret the associated scripts
• Send information back to the web addresses
3
4. Introduction to HTML
What is HTML ?
• Short for HyperText Markup Language, HTML is
the authoring language used to create documents
on the World Wide Web.
4
5. Introduction to HTML
Hypertext is text which is not constrained to be linear.
Hypertext is text which contains links to other texts. (1965)
A markup language is a set of markup tags
The tags describe document content
The markup language = tags & attributes
Example:
• Tags: <body/>, <p/>, <table/> …
– http://www.w3.org/TR/html4/index/elements.html
• Attributes: align, background, bgcolor…
– http://www.w3.org/TR/html4/index/attributes.html
5
6. Introduction to HTML
HTML defines the following for a Web Page:
•
•
•
•
6
Structure
Layout
Style
Any other special functions
8. HTML – Short History
In 1989 physicist Tim Berners-Lee proposed an Internetbased hypertext system for CERN researchers to use and
share documents.
Berners-Lee specified HTML and wrote the browser and
server software in late 1990.
8
9.
9
screen shot of Tim Berners-Lee's Browser Editor as developed in 1991-1992
[http://www.w3.org/MarkUp/tims_editor]
11. HTML Timeline
1994 - The World Wide Web Consortium was formed to
fulfill the potential of the Web through the
development of open standards.
More information on
11 [http://www.w3.org/People/Raggett/book4/ch02.html]
12. HTML timeline
1998 – begin working at an
XML based HTML
2000 – Release of XHTML 1.0
2000 – W3C begin work on
more strict XHTML 2.0
2003 – W3C rejects
extension of HTML on
the basis it’s conflicting
the path chosen
Later 2003 - Apple, Mozilla, and Opera starts
WHATWG in order to extend HTML
The Web Hypertext Application Technology Working
Group (WHATWG) is a community of people interested in
evolving HTML and related technologies. The WHATWG
was founded by individuals from Apple, the Mozilla
Foundation and Opera Software in 2004
12
2007 – W3C gives up on XHTML2.0 and
accepts HTML5
13. HTML 5
Imagination, meet implementation.
HTML5 is the cornerstone of the W3C's open web platform; a
framework designed to support innovation and foster the full
potential the web has to offer.*
*http://www.w3.org/
13
14. Why do we need HTML5 ?
Advanced hardware not used at its
full potential
Growth of internet users
Resulted the need for a more “powerful internet”.
14
15. HTML5
5 things you should know about
HTML5*
* Mark Pilgrim, Dive into HTML 5 (http://diveinto.html5doctor.com/)
15
17. HTML 5 is a collection of features.
• HTML 5 defines not only the tag list and their meaning but also how
those can interact with JavaScript and explains how their functionality
can be extended in different situations.
17
18. 2.
You don’t need to
throw anything away.
Older sites still work.
18
23. HTML5 & XHTML
<!DOCTYPE html
PUBLIC "//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>My First HTML Document</title>
</head>
<body>
<h1>Hello World</h1>
<p>I was here.</p>
</body>
</html>
XHTML
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>I was here.</p>
</body>
</html>
HTML5
24. HTML5 markup
HTML 5 is more of a “free
spirit”:
• You can omit the closing slash from a
void element
• <title>, <head>, <body> is not
required
• But for a less confusing page, it is better
to use <head> & <body>
•
•
•
•
Indenting is optional
Even <html> is not required
Ignores capitalization
Attribute values don’t need
quotation marks anymore, as long as
the value doesn’t include a restricted
character (typically >, =, or a space)
• Attributes with no values are also
allowed.
24
25. HTML5 markup
Good HTML5 practices
• Include the optional <html>, <body>, and <head> elements.
• Use lowercase tags (like <p> instead of <P>).
• Use quotation marks around attribute values.
25
26. The DOCTYPE
DOCTYPE is used in order to indicate the standard used to write the document markup.
<!DOCTYPE html
PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
26
27. The HTML root
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html lang="en">
The lang attribute specifies the language used in the document.
This information is occasionally useful to other people—for example, search engines can use
it to filter search results so they include only pages that match the searcher’s language. The
codes can be found at: http://tinyurl.com/l-codes .
Also can be added to other tags like <div>
27
28. The Character Encoding
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
Situated at the top of the head element
For historical reasons, there are many different character
encodings in the world. Today, virtually all English websites use an encoding called UTF-8,
which is compact, fast, and supports all the non-English characters
you’ll ever need.
28
29. Adding “STUFF”
<link rel="stylesheet" href="style-original.css"
type="text/css"/>
<link rel="stylesheet" href="style-original.css"/>
<script type="text/javascript" src="menu.js"></script>
<script src="menu.js"></script>
Situated in the head element
29
30. The change of other XHTML elements
Obsolete XHTML Elements – removed in HTML5
• Presentational elements:
• <big>, <center>, <font>, <tt> and <strike>
• Frames
Adapted XHTML Elements
• <small>
• was used to modify only the size of the text content
• in HTML5 it is used in the sense of “small print”
• <hr>
• was used to represent a horizontal line
• in HTML5 represents a thematic break—for example, a transition to
another topic
• <s>
• was used to cross out some text
• in HTML5 represents text that is no longer accurate or relevant, and has
been “struck” from the document.
30
31. The change of other XHTML elements
Adapted XHTML Elements
• <b>, <i>
• <b> for bold and <i> for italics , were partially replaced when the first
version of XHTML introduced the lookalike <strong> and <em>
elements.
• in HTML5
– <strong> for text that has strong importance.
– <b> for text that should be presented in bold but doesn’t have
greater importance
– <em> for text that has emphatic stress
– <i> for text that should be presented in italics but doesn’t have extra
emphasis.
• Example:
<strong>Breaking news!</strong> There's a sale on <i>leche quemada</i> candy at
the <b>El Azul</b> restaurant. Don't delay, because when the last candy is gone,
it's <em>gone</em>.
Breaking news! There's a sale on leche quemada candy at the El Azul restaurant. Don't delay, because when the
last candy is gone, it's gone.
31
32. The change of other XHTML elements
Tweaked XHTML Elements
• <address>
• has the narrow purpose of providing contact information for the
creator of the HTML document
• <cite>
• to cite some work (for example, a story, article, or television show) it’s
not acceptable to use <cite> to mark up a person’s name.
• <a>
• element allows anything and everything to be a link
32
33. Let’s get to work
What do we need to start working?
• A browser
• A text editor (for hardcore programmers)
– Notepad
– Notepad++ (http://notepad-plus-plus.org/ )
or
A special IDE (html/web editor). Some free editors are:
–
–
–
–
–
–
–
–
Microsoft Visual Studio (Express for WEB = Free)
HTMLKit http://www.htmlkit.com/
KompoZer http://www.kompozer.net/
Aloha http://www.aloha-editor.org/
W3 recommended editor: Amaya http://www.w3.org/Amaya/
NetBeans https://netbeans.org/
Aptana Studio http://aptana.com/
PsPad http://www.pspad.com/
33 IDE = Integrated development environment
36. • What it stands for?
Cascading Style Sheets
• What it does?
– It turns this:
36
• What it is? A collection
of styling rules.
– Into this:
37. How does it do it?
• With
– Rules
– Selectors
– Properties
– Values
– Combinators
– Inheritance
– ...and a drop of
37
38. Rules, selectors, properties and values
A CSS style sheet is made up of any number of Rules.
What is a Rule?
• It represents the building block of CSS style sheet, a virtual
DNA.
What does it look like?
• p { color: blue; }
• p { font-size: 1.4em; }
• em { color: teal; }
38
39. Composition of a rule:
• selector - the part before the brackets
• p { color: blue; } p { font-size: 1.4em; } em { color:
teal; }
• declaration - whatever is placed inside the brackets
• p { color: blue; } p { font-size: 1.4em; } em { color:
teal; }
39
40. Composition of a declaration:
• a property - the part before the colon
• color: blue; font-size: 1.4em; color: teal;
• a value - the part after the colon
• color: blue; font-size: 1.4em;
40
color: teal;
41. Selector
• defines the target of the visual style to be applied
• can be any valid tag name, class, id or any combination thereof
• Ex: you, that hot car in the first pic
Declaration
• defines the set of visual styles that will be applied to the target
• Ex: makeup, that hot paint job of the second pic
Property
• defines what exact is used to style the element
• Ex: lipstick, paint, rims
Value
• details related to the styling
• Ex: lipstick color, paint color, rims dimension
41
43. Adding a style sheet to the HTML
• There are four ways to add CSS to your HTML page
• Each has its Pros and Cons
43
44. Applying the style directly to the individual element
• <p style="color: red;">Another paragraph</p>
Also called the Inline Style
Pros
• can be used to style unique elements within the page
Cons
• Is applied only to the particular element
• Cannot be reused
44
45. Defining the style in the head section of the page
• <head>... <style> p { color: red; } </style> ...</ head>
• Ex: all the <p> elements inside the page are now red
Pros
• it allows control over the styling of multiple elements on
the page
Cons
• it allows control over the styling of multiple elements on
just THAT page
45
46. Defining the style in an external .css file
The file can contain all the style rules for the page and be linked
to it
• <head>...< link href="styles.css" rel=" style sheet"> ...</ head>
Pros
• one central location for all your styling rules
• can be used in multiple pages by linking it
• consistent styling across your entire page/app
• will be downloaded only once in order to be used
– saves bandwidth
– increases page-rendering speed
46
47. Linking an external style file from within existing CSS
• <style> @import url('styles.css'); </style>
47
48. Inheritance
What it is?
A consistent way to define and apply
styles to the elements contained
within the page.
What it isn't?
That big bag of cash that your late rich
aunt left for you in her will. At
least...not for you
48
49. Inheritance allows you to define top level styling rules
Rules must be such that you expect them to be
consistent throughout the document
You apply these rules to
• the root of the document tree
• the root of a sub tree in the main document tree that you
expect to have a certain style
The styles defined for the root are applied to (inherited by)
the children of the root node.
49
51. Mister Who, the movie
Staring Selectors
• Type Selectors
• ID selectors
• Class selectors
Guest appearance by
• Combinators
51
52. • It consists of the element tag name
• It selects elements for styling based on their type
Example:
body, p,h1-h6, ul, li, a
52
53. The element for styling is selected based on
the value of its ID attribute
The style will be applied to only one
element
• And its children based on inheritance
• This is only valid if the value of the ID
attribute is unique
• As it should be
How a basic ID attribute selector looks like
• #IDValue
• # - the mark of the ID selector
• IDValue - the target ID value
53
55. Pros
• Can be used to select specific elements in the page
• "Landmarks" that you want to stand out
Cons
• Too fine grained - can't work on groups of elements
55
56. The elements for styling are selected based on the value
of their CLASS attribute
The style will be applied to all the elements that share the same
CLASS
How a basic CLASS attribute selector looks like:
• .ClassName
• . - the mark of the Class selector
• ClassName - the value of the target class attribute
56
58. Pros
• Can be used to apply the same style to a group of
elements
• Elements can have the same class but different types
• Ex: useful when styling in a similar manner a form
with multiple different input elements
• Work also on elements that belong to multiple classes
58
59. Allow using all the different selector types together
Can create more complex and specific styling rules
Using this elements can be made "aware" of their current
context
59
60. Descendant combinator
Most often used combinator.
Is a simple white space placed between the different
selectors that make up the rule.
For the selector to match the rightmost element, that
element must be a descendant of the previous element.
60
61. Example:
Rule
em { color: teal; }
p em { color: darkgreen; }
Markup
<h1>A <em>heading</em></h1>
<p>A paragraph <em>with emphasis</em></p>
61
62. Child combinator
The mark for it is the greater-than bracket ">".
It allows the selection of elements that are direct children of
the specified parent.
Its use is most visible when nesting is involved and the same
type of element is present in several places
62
64. Bibliography
Hello! HTML5 & CSS3: A user-friendly reference
guide by Rob Crowther
HTML5: The Missing Manual by Matthew MacDonald
DIVE INTO HTML5 by Mark Pilgrim
http://diveinto.html5doctor.com/
W3C HTML5 http://www.w3.org/tr/html5/
WHATWG HTML Living Standard — Last Updated 1 March
2014 http://www.whatwg.org/specs/web-apps/currentwork/
64
