Information Technology Essentials — Lecture 14

Dr. Karim Lounis

Fall 2023

Dr. Karim Lounis Information Technology Essentials Fall 2023 1 / 79

 Web Technology (Part 3)

Dr. Karim Lounis Information Technology Essentials Fall 2023 2 / 79

 Web Technology CSS

XML

Dr. Karim Lounis Information Technology Essentials Fall 2023 3 / 79

 Web Technology CSS

eXtensible Markup Language (XML)

Definition
XML. Is defined as a declarative interpreted special-purpose programming
language designed to store and transport data (you can also, superfecially,
call it a markup language, just like you might refer to HTML).

It uses tags to encode documents in a format that is both human-readable

and machine-readable.
XML code is just information wrapped in tags (marks).
XML files have file extension *.xml.
XML tags are not predefined like HTML tags are. You define the tags (eX).
XML simplifies data sharing among various platforms (no conversion).
XML content can be loaded into an HTML file using Javascript.
Dr. Karim Lounis Information Technology Essentials Fall 2023 4 / 79
 Web Technology CSS

eXtensible Markup Language (XML)

Definition
XML. Is defined as a declarative interpreted special-purpose programming
language designed to store and transport data (you can also, superfecially,
call it a markup language, just like you might refer to HTML).

Dr. Karim Lounis Information Technology Essentials Fall 2023 5 / 79

 Web Technology CSS

eXtensible Markup Language (XML)

Definition
XML. Is defined as a declarative interpreted special-purpose programming
language designed to store and transport data (you can also, superfecially,
call it a markup language, just like you might refer to HTML).

XML is generally used when:

You want to export and import data between databases.
You want diff applications to exchange data thru a middleware.
You want to exchange data btw processes on different PCs.
And many more
While XML has its strengths in certain scenarios, it’s important to note
that in web development, the use of JSON (JavaScript Object Notation)
has become more prevalent due to its simplicity, ease of use, and close
relationship with JavaScript. But, this doesn’t mean it is replacing it.
Dr. Karim Lounis Information Technology Essentials Fall 2023 6 / 79
 Web Technology CSS

Cascaded Styling Sheets

Dr. Karim Lounis Information Technology Essentials Fall 2023 7 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS)

Definition
CSS. Is a standard declarative interpreted special-purpose programming lan-
guage used to style and format the visual presentation of HTML and XML
documents on the web. The language is interpreted by a web-browser.

A document containing CSS source code has extension *.css.

Dr. Karim Lounis Information Technology Essentials Fall 2023 8 / 79
 Web Technology CSS

Cascaded Styling Sheets (CSS)

CSS code can be embedded into HTML code following three different ways:
1 Inline. This approach consists of additing CSS properties to HTML
tags to customize the background, color, position ... of the item (head-
ings, paragraphs, sentence, etc) specified between the HTML tag.
2 Internal. This approach consists of defining CSS properties within
the head section of an HTML document. These properties are defined
within <style>...</style> tags.
3 External. This approach consists of defining CSS properties within an
external file with extension *.css. The file is then included into the
HTML file using the <link> tag.

Dr. Karim Lounis Information Technology Essentials Fall 2023 9 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — Selectors and Attributes

CSS turns around two main pieces: selectors and attributes:

Selector. It is seen as a container that groups some CSS properties to
be applied on a HTML element. We call them selectors because they
select the concerned HTML element and apply the properties on it.

Attributes. Are the properties (called styles) contained (listed) in a

given selectors. They are applied from top-to-bottom.

Dr. Karim Lounis Information Technology Essentials Fall 2023 10 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — Selectors and Attributes

Selectors are called selectros because they select the concerned HTML
element and apply the properties on it. They can select by:
Name: The selector will use the name of the HTML tag, e.g., if you want
to apply special styles to a paragraph, then in the CSS file there will be a
selector named with letter “p” (because of the HTML p-tag):
In the HTML file <p>ABCD</p> and in the CSS file p{...}

ID: The HTML tag will have an ID, which is the one of the selector, e.g., if
you wanted to apply special styles to a specific paragraph ABCD, then you
would first give an ID to the HTML paragragh tags of that paragraph, and
create a selector with that ID as a name preceeded by a ♯ sign:
In the HTML file <p id="para">ABCD</p> and in the CSS file ♯para{...}

Dr. Karim Lounis Information Technology Essentials Fall 2023 11 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — Selectors and Attributes

Selectors are called selectros because they select the concerned HTML
element and apply the properties on it. They can select by:
ID: The HTML tag will have an ID, which is the one of the selector, e.g., if
you wanted to apply special styles to a specific paragraph ABCD, then you
would first give an ID to the HTML paragragh tags of that paragraph, and
create a selector with that ID as a name preceeded by a ♯ sign:
In the HTML file <p id="para">ABCD</p> and in the CSS file ♯para{...}

