From 516f632b84bc418486538a2183564fe94b89097e Mon Sep 17 00:00:00 2001
From: TheSiahxyz <164138827+TheSiahxyz@users.noreply.github.com>
Date: Tue, 1 Jul 2025 17:01:45 +0900
Subject: init
---
content/html.md | 143 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 143 insertions(+)
create mode 100644 content/html.md
(limited to 'content/html.md')
diff --git a/content/html.md b/content/html.md
new file mode 100644
index 0000000..3da7c53
--- /dev/null
+++ b/content/html.md
@@ -0,0 +1,143 @@
+---
+title: "Make a Simple Webpage"
+draft: true
+---
+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.
+
+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.
+
+## HTML
+
+HTML is the **h**yper**t**ext **m**arkup **l**anguage. It is the
+\"language\" that all webpages are written in so that all browsers can
+read and display them properly.
+
+A markup language is *not* 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.
+
+Let\'s understand what HTML is. In [a previous article](/basic/nginx), we
+put this text in your website\'s `index.html`.
+
+### Paragraphs
+
+Note how this HTML file appears as a webpage:
+
++-----------------------------------+-----------------------------------+
+| |  |
+| This is my web | |
+| site. Thanks for stopping by!
| |
+| | |
+| Now my website is live!
| |
++-----------------------------------+-----------------------------------+
+
+The content between the `` and `
` tag(s) is formatted as
+different paragraphs. If you don\'t use these `` 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:
+
++-----------------------------------+-----------------------------------+
+| |  |
+|
My website!
| |
+| This is my web | |
+| site. Thanks for stopping by!
| |
+| | |
+| Now my website is live!
| |
+| 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! | |
++-----------------------------------+-----------------------------------+
+
+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.
+
+Let\'s learn more about what HTML can do.
+
+### Headings
+
+In addition to paragraphs (``), we can specify headings with inside
+`
` tags. Heading tags are for your page\'s title and section
+headings in the document:
+
+- `` -- Main and largest headings
+- `` -- Subheadings (smaller)
+- `` -- Sub-subheadings (yet smaller)
+- `` -- Etc., etc.
+
++-----------------------------------+-----------------------------------+
+| |  |
+| | |
+| Here is some paragraph text.
| |
+| | |
+| | |
+| And here is some more...
| |
+| | |
+| < | |
+| h2>This is a subheading (h2) | |
+| | |
+| And another paragraph.
| |
+| | |
+| And here is ano | |
+| ther subheading (Also an h2)
| |
+| | |
+| Etc. etc...
| |
++-----------------------------------+-----------------------------------+
+
+#### A preview to CSS
+
+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 ``, for example, to be the size and color
+and alignment we want.
+
+## Text formatting
+
+HTML can also be used to do text formatting. We can make bold, italic,
+underlined or struck through text with more HTML tags:
+
++-----------------------------------+-----------------------------------+
+| |  |
+| | |
+| < | |
+| p>This is italic text. | |
+| | |
+| | |
+| This is underlined.
| |
+| | |
+| T | |
+| his is struck through.
| |
++-----------------------------------+-----------------------------------+
+
+## Semantic Tags
+
+While `` and `` do exist, it\'s actually better *not* to
+use them directly in text.
+
+Try using `` instead of `` and ``
+instead of ``. 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.
+
+Note that some bold words on this site have **different color for
+emphasis**. This is a setting set via CSS for all `` tags. It
+would not be a good idea for us to use this for ``, since there might
+be a non-colored situation we want to occasionally use it in.
--
cgit v1.2.3