Skip to content
27 changes: 26 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,29 @@

* The edits should render a webpage which resembles the image below

<img src ="./instruction-images/headings-template.png">
<img src ="./instruction-images/headings-template.png">




<head>
<title>Calculator</title>
<style>
table{
width: 200px;
height: 300px;
text-align: center;
border: 5px solid cornflowerblue;
}
th, td{
border: 1px solid palevioletred;
}
th{
text-align: right;
}
td:hover{
background-color: papayawhip;
color: peachpuff;
}
</style>
</head>
57 changes: 57 additions & 0 deletions Star.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<Star html>
<Hello lang="en">

<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<h1> <Learn All About Star> </h1>
<p> She <b> loves </b> to write poems, play video games and she <em> loves to eat </em>.</p>
<p> <b>What are her dislikes?</b></p>
<p> Well that's a <em> excellent </em> question in Leon's vioce </p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤣

<p> Well she <b> hates </b> her food cold </p>

<link href="./css/style.css" rel="stylesheet">
<script type="text/javascript" src="./js/header-functions.js"></script>

</head> <!-- header ends here -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->












<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<body> <!-- Hello -->


Star also <b> loves </b> photography, particulrly <em> nature.</em>




<!-- ====================================================== -->
<!-- ====================================================== -->
<footer>
<!-- footer of page begins here -->
<script type="text/javascript" src="./js/footer-functions.js"></script>
</footer> <!-- footer of page ends here -->
<!-- ====================================================== -->
<!-- ====================================================== -->

</body>
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->

</html>
28 changes: 28 additions & 0 deletions body template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<body_template class="html"></body_template>

<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<body> <!-- Hello -->


Star also <b> loves </b> photography, particulrly <em> nature.</em>




<!-- ====================================================== -->
<!-- ====================================================== -->
<footer>
<!-- footer of page begins here -->
<script type="text/javascript" src="./js/footer-functions.js"></script>
</footer> <!-- footer of page ends here -->
<!-- ====================================================== -->
<!-- ====================================================== -->

</body>
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------- -->

</html>
21 changes: 21 additions & 0 deletions calculator.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<head>
<title>Calculator</title>
<style>
table{
width: 200px;
height: 300px;
text-align: center;
border: 5px solid red;
}
th, td{
border: 1px solid blue;
}
th{
text-align: right;
}
td:hover{
background-color: papayawhip;
color: peachpuff;
}
</style>
</head>
26 changes: 26 additions & 0 deletions headings_template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Formatting page content</title>
</head>
<body>
<b><h1>HTML Essential Training</h1></b>
<br>
<b><h2>Formatting page content</h2></b>
<br>
In this series of exercises, we'll explore how to use HTML elements to format basic page content.
<br>
<b>Adding headings</b>
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.
<br>
<b>Using paragraphs</b>
<br>
<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>
<b>Line breaks</b>
<br>
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>
6 changes: 3 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<Star html>
<html lang="en">

<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<!-- ----------------------------------------------------------------- -->
<head> <!-- header begins here -->
<meta charset="utf-8">
<h1> <Learn All About Star> </h1>
<p> She <b> loves </b> to write poems, play video games and she <em> loves to eat </em>.</p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
Expand Down
1 change: 1 addition & 0 deletions lecturedemos
Submodule lecturedemos added at 20fb77
11 changes: 11 additions & 0 deletions loginpw.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<form>

<br /><label for="FullName">Full FullName</label>
<input id="FullName" type="text" name="name" required />
<br /><label for="email">email</label>
<input id="email" type="email" name="email" />
<br /><label for="pass">Password</label>
<input id="pass" type="password" name="p" disabled />
<br /><label for="qant">Quantity</label>

</form>
11 changes: 11 additions & 0 deletions model demo.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<models_template.html>


<head>
<nav>
<Excellent>
<ul> <li>Hello World <li> Goodbye World
<h1> funny looking cat </h1>
<li><img src= 'https://images.app.goo.gl/KrFBRRYMa1fku6w96' />
</nav>
<head>
13 changes: 13 additions & 0 deletions models_template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="A page for exploring HTML content models">
<title>Content models</title>
</head>
<body>
<b><h1>Content models</h1></b>
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.
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.
In HTML5 new content models have been created to expand the structure and semantic capabilities of HTML. There are seven main models: <b>Flow</b> <b>Metadata,</b> <b> Embedded,</b> <b>Interactive,</b> <b>Heading,</b> <b>Phrasing,</b> and <b>Sectioning.</b> To learn more about them, visit the interactive graphic contained in the W3C HTML5 specfication.
</body>
Empty file added reg.html
Empty file.
8 changes: 4 additions & 4 deletions templates/models_template.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
<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.
<b><h1>Content models</h1></b>
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.
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.
In HTML5 new content models have been created to expand the structure and semantic capabilities of HTML. There are seven main models: <b>Flow</b> <b>Metadata,</b> <b> Embedded,</b> <b>Interactive,</b> <b>Heading,</b> <b>Phrasing,</b> and <b>Sectioning.</b> To learn more about them, visit the interactive graphic contained in the W3C HTML5 specfication.
</body>
</html>