Class: The HTML tag will have class with a value. The class name will be
the name of the selector preceeded by a period, e.g., if you wanted to apply
special styles to a specific paragraph XYZ, then you would first give a class
ID to the HTML paragragh opening tag of that paragraph, and create a
class selector with the name of the class ID preceeded by a period:
In the HTML file <p class="para">XYZ</p> & in the CSS file .para{...}

Dr. Karim Lounis Information Technology Essentials Fall 2023 12 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — Inline

This is an example of “Inline integration” to embed CSS properties:

Dr. Karim Lounis Information Technology Essentials Fall 2023 13 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — Internal

This is an example of “Internal integration” to embed CSS properties:

Dr. Karim Lounis Information Technology Essentials Fall 2023 14 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — External

This is an example of “external integration” to embed CSS properties:

Dr. Karim Lounis Information Technology Essentials Fall 2023 15 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — External

This is an example of “external integration” to embed CSS properties:

Dr. Karim Lounis Information Technology Essentials Fall 2023 16 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — External

This is an example of “external integration” to embed CSS properties:

This approach is the most adopted and recommended one

Dr. Karim Lounis Information Technology Essentials Fall 2023 17 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — External

You may want to apply different styling properties for the same tag. You
could then add identityes to each tag that you want to customize, and define
those in the CSS file using ♯ sign:

Dr. Karim Lounis Information Technology Essentials Fall 2023 18 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — External

You may want to apply different styling properties for the same tag. You
could then add identityes to each tag that you want to customize, and define
those in the CSS file using ♯ sign:

Dr. Karim Lounis Information Technology Essentials Fall 2023 19 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — External

You may want to apply some styling properties for different tagged items.
You could then use the concept of class. You define classes in the CSS file
and specify for each HTML tag which class you want to apply:

Dr. Karim Lounis Information Technology Essentials Fall 2023 20 / 79

 Web Technology CSS

Cascaded Styling Sheets (CSS) — External

You may want to apply some styling properties for different tagged items.
You could then use the concept of class. You define classes in the CSS file
and specify for each HTML tag which class you want to apply:

Dr. Karim Lounis Information Technology Essentials Fall 2023 21 / 79

 Web Technology CSS

CSS Properties (Font)

You can change the font of your text to whatever you want:

Dr. Karim Lounis Information Technology Essentials Fall 2023 22 / 79

 Web Technology CSS

CSS Properties (Borders)

You can customize the borders of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 23 / 79

 Web Technology CSS

CSS Properties (Borders)

You can customize the borders of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 24 / 79

 Web Technology CSS

CSS Properties (Borders)

You can customize the borders of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 25 / 79

 Web Technology CSS

CSS Properties (Borders)

You can customize the borders of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 26 / 79

 Web Technology CSS

CSS Properties (Background Image)

You can customize the background of your HTML elements and use images:

Dr. Karim Lounis Information Technology Essentials Fall 2023 27 / 79

 Web Technology CSS

CSS Properties (Background Image)

You can customize the background of your HTML elements and use images:

Dr. Karim Lounis Information Technology Essentials Fall 2023 28 / 79

 Web Technology CSS

CSS Properties (Background Image)

You can customize the background of your HTML elements and use images:

Dr. Karim Lounis Information Technology Essentials Fall 2023 29 / 79

 Web Technology CSS

CSS Properties (Background Image)

You can customize the background of your HTML elements and use images:

Dr. Karim Lounis Information Technology Essentials Fall 2023 30 / 79

 Web Technology CSS

CSS Properties (Background Image)

You can customize the background of your HTML elements and use images:

Dr. Karim Lounis Information Technology Essentials Fall 2023 31 / 79

 Web Technology CSS

CSS Properties (Margines)

You can customize margines of your HTML elements:

Here, we are just creating two div boxes to customize.

Dr. Karim Lounis Information Technology Essentials Fall 2023 32 / 79
 Web Technology CSS

CSS Properties (Margines)

You can customize margines of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 33 / 79

 Web Technology CSS

CSS Properties (Margines)

You can customize margines of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 34 / 79

 Web Technology CSS

CSS Properties (Margines)

You can customize margines of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 35 / 79

 Web Technology CSS

CSS Properties (Margines)

You can customize margines of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 36 / 79

 Web Technology CSS

CSS Properties (Margines)

You can customize margines of your HTML elements:

Dr. Karim Lounis Information Technology Essentials Fall 2023 37 / 79

 Web Technology CSS

CSS Properties (Float)

Float property are used to position elements with respect to other elements.
You could use this for example to wrap an image with text:

Dr. Karim Lounis Information Technology Essentials Fall 2023 38 / 79

 Web Technology CSS

CSS Properties (Float)

Float property are used to position elements with respect to other elements.
You could use this for example to wrap an image with text:

Dr. Karim Lounis Information Technology Essentials Fall 2023 39 / 79

 Web Technology CSS

