# Website Programming

### Journey to learning HTML, Java, CSS

:::success
## Ultimate Goal
Create a website that is a comprehensive explanation of the top 99% of majors
Begins with brief survey to narrow what majors are returned depending on students answers
:::

Create environment for specific project - in this case AT's website

conda create -y -n ATweb -c conda-forge python=3.9

## Setup + Downloads
###### Credit to [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/contribute)

:::spoiler Node + Bootstrap
### Node.js + Bootstrap

#### To use build system + run the documentation locally (:question: locally = in terminal?), you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:

1. [Node.js](https://nodejs.org/en/download/) : used to manage our dependencies
2. Download [bootstrap sources](https://github.com/twbs/bootstrap/archive/v5.3.0-alpha1.zip) or clone [repository](https://github.com/twbs/bootstrap)
3. Navigate to the root /bootstrap directory and run ```npm install``` to install our local dependencies listed in package.json.
:::

:::spoiler NPM Scripts
### NPM Scripts
Run ```npm run``` to see all the npm scripts in your terminal
**Primary tasks:**

:::info
[Starter Project](https://github.com/twbs/bootstrap-npm-starter)
:::

:::spoiler ### DartSass
### Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files

You can now use this to compile files:

dart compile-sass.dart styles.scss styles.css

:::

:::spoiler Autoprefixer
### Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes
Takes code from:

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

To:

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

All by itself - saves hella time
:::
:::spoiler RTLCSS
### RTLCSS
Bootstrap uses RTLCSS to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (e.g. padding-left) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS control and value directives.
:::

:::spoiler Local Documentation/Hugo
### Local Documentation/Hugo
Hugo: world’s fastest static website engine

To run our stuff locally (from command line:question:) we need Hugo.

1. To install Hugo run ```npm run docs-serve```

2. Open http://localhost:9001/ in your browser, "and voilà."

:::info
Static website: Presents the same way to all users
Dynamic website: Presents user dependent information (e.g. Canvas)
:::

:::warning
### Troubleshooting
To try and fix any problem run into, uninstall everything and re-run ```npm install```

:::

## HTML Basics
###### Credit to [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)

HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on.

### Elements

<p> My cat is angry </p>

Opening tag: consists of name of element
Content: consists of content
Closing tag: ends element, same as opening tag but has /.

Nesting: Placing elements withing other elemtns

<p> My cat is <strong> very </strong> angry </p>

Block elements: form visible block on page
- blocks can be within blocks
Inline elements: contained within block-level elements

#### Void Elements
Some elements have single tag, typically used to insert/embed something in the doc

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" alt="Firefox icon" />

:::spoiler Types of Elements

<!DOCTYPE html>: This is the HTML5 doctype declaration, which tells the browser that this is an HTML5 document.

<html>: This is the root element of the HTML document.

<head>: This element contains metadata about the document, such as the title and description of the website.

<meta>: These elements provide additional information about the document, such as the character set and viewport settings.

<title>: This element sets the title of the website, which appears in the browser tab.

<link>: This element links to an external stylesheet, which contains the styles for the website.

<body>: This element contains the visible content of the website.

<header>: This element represents the header of the website, which usually contains a navigation menu.

<nav>: This element represents a navigation menu.

<ul>: This element represents an unordered list.

<li>: This element represents a list item.

<a>: This element represents a hyperlink.

<main>: This element represents the main content of the website.

<section>: This element represents a section of content within the website.

<h1>: This element represents a top-level heading.

<p>: This element represents a paragraph of text.

<footer>: This element represents the footer of the website.

:::

### Attributes
Attributes contain extra info about the element that won't appear in content.
:::info

<p class="editor-note">My cat is very grumpy</p>

In this eg, class is the attribute which points to stylistic info about the element
:::
An attribute should have:

- A space between it and the element name. (For an element with more than one attribute, the attributes should be separated by spaces too.)
- The attribute name, followed by an equal sign.
- An attribute value, wrapped with opening and closing quote marks.

:::info
Attribute examples: for hyperlink ```<a>```
- href: specifies web address for link

- title: extra info, appears when cursor hovers element

- target: specifies browsing context used to display link

:::
:::success

<p>A link to my <a href="https://www.google.com/search?client=safari&rls=en&q=minesweeper&ie=UTF-8&oe=UTF-8" title="most fun game ever" target="_blank">
favorite website</a>.</p>

  <p>A link to my <a href="https://www.google.com/search?client=safari&rls=en&q=minesweeper&ie=UTF-8&oe=UTF-8" title="most fun game ever" target="_blank">
favorite website</a>.</p>
:::

#### Boolean attributes
Boolean attributes can only have one value (generally the same as the attribute name) and can be written without a value.

<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled />

<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text" />

:::info
single or double quotes can be used just no mixing
:::

### Anatomy of an HTML document
How individual elements combine to form entire HTML page:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>

1. ```<!DOCTYPE html>```: The doctype, this is the shortest string of characters that counts as a valid doctype

2. ```<html></html>```: The html element. Wraps all the conent on the page, also known as root element.

3. ```<head></head>```: The head element. This element acts as a container for everything you want to include on the HTML page, that **isn't the content** the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. 

4. ```<meta charset="utf-8">```: The meta element. Represents metadata that can't be respresented by other HTML meta-related elements like base, link, script, style, or title. Charset is an attribute that sets the character set for your doc to UTF-8, which includes most characters from the vast majority of human written languages. No reason not to set this.

5. ```<title></title>```: The title element. This sets the title of the page which appears in browser tab. Also used to describe the page when it's bookmarked.

6. ```<body></body>```: The body element. Contains all the content displayed on the page: text, images, videos, games, audio tracks, or whatever else.

:::info
To use Bootstrap's CSS and JS add

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

within ```<head>``` and add

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

just before ```</body>```
:::

#### Whitespace
No matter how much white space you use inside element content, HTML parser will reduce each sequence of whitespace to a single space when rendering the code.

### Including special characters in HTML

| Literal | Equivalent |
| -------- | -------- |
| < | ```&lt;``` |
|>|```&gt;```|
|"|```&quot;```|
|'|```&apos;```|
|&|```&amp;```|

### HTML Comments

To write a comment, wrap it in ```<!--``` and ```-->```