Getting Started
For these projects we will be using a free service called Replit (replit.com)
- Firstly create an account (if you do not already have an account) and sign in.
Once you have signed in you will be on the homepage, this is the place where you can access all your projects (repls) and create new repls.
2. From the homepage click ” Create Repl ” and Choose “HTML, CSS, JS” and name the project “HTML Project”
Once you have created the project you should be on this page.
Creating a web page
In HTML there are different tags, although the ones you will be using today is “<p>”,”<body>” and “<h1>”.
In HTML you “start” an tag in Angle brackets (eg. ” <h1>”) and close it with the same tag but with a / before the element (eg. ” </h1> ” ).
In HTML an element is the content inside of the two tags (angle brackets) .
For example
< > This is a tag
<h1> h1 is an element
<h1>Hi</h1> “Hi” is content
- <!DOCTYPE html>: Declares the document type and version of HTML.
- <html>: The root element that encloses all HTML content.
- <head>: Contains meta-information about the page, like the title.
- <title>: Sets the title that appears in the browser’s tab.
- <body>: Holds the visible content of your page.
- <h1>: Defines a top-level heading.
- <p>: Creates a paragraph.
Firstly Delete the Highlighted Code
After deleting the code your webpage (Shown in webview) should now be blank.
Now you want to add the <p> tag inside of the <body> element and add content between the two tags. This will now show up in the webview after a refresh.
Now add a <h1> element inside the <p> element.
The text is now larger as you have enclosed the text in the the <h1> element ag which is a Heading instead of the <p> element which is a paragraph.
Now add another <p> element below the Heading and add some content
Adding Images
To add images to a web page you use the <img> element with the “src” attribute.
Lets add the HTML Logo to our website.
Select an image and copy the image address through the right Click menu
Then paste the link that was copied into the “src” attribute of the <img> element making sure it is in quote marks
After Refreshing you will have the image on your website!
Adding links
To add Links to your website you use the <a> element with the href attribute.
Lets add another page to our website called Page2.html
To do this click the new file icon and then create a file called page2.html
Once Created you will have an empty Document
Lets start by typing <!DOCTYPE html>
and then adding the <html> element below
Then lets add the Body element (which contains all the things you can see on a web page)
Then we’ll add a The image from before and remove it from index.html
Now lets make this page accessible from the main page by adding the <a> element on index.html
Now when we refresh we get a link to the second page which we can click.
Lets also add the <a> element to the page2.html so we can go back to index.html
Now we get a link we can click to go back to the main page.
This page may be updated over time.