Follow these steps to make your first web page:
Web Design projects mean you will be working with lots of files.
You will be making .html files which are web pages.
You will also be saving images of different formats eg .jpg, .png, .bmp
So, first, let's set up a project folder for Focus 1. Create the following folder structure:
You will be doing a lot of typing!
Choose a good text editor to type your HTML script.
Some options are:
Windows | Mac |
---|---|
Notepad++ | Brackets |
Create a new file in your text editor.
Save the empty file as focus1.html in your focus1 project folder.
Check - use your File Explorer to look at your file in your folder. If it has a browser icon, you have probably been successful!
In your focus1.html file, type the basic structure of every web page on planet Earth:
Your webpage content eg text, images, videos, go into the body section of your .html file
Let's start with text.
Type the following text into the body section of your webpage:
hello
hello
hello
hello
Save your file and open it in a web browser. Does it look the same?
Tags help the browser to understand how to place content into a webpage.
There are a few text tags in HTML:
Edit your page as follows:
Save your file and refresh your browser window.
Can you see the difference between the different tags. For example, wheat is the difference between the h1 tag and the h3 or p tags?
Most tags come in pairs! eg:
The first tag opens the pair and the second tag closes the pair.
I wonder what would happen if we forgot to close the tag pair?
Introduce yourself by editng your focus1.html file.
Create a webpage that will tell the world:
Use different tags in your page eg you could make a heading and/or subheadings.
If you have time, can you also figure out how to:
Submit your project folder as instructed by your tutor.