html_css

Html css tutorial :
Html :
❖ some html informations:
stands for : hypertext markup language
➢ HyperText: Allows linking to other documents or resources on the web via
hyperlinks.
➢ Markup: Uses tags to define elements within a document. These tags tell
the web browser how to display the content.
➢ Language: 3andou its own code in a standardized format that can be

interpreted by web browsers.
➢ The <!DOCTYPE> declaration represents the document type, and helps

browsers to display web pages correctly. HTML5 is:
<!DOCTYPE html>
➢ <html>: define the root of html document
➢ elements Vs Attributes :element has one or two tags : <p>This is a

paragraph.</p> witch has stat tag and end tag but there are elements
that has only start tag like <br> we can write :
<p>This is a <br> paragraph with a line break.</p> also HTML

tags are not case sensitive: <P> means the same as <p>. and Attributes
provide additional information about elements
❖ The latest version of HTML is HTML5. It introduces several new

features and improvements over previous versions. Here are some
of the key features of HTML5:
New Semantic Elements: HTML5 includes new elements that
provide better structure to web pages:
<header>, <footer>, <article>, <section>, <nav>, <aside>
Audio and Video Support: Native support for embedding audio and
video without the need for external plugins:
2
<audio>: <audio controls><source src="audio.mp3"

type="audio/mpeg"></audio>
<video>: <video controls><source src="video.mp4"
type="video/mp4"></video>
Canvas Element: Allows for drawing graphics and animations using

JavaScript:
<canvas id="myCanvas" width="200" height="100"></canvas>
SVG Support: Scalable Vector Graphics can be directly embedded

and manipulated:
<svg width="100" height="100"><circle cx="50" cy="50" r="40"
stroke="black" stroke-width="3" fill="red" /></svg>
Improved Form Elements: New input types and attributes for better
form handling:
<input type="date">, <input type="email">, <input type="range">
Geolocation API: Allows web applications to access the user's

geographical location (with user permission):
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude); });
Local Storage: Provides a way to store data locally within the user's
browser:
localStorage.setItem("key", "value");
localStorage.getItem("key");
Offline Capabilities: Using the Application Cache to allow web

applications to run offline:
<html manifest="example.appcache">
Web Workers: Allows for background scripts to run in parallel with

the main page:
var worker = new Worker('worker.js');
New JavaScript APIs: Includes APIs for handling drag-and-drop,

history management, and more.
3
These features make HTML5 a powerful and versatile tool for modern web
development, enabling richer, more interactive, and more efficient web
applications.
➢
❖ Indentation: in the button of Vs code window your find spaces by default it set
to 4 change it to 2 also in parameter search for tab size and change it to 2
❖ anchor tag with its attributes : target :_blank to open the link in new
page
<a href="https://www.youtube.com/watch?v=G3e-cpL7ofc" target="_blank">Back to
Amazon</a>
❖ Placing element all along the pages : when you create a div and you
wanna place it somewhere in the page we use css for it and the body :
■ css position - flex - grid - margins/paddings /div / positions
so nahi hadi dificulti tae how i place things ex :

