New room in the path, “How Websites Work”. Also, day 41 of the streak.

Two major components make up a website:

  1. Front End (Client-Side) - the way your browser renders a website
  2. Back End (Server-Side) - server that processes your request and returns a response

HTML

  • HTML - to build sites and define their structure
  • CSS - to make the site look pretty by adding styling options
  • JavaScript - to implement complex features on pages using interactivity

Elements/tags are building blocks of HTML pages and tells browser how to display content. Structure from the code snippet:

  • <!DOCTYPE html> - defines page as HTML5 document. Helps with standardisation accross different browsers and tells the browser to use HTML5 to interpret the page.
  • <html> - root element of the HTML page, first element in, last element out.
  • <head> - contains information about the page (such as the page title).
  • <body> - defines the HTML document’s body. Only content inside the body is shown in the browser.
  • <h1> - defines large heading.
  • <p> - defines a paragraph.

Elements also contain <button>, <img>, etc.

Tags can contain attributes such as the class attribute to style the element, i.e. `<p class="bold-text">`, or the src attribute to specify location of images ``. Elements can have multiple attributes, space delimited.

Elements can also have an id attribute, i.e. `<p id="example">`, which is unique to element. Element IDs are used for styling and to identify it by JavaScript.

The Questions

Play with the HTML and answer the questions.