Lesson plan

Topicm3619ab7bc5c174b9_1528449000663_0Topic

Basic tags and their usage

Levelm3619ab7bc5c174b9_1528449084556_0Level

Second

Core curriculumm3619ab7bc5c174b9_1528449076687_0Core curriculum

Grades VII‑VIII

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

2) 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.

Timingm3619ab7bc5c174b9_1528449068082_0Timing

45 minutes

General objectivem3619ab7bc5c174b9_1528449523725_0General objective

Understanding the basic tags used in the html code when writing websites.

Specific objectivesm3619ab7bc5c174b9_1528449552113_0Specific objectives

1. Understanding the rules for website design.

2. Understanding the basic tags used in the html code.

Learning outcomesm3619ab7bc5c174b9_1528450430307_0Learning outcomes

The student:

- knows the rules of website design,

- can write a simple webpage code in html language.

Methodsm3619ab7bc5c174b9_1528449534267_0Methods

1. Work with computer.

2. Discussion.

Forms of workm3619ab7bc5c174b9_1528449514617_0Forms of work

1. Student's own work with a computer.

Lesson stages

Introductionm3619ab7bc5c174b9_1528450127855_0Introduction

Students answer introductory questions:

1. How to make text bold on the webpage using HTML?

2. How to tilt text on a webpage using HTML?

3. How to enlarge text on a webpage using HTML?

4. How to make text centred on a webpage using HTML?

Procedurem3619ab7bc5c174b9_1528446435040_0Procedure

Task 1

Students read the text, write all tags used in the html language appearing in the text and on the slides.

You already know the basic structure of the HTML code of a webpage. It's time to get to know the next tags that will allow you to place other, more complex elements on the page. Here are the most important ones.
In the page header section, we place <META> tags that define the basic parameters of the page. These are tags for which we do not use a closing tag.m3619ab7bc5c174b9_1527752263647_0You already know the basic structure of the HTML code of a webpage. It's time to get to know the next tags that will allow you to place other, more complex elements on the page. Here are the most important ones.
In the page header section, we place <META> tags that define the basic parameters of the page. These are tags for which we do not use a closing tag.

it is a tag that informs the browser about the encoding of Polish characters we chose. The most frequently used ones are windows‑1250, iso‑8859‑2 and UTF‑8. This is an important tag, because if the page source code is written using a different set of characters than indicated in the tag, the Polish diacritics will be displayed incorrectly.m3619ab7bc5c174b9_1527752256679_0it is a tag that informs the browser about the encoding of Polish characters we chose. The most frequently used ones are windows‑1250, iso‑8859‑2 and UTF‑8. This is an important tag, because if the page source code is written using a different set of characters than indicated in the tag, the Polish diacritics will be displayed incorrectly.

TagtagTag indicating keywords that determine the basic content of our website and helping to find our site in the browser. This is a significant tag if we want our site to be properly searched.

A tag that displays a „description” of a page after it has been found by the search engine. Internet search engines also analyse it in order to catalogue it better.

TagtagTag indicating who is the author of the page.

This tag informs what editor we used to create our page.

The tag informs in what language the page was created.

In the content section of the page, we can use the following tags:

TEXT:

<P></P> - a paragraphparagraphparagraph that is a text fragment beginning with a new line

<BR> - go to the next row. This tag occurs individually. Browser interpreting the html code omits characters such as enter, tabulator and more than one space - so‑called white spacewhite spacewhite space.

Probably you will ask what if you want to separate words with more than one space?

In such cases, we use the   without the use of less than and greater than symbols.

<B></B> - bold text

<I></I> - lean text (so‑called italic)

<U></U> - underlined text

<FONT></FONT> - defining the font style of the text, wherein the style is determined by an additional parameter inside the tag

<Font color=”colour”></FONT> - as colour we use English‑language names such as „white”, „black”, etc., but it is better to use the colour code in the hexadecimal notation (colour code tables you will find without problems on the Internet under the phrase „HTML colour codes”)

<Font size=”size”></FONT> - where the size is given in the so‑called „points” and it takes numerical values 2, 3, 4, 5, etc.

