From 7e74a039122aef922d1619e636de3497ffcf7c60 Mon Sep 17 00:00:00 2001 From: Luke Smith Date: Sat, 25 Jun 2022 10:56:36 -0400 Subject: convert to hugo --- 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: + ++-----------------------------------+-----------------------------------+ +| | ![The webpage as it | +|

My website!

| appears.](pix/nginx-website.png) | +|

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: + ++-----------------------------------+-----------------------------------+ +| | ![On p tags](pix/html-01.png) | +|

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. + ++-----------------------------------+-----------------------------------+ +|

| ![On p and h# | +| This is a top-level heading.

| tags](pix/html-02.png) | +| | | +|

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: + ++-----------------------------------+-----------------------------------+ +| | ![formatted | +|

This is bold text.

| text](pix/html2-01.png) | +| | | +| < | | +| 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