305 lines
9.4 KiB
HTML
305 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||
|
||
<title></title>
|
||
<link rel="stylesheet" href="dist/reveal.css" />
|
||
<link rel="stylesheet" href="dist/theme/black.css" id="theme" />
|
||
<link rel="stylesheet" href="plugin/highlight/zenburn.css" />
|
||
<link rel="stylesheet" href="css/layout.css" />
|
||
<link rel="stylesheet" href="plugin/customcontrols/style.css">
|
||
|
||
|
||
|
||
<script defer src="dist/fontawesome/all.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
var forgetPop = true;
|
||
function onPopState(event) {
|
||
if(forgetPop){
|
||
forgetPop = false;
|
||
} else {
|
||
parent.postMessage(event.target.location.href, "app://obsidian.md");
|
||
}
|
||
}
|
||
window.onpopstate = onPopState;
|
||
window.onmessage = event => {
|
||
if(event.data == "reload"){
|
||
window.document.location.reload();
|
||
}
|
||
forgetPop = true;
|
||
}
|
||
|
||
function fitElements(){
|
||
const itemsToFit = document.getElementsByClassName('fitText');
|
||
for (const item in itemsToFit) {
|
||
if (Object.hasOwnProperty.call(itemsToFit, item)) {
|
||
var element = itemsToFit[item];
|
||
fitElement(element,1, 1000);
|
||
element.classList.remove('fitText');
|
||
}
|
||
}
|
||
}
|
||
|
||
function fitElement(element, start, end){
|
||
|
||
let size = (end + start) / 2;
|
||
element.style.fontSize = `${size}px`;
|
||
|
||
if(Math.abs(start - end) < 1){
|
||
while(element.scrollHeight > element.offsetHeight){
|
||
size--;
|
||
element.style.fontSize = `${size}px`;
|
||
}
|
||
return;
|
||
}
|
||
|
||
if(element.scrollHeight > element.offsetHeight){
|
||
fitElement(element, start, size);
|
||
} else {
|
||
fitElement(element, size, end);
|
||
}
|
||
}
|
||
|
||
|
||
document.onreadystatechange = () => {
|
||
fitElements();
|
||
if (document.readyState === 'complete') {
|
||
if (window.location.href.indexOf("?export") != -1){
|
||
parent.postMessage(event.target.location.href, "app://obsidian.md");
|
||
}
|
||
if (window.location.href.indexOf("print-pdf") != -1){
|
||
let stateCheck = setInterval(() => {
|
||
clearInterval(stateCheck);
|
||
window.print();
|
||
}, 250);
|
||
}
|
||
}
|
||
};
|
||
|
||
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="reveal">
|
||
<div class="slides"><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
### Week 3: Coding in HTML! Let's make a Website
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
Greetings from Developer land. Last week we learned what real programmers use to upload their code for others to collaborate.
|
||
|
||
|
||
|
||
|
||
Today we are going to start programming!
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
### Building Blocks of a Website
|
||
|
||
|
||
|
||
<img src="Pasted image 20231010141612.png" alt="" style="object-fit: scale-down">
|
||
|
||
|
||
|
||
- HTML - the content and "bones" of a website
|
||
- CSS - the decorations, here we can add fancy decorations
|
||
- Javascript - animations can be added here
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
## Step 1. Open TextEdit
|
||
|
||
|
||
Believe it or not this is all we need to actually start coding (who needs Github anyways)
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
## Step 2. HTML Building blocks
|
||
|
||
|
||
Making the structure
|
||
|
||
There are 3 parts that tie into basic HTML structure. Think of these as the “building blocks” of a web page:
|
||
|
||
1. HTML version declaration
|
||
2. Heading(s)
|
||
3. Body
|
||
|
||
Let's start with #1.
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
### HTML version declaration
|
||
Every website starts with this line of code for HTML
|
||
|
||
Start by typing this line in your program
|
||
```html
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
|
||
</html>
|
||
```
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
### Next is the Header!
|
||
|
||
```
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
<head>
|
||
</head>
|
||
|
||
</html>
|
||
```
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
### Next is the Body!
|
||
|
||
```
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<title> This is the tile of my site!
|
||
<title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
& This is where the text of a website goes
|
||
</body>
|
||
|
||
</html>
|
||
```
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
## Save this file as hello.html file
|
||
</div></script></section><section data-markdown><script type="text/template"><!-- .slide: class="drop" -->
|
||
<div class="" style="position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center" absolute="true">
|
||
|
||
Next
|
||
</div></script></section></div>
|
||
</div>
|
||
|
||
<script src="dist/reveal.js"></script>
|
||
|
||
<script src="plugin/markdown/markdown.js"></script>
|
||
<script src="plugin/highlight/highlight.js"></script>
|
||
<script src="plugin/zoom/zoom.js"></script>
|
||
<script src="plugin/notes/notes.js"></script>
|
||
<script src="plugin/math/math.js"></script>
|
||
<script src="plugin/mermaid/mermaid.js"></script>
|
||
<script src="plugin/chart/chart.min.js"></script>
|
||
<script src="plugin/chart/plugin.js"></script>
|
||
<script src="plugin/customcontrols/plugin.js"></script>
|
||
|
||
<script>
|
||
function extend() {
|
||
var target = {};
|
||
for (var i = 0; i < arguments.length; i++) {
|
||
var source = arguments[i];
|
||
for (var key in source) {
|
||
if (source.hasOwnProperty(key)) {
|
||
target[key] = source[key];
|
||
}
|
||
}
|
||
}
|
||
return target;
|
||
}
|
||
|
||
function isLight(color) {
|
||
let hex = color.replace('#', '');
|
||
|
||
// convert #fff => #ffffff
|
||
if(hex.length == 3){
|
||
hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
|
||
}
|
||
|
||
const c_r = parseInt(hex.substr(0, 2), 16);
|
||
const c_g = parseInt(hex.substr(2, 2), 16);
|
||
const c_b = parseInt(hex.substr(4, 2), 16);
|
||
const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
|
||
return brightness > 155;
|
||
}
|
||
|
||
var bgColor = getComputedStyle(document.documentElement).getPropertyValue('--r-background-color').trim();
|
||
var isLight = isLight(bgColor);
|
||
|
||
if(isLight){
|
||
document.body.classList.add('has-light-background');
|
||
} else {
|
||
document.body.classList.add('has-dark-background');
|
||
}
|
||
|
||
// default options to init reveal.js
|
||
var defaultOptions = {
|
||
controls: true,
|
||
progress: true,
|
||
history: true,
|
||
center: true,
|
||
transition: 'default', // none/fade/slide/convex/concave/zoom
|
||
plugins: [
|
||
RevealMarkdown,
|
||
RevealHighlight,
|
||
RevealZoom,
|
||
RevealNotes,
|
||
RevealMath.MathJax3,
|
||
RevealMermaid,
|
||
RevealChart,
|
||
RevealCustomControls,
|
||
],
|
||
|
||
|
||
allottedTime: 120 * 1000,
|
||
|
||
mathjax3: {
|
||
mathjax: 'plugin/math/mathjax/tex-mml-chtml.js',
|
||
},
|
||
markdown: {
|
||
gfm: true,
|
||
mangle: true,
|
||
pedantic: false,
|
||
smartLists: false,
|
||
smartypants: false,
|
||
},
|
||
|
||
mermaid: {
|
||
theme: isLight ? 'default' : 'dark',
|
||
},
|
||
|
||
customcontrols: {
|
||
controls: [
|
||
]
|
||
},
|
||
};
|
||
|
||
// options from URL query string
|
||
var queryOptions = Reveal().getQueryHash() || {};
|
||
|
||
var options = extend(defaultOptions, {"width":960,"height":700,"margin":0.04,"controls":true,"progress":true,"slideNumber":false,"transition":"slide","transitionSpeed":"default"}, queryOptions);
|
||
</script>
|
||
|
||
<script>
|
||
Reveal.initialize(options);
|
||
</script>
|
||
</body>
|
||
|
||
<!-- created with Advanced Slides -->
|
||
</html>
|