1.9 KiB
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
!
- 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:
- 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 !