Skip to content

exercises6/22/2020 #27

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

Open
lyoumbi wants to merge 12 commits into
base: master
Choose a base branch
from
Open

exercises6/22/2020 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
85c4bc8
First commit
lyoumbi Jun 22, 2020
43682c5
First commit
lyoumbi Jun 22, 2020
eda953f
finished edits on 'syntax_template.html'
lyoumbi Jun 22, 2020
c00c164
finished edits on 'body_template.html'
lyoumbi Jun 22, 2020
5c1c215
finished edits on 'syntax_template.html'
lyoumbi Jun 22, 2020
fbb68c9
finished edits on 'body_template.html'
lyoumbi Jun 22, 2020
6296785
finished edits on 'body_template.html'
lyoumbi Jun 22, 2020
9f5b3b9
finished edits on 'headings_template.html'
lyoumbi Jun 22, 2020
0347f05
Adding slide assigments
lyoumbi Jun 22, 2020
e7cff10
Finish form and caculator file
lyoumbi Jun 22, 2020
05b98a9
Resizing all table cells
lyoumbi Jun 23, 2020
924b5b8
finished registration page
lyoumbi Jun 23, 2020
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
4 changes: 2 additions & 2 deletions templates/body_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>Basic HTML document</title>
</head>
<body>
Page content
The main page content appears inside the body tag. HTML contains several elements that allow you to properly structure and format your content, which we'll cover later.
<h1>Page content</h1>
<p>The main page content appears inside the <b>body</b> tag. HTML contains several elements that allow you to properly structure and format your content, which we'll cover later.</p>
</body>
</html>
44 changes: 28 additions & 16 deletions templates/headings_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,32 @@
<!doctype html>
<html lang="en">
<head>

<head>
<meta charset="utf-8">
<title>Formatting page content</title>
</head>
<body>
HTML Essential Training
Formatting page content
In this series of exercises, we'll explore how to use HTML elements to format basic page content.
Adding headings
Headings help define the structure of the page and control the hierarchy of the content. You can use heading values ranging from a top-level heading of h1 all the way down to an h6. While there are several competing theories on the exact strategy to use when choosing headings, what really matters is that you are using them in an intelligent manner, to accurately reflect the importance of your content. It's also important to be consistent in how you use headings across your site, so deciding on when and how to use headings is an important part of planning your site.
Using paragraphs
The paragraph tag (&lang;p&rang;) is one of the most basic formatting tags, and one that you'll use often. It indicates a paragraph of text, and should be used for each individual paragraph.
Line breaks
Occasionally you'll need to perform a "soft return," that is, create a new line without using a new paragraph. To do that in HTML, you use the line break tag (&lang;br&rang;). Line break tags are inline, meaning you can use them within headers and paragraphs, and don't require a closing tag.
Let's say you were formatting an address, for example. You could use line breaks to make sure each line of the address appeared on a separate line, but still remained within the same paragraph.
lynda.com 6410 Via Real Carpinteria, CA 93103.
</body>
</html>
</head>

<body>
<h1>HTML Essential Training</h1>
<h2>Formatting page content</h2>
<p>In this series of exercises, we'll explore how to use HTML elements to format basic page content.</p>
<h3>Adding headings</h3>
<p>Headings help define the structure of the page and control the hierarchy of the content. You can use heading
values ranging from a top-level heading of h1 all the way down to an h6. While there are several competing
theories on the exact strategy to use when choosing headings, what really matters is that you are using them in
an intelligent manner, to accurately reflect the importance of your content. It's also important to be
consistent in how you use headings across your site, so deciding on when and how to use headings is an important
part of planning your site.</p>
<h3>Using paragraphs</h3>
<p>The paragraph tag (&lang;p&rang;) is one of the most basic formatting tags, and one that you'll use often. It
indicates a paragraph of text, and should be used for each individual paragraph.</p>
<h3>Line breaks</h3>
<p>Occasionally you'll need to perform a "soft return," that is, create a new line without using a new paragraph. To
do that in HTML, you use the line break tag (&lang;br&rang;). Line break tags are inline, meaning you can use
them within headers and paragraphs, and don't require a closing tag.
Let's say you were formatting an address, for example. You could use line breaks to make sure each line of the
address appeared on a separate line, but still remained within the same paragraph.
lynda.com 6410 Via Real Carpinteria, CA 93103.</p>
</body>

