Learn to Program @ Home
Day 5 - HTML
When you Click on a link...
When you click on a link to go to a web page, what happens?
Your request “https://www.gameswithcode.com/summer2020” finds its way to a server. The server sends back a stream of stuff.
You can see the stuff it sends
The server sends the page in HTML
A lot of this is hard to read, but all of the page content is in there.
HTML
Note that the html tags come in pairs. <html> and </html> surround the whole thing. This is broken up into two parts. <head> and </head> surround the first part, and <body> and </body> surround the second part. Nothing is in the head part yet - the body part has two things in it, a header and a (small) paragraph.
Organize your Files
Make a folder. Name it “website”. Inside that folder, make a file called “index.html”. Put the content on the last slide in that file.
To See Your Website
In the terminal, use “cd website” to ‘move’ into the website folder. Then type “http-server”. Click on the link and choose either “open” or “open in preview”. Then you’ll need to click the index.html file to see what it looks like in a web browser.
Learn More
Links
You can link to pages inside your website, and outside your website. To link to pages outside your website, use the entire address, starting with http. A link to an outside page looks like this:
Local Links
If you have more than one page in a folder, you can link between them. Say you have a page called “index.html”, and one called “page2.html”. The link would look like this.
Uploading Images
You can upload images to the IDE. You might find images online and download them, or you might take them yourself.
Make sure you move them to the website folder
Images
Just like you can link to pages outside your site or inside your site, you can link to images outside or inside your site. To add images to your site, you can use the
Image tags have no end tag. Before I added the width attribute, the picture (from my phone) was too big and wouldn’t load.