Learn HTML by Building a Cat Photo App - Step 1

HTML-CSS
1

Hello, i am new to coding and i dont understand the first step to html element, opening and closing tags. infact i dont understand anything.

<html>
  <body>

<!-- User Editable Region -->

    <CatPhotoApp>Hello World</CatPhotoApp>

<!-- User Editable Region -->

  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.31

Challenge: Learn HTML by Building a Cat Photo App - Step 1

Link to the challenge:

2

I suppose we start with asking do you know what the purpose of html is? I think answering this question will lead to understanding more.

3

No sir, i do not understand the purpose of html

4

The purpose of HTML (HyperText Markup Language) is to define the structure and content of a web page. It’s like what Microsoft Word or Google Docs does for turning in an essay at school except that you are manually entering tags for formatting the essay or content. Like when you want to write a new paragraph in one of these word formators all you have to do is press enter and start typing. But with html instead of pressing enter you write an opening p tag and a closing p tag and then you can start typing your content inside these paragraph tags .

HTML is a markup language, which means that it uses tags to tell the browser how to display the content.
For example, the tag <h1> tells the browser to display the text that follows it as a heading.

1 Like
5

What you are doing is typing in these commands in a specific way (syntax) to format your content and make it look the way you want it to show up on a web page.

6

Whoa, slow down dude!
First of all if you already took note that tags are something you need to work with then you already understand something!
HTMLs purpose in life is to get to people and annoy them.
A programmer’s purpose is to master it and not allow it’s complicated workings to get to them before they spent proper time learning it.

In short tags are used to create elements on your webpage using html code. To create a heading for your page you use <h> tags with a number corresponding the importance of your heading (read: subheading…).
Each element should have a opening and closing tag with the text you want appearing on your webpage in between both tags. Here you want to use <h1> tags for a main heading with the text ‘catphotoapp’ in between your tags.
Ex:

<h2>This is a subheading </h2>

To read more about tags:

Hope this helps.

7

Thank you Starstruck, your explanation and example were helpful.

8

hi starstruck, what does this mean?
he h1 through h6 heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so h2 elements have less importance than h1 elements. Only use one h1 element per page and place lower importance headings below higher importance headings.

Below the h1 element, add an h2 element with this text:

Cat Photos

9

Just like it is saying. There are heading elements (h1-h6), and the h1 is used to signify important content on your webpage while each h2 going down the list is for lesser important content. You can see it used here

<h1> I am an h1</h1>
<h2> I am an h2</h2>
<h3> I am an h3</h3>
<h4> I am an h4</h4>
<h5> I am an h5</h5>
<h6> I am an h6</h6>

This looks like this on a page
image

As h1 is the largest text to signify the most important content while the text gets smaller with each heading element after h1

It seems like you are on a new step now. If you have passed this step and are on a new challenge then please use the help button again to make a topic for that challenge you are currently on

2 Likes