HTMLCSSJS 3

HTML, CSS & JavaScript
AGENDA
❑ How Web works?
❑ HTML Introduction
▪ The structure of an HTML document
▪ HTML Tags and Attributes : <html>, <head>, <body>
▪ HTML Headings & Paragraphs
▪ HTML Text Formatting
▪ HTML Images
▪ HTML Hyperlinks
▪ HTML Lists
▪ Html Tables
▪ Html Container Tags
▪ Html5 Tags
▪ Html Forms
❑ Exercise
How Web Works ? (1)
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to

read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to
determine how to display the document.
How Web Works ? (2)
HTML Introduction
❑ What is HTML?
▪ Hypertext Markup Language(HTML) is the standard markup language

for creating web pages and web applications.
▪ HTML describes the structure of a Web page
▪ HTML consists of a series of elements
▪ HTML elements tell the browser how to display the content
▪ HTML is a language that tells the browsers (like Firefox, Chrome, IE etc.)
what exactly to show to the user.
The Structure of an HTML Document (1)
❑ What is an HTML element(tag) ?
▪ An HTML element is defined by a start tag, some content, and an end tag.
<tagname> Content goes here... </tagname>
▪ The HTML element is everything from the start tag to the end tag.
▪ All HTML elements can have attributes
▪ Attributes provide additional information about elements
▪ Attributes are always specified in the start tag
▪ Attributes usually come in name/value pairs like: name="value"
<tag attribute-name=”attribute-value”> Content … </tag>

The file extension for an HTML document is .htm or .html

HTML Tags & Attributes
❑ Tags
• The <html> element is the root element and it defines the whole HTML document.
• Doctype is an first element of the HTML document.
• The <!DOCTYPE html> declaration defines that this document is an HTML5 document
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
❑ Attributes
• The style attribute is used to add styles to an element, such as color, font, size, and
more.
• The lang attribute inside the <html> tag to declare the language of the Web page.
• The width and height attributes which specifies the width and height of the image
(in pixels).
• The src attribute specifies the path to the image to be displayed.
• The href attribute specifies the URL of the page where the link goes to
HTML Headings & Paragraphs
❑ Headings
▪ HTML headings are titles or subtitles that you want to display on a webpage.
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important
heading.
❑ Paragraph
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p>
HTML Text Formatting
❑ HTML contains several elements for defining text with a special meaning.
HTML Images
❑ Images can improve the design and the appearance of a web page.
▪ The HTML <img> tag is used to embed an image in a web page.
▪ The <img> tag is empty, it contains attributes only, and does not have a closing tag.
▪ The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
<img src="img_girl.jpg" alt="Girl in a jacket">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

HTML Hyperlinks
❑ HTML links are hyperlinks.
▪ A link does not have to be text. A link can be an image or any other HTML
element!
▪ The HTML <a> tag defines a hyperlink.
▪ The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
<a href="url">link text</a>
▪ The target attribute specifies where to open the linked document.

▪ The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was
clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
<a href="https://www.google.com/" target="_blank">Visit Google!</a>

HTML Lists
❑ HTML lists allow web developers to group a set of related items in lists.
❑ Unordered HTML List
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
• The list items will be marked with bullets (small black circles) by default
❑ Ordered HTML List

• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
• The list items will be marked with numbers by default
HTML Tables
❑ HTML tables allow web developers to arrange data into rows and columns.
▪ The <table> tag defines an HTML table.
▪ Each table row is defined with a <tr> tag. Each table header is defined with
a <th> tag. Each table data/cell is defined with a <td> tag.
▪ By default, the text in <th> elements are bold and centered.
▪ By default, the text in <td> elements are regular and left-aligned.
HTML Container Tags
❑ HTML generally has two types of displayed data - blocks and inline elements.
Blocks take up 100% of the page width, while inline elements take up only the
space that is required for them.
▪ <div> tag is the most commonly used block-type tag.

• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
▪ <span> tag is the most commonly used inline tag.

