SlideShare a Scribd company logo

Web Development 4

•
•
G
ghayour abbas

This document discusses HTML elements and CSS positioning properties. It covers common HTML elements like classes, IDs, semantic elements, and entities. It also covers the CSS position property and its values - static, relative, fixed, absolute, and sticky. For each position value, it provides an example of how elements are positioned and the behavior of top, bottom, left, and right properties depending on the position value.

Related slideshows

Web Development - Lecture 5
Web Development - Lecture 5Web Development - Lecture 5
Web Development - Lecture 5
 
Computer fundamentals-internet p2
Computer fundamentals-internet p2Computer fundamentals-internet p2
Computer fundamentals-internet p2
 
3 Layers of the Web - Part 1
3 Layers of the Web - Part 13 Layers of the Web - Part 1
3 Layers of the Web - Part 1
 
1 of 16
Download to read offline
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:
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:
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:
Web Development 4
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.
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
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.
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:
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.
Web Development 4
The position Property The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
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.
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.
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 :
Task 2 :
Web Development 4

More Related Content

Web Development 4

  • 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 :