-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-demo.html
127 lines (106 loc) · 4.48 KB
/
html-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<title>My test page</title>
<meta charset="utf-8">
<meta name="author" content="George Kontsevich">
<meta name="description" content="This is a dummy description for a test page
that I've made to remind myself of HTML stuff">
<link rel="shortcut icon" href="gk.ico" type="image/x-icon">
<link rel="stylesheet" href="css-demo.css">
</head>
<body>
<h1> This is an h1 (top level) header - usuall one per page </h1>
<p>This is a paragraph</p>
<ul>
<li>unordered</li>
<li>list</li>
<li>of</li>
<li>words</li>
</ul>
<ol>
<li>ordered</li>
<li>list</li>
<li>of</li>
<li>words</li>
<ul>
<li>with</li>
<li>an</li>
<li>unordered</li>
<li>list</li>
<li>of</li>
<li>words</li>
<li>inside</li>
</ul>
</ol>
<p>The following is with emphasis: <em>pandas</em></p>
<p>The following is strong: <strong>more pandas</strong></p>
<p>Similarly bold (which should be used less b/c it has no semantic meaning): <b>all the pandas</b></p>
<p>
Descriptions List:
<dl>
<dt>soliloquy</dt>
<dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
<dt>monologue</dt>
<dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
<dt>aside</dt>
<dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
</dl>
</p>
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<pre><code>var para = document.querySelector('p');
para.onclick = function() {
alert('Owww, stop poking me!');
}</code></pre>
<p>You shouldn't use presentational elements like <code><font></code> and <code><center></code>.</p>
<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
<p>Now we want to create to my github
<a href="https://github.com/geokon-gh/"
title="This is the mouseover text! :)">My Github (with special mouse over text!)</a>
</p>
<h2 id="Mailing_address">Mailing address</h2>
<p>Want to write us a letter? Use our <a href="html-demo.html#Mailing_address">mailing address</a>.</p>
<p>
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="some-silly-default-file-name.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
</p>
<p>
<a href="mailto:[email protected][email protected]&[email protected]&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body
</a>
</p>
<figure>
<img src="gk.ico"
alt="This is text that displays if the image doesn't load"
width="94"
height="112"
title="This is some mouse-over text">
<figcaption>This is the caption below the icon image.</figcaption>
</figure>
<video src="pregnant-shrimp.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="pregnant-shrimp.webm">link to the video</a> instead.</p>
</video>
<p> Below is an iframe 200 pix high </p>
<iframe src="index.html"
width="100%" height="200" frameborder="0"
allowfullscreen sandbox>
<p> <a href="https://geokon-gh.github.io/index.html"
Fallback link for browsers that don't support iframes
</a> </p>
</iframe>
</body>
</html>