CSS Properties (Float)

Float property are used to position elements with respect to other elements.
You could use this for example to wrap an image with text:

Dr. Karim Lounis Information Technology Essentials Fall 2023 40 / 79

 Web Technology CSS

CSS Properties (Float)

Float property are used to position elements with respect to other elements.
You could use this for example to wrap an image with text:

Dr. Karim Lounis Information Technology Essentials Fall 2023 41 / 79

 Web Technology CSS

CSS Properties (Float)

Float property are used to position elements with respect to other elements.
You could use this for example to wrap an image with text:

Dr. Karim Lounis Information Technology Essentials Fall 2023 42 / 79

 Web Technology CSS

CSS Properties (Float)

Float property are used to position elements with respect to other elements.
You could use this for example to wrap an image with text:

Dr. Karim Lounis Information Technology Essentials Fall 2023 43 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 44 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 45 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 46 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 47 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 48 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 49 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 50 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 51 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 52 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 53 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 54 / 79

 Web Technology CSS

CSS Properties (Positioning)

You can position elements using CSS wherever you want in the webpage.
There are various positionning attributes though: static, relative, absolute,
fixed, and sticky:

Dr. Karim Lounis Information Technology Essentials Fall 2023 55 / 79

 Web Technology CSS

CSS Properties (Pseudo-class)

You can use peudo-classes, which are “sub-tags” of HTML tags:

Dr. Karim Lounis Information Technology Essentials Fall 2023 56 / 79

 Web Technology CSS

CSS Properties (Pseudo-class)

You can use peudo-classes, which are “sub-tags” of HTML tags:

Dr. Karim Lounis Information Technology Essentials Fall 2023 57 / 79

 Web Technology CSS

CSS Properties (Pseudo-class)

You can use peudo-classes, which are “sub-tags” of HTML tags:

Dr. Karim Lounis Information Technology Essentials Fall 2023 58 / 79

 Web Technology CSS

CSS Properties (Pseudo-class)

You can use peudo-classes, which are “sub-tags” of HTML tags:

Dr. Karim Lounis Information Technology Essentials Fall 2023 59 / 79

 Web Technology CSS

CSS Properties (Shadows)

You can create shadows for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 60 / 79

 Web Technology CSS

CSS Properties (Shadows)

You can create shadows for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 61 / 79

 Web Technology CSS

CSS Properties (Shadows)

You can create shadows for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 62 / 79

 Web Technology CSS

CSS Properties (Shadows)

You can create shadows for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 63 / 79

 Web Technology CSS

CSS Properties (Transformations)

You make transformations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 64 / 79

 Web Technology CSS

CSS Properties (Transformations)

You make transformations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 65 / 79

 Web Technology CSS

CSS Properties (Transformations)

You make transformations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 66 / 79

 Web Technology CSS

CSS Properties (Transformations)

You make transformations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 67 / 79

 Web Technology CSS

CSS Properties (Transformations)

You make transformations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 68 / 79

 Web Technology CSS

CSS Properties (Transformations)

You make transformations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 69 / 79

 Web Technology CSS

CSS Properties (Animations)

You add animations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 70 / 79

 Web Technology CSS

CSS Properties (Animations)

You add animations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 71 / 79

 Web Technology CSS

CSS Properties (Animations)

You add animations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 72 / 79

 Web Technology CSS

CSS Properties (Animations)

You add animations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 73 / 79

 Web Technology CSS

CSS Properties (Animations)

You add animations for items:

Dr. Karim Lounis Information Technology Essentials Fall 2023 74 / 79

 Web Technology Emails

Emails

Sending Email: Like professional people

Dr. Karim Lounis Information Technology Essentials Fall 2023 75 / 79

 Web Technology Emails

Emails
You may have sent thousands of emails in your life, but did you send them
correctly?

Dr. Karim Lounis Information Technology Essentials Fall 2023 76 / 79

 Web Technology Emails

Emails

An email has several fields to fill up:

To. In this field you put the email address of the main person you want
to reach out. It is recommended to leave this field at the end.
Cc. In this field you put the email addresses of the persons you want
to keep informed (but they are not the main recipients).
Bcc. These are people you want to keep informed but you do not
want the others (in To, Cc, and Bcc) to know they are included in a
conversation. They will not get responses if replied to the email.
Subject. This is the topic of the email (Why you are sending the
email). It should be sound, short, and should tell everything. DO NOT
write your email here (That is very bad and unprofessional).
Main. Here you write your email in multiple short paragraphs, be brief
and concise.

Dr. Karim Lounis Information Technology Essentials Fall 2023 77 / 79

 Web Technology Emails

Emails
You may have sent thousands of emails in your life, but did you send them
correctly?

Dr. Karim Lounis Information Technology Essentials Fall 2023 78 / 79

 End of Presentation

End.

Dr. Karim Lounis Information Technology Essentials Fall 2023 79 / 79