fourIcon

Fantastic Four!

HTML, CSS, JavaScript, Bootstrap

Who wouldn't want to join a team of superheroes?!

4 basic web technologies: HTML, CSS, JavaScript and Bootstrap5 work together to create web pages with amazing abilities. The are true 'Super Heroes' in the web-development world! If you need a refresher on the original Fantastic Four, we've got you covered!

Become a superhero too by leveraging their power! Learn more about them at W3Schools!

This page is changing regularly, so be sure to check in often to see what's new and improved.

Look what happened when we gave GitHub Copilot a chance to showcase the Fantastic Four (with H.E.R.B.I.E!). It is fantastic bordering on miraculous!

HTML Essentials:

  • HTML provides the structure of a web page. It's like the 'Ben Grimm' of the team! W3Schools provided a wonderful tutorial for beginners that we feature here at TNT.

  • The 'markup' is provided by tags like: <body> and <blockquote>. Some of the tag names are obvious, like <title> others are somewhat cryptic and abbreviated (<a>, a hyperlink tag!), others are semantic where the word suggests it's role in the page structure, like <footer> or <table>.

  • Tags come in two basic types:

    • Most tags come in open and closing pairs like bookends, that indicate where a structure begins and ends. Example: <p>My first paragraph.</p>. Together, the open tag, the content, and the close tag form an HTML 'element'
    • Empty tags do not have a 'closing' tag (and therefore no content!) and often use attributes to influence their purpose. Example: <img src="myPrettyPony.jpg" alt="pony"> which is an 'image element' with a 'source' and 'alternative' attribute (discussed later). Other examples include: <br> (a line break) and <hr> (a 'horizontal rule')

  • Generally, everything on a webpage should be in a tag.

  • A complete alphabetic reference of tags is found at the beloved W3Schools site.

  • You can view the 'source code' for virtually any webpage by right-mouse-clicking on the page and choosing:

    • 'View Source' (Ctrl-U)
    • 'Inspect'

    Either will open a panel in the browser and let you see the fabric of the page. We call this 'using your x-ray vision'!

  • Attributes can influence how an element 'works' and allow you to target an element for either styling or behavior with CSS and JavaScript respectively. Some features:

    • Written as an equation of the form: name="value' in the 'start' tag of the element
    • May be provided in any order, with multiple attributes separated by a space

    The most common attributes are the id and class attributes. The id attribute lets you target an element for styling or action. It's like a social security number for an element and must be unique. The class attribute allows you to target an element for styling with CSS and/or Bootstrap. Bootstrap uses classes to affect the page.

  • HTML Entities are code-y looking symbols that render symbols that are not on the keyboard like: π or °. Cute, huh? The are preceded by an 'ampersand' (&) and either some abbreviation symbols or code numbers and are followed by a semicolon (;). There's a ton of them and you can see them all at the link in this sentence.
Web Page Essentials:
  • A webpage is written in HTML and has an extension of '.html' or '.htm' to designate it as a webpage.

  • Every web page has a 'doctype' that establishes the 'dialect' of HTML that the page uses. It's an agreement on the rules that will be followed in comprising the page: kind of. ('Validated' web pages must have a doctype so the validator knows the proper document rules to check when critiquing the page). The current doctype for 'modern' HTML5 is: <!DOCTYPE html>. This is considerably easier than past doctypes like:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    ick.

  • Structurally, every page has a top-level container: <html>. Nested inside the 'html tag' are two sibling code blocks: <head> and <body>.

    (Well-written code shows nested 'child' elements as indented blocks within their containers, the 'parent' elements. This visualization helps when targeting elements for CSS Styling based on their nesting relationship.)

  • HTML Comments (<!-- -->)should be used to document special features of a webpage or to add commentary on why certain things have been done or to reference a URL that provided useful information. It's professional to supply 'header comments' between the doctype and head elements and give basic info such as date, file name, author, etc.

  • Generally, every page affiliated with TNT should validate. This means that proper HTML 'grammar' rules were followed when composing the page. Those rules are established by the doctype.

DOM Essentials:

  • The DOM is an object-based way of understanding the anatomy of a webpage and all its elements

Web Site Essentials:

  • A 'web site' is a collection of HTML web pages and other assets (images, scripts, styles, media) that are stored in a single folder (the root folder).

    Organization of the file structure is critical so that resources can be found 'relative to' one another.

    A common structure used at TNT is to create the following subfolders in the root folder:

    • images
    • scripts
    • styles
    • media

    The site's index and other HTML pages are in the root folder.

  • The 'main page' of any website is typically saved as the 'index' page (home page). When denoted in this way, when a user loads a site like: 'https://www.technovicetools.com', the browser automatically calls up the site's index without them having to specify a particular page.

CSS Essentials:

  • CSS is a language comprised of property:value pairs that influence the look of elements on a webpage.

  • It does its work by targeting a web page element with a selector and then styling it with the requested properties and their associated values.

JavaScript Essentials:

  • JavaScript gives a user the ability to interact with a page dynamically to accomplish a goal(s) of the app.

Bootstrap5 Essentials:

  • In some ways, Bootstrap5 is a hybrid language of CSS and JavaScript because it uses both of those technologies to greatly influence the 'look and feel' of a site and to add 'sprinkles' of interesting behaviors such as transitions with drop-down menus, or revealing information (for example: Click the 'Join the team!' button above and watch as information gracefully slides into view. That's BS5 in action!)