Easy HTML page construction
Posted: 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.
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.
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.
Let's actually do something fun. Make a HEADER tag. Kind of like the header of chapters in a book.
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.
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.
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.htmlCode: Select all
<html>
</html>Code: Select all
<html>
<body>
</body>
</html>Code: Select all
<html>
<body>
<h1> PORTEUS TIPS </h1>
</body>
</html>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>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.
