← Back home

Learning HTML from scratch

Okay so before starting I had absolutely no idea about HTML. I'd only used it to change the font color in Obsidian using <font color="red">.

I was inspired to learn by some awesome Neocities websites.

I decided to grab a book from my local library called Curso de Desarrollo Web: HTML, CSS y JavaScript. Edición 2021. and get on with it. As I read along, I try out the tags the book explains and also recreate the examples.

Index

Here are my notes from each chapter of the book. They're not meant as a summary. I only take note of the stuff that is most interesting or surprising to me.

1. Basic concepts
2. Introduction to HTML
3. Structure and main components of an HTML document
   • Example page
4. Creating content
5. Interactive web
   • Example form
6. HTML5
7. CSS Basics
8. Selectors, inheritance, and cascade
9. CSS Positioning
   • Positioning demo
10. CSS Configuration and appearance
11. CSS3
12. Flexbox CSS

---

2. Intro to HTML

Validating the code

It's important to validate our HTML code for 3 reasons:

• Maintainance: to write clean code that's easy for others to understand and maintain
• Search engines: adding the correct tags help our site get better rank in search engines
• Accessibility: valid HTML improves compatibility with accessible web browsers

Even if our code is not completly valid, most browsers will render it fine. The end user will not notice.

We can validate our code with this page from the World Wide Web Consortium (W3C). There's also a VS Code extension that I'm using that does the same thing.

---

3. Structure and main components of an HTML document

Structure

• Header: Metadata that generally doesn't show up on the page, mostly for search engines and web browsers. Check the source code of this page to see some examples of metadata you can add there.
• Body: The content that shows on the webpage

Attributes, links, and div

Trying out attributes here (check the code to see what I mean).
This is how you link to other websites

Text styles

Here is a list of styles presented as an unordered list (ul).

• Strong
• Emphasis
• Strong + emphasis
• Underline (not recommended because people tend to think it's a link)
• code

Using CSS Styles

We can apply styles to text directly in the HTML file.

Here's a neat example using color, font-size, and text-align.

We could also use a separate .css file called CSS style sheet. If we do that we have to link it to our HTML file using link in the header. But we'll do that later.

Some other cool stuff you can do

Create an example page as an exercise from the book

Special characters

• <, >, & €, ©, ®,
• We can write spanish letters normally (ñ) or using HTML entities (ñ = ñ)

---

4. Creating content

Paragraphs

Paragraph on the right

Paragraph on the center

Paragraph on the left

Newlines don't show up on the rendered webpage if they're enclosed in <p> tags.

But we can force a line break
(like this)
using <br>.

Other tags

• <dfn> for definitions, e.g. brain rot
• <abbr> for abbreviations, e.g. stan
• <cite> + <blockquote> for quotes, e.g:

Anonymous author:

"My boyfriend isn't gay, he's simply a good person"

Tables!

Below I recreate the table in page 85 of the book:

And this is the caption :)

Header of this huuge table
Subheader
Period	Concept	Amount	Discount
This month	Call identification	12 €	0
	Individual Line	14 €	0
	City bonus	10 €	0
Total:		36 €
Footer of this huuge table

Lists

1. Wow
2. Such
3. Order

• Oh?
  • Turns out
  • you can nest
  • all kinds of lists

A description list? That's obscure HTML for sure. Does anyone actually use these?

Term 1

Defninition of term 1

Term 2

Definition of term 2

Term 3

Definition of term 3

---

5. Interactive web

Forms

We create them with the <form> tag and have as attributes: action, method, accept, enctype, id. Here's an example.

Text boxes

Note: You should probably add an id to each field.

Enabled text box:

Disabled text box:

A tiny text box:

Sneaky text box:

Buttons

Regular button (need Javascript to make it do stuff):

File button:

Image button:

Reset button:

Submit button:

Options

Favorite color?

Blue
Orange
Pink
Yellow
Green

Accept terms and conditions?

Wait I haven't even read those how do I know if I agree or not (Yes)
No

Here! Check as many as you like as a reward!

Whohooo!
I
love
checkboxes <3

(List of) Lists of options

List of things you can to list options:

• Hide 'em Option 1 Option 2 Option 3
• Show 'em Option 1 Option 2 Option 3
• Disable 'em Option 1 Option 2 Option 3
• Select one of 'em by default Option 1 Option 2 Option 3
• Group 'em Option 1 Option 3 Option 2

