v3 html workbooken - technocamps.com...stands for. what does html look like? ... pro ram example and...

HTML Workbook

Learning Outcomes

In this workshop, we will be looking at programming in HTML learning about each of the different tags and how to use them effectively.

1. To learn what HTML is and what it is used for.

2. To understand that tags have different effects on text and be able to identify which tags correspond to which effects.

3. To use these tags to mark up a document to specific requirements.

Overview

Learning Outcomes

Attendee Prerequisites 1. No previous knowledge of HTML is required.

2

What is HTML?

In your own words write what you think HTML is and its use: ________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

What is HTML?

HTML or H______T_____M________L_________, can be thought of a

programming language. It is used to _______________________________________

__________________________________. It is the foundation of almost any page

you visit on your __________________. HTML describes the structure of web

pages using markup. Mark up languages are designed for the _______________

_________________________________________________________________.

HTML elements (or tags) are the building blocks of HTML pages.

HTML ______ label pieces of content such as “heading”, “paragraph”, “table”,

and so on.

_________________ do not display the HTML tags, but use them to render the

content of the page.

Fill The Blanks

3

My First HTML

My First HTML:My First HTML

4

Anchor

My First HTML:Anchor

5

Tags and Uses

In your own words write down what you think each tag does and when they are used:

Tags and Uses

6

Tag Levels

For each of the tags, group the tags according to their hierarchical order:

Tag Levels

Tier 3Tier 0 Tier 1 Tier 2

Tier 3Tier 0 Tier 1 Tier 2

7

Image

<img src=“Logo.jpg” alt=“Logo” width=“1200” height=“300”>

Image

<a href=“https://www.technocamps.com"> <img src=“Logo.jpg” alt=“Link to website” width=“1200” height=“300” border=“”> </a>

Image as a link

8

https://www.technocamps.com

https://www.technocamps.com

List

List

9

Table

Table

10

Match Up

Using the HTML tags on the right, match up each tag with its corresponding output. Note: some tags may have been used twice.

<p> <hr> <b> <i> <center> <h6>

<h1> <tr> <td>

Match Up

11

HTML

Workshop Schedule 1

Workshop Schedule

Introduction - 10 minutes

Learning Outcomes 2What is HTML? 4

Ask for answers from students to see what they think: • What is HTML, what does it stand for and what it is used for?• What are HTML tags, does any one know?

Content Overview 3

Content Overview

• Introduction

• What is HTML

My First HTML 5

My First HTML program:

6

Explain the HTML tags <head>, <title>, <body>:

The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles,

7

Headings: <h1> - <h6>

The <h1> to <h6> tags are used to define HTML headings. h1 defines the most important heading. h6 defines the least important heading.

8

Paragraphs: <p>

The <p> tag defines a paragraph in HTML. Browsers automatically add some space (margin) before and after each <p> element.

9

Comments: <!— —>

Commenting in HTML is done by surrounding the desired comments with “”.

My First HTMLHeadingsParagraphsComments 10Italic and Bold 11Centre-align 12Anchor 13Horizontal Rule 14Blockquote 15Images 16Images as a link

Italic: <i>

The <i> tag defines a part of text in an alternate voice or mood. The content of the <i> tag is usually displayed in italic.

1. Basic experience of HTML Programming.Attendee

Centre-align: <center>

The <center> tag is used to center-align text. Similar to that alignment function used in documents such as Microsoft word where the text is moved to the middle of the page or text box.

Anchor: <a>

The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside a document.

Horizontal Rule: <hr>

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is used to separate content (or define a change) in an

Blockquote: <blockquote>

The <blockquote> tag specifies a section that is quoted from another source. Browsers usually indent <blockquote> elements.

Images: <img>

The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt.

Images as a link

To link an image to another document, simply nest the <img> tag inside Anchor: <a> tags.

17Lists and List items

Unordered List: <ul>

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default.

18List Item

List item: <li>

List item: <li> The <li> tag defines a list item. The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

19Ordered list

Ordered list types: <ol type=“…”>

Ordered List: <ol type=“…”>, depending on the type changes the numbering of the list:

20Tables

Tables:<table>,<tr>,<th>,<td>

An HTML table is defined with the <table> tag. • Each table row is defined with the <tr> tag. • A table header is defined with the <th> tag.

HTML Document

Students are to use all the tags learned up until now to mark up the document below to specific requirements.

HTML Document

12

Workshop Schedule 1Learning Outcomes 2What is HTML? 4Content Overview 3My First HTML 56789My First HTMLHeadingsParagraphsComments 10Italic and Bold 11Centre-align 12Anchor 13Horizontal Rule 14Blockquote 15Images 16Images as a link 17Lists and List items 18List Item 19Ordered list 20TablesHTML Document 13

