153 lines
1.9 KiB
Markdown
153 lines
1.9 KiB
Markdown
|
||
### Week 3: Coding in HTML! Let's make a Website
|
||
|
||
---
|
||
|
||
Greetings from Developer land. Last week we learned what real programmers use to upload their code for others to collaborate. Using **Github.ccom**
|
||
|
||
|
||
|
||
|
||
Today we are going to start programming!
|
||
|
||
|
||
---
|
||
|
||
### 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, game-making, scripting, etc..
|
||
|
||
---
|
||
|
||
## Step 1. Open NotePad
|
||
|
||
|
||
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.
|
||
|
||
---
|
||
|
||
### 1. 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>
|
||
```
|
||
|
||
---
|
||
|
||
### 2. Next is the Header!
|
||
|
||
```
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
<head>
|
||
|
||
</head>
|
||
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
### 3. Next is the Body!
|
||
|
||
```
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
<head>
|
||
|
||
</head>
|
||
|
||
<title> This is the tile of my site!
|
||
</title>
|
||
<body>
|
||
|
||
& This is where the text of a website goes
|
||
|
||
<img src= " .jpg">
|
||
</body>
|
||
|
||
</html>
|
||
```
|
||
|
||
|
||
---
|
||
|
||
|
||
## Save this file as hello.html file
|
||
|
||
& drag it to your browser window.
|
||
Ta-da!! You have just launched your web design...but there's only text in it
|
||
|
||
|
||
---
|
||
|
||
|
||
## Give it Pizzazz
|
||
|
||
|
||
Change the background color in the `body` tag.
|
||
|
||
```
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<body style="background-color:powderblue;">
|
||
```
|
||
|
||
|
||
Change the size of the text with the `h` tags & `p` tags
|
||
```
|
||
|
||
<h1>This is a heading</h1>
|
||
<p>This is a paragraph.</p>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
```
|
||
|
||
|
||
|
||
Add an image from the internet with:
|
||
|
||
```
|
||
<img src= "imagehere.jpg"
|
||
```
|
||
|
||
Make sure that it is a .jpg or a .png file !
|
||
|