Skip to content

Commit b3b750a

Browse files
SOULEYSANOGOSOULEYSANOGO
SOULEYSANOGO
authored and
SOULEYSANOGO
committed
Update
1 parent cde2cb9 commit b3b750a

12 files changed

+188
-0
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,11 @@ This is the source code of the Udemy course:
1313
<p style="font-size: 1.1rem; line-height: 1.5; margin-bottom: 20px;">If you have any questions, please feel free to contact me through my Twitter: <a href="https://twitter.com/codewithsahand" style="color: #1a73e8; text-decoration: none; font-weight: bold;" target="_blank">@codewithsahanda>.p>
1414
<a href="https://sahandghavidel.com" style="background-color: #1a73e8; color: white; font-weight: bold; padding: 10px 20px; border-radius: 5px; text-decoration: none;">Visit my websitea>
1515
div>
16+
17+
18+
## TOP Apps
19+
20+
- NavBar
21+
- Photo Gallery
22+
- Note App
23+
- Clock

‎projects/templatenavbody/La structure d'une page HTML5.pdf

290 KB
Binary file not shown.

‎projects/templatenavbody/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
2+
# Introduction
3+
Le HTML, ou « HyperText Markup Language », est un langage permettant de réaliser des pages web. Tout les sites internet ont besoin du HTML pour s’afficher dans le navigateur.
4+
5+
Définition : HyperText Markup Language (HTML) est un langage de “mark up (balisage)” qui définit la structure logique d’un document HTML diffusé sur le Web.
6+
7+
## Structure de base HTML
8+
Le document HTML commence toujours par ce que nous appelons la structure de base. Cette structure est obligatoire et constant.
9+
10+
Il est possible de comprendre le document HTML de manière très simple, grâce à une division des blocs, selon la structure suivante:
11+
12+
(!DOCTYPE)
13+
Le Doctype s’insère en tout début de page. Il sert à définir le type du document afin qu’il soit correctement interprété par le navigateur. Le Doctype doit toujours se situer avant la balise HTML.
14+
15+
ATTENTION Le doctype est OBLIGATOIRE et doit toujours être la PREMIERE LIGNE de votre document.
16+
17+
META
18+
Les balises Meta sont des informations incluses à l'intérieur des pages web sous forme de balises. Ces informations sont placées dans l'en-tête d'une page web à l'intérieur de la balise HEAD. Les balises meta sont relative à la page et donnent des informations plus généralement aux aux moteurs de recherche (bien que d'autres applications sont possible).
19+
20+
HEAD
21+
La balise HEAD contient l'en-tête du document html, c'est à dire toutes les informations non visibles par l'internaute. C'est une balise qu'il ne faut pas oublier. Elle fait partie des 4 balises Html qui doivent être présentes dans tous les documents HTML (HTML, HEAD, TITLE, BODY)
22+
23+
BODY
24+
La balise BODY contient le corps du document html, c'est à dire toutes les informations visibles par l'internaute.
25+
26+
## Template
27+
28+
- La balise HEADER, est l’en-tête de la page. Permet de contenir un logo, barre de navigation , titre etc...
29+
30+
- La balise NAV,représente diffèrent liens vers d'autres pages ou des article de cette page. Autrement dit, c'est une section destinée à la navigation dans un document.
31+
32+
- La balise SECTION, celle la permet de regrouper des contenus de même thème.
33+
34+
- La balise ARTICLE, elle regroupe des éléments indépendant. Exemple pour des articles de journaux.
35+
36+
- La balise ASIDE, sert a mettre des informations complémentaires, il se situe souvent à droite de la page.
37+
38+
- La balise FOOTER, est le pied de page, on y trouve souvent les liens contact, nom, mentions légales.
39+
40+
## HTML5 NEW TAGS
41+
- https://www.scaler.com/topics/html5-new-tags/

‎projects/templatenavbody/balise_structurante.png

37.7 KB
Loading

‎projects/templatenavbody/fullsemantichtml5.png

6.1 KB
Loading

‎projects/templatenavbody/index.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
>
2+
<html>
3+
<head>
4+
<title>Template fulltitle>
5+
6+
<meta charset="UTF-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="viewport" content=
9+
"width=device-width, initial-scale=1.0">
10+
head>
11+
<body>
12+
<style>
13+
footer, header {
14+
text-align: center;
15+
color: red;
16+
background-color: #D3CEDF;
17+
font-weight: bold;
18+
padding: 8px
19+
}
20+
21+
main {
22+
text-align: center;
23+
background-color: #F7ECDE;
24+
}
25+
article {
26+
background-color:#F6C6EA;
27+
}
28+
aside {
29+
float: left;
30+
width: 20%;
31+
background-color: white;
32+
}
33+
style>
34+
35+
<header>HEADER SECTIONheader>
36+
<main>
37+
<h3>MAIN SECTIONh3>
38+
<article>
39+
Article Section.
40+
<details>
41+
<summary>Detailssummary>
42+
<p>Details and summary tags are examples of HTML5 Structural or Semantic Tag.p>
43+
details>
44+
article>
45+
<aside>
46+
ASIDE SECTION floats Left.
47+
<svg id = "svgelem" height = "110" xmlns = "">
48+
<circle id = "square" cx = "50" cy = "50" r = "50" fill = "pink" />
49+
svg>
50+
aside>
51+
<embed src="https://www.youtube.com/embed/XKU8MlOXnXs">
52+
53+
54+
main>
55+
<footer>FOOTER SECTIONfooter>
56+
body>
57+
html>

‎projects/templatenavbody/mytemplate.png

7.09 KB
Loading

‎projects/templatenavbody/sample1.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content=
8+
"width=device-width, initial-scale=1.0">
9+
10+
<style>
11+
header {
12+
background-color: aquamarine;
13+
}
14+
15+
footer {
16+
color: white;
17+
background-color: black;
18+
padding: 10px;
19+
position: fixed;
20+
bottom: 0;
21+
width: 100%;
22+
left: 0;
23+
}
24+
style>
25+
head>
26+
27+
<body>
28+
<header>
29+
<h1>Headingh1>
30+
<a href="#">article1a>
31+
<a href="#">article2a>
32+
<a href="#">article3a>
33+
<a href="#">article4a>
34+
35+
36+
<p>
37+
This paragraph give more info
38+
about the web content. So it
39+
is placed inside the header tag.
40+
p>
41+
42+
header>
43+
44+
<main>
45+
<header>
46+
<h2>Header for sub headingh2>
47+
header>
48+
49+
50+
<p>
51+
This is our original content, which
52+
is introduced in both the header of
53+
this web page. but the header in main
54+
tag is specifically for the content
55+
itself rather than web page as whole.
56+
p>
57+
58+
59+
<article>
60+
<header>
61+
<h3>Article headingh3>
62+
header>
63+
64+
65+
<p>
66+
This shows that header tag can
67+
also be found inside the article
68+
tag to show the article title/
69+
heading. So header tag is also
70+
used for that purpose also.
71+
p>
72+
73+
article>
74+
main>
75+
76+
<footer>
77+
The footer usually have copyright
78+
info and address.
79+
footer>
80+
body>
81+
82+
html>

‎projects/templatenavbody/semantichtml.png

240 KB
Loading

‎projects/templatenavbody/squelette.jfif

38.9 KB
Binary file not shown.

‎projects/templatenavbody/templatetags.png

353 KB
Loading

‎projects/templatenavbody/zoning-exo.jpg

97 KB
Loading

0 commit comments

Comments
 (0)