body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh; 🔏🔏🔏🔏 hadi lazm
}
footer {
text-align: center;
padding: 10px;
position: fixed;
bottom: 0; 🔏🔏🔏🔏 /* Sticks to the bottom of the viewport */
width: 100%; }
❖ Forms
➢ :input to open the link in new page
4
❖html entities :
Entity names or entity numbers can be used to display reserved HTML characters or also
some carachters are not supported from some browser so with html entities we remove
this problem and the char is shown on the screen they begin with & here are the most
famous ones
5
css:
❖ cursor : cursor : pointer ; tji une main quand on met la souris au dessus
❖Pseudo-classes :
Syntax :
selector:pseudo-class {
property: value;
What is it :
A pseudo-class is used to define a special state of an element.

For example, it can be used to:
❖ Style an element when a user mouses over it (Hover)
❖ Style visited and unvisited links differently
❖ Style an element when it gets focus ……
❖ 1. Hover :
/* mouse over link */
a:hover {
background-color: blue;
}
➔ hab y9oul ki ndir la souris fou9 l’element hadak dirli hadou changes
❖ 2. Activate :
■ /* selected link */
a:active {
color: #0000FF;
opacity: 0.5
}
6
➔ hab y9oul ki nkliqui 3la l’element mich ghir n7out la souris kima hover
tji une main quand on met la souris au dessus
on peut mettre n’importe quelle propriété inside pseudo classes
❖Opacity :
img {
opacity: 0.5;
}
img:hover {
opacity: 0.9;
}
Ici m3nah quand je met la souris au dessus l’opacity de l’image change
Entre 0 et 1 : 1 trés claire et 0 ne s’affiche meme pas
❖Shadow : We have two types of shadow :

➢ text-shadow
➢ box-shadow
❖ text-shadow :
h1 {
text-shadow: 2px 1px 3px #FF0000;
★ 2px :Horizontal offset
★ 1px :Vertical offset
★ 3px :Blur radius (optional)
★ #FF0000 Color of the blur effect
➕
Now if we one appliquer beaucoup de blur effects mn les 4 cotés fou9 taht right left …. on
utilise juste les , look
h2{
color: coral;
text-shadow: -1px 0 rgb(255, 246, 246), 0 1px rgb(252, 246, 246), 1px 0
rgb(252, 249, 249), 0 -1px rgb(243, 242, 242);
}
7
For this result : Hena dar blur mn les 4 directions Just avec Des ,
,
Waw une information en or : c’est avec le shadow qu’on va créer ce border au tour du
texte sinn avec border il va nous créer un box au tour pas comme ca
❖ box-shadow :
div {
box-shadow: 10px 10px 5px lightblue;
}
★ Same for text-shadow this will give :
The inset parameter changes the shadow from an outer shadow

(outset) to an inner shadow.
div {
box-shadow: 10px 10px 5px lightblue inset;
}
8
Now with multiple shadows for only one card just separated with
comma ,
❖
❖ Transition : We have two types of shadow
.join_button{
background-color: white;
color: rgb(44, 57, 241);
border-color:rgb(44, 57, 241) ;
border-style: solid;
border-width: 1px;
padding: 11px 19px;
cursor: pointer;
margin-right: 10px;
transition: background-color 1s , color 1s;
##### Faut mettre dans l’originale here je l’ai pas écrit dans la partie tae hover
pasq ghir nahi la souris yrouh transition
}
.join_button:hover{
background-color: rgb(44, 57, 241);
color:white;
}
9
ou encore ya :
div {
transition: width 2s linear 1s;
}
pour dire ca ;
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
mais la plus utilisé c’est :
div {
transition: width 2s, height 4s;
}
tu selectionne the property que tu veux appliquer l’effet stansition juste ici ya deux
effect just séparer par comma ,
essaie l’effet :
http://127.0.0.1:5500/index.html
❖ rgba( .. , .. , .. , .. ) : the fourth value is the opacity of the color that’s it
❖ Vertical inline property : The vertical-align property in CSS is used to control the
vertical alignment of inline-level and table-cell elements donc les elements li jayin fi star
wahad n3aytolohom inline element s
➢ Common Values :
❖ baseline: Aligns the baseline of the element with the baseline of its parent (default).
❖ middle: Aligns the middle of the element with the middle of the parent element's line height.
❖ top: Aligns the top of the element with the top of the tallest element on the line.
❖ bottom: Aligns the bottom of the element with the lowest element on the line.
❖ text-top: Aligns the top of the element with the top of the parent element's font.
10
❖ text-bottom: Aligns the bottom of the element with the bottom of the parent element's
font.
❖ sub: Aligns the element as subscript.
❖ super: Aligns the element as superscript.
❖ percentage values (e.g., 50%): Aligns the element relative to its line box based on
❖ the percentage
here what happened is that tweet button bottom ta3ou aligné avec lowest
element in the line
❖ Images style attributes :

❖ 01 :object_fit:
The CSS object-fit property is used to specify how an <img> or <video> should be
resized to fit its container
❖ its values :
➢ fill - This is default. The image is resized to fill the given dimension. If
necessary, the image will be stretched or squished to fit
➢ contain - The image keeps its aspect ratio, but is resized to fit within the
given dimension
11
➢ cover - The image keeps its aspect ratio and fills the given dimension. The
image will be clipped to fit
➢ none - The image is not resized
➢ scale-down - the image is scaled down to the smallest version of none or
contain
➔ what do they mean by the aspect ratio ??? : it means that the images will
maintain their original width-to-height ratio, even when resized. This ensures
that the images won't appear stretched or squished.
Here is an example of a problem and the solution :
the solution :
to use object-fit:cover; so when we resize the browser window, the aspect ratio of the
images is preserved resize the browser the images will not be neither shrinked nor
stretched hadi tsa3d bzzzzf f responsiveness
12
❖ 02 :object_position:
The object-position property in CSS is used to set the position of an image within its
container when the object-fit property is used. It allows you to control which part of
the image is displayed within the container when the image is scaled or cropped
more explanation :
object-fit: cover; makes sure the image covers the entire container while
maintaining its aspect ratio. Some parts of the image might be cropped.
object-position determines which part of the image is displayed when it is being
cropped. For ex{ object-position: top left }; will show the top-left part of the image,
while object-position: center; will center the image within the container.
❖ its values :
➢ Keywords: top, bottom, left, right, center
➢ Percentage values: E.g., 50% 50% (which is the default and centers the
image) par rapport aux coordonnés x/y
➢ Length values: E.g., 10px 20px aussi par rapport au cordonnés x/y
❖ Texts style attributes :

❖ 01 :text decoration :
The text-decoration property is a shorthand property for:
➢ text-decoration-line (required)
➢ text-decoration-color (optional)
➢ text-decoration-style (optional)
➢ text-decoration-thickness (optional)
➔ so here you have the choice to specify more the text decoration(color/line..) or
tderbi klch fi property wahda text-decoration
➔
⚠️⚠️⚠️⚠️⚠️
➔ so important to pay attention that text-decoration-line is important others
color …… are optional
13
or detailed:
❗ pay attention :
➔ if we set text-decoration:red; it’s false because we forgot to set the line we said color
is optional we can add it but line is obligatory
➔ also we can set more than one text-decoration-line ex :
text-decoration: underline overlineline ; bch yji khat mn fou9 w mn

taht
➔ we can add just the color or color and thickness or color and style or all together
their order is nor imoportant…. :
text-decoration: underline overlineline dotted red ; or

text-decoration: underline overline red 5px ; other are optional but
line obligatory
14
➢ 01 :text decoration-line :
➢ 01 :text decoration-style :
❖ 02 :measuring spaces of text :

p{
text-indent: 50px; //indentation
letter-spacing: 2px; // space between letters
line-height: 1.5; // space between lines
word-spacing: 5px; //space between words
white-space: pre-wrap // ne reviens pas a ligne lors des ajustement
;}
15
Astuce pour programmer :

01 : get a border colored around the text :
➔ Use the shadow property from les 4 cotés not the border of the element
➔ transitions tmchi m3a hover en précisant quel propriété ndirlha transition et aussi
faut faire trés attention entre la différence kin nhoto transition f selector original
wela hover ta3ou c’est pas pareil
02 : with text :
➔ P margins : it’s prefarable to set first the margin of all paragraphs to 0 because p by
defaut comes with margins and destroy our page so set them all to 0 than with
classes of your text set the margin that you want
➔ Span: if you wanna decorate just a part of all the text put insed span element and
give it a class name and decorate it as you want
➔ h1 : diri qu’un seul dans tout la page psq hada li y3awn search engine optimisation
(SEO) to found your site
➔ other titles just just with p element than style them
03 : sizes :
➔ instead of setting the height and width use the padding is more professional
04 : importance of the div waaaw :

➔ ….
05 : inspect in the browser :

➔ The chrome i the most preferable to view your code
➔ Element : for html code
➔ Style : for css of the selected element
➔ computed : for box model of selected element
➔ Souces : for the structures of the pages of this web site
➔ console : for java script errors
➔ Network : for apis and endpoint (relation with backend )
➔ security : for cybersecurity
➔ css overview : for seeing all the fonts color and style used in the website …
16
05 : Transition & hover :

transition maybanch effect taeou ghir la can a pseudoclass bch nchoufou wch rah ytbdl
06 : Class or element :
➔ the css of class >>>>>from the element lui meme , meme si sbgti f class w b3da the
same element tae hadik class the changes will be applied from the class not the
element
how selectors work in css and how to place things in any area
we want
Fill it later
17
Css-Grid :
CSS Grid Layout Guide | CSS-Tricks : This website has all what you want in grid it’s
just waaw now i leave some main important things to know about grid
How it works: la première chose que tu dois savoir c’est que y’a des styles css qui
📢:
doivent s’écrire dans le container et ya qui doivent s'écrire dans l’item itself faut pas
confondre
in the link i provided below the page is divided in two column

one for attributes of the container and the other for the item
itself so organized
📢 Main remarks to put attention at :
● Grid items are placed in rows by default and either span the full width of the grid
container or fits only the size of items depends on display grid or inline-grid
● Generally, both align and justify can be used in a grid container and its items,
depending on the keyword that follows them. When used with self, they apply to the
individual grid item (align-self or justify-self). When paired with content or items,
they apply to the entire grid container (align-items, justify-items, align-content, or
justify-content). The key thing to remember is that align is typically used for vertical
alignment, while justify is for horizontal alignment
see the differences between the self and content and items in the link with photos
you will understand
● in order to name of each column and row you do them when you define the rows
number (same for culumns )
like this :
.container {
18
grid-template-columns: [first] 40px [line2] 50px [line3]

auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px
[third-line] auto [last-line];
}
● You have to put attention when we use repeat or space between two words in
same collarde[ ] it’s not the same here i gave you the simplest naming if you want to
see other check out the link i gave you
the result of previeous declaration is this : :
● the question is why we define the name of them : when we span a cellule we can do
it just with names instead of with the numbers you’ll see in span
● Spanning : MODIFY THE SIZING OF JUST ONE ITEM
⚠️
we have three methods to do it from the longuest to the smallest
Items can overlap each other. You can use z-index to control their stacking order.
19
method 01 :
➔ grid-column-start
➔ grid-column-end
➔ grid-row-start
➔ grid-row-end
et henna banet mlih why we name the columns and rows to use the here and there they
are very useful
20
method 02 :
➔ grid-column
➔ grid-row
Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.
Ici ils sont separé par / la premiere for start et la deusieme for the end but if you know the
start but you don’t know the end use the keyword span
method 03 :
➔ grid-area: this property can be used as an even shorter shorthand for

grid-row-start + grid-column-start + grid-row-end + grid-column-end.
21
note : As a way to assign a name to the item we use grid-area as well
here an item from that grid is named header and pay attention we are in item section not
container
if you wanna gain time au lieu d’ecrire dans chaque item the name we can name them all
one time only but in the container section not the item like we did below
● Place self : in this example the first for align-self and second for justify-self (self bcz we
are in the item itself) and align always vertically and justify horrizantally
●
22
● Gap : first we write it in the container sector many ways to do it :

.container {
/* standard */
column-gap: <line-size>;
row-gap: <line-size>;
or for shorter way to do it :

23
gap: <grid-row-gap> <grid-column-gap>;
● 1fr : portion of the remaining space we mean ybda Y9assem grid 9bel b sizing li 3titilou
rem or 25% or px …. and then finally the ramain space li 93ad y9assmou fr
grid-template-columns: 50px 2fr min-content 1fr;

in this case ysba9 fl 50px w min-content … and the remain space ymd ll column 2 double de column
4
● The order : by default all the items of the container have equal order of 0 if you change
the order of one item to >0 then it will be playced at the end so if item has an order > an
ather item ytplaca baedou
● grid-auto-rows :imagine in game chaque fois le joueur gagne ttzad haja ll grid koun
depacer le nombre de rows précisé it will create another row automatically if we want to
style it mm si mazal il n’a pas gagner mais 5ofna au cas ou ndirou : grid-auto-rows:300px;
just example
●
● grid-auto-flow : we know by default if we don’t precise columns items will be playced in
rows if we want that the flow of item in column we put: grid-auto-flow:column
Html :........................................................................................................................................ 1
❖ some html informations..........................................................................................................1
❖ Indentation ...............................................................................................................................3
❖ anchor tag with its attributes ................................................................................................ 3
❖ Placing element all along the pages place footer as example ........................................3
css:.............................................................................................................................................3
❖ cursor :...................................................................................................................................... 3
❖ Pseudo-classes : Hover & activate ........................................................................................ 4
❖ Opacity :....................................................................................................................................4
❖ Shadow : text shadow and box shadow ............................................................................. 5
❖ Transition ............................................................................................................................... 7
❖ rgba( .. , .. , .. , .. ) ...................................................................................................................... 8
24
❖ Vertical inline property ......................................................................................................... 8

Astuce pour programmer :.....................................................................................................9
01 : get a border colored around the text :............................................................................... 9

html_css

Uploaded by

Copyright:

Available Formats

html_css

Uploaded by

Document Information

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

html_css

Uploaded by

Copyright:

Available Formats

Html css tutorial :

➢ Language: 3andou its own code in a standardized format that can be

➢ The <!DOCTYPE> declaration represents the document type, and helps

➢ elements Vs Attributes :element has one or two tags : <p>This is a

<p>This is a <br> paragraph with a line break.</p> also HTML

❖ The latest version of HTML is HTML5. It introduces several new

<audio>: <audio controls><source src="audio.mp3"

Canvas Element: Allows for drawing graphics and animations using

SVG Support: Scalable Vector Graphics can be directly embedded

Geolocation API: Allows web applications to access the user's

Offline Capabilities: Using the Application Cache to allow web

Web Workers: Allows for background scripts to run in parallel with

New JavaScript APIs: Includes APIs for handling drag-and-drop,

so nahi hadi dificulti tae how i place things ex :

A pseudo-class is used to define a special state of an element.

on peut mettre n’importe quelle propriété inside pseudo classes

Entre 0 et 1 : 1 trés claire et 0 ne s’affiche meme pas

❖Shadow : We have two types of shadow :

The inset parameter changes the shadow from an outer shadow

❖ rgba( .. , .. , .. , .. ) : the fourth value is the opacity of the color that’s it

❖ sub: Aligns the element as subscript.

❖ super: Aligns the element as superscript.

❖ Images style attributes :

Here is an example of a problem and the solution :

❖ Texts style attributes :

text-decoration: underline overlineline ; bch yji khat mn fou9 w mn

text-decoration: underline overlineline dotted red ; or

❖ 02 :measuring spaces of text :

Astuce pour programmer :

04 : importance of the div waaaw :

05 : inspect in the browser :

05 : Transition & hover :

in the link i provided below the page is divided in two column

📢 Main remarks to put attention at :

grid-template-columns: [first] 40px [line2] 50px [line3]

the result of previeous declaration is this : :

● Spanning : MODIFY THE SIZING OF JUST ONE ITEM

➔ grid-area: this property can be used as an even shorter shorthand for

note : As a way to assign a name to the item we use grid-area as well

● Gap : first we write it in the container sector many ways to do it :

or for shorter way to do it :

gap: <grid-row-gap> <grid-column-gap>;

grid-template-columns: 50px 2fr min-content 1fr;

❖ Vertical inline property ......................................................................................................... 8

You might also like