HTML Basics

Basic HTML Page Setup

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Android Studio</title>
    <link rel='stylesheet' href='/common-styles.css'>
    <ink rel='stylesheet' href='/main-layout.css'>
    <script type='module'>
        import { loadMenu, getTheme } from '/load-menu.js';

        getTheme();
        loadMenu();
    </script>
</head>

<body>
    <!-- Main Container -->
    <div class='container' id='mainContainer'>

    
    </div> <!-- Main Container End -->

    <script>
    </script>
</body>
</html>

HTML Definitions

<{element} {attribute}='{value}'>

Example elements: div, body, img
Example attributes: class, type, href, styles,id

Example: 
<link rel='example'> 'link' is the element and 'rel' is the attribute

Commenting in HTML

HTML comments are not displayed in the browser, but they are displayed in the browser's DevTools

<!-- This is a comment -->

Linking CSS Stylesheets

Put the <link> element in the <head> of HTML page.

<link rel='stylesheet' href='/stylesheets/main.css'>

When linking stylesheets from parent folder, use ../ notation to go up one folder.
```
<link rel='stylesheet' href='../stylesheets/secondary.css'>
```

More examples in Links and Multimedia

When linking multiple stylesheets, add more <link> elements, but the last stylesheet will overwrite the previous ones if they shared the same selectors
```
<link rel='stylesheet' href='/stylesheets/main.css'>
<link rel='stylesheet' href='../stylesheets/secondary.css'>
```

Importing JS Scripts

Method 1:

If importing simple scripts, using <script> andsrc attribute in the HTMLhead element is enough. The function can be called after if desired.

defer and async are used to tell when the script will be run: after the DOM finished loading or right after the script is finished downloading

<script src='/scripts/myScript.js' defer|async>
  myFunction();
</script>

Method 2:

Using ES6 syntax for a modular approach, you have to export the function in the js file first, then import it in the head element and between the script element of the HTML file.

Everything between the <script> tags is Javascript code. Anything that can be done in a Javascript file can be done here and vice-versa.
type='module' scripts are automatically deferred so there's no need fordocument.addEventListener('DOMContentLoaded', () => function)

// Javascript
export function myFunction() {
  //Do something
}

// HTML
<script type='module'>
    import { myFunction } from 'script1.js';
    import { deferredFunction, asyncFunction } from 'script2.js';

    asyncFunction();
    deferredFunction();
    myFunction();

    --------------------------------------------------------------
    /* Redundant because type='module' scripts are automatically deferred */
    document.addEventListener('DOMContentLoaded', () => {
      deferredFunction();

      // Do anything else you want after the DOM is loaded
      myFunction();
    });
    */
</script>

Attributes

class: Classification for CSS styling
id: Unique element identifier
style: Inline CSS styling
href: URL for links
target: Specifies where to open the linked document
src: Source path for images, scripts, etc.
alt: Alternate text for images

Container Elements

<section> <article> <div> <main>: container elements to hold other elements

The only difference between them are related to SEO

<div>: most commonly used container block element
<span>: inline element primarily to hold text;
<header> and <footer>: for specific contents
<nav>: can be used to hold navigation elements (optional)

Text Elements

<p>: Paragraph - define text blocks;
```
<p>This is a paragraph.</p>
```

<h1> to <h6>: Headings

<h1>Main Heading</h1>
<h3>Subheading</h3>

<strong> and <em>: Bold and Italic

<strong>Bold Text</strong>
<em>Italic Text</em>

Other Elements

<br />: line break;
<hr />: horizontal rule

Links and Multimedia

<a href='...'>: Hyperlink

Use the href attribute to specify the link destination

'https://example.com': absolute link
'index.html' or './index.html': relative link starting from current folder
'/index.html': root-relative link starting from root folder(PREFERRED)

Use the target attribute to specify where to open the link

_blank: Opens in a new tab or window
_self: Opens in the same frame as it was clicked (default)
_parent: Opens in the parent frame
_top: Opens in the full body of the window

<a href='https://example.com' target='_blank'>Visit Example</a>
<a href='/index.html' target='_blank'>Visit Example</a> // Relative link that starts from root folder
<a href='index.html' target='_blank'>Visit Example</a> // Relative link that starts from current folder

<img src='...' alt='...'>: Image

<img src='image.jpg' alt='A description' width='200' />

<audio src='...' controls>: Audio
- Requires the controls attribute to let user pause and play it.
```
<audio src='audio.mp3' controls>Require browser update in order to play audio.</audio>
```

<video src='...' controls>: Video

Requires the controls attribute to let user pause and play it.

<video src='video.mp4' controls width='98%'>Require browser update in order to play video.</video>

<iframe src='...'>: embeds external content (e.g. maps)
```
<iframe src='...' width='98%'>
```

Lists

<ul>: Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Item 1
Item 2

<ol>: Ordered List

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

First
Second