Lesson plan

Topicmc76fe33c21e37de0_1528449000663_0Topic

Creating webpages with HTML language

Levelmc76fe33c21e37de0_1528449084556_0Level

Second

Core curriculummc76fe33c21e37de0_1528449076687_0Core curriculum

Grades VII‑VIII

II. Programming and solving problems by using the computer and other digital devices. Using computer applications, the student:

3) creates documents and presentations, including those in a cloud in order to solve problems and create papers from various fields (subjects), adjusts the format and the appearance of the research papers to their content/purpose and demonstrates the following skills:

e) creating a simple website including: text, images and hyperlinks, with the use of the basic commands of HTML.

III. Using the computer, digital devices and computer networks. The student:

2) develops the skill of using various devices for creating the electronic versions of texts, images, sounds, films and animations;

3) uses correctly the terminology related to computer science and technology.

Timingmc76fe33c21e37de0_1528449068082_0Timing

45 minutes

General objectivemc76fe33c21e37de0_1528449523725_0General objective

Understanding the principles of website design.

Specific objectivesmc76fe33c21e37de0_1528449552113_0Specific objectives

1. Understanding the rules for website design.

Learning outcomesmc76fe33c21e37de0_1528450430307_0Learning outcomes

The student:

- knows the rules of website design.

Methodsmc76fe33c21e37de0_1528449534267_0Methods

1. Flipped classroom.

2. Disscussion.

Forms of workmc76fe33c21e37de0_1528449514617_0Forms of work

1. Indvidual student’s activity.

2. Class work.

Lesson stages

Introductionmc76fe33c21e37de0_1528450127855_0Introduction

Students answer introductory questions:

1. What is HTML?
2. Do you know where to display the source of the page you are looking at? i.e. a set of commands written the author of the page that the browser performs.
3. Can the main assumptions of the website be written in a notepad?
4. What to do if there are no Polish letters in HTML documents?mc76fe33c21e37de0_1527752256679_01. What is HTML?
2. Do you know where to display the source of the page you are looking at? i.e. a set of commands written the author of the page that the browser performs.
3. Can the main assumptions of the website be written in a notepad?
4. What to do if there are no Polish letters in HTML documents?

Proceduremc76fe33c21e37de0_1528446435040_0Procedure

Task 1

Students read the text and then, based on the information contained therein, perform the first simple HTML website

Web pages are created in HTML (Hyper Text Markup Language).

What is HTML?

It is a hypertext markup language, meaning more understandable a computer language used to communicate with a computer, which is used to describe web pages.

But first things first: hypertext is a text (content) connected loosely with links called hyperlinks. As it is in the Internet. The pages have references to each other so called links.

Now let's proceed to tags. Tags are phrases written in sharp brackets <>. As you open the page source, you will certainly notice a large number of commands saved in this way in tags.

Well, let's just explain the phrase „page description language”. To describe a website is to name its individual elements. In HTML, we will separately mark the headerheaderheader text, the page title and the page contentpage contentpage content. However, it is not enough to say what is the header and what is the content of the page, you still have to specify how they should look like, for this purpose the CSS style sheet language is used (CSS - Cascading Style Sheets). But what is it? These are external files that contain information about the formatting of the website. There are properties such as the placement of elements on the page, the colour and size of the font, the background colour etc.

The html language defines what individual elements of the website are, while the CSS language defines the appearance of individual elements.

Let's get back to tags. There is a certain pattern in the page source codesource codesource code elements - the source code consists of tags enclosed in <> characters, whereby the beginning of the source code fragment begins with the symbol <TAG> and ends with a similar symbol, however with the added sign - a vertical line tilted to the right, the so‑called forward slash /. Thus, the closing tagtagtag takes the form: </TAG>. On this basis, the web browserweb browserweb browser interprets the code sent from the server by finding the beginning and the end of the fragment and displaying it accordingly. The tags come most often in pairs.

You can create a web page source code in a regular text editor (e.g. notepad, Microsoft Word, Libre Office) as well as in a specialized HTML editor (e.g. in free HTML‑kit). When saving the page source code file, remember to give it the extensionextensionextension .htm or .html - then the browser will correctly recognize the file type and display the page.

The page source code should start with the <HTML> tag and end with </HTML>.

This is information for the browser with what type of document it has to deal with. The web browserweb browserweb browser recognizes <HTML> tag as a web page and can display it on our screen. To make it work, it's enough to click on the saved document with the right mouse button and choose the „open with” command and then select the browser in which you want to display the page.

Be sure to place the closing tag at the end of the document. And so the first line of the source codesource codesource code will look like:

<HTML>

And the last one:

</HTML> which means the end of the document.

All commands must be found between these two tags.

To increase the readability of the document, all tags are placed in new lines of source code. It only matters for the person who writes or reads the page source code, it does not matter for the browser.

