fii practic frontend beenear - laborator 1
DESCRIPTION
TRANSCRIPT
GROW YOUR TALENT WITH US!
Iasi, martie 2014
Speakers: Alexandra Constandache [email protected]
Alexandru Pradais [email protected]
GROW YOUR TALENT WITH US!
Iasi, martie 2014
FRONTEND DEVELOPMENT – LABORATOR 1
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
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
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
Introduction to HTML
HTML defines the following for a Web Page:
• Structure
• Layout
• Style
• Any other special functions
6
HTML code and the visual
7
HTML – Short History
In 1989 physicist Tim Berners-Lee proposed an Internet-based 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
screen shot of Tim Berners-Lee's Browser Editor as developed in 1991-1992 [http://www.w3.org/MarkUp/tims_editor]
9
10
HTML Timeline
11
1994 - The World Wide Web Consortium was formed to fulfill the potential of the Web through the development of open standards.
More information on [http://www.w3.org/People/Raggett/book4/ch02.html]
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
2007 – W3C gives up on XHTML2.0 and accepts HTML5
12
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
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
Why do we need HTML5 ?
14
Advanced hardware not used at its full potential
Growth of internet users
Resulted the need for a more “powerful internet”.
HTML5
5 things you should know about
HTML5*
15
* Mark Pilgrim, Dive into HTML 5 (http://diveinto.html5doctor.com/)
1.
It’s not one BIG thing.
16
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
2.
You don’t need to throw anything away.
18
Older sites still work.
3.
It’s easy to get started.
19
4.
It already works.
You can check for yourselves at:
http://ishtml5ready.com/
20
5.
It’s here to stay.
21
22
HTML5 & XHTML
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.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>
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>
XHTML HTML5
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
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
The DOCTYPE
26
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
DOCTYPE is used in order to indicate the standard used to write the document markup.
The HTML root
27
<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>
The Character Encoding
28
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
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.
Situated at the top of the head element
Adding “STUFF”
29
<link rel="stylesheet" href="style-original.css" type="text/css"/>
<link rel="stylesheet" href="style-original.css"/>
Situated in the head element
<script type="text/javascript" src="menu.js"></script>
<script src="menu.js"></script>
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
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
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
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
Let’s get to work!
34
35
36
• What it is? A collection of styling rules.
– Into this:
• What it stands for? Cascading Style Sheets
• What it does?
– It turns this:
37
How does it do it? • With
– Rules
– Selectors
– Properties
– Values
– Combinators
– Inheritance
– ...and a drop of
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; }
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
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; color: teal;
40
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
42
Commonly used properties, by category
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
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
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
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
Linking an external style file from within existing CSS
• <style> @import url('styles.css'); </style>
47
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.
50
• body
{ font-family: Komika; }
<body>
<article>
<p> <p>
<ul>
<p>
Mister Who, the movie
Staring Selectors
• Type Selectors
• ID selectors
• Class selectors
Guest appearance by
• Combinators
51
• 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
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
Example:
Rule
• #myelement { color: white; background-color: black; }
Markup
<p id="yourelement">A paragraph</p>
<p id="myelement">Another paragraph</p>
54
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
Example:
Rule
• .myclass { color: white; background-color: black; }
Markup
<p class="myclass">A paragraph</p> <p class="yourclass">Another paragraph</p> <h1 class="myclass myotherclass">Another my paragraph</h1> <h2 class="hisclass">Another another paragraph</h2>
57
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
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
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
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
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
Time for a small test
63
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/current-work/
64
Thank you!
65