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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
<!DOCTYPE html>
<html lang=en>
<head>
<title>Make a Simple Webpage – LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Make a Simple Webpage</h1></header>
<nav></nav>
<main>
<p>
We now have a webpage that's actually on the real-live internet!
You've already made it!
Now the only issue is putting what you want on your website.
</p>
<p>
In this little series, we'll overview the basics of HTML and CSS,
the two important languages that will allow you to make a stylish multi-page website.
We will start with HTML.
</p>
<h2>HTML</h2>
<p>
HTML is the <strong>h</strong>yper<strong>t</strong>ext <strong>m</strong>arkup <strong>l</strong>anguage.
It is the "language" that all webpages are written in so that all browsers can read and display them properly.
</p>
<p>
A <dfn>markup language</dfn> <em>not</em> the same as a programming language:
Programming languages specify orders for a computer, while markup languages are ways of specifying the styling of text.
Markup languages are necessary because computers run on mere text, not colors, sizes, headers and other styling things.
</p>
<p>
Let's understand what HTML is.
In <a href="nginx.html">a previous article</a>, we put this text in your website's <code>index.html</code>.
</p>
<h3>Paragraphs</h3>
<p>
Note how this HTML file appears as a webpage:
</p>
<table>
<tr>
<td>
<pre><code><!DOCTYPE html>
<h1>My website!</h1>
<p>This is my website. Thanks for stopping by!</p>
<p>Now my website is live!</p></code></pre>
</td>
<td>
<img src=pix/nginx-website.png alt="The webpage as it appears.">
</td>
</tr>
</table>
<p>
The content between the <code><p></code> and <code></p></code> tag(s) is formatted as different paragraphs.
If you don't use these <code><p></code> tags, the text will not be formatted as separate paragraphs even if you write it as
multiple lines.
Observe if we add lines to the end of this file:
</p>
<table>
<tr>
<td>
<pre><code><!DOCTYPE html>
<h1>My website!</h1>
<p>This is my website. Thanks for stopping by!</p>
<p>Now my website is live!</p>
Here is some more text.
There are no paragraph tags on this stuff.
So it will all appear as one paragraph.
Despite being on multiple lines.
Even this!</code></pre>
</td>
<td>
<img src=pix/html-01.png alt="On p tags">
</td>
</tr>
</table>
<p>
This will seem strange at first, but this is the use of HTML as a markup
language: it allows you to style your document with tags and write it in whatever way is convenient.
</p>
<p>
Let's learn more about what HTML can do.
</p>
<h3>Headings</h3>
<p>
In addition to paragraphs (<code><p></code>), we can specify headings with inside <code><h1></h1></code> tags.
Heading tags are for your page's title and section headings in the document:
</p>
<ul>
<li><code><h<strong>1</strong>></h<strong>1</strong>></code> – Main and largest headings</li>
<li><code><h<strong>2</strong>></h<strong>2</strong>></code> – Subheadings (smaller)</li>
<li><code><h<strong>3</strong>></h<strong>3</strong>></code> – Sub-subheadings (yet smaller)</li>
<li><code><h<strong>4</strong>></h<strong>4</strong>></code> – Etc., etc.</li>
</ul>
<table>
<tr>
<td>
<pre><code><h1>This is a top-level heading.</h1>
<p>Here is some paragraph text.</p>
<p>And here is some more...</p>
<h2>This is a subheading (h2)</h2>
<p>And another paragraph.</p>
<h2>And here is another subheading (Also an h2)</h2>
<p>Etc. etc...</p></code></pre>
</td>
<td>
<img src=pix/html-02.png alt="On p and h# tags">
</td>
</tr>
</table>
<h4>A preview to CSS</h4>
<p>
It is very imporant to use headings like this for your pages.
Notice that on this website, headings come in different colors, text-alignment and sizes for emphasis.
If we use these heading tags, when we clear CSS, we can easily style all <code><h2></code>, for example,
to be the size and color and alignment we want.
</p>
<<++>>
<<++>>
<<++>>
<h2>A look at a decent template</h2>
<p>
It's a good habit to include the same core things in every HTML page.
I have a template file that I use for this website that includes all the basics.
When I make a new page, I just copy the template and add the content.
Here is what the template looks like:
</p>
<code><pre><!DOCTYPE html>
<html lang=en>
<head>
<title><strong>Your page title</strong></title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='<strong>Site Title</strong> RSS' href='/rss.xml'>
</head>
<body>
<header><h1><strong>Your page title</strong></h1></header>
<nav></nav>
<main>
<strong>Put all your page content here in the <main> tag.</strong>
</main>
<footer></footer>
</body>
</html></code></pre>
<h3>The
</h3>
<h3>HTML can be broken...</h3>
<p>
HTML is interpreted by browsers very liberally.
If you make mistakes in HTML, browsers will do their best to be forgiving and try to figure out what you meant.
</p>
<p>
For example, paragraphs are formatted by the <code><p></code> tag and when the paragraph ends,
<code></p></code> should be included.
However, if you forget or neglect to include a <code></p></code> to close the tag, this isn't a big deal, as if your browser sees another <code><p></code> to start a new paragraph, it will consider the previous paragraphy closed and both paragraphs will be formatted correctly.
In fact, there are some people nowadays that only ever use the opening tag and never close them!
</p>
<h3>...but not always.</h3>
<p>
That works fine with <code><p></code>, but for other tags like <code><b></code>, it won't work.
Your browser can't guess where you want the bolding to end, so if you fail to close a <code><b></code> with <code></b></code>,
the whole rest of your document will show up bold!
</p>
<span class=next><a href="html2.html">Next: Text formatting in HTML</a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>
|
