Unit 2 HTML Codes By Lesson

This is the “cheat sheet” I created to keep track of HTML Codes in Unit 2. I have filled in explanations in simple student friendly terms. I am new to coding! If you find I have misrepresented a code or left something out, please let me know. I have also added the section for attributes to my list. Diane Neville, Gulfstream Academy, Hollywood, Florida

Coding Unit 2 HTML.docx (97.8 KB)

15 Likes

Hi slooowlearner -

Everything looks pretty good - though I have a comment Lesson 4:Headers

Lesson 4: Headers

<h1></h1> -headers are used to organize the main ideas of the web
page. They come in 6 different sizes
from h1 the biggest to h6 the smallest. These are found within<head>

Actually the<head> is an element container for metadata (data
about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed. w3schools)

Anything typed in the head of the web page will not be seen by the viewer - except the <title> That being the title of the web page.

h1…h6 are headings that are bolded and are used in the <body> of the web page.

Hope this helps - w3schools is a really good resource as well.

Good Luck to you - practice as much as you can and coding web pages will become fun - I love it!

~Melanie

3 Likes

Hey @slooowlearner this is a pretty nifty resource. The difference between head, header, and heading is a bit tricky and as you note, we made a mistake when writing the curriculum. In the spirit of this document, here’s how I’d explain the difference in a kid-friendly way.

Heading: <h1>,<h2>,…<h6>, are used to make titles for different sections of your document. <h1> is the largest heading and <h6> is the smallest.

Head: <head> contains information about the webpage but most of it will never be visible to someone who visits it. This information helps a computer better understand what’s in your web page and how it works.

Header: <header> contains elements that appear on the top of many pages in your site, like a site name, logo, and navigation links. Note: This tag does exist in HTML but is not explicitly taught in CS Discoveries

In the curriculum we made the mistake of referring to headings as “headers”. We’ve got plans in the works to fix the issue but in the meantime I just want to make sure we don’t cause more confusion.

My biggest advice would be to ignore the <header> tag for now. We don’t actually use it in the curriculum and you don’t need it to complete any of the projects. Kids should use the <h1>...<h6> tags a lot to add titles to different portions of their websites. The <head> tag is in every project already but kids use it relatively rarely, for example to add a title to your page, or as you’ll see in Chapter 2, to link your HTML and CSS.

Like I mentioned the mistake’s on our end for the header-vs-heading naming confusion and we’re working to fix it. In the meantime do let us know if you have more questions. Also thanks for so willingly sharing your resources!

Cheers,
GT

3 Likes

Tangentially, here’s a resources made by a HS student. She used it while teaching elementary and middle school students HTML and CSS, gradually revealing subsequent page over each session.

http://leifsegen.com/csa/wp-content/uploads/2017/05/lctc.docx

Of note is that she included tips on how to do animation with CSS.

8 Likes

Thank you for adding this resource. I am not yet at the point that I understand all of it, but I am hoping to get there. D, Neville

1 Like
Hello World
1 Like

Hello @keetech this is the world do you copy? :smile:

In all seriousness though welcome to the forums and if you have any questions please don’t hesitate to ask!

1 Like

Hello World is a traditional first program. :grimacing:

I wrote it in html

I wanted to add to this conversation, particularly on the <head> tag. It was stated that the content in the <head> section won’t show. I would change that to shouldn’t show. However, most browsers will adapt to code mistakenly placed in the head section and process the errant code anyhow. For example:
`

I'm so happy to have a page

` May still show on the page as

I'm so happy to have a page

even though the student placed the h1 tag in the head instead of the body tag.

This can be confusing to new learners. It isn’t a crisis, but when looking at student code and troubleshooting, I thought it would be good to help people be aware of this loophole in browsers.

I’m circling back to this discussion to let you all know that based on the feedback we received here on the forum and in-person with other teachers we prioritized correcting the language in Unit 2 so that we correctly refer to h1-h6 tags as “headings”, and not “headers”. Hopefully that will help alleviate some confusion, but please keep coming here with questions and feedback.

Cheers,
GT

3 Likes

I just taught this lesson yesterday. The headings are indeed referred to as headings now.


Thank you.

1 Like

What version of HTML does Web Lab use?

Not sure, I will forward this on to the team.

Hey @kammie.dill it should be HTML5. Is there a specific tag you were hoping to use or having trouble with?

Hello World, I will begin Unit 2 after Spring Break. I’m not too fond of presenting HTML, mainly because I need to learn it before teaching to my students. Need all the help I can get.

Linda

Dr. LNewson,

Code Studio is a good help, but I would also look at other resources to see different points of view that will help you understand and you could approach it differently for your students. Popular HTML trainers include Dash from General Assembly, Codecademy and Khan Academy.

Let me know if these help!
Brad

3 Likes

I think this is one of the benefits of the curriculum from code.org. There is so much more student creating and working and less of the teacher presenting. Go with it, you can be the authentic lead learner!

2 Likes

Thanks! There was no specific tag that I was having trouble with. I just kept seeing the note “doesn’t work with HTML5” on the W3Schools page. I just wanted to make sure that I didn’t tell my students to try something that wasn’t going to work with the version we are using.

1 Like

Yes, it helped, thanks.
LNewson

It helped. Great! Makes my life easier.