HTML coding

Overview

• In this lesson we are going to code our first HTML web page. In future lessons you will also learn how to make your web page accessible to anyone on the internet.

Learning Objectives

• Learn how to create your first web page in HTML
• Learn about basic HTML structure
• Learn how to include links to other web sites in a HTML page
• Learn how to include images in an HTML page.

Create your first HTML page

• HTML is short for HyperText Markup Language.
• It is one of several web browser languages used to support the World Wide Web.
• At a basic level, it allows you to code a web page so that it can be interpreted and displayed correctly by a Web Browser.

• One of the important constructs in HTML is the Tag.
• A tag is identified by the use of the angled brackets, < and >.
• They always come in pairs with the < tag followed by the > tag.
• With the h1 tag, we need two special pairs. A line of code would look like this.

‎

<h1>Hello World</h1>
‎

• The h1 tag is called an h1 opening tag. Angular brakets now shown.
• The /h1 tag is called an h1 closing tag (identified by the addition of a / forward slash symbol.
• Most other tags using in HTML follow the same pattern or syntax.

Writing out first h1 heading tag in HTML

• The easiest HTML code we can write contains a single h1 heading tag.
• This will allow us to test our HTML code in a Web Browser.
• To do this we are going to use a new program on the Raspberry Pi called Geany.

• Click on Programming > Geany.

• Geany will open to an empty untitled document.
• Go to the File drop down menu and select Save As.
• A window will open showing the directories and files in the pi user home directory.

• Click on the techschool directory (or make a techschool directory is none exists).
• To make the directory enter the commands in the Terminal
  • cd ~
  • mkdir techschool
• Save the untitled document as index.html (either press the Enter key or click the Save button at the bottom)

• Now enter the following code in the index.html document.

‎

<h1>Botanica Park Lake</h1>
‎

You make have noticed, that as soon as you started typing the h1 Heading Tag, Geany adds the /h1 closing tag automatically.

• Now save your document, either by clicking on File > Save from the drop-down menu, or by clicking on the Green Arrow Pointing Down button in the tool menu.

Viewing your index.html file in a Web Browser

• Open the File Manager and navigate to the techschool directory.
• You should be able to see your new filed named index.html

• Right mouse button click on index.html and select Chromium Web Browser.
• This should trigger the Chromium Web Browser on your Raspberry Pi to open.

• You should see the h1 heading appear in your Browser.
• Congratulations on writing your first HTML document!

Adding more content to your html document

• You have learnt how to use the h1 Heading tag.
• There are six heading tags – h1 to h6.
• There are also other important tags that we will learn.

• Navigate back to the index.html document in Geany.
• One or two lines below the h1 heading tag add the following code.

‎

<h2>Replanting waterways</h2>
‎

• Save your document.
• Navigate back to the Chromium Web Browser.
• To make the changes take effect you need to hover over and click a little button called Reload this page.

• Once you reload the page the new changes should take effect and you should see both your h1 and h2 headings in the Browser.

Adding a paragraph tag to a HTML document

• Another very common tag used in web pages is the paragraph tag.
• Navigate back to Geany.
• Enter the following code one or two lines below the h2 Heading tag.

‎

<p>This is a paragraph in HTML.
We are all learning HTML together.
</p>
‎

• Save your document.
• Navigate to your Brower and click Reload to see the changes.

Basic HTML structure

• HTML documents must adhere to a well-defined structure so that Web Browsers can interpret them correctly.
• Here is a basic example of how a HTML document should be structured.
• You can also indent the code (using the Tab key or spaces) to make the code more readable.

• Enter the following code into your index.html file as presented.

• Let’s try to understand all the code in this new basic structure.
  • !DOCYTPE html - Declares to the web browser that this code is HTML
  • html - Also a declaration that this document is html
  • head - Each HTML document has a <head> and a <body> tag.
  • title - Information here appears in the Browser page Tab to identify the page.
  • /head - Close of the head tag
  • body - Start of the Body tag. Information here appears in the Browser window.
  • /body - Close the body tag.
  • /html - End of the HTML document.

• Now navigate back to the Browser and Reload. You should see the following.
• Notice also that the web page Tab now shows the title Botanica Park Lake.

Linking to other HTML documents

• The World Wide Web was invented in 1989 by the British scientist Tim Berners-Lee.
• His idea was to create a computing platform that would help scientists around the world share information.
• He wrote the first code for both the web server and the web browser.
• He imagined that web documents would be able to contain links to other web document to help promote the sharing of information.
• What makes web pages truly interactive is that you can easily link to other web pages.
• This allows internet users to quickly find information.
• In HTML document we create links other web pages using the anchor Tag.

• In the index.html file in Geany add the following code below the paragraph tag.

‎

<a href=https://www.google.com.au>Google web site</a>
‎

• The anchor tag has several important components.
  • a - this indicated that we are going to link to another page using a hyperlink
  • href – is an additional attribute of the <a> tag and points to the destination. href is short for Hypertext REFerence. It includes the URL and a name for the site.
  • /a - closing tag

• Navigate back to the Browser to see the changes.
• If you click on the link it will replace the current page with the Google web page.
• By right mouse button clicking, you can choose to open the link in a new tab.

Adding Images to web pages

• Adding images to your web pages makes them more interesting.
• There are several ways to add images to HTML documents.
• In this example we will download a free image of a Rainbow Lorikeet.
• We are going to download a free image from Pixabay.
• We will store in on the Raspberry Pi so we can easily see it in our Web Brower.
• To do this we will use the img tag.

• In the Chromium web browser on the Raspberry Pi click on the + symbol to open a new Tab.
• In the search bar enter Pixabay.
• Click on https://pixabay.com

• In the Pixabay search bar, type in Rainbow Lorikeet and press Enter.
• The search reveals approximately 135 Free Images of Rainbow Lorikeet.
• Click on the image of the two Rainbow Lorikeets paired together.

• This will open a new window just showing the two Rainbow Lorikeets.
• Click on the Green button on the right named Free Download.

• The button will present a range of image resolutions.
• Select the lowest resolution – 640 x 426 and then click on the green Download button.
• This will download a copy of the image to the Downloads directory on the Raspberry Pi.

• On the Raspberry Pi use the File Manager to navigate to the Downloads directory.
• You should see a file names rainbow-lorikeet-686100_640.jpg

• Right mouse button on the file and select Rename

• Rename the file to rainbow-lorikeet.jpg (all lower case, no spaces)

• Now right mouse button click on the file again, and select Copy.

• Once the file is copied, navigate back to the techschool directory and paste the file (use the right mouse button function).

Linking images to an HTML page

• Navigate to Geany.
• Below the anchor tag enter the following code.

‎

<img src=rainbox-lorikeet.jpg alt=”Rainbox Lorikeet” width=”50%” />
‎

• They key components of the image tag are:
  • img – image tag
  • src – attribute of the img tag that specifies the path to the image
  • alt – attribute specifies alternate text for the image if the image cannot be displayed
  • width – attribute specifies how much of the screen width the image will occupy.

• Note that the image tag does not have a closing tag.

• Go to your Browser, Reload the page.
• The image of the Rainbow Lorikeets do appear, however the page doesn’t look nice. We need to shift the image further down the page.

• To shift the image down a little we will use the break tag.
• Add the break tag just above the image tag.

• And reload your web page.
• Congratulations, you can now display images in your web page.