This activity aims to raise students’ awareness of the structure of a web page, and to bring code into the foreign language class (see Code literacy, what is it?).
This activity is an adaptation of Activity 21: HTML basics in Dudeney, Hockly & Pegrum (2013: 162-168) and of Keep Calm an activity from Mozilla Thimble (an online code editor).
Learning outcomes
On completion of this activity, students will be able to
- understand the structure of a web page
- recognise and change elements in coding languages
- have greater control over the format and appearance of some online communication
- reflect on code literacy and discuss its importance
Technology requirements
- One Internet-enabled teacher computer & data projector; student computers or mobile devices (one per student pair)
Procedure
Before class
Read all the information in the Before class section to ensure that you are familiar with the basics of HTML and CSS coding. Then follow the instructions given in the ‘In class’ section to create your own Keep Calm poster (example of a remix poster).
If you are not so familiar with the basics of HTML and CSS coding, please take some time to read the Code literacy, what is it? page as well as the ‘Before class’ section.
Depending on your students and class dynamics, you might also want to talk about these questions with your students before starting the activity.
- What is HTML? What is CSS?
HTML is a markup language used to create webpages.
CSS is a style sheet language used for describing the presentation of a document written in a markup language.
Watch this short video that explains what HTML is, and how it works with CSS and JavaScript:
As specified in this video, the latest updated version of HTML is called HTML5 (it offers new features compared to the previous versions of HTML). In 2017, all updated browsers (Chrome, Firefox etc.) support HTML5.
- Why should I learn this new language?
Learning how to code is like learning a foreign language. Why learn a foreign language?
As John McWorther provocatively puts it in this TEDTalk: Why should we learn a foreign language — other than if English happens to be foreign to one?
Should you learn code because it is tagged the world’s new Lingua Franca? Because it might be useful in your professional journey? Probably – but also because “if you want to become part of a culture, then whether or not the language channels the culture (…) if you want to imbibe the culture, you have to control to some degree the language that the culture happens to be conducted in. There’s no other way”. You might not want to participate in that culture, but you will be able to, and it can come in very handy. Of course, to be ‘fluent’ in this computer language requires a lot of work – this activity here is set to provide the basics (the “A1.1” of code).
- Debunking a few myths
- Learning to code is hard
Just like any foreign language, mastering it can definitely be quite tricky and becoming a professional will require a lot of work. However, getting to know the basics is within the reach of everybody.
- You need to be tech-savvy
There is no real prerequisite to learn code. You should be a bit familiar with using computers and using the web ‘passively’ (looking at websites and clicking on links). It is also a big advantage if you can read English as code is written in English (US spelling).
- Why conduct such a computer focused activity in the language classroom?
While there are many advantages in being code literate (see Code literacy, what is it?), there is a tendency to oppose foreign language learning to code learning (“politicians believe that students should be able to drop a traditional foreign language for coding, a language that many consider the lingua franca of the technology era”). However, between coding and foreign languages, do we really have to choose? (See the article Coding vs Foreign Languages: Do We Really Have to Choose?).
This activity is not meant to teach students how to code. Indeed there are thousands if not millions of online tutorials doing just that in easy and comprehensive steps. This activity aims to teach students basics on how the technology works, so they can understand the realm of possibility at their fingers.
This activity based on HTML also allows the teacher to use an approach for learning content through an additional language (foreign or second), thus teaching both the subject and the language (Content and language integrated learning – CLIL), “opening doors on languages for a broader range of learners”.
In class
There will probably be a few students in the class who already know the basics of HTML, and probably more. Don’t hesitate to ask for their contribution and to help fellow students.
- Introducing HTML
Ask participants to raise their hands if they know what HTML is. On your projector, go to any website and right-click to “View Source” to show the HTML code for that page. For eg., if you are using Google Chrome, go to the top right corner, click on the 3 dots, then on “More Tools”, and then “Developer Tools” (see image below).
If you have a student with HTML experience, ask them to see if they can point out a “Tag” in the code. Make sure to introduce these concepts before starting the activity:
- HTML stands for Hypertext Markup Language and is the standard language for web pages.
- HTML Tags tell your web browser how to translate the code into the website that Internet users will see. For instance, HTML tags can tell your browser when to turn text into a link, or how big to make the words appear on the page.
- An open tag (for eg. <title>) tells the webpage something is starting, while a closed tag (</title>), tells the webpage it has stopped. HTML is used to structure the webpage, to organise its content, so it is used to tell the webpage “this is a title”, “this a paragraph”, “this is a link” etc.
- Introducing CSS
Ask participants to raise their hands if they know what CSS is.
- CSS stands for Cascading Style Sheets, and it’s the code that styles your HTML, or tells it what it should look like.
- CSS properties can control things like color, font, borders, and more.
- Thimble Tour video
Project the Thimble tour video so all students can see, or have them watch on their computers. The Thimble tour video is available on thimble.mozilla.org, or below:
- Self-Guided Tutorial
Ask students to set up an account and to follow the tutorial (on the right, next to “Preview”) in order to modify the HTML code and well as the CSS code to come up with their own image; give them specific instructions, such as:
- changing words in the poster to the target language (and paying attention to the fact that it is still possible to view the whole display on a computer screen and a phone screen)
- changing the background colour to the colour of their t-shirt or shoes.
- changing the images to selfies
- changing the colour of the font, its alignment, decreasing the font-size, putting some words in italics, marking (highlighting) on word etc.
Tell them to have a look at the HTML5 cheat sheet if they want to find new functions.
They can then decide to share their poster with others (top right-hand corner – “Publish”).
- Ask students why understanding the basics of HTML can be useful. Conduct feedback as a whole class (difficulty, interest, potential, the importance of such an activity).
After class
Ask your students to answer this online quiz on this activity (5 easy questions). You can, of course, create another quiz using different or more questions.
Related activities
| Context of use | Title | Related themes | Languages |
|---|---|---|---|
| CPD materials | |||
| Code literacy, what is it? | EN, FR, GE, GA, IT | ||
| Activities for the classroom | |||
| Discovering a new language - HTML and CSS | EN, FR | ||
| Independent learning | |||
| Code literacy, what is it? | EN, FR | ||
Source/attribution: Digilanguages. Author: Johanna Keogh
This activity aims to raise students’ awareness of the structure of a web page, and to bring code into the foreign language class (see <a href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt”>Code literacy, what is it?</a>).This activity is an adaptation of <em>Activity 21: HTML basics</em> in <a href=”/bibliography/#/?_k=2xzfdy” target=”_blank” rel=”noopener noreferrer” data-mce-href=”/bibliography/#/?_k=2xzfdy”>Dudeney, Hockly & Pegrum (2013: 162-168)</a> and of <a href=”https://thimbleprojects.org/mozillalearning/171/” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimbleprojects.org/mozillalearning/171/”>Keep Calm </a>an activity from <a href=”https://thimble.mozilla.org/en-US/” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimble.mozilla.org/en-US/”>Mozilla Thimble</a> (an online code editor).<br />Learning outcomesOn completion of this activity, students will be able to<li>understand the structure of a web page</li><li>recognise and change elements in coding languages</li><li>have greater control over the format and appearance of some online communication</li><li>reflect on code literacy and discuss its importance</li>
<br />Technology requirements<li>One Internet-enabled teacher computer & data projector; student computers or mobile devices (one per student pair)</li>
<br />Procedure<span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>Before class</span>Read all the information in the Before class section to ensure that you are familiar with the basics of HTML and CSS coding. Then follow the instructions given in the ‘In class’ section to create your own <a href=”https://thimbleprojects.org/mozillalearning/171/” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimbleprojects.org/mozillalearning/171/”>Keep Calm</a> poster (example of a <a href=”https://thimbleprojects.org/jok/299060″ target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimbleprojects.org/jok/299060″>remix poster</a>).If you are not so familiar with the basics of HTML and CSS coding, please take some time to read the <a href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt”>Code literacy, what is it?</a> page as well as the ‘Before class’ section.Depending on your students and class dynamics, you might also want to talk about these questions with your students before starting the activity.<li><strong>What is HTML? What is CSS?</strong></li>
HTML is a <em>markup</em> language used to create webpages.CSS is a <em>style sheet</em> language used for describing the presentation of a document <em>written in a markup language</em>.Watch this short video that explains what HTML is, and how it works with CSS and JavaScript:.As specified in this video, the latest updated version of HTML is called HTML5 (it offers new features compared to the previous versions of HTML). In 2017, all updated browsers (Chrome, Firefox etc.) support HTML5..<li><strong>Why should I learn this new language?</strong></li>
Learning how to code is like learning a foreign language. Why learn a foreign language?As John McWorther provocatively puts it in this <a href=”https://www.ted.com/talks/john_mcwhorter_4_reasons_to_learn_a_new_language/transcript?language=en” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.ted.com/talks/john_mcwhorter_4_reasons_to_learn_a_new_language/transcript?language=en”>TEDTalk</a>: Why should we learn a foreign language — other than if English happens to be foreign to one?Should you learn code because it is tagged the world’s new Lingua Franca? Because it might be useful in your professional journey? Probably – but also because “if you want to become part of a culture, then whether or not the language channels the culture (…) if you want to imbibe the culture, you have to control to some degree the language that the culture happens to be conducted in. There’s no other way”. You might not want to participate in that culture, but you will be able to, and it can come in very handy. Of course, to be ‘fluent’ in this computer language requires a lot of work – this activity here is set to provide the basics (the “A1.1″ of code)..<li><strong>Debunking a few myths</strong></li><li><em>Learning to code is hard</em></li>
Just like any foreign language, mastering it can definitely be quite tricky and becoming a professional will require a lot of work. However, getting to know the basics is within the reach of everybody.<li><em>You need to be tech-savvy</em></li>
There is no real prerequisite to learn code. You should be a bit familiar with using computers and using the web ‘passively’ (looking at websites and clicking on links). It is also a big advantage if you can read English as code is written in English (US spelling).<li><strong>Why conduct such a computer focused activity in the language classroom?</strong></li>
While there are many advantages in being code literate (see <a href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt”>Code literacy, what is it?</a>), there is a tendency to oppose foreign language learning to code learning (“<a href=”http://www.independent.co.uk/news/world/americas/students-to-learn-coding-rather-than-a-foreign-language-a6875066.html” target=”_blank” rel=”noopener noreferrer” data-mce-href=”http://www.independent.co.uk/news/world/americas/students-to-learn-coding-rather-than-a-foreign-language-a6875066.html”>politicians believe that students should be able to drop a traditional foreign language for coding,</a> a language that many consider the lingua franca of the technology era”). However, between coding and foreign languages, do we really have to choose? (See the article <a href=”https://www.middleburyinteractive.com/blog/coding-v-foreign-languages-do-we-really-have-choose” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.middleburyinteractive.com/blog/coding-v-foreign-languages-do-we-really-have-choose”>Coding vs Foreign Languages: Do We Really Have to Choose?</a>).This activity is not meant to teach students how to code. Indeed there are thousands if not millions of online tutorials doing just that in easy and comprehensive steps. This activity aims to teach students basics on how the technology works, so they can understand the realm of possibility at their fingers.“<a href=”http://www.slate.com/articles/technology/future_tense/2015/04/building_coding_into_art_english_and_history_classes.html” target=”_blank” rel=”noopener noreferrer” data-mce-href=”http://www.slate.com/articles/technology/future_tense/2015/04/building_coding_into_art_english_and_history_classes.html”>We’d like everybody to be more comfortable with computer science, because it’s running our lives now, and because it enhances what’s possible in the classroom</a>”.This activity based on HTML also allows the teacher to use an approach for learning content through an additional language (foreign or second), thus teaching both the subject and the language (<a href=”https://en.wikipedia.org/wiki/Content_and_language_integrated_learning” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://en.wikipedia.org/wiki/Content_and_language_integrated_learning”>Content and language integrated learning – CLIL</a>), “opening doors on languages for a broader range of learners”.<span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>In class</span>There will probably be a few students in the class who already know the basics of HTML, and probably more. Don’t hesitate to ask for their contribution and to help fellow students.
<li>Introducing HTML</li>
Ask participants to raise their hands if they know what HTML is. On your projector, go to any website and right-click to “View Source” to show the HTML code for that page. For eg., if you are using Google Chrome, go to the top right corner, click on the 3 dots, then on “More Tools”, and then “Developer Tools” (see image below).<img class=”wp-image-6881 size-medium” src=”https://www.digilanguages.ie/wp-content/uploads/2017/07/Screen-Shot-2017-07-24-at-3.22.27-PM-300×204.png” alt=”” width=”300″ height=”204″ data-mce-src=”https://www.digilanguages.ie/wp-content/uploads/2017/07/Screen-Shot-2017-07-24-at-3.22.27-PM-300×204.png” />If you have a student with HTML experience, ask them to see if they can point out a “Tag” in the code. Make sure to introduce these concepts before starting the activity:<li>HTML stands for Hypertext Markup Language and is the standard language for web pages.</li><li>HTML Tags tell your web browser how to translate the code into the website that Internet users will see. For instance, HTML tags can tell your browser when to turn text into a link, or how big to make the words appear on the page.</li><li>An open tag (for eg. <title>) tells the webpage something is starting, while a closed tag (</title>), tells the webpage it has stopped. HTML is used to <span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>structure</span> the webpage, to organise its content, so it is used to tell the webpage “this is a title”, “this a paragraph”, “this is a link” etc.</li>
<li>Introducing CSS</li>
Ask participants to raise their hands if they know what CSS is.<li>CSS stands for Cascading Style Sheets, and it’s the code that <span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>styles</span> your HTML, or tells it what it should look like.</li><li>CSS properties can control things like color, font, borders, and more.</li>
<li>Thimble Tour video</li>
Project the Thimble tour video so all students can see, or have them watch on their computers. The Thimble tour video is available on <a href=”https://thimble.mozilla.org/en-US/” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimble.mozilla.org/en-US/”>thimble.mozilla.org</a>, or below:.<li>Self-Guided Tutorial</li>
Ask students to set up an account and to follow the tutorial (on the right, next to “Preview”) in order to modify the HTML code and well as the CSS code to come up with their own image; give them specific instructions, such as:<li>changing words in the poster to the target language (and paying attention to the fact that it is still possible to view the whole display on a computer screen and a phone screen)</li><li>changing the background colour to the colour of their t-shirt or shoes.</li><li>changing the images to selfies</li><li>changing the colour of the font, its alignment, decreasing the font-size, putting some words in italics, marking (highlighting) on word etc.</li>
Tell them to have a look at the <a href=”https://websitesetup.org/HTML5-cheat-sheet.pdf” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://websitesetup.org/HTML5-cheat-sheet.pdf”>HTML5 cheat sheet</a> if they want to find new functions.They can then decide to share their poster with others (top right-hand corner – “Publish”).
<li>Ask students why understanding the basics of HTML can be useful. Conduct feedback as a whole class (difficulty, interest, potential, the importance of such an activity).</li>
<span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>After class</span>Ask your students to answer this <a href=”https://docs.google.com/forms/d/e/1FAIpQLSeZifWIWeO9p-UY_4fTGuqckcq8R2vzfpeMztGpddEo3jIdng/viewform” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://docs.google.com/forms/d/e/1FAIpQLSeZifWIWeO9p-UY_4fTGuqckcq8R2vzfpeMztGpddEo3jIdng/viewform”>online quiz</a> on this activity (5 easy questions). You can, of course, create another quiz using different or more questions.Related activities
| Context of use | Title | Related themes | Languages |
|---|---|---|---|
| CPD materials | |||
| Code literacy, what is it? | EN, FR, GE, GA, IT | ||
| Activities for the classroom | |||
| Discovering a new language - HTML and CSS | EN, FR | ||
| Independent learning | |||
| Code literacy, what is it? | EN, FR | ||
This activity aims to raise students’ awareness of the structure of a web page, and to bring code into the foreign language class (see <a href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt”>Code literacy, what is it?</a>).This activity is an adaptation of <em>Activity 21: HTML basics</em> in <a href=”/bibliography/#/?_k=2xzfdy” target=”_blank” rel=”noopener noreferrer” data-mce-href=”/bibliography/#/?_k=2xzfdy”>Dudeney, Hockly & Pegrum (2013: 162-168)</a> and of <a href=”https://thimbleprojects.org/mozillalearning/171/” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimbleprojects.org/mozillalearning/171/”>Keep Calm </a>an activity from <a href=”https://thimble.mozilla.org/en-US/” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimble.mozilla.org/en-US/”>Mozilla Thimble</a> (an online code editor).<br />Learning outcomesOn completion of this activity, students will be able to<li>understand the structure of a web page</li><li>recognise and change elements in coding languages</li><li>have greater control over the format and appearance of some online communication</li><li>reflect on code literacy and discuss its importance</li>
<br />Technology requirements<li>One Internet-enabled teacher computer & data projector; student computers or mobile devices (one per student pair)</li>
<br />Procedure<span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>Before class</span>Read all the information in the Before class section to ensure that you are familiar with the basics of HTML and CSS coding. Then follow the instructions given in the ‘In class’ section to create your own <a href=”https://thimbleprojects.org/mozillalearning/171/” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimbleprojects.org/mozillalearning/171/”>Keep Calm</a> poster (example of a <a href=”https://thimbleprojects.org/jok/299060″ target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimbleprojects.org/jok/299060″>remix poster</a>).If you are not so familiar with the basics of HTML and CSS coding, please take some time to read the <a href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt”>Code literacy, what is it?</a> page as well as the ‘Before class’ section.Depending on your students and class dynamics, you might also want to talk about these questions with your students before starting the activity.<li><strong>What is HTML? What is CSS?</strong></li>
HTML is a <em>markup</em> language used to create webpages.CSS is a <em>style sheet</em> language used for describing the presentation of a document <em>written in a markup language</em>.Watch this short video that explains what HTML is, and how it works with CSS and JavaScript:.As specified in this video, the latest updated version of HTML is called HTML5 (it offers new features compared to the previous versions of HTML). In 2017, all updated browsers (Chrome, Firefox etc.) support HTML5..<li><strong>Why should I learn this new language?</strong></li>
Learning how to code is like learning a foreign language. Why learn a foreign language?As John McWorther provocatively puts it in this <a href=”https://www.ted.com/talks/john_mcwhorter_4_reasons_to_learn_a_new_language/transcript?language=en” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.ted.com/talks/john_mcwhorter_4_reasons_to_learn_a_new_language/transcript?language=en”>TEDTalk</a>: Why should we learn a foreign language — other than if English happens to be foreign to one?Should you learn code because it is tagged the world’s new Lingua Franca? Because it might be useful in your professional journey? Probably – but also because “if you want to become part of a culture, then whether or not the language channels the culture (…) if you want to imbibe the culture, you have to control to some degree the language that the culture happens to be conducted in. There’s no other way”. You might not want to participate in that culture, but you will be able to, and it can come in very handy. Of course, to be ‘fluent’ in this computer language requires a lot of work – this activity here is set to provide the basics (the “A1.1″ of code)..<li><strong>Debunking a few myths</strong></li><li><em>Learning to code is hard</em></li>
Just like any foreign language, mastering it can definitely be quite tricky and becoming a professional will require a lot of work. However, getting to know the basics is within the reach of everybody.<li><em>You need to be tech-savvy</em></li>
There is no real prerequisite to learn code. You should be a bit familiar with using computers and using the web ‘passively’ (looking at websites and clicking on links). It is also a big advantage if you can read English as code is written in English (US spelling).<li><strong>Why conduct such a computer focused activity in the language classroom?</strong></li>
While there are many advantages in being code literate (see <a href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.digilanguages.ie/code-literacy-what-is-it/#/roles?_k=4ri4dt”>Code literacy, what is it?</a>), there is a tendency to oppose foreign language learning to code learning (“<a href=”http://www.independent.co.uk/news/world/americas/students-to-learn-coding-rather-than-a-foreign-language-a6875066.html” target=”_blank” rel=”noopener noreferrer” data-mce-href=”http://www.independent.co.uk/news/world/americas/students-to-learn-coding-rather-than-a-foreign-language-a6875066.html”>politicians believe that students should be able to drop a traditional foreign language for coding,</a> a language that many consider the lingua franca of the technology era”). However, between coding and foreign languages, do we really have to choose? (See the article <a href=”https://www.middleburyinteractive.com/blog/coding-v-foreign-languages-do-we-really-have-choose” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://www.middleburyinteractive.com/blog/coding-v-foreign-languages-do-we-really-have-choose”>Coding vs Foreign Languages: Do We Really Have to Choose?</a>).This activity is not meant to teach students how to code. Indeed there are thousands if not millions of online tutorials doing just that in easy and comprehensive steps. This activity aims to teach students basics on how the technology works, so they can understand the realm of possibility at their fingers.“<a href=”http://www.slate.com/articles/technology/future_tense/2015/04/building_coding_into_art_english_and_history_classes.html” target=”_blank” rel=”noopener noreferrer” data-mce-href=”http://www.slate.com/articles/technology/future_tense/2015/04/building_coding_into_art_english_and_history_classes.html”>We’d like everybody to be more comfortable with computer science, because it’s running our lives now, and because it enhances what’s possible in the classroom</a>”.This activity based on HTML also allows the teacher to use an approach for learning content through an additional language (foreign or second), thus teaching both the subject and the language (<a href=”https://en.wikipedia.org/wiki/Content_and_language_integrated_learning” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://en.wikipedia.org/wiki/Content_and_language_integrated_learning”>Content and language integrated learning – CLIL</a>), “opening doors on languages for a broader range of learners”.<span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>In class</span>There will probably be a few students in the class who already know the basics of HTML, and probably more. Don’t hesitate to ask for their contribution and to help fellow students.
<li>Introducing HTML</li>
Ask participants to raise their hands if they know what HTML is. On your projector, go to any website and right-click to “View Source” to show the HTML code for that page. For eg., if you are using Google Chrome, go to the top right corner, click on the 3 dots, then on “More Tools”, and then “Developer Tools” (see image below).<img class=”wp-image-6881 size-medium” src=”https://www.digilanguages.ie/wp-content/uploads/2017/07/Screen-Shot-2017-07-24-at-3.22.27-PM-300×204.png” alt=”” width=”300″ height=”204″ data-mce-src=”https://www.digilanguages.ie/wp-content/uploads/2017/07/Screen-Shot-2017-07-24-at-3.22.27-PM-300×204.png” />If you have a student with HTML experience, ask them to see if they can point out a “Tag” in the code. Make sure to introduce these concepts before starting the activity:<li>HTML stands for Hypertext Markup Language and is the standard language for web pages.</li><li>HTML Tags tell your web browser how to translate the code into the website that Internet users will see. For instance, HTML tags can tell your browser when to turn text into a link, or how big to make the words appear on the page.</li><li>An open tag (for eg. <title>) tells the webpage something is starting, while a closed tag (</title>), tells the webpage it has stopped. HTML is used to <span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>structure</span> the webpage, to organise its content, so it is used to tell the webpage “this is a title”, “this a paragraph”, “this is a link” etc.</li>
<li>Introducing CSS</li>
Ask participants to raise their hands if they know what CSS is.<li>CSS stands for Cascading Style Sheets, and it’s the code that <span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>styles</span> your HTML, or tells it what it should look like.</li><li>CSS properties can control things like color, font, borders, and more.</li>
<li>Thimble Tour video</li>
Project the Thimble tour video so all students can see, or have them watch on their computers. The Thimble tour video is available on <a href=”https://thimble.mozilla.org/en-US/” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://thimble.mozilla.org/en-US/”>thimble.mozilla.org</a>, or below:.<li>Self-Guided Tutorial</li>
Ask students to set up an account and to follow the tutorial (on the right, next to “Preview”) in order to modify the HTML code and well as the CSS code to come up with their own image; give them specific instructions, such as:<li>changing words in the poster to the target language (and paying attention to the fact that it is still possible to view the whole display on a computer screen and a phone screen)</li><li>changing the background colour to the colour of their t-shirt or shoes.</li><li>changing the images to selfies</li><li>changing the colour of the font, its alignment, decreasing the font-size, putting some words in italics, marking (highlighting) on word etc.</li>
Tell them to have a look at the <a href=”https://websitesetup.org/HTML5-cheat-sheet.pdf” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://websitesetup.org/HTML5-cheat-sheet.pdf”>HTML5 cheat sheet</a> if they want to find new functions.They can then decide to share their poster with others (top right-hand corner – “Publish”).
<li>Ask students why understanding the basics of HTML can be useful. Conduct feedback as a whole class (difficulty, interest, potential, the importance of such an activity).</li>
<span style=”text-decoration: underline;” data-mce-style=”text-decoration: underline;”>After class</span>Ask your students to answer this <a href=”https://docs.google.com/forms/d/e/1FAIpQLSeZifWIWeO9p-UY_4fTGuqckcq8R2vzfpeMztGpddEo3jIdng/viewform” target=”_blank” rel=”noopener noreferrer” data-mce-href=”https://docs.google.com/forms/d/e/1FAIpQLSeZifWIWeO9p-UY_4fTGuqckcq8R2vzfpeMztGpddEo3jIdng/viewform”>online quiz</a> on this activity (5 easy questions). You can, of course, create another quiz using different or more questions.Related activities
| Context of use | Title | Related themes | Languages |
|---|---|---|---|
| CPD materials | |||
| Code literacy, what is it? | EN, FR, GE, GA, IT | ||
| Activities for the classroom | |||
| Discovering a new language - HTML and CSS | EN, FR | ||
| Independent learning | |||
| Code literacy, what is it? | EN, FR | ||
