simple-basics-of-html-to-build-a-cat-photo-app

You can use HTML tags to add photos, buttons, and other elements to your webpage. And you'll learn the most common HTML tags by building your own cat photo.

HTML Elements

Name	Definition	Syntax
1. General HTML elements	The text for an element goes between its opening and closing tags.	<>....</>
2. Heading Elements	The lower the number, the higher the importance(Broad-View).	<h1>-----</h1> to <h6>-----</h6>
3. Paragraph Elements	to create a paragraph of text on websites.	<p>---</p>
4. Comments	allows you to leave messages without affecting the browser display.	<!-- -->
5. Main Section	easier to read and help with Search Engine Optimization (SEO) and accessibility.	<main>----</main>
6. Self-Closing Tags	A tag for an element without a closing tag.	<img >
7. Anchor	To link to another page.	<a href='link.com'></a>
8. Section	Before adding any new content, to separate section wise from the future content	<section>---</section>
9a. Unordered List	No order of text in a list format	<ul>--</ul>
9b. Ordered List	list items in an ordered list are numbered when displayed.	<ol>---</ol>
10. List	to create items in a list.	<li>---</li>
11. Figure	Represents self-contained content and will allow you to associate an image with a caption.	<figure>--</figure>
12. Fig Caption	To add a caption to describe the image contained within the `figure` element.	<figcaption>--</figcaption>
13. Strong	to indicate that some text is of strong importance or urgent.	<strong>--</strong>
14. Web Form	To add a web form to collect information from users.	<form>---</form>
15. Input	allows you several ways to collect data from a web form and are self-closing	<input>
16. Button	To create a clickable button	<button>--</button>
17. meta	self-closing
18. Style	To enhance and add Styling Techniques	<style>---</style>
19. Link	self-closing	<link rel="stylesheet" href="style.css">
20. article	That commonly contain multiple elements that have related information	<article></article>
21. footer	To add some additional information.	<footer></footer>
22. hr	to display a divider between sections of different content.	<hr> (Self-closing)

HTML simple Definitions, conversions:

Nesting: To put the h1, h2, comment, and p etc.., elements inside the main element, is called Nesting.
Indentation: Nested elements should be placed two spaces further to the right of the element they are nested in. This spacing is called indentation.
These are used to make HTML easier to read.
Text in HTML: text must be placed between the opening and closing tags of an element. Eg: <a>-------</a> Etc..,
Text to Link Conversion in HTML:
Eg: In the text of your p element, turn the words cat photos into a link by adding opening and closing anchor (a) tags around these words. Then set the href attribute to https://freecatphotoapp.com

Before:
```
  <p>See more cat photos in our gallery.</p>
```
Code:
```
  <p>See more <a href='https://freecatphotoapp.com'>cat photos</a> in our gallery.</p>
```

Image to link conversion in HTML: by surrounding it with necessary element tags specifically anchor element with href attribute value of the link to be opened.

Before:

 <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

code:

 <a href='https://freecatphotoapp.com'><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

HTML Attributes

The special words used inside the opening tag of an element to control the element's behavior.

Name	Definition	Syntax
1. src	an attribute in an `img` element specifies the image's URL (where the image is located).	<img src="---" >
2. alt	a text is used for screen readers to improve accessibility and is displayed if the image fails to load.	< img src=" " alt="---">
3. target	To open the link in a new tab (with the value `_blank` )	<a target="---" href="---"></a>
4. action
(for form element)	tells the browser that the form data should be sent to the path with value `/submit-url` .	<form action="/submit-url"></form>
5. Type	To create a password field, reset button, or a control to let users select a file from their computer, with values text etc.., into input element.	<input type="text">
6. name	to represent the data being submitted into input element	<input type="--" name="--">
7. Placeholder	about what kind of information to enter into an input element.	<input type="--" name="--" placeholder="--">
8. required	To prevent a user from submitting your form when required information is missing, There's no need to set a value to the `required` attribute. Instead, just add the word `required` to the `input` element	<input type="--" name="--" placeholder="--" required>
9. charset