Now it's time for the headerheaderheader of our web page. To provide information to the browser that we want to write a header, the <head> tagtagtag is used. This tag must be placed between <html> tags both in the opening and closing ones. We use it to describe the settings of the html document. We write information about, among others, what language we will be used (e.g. Polish or English).

Because the <HTML> tag was used first and the <head> tag was second and there was no closing tag </HTML> between them, we are saying that the <html> tag is the parent of the <head> tag and vice versa, that the latter is the child of the former. Now that we've set the page parameters, it's time to put content on it. For this purpose, we will use another important tag: <BODY> (the body - the main part of the document). Therefore, between the <BODY> and </BODY> tags we put what we want to be displayed in the browser.

So let's write this piece of source codesource codesource code in a notepad, the structure of such a file should look like this:

<HTML>
<HEAD>
... the content of the page headerheaderheader ...
</HEAD>
<BODY>
... page contentpage contentpage content ...
</BODY>
</HTML>

There are diacriticsdiacriticsdiacritics in Polish language. As a reminder, these are graphic signs used in alphabets placed above, below, next to or inside letters, changing its articulation and creating a new letter. In Polish, there are nine letters created using diacritics. These include: ą, ć, ę, ł, ń, ó, ś, ź, ż. In order for our website to display them properly, the web browserweb browserweb browser should be informed that we want to use them. The <meta charset = „utf‑8”> or <meta charset = „windows‑1250”> tagtagtag is used for this.

To check whether the browser correctly displays Polish letters, enter the grammatically correct, but meaningless sentence, in which all Polish diacriticsdiacriticsdiacritics are displayed: „ Zażółć gęślą jaźń.”

One of the most important tags is <title> which specifies the title of the page. It should be placed in the headerheaderheader section. For example, the title may look like this:

<TITLE> My first WWW page </TITLE>

However, in the body of the page (that is, after the <body> tag) the basic tag is the paragraph tag , which is a fragment of the text starting from the new line.

If we put this code in the page contentpage contentpage content section of the page:

This is my first website. It looks quite nice.

we will get this line in the browser window:

This is my first website. It looks quite nice.

If we want both sentences to be displayed one below the other, the code would look like this:

This is my first website. It looks quite nice.

The whole source codesource codesource code of our first page would look like this:

<HTML>
<HEAD>
<TITLE> My first WWW page </TITLE>
</HEAD>
<BODY>
 This is my first website. It looks quite nice. 
</BODY>
</HTML>

This is not very difficult, right? After learning the principles of constructing the source code, you need to learn about other tags that will allow you to insert more complex elements on the page and decide on their colour, size or style. About this in the next lesson.
Watch the slideshow now, where you'll see the steps to create the page source code:mc76fe33c21e37de0_1527752263647_0This is not very difficult, right? After learning the principles of constructing the source code, you need to learn about other tags that will allow you to insert more complex elements on the page and decide on their colour, size or style. About this in the next lesson.
Watch the slideshow now, where you'll see the steps to create the page source code:

[Slideshow]

Lesson summarymc76fe33c21e37de0_1528450119332_0Lesson summary

Remember:

In HTML, almost every command must start and end with a tag. The opening and closing tag differs by the „/” sign. Each tagtagtag must be enclosed in two inequality symbols <>.

The importance of basic tags in HTML:

<HTML> </HTML> - the whole designed page is between them;

<HEAD> </HEAD> - the content of the headerheaderheader is placed between them;

<BODY> </BODY> - the page contentpage contentpage content is placed between them;

<TITLE> </TITLE> - the title of the page is placed between them;

- between them the content of one paragraph is placed.

Selected words and expressions used in the lesson plan

creating webpagecreating webpagecreating webpage

diacriticsdiacriticsdiacritics

extensionextensionextension

external fileexternal fileexternal file

headerheaderheader

line of source codeline of source codeline of source code

page contentpage contentpage content

source codesource codesource code

tagtagtag

web browserweb browserweb browser

mc76fe33c21e37de0_1527752263647_0

mc76fe33c21e37de0_1527752256679_0

mc76fe33c21e37de0_1528449000663_0

mc76fe33c21e37de0_1528449084556_0

mc76fe33c21e37de0_1528449076687_0

mc76fe33c21e37de0_1528449068082_0

mc76fe33c21e37de0_1528449523725_0

mc76fe33c21e37de0_1528449552113_0

mc76fe33c21e37de0_1528450430307_0

mc76fe33c21e37de0_1528449534267_0

mc76fe33c21e37de0_1528449514617_0

mc76fe33c21e37de0_1528450135461_0

mc76fe33c21e37de0_1528450127855_0

mc76fe33c21e37de0_1528446435040_0

mc76fe33c21e37de0_1528450119332_0

header1

page content1

source code1

tag1

web browser1

extension1

diacritics1

creating webpage1

external file1

line of source code1

Scenariusz

Topicmc76fe33c21e37de0_1528449000663_0Topic

Lesson stages

Selected words and expressions used in the lesson plan