The document discusses HTML5 semantic elements and how they can be used to structure web pages in a more transparent way compared to traditional <div> elements. It provides examples of common HTML5 semantic elements like <header>, <nav>, <article>, <section>, and <aside> that can be used instead of <div> for specific sections like navigation, headers, articles, etc. The document also briefly reviews common HTML4 elements like <html>, <head>, <title>, <body>, and heading elements to provide context before discussing the new HTML5 semantic elements.
A JavaScript function is a block of code designed to perform a particular task.
Why Functions?
You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results.
JavaScript - Chapter 9 - TypeConversion and Regular Expressions WebStackAcademy
Type Conversion:
JavaScript is loosely typed language and most of the time operators automatically convert a value to the right type but there are also cases when we need to explicitly do type conversions.
While JavaScript provides numerous ways to convert data from one type to another but there are two most common data conversions :
Converting Values to String
Converting Values to Numbers
Regular Expressions:
A regular expression is an object that describes a pattern of characters.
The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on text.
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.
JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
JavaScript String Operators
The + operator, and the += operator can also be used to concatenate (add) strings.
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Conditional (Ternary) Operator
The conditional operator assigns a value to a variable based on a condition.
Logical Operators
Logical operators are used to determine the logic between variables or values.
JavaScript Bitwise Operators
Bit operators work on 32 bits numbers. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
The delete Operator
The delete operator deletes a property from an object:
JavaScript - Chapter 4 - Types and StatementsWebStackAcademy
A computer program is a list of "instructions" to be "executed" by a computer.
In a programming language, these programming instructions are called statements.
A JavaScript program is a list of programming statements.
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":
JavaScript Data Types
JavaScript variables can hold many data types: numbers, strings, objects and more.
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.
JavaScript: The Good Parts Or: How A C# Developer Learned To Stop Worrying An...Doug Jones
We rarely dive into current programming languages, touting the next new framework or the new features that will be out next year. This is about JavaScript the language as it exists today, what I picked up in going from C# to JS, and what C# picked up from JS along the way as well. It is based on Douglas Crockford's seminal book "JavaScript: The Good Parts".
A JavaScript function is a block of code designed to perform a particular task.
Why Functions?
You can reuse code: Define the code once, and use it many times. You can use the same code many times with different arguments, to produce different results.
JavaScript - Chapter 9 - TypeConversion and Regular Expressions WebStackAcademy
Type Conversion:
JavaScript is loosely typed language and most of the time operators automatically convert a value to the right type but there are also cases when we need to explicitly do type conversions.
While JavaScript provides numerous ways to convert data from one type to another but there are two most common data conversions :
Converting Values to String
Converting Values to Numbers
Regular Expressions:
A regular expression is an object that describes a pattern of characters.
The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on text.
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.
JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
JavaScript String Operators
The + operator, and the += operator can also be used to concatenate (add) strings.
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Conditional (Ternary) Operator
The conditional operator assigns a value to a variable based on a condition.
Logical Operators
Logical operators are used to determine the logic between variables or values.
JavaScript Bitwise Operators
Bit operators work on 32 bits numbers. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
The delete Operator
The delete operator deletes a property from an object:
JavaScript - Chapter 4 - Types and StatementsWebStackAcademy
A computer program is a list of "instructions" to be "executed" by a computer.
In a programming language, these programming instructions are called statements.
A JavaScript program is a list of programming statements.
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":
JavaScript Data Types
JavaScript variables can hold many data types: numbers, strings, objects and more.
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.
JavaScript: The Good Parts Or: How A C# Developer Learned To Stop Worrying An...Doug Jones
We rarely dive into current programming languages, touting the next new framework or the new features that will be out next year. This is about JavaScript the language as it exists today, what I picked up in going from C# to JS, and what C# picked up from JS along the way as well. It is based on Douglas Crockford's seminal book "JavaScript: The Good Parts".
Refinement types are an approach for expressing more detailed properties of data types using propositional logic predicates. Liquid Haskell is a static refinement type checker capable of veryfing refinement type safety. We will examine the possibilites this approach opens for increasing development productivity.
JavaScript String:
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.
JavaScript Arrays:
The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
Both Haskell and Scala are very expressive functional programming languages which are undergoing active development.
We will look at fundamental concepts and goals which inspired their design. We will examine similarities and differences between various features of these languages using code examples. We will also attempt to briefly assess their practicality in software engineering context.
Refinement types are an approach for expressing more detailed properties of data types using propositional logic predicates. Liquid Haskell is a static refinement type checker capable of veryfing refinement type safety. We will examine the possibilites this approach opens for increasing development productivity.
JavaScript String:
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.
JavaScript Arrays:
The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
Both Haskell and Scala are very expressive functional programming languages which are undergoing active development.
We will look at fundamental concepts and goals which inspired their design. We will examine similarities and differences between various features of these languages using code examples. We will also attempt to briefly assess their practicality in software engineering context.
As a leader, you spend a lot of your time making sure that your team is working well together. Here are the secrets that every manager should know to make your team successful.
Subscribe to our free 11-day email course on HOW TO BE A BETTER LEADER:
http://officevi.be/29Sx4bK
Read more on employee engagement on Officevibe blog:
https://www.officevibe.com/blog
JavaScript is a versatile programming language used for developing interactive websites. It allows for dynamic content, form validation, and client-side functionality. With frameworks like React and Angular, it enables the creation of complex web applications, making it a crucial tool in modern web development.
JavaScript is a versatile programming language used for developing interactive websites. It allows for dynamic content, form validation, and client-side functionality. With frameworks like React and Angular, it enables the creation of complex web applications, making it a crucial tool in modern web development.
Normal Labour/ Stages of Labour/ Mechanism of LabourWasim Ak
Normal labor is also termed spontaneous labor, defined as the natural physiological process through which the fetus, placenta, and membranes are expelled from the uterus through the birth canal at term (37 to 42 weeks
Embracing GenAI - A Strategic ImperativePeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
Honest Reviews of Tim Han LMA Course Program.pptxtimhan337
Personal development courses are widely available today, with each one promising life-changing outcomes. Tim Han’s Life Mastery Achievers (LMA) Course has drawn a lot of interest. In addition to offering my frank assessment of Success Insider’s LMA Course, this piece examines the course’s effects via a variety of Tim Han LMA course reviews and Success Insider comments.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
Group Presentation 2 Economics.Ariana Buscigliopptx
Fii Practic Frontend - BeeNear - laborator3
1. GROW YOUR TALENT WITH US!
Iasi, martie 2014
Speakers:
Alexandra Constandache
alexandra_constandache@beenear.com
Alexandru Pradais
alexandru_pradais@beenear.com
2. GROW YOUR TALENT WITH US!
Iasi, martie 2014
FRONTEND DEVELOPMENT – LABORATOR 3
3. HTML
• defines the structure of the page
CSS
• defines the style, or presentation
So HTML + CSS = something well structured that looks OK
• something like having the first frame of a movie
• it's ok at first but...don't you want it to do something?
3
5. JavaScript
JavaScript
• Should have been called JavaEngine
Why?
• It turns a simple static page into something
• Active
• Interactive
• It powers the web
• Gives your pages/apps behavior
5
6. JavaScript Essentials
Variables
What they are?
• Containers to hold bits and pieces of
information
When they should be used?
• When you need to store the result of some
operation for further processing.
6
7. JavaScript - VARIABLES
Defining a new variable for use in code:
var myVar;
Anatomy of a variable declaration:
• var - tells the browser that you want to
define a new variable
• variables are declared with the same keyword
'var' no matter what their type is
• myVar - the variable name.
! A variable can be defined implicitly without specifying the var
keyword, and only using assignation.
myVar = 10;
7
8. JavaScript - VARIABLES
Things to note about javascript variables
• The names are case-sensitive
• This means that myVar is different from MyVar which is different
from Myvar which is… you get the picture right?
• Avoid reserved keywords when defining
variables
• as, break, catch, continue, delete, do, null, etc...
• They can be used without an initial
declaration, but that's a big no-no
8
9. JavaScript - VARIABLES
Assigning values to a variable:
var myVar = "my variable value";
The variable adjusts it's type according to the value
assigned to it.
• That means you can later do something like
myVar = 5, and it won't mind
9
10. JavaScript - VARIABLES
Special kinds of values a variable can take
• Null value is programmer-speak for “nothing” or “no value”
• Variable defined, initialized/used but now it has no value
• Undefined is used as “no value assigned yet”
• Variable defined but it was not initialized yet
• NaN is used as “not a number”
• Variable is not a number
• Most often used for testing
if (myObject == null)
{
// There is no myObject in existence.
// Now might be a good time to create one.
}
10
11. JavaScript - VARIABLES
Variable Scope
• There are 2 basic places where you can
create variables
• inside a function
• outside a function
• Local variables are declared inside a
function
• local - because they can be used only inside
the declaring function
• Global variables are declared outside
functions
• global - because they are valid in any
function you define
11
12. JavaScript - VARIABLES
12
localVariable
• will be available and hold information
only within the doSomething function
• when doSomething ends, the variable
will cease to exist
globalVariable
• will be available while the page is up
• can hold data from multiple functions
• allows passing information from one
function to another
<script>
var globalVariable;
function doSomething() {
var localVariable;
...
}
</script>
13. JavaScript - VARIABLES
What else are variables good for?
• To be used in Operations (esp. the numeric ones)
• To control the flow of processes through
• Branching
• Looping
• To pass information to and from functions
• To be part of bigger objects as properties
13
14. JavaScript - VARIABLES
Operations
Most common ones for numerics: +, -, *, /.
var myNumber = (10 + 5) * 2 / 5;
+ can be used to also join strings together
var firstString = "JavaScript";
var secondString = "is Fun";
var myFullString = firstString + secondString;
-, *, / can't be used with string
• the result will be NaN (not a number).
14
15. JavaScript - VARIABLES
!Warning
• JavaScript does automatic type conversion for the
variables used in an expression
» don't mix them up or the result will be...fuzzy
Example:
var myStringNumber = "22";
var myNumNumber = 2;
var myResult = myStringNumber + myNumNumber;
15
16. JavaScript - VARIABLES
Previous result:
• myResult is equal to the string "222" and not to the
number 24.
• Why?
• Because a string is detected in the expression and an
automatic conversion is performed for
myNumNumber from numeric to string.
16
17. JavaScript - VARIABLES
Comparisons
Are operations that produce a true or false value.
• These results are crucial for branching and looping.
The logical operators can be applied to variables of any type.
• Types can still be mixed but the result might vary sometimes.
Usage var1 logicalOperator var2
17
19. JavaScript - VARIABLES
A couple of fancy operators: === and !==.
They're similar to the equal, not equal operators but surpass
them in one aspect: Type checking
=== and !== check if
• the values supplied are the same
• the values supplied come in the same form
• are the same type
19
20. JavaScript - VARIABLES
Ex:
myNumVar = 22;
myNumVar2 = 22;
myStringVar = "22";
myNumVar == myNumVar2 => true;
myNumVar == myStringVar => true;
myNumVar === myStringVar => false;
When performing the normal comparison (==)
• automatic conversion is performed
22 results equal to "22".
20
21. JavaScript - VARIABLES
Branching
It's about giving the program freedom of choice
• To be able to decide based on current values available what block
of code to execute.
The program becomes dynamic
• new input values => new results
21
22. JavaScript - VARIABLES
Branching constructs
• if - blue
• if...else - red
• nested if...else- blue
+ red + green
• switch
22
if (y % 2 == 0) {
console.log('Even');
} else {
if (y % 3 == 0) {
console.log('Divisible by 3');
} else {
console.log('Not a multiple');
}
}
23. JavaScript - VARIABLES
The Switch
Is an alternative to the regular if...else statements.
It's used when you need to pick from a large list of values
available
23
25. Looping
What it is? A fancy way of saying:
• We want to repeat a block of
code x times.
• The number of times can be
• known at the start of the loop
• ...or not.
A loop requires 3 elements
• a starting state
• an ending condition
• a way to progress
25
28. JavaScript Functions
A way to group together
• variables
• branching statements
• loops
• in order to get a certain result or to cause a certain
behavior.
28
29. JavaScript Functions
Declaring a function
function myFunctionName ([myParameterList])
{
//do something with variables, branches, loops, etc
[return some value]
}
29
30. Contents of [ and ] are optional
• a function can be declared and used without input
parameters (myParameterList)
• a function can be without having to return some result to
the user (return some value)
Because JavaScript doesn't care about types
• parameter types are not needed
30
32. JavaScript is pretty understanding
Regarding the difference between the parameter number from the
function definition and the number of parameters used in the call.
• If there are more parameters -> the excess is ignored
• If there are less parameters -> the ones missing = Undefined
function quadratic(a, b, c)
{ return -b + Math.sqrt(b*b - 4*a*c) / (2*a); }
var root = quadratic(1, -3, 2, 2, 3, 8);
var root = quadratic(1, -3);
var root = quadratic(1, -3, 2);
The function declaration can be below the call but functions must be
in scope when they are called
console.log(square(5));
/* ... */
function square(n){return n*n}
32
33. Anonymous functions
Functions can also be created by a function expression. Such a function can
be anonymous; it does not have to have a name.
var square = function(number) {return number * number};
var x = square(4) //x gets the value 16
var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};
console.log(factorial(3));
Function expressions are convenient when passing a function as an
argument to another function.
function map(f,a) {
var result = [], // Create a new Array
i;
for (i = 0; i != a.length; i++)
result[i] = f(a[i]);
return result;
}
The call:
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);//returns [0, 1, 8, 125, 1000].
33
34. Objects
Are a way to group together variables and functions
• variables are called properties
• functions are called methods
Declaring an object
• with object literals
• with object-definition functions
34
35. Using object literals
You define an object like so
• var myEmptyPersonObject = {};
Whatever is written between { and } becomes part of the
object.
• var myPersonObject = { firstName="John",
lastName="PizzaDough"};
The '.' can be used to reference property, methods of an object
• and also to add new ones
Ex:
myEmptyPersonObject.firstName=myPersonObject.firstName
myEmptyPersonObject.lastName=" PizzaDough";
35
36. JavaScript - TYPES
Data types
• Number
• Advanced operations using the special predefined object Math:
– Math.abs(x), Math.ceil(x), Math.cos(x), Math.exp(x), Math.floor(x)
• String
• Can be considered as objects
• String methods:
– s.charAt(pos) s.concat(s1, ..) s.match(regexp) s.replace(search, replace)
s.split(separator, limit) s.substring(start, end) etc
• Boolean
• Object (Function, Array, Date, etc)
36
37. Using Object Definition Functions
An object definition function
• is a function, like any other
• is used to define all the bits of information related to an
object
• uses the keyword 'this' to reference the current object
defined
37
38. Using Object Definition Functions
38
• The function takes as
input initialization
values for the object
properties and creates
them
• When using the
function the 'new'
keyword is mandatory
– without the 'new' we'd
just call the function and
assign the return value
to the object.
function Person(fname, lname) {
this.firstName = fname;
this.lastName = lname;
}
var person1 = new
Person("Emilio","Shanks");
var person2= new
Person("Petro","Shanks");
39. Be careful around Javascript
Everything in JavaScript is an Object
All properties and methods of an Object are public
Functions hide anything defined inside them
39
40. Fitting JavaScript into HTML
There are three main ways to use JavaScript
1. Inline <script> element
2. External linked JavaScript file
3. Inline event handlers
40
41. INLINE <script> element
41
<!DOCTYPE html>
<html>
<head>
<title>Inline script</title>
</head>
<body>
<script>
window.alert("Inline
script!");
</script>
</body>
</html>
can be placed in the
body or head section
most basic form of
including some code in
the page
it's called when the page
rendering reaches that
point.
42. External linked JavaScript file
42
<!DOCTYPE html>
<html>
<head>
<title>Linked script</title>
</head>
<body>
<script src="myscript.js"></script>
</body>
</html>
Advantages
• the bulk of the code
is all in one place
• the code is reusable
in other pages
• easier to use with
events
43. Inline event handlers
43
<!DOCTYPE html>
<html>
<head>
<title>Inline event
handler</title>
</head>
<body>
<button
onclick="window.alert('Inline
event!');">
Click me
</button>
</body>
</html>
Give the page a way of
reacting and giving
feedback to the user.
Code to call can be
written there or a
function from an
external file can be
called.
44. HTML DOM
What does DOM mean anyway?
• Document Object Model
What is The DOM?
• DOM Is a cross-platform and language-independent
convention for representing and interacting with objects
in HTML, XHTML and XML documents. Objects in the
DOM tree may be addressed and manipulated by using
methods on the objects
Come again?
• Basically, it represents all the stuff present on your page
and allows you to interact with that content and modify
it.
44
45. HTML DOM
Where does this DOM come from? I didn't put it there
• When a web page is loaded, the browser creates a
Document Object Model of the page.
What would a visual representation of it look be?
45
46. HTML DOM
A clear way that we can think of this DOM?
• JavaScript's Sidekick.
Why so? Because through it JavaScript can:
• change all the HTML elements in the page
• change all the HTML attributes in the page
• change all the CSS styles in the page
• remove existing HTML elements and attributes
• add new HTML elements and attributes
• react to all existing HTML events in the page
• create new HTML events in the page
You can also think of it as Batman's cool utility belt.
46
47. HTML DOM
How do you work with it?
• From inside the JavaScript code
• using the document object and its
• methods
• properties
Ex:
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
47
48. Common uses of the DOM
Finding HTML elements from the page
48
50. Common uses of the DOM
Adding and Deleting elements
50
51. Common uses of the DOM
And the best part...
Adding Event Handlers
Ex:
document.getElementById(id).onclick=function(){code}
What does it do?
• it adds an event handler for the onclick event of the
element with the provided id.
51
53. HTML5 semantic elements for structuring
<div> is the cornerstone of nearly modern web page
• Usually with <div> elements and a healthy pinch of CSS
formatting, you can carve an HTML document into headers, side
panels, navigation bars, and more.
This technique is good but not transparent.
53
55. HTML5 semantic elements for structuring
Why?
• Easier editing and maintenance
• Accessibility
• Search-engine optimization
• Future elements
The new semantic elements behave exactly like <div>
elements:
• They group a block of markup, they don’t do anything on
their own, and they give you a styling hook that lets you apply
formatting.
55
56. HTML4 quick reminder
<html></html>
• The root of an HTML document
<head></head>
• Collection of metadata about the document
• <title></title>
– Title of the document shown in the a browser’s title
• <base></base>
– The base url for all relative URLs
• <link></link>
– Used to link JavaScript and external CSS
• <style></style>
– Inline style definition
• <script></script>
– Defines either an internal script or a link to an external script. The script language is JavaScript.
<body></body>
• Represents the content of an HTML document.
• There is only one <body> element in a document.
Heading elements: h1 …. h6
• <h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading
level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</h6>
• <h1> is the most important and <h6> is the least
56
57. HTML5 semantic elements for structuring
<main></main>
• represents the main content of the <body> of a document or
application.
• This content should be unique to the document excluding any
content that is repeated across a set of documents such as
sidebars, navigation links, copyright information, site logos, and
search forms (unless, of course, the document's main function is as a
search form).
57
Note: There must not be more than one <main> element in a
document, and it must not be a descendent of an
<article>, <aside>, <footer>, <header>, or <nav> element.
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
...
</main>
More information: http://html5doctor.com/the-main-element/
58. HTML5 semantic elements for structuring
<section></section>
• generic section of a document or application
• a thematic grouping of content, typically with a heading
• Example:
• chapters, various tabbed pages or numbered sections of a chapter.
• Sections in a web page: split in introduction, news item & contact
information
58
<div>
<h1>Level 1</h1>
<h1>Level 2</h1>
<div>
<h1>Level 3</h1>
</div>
</div> <section>
<h1>Level 1</h1>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
59. HTML5 semantic elements for structuring
<nav></nav>
• a section with navigation links to other pages or to parts within the
page
• Links part of a menu
59
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
60. HTML5 semantic elements for structuring
<article></article>
• Self-contained composition in a document, page, application or site
• Example:
• Magazine/newspaper post, blog entry, forum post…
60
<div class="entry">
<p class="post-date">October 22, 2009</p>
<h2><a href="#" rel="bookmark" title="link to this post">Travel day</a></h2>
</div>
<article>
<header>
<p class="post-date">October 22, 2009</p>
<h1><a href="#" rel="bookmark" title="link to this post"> Travel day</a></h1>
</header>
</article>
61. HTML5 semantic elements for structuring
<aside></aside>
• section of a page that consists of content that is tangentially related
to the content around the aside element, and that could be
considered separate from that content
61
<div>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</div>
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>
62. HTML5 semantic elements for structuring
<hgroup></hgroup>
• represents the heading of a section
• used to group a set of h1–h6 elements when the heading has
multiple levels, such as subheadings, alternative titles, or
taglines.
62
<h1>My Weblog</h1>
<h2>A lot of effort went into making this effortless.</h2>
<hgroup>
<h1>My Weblog</h1>
<h2>A lot of effort went into making this effortless.</h2>
</hgroup>
The hgroup element is obsolete in HTML5.
HTML specification:
elements must not be used to markup subheadings, subtitles,
alternative titles and taglines unless intended to be the heading for a new
section or subsection.
How to mark up subheadings, subtitles, alternative
titles and taglines
http://html5doctor.com/howto-subheadings/
63. HTML5 semantic elements for structuring
<header></header>
• a group of introductory or navigational aids
• Can contain an h1–h6 element or an hgroup element, but this
is not required, it can contain ordinary information
63
<div id="header">
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went into making this effortless.</p>
</div>
<header>
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went into making this effortless.</p>
</header>
64. HTML5 semantic elements for structuring
<footer></footer>
• represents a footer for its nearest ancestor sectioning content or
sectioning root element
• Example:
• contains information about its section such as who wrote it
• links to related documents,
• copyright data
• When the footer element contains entire sections, they represent
appendixes, indexes, license agreements, and other such content.
64
<div id="footer">
<p>§</p>
<p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</div>
<footer>
<p>§</p>
<p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</footer>
66. HTML5 elements list
The list of HTML5 elements is larger than the one
specified…
All valid HTML5 elements are listed by the Mozilla
Developer Network in their HTML5 Developer
Guide at this link:
• https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
In the mentioned list you can find for each
element the attributes which can be used
66
69. HTML5 Audio & Video
69
The main idea is:
• Make noise / watch cats playing piano without the need of a
plugin
» No more Flash
• A lot of video/audio formats supported
• It is as easy as adding an image with the <img> tag
– Audio in fact uses the <audio> tag
– Video in fact uses the <video> tag
70. HTML5 Audio
Audio
<p>
Hear us rock out with our new song,
<i>Sesame Street Rubber Duckies</i>:
</p>
<audio src="rubberduckie.mp3" controls></audio>
SRC = file name to be played
CONTROLS = tell the browser to include a basic set of playback controls (with the style
specific to each browser as shown below (picture from HTML5: The missing manual)
70
!Note: The <audio> and <video> elements must have both a start and an end tag. You
can’t use empty element syntax, like <audio />.
71. HTML5 Audio
In order to create your own controls we can use the
following API methods:
• play() — plays the audio
• pause() — pauses the audio
• canPlayType() — interrogates the browser to establish
whether the given mime type can be played
• buffered() — attribute that specifies the start and end time of
the buffered part of the file
• And the following properties
• currentTime = playhead position (seconds)
• duration = media duration (seconds) – read only
• muted = is volume muted? (boolean)
• paused = is media paused? (boolean)
• volume = volume level (double)
71
72. HTML5 Audio
Other <audio> attributes:
• preload – with the following possible values
• auto – let the browser decide what to do
• metadata – the browser is told to download a small chunk of
information (“metadata”) before playing – like the total length of the
audio
• none – the browser is told to hold the download
• When the value of the preload attribute is in {metadata, none} the
media is downloaded once it is started to play
• autoplay - start playback as soon as it can
• loop – specify whether the file should be played repeatedly
72
73. HTML5 Audio
Have you met the codecs ?
• In software, an audio codec is a computer program implementing
an algorithm that compresses and decompresses digital audio data according to a
given audio file format or streaming media audio format.
• Famous HTML5 audio codecs: Ogg Vorbis, MP3, WAV
• How do we know what works where?
– Using the source tag and type attribute:
<audio>
<source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
<!-- add your fallback solution here -->
</audio>
– Use the canPlayType method which can return: Probably, maybe or an empty string.
» (why? Because the browser can only guess)
» audio.canPlayType('audio/ogg');
» audio.canPlayType('audio/ogg; codecs="vorbis"');
73
75. HTML5 Video
Video
• <video width="640" height="360“
src="http://www.youtube.com/demo/google_main.mp4"
controls autobuffer poster="whale.png" >
<p> Or you can
<a href="http://www.youtube.com/demo/google_main.mp4">
download the video </a> instead.
</p>
</video>
Attributes are similar to the audio tag with few exceptions:
• autobuffer – similar to the audio preload attribute
• poster – useful to display a frame of the video (as a .jpg, .png ….and so on) in case the video
doesn’t load the video.
75
79. HTML5 canvas
Getting started:
• <canvas id="drawingCanvas" width="500" height="300"></canvas>
• Initialized as a blank borderless rectangle
• A little css never hurt nobody
canvas {
border: 1px dashed black;
}
• To start working with the canvas, we need the reference to the canvas:
var canvas = document.getElementById("drawingCanvas");
• Second, we need to setup the 2D context (well there is no 3D context yet)
var b_context = b_canvas.getContext("2d")
function draw()
{
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");//future 3D
}
79
80. HTML5 Canvas
Drawing in Canvas Context:
The esential functions are:
beginPath()
closePath()
stroke()
fill()
Properties:
fillStyle = (CSS color,pattern,gradient)
strokeStyle= (CSS color,pattern,gradient)
o Drawing lines
o moveTo(x, y)
o lineTo(x, y)
80
context.moveTo(10,10);
context.lineTo(400,40);
context.stroke();
//draws a line from 10-10 to 400-400
81. HTML5 Canvas
Modifying lines (must be set before stroke)
• Linewidth = width of the line in pixels
• context.lineWidth = 10;
• Strokestyle = color of the line in HTML color name and color code
• // Set the color (brick red) using an HTML color code:
context.strokeStyle = "#cd2828";
• // Set the color (brick red) using the rgb() function:
context.strokeStyle = "rgb(205,40,40)";
• linecap = decide the cap of the line
• butt – squared-off edge
• round
• square - (which looks the same as butt, but extends the line
an amount equal to half its thickness on each end).
81
82. HTML5 Canvas
Drawing lines
// Set the line width and color (for all the lines).
context.lineWidth = 20;
context.strokeStyle = "rgb(205,40,40)";
// Draw the first line, with the standard butt
ending.
context.moveTo(10, 50);
context.lineTo(400, 50);
context.lineCap = "butt";
context.stroke();
// Draw the second line, with a round cap.
context.beginPath();
context.moveTo(10, 120);
context.lineTo(400, 120);
context.lineCap = "round";
context.stroke();
// Draw the third line, with a square cap.
context.beginPath();
context.moveTo(10, 190);
context.lineTo(400, 190);
context.lineCap = "square";
context.stroke();
82
83. HTML5 Canvas
Drawing and filling triangles or any other polygons
context.moveTo(250,50);
context.lineTo(50,250);
context.lineTo(450,250);
context.lineTo(250,50);
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();
• Filling the triangle means that we need to close the line path with closePath(), pick a color using
fillStyle and call fill()
context.closePath();
context.fillStyle = "blue";
context.fill();
closePath also connects the begin point with the last drawn point
Calling fill after stroke means that the stroke will be overlapped with the fill color, if we do
not want that, this means stroke must be called after fill
o Drawing rectangles
• fillRect(x, y, width, height)
• strokeRect(x, y, width, height)
• clearRect(x, y, width, height)
83
84. HTML5 Canvas
Drawing text
Context:
Context.font= {font}
Context.textAlign={start,end,left,right,center};
Context.textBaseline=
{top,hanging,middle,alphabetic,ideographic,bottom};
o Drawing
o Context.fillText(text,x,y);
84
85. HTML5 Canvas
This is just a taste of it…. Canvas can do a lot of things:
• Draw different arcs
• Draw with gradients
• Draw with transparency
• Draw full images
• Transform the context
• Make composite operations by indicating how overlapping figures
must look
• Interact with the user
You can read more about them on:
• http://www.html5canvastutorials.com/
• https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Canvas_tutorial
85
87. Bibliography
HTML5: The Missing Manual by Matthew MacDonald
JavaScript by Mozilla Developer Network
• https://developer.mozilla.org/en-US/docs/Web/JavaScript
DIVE INTO HTML5 by Mark Pilgrim
http://diveinto.html5doctor.com/
HTML5 Doctor: http://html5doctor.com/
Other HTML5 demos …well check this out: http://html5demos.com/
For beginners:
• http://www.w3.org/community/webed/wiki/HTML/Training
• http://www.w3.org/community/webed/wiki/HTML/Elements
87