Skip to content

New HTML_Tag Page added that explain how the h1 Tag is used / Adding … #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Bravo6nteringtheroom wants to merge 1 commit into from
Closed

New HTML_Tag Page added that explain how the h1 Tag is used / Adding … #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions HTML_Tags/h1 Tag/action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
let h1_tag = document.getElementById("Syntax_tag")

h1_tag.textContent = "<h1>Hello World</h1>"
28 changes: 28 additions & 0 deletions HTML_Tags/h1 Tag/h1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="h1_Style.css">
</head>
<body>
<h1>h1 Tag</h1>
<p>The h1 Tag allows you to create a Text like a Title with a specifc side</p>
<p>It starts from h1 to h6</p>

<div id="h_Tag">
<h1>h1 Tag</h1>
<h2>h2 Tag</h2>
<h3>h3 Tag</h3>
<h4>h4 Tag</h4>
<h5>h5 Tag</h5>
<h6>h6 Tag</h6>
</div>

<p>Syntax:</p>
<p id="Syntax_tag"></p>

<script src="action.js"></script>
</body>
</html>
19 changes: 19 additions & 0 deletions HTML_Tags/h1 Tag/h1_Style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
body{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-color: antiquewhite;
}

#h_Tag{
border: 7px solid;
padding: 5px;
border-radius: 5px;
}

#Syntax_tag{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: wheat;
border: 5px solid rgb(73, 65, 65);
background-color: rgb(0, 0, 0);
border-radius: 7px;
padding: 10px;
}
11 changes: 11 additions & 0 deletions Home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: wheat;
}
#Prev_next{
display: flex;
flex-direction: row;
justify-content: space-between;
border: 0px solid;
padding: 10px;
}
10 changes: 10 additions & 0 deletions Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
Prev_btn = document.getElementById("Previous")
Next_btn = document.getElementById("Next")

Prev_btn.addEventListener('click' , () => {
window.location.href = './index.html'
})

Next_btn.addEventListener('click' , () => {
window.location.href = './HTML_Tags/h1 Tag/h1.html'
})
25 changes: 25 additions & 0 deletions HomePage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Home.css">
</head>
<body>
<style>
body{
text-align: center;
}
</style>
<h2>Welcome to The beginner-html-site</h2>
<p>In this Project you will start learning the html Tags</p>
<div id="Prev_next">
<p id="Previous"><u>previous</u></p>
<p id="Next"><u>next</u></p>
</div>

<script src="Home.js">
</script>
</body>
</html>
23 changes: 23 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: wheat;
}

#Logo_Title{
display: flex;
flex-direction: column;
justify-content: center;
}

#HomePage_Tag{
border: 1px solid #ccc;
padding: 5px;
border-radius: 4px;
background-color: #ccc;
box-shadow: 3px 10px 70px black ;
}
24 changes: 19 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,13 @@
<meta charset="utf-8">
<title>My test page</title>
</head>
<link rel="stylesheet" href="index.css">
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">

<div id="Logo_Title">
<h1><u>Mozilla is cool</u> </h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth." id="FireFox" width="300px">
</div>

<p>At Mozilla, we’re a global community of</p>

Expand All @@ -16,10 +20,20 @@ <h1>Mozilla is cool</h1>
<li>builders</li>
</ul>

<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web.
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web.
We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>

<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>

<p style="color: blue;" id="HomePage_Tag">HomePage</p>

<script>
let HomePage_Tag = document.getElementById("HomePage_Tag")

HomePage_Tag.addEventListener('click' , () => {
window.location.href = './HomePage.html'
})
</script>
</body>
</html>