Easy HTML page construction

Post#1 by **nanZor** » 24 Sep 2024, 07:24

Just for fun - all you need is an editor and a browser. This isn't comprehensive, but just enough to see results and have FUN for those who have never done it.

Let's start:
In a terminal, touch a file you want to make and edit. The reason for simply making an empty file with touch is to ensure you save the file with the .html extension.

Code: Select all

touch practice.html

An html document is programmed with "tags". Each tag is a pair, and is indicated with one having a slash / as the end of the pair. The HTML tag lives at the very beginning, and the very ending of the document. Edit practice.html to add these with the editor of your choice. What's really cool is that editors like featherpad take notice, and will highlight these tags.

Code: Select all

<html>
</html>

Let's expand this with the BODY tag. Like the HTML tag, the body tag is also needed. It is nested in between. Inside the body is most of the intelligence and content.

Code: Select all

<html>
<body>
</body>
</html>

Let's actually do something fun. Make a HEADER tag. Kind of like the header of chapters in a book.

Code: Select all

<html>
<body>
<h1> PORTEUS TIPS </h1>
</body>
</html>

Here comes so prose so we want to put it inside a PARAGRAPH tag, shortened to just p. This tag will take any rough-formatted text you write, and nicely format it into, um, a pargraph.

Code: Select all

<html>
<body>
<h1> PORTEUS TIPS </h1>
<p> Welcome to awesome!  This will be so much fun
you may not be able to contain your joy.
Just to see this come up immediately in a big browser like Firefox, Chromium, or even the smaller ones like
Netsurf might make your day.</p>
</body>
</html>

So just fire up a browser, and file-open practice.html. Edit your masterpiece and repeat. DONT FORGET YOUR ending tag-slashes! Common error.

This isn't comprehensive, and there are many tags you can use to format your text, do hyperlinking to other parts of the text, insert photos etc. You get the idea.
The important thing here was to actually DO something without having to read 897 pages of html-for-beginners. Don't think this is only for those who lived in 1995 when 14.4k modems were popular.

Tip: While it is fun to constantly edit with your text and tags and flipping to see it in your browser, it might be easier to keep your concentration by banging out all your text without tags first, and then mark it up with tags later! In more complicated scenarios, it isn't just a document pretty-upper, but an actual logical language of it's own.

Post#2 by **nanZor** » 24 Sep 2024, 09:11

This is so addictive! Instead of that glaring white background, how about an image right within Porteus!

Lets change that first BODY tag to make a background. Change sdb1 to YOUR sdX device! Watch those ticks, parenthesis, quotes, etc. AND, on my image, I put seven BR tags to move the text down a bit:

Code: Select all

<body style="background-image: url('/mnt/sdb1/boot/syslinux/porteus.png')">
<br><br><br><br><br><br><br>

Let's make sure the text is white so it can be read over the dark background image by incorporating a STYLE element within the h1 header start tag)

Code: Select all

<h1 style="color:White;">PORTEUS TIPS</h1>

Let's make sure my paragraph tag prose is readable as well by coloring it within the start of the paragraph tag with a STYLE element:

Code: Select all

<p style="color:White;"> Welcome to awesome!  This will be so much fun
you may not be able to contain your joy.
Just to see this come up immediately in a big browser like Firefox, Chromium, or even the smaller ones like
Netsurf might make your day.</p>

Heh, one doesn't always have to be online to have a load of fun with html.

Post#3 by **Ed_P** » 24 Sep 2024, 16:30

nanZor wrote: ↑
24 Sep 2024, 09:11
Heh, one doesn't always have to be online to have a load of fun with html.