2.1 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 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..
Step 1. Go to your favorite website
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:
- 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 !