Mercurial Hosting > reactionary

comparison src/learn.html.luan @ 59:91b5033f53b1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
learn html
author Franklin Schmidt <fschmidt@gmail.com>
date Mon, 15 Jan 2024 03:42:21 -0700
parents 54933428f388
children a3add4140c3c
comparison
equal deleted inserted replaced
58:54933428f388 59:91b5033f53b1
165 } 165 }
166 html = { 166 html = {
167 title = [[HTML and CSS]] 167 title = [[HTML and CSS]]
168 content = function() 168 content = function()
169 %> 169 %>
170 <p>later</p> 170 <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>
171
172 <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>
173
174 <p>The next step is to download this website like this:</p>
175
176 <code block>
177 ~/learn $ wget -r -k http://www.reactionary.software/
178 --2024-01-15 01:31:20-- http://www.reactionary.software/
179 ...
180 ~/learn $ cd www.reactionary.software/
181 ~/learn/www.reactionary.software $ ls -F
182 about.html hg_dev.html mercurial.html
183 bash.html index.html needed.html
184 books.html java.html nginx.html
185 discussion.html java_fork.html python.html
186 existing.html learn.html site.css
187 external_link.svg learn_bash.html this.html
188 freedit.html lucene.html wysiwyg.html
189 </code>
190
191 <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>
192
193 <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>
194
195 <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>
196
197 <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>
198
199 <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>
200
201 <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>
202
203 <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>
171 <% 204 <%
172 end 205 end
173 } 206 }
174 js = { 207 js = {
175 title = [[JavaScript]] 208 title = [[JavaScript]]