Week 7 Notes: HTML / CSS / DOM

Beyond the canvas… The Browser

A web browser is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. (source: https://en.wikipedia.org/wiki/Web_browser)

Those files typically include:

HTML(Hypertext Markup Language)
- The core structure of a web page, defining the content and layout using tags (e.g., headings, paragraphs, links, images).
- HTML files provide the basic skeleton of a web page.
CSS (Cascading Style Sheet)
- Stylesheets that define how the HTML elements should look—such as colors, fonts, spacing, and layout.
- CSS files help in making a web page visually appealing and responsive.
JS (Javascript)
- Script files that add interactivity and dynamic content to web pages, such as animations, form validations, and content updates without reloading the page.
Images, video, audio, fonts etc.

The web editor

So far we’ve been writing javascript code in the web editor using the p5.js library and running the script without know what’s going on under the hood. If we click on the arrow next to our code, the left tab will appear with two other files: index.html and style.css.

Screenshot 2024-10-21 at 12.49.50 PM.png

HTML(Hypertext Markup Language)

based on a concept of a <tag>
create content and layout by this system of nested tags

<html>
	<body>
		<h1> Title of page </h1>
		<p> This is a paragraph </p>
		<img src="apple.jpg"> </img>
	</body>
</html>

try option+ command+ i on macos to bring up the html of a webpage
https://www.nytimes.com/