HTML coding: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 20: | Line 20: | ||
<syntaxhighlight lang="html" line> | <syntaxhighlight lang="html" line> | ||
<h1>Hello World</h1> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
* The '''h1''' tag is called | * The '''h1''' tag is called an h1 '''opening tag'''. Angular brakets now shown. | ||
* The '''/h1''' tag is called | * 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. | * Most other tags using in HTML follow the same pattern or syntax. | ||
| Line 36: | Line 36: | ||
[[File:Screen Shot 2021-12-20 at 6.58.39 am.png]] | [[File:Screen Shot 2021-12-20 at 6.58.39 am.png]] | ||
* 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. | |||
[[File:Screen Shot 2021-12-20 at 7.06.15 am.png]] | |||
* 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) | |||
[[File:Screen Shot 2021-12-20 at 7.08.53 am.png]] | |||
* Now enter the following code in the index.html document. | |||
<syntaxhighlight lang="html" line> | |||
<h1>Botanica Park Lake</h1> | |||
</syntaxhighlight> | |||
<<nowiki />pre> <h1> <pre> | |||
You make have noticed, that as soon as you started typing the <h1> Heading Tag, Geany added the </h1> closing tag. | |||
Revision as of 20:13, 19 December 2021
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
- Learning how to include links to other web sites in a HTML page
- Learn how to include images in a 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>
<pre>