Skip to content

Latest commit

 

History

History
54 lines (29 loc) · 2.75 KB

0-html-overview.md

File metadata and controls

54 lines (29 loc) · 2.75 KB

Super quick overview of HTML and parts of a web page

There are three languages that all web browsers understand:

  1. HTML (HyperText Markup Language) -- the skeleton, the structure of the page.
  2. CSS (Cascading Style Sheets) -- the skin (or hair and makeup), the presentation of the page.
  3. JavaScript (or JS for short) -- the brain and nervous system that makes decisions, responds to the user, etc.

⭐ The bare minimum you need to create a web page is just an HTML file! CSS and JavaScript are entirely optional!

The three languages are saved as three corresponding file types: a .html file, a .css file, and a .js file.

The most common file names, which we'll use today, are: index.html, style.css, and script.js -- just a convention, not a hard rule.


The anatomy of an HTML tag

This is all you need to know about HTML for today's class:

html-tag-breakdown


Beyond that, HTML is a relatively easy language to learn, since its only purpose is to label parts of your web page: "this is a paragraph, this is the title, this is an image, and they go in this order."


Note: There are tons of free online resources to learn HTML! In just a few hours, you'll be able to make your own basic web pages with HTML. For today's class, any HTML for our pages will be provided and you'll


Linking JavaScript to your HTML file

Every time you visit a web page, your computer downloads all the files for that page! Most web pages use all the three native web languages: HTML, CSS, and JavaScript, so most web pages download at least those three files.

When you visit a page, your computer first downloads the HTML file. Then it reads that file line by line, from top to bottom, and the HTML file specifies which other files to download:


linking-html-to-js

The red text and arrow highlights how the HTML file tells the web browser to also download the script.js file -- and now the JavaScript code in script.js can communicate with the HTML code in index.html!


If you look closely in the image above, you'll also see how the HTML file links the style.css so that the HTML can talk to the CSS too. (And by extension, this also lets our JavaScript talk to the CSS if we want it to!)


🏆 Great job! Next up: let's do some group introductions and test out the browser console to run our first lines of JavaScript code!