Workshop Schedule 1

Workshop Schedule


HTML Introduction - 10 Minutes

My First HTML Program - 20 minutes



Students are to fill in blanks in the workbook about what HTML is. This will help them remember what it is, what it does and what it stands for.

What does HTML look like?

Content Overview 3

Content Overview

• Introduction

• What is HTML

• My First HTML

• Headings, Paragraph,

My First HTML 5


6


The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more.The <title> element is required in an HTML document. The <title> tag is required in all HTML documents and it defines the title of the document. The <title> element:

7


The <h1> to <h6> tags are used to define HTML headings. h1 defines the most important heading. h6 defines the least important heading. Note: use h1 to h6 elements only for headings. Do not use them just to make text bold or big. Use other tags for that.

Headings program example and output:

8

Paragraphs: <p>


Program Example:

9



As you can see the comments are not seen in the output page or when the .html file is opened through a browser.


Italic: <i>


Program Example: Preparation

1. Ensure all computers have a text editor already installed and ready to be used: either Notepad++ for Windows or textWrangler for MacOS.

2. Print out HTML workbooks, one for each student attending workshop.

3. Each student will need a pen or pencil for writing answers and making notes and flowcharts.



Program Example:

Anchor: <a>


Anchor program example and output:


The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is used to separate content (or define a change) in an HTML page.

Program Example:



Program Example:

Images: <img>


The src attribute or the source of the image tag in this example is the filename of the image: “Technocamps Logo.jpg”. The alt attribute is the alternative text that will display when the image is unavailable or takes too long to appear.

Images as a link


As you can see in the program example below the <img src= …..> line, in line 8 is contained inside the Anchor: <a> tag. This allows the image to have the “href” property and therefore when the image is clicked the website link activates..




Ordered List: <ol> An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will be marked with numbers by default.

18List Item

List item: <li>


Program Example:

19Ordered list



• Using type=“1” - The list will be numbered with numbers (default). • Using type=“A” - The list will be numbered with uppercase letters. • Using type=“a” - The list will be numbered with lowercase letters. • Using type=“I” - The list will be numbered with uppercase roman numbers.

20Tables


An HTML table is defined with the <table> tag. • Each table row is defined with the <tr> tag. • A table header is defined with the <th> tag. • By default, table headings are bold and centred. • A table data/cell is defined with the <td> tag.

Program Example and Output:

HTML Document 14

HTML Session Plan

Workshop Schedule 1

Workshop Schedule




First HTML Program Breakdown - 30 minutes

HTML Tags - 1 hour 20 minutes

HTML Document Task - 2 hours

Conclusion - 5 minutes

Post-Day Questionnaires - 5 minutes

Note: These are estimated times, these will vary between classes, schools etc. so times will need to be adjusted accordingly.





Starter – run the MyFirstHTML program– showing them what a basic HTML file looks like and how it is executed.

Discuss – • How HTML is thought of as a

programming language but it is not actually a true programming language as it does not process or manipulate data. It only defines layout.

• How HTML is a markup language designed for processing and presenting text.

• Inform them that almost all websites uses HTML as the foundation of the website.

• Lastly, HTML uses tags which are used to build the HTML page.

Content Overview 3

Content Overview

• Introduction

• What is HTML

• My First HTML


• Comments, Italic, Bold

• Anchor, Horizontal Rule, Blockquote

• Images

• Ordered and Unordered List, List item

• Tables

• Task

Content Description

Introduction:

Begin with introductions, and a brief explanation of the Technocamps programme, before handing out pre-day questionnaires to be filled out by the students and teacher.

What is HTML? – Students to write what they think HTML is and its uses in workbooks.

My First HTML 5


Program output:

Explain the tags used in the MyFirstHTML program - starting with <!DOCTYPE html> HTML tag:

<!DOCTYPE html> must be the very first thing in your HTML document, before the <html> tag. This tag is not an HTML tag. The <!DOCTYPE html> is an instruction to the web browser about what version of HTML the page is written, in this case it is the latest HTML version 5.

The <html> tag tells the browser that this is an HTML document. The <html> tag is the container for all other HTML elements (or tags) except for the <!DOCTYPE> tag.

6


The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more.The <title> element is required in an HTML document. The <title> tag is required in all HTML documents and it defines the title of the document. The <title> element:defines a title in the browser toolbar.provides a title for the page when it is added to favourites.displays a title for the page in search- engine results.