</html>
9 changes: 5 additions & 4 deletions templates/models_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@
<title>Content models</title>
</head>
<body>
Content models
In HTML 4 there were only two main content models, block and inline level elements. Block level elements would stack on top of each other in normal document flow while inline level elements typically appear within the flow of text content.
In this example the heading 1 and the paragraphs are block level items, while the bold tags and the link below are examples of inline level elements.
In HTML5 new content models have been created to expand the structure and semantic capabilities of HTML. There are seven main models: Flow, Metadata, Embedded, Interactive, Heading, Phrasing, and Sectioning. To learn more about them, visit the interactive graphic contained in the W3C HTML5 specfication.
<h1>Content models</h1>
<p>In HTML 4 there were only two main content models, block and inline level elements. <b>Block level</b> elements would stack on top of each other in normal document flow while <b>inline level</b> elements typically appear within the flow of text content.</p>
<p>In this example the <b>heading 1</b> and the <b>paragraphs</b> are block level items, while the bold tags and the link below are examples of inline level elements.</p>
<p>In HTML5 new content models have been created to expand the structure and semantic capabilities of HTML. There are seven main models: <b>Flow, Metadata, Embedded, Interactive, Heading, Phrasing, and Sectioning</b>. To learn more about them, visit the <a href="#">interactive graphic</a> contained in the W3C HTML5 specfication.</p>

</body>
</html>

2 changes: 1 addition & 1 deletion templates/syntax_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
HTML uses tags to identify page content. This text, for example, is a paragraph.
<p>HTML uses tags to identify page content. <i>This text, for example, is a <b>paragraph</b></i></p>
69 changes: 69 additions & 0 deletions week1-exercise-from-slide/calculator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table {
margin: auto;
width: 200px;
height: 300px;
text-align: center;
border: 5px solid green;
}

th, td {
border: 1px solid red;
}

td {
width: 24%;
}

th {
text-align: right;
}

th:hover {
background-color: lightcoral;
color: white;
}
</style>
<body>
<table>
<thead>
<th colspan="4">0.00</th>
</thead>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>C</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>/</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>*</td>
</tr>
<tr>
<td>0</td>
<td>00</td>
<td>.</td>
<td>+</td>
</tr>
<tr>
<td colspan="3">=</td>
<td>-</td>
</tr>
</table>
</body>
</html>
27 changes: 27 additions & 0 deletions week1-exercise-from-slide/exercise1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 1</title>
</head>

<body>
<nav>
<a href="#">Logo HERE</a>
<ul>
<li><a href="./exercise2.html">Home</a></li>
<li><a href="#">About</a></li>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Our People</a></li>
</ul>
<li><a href="https://github.com/lyoumbi">Personal Projects</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</body>

</html>
53 changes: 53 additions & 0 deletions week1-exercise-from-slide/exercise2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 2</title>
</head>
<body>
<nav>
<a href="#">Logo HERE</a>
<ul>
<li><a href="./exercise2.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="https://github.com/lyoumbi">Personal Projects</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>

<h1>My Page</h1>
<h2>Yup!!</h2>
<p>
Why end might ask civil again spoil. She dinner she our horses depend.
Remember at children by reserved to vicinity. In affronting unreserved delightful
simplicity ye. Law own advantage furniture continual sweetness bed agreeable perpetual. Oh song well four only head busy it. Afford son she had lively living. Tastes lovers myself too formal season our valley boy. Lived it their their walls might to by young.
</p>
<table style="border:1">
<thead>
<th>Morning</th>
<th>Evinings</th>
<th>Nights</th>
</thead>
<tr>
<td>Wake Up</td>
<td>Wake Up Again</td>
<td>Finally</td>
</tr>
<tr>
<td>Eat, exercises, watch TV at the same time</td>
<td>Still Waking Up</td>
<td>On with my day</td>
</tr>
<tr>
<td>Sleep</td>
<td>Never Mind</td>
<td>Sleep</td>
</tr>
</table>

<img src="https://c4.wallpaperflare.com/wallpaper/438/435/784/deadpool-love-movies-wallpaper-preview.jpg" alt="Green Grass"/>

<footer>No Copy Rights</footer>
</body>
</html>
48 changes: 48 additions & 0 deletions week1-exercise-from-slide/login-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
.container {
top: 0;
bottom: 0;
margin: auto;
width: 20%;
}

div {
width: 95%;
margin: 10px 0 5px 10px;
}

label {
width: 20%;
}


</style>
</head>

<body>
<div class="container">
<h1>Login Form</h1>
<form action="#" method="post">
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
</body>

</html>
51 changes: 51 additions & 0 deletions week1-exercise-from-slide/registration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration page</title>
</head>
<body>
<div class="container">
<h1>Registration Page</h1>
<div>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">
</div>
<div>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div>
<strong>Gender</strong>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
</div>
<div>
<label for="date_of_bird">Date Of Bird</label>
<input type="date" name="date_of_bird" id="date_of_bird">
</div>
<div>
<strong>Habits</strong>
<input type="checkbox" name="habits" id="sports">
<label for="sports">You like sports</label>
<input type="checkbox" name="habits" id="eat">
<label for="eat">You like to eat</label>
<input type="checkbox" name="habits" id="sleep">
<label for="sleep">You like sleep</label>
</div>

<input type="submit" value="Register">
</div>
</body>
</html>