Web Development 4 (HTML & CSS)

1. 4
Web Development
HTML , CSS, JAVASCRIPT, BOOTSTRAP
Prepared by: Ghayour Abbas
Outline:
• Classes
• ID
• File Paths
• Semantic Element
• Entities & Symbols
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet. It can
also be used by a JavaScript to access and manipulate elements with the
specific class name.
In the following example we have three <div> elements with a class attribute
with the value of "city". All of the three <div> elements will be styled equally
according to the .city style definition in the head section:

2. The Syntax For Class
To create a class; write a period (.) character, followed by a class name. Then,
define the CSS properties within curly braces {}:
Multiple Classes
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g. <div
class="city main">. The element will be styled according to all the classes
specified.
In the following example, the first <h2> element belongs to both the city class
and also to the main class, and will get the CSS styles from both of the classes:
Using The id Attribute
The id attribute specifies a unique id for an HTML element. The value of
the id attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet. It
is also used by JavaScript to access and manipulate the element with the
specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then,
define the CSS properties within curly braces {}.
In the following example we have an <h1> element that points to the id name
"myHeader". This <h1> element will be styled according to the #myHeader style
definition in the head section:

3. Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name must
only be used by one HTML element within the page:

5. HTML File Paths
A file path describes the location of a file in a web site's folder structure.
Relative File Paths
A relative file path points to a file relative to the current page.
In the following example, the file path points to a file in the images folder
located at the root of the current web:
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the
developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines
its content.

6. HTML <article> Element
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to distribute
it independently from the rest of the web site.
Examples of where the <article> element can be used:
• Forum posts
• Blog posts
• User comments
• Product cards
• Newspaper articles

7. HTML <footer> Element
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
You can have several <footer> elements in one document.

8. HTML Entities
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the browser
might mix them with tags.
Character entities are used to display reserved characters in HTML.
A character entity looks like this:

9. HTML Symbol Entities
HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a
normal keyboard.
To add such symbols to an HTML page, you can use the entity name or the
entity number (a decimal or a hexadecimal reference) for the symbol.

11. The position Property
The position property specifies the type of positioning method used for an element
(static, relative, fixed, absolute or sticky).

12. The position Property
The position property specifies the type of positioning method used for an
element.
There are five different position values:
• static
• relative
• fixed
• absolute
• sticky
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.
They also work differently depending on the position value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:
position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned
element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.

13. position: fixed;
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.
A fixed element does not leave a gap in the page where it would normally have
been located.
Notice the fixed element in the lower-right corner of the page. Here is the CSS
that is used:
position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses
the document body, and moves along with page scrolling.
Note: Absolute positioned elements are removed from the normal flow, and can
overlap elements.

14. position: sticky;
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. It is positioned relative until a given offset position is met in the
viewport - then it "sticks" in place (like position:fixed).
Task 1 :

15. Task 2 :