T h e < b o d y > t a g d e fi n e s t h e document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Pairwise Tags: Tags comes in pairs. A start tag and an end tag, this is necessary because it tells our HTML the beginning and the end of the effects of a tag. Anything in the middle of the tags will be within the effect of that tag. Notice, the “/” to differentiate from the start tag and end tag.

<html> … </html><head> … </head><title> … </title><body> … </body>… and<h1> … </h1>

7



Headings program example and output: Note: use the HTML program examples provided or create the files using the images provided below and run the program to show the students.

Discuss - • The different effects of different <h..> tags and

uses for each one.

Extra Activity - • Go on a website and show examples of different headings.

Important Note: Students are to create a new HTML file named ‘Headings” and are to program the code shown above. This will add to the number of HTML files students make and have a way to look back and revise how to use the tags learned here.

8

Paragraphs: <p>


Program Example:

Program output:

Discuss- • Highlight the fact that the use of <p> automatically adds a margin before

and after each tag.

Important Note: Again students are to create a new HTML file named appropriately i.e ‘Paragraphs’ and are to program the code shown above. This will add to the number of HTML files students make and have a way to look back and revise how to use the tags learnt here. Students are to do this for all HTML tags learnt.

9




The comments are only seen by those who are editing the HTML file.

Comments are used to notify others who will be using the HTML file of any important i n f o r m a t i o n regarding the HTML code.

Recal l the MyFirstHTML p r o g r a m code:

Discuss- • Recall the MyFirstHTML program: highlight the fact that the comments

are not visible in the output page (right image). However it is visible only in the code.

• Talk about the main use of comments and how they are to inform others who will use HTML file of any information necessary for others to know


Italic: <i>


Program Example:

Program output:

Discuss- • The purpose of using italic and give examples

Bold: <b> The <b> tag specifies bold text.

Program Example:

Program output:

Discuss- • The purpose of using bold and give examples

1. Basic experience of HTML Programming.


2. To design, write, test and refine HTML pages.

3. To understand that tags have different effects on text and be able to identify tags that have these effects.

Attendee Prerequisit

LearningOutcomes

Preparation






Program Example:

Program output:

Important note: the word ‘center’ is spelt the American way, not the British way which is spelt ‘centre’.

Remember: Again students are to create a new HTML file named appropriately and are to program the code shown above. This will add to the number of HTML files students make and have a way to look back and revise how to use the tags learned here. Students are to do this for all HTML tags learned.

Anchor: <a>



Important note: the < a href= “#C10”> (in line 8) combined with <a name= “C10 ”> (in line 39) can be used to create a shortcut to text in the web page e.g when the link ‘Goto Chapter 10’ is clicked the web page scrolls down as it jumps to Chapter 10. However because a low number of chapters are used, the ‘jump’ seems like a single scroll down the page. The <a href= “https://www….”> (in line 5) on its own is used to open a website via URL.



Program Example:

Program output:



Program Example:

Program output:

Images: <img>



Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

Program Example:

Program output:

Images as a link



Program Example:

Program output:





Program Example:

Program output:

18List Item

List item: <li>


Program Example:

Program output:

19Ordered list



• Using type=“1” - The list will be numbered with numbers (default). • Using type=“A” - The list will be numbered with uppercase letters. • Using type=“a” - The list will be numbered with lowercase letters. • Using type=“I” - The list will be numbered with uppercase roman numbers. • Using type=“i” - The list will be numbered with lowercase roman numbers.


20Tables




Create Your Own

Mathematics

Create Your Own

‣

‣

‣

‣

‣

‣

‣

‣

‣

‣

‣

‣

‣

What Topics to Include?

15

HTML Session Plan

Workshop Schedule 1

Workshop Schedule




First HTML Program Breakdown - 30 minutes

HTML Tags - 1 hour 20 minutes

HTML Document Task - 2 hours

Conclusion - 5 minutes

Post-Day Questionnaires - 5 minutes

Note: These are estimated times, these will vary between classes, schools etc. so times will need to be adjusted accordingly.





Starter – run the MyFirstHTML program– showing them what a basic HTML file looks like and how it is executed.

Discuss – • How HTML is thought of as a

programming language but it is not actually a true programming language as it does not process or manipulate data. It only defines layout.

• How HTML is a markup language designed for processing and presenting text.

• Inform them that almost all websites uses HTML as the foundation of the website.

• Lastly, HTML uses tags which are used to build the HTML page.

Content Overview 3

Content Overview

• Introduction

• What is HTML

• My First HTML


• Comments, Italic, Bold

• Anchor, Horizontal Rule, Blockquote

• Images

• Ordered and Unordered List, List item

• Tables

