2023-10-10 17:57:14 +00:00
|
|
|
|
|
2023-10-10 18:13:03 +00:00
|
|
|
|
### Week 3: Coding in HTML! Let's make a Website
|
2023-10-10 17:57:14 +00:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2023-10-10 18:13:03 +00:00
|
|
|
|
Greetings from Developer land. Last week we learned what real programmers use to upload their code for others to collaborate.
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-10-10 18:18:35 +00:00
|
|
|
|
|
2023-10-10 18:13:03 +00:00
|
|
|
|
|
|
|
|
|
|
Today we are going to start programming!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2023-10-10 18:18:35 +00:00
|
|
|
|
### Building Blocks of a Website
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
![[Pasted image 20231010141612.png]]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- HTML - the content and "bones" of a website
|
|
|
|
|
|
- CSS - the decorations, here we can add fancy decorations
|
|
|
|
|
|
- Javascript - animations can be added here
|
|
|
|
|
|
|
|
|
|
|
|
---
|
2023-10-10 18:13:03 +00:00
|
|
|
|
|
2023-10-10 18:24:10 +00:00
|
|
|
|
## Step 1. Open TextEdit
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Believe it or not this is all we need to actually start coding (who needs Github anyways)
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 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.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### HTML version declaration
|
|
|
|
|
|
Every website starts with this line of code for HTML
|
|
|
|
|
|
|
2023-10-10 18:30:11 +00:00
|
|
|
|
Start by typing this line in your program
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### Next is the Header!
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
2023-10-10 18:24:10 +00:00
|
|
|
|
```
|
2023-10-10 18:30:11 +00:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### Next is the Body!
|
|
|
|
|
|
|
2023-10-10 18:35:43 +00:00
|
|
|
|
```
|
2023-10-10 18:30:11 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
<title> This is the tile of my site!
|
2023-10-10 19:58:52 +00:00
|
|
|
|
</title>
|
2023-10-10 18:30:11 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
|
2023-10-10 18:35:43 +00:00
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
& This is where the text of a website goes
|
2023-10-10 20:19:55 +00:00
|
|
|
|
|
|
|
|
|
|
<img src= " .jpg">
|
2023-10-10 18:35:43 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
|
2023-10-10 18:30:11 +00:00
|
|
|
|
</html>
|
2023-10-10 18:35:43 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
2023-10-10 18:30:11 +00:00
|
|
|
|
|
|
|
|
|
|
---
|
2023-10-10 18:35:43 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Save this file as hello.html file
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Next
|
