2.3 KiB
Week 7: Coding with EXTRA! Javascript & CSS in websites
Welcome back to Developer land. So far we have learned:
- what real programmers use to upload their code for others to collaborate. Using Github.com
- HTML basics to make a website
- the tools we can use to edit HTML code in
Today we are going to start programming in CSS! This makes your website PRETTY!
Building Blocks of a Website
- 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..
Group Projects time for 25 minutes
Let me know if you'd like help with your website.
Step 1. Let's go to neocities.org
You'll see a lot of interesting website examples here.
Step 2. CSS 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:
- HTML version declaration
- Heading(s)
- 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
<!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 !