Example: displaying text in red and font size 3pts.

GRAPHIC:

To insert a picture in the body of the page, use the tagtagtag:

<IMG SRC=”image filename with extension”> - This tag also does not have a closing tag. From a practical point of view (smaller size = faster page loading), it is appropriate that these are JPEG or PNG files.

LINKS, expertly called hypertext links

Link, it is a text or drawing highlighted in a way, that after clicking on it we will be transferred to another webpage. The following tag serves this purpose:

Example:

<A HREF=http://google.pl> Go to Google </A>

The page will display the text „Go to Google”, and when you click on this text, the Google page will be loaded to your browser window.

TABLES:

We can also put tables on the page, and with proper skill, use these tags to divide the entire page into the required layout.

We use tables to properly separate individual parts of the page.

The table definition consists of three basic tags: <TABLE></TABLE> denoting the beginning and end of the page, <TR></TR> defining the beginning and end of the line, and <TD></TD> defining the beginning and end of the column in the row.

So a table consisting of only one cell will be encoded like this: <TABLE><TR><TD>the contents of one cell</TD></TR></TABLE>.

However, a table consisting of two lines and two columns:

<TABLE>

<TR>

<TD>row 1 column 1</TD>

<TD>row 1 column 2</TD>

</TR>

<TR>

<TD>row 2 column 1</TD>

<TD>row 2 column 2</TD>

</TR>

</TABLE>

Of course, there are many many more tags than described here. You can get to know them through HTML tags tables, HTML language courses that you can find on the Internet or in an IT bookstore.

And now, in addition, you'll find information about a few of them in the slideshow:

[Slideshow]

Task 2

Combine in pairs:

[Table 1]

Task 3

Take a newspaper and rewrite the text of one of articles to create a separate webpage. Use html language and known tags.

Lesson summarym3619ab7bc5c174b9_1528450119332_0Lesson summary

A few html code tags worth remembering:

- <Font color = „colour”> font colour,

- <Font size = „size”> font size,

- <h1> - <h6> headings,

- <p> paragraphparagraphparagraph,

- <br> new line,

- & Nbsp; special character for non‑breakable space,

- <hr> horizontal line separating the text,

- <i> italic text,

- <b> bold text,

- <u> underline text,

- <mark> highlighted text,

- <small> reduction of the text size as many times as the tagtagtag is used,

- <table> table,

- <td> column in the table,

- <tr> row in the table,

- <A HREF=”address_ hyperlinks”> link,

- <IMG SRC = „image filename with extension”> insert image.

Selected words and expressions used in the lesson plan

creating webpagescreating webpagescreating webpages

encodingencodingencoding

headingheadingheading

italicsitalicsitalics

non‑breaking spacenon‑breaking spacenon‑breaking space

paragraphparagraphparagraph

tabtabtab

tagtagtag

web browserweb browserweb browser

white spacewhite spacewhite space

m3619ab7bc5c174b9_1527752263647_0

m3619ab7bc5c174b9_1527752256679_0

m3619ab7bc5c174b9_1528449000663_0

m3619ab7bc5c174b9_1528449084556_0

m3619ab7bc5c174b9_1528449076687_0

m3619ab7bc5c174b9_1528449068082_0

m3619ab7bc5c174b9_1528449523725_0

m3619ab7bc5c174b9_1528449552113_0

m3619ab7bc5c174b9_1528450430307_0

m3619ab7bc5c174b9_1528449534267_0

m3619ab7bc5c174b9_1528449514617_0

m3619ab7bc5c174b9_1528450135461_0

m3619ab7bc5c174b9_1528450127855_0

m3619ab7bc5c174b9_1528446435040_0

m3619ab7bc5c174b9_1528450119332_0

tag1

paragraph1

white space1

creating webpages1

encoding1

heading1

italics1

non‑breaking space1

tab1

web browser1

Basic tags and their usage

Scenariusz

Topicm3619ab7bc5c174b9_1528449000663_0Topic

Lesson stages

Selected words and expressions used in the lesson plan