This week, we’re going to do a bit of web development!
(Skip to the challenge)
If you aren’t familiar with HTML and CSS, don’t worry we’re going to walk you through the steps by creating a simple Hello World page:
1) Copy the following HTML and CSS code and paste it into the white area on the left side of this website:
<html>
<head>
<style>
p {
color:blue;
text-align:center
}
body {
background-color: turquoise;
}
h1 {
text-align:center
}
</style>
</head>
<body>
<h1> Hello World! </h1>
<p> My name is [erase this and write your name here] </p>
<p> Welcome to my little corner!</p>
</body>
</html>
2) Click “See Result” and watch your webpage appear on the right.
Congratulations, you have made your first web page!
Explanation:
As you might have noticed, we are using words like “body” and “head”, which are surrounded by these characters < >. These are called tags and each tag has an opening and closing tag. An opening tag is defined as follows: <body> while the closing tag has the same text inside the < >, but with a backslash in front of it: </body>
Opening tag: <body>
Closing tag: </body>
A tag is used in HTML to define different parts of the website page. For example, the body tag contains all the content of the website.
<body>
<h1> Hello World! </h1>
<p> My name is [erase this and write your name here] </p>
<p> Welcome to my little corner! </p>
</body>
On the other hand, you use CSS to define how the parts are displayed on screen. Do you want to make your background red, blue, or green? CSS lets you “style” your webpage to make it look the way you want it to. You usually write CSS code inside the style tags.
To understand this better, try changing the body’s background-color of body from turquoise to red:
<style>
body {
background-color: red;
}
</style>
This code means: set the background color of the body tag to red.
Try changing some other peice of code to see what it does!
If you still don’t understand how HTML and CSS work together, watch the following tutorials to have a better understanding:
-
Take the code provided above and add onto it. Mess around with the different HTML and CSS code and try to come with something more personal and unique.
-
Remember, google is your best friend when it comes to independent learning and if you still don’t understand something, never be afraid to ask!
-
Please note: You can save your code into Notepad (on Windows) or Textedit (on Mac) with the following name: YourTitle.html. Make sure to give the file the .html extension. You can test your web page locally (on your computer) by opening the .html file using a web browser.
-
If you want to learn more about HTML and CSS W3Schools is a good place to start.
-
Once you’re satisfied with your webpage, send the html file(s) to eutechsociety@effat.edu.sa!