• Task

Content Description

Introduction:

Begin with introductions, and a brief explanation of the Technocamps programme, before handing out pre-day questionnaires to be filled out by the students and teacher.

What is HTML? – Students to write what they think HTML is and its uses in workbooks.

My First HTML 5


Program output:

Explain the tags used in the MyFirstHTML program - starting with <!DOCTYPE html> HTML tag:

<!DOCTYPE html> must be the very first thing in your HTML document, before the <html> tag. This tag is not an HTML tag. The <!DOCTYPE html> is an instruction to the web browser about what version of HTML the page is written, in this case it is the latest HTML version 5.

The <html> tag tells the browser that this is an HTML document. The <html> tag is the container for all other HTML elements (or tags) except for the <!DOCTYPE> tag.

6


The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more.The <title> element is required in an HTML document. The <title> tag is required in all HTML documents and it defines the title of the document. The <title> element:defines a title in the browser toolbar.provides a title for the page when it is added to favourites.displays a title for the page in search- engine results.

T h e < b o d y > t a g d e fi n e s t h e document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Pairwise Tags: Tags comes in pairs. A start tag and an end tag, this is necessary because it tells our HTML the beginning and the end of the effects of a tag. Anything in the middle of the tags will be within the effect of that tag. Notice, the “/” to differentiate from the start tag and end tag.

<html> … </html><head> … </head><title> … </title><body> … </body>… and<h1> … </h1>

7



Headings program example and output: Note: use the HTML program examples provided or create the files using the images provided below and run the program to show the students.

Discuss - • The different effects of different <h..> tags and

uses for each one.

Extra Activity - • Go on a website and show examples of different headings.

Important Note: Students are to create a new HTML file named ‘Headings” and are to program the code shown above. This will add to the number of HTML files students make and have a way to look back and revise how to use the tags learned here.

8

Paragraphs: <p>


Program Example:

Program output:

Discuss- • Highlight the fact that the use of <p> automatically adds a margin before

and after each tag.

Important Note: Again students are to create a new HTML file named appropriately i.e ‘Paragraphs’ and are to program the code shown above. This will add to the number of HTML files students make and have a way to look back and revise how to use the tags learnt here. Students are to do this for all HTML tags learnt.

9




The comments are only seen by those who are editing the HTML file.

Comments are used to notify others who will be using the HTML file of any important i n f o r m a t i o n regarding the HTML code.

Recal l the MyFirstHTML p r o g r a m code:

Discuss- • Recall the MyFirstHTML program: highlight the fact that the comments

are not visible in the output page (right image). However it is visible only in the code.

• Talk about the main use of comments and how they are to inform others who will use HTML file of any information necessary for others to know


Italic: <i>


Program Example:

Program output:

Discuss- • The purpose of using italic and give examples

Bold: <b> The <b> tag specifies bold text.

Program Example:

Program output:

Discuss- • The purpose of using bold and give examples

1. Basic experience of HTML Programming.


2. To design, write, test and refine HTML pages.

3. To understand that tags have different effects on text and be able to identify tags that have these effects.

Attendee Prerequisit

LearningOutcomes

Preparation






Program Example:

Program output:

Important note: the word ‘center’ is spelt the American way, not the British way which is spelt ‘centre’.

Remember: Again students are to create a new HTML file named appropriately and are to program the code shown above. This will add to the number of HTML files students make and have a way to look back and revise how to use the tags learned here. Students are to do this for all HTML tags learned.

Anchor: <a>



Important note: the < a href= “#C10”> (in line 8) combined with <a name= “C10 ”> (in line 39) can be used to create a shortcut to text in the web page e.g when the link ‘Goto Chapter 10’ is clicked the web page scrolls down as it jumps to Chapter 10. However because a low number of chapters are used, the ‘jump’ seems like a single scroll down the page. The <a href= “https://www….”> (in line 5) on its own is used to open a website via URL.



Program Example:

Program output:



Program Example:

Program output:

Images: <img>



Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

Program Example:

Program output:

Images as a link



Program Example:

Program output:





Program Example:

Program output:

18List Item

List item: <li>


Program Example:

Program output:

19Ordered list



• Using type=“1” - The list will be numbered with numbers (default). • Using type=“A” - The list will be numbered with uppercase letters. • Using type=“a” - The list will be numbered with lowercase letters. • Using type=“I” - The list will be numbered with uppercase roman numbers. • Using type=“i” - The list will be numbered with lowercase roman numbers.


20Tables




16Create your own

HTML Layout

v3 html workbooken - technocamps.com...stands for. what does html look like? ... pro ram example and...

Documents