Skip to content

Commit a76f8ea

Browse files
author
Paul
committed
Initial upload
1 parent 6e0c1d2 commit a76f8ea

File tree

417 files changed

+15505
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

417 files changed

+15505
-0
lines changed

‎bk01ch01/example01.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Book 1, Chapter 1, Example 1</title>
6+
</head>
7+
<body>
8+
This is a web page with something important to say.
9+
</body>
10+
</html>

‎bk01ch01/example02.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Book 1, Chapter 1, Example 2</title>
6+
</head>
7+
<body>
8+
This is a web page with something <em>important</em> to say.
9+
<hr width="50%">
10+
</body>
11+
</html>

‎bk01ch01/example03.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>My Home Sweet Home Page</title>
6+
</head>
7+
<body>
8+
</body>
9+
</html>

‎bk01ch01/example04.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>My Home Sweet Home Page</title>
6+
</head>
7+
<body>
8+
Hello HTML World!
9+
</body>
10+
</html>

‎bk01ch01/example05.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Plain &lt;h1&gt; Tag</title>
6+
</head>
7+
<body>
8+
<h1>Hello CSS World!</h1>
9+
</body>
10+
</html>

‎bk01ch01/example06.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Styled &lt;h1&gt; Tag</title>
6+
<style>
7+
h1 {
8+
border-width: 1px;
9+
border-style: solid;
10+
border-color: black;
11+
font-size: 72px;
12+
font-family: Verdana;
13+
text-align: center;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>Hello CSS World!</h1>
19+
</body>
20+
</html>

‎bk01ch01/example07.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Inline Styles</title>
6+
</head>
7+
<body>
8+
<h1 style="font-size: 72px">The Big Cheese</h1>
9+
<h1>Just How Big Is This Cheese?</h1>
10+
<h1>And Why Cheese, Of All Things?</h1>
11+
</body>
12+
</html>

‎bk01ch01/example08.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Inline Styles</title>
6+
<style>
7+
body {
8+
width: 600px;
9+
}
10+
h1 {
11+
border-width: 2px;
12+
border-style: solid;
13+
border-color: black;
14+
}
15+
h2 {
16+
border-width: 2px;
17+
border-style: dotted;
18+
border-color: black;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<h1>solid adj. having no break or interruption</h1>
24+
<h2>dotty adj. 1. crazy or eccentric.</h2>
25+
<h2>dotty adj. 2. feeble or unsteady.</h2>
26+
<h2>dotty adj. 3. enthusiastic.</h2>
27+
</body>
28+
</html>

‎bk01ch01/example09.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="styles.css">
5+
<title>Book 1, Chapter 1, Example 0</title>
6+
</head>
7+
<body>
8+
<h1>This Heading Will Appear Blue</h1>
9+
<p>This text will be displayed in a 24-pixel font.</p>
10+
</body>
11+
</html>

‎bk01ch01/example10.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Displaying a Message to the User</title>
6+
<script>
7+
alert("Hello JavaScript World!");
8+
</script>
9+
</head>
10+
<body>
11+
</body>
12+
</html>

‎bk01ch01/example11.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Writing Data to the Page</title>
6+
</head>
7+
<body>
8+
This is a regular line of text.<br>
9+
<script>
10+
document.write("This page was last modified on " + document.lastModified)
11+
</script>
12+
<br>This is another line of regular text.
13+
</body>
14+
</html>

‎bk01ch01/styles.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
h1 {
2+
color: blue;
3+
}
4+
p {
5+
font-size: 24px;
6+
}

‎bk01ch04/example01.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Book 1, Chapter 4, Example 1</title>
6+
</head>
7+
<body>
8+
I hope everything checks out!
9+
</body>
10+
</html>

‎bk01ch04/example02.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
</head>
6+
<body>
7+
I hope everything checks out!
8+
</body>
9+
</html>

‎bk01ch04/example03.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
h1 {
2+
color: blue;
3+
}
4+
p {
5+
font-size: 24px;
6+
}

‎bk01ch04/example04.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
h1 {
2+
color blue;
3+
}
4+
p {
5+
fontsize: 24px;
6+
}

‎bk01ch04/example05.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Displaying a Message to the User</title>
6+
<script>
7+
alert("Hello JavaScript World!);
8+
</script>
9+
</head>
10+
<body>
11+
</body>
12+
</html>

‎bk02ch01/example01.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 1: No Structure</title>
6+
</head>
7+
<body>
8+
Getting to Know HTML’s Basic Structure Tags
9+
One of the most important concepts you need to understand as you get started with HTML is that whatever text you shoehorn between the &lt;body&gt; and &lt;/body&gt; tags has almost no structure. To show you what I mean, I copied the first few headings and paragraphs of this section and pasted them into an HTML file. Figure 1-1 shows what happens when I open the HTML file in a web browser.
10+
As you can see, the resulting web page is anything but pretty and is very hard to read. Why? Because unlike the nicely structured — and therefore eminently readable — text you’re eyeballing right now, all that structure got thrown out the window when I pasted the text into the HTML file. Remember, HTML files are really just plain text files, so all the fancy formatting and styles that were in my original Microsoft Word document were discarded.
11+
Fortunately, this does not mean that you can’t build well-structured web documents. The secret to getting your web pages to look every bit as nice as the page you’re reading is HTML’s powerful collection of structure elements. Using these elements, you can create standard structures such as paragraphs and headings, as well as larger page items such as headers, articles, and footers.
12+
Creating paragraphs
13+
One of the main themes of this chapter is to explore various ways to avoid presenting your web page visitors with a mass of mostly undifferentiated text, like the example shown earlier in Figure 1-1. Why? Because such text is off-putting to look at and difficult to read.
14+
Almost all of HTML has that theme in mind and, in the broadest interpretation, almost every HTML element is designed to structurally differentiate text in some way.
15+
</body>
16+
</html>

‎bk02ch01/example02.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 2: Adding &lt;p&gt; Tags</title>
6+
</head>
7+
<body>
8+
Getting to Know HTML’s Basic Structure Tags
9+
<p>
10+
One of the most important concepts you need to understand as you get started with HTML is that whatever text you shoehorn between the &lt;body&gt; and &lt;/body&gt; tags has almost no structure. To show you what I mean, I copied the first few headings and paragraphs of this section and pasted them into an HTML file. Figure 1-1 shows what happens when I open the HTML file in a web browser.
11+
</p>
12+
<p>
13+
As you can see, the resulting web page is anything but pretty and is very hard to read. Why? Because unlike the nicely structured — and therefore eminently readable — text you’re eyeballing right now, all that structure got thrown out the window when I pasted the text into the HTML file. Remember, HTML files are really just plain text files, so all the fancy formatting and styles that were in my original Microsoft Word document were discarded.
14+
</p>
15+
<p>
16+
Fortunately, this does not mean that you can’t build well-structured web documents. The secret to getting your web pages to look every bit as nice as the page you’re reading is HTML’s powerful collection of structure elements. Using these elements, you can create standard structures such as paragraphs and headings, as well as larger page items such as headers, articles, and footers.
17+
</p>
18+
Creating paragraphs
19+
<p>
20+
One of the main themes of this chapter is to explore various ways to avoid presenting your web page visitors with a mass of mostly undifferentiated text, like the example shown earlier in Figure 1-1. Why? Because such text is off-putting to look at and difficult to read.
21+
</p>
22+
<p>
23+
Almost all of HTML has that theme in mind and, in the broadest interpretation, almost every HTML element is designed to structurally differentiate text in some way.
24+
</body>
25+
</html>

‎bk02ch01/example03.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 3: Headings</title>
6+
</head>
7+
<body>
8+
<h1>This is Heading 1</h1>
9+
<h2>This is Heading 2</h2>
10+
<h3>This is Heading 3</h3>
11+
<h4>This is Heading 4</h4>
12+
<h5>This is Heading 5</h5>
13+
<h6>This is Heading 6</h6>
14+
</body>
15+
</html>

‎bk02ch01/example04.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 2: Adding &lt;p&gt; Tags</title>
6+
</head>
7+
<body>
8+
<h3>Getting to Know HTML’s Basic Structure Tags</h3>
9+
<p>
10+
One of the most important concepts you need to understand as you get started with HTML is that whatever text you shoehorn between the &lt;body&gt; and &lt;/body&gt; tags has almost no structure. To show you what I mean, I copied the first few headings and paragraphs of this section and pasted them into an HTML file. Figure 1-1 shows what happens when I open the HTML file in a web browser.
11+
</p>
12+
<p>
13+
As you can see, the resulting web page is anything but pretty and is very hard to read. Why? Because unlike the nicely structured — and therefore eminently readable — text you’re eyeballing right now, all that structure got thrown out the window when I pasted the text into the HTML file. Remember, HTML files are really just plain text files, so all the fancy formatting and styles that were in my original Microsoft Word document were discarded.
14+
</p>
15+
<p>
16+
Fortunately, this does not mean that you can’t build well-structured web documents. The secret to getting your web pages to look every bit as nice as the page you’re reading is HTML’s powerful collection of structure elements. Using these elements, you can create standard structures such as paragraphs and headings, as well as larger page items such as headers, articles, and footers.
17+
</p>
18+
<h4>Creating paragraphs</h4>
19+
<p>
20+
One of the main themes of this chapter is to explore various ways to avoid presenting your web page visitors with a mass of mostly undifferentiated text, like the example shown earlier in Figure 1-1. Why? Because such text is off-putting to look at and difficult to read.
21+
</p>
22+
<p>
23+
Almost all of HTML has that theme in mind and, in the broadest interpretation, almost every HTML element is designed to structurally differentiate text in some way.
24+
</body>
25+
</html>

‎bk02ch01/example05.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 5: Limerick with Paragraphs</title>
6+
</head>
7+
<body>
8+
<p>There once was woman named Elle,
9+
<p>Who learned tons of HTML.
10+
<p>Then she came to an ode
11+
<p>That she just couldn’t code,
12+
<p>Now she lives in a white padded cell.
13+
</body>
14+
</html>

‎bk02ch01/example06.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 6: Limerick with Line Breaks</title>
6+
</head>
7+
<body>
8+
<p>
9+
There once was woman named Elle,<br>
10+
Who learned tons of HTML.<br>
11+
Then she came to an ode<br>
12+
That she just couldn’t code,<br>
13+
Now she lives in a white padded cell.
14+
</body>
15+
</html>

‎bk02ch01/example07.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 7: The &lt;hr&gt; Tag</title>
6+
</head>
7+
<body>
8+
<p>
9+
For these kinds of <i>thematic breaks</i>, HTML offers the <code>hr</code> element. The name is short for <i>horizontal rule</i> and the element does just what it says: it draws a horizontal rule (that’s a line to the likes of you and me) clear across the page. The result? A nice, clean visual indication that the next paragraph is in some way a break from the previous one. Figure 1-7 offers an example where I’ve placed an <code>&lt;hr&gt;</code> tag between this paragraph and the next one.
10+
</p>
11+
<hr>
12+
<p>
13+
Now it’s time to take these page-structure ramblings to the next level with an in-depth look at HTML’s so-called <i>semantic</i> page elements. Once you’ve mastered the tags I cover in the next section, you’ll know everything you need to know to build pages with good digital bones.
14+
</p>
15+
</body>
16+
</html>

‎bk02ch01/example08.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 8: The &lt;header&gt; Tag</title>
6+
</head>
7+
<body>
8+
<header>
9+
<img src="/images/iis-logo.png" alt="Isn't it Semantic? company logo">
10+
<h1>Welcome to “Isn’t it Semantic?”</h1>
11+
<hr>
12+
</header>
13+
</body>
14+
</html>

‎bk02ch01/example09.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 9: The &lt;nav&gt; Tag</title>
6+
</head>
7+
<body>
8+
<header>
9+
<img src="iis-logo.png" alt="Isn't it Semantic? company logo">
10+
<h1>Welcome to “Isn’t it Semantic?”</h1>
11+
<hr>
12+
</header>
13+
<nav>
14+
<a href="/">Home</a>
15+
<a href="semantics.html">Semantics</a>
16+
<a href="contact.html">Contact</a>
17+
<a href="about.html">About</a>
18+
</nav>
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)