Parsing and HTML
If you have ever used a word processor (Microsoft word, Google Docs, etc) then congratulations! - You are one step closer to understanding HTML, kinda?
Just like there are certain “rules” set for when we write things - Capitalize the first letter of a new sentence, break and indent a new paragraph… There are certain “rules” computers abide by to create content for the web. I wont get too deep in history here (maybe another post?) - Just know that a long time ago a very smart guy named Tim Berners-Lee came up with HTML (Hypertext Markup Language) to act as the “rules” for when we use computers to write things for the web.
I promise this was put more eloquently when I learned it but I’m gonna try and break it down for you.
Just like we read - computers can read except, their reading is more like eating? Like it or not, computers are not that smart…yet. They just consume everything available until they find something understandable (pre-made sets of “rules”).
When you create something in HTML (a pre-made set of “rules”) and show it it the computer its like a game of Pacman. In this case your computer is Pacman and your content are all the little dots and the HTML elements are the fruits. As computer Pacman goes along its path it will eat these HTML elements - they look like this : <h1>content goes here</h1> - finding opening (<h1>) and closing (</h1>) tags along the way. As the computer consumes the opening it gets the set of instructions that are attributed to it → “Okay I just entered a h1, lemme collect and add h1 instructions to all the content until I find a valid closing h1 tag”.
After consuming the opening and closing h1 tags the computer now has its beginning and end between which all the content should be larger and bolded. Kinda like how there are “rules” to capitalize the beginning of a sentence and have a period at the end.
This my friend, is called parsing.
We parse data - computers parse data - we are computers? Computers are alive? AGI is now?!
DFTW so far
Trading in IDEs
So far I have been using JetBrains WebStorm IDE, which to me is has been nice because it does a lot of the “boring” stuff - with one click you have a HTML project set up for you, 2 you got a whole Vite-React project. This sounds like a dream come true but, I realize now I never really had to understand the HTML structure because I was letting the IDE just handle it for me (I know, I know!). So I think WebStorm is great, just maybe not great right now while I’m trying to really learn this stuff.
Now I am using Sublime Text, another great option but just one I never got around to trying out. And lemme tell you - its great being so minimal. I did change some settings such as limiting autocomplete and making the font size a little bigger. Overall it is a very nice IDE - light, simple and gets the job done.
Sometimes, less is more right?
CSS!
After getting Sublime set up and building some bare-bones HTML sites - I got to work on making them somewhat presentable. I started out small - just adding some inline styles here and there, to where I am now - utilizing the <style> tag within the HTML head. I’m definitely just dipping my toes into CSS and I look forward for whats to come!
If you’re really wondering what CSS is - just think of it as another set of instructions for the computer meant for interacting and styling the HTML page (colors, fonts, spacing, etc.) In otherwords - its what makes websites pretty!
FTP!
This stands for File Transfer Protocol - something I had to memorize for a test I took many moons ago (how many tests have I taken, how many moons ago was it and how many times am I going to bring them up?!) Basically this is just a way to take those cool files from your computer and put them up on a network connected to the internet!
I chose to use Transmit 5 for my File transferring because pretty much every tutorial I’ve encountered that has mentioned FTP used Transmit and I also liked their 3d truck.
Show don’t tell?
Everything I have done so far can be found here at my neat-o project portal!
My favorite one I’ve built so far was this “choose your own adventure” style project made with only HTML and some CSS. The main goal of that project was to make sure I really understood my file pathing and what-nots.
Progress I’ve made:
Explored Affinity Designer 2
Made some gradients - see first image of this post!
Discovered The Open Graph Protocol and meta tags!
This helps make some of my projects look nice when shared
Made 5 HTML projects
Sprinkled in some CSS later
Set up Sublime Text
Didn’t accidentally nuke anyone else’s files from the FTP server
Actually wrote out the HTML needed to structure a page (didn’t just type HTML and hit enter lol)
Used (but mostly struggled with) Apples built in VoiceOver program to get a look at how screen readers crawl pages for people who use them - Accesibility!
Music!
Catch you later - Ernie