197 lines
6.2 KiB
HTML
197 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang=en>
|
|
<head>
|
|
<title>Make a Simple Webpage – diyhosting.bhh.sh</title>
|
|
<!--# include file=".nav.html" -->
|
|
</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> is <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 class=cnp>
|
|
<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 class=cnp>
|
|
<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 class=cnp>
|
|
<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 important 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>Text formatting</h2>
|
|
|
|
<p>
|
|
HTML can also be used to do text formatting.
|
|
We can make bold, italic, underlined or struck through text with more HTML tags:
|
|
</p>
|
|
|
|
<table class=cnp>
|
|
<tr>
|
|
<td>
|
|
<pre><code><p>This is <b>bold text</b>.</p>
|
|
|
|
<p>This is <i>italic text</i>.</p>
|
|
|
|
<p>This is <u>underlined</u>.</p>
|
|
|
|
<p>This is <s>struck through</s>.</p></code></pre>
|
|
</td>
|
|
<td>
|
|
<img src="pix/html2-01.png" alt="formatted text">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2>Semantic Tags</h2>
|
|
|
|
<p>
|
|
While <code><b></b></code> and <code><i></i></code>
|
|
do exist, it's actually better <em>not</em> to use them directly in text.
|
|
</p>
|
|
|
|
<p>
|
|
Try using <code><strong></strong></code> instead of <code><b></b></code> and <code><em></em></code> instead of <code><i></i></code>.
|
|
By default, they will look exactly the same.
|
|
You complain that they require more key presses, but it's thought to be a very bad idea to modify lower-level tags with CSS directly.
|
|
</p>
|
|
|
|
<p>
|
|
Note that some bold words on this site have <strong>different color for emphasis</strong>.
|
|
This is a setting set via CSS for all <code><strong></code> tags.
|
|
It would not be a good idea for us to use this for <code><b></code>, since there might be a non-colored situation we want to occasionally use it in.
|
|
</p>
|
|
|
|
<span class=next><a href="html2.html">Next: Images and Links in HTML</a></span>
|
|
|
|
</main>
|
|
<!--# include file=".footer.html" -->
|
|
</body>
|
|
</html>
|