Text area

You can choose how big it is with "rows" and "cols"

Hidden fields

(Check the code to see it)

Other things that aren't covered in the book

Note: Failure to select the correct option will result in ☠️ instant death ☠️

Select the number 37:    0 100

Select the number of siblings you have:

Select the color of a mirror:

Select your birthdate:

Write a phone number from French Guiana (assume you are calling from France and that it is a fixed phone line): Hint

Select the most appropiate time to slay thy enemies:

More input types!

Organizing forms

The form above is a terrible example of how a form should be organized. Here's a better example!

To organize a forms we use:

• Labels: give a title to each element of the form
• Fieldset: to group of form elements
• Legend: give a name to a field set

Links to sections

This page is getting quite long... Why don't we add a table of contents to make navigation easier? To do that, we have to:

1. Add an id to the sections we want to link to (e.g. <h2 id="forms">)
2. Add an anchor element with the # symbol followed by the section id (e.g. <a href="#forms">)

Like this:

Title

• Forms
• Links to sections

Another application of this is a ⬆️ Back to top button ⬆️.

Multimedia

Images

Remote image:

Local image:

Audio and video

We use the <object> tag to add audios and videos.With the <param> tag we control autoplay, looping, and so on.

If we want to use media from other web pages we should cite the webpage and also use the embed code they give you.

witnesstestimony by GamingWithJumbo | License: Creative Commons 0