• A <span> element which is used to color a part of a text
• The <span> tag is an inline container used to mark up a part of a text, or a part
of a document.
• The <span> tag is easily styled by CSS or manipulated with JavaScript using the
class or id attribute.
• The <span> tag is much like the <div> element, but <div> is a block-level
element and <span> is an inline element.
HTML5 Tags
❑ In HTML there are some semantic elements that can be used to define different
parts of a web page:
• <article> - defines an article in a document.

• <header> - defines a header for a document or section.
• <footer> - defines a footer for document or section.
• <section> - a section in document.
• <nav> - navigation links.
• <canvas> - drawable (usually via JS) graphics.
• <svg> - rendering svg elements.
• <audio>
• <video>
HTML Forms (1)
❑ An HTML form is used to collect user input. The user input can then be sent to a
server for processing.
▪ The HTML <form> element defines a form that is used to collect user input. An
HTML form contains form elements.
▪ Form elements are different types of input elements, like: text fields,
checkboxes, radio buttons, submit buttons, and more.
▪ The <input> element is the most important form element.
▪ The <input> element is displayed in several ways, depending on
the type attribute.
HTML Forms (2)
▪ The <label> tag defines a label for many form elements.

▪ The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user is focused on the input
element.
▪ The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.
❑ The <textarea> element defines a multi-line input field (a text area)
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.
HTML Forms (3)
❑ The <select> element defines a drop-down list

• The <option> elements defines an option that can be selected.
• By default, the first item in the drop-down list is selected.
Exercises
▪ Define your own HTML page by using the elements studied in this module. Try
to be creative by creating a simple page with the theme you want (ex: create
a page for a blog ).
AGENDA
❑ CSS Introduction
▪ How to use CSS
▪ CSS Selectors
▪ CSS Priority
▪ CSS Properties
▪ CSS Font-Styling
▪ CSS Borders
▪ CSS Element Alignment
▪ CSS Box Model
▪ CSS Layout
▪ CSS Displaying Elements
▪ CSS Pseudo-Classes
▪ CSS3 Features
▪ CSS Libraries
❑ Exercise
CSS Introduction
❑ What is CSS?
▪ CSS means Cascading Style Sheets.

▪ Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language.
▪ It is a language used to define the styles of the HTML document.
▪ Styling the Web with CSS.
▪ It is a standard for selectors(to select HTML elements), properties and attributes
to assign style to HTML elements.
▪ CSS is useful to separate style from content.
CSS Introduction
CSS Introduction
How to Use CSS? (1)
▪ CSS can be used in three ways:
1. External CSS
▪ An external style sheet can be written in any text editor, and must be saved
with a .css extension. Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head section.
How to Use CSS? (2)
2. Internal CSS
▪ The internal style is defined inside the <style> element, inside the head section.
How to Use CSS? (3)
3. Inline CSS
▪ An inline style may be used to apply a unique style for a single element. Inline
styles are defined within the "style" attribute of the relevant element.
CSS Selectors (1)
❑ HTML elements can be selected in three ways:
1. By tag name (h1, p, body …)

▪ The element selector selects HTML elements based on the element name.
2. By class attribute
▪ The class selector selects HTML elements with a specific class attribute.
▪ To select elements with a specific class, write a period (.) character, followed
by the class name.
3. By id attribute.
▪ The id selector uses the id attribute of an HTML element to select a specific
element.
▪ The id of an element is unique within a page, so the id selector is used to select
one unique element.
▪ To select an element with a specific id, write a hash (#) character, followed by
the id of the element.
CSS Selectors (2)
CSS Priority
CSS Properties (1)
❑ CSS Width and Height Properties
▪ The height and width properties are used to set the height and width of an
element. It sets the height/width of the area inside the padding, border, and
margin of the element.
▪ The height and width properties may have the following values:
o auto - This is default. The browser calculates the height and width
o length - Defines the height/width in px, cm etc.
o % - Defines the height/width in percent of the containing block
o initial - Sets the height/width to its default value
o inherit - The height/width will be inherited from its parent value
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
CSS Properties (2)
❑ CSS Color and Background Color Properties
▪ In CSS, a color can be specified by using a color name. In CSS, colors can also
be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA
values.
▪ Color and background-color accept literal values (eg. green, red, magenta,…)
or functions like RGBA (eg. #000, #0FF9BB, …).
<p style="background-color:Tomato;">Lorem ipsum...</p>
<h1 style="color:Tomato;">Hello World</h1>

CSS Font-Styling
❑ The CSS font properties define the font family, boldness, size, and the style of a text.
▪ The font family of a text is set with the font-family property.
▪ font-family accepts font values like “Times New Roman” or “Calibri”.
.serif {
font-family: "Times New Roman", Times, serif;
}
▪ The font-size property sets the size of the text. The font-size value can be an absolute,
or relative size.
▪ Absolute size:
o Sets the text to a specified size
o Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
o Absolute size is useful when the physical size of the output is known
▪ Relative size:
o Sets the size relative to surrounding elements
o Allows a user to change the text size in browsers
CSS Font-Styling
▪ The font-weight property sets how thick or thin characters in text should be
displayed.
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
CSS Font-Styling
❑ The text-decoration property accepts values like underline and strikethrough
and sets the decorations of the text.
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline
overline;
}
CSS Borders
❑ The CSS border properties allow you to specify the style, width, and color of an
element's border.
▪ In CSS, there are also properties for specifying each of the borders (top, right,
bottom, and left)
• The border property is a shorthand property for the following individual border
properties: p{
border-width border-bottom: 6px solid red;
border-style (required) background-color: lightgrey;
border-color }
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
CSS Element Alignment (1)
❑ Text-align property accepts left, right, center and justify values and aligns the text
horizontally within the container.
▪ To center the text inside an element, use text-align: center.
❑ The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
▪ CSS has properties for specifying the padding for each side of an element:
div {
padding-top border: 1px solid black;
padding-right background-color: lightblue;
padding-bottom padding-top: 50px;
padding-right: 30px;
padding-left
padding-bottom: 50px;
padding-left: 80px;
}
CSS Element Alignment (2)
❑ The CSS margin properties are used to create space around elements, outside of
any defined borders.
▪ There are properties for setting the margin for each side of an element (top, right,
bottom, and left).
▪ CSS has properties for specifying the margin for each side of an element:
margin-top div {
border: 1px solid black;
margin-right
margin-top: 100px;
margin-bottom margin-bottom: 100px;
margin-left margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
CSS Box Model
❑ The following diagram demonstrates how the width, height, padding, border, and
margin CSS properties determines how much space an element can take on a
web page.
CSS Layout (1)
❑ All elements by default have a property named position.
▪ The position property specifies the type of positioning method used for an element
(static, relative, fixed, absolute or sticky).
▪ There are five different position values:
static relative
fixed absolute sticky
▪ Its default value is static, meaning the elements are just rendered straightforward
on the nearest available space.
▪ Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first.
▪ An element with position : static is not positioned in any special way; it is always
positioned according to the normal flow of the page.
div.static {
position: static;
border: 3px solid #73AD21;
}
CSS Layout (2)
▪ An element with position : relative is positioned relative to its normal position.
div.relative {
position: relative;
left: 30px;
}
▪ An element with position: fixed; is positioned relative to the viewport, which means
it always stays in the same place even if the page is scrolled. The top, right,
bottom, and left properties are used to position the element.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
CSS Layout (3)
▪ An element with position: absolute; is positioned relative to the nearest positioned

ancestor (instead of positioned relative to the viewport, like fixed).
div.relative {
position: relative;
width: 400px;
height: 200px;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
▪ An element with position: sticky; is positioned based on the user's scroll position.
▪ A sticky element toggles between relative and fixed, depending on the scroll position.
CSS Displaying Elements
❑ The display property specifies the display behavior (the type of rendering box) of
an element. All elements by default have a display property but it varies on the
type of the element.
CSS Pseudo-Classes
❑ A pseudo-class is used to define a special state of an element.
▪ Style an element when a user mouses over it

▪ Style visited and unvisited links differently
▪ Style an element when it gets focus
selector:pseudo-class {
▪ The syntax of pseudo-classes:
property: value;
}
hover -> defines a style that should be applied to the element once it is
hovered by cursor.
first-child -> defines a style for the first element in a list of elements.
nth-child(n) -> does that for any of the child elements.
link -> is a style for unvisited links.
visited-> is a style for visited links.
active -> and focus -> are styles for elements that are currently focused on by
the user.
CSS3 Features (1)
▪ Border-radius - The border-radius property can be used to create rounded
corners. This property typically defines the shape of the corner of the outer border
edge.
.box {
width: 300px;
height: 150px;
background: #ffb6c1;
border: 2px solid #f08080;
border-radius: 20px;
}
▪ Box-shadow - The box-shadow property can be used to add shadow to the

element's boxes.
.box{
width: 200px;
box-shadow: offset-x offset-y blur-radius color; height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}
CSS3 Features (2)
▪ Text-shadow - property used to apply the shadow effects on text.
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
▪ Opacity - defines the opacity.
▪ Transform - allows to rotate the element.
▪ Font-face - allows to import custom fonts.

CSS Libraries
AGENDA
❑ JS Introduction
▪ What is JavaScript?
▪ JS Alerts and Logs
▪ JS Variables
▪ JS Data Comparison
▪ JS Operators
▪ JS Arrays
▪ JS Objects
▪ JS Functions
▪ Accessing HTML Elements
▪ JS Binding events
▪ What is TypeScript?
❑ Exercise
What is JavaScript?
❑ JavaScript is the most popular and widely used client-side scripting language.
Client-side scripting refers to scripts that run within your web browser. JavaScript is
designed to add interactivity and dynamic effects to the web pages by
manipulating the content returned from a web server.
❑ JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages

2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
▪ JavaScript is a programming language designed to add interactivity to web pages.
▪ <script
To execute JS code, yousrc=“script.js”></script>
can simply put it in <script> tag in your HTML.
▪ The extension for a JavaScript file is .js
▪ In HTML, JavaScript code is inserted between <script> and </script> tags.
JS Alerts and Logs
❑ JavaScript can "display" the output in two ways :
▪ alert - > creates a dialog window
▪ console.log -> prints the output into Console tab in your browser
▪ document.write is used on an HTML page to display text on the screen.
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<body>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
<script>
</script>
alert(5 + 6);
</script>
</body>
</html>
</body>
</html>
JS Variables
❑ JavaScript is case-sensitive. This means that variables, language keywords,
function names, and other identifiers must always be typed with a consistent
capitalization of letters.
▪ You can define a variable with the var keyword, whereas the assignment
operator (=) is used to assign value to a variable, like this:
var varName = value;
▪ In JavaScript, if a variable has been declared, but has not been assigned a
value explicitly, is automatically assigned the value undefined.
JS Data Comparison (1)
❑ The comparison operators are used to compare two values in a Boolean
fashion.
❑ There are two operators for comparison:
== compares values.
=== compares values and types.
JS Data Comparison (2)
JS Operators
❑ The arithmetic operators are used to perform common arithmetical operations,
such as addition, subtraction, multiplication.
JS Arrays (1)
❑ JavaScript arrays can store any valid value, including strings, numbers, objects,
functions, and even other arrays, thus making it possible to create more
complex data structures such as an array of objects or an array of arrays.
▪ Defining an array in JS:
▪ An array is an ordered collection of values. Each value in an array is called an

element, and each element has a numeric position in an array, known as its
index.
Accessing the Elements of an Array
▪ Array elements can be accessed by their index using the square bracket
notation. An index is a number that represents an element's position in an
array. Array indexes are zero-based.
JS Arrays (2)
Getting the Length of an Array
▪ The length property returns the length of an array, which is the total number of
elements contained in the array.
JS Objects (1)
❑ A JavaScript object is just a collection of named values. These named values
are usually referred to as properties of the object.
▪ An object can be created with curly brackets {} with an optional list of
properties.
▪ A property is a "key: value" pair, where the key (or property name) is always a
string, and value (or property value) can be any data type, like strings,
numbers, Booleans or complex data type like arrays, functions, and other
objects.
JS Objects (2)
Accessing Object's Properties
▪ To access or get the value of a property, you can use the dot (.), or square
bracket ([]) notation.
JS Functions
Defining and Calling a Function
▪ The declaration of a function start with the function keyword, followed by the
name of the function you want to create, followed by parentheses i.e. () and
finally place your function's code between curly brackets {}.
Accessing HTML Elements (1)
❑ Selecting Elements by ID
▪ An element based on its unique ID can be accessed with
the getElementById() method.
▪ The getElementById() method will return the element as an object if the
matching element was found, or null if no matching element was found in the
document.
▪ Any HTML element can have an id attribute. The value of this attribute must be
unique within a page i.e. no two elements in the same page can have the
same ID.
❑ Selecting Elements by Class Name

▪ The getElementsByClassName() method to select all the elements having
specific class names.
▪ This method returns an array-like object of all child elements which have all of
the given class names.
Accessing HTML Elements (2)
JS Binding Events (1)
❑ An event is something that happens when user interact with the web page,
such as when he clicked a link or button, entered text into an input box or
textarea, made selection in a select box, pressed key on the keyboard, moved
the mouse pointer, submits a form, etc.
❑ By convention, the names for event handlers always begin with the word "on",
so an event handler for the click event is called onclick, similarly an event
handler for the load event is called onload.
❑ There are several ways to assign an event handler. The simplest way is to add
them directly to the start tag of the HTML elements using the special event-
handler attributes.
JS Binding Events (2)
What is TypeScript?
❑ TypeScript is an open-source, object-oriented programing language.
❑ It is a language for application-scale JavaScript development, which can be
executed on any browser, any Host, and any Operating System.
❑ TypeScript is not directly run on the browser. It needs a compiler to compile
and generate in JavaScript file.
❑ TypeScript is the ES6 version of JavaScript with some additional features.
❑ It contains all elements of the JavaScript.
❑ TS is used in a variety of JS frameworks - including Angular
AGENDA
❑ Angular Introduction
▪ Angular Evolution
▪ How do Client-Side Frameworks Work ?
▪ Angular Architecture
▪ App Structure
▪ Angular Main Building Blocks
▪ Modules
▪ Components
▪ Templates
▪ Meta Data
▪ Data Binding
▪ Directives
▪ Event Handlers
▪ Routing
❑ Exercise
Angular Introduction
❑ Angular is a client-side framework written in TypeScript. Angular works on the
browser level and helps organize the view layer, plus handles the basic routing.
❑ Angular provides tools to connect to the backend layer that can be written
on any language – e.g. Java.
❑ Angular is a great tool that will:
▪ Enable you to create software quicker and with less effort

▪ Result in a more maintainable software
▪ Encourage good programming practices and design patterns like MVC
▪ Allow you to collaborate easier with other people
▪ Allow you to become proficient in a reasonable time
▪ Address problems that may arise in your software architecture such as
Dependency Injection, DRY (Don't Repeat Yourself), etc
Angular Evolution
Angular Features
❑ Cross-Platform
• Progressive web apps: It uses modern web platform capabilities to deliver an app-like
experience. It gives high performance, offline, and zero-step installation. So, working
with Angular is pretty much easy.
• Native: You can build native mobile apps with strategies using Ionic Framework,
NativeScript, and React Native.
• Desktop: Create desktop-installed apps across Mac, Windows, and Linux using the
same Angular methods you’ve learned for the web plus.
❑ Speed and Performance
• Code generation: Angular turns your templates into code that’s highly optimized for
JavaScript virtual machines, giving you all the benefits of hand-written code with the
productivity of a framework.
• Universal: You can use any technology with Angular for serving the application like
node.js, .NET, PHP and other servers
• Code splitting: Angular apps load quickly with the new Component Router, which
delivers automatic code-splitting, so users only load code required to render the view
they request.
❑ Productivity
• Templates: Quickly create UI views with simple and powerful template syntax.
How do traditional frameworks work?
How do Client-Side frameworks work?
Angular Architecture (1)
Angular Architecture (2)
❑ Building blocks of Angular are NgModules

❑ A typical app consists of several logical NgModules. Usual practice – a root
module and several feature modules around it.
❑ NgModules consist of Components.
❑ Components define Views (HTML with data injections).
❑ Components use Services (Classes that handle logic and can be injected as
❑ dependencies).
❑ Class separation and binding is done using metadata that defines the
associations.
Angular App Structure (1)
Angular Main Building Blocks
❑ Modules
❑ Components
❑ Templates
❑ Metadata
❑ Data binding
❑ Directives
❑ Services
❑ Dependency injection
Angular Modules (1)
❑ Angular apps are modular and Angular has its own modularity system called
Angular modules or NgModules.
❑ Every Angular app has at least one Angular module class, the root module,
conventionally named AppModule.
❑ An Angular module, whether a root or feature, is a class with an @NgModule
decorator.
❑ Decorators are functions that modify JavaScript classes.
Angular Modules (2)
❑ NgModule is a decorator function that takes a single metadata object whose
properties describe the module. The most important properties are:
▪ declarations - the view classes that belong to this module. Angular has three
kinds of view classes: components, directives, and pipes.
▪ exports - the subset of declarations that should be visible and usable in the
component templates of other modules.
▪ imports - other modules whose exported classes are needed by component

templates declared in this module.
▪ providers - creators of services that this module contributes to the global

collection of services; they become accessible in all parts of the app.
▪ bootstrap - the main application view, called the root component, that hosts
all other app views. Only the root module should set this bootstrap property.
Angular Modules (3)
Angular Modules (5)
Angular Modules (4)
❑ Angular ships as a collection of JavaScript modules. You can think of them as

library modules.
❑ Each Angular library name begins with the @angular prefix.
❑ You install them with the npm package manager and import parts of them with
JavaScript import statements.
❑ Import Angular's Component decorator from the @angular/core library like this:
❑ You also import Angular modules from Angular libraries using JavaScript import
statements:
Angular Modules (4)
❑ If the application module needs material from within that BrowserModule, you
need to add it to the @NgModule metadata imports like this:
❑ Modules helps you and Angular to organize your application

❑ Modules help separate your app into self contained units
Angular Components (1)
❑ Every Angular project has at least one component, the root (base) component
.
❑ Each component defines the class that contains application data and logic,
and it is associated with the HTML template that defines the view to be
displayed in a target ‘app.A‘ component controls a patch of screen called a
view.
❑ A component controls a patch of screen called a view.
❑ The @Component decorator identifies the class immediately below it as the

component and provides the template and related component-specific
metadata.
Angular Templates (1)
❑ The angular template combines the HTML with Angular markup that can
modify HTML elements before they are displayed.
❑ You define a component's view with its companion template. A template is a
form of HTML that tells Angular how to render the component.
❑ A template looks like regular HTML, except for a few differences[templates
directives].
❑ Template directives provide program logic, and binding markup connects your
application data and the DOM. There are two types of data binding:
Property binding lets you interpolate values that are computed from your
application data into the HTML.
Event binding lets your app respond to user input in the target environment by
updating your application data.
Angular MetaData (1)
❑ Metadata tells Angular how to process a class. It is used to decorate the class
so that it can configure the expected behavior of a class.
❑ The user can use metadata to a class to tell Angular app that AppComponent
is the component.
❑ Here is the @Component decorator, which identifies the class immediately

below it as a component class.
❑ The @Component decorator takes a required configuration object with the
information Angular needs to create and present the component and its view.
Angular MetaData (2)
❑ The most useful @Component configuration options:
▪ selector: CSS selector that tells Angular to create and insert an instance of this
component where it finds a <app-root>tag which is Parent Component.
▪ templateUrl: module-relative address of this component's HTML template.
▪ providers: array of dependency injection providers for services that the
component requires.
❑ The metadata in the @Component tells Angular where to get the major
building blocks you specify for the component.
❑ The template, metadata, and component together describe a view.
Angular Data Binding (1)
❑ Data binding plays an important role in communication between a template and its
component.
❑ Angular supports data binding, a mechanism for coordinating parts of a template
with parts of a component. Add binding markup to the template HTML to tell
Angular how to connect both sides.
❑ Angular allows defining communication between a component and the DOM,

making it very easy to define interactive applications without worrying about pulling
and pushing the data.
❑ From the Component to the DOM
Interpolation: {{ value }} : Interpolation adds the value of the property from the
component.
❑ Property binding: [property]=”value”

With property binding, a value is passed from a component to a specified
property, which can often be a simple html attribute.
❑ Two-Way binding: [(ngModel)]=”property”

❑ It is an important form that combines property and event binding in a single
notation, using the ngModel directive.
Event Handlers (1)
❑ Users need to interact with our page – so event handlers are required.
❑ Event binding: (Event)=”myFunction($event)”
❑ With Event binding, a value is passed from a child Component to Parent

Component, which can often be a simple html attribute.
Event Handlers (2)
Angular Directives (1)
❑ Angular templates are dynamic. When Angular renders them, it transforms the
DOM according to the instructions given by directives.
❑ A directive is a class with a @Directive decorator.
❑ A @Component decorator is actually a @Directive decorator extended with
template-oriented features.
❑ There are two kinds of directives: structural and attribute directives.
❑ Structural directives alter layout by adding, removing, and replacing elements
in DOM.
❑ There are two built-in structural directives:
❖ *ngFor tells Angular to stamp out one <li> per hero in the heroes list.
❖ *ngIf includes the HeroDetail component only if a selected hero exists.
❑ Render a list using directive ngFor:
❑ Attribute directives alter the appearance or behavior of an existing element.
❑ The ngModel directive, which implements two-way data binding, is an

example of an attribute directive.
❑ ngModel modifies the behavior of an existing element (typically an <input>) by
setting its display value property and responding to change events.
Routing (1)
❑ Routing helps our application behave like a traditional web page – with URLs
and links.
❑ Angular can accept different routes and handle parameters using its Routing
module.
❑ This way, some components will behave like pages of your website.
❑ Components handle routing in Angular.
❑ When your browser requests a page on your domain, Angular listens to the
requests and tries to deliver the required view based on the routes map in the
application.
Thank you!

HTMLCSSJS 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTMLCSSJS 3

Uploaded by

Copyright:

Available Formats

HTML, CSS & JavaScript

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to

▪ Hypertext Markup Language(HTML) is the standard markup language

<tagname> Content goes here... </tagname>

<tag attribute-name=”attribute-value”> Content … </tag>

The file extension for an HTML document is .htm or .html

<img src="img_girl.jpg" alt="Girl in a jacket">

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

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

▪ The target attribute specifies where to open the linked document.

<a href="https://www.google.com/" target="_blank">Visit Google!</a>

❑ Ordered HTML List

▪ <div> tag is the most commonly used block-type tag.

▪ <span> tag is the most commonly used inline tag.

• <article> - defines an article in a document.

▪ The <label> tag defines a label for many form elements.

❑ The <textarea> element defines a multi-line input field (a text area)

❑ The <select> element defines a drop-down list

▪ CSS means Cascading Style Sheets.

1. By tag name (h1, p, body …)

<p style="background-color:Tomato;">Lorem ipsum...</p>

<h1 style="color:Tomato;">Hello World</h1>

▪ An element with position: absolute; is positioned relative to the nearest positioned

▪ Style an element when a user mouses over it

▪ Box-shadow - The box-shadow property can be used to add shadow to the

▪ Opacity - defines the opacity.

▪ Transform - allows to rotate the element.

▪ Font-face - allows to import custom fonts.

❑ JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

▪ JavaScript is a programming language designed to add interactivity to web pages.

var varName = value;

▪ An array is an ordered collection of values. Each value in an array is called an

Getting the Length of an Array

❑ Selecting Elements by Class Name

❑ Angular is a great tool that will:

▪ Enable you to create software quicker and with less effort

❑ Building blocks of Angular are NgModules

▪ imports - other modules whose exported classes are needed by component

▪ providers - creators of services that this module contributes to the global

❑ Angular ships as a collection of JavaScript modules. You can think of them as

❑ Modules helps you and Angular to organize your application

❑ A component controls a patch of screen called a view.

❑ The @Component decorator identifies the class immediately below it as the

❑ Here is the @Component decorator, which identifies the class immediately

❑ The most useful @Component configuration options:

❑ Angular allows defining communication between a component and the DOM,

❑ Property binding: [property]=”value”

❑ Two-Way binding: [(ngModel)]=”property”

❑ Event binding: (Event)=”myFunction($event)”

❑ With Event binding, a value is passed from a child Component to Parent

❑ Attribute directives alter the appearance or behavior of an existing element.

❑ The ngModel directive, which implements two-way data binding, is an

You might also like