Mercurial Hosting > reactionary
changeset 59:91b5033f53b1
learn html
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Mon, 15 Jan 2024 03:42:21 -0700 |
parents | 54933428f388 |
children | a3add4140c3c |
files | src/learn.html.luan |
diffstat | 1 files changed, 34 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/src/learn.html.luan Sun Jan 14 23:38:29 2024 -0700 +++ b/src/learn.html.luan Mon Jan 15 03:42:21 2024 -0700 @@ -167,7 +167,40 @@ title = [[HTML and CSS]] content = function() %> -<p>later</p> +<p>Google Chrome is the standard client-side web development tool. So the first step is to make sure that you have Chrome installed and running.</p> + +<p>Using Chrome, on any page you can right-click in an empty area and from the menu select "View Page Source". This will show you the HTML for the webpage. If you try this on different websites, you will probably notice that my webpages are fairly short and well organized while the webpages of modern scum are unreadable. Another thing to try is to right-click anywhere in a page and select "Inspect". This should open the developer tools with the tab "Elements" selected. In this tab, you get the HTML organized as tree that can be expanded to collapsed. The "Elements" tab of Chrome developer tools will be your core tool when you work with HTML and CSS. You should play with it and do your own research on it to learn how it works.</p> + +<p>The next step is to download this website like this:</p> + +<code block> +~/learn $ wget -r -k http://www.reactionary.software/ +--2024-01-15 01:31:20-- http://www.reactionary.software/ +... +~/learn $ cd www.reactionary.software/ +~/learn/www.reactionary.software $ ls -F +about.html hg_dev.html mercurial.html +bash.html index.html needed.html +books.html java.html nginx.html +discussion.html java_fork.html python.html +existing.html learn.html site.css +external_link.svg learn_bash.html this.html +freedit.html lucene.html wysiwyg.html +</code> + +<p><code>index.html</code> is the home page. Find it in Mac Finder or Windows File Explorer, and then drag-and-drop it into Chrome. You should see this website. You can open the files in a text editor to see the HTML. And you can edit these files to see how the web page changes.</p> + +<p>There is good documentation on HTML and CSS. Start with <a href="https://www.amazon.com/Cascading-Style-Sheets-Designing-Web/dp/0321193121/">Cascading Style Sheets: Designing for the Web</a>. This was written by the people who invented CSS and explains the core idea. Read the whole book. This book covers almost everything in this website. The only missing piece is <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a>. Next get <a href="https://www.amazon.com/CSS-Definitive-Guide-Layout-Presentation/dp/1098117611/">CSS: The Definitive Guide</a>. You should also read this whole book, but you can do it slowly as you work with CSS. You don't need to read this book right now, you can wait until you have finished the next two lessons.</p> + +<p>Just play with HTML and CSS until you get a basic understanding of how they work. You should be able to understand the HTML and CSS of this website.</p> + +<p>I left out resources for HTML itself. You should just look up HTML tags with Google or ChatGPT as you encounter them. That is good enough to learn HTML.</p> + +<p>Ideally one should be able to look at web pages around the internet to learn. But unfortunately they are mostly overcomplicated crap that is very difficult to understand. You can try. My personal websites are like this one - very simple, so they don't look professional to modern scum. I can't link to my best commercial website because that would ruin its reputation (because I am infamous). But I can link to some of my old commercial websites <a href="http://test.tleggings.com/">here</a> and <a href="http://test.super-resume.com/">here</a>. These have reasonable HTML and CSS.</p> + +<p>I have a few general principles for working with HTML and CSS. First, modern scum claim that HTML is for content and CSS is for styling. This is bullshit. Both HTML and CSS are for layout, don't think of them as being conceptually different. Just use both in the simplest possible way to get the results you want. Don't bother with the useless new HTML5 content tags like <code>header</code>. Just use <code>div</code> and <code>span</code> for most things. Also I use HTML attributes as selectors, not HTML classes. This is just simpler. HTML classes are useless, leave them for modern scum.</p> + +<p>You will need HTML, CSS, Javascript, and Luan to make a website. So I suggest that you get a basic understanding of each of these and then go back later to study them in greater depth.</p> <% end }