(I embedded the audio because I am too lazy to download more files and also neocities doesn't let you upload audios and videos)

---

6. HTML5

Parts of an HTML document (semantic tags)

Semantic tags help structure webpages by giving meaning to the elements of the HTML file. If your don't know which one to use just use a normal <div> tag. The most common elements are:

• Header: usually on the top of a page, and has logos, titles, etc.
• Footer: usually on the bottom of a page. Contains contact info, copyright info, etc.
• Nav: main navigation menu
• Article: for information that makes sense on its own (like an article, duh)
• Section: groups information with a similar theme. Usually has articles inside.
• Aside: secondary information, usually at the side of the page

New form tags

• New types of input like color, date, time, etc. Also, inputs can validate data now (see this form for some examples).
• Datalist: like lists but with autocomplete (I tried to put an example here but it didn't work 😭).
• Keygen: to encrypt forms
• Output: to make little JS scripts (like this ⬇️)

The tiniest calculator in the world!

+ =

Multimedia

Mp3 and mp4 are the most compatible formats, you can't go wrong with those. You can also use .ogg, .wav, .webm etc. but they may not be compatible with some browsers.

Audio

Listen to this awesome music! Here, turn it on whenever you feel like!

Videos

Pretty much the same as audios but we can define width and height as well.

---

7. CSS Basics

Absolute and relative units

Absolute units: Not used as much, not very dynamic. Examples include cm, in, mm, pt (points = 0.35 mm), pc ("picas" = 4.23mm)

Relative units: Calculated from another reference element. Used more often. Examples include em (width of letter M), ex (height of letter X), px, %

Usually people use px for margins, fills, and layers and % or em for font sizes.

Comments

Add comments to your CSS code /* Like this */ to avoid hating yourself in the future.

---

8. Selectors, inheritance, and cascade

Selectors

First part of a CSS rule. It determines to which elements the rule is applied to. There are two main types:

• Simple selectors
  • Tag selectors: use basic HTML tags. If we want to apply the same rule to multiple tags we combine them with commas.
  • Descending selectors: apply the rule only to elements inside certain elements. E.g. div h2 {font-size: 20px;} only applies to h2 elements that are inside a div tag.
  • Class selectors: apply the rule only to elements of a class. They use a dot (.) E.g. p.my-text {color: white;} only applies to p elements with class="my-text".
  • Id selectors: apply the rule only to elements with a certain ID. They use a hashtag (#) E.g. h1#intro {text-align: center;} only applies to h1 elements with id="intro".
  • Universal selector: * selects all HTML elements in a page.
• Advanced selectors
  • Attribute selectors:
    • [att=val]: att is exactly val
    • [att~=val]: val is at least one of the values of att
    • [att$=val]: att ends with val (e.g. href$=".com")
    • [att^=val]: att starts with val
    • [att*=val]: att contains val
  • Child selectors: div > h2 {font-size: 20px;} only applies to h2 elements that are direct children of a div element.
  • Adjacent selectors: div + h2 {font-size: 20px;} only applies to h2 elements that defined immediately after a div element.

Inheritance

By default HTML elements inherit the properties of the elements they're inside. But if there's a more specific rule that will be used instead.

Some properties are not inheritable. For instance, links have default colors in browsers. Even if we add a rule that makes all text orange, links will still be blue. To change this behavior we can add a {text-color: inherit;} to force inheritance.

Cascade

What if the same HTML element has conflicting rules? The most specific rule wins. In general ids are more specific than classes, and classes are more specific than regular HTML tags.

We can add !important to a declaration to block a property. This means no other CSS rule will override this property. For example, if we write p {color: black !important} all p elements will be black no matter what.

---

9. CSS Postitioning

🛑 Stop reading you nerd! Check out this demo page instead!🛑

Check out

Box model

Every HTML element is represented as a box. Using CSS we can modify the margin, background-img, etc.

Some properties are shorthands that let us modify multiple properties at once. Examples include margin, border, etc.

Block elements vs Inline elements

Classification of HTML elements:

• Basic: <html>, <head>, <body>
• Head: <title>, <meta>, <link>, etc.
• Body:
  • Block: by default they start on a new line and occupy the whole width of the page. E.g. <div>, <form>, <h1-h6>, <table>
  • Inline: by default they only take up the space they need to show the content. E.g. <a>, <img>, <input>, <select>

Positioning

The CSS property position can be:

(there's also inherit but it wasn't included in this awesome image)

Depending on the type, top, bottom, left, right have a different meaning:

• Static / Normal: don't have any effect
• Relative: displacement relative to normal position. E.g. left: 20px; = "20px to the left of its normal position"
• Absolute: displacement relative to parent element
• Fixed: displacement relative to browser window

Z-index

Use to define the "depth" of an element.

---

10. CSS Configuration and appearance

Text and paragrphs

According to this video your should not use px for fonts. Use rem instead, and em for margin, padding, etc.

Stuff you can change with CSS:

• font weight
• font style
• letter spacing
• text decorations
• more text decorations
• even more text decorations
• indentation (idk it doesn't work inside the list)
• alignment
• Capitalization (this whole line is written in lowercase but css transforms it)
• add a shadow
• line height e.g. this is twice the normal height (here's some text to fill the line so I can show you how this works)

Links, images, and pseudoclasses

We can also change how things look only when we hover over them or click them. For instance:
Hover over me! This is a normal link
Now hover over me! This is a special link

We do this using pseudoclasses

Lists

Again, we can change pretty much everything when it comes to lists.

• Like
• the
• marker

1. Or
2. the
3. numbers

Because lists are so customizable, often people use them to make horizontal menus like this:

• Home
• About me
• Blog
• Links

---

11. CSS3

Rounded borders

Box-Shadows

Text in multiple columns

Text overflow

I'm too lazy to do a demo of this. Just know that the relevnt properties are:

• text-overflow → how to clip the text if it's longer than its container
• word-wrap / overflow-wrap
• word-break
• overflow

The difference between these properties is a bit confusing so just check out this article in case of doubt.

Buttons

We can customize buttons too!

Hello there These Are Some Buttons

(CSS adapted from Frutiger Aero Archive)

12. Flexbox CSS

Flexbox types

• display: flex → regular flexbox, behaves like a block element
• display: inline-flex → behaves like an inline element

Flexbox notes

CONTAINER PROPERTIES

• justify-content → aligns items on the main axis
• align-items → aligns items on the cross axis
• By default, flex items try to fit into one line.
• If items are allowed to wrap using flex-wrap: wrap, you unlock the align-content property.
• align-content controls how the rows of items are spaced along the cross axis.

ITEM PROPERTIES

• flex-grow, flex-shrink, and flex-basis can be used individually — but it's easier to just use the shorthand flex and set it to 1. That will pick sensible defaults for the others.
• align-self lets you override align-items for one specific item.
• order controls the order items appear in. By default, all items have order: 0, so they appear in HTML order. If you give one order: -1 it'll move first; order: 1 moves it last.

You know what? I'm done now. Instead of reading this book I'm going to link to some resources I found to learn how flexbox works:

• Learn Box Alignment by Ahmad Shadeed great to learn the basics
• CSS Flexbox Layout Guide by CSS Tricks: explains its properties in more detail

wrapper