215 lines
3.6 KiB
Markdown
215 lines
3.6 KiB
Markdown
|
|
|||
|
|
# Web Design with Shway !
|
|||
|
|
Welcome back. 😁
|
|||
|
|
<br>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
## WHAT DID WE LEARN:
|
|||
|
|
|
|||
|
|
- AIDEN - LAST CLASS - GAMES IN SCRATCH
|
|||
|
|
- LUKE - IN THE BEGINNING - LEARNED GITHUB (tried)
|
|||
|
|
- GRAHAM - Ended up putting it in GOOGLE DOCS, and then we used html.viewer.net
|
|||
|
|
- MADDUX - `<!DOCTYPE HTML> ` THE very FIRST line of an html document (thanks luke)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Intro to the Internet:
|
|||
|
|
|
|||
|
|
|
|||
|
|
- Browser - Luke
|
|||
|
|
- Games
|
|||
|
|
- Movie Database - Lists of useful things to watch
|
|||
|
|
- Apps
|
|||
|
|
- Art and Webcomics
|
|||
|
|
|
|||
|
|
-
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
WHAT DID WE LEARN (part 2):
|
|||
|
|
|
|||
|
|
- MADDUX - `<!DOCTYPE HTML> ` THE very FIRST line of an html document (thanks luke)
|
|||
|
|
- LUCAS - THE 2nd line is always
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/I6eYgo1kiPo?si=Z73QhJg9c-5fskn6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- JUDE - EVERYTHING goes in between the html "tags"
|
|||
|
|
- Tomer - What does the title do? It creates the literal title of your webpage (like the tab title)
|
|||
|
|
-
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
# What did we learn part 3?
|
|||
|
|
Misha - How to we embed vidoes/games into our site: (we go into the iframe code)
|
|||
|
|
|
|||
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/I6eYgo1kiPo?si=Z73QhJg9c-5fskn6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|||
|
|
|
|||
|
|
|
|||
|
|
How do we input an image?
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
Hi hello
|
|||
|
|
|
|||
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/I6eYgo1kiPo?si=Z73QhJg9c-5fskn6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
<img src="https://pngimg.com/uploads/fortnite/fortnite_PNG16.png">
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
What did we learn part 3?
|
|||
|
|
|
|||
|
|
How do we make different size fonts in html ?
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<html>
|
|||
|
|
<h1> TEXT </h1>
|
|||
|
|
|
|||
|
|
<h2> smaller test> </h2>
|
|||
|
|
<html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
<h1> TEXT </h1>
|
|||
|
|
|
|||
|
|
<h2> smaller text</h2>
|
|||
|
|
<h3> even smaller text </h3>
|
|||
|
|
|
|||
|
|
<h6> even smaller text </h6>
|
|||
|
|
|
|||
|
|
How do we change the background color?
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<!DOCTYPE HTML>
|
|||
|
|
|
|||
|
|
<HTML>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<body style=“background-color:red;”>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</HTML>
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
WHAT WE NEED HELP WITH:
|
|||
|
|
|
|||
|
|
|
|||
|
|
-
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
WHAT THE NEXT TRIMESTER IS GOING TO BE:
|
|||
|
|
|
|||
|
|
|
|||
|
|
-
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
STEP 1: Open up a google doc, images & background color.
|
|||
|
|
|
|||
|
|
[https://html.onlineviewer.net/](https://html.onlineviewer.net/)
|
|||
|
|
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html>
|
|||
|
|
<body>
|
|||
|
|
<body style= “background-color:red”>
|
|||
|
|
<h1> Blah balah </h1>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### STEP 2: Adding tables & embedding games + videos!
|
|||
|
|
|
|||
|
|
We have all heard about Scratch? Played games last week?
|
|||
|
|
Let's play geometry dash --> [Geometry Dash ](https://scratch.mit.edu/projects/835488610/)
|
|||
|
|
|
|||
|
|
But **On our website!** :D
|
|||
|
|
|
|||
|
|
*Add your own games here*
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html>
|
|||
|
|
<body>
|
|||
|
|
<body style= “background-color:red”>
|
|||
|
|
<h1> Blah balah </h1>
|
|||
|
|
<p> Lorem ipsum about random stuff that interests me. </p>
|
|||
|
|
|
|||
|
|
<h2> Geometry Dash Blah </h2>
|
|||
|
|
<iframe src="https://scratch.mit.edu/projects/835488610/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
### STEP 3: Publishing the website & additional CSS.
|
|||
|
|
|
|||
|
|
[https://neocities.org/browse](https://neocities.org/browse)**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### Step 4: Additional Tips
|
|||
|
|
|
|||
|
|
* Go to [https://html-online.com/editor/](https://html-online.com/editor/) to learn about adding tables.
|