97 lines
3.8 KiB
Markdown
97 lines
3.8 KiB
Markdown
|
---
|
||
|
|
title: The Absolute Basics on Web Development
|
||
|
|
description: A post en which I talk about the basics of web development.
|
||
|
|
date: 2024-11-18
|
||
|
|
tags:
|
||
|
|
- development
|
||
|
|
- html
|
||
|
|
- css
|
||
|
|
- javascript
|
||
|
|
slug: the-basics-of-web-development
|
||
|
|
draft: true
|
||
|
|
---
|
||
|
|
|
||
|
|
## The Server & Client
|
||
|
|
|
||
|
|
At the time of this posting, I have already conducted a workshop at a Hackathon
|
||
|
|
for High School students in my city. My workshop took the kids from nothing to
|
||
|
|
a very basic HTML document published on to the internet. I ended up using
|
||
|
|
Github Codespaces, and Github Pages to get them from 0 to Web Page with the
|
||
|
|
least amount of friction. Those technologies aside, this whole endeaver
|
||
|
|
inspired me to write down what I think are the absolute basics, as I understand
|
||
|
|
them from my own experience as a professional web developer.
|
||
|
|
|
||
|
|
The first thing to truly understand is the relationsihp between a Server and
|
||
|
|
the Client. The Server is a piece of software that reacts to requests from a
|
||
|
|
Client. The Client is you - probably using a web browser like Firefox or
|
||
|
|
Chrome.
|
||
|
|
|
||
|
|
I think its important to talk about TCP/IP, the packet, and the structure of
|
||
|
|
the Request and Response data.
|
||
|
|
|
||
|
|
## The Document
|
||
|
|
|
||
|
|
The best way to conceptualize what a web page is, is to look at what it
|
||
|
|
actually is - a document. The Document is made up of a special Markup language
|
||
|
|
called Hyper Text Markup Language (HTML). This is a form of Hypermedia - a
|
||
|
|
concept we don't have to fully invest in yet.
|
||
|
|
|
||
|
|
HTML describes structure and classification of data. There are three main
|
||
|
|
parts of an HTML document:
|
||
|
|
|
||
|
|
1. The Document Type
|
||
|
|
2. The Header
|
||
|
|
3. The Body
|
||
|
|
|
||
|
|
The Document Type simply states "Hey, this document is of this format." We wont
|
||
|
|
go into the history of the HTML Document Type tag since once HTML was
|
||
|
|
standardized we perfected the notion of how to declare a document type.
|
||
|
|
|
||
|
|
If you're curious about the history of this line and what it used to look like,
|
||
|
|
feel free to look at [the Wikipedia article on the subject](https://en.wikipedia.org/wiki/Document_type_declaration).
|
||
|
|
|
||
|
|
The Header is _meta data about the document_. This is where things like the
|
||
|
|
Title of the document is declared, where character set in the document is
|
||
|
|
defined, and other things like injecting remote files like stylesheets and
|
||
|
|
JavaScript.
|
||
|
|
|
||
|
|
The Body is where the content for the document actually lives. This is where we
|
||
|
|
will write a majority of our HTML and present the information we want to share
|
||
|
|
with the world.
|
||
|
|
|
||
|
|
Let's take a look at the document we are going to craft. By the end of this
|
||
|
|
blog, if you wish to follow along, you will have a very basic understanding of
|
||
|
|
how the web works.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>A simple web page.</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- This is a comment, this is not rendered to the page. -->
|
||
|
|
<h1>Level 1 Header</h1>
|
||
|
|
<p>This is a paragraph that will live on the page.</p>
|
||
|
|
<p>This paragraph has a <a href="https://tildes.net">Link to Tildes</a> on it!</p>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
## The Stylesheet
|
||
|
|
|
||
|
|
Styling HTML is usually done through a language called Cascading Style Sheets.
|
||
|
|
This language allows you to define things like font families, sizes, colours,
|
||
|
|
and even placement on the document itself. CSS has gone through a huge
|
||
|
|
evolution since I first learned it in 2004(ish). While I am no designer (that's
|
||
|
|
my wife), I have learned some really basic skills over the years that allow me
|
||
|
|
to get a basic, legible, site styled. Case and point: this blog.
|
||
|
|
|
||
|
|
## Interactivity
|
||
|
|
|
||
|
|
The only real way to add interactivity to an HTML document these days is to add
|
||
|
|
some JavaScript. JavaScript is a temultuous topic in and of itself but I think
|
||
|
|
understanding the basics, especially within the context of a Web Browser and
|
||
|
|
on an HTML document, can help you appreciate what a little of client-side code
|
||
|
|
can do to improve the experience of reading some documents.
|