Writing Cat Album App HTML

1. Title element tag

h1The toh6 heading element is used to indicate the importance of the content below it. The lower the number, the higher the importance, so h2 elements have less importance than h1 elements. Use only one h1 element per page, and place less important headings below more important headings.

<h1>Hello World</h1>
<h2>Cat Photos</h2>

2. The p element is used to create a piece of text on the website

<p>See more cat photos in our gallery.</p>

3. Comments

Comments allow you to leave information without affecting the content displayed by the browser. They can also make your code invalid.

<!-- TODO: Remove h1 -->

4. Identification tags for the main parts of the page

HTML5 has elements that designate different content areas. These elements make your HTML easier to read and help with search engine optimization (SEO) and accessibility.

<main></main>

5. Add images to your website by using the img element

imgThe element has only one opening tag and no closing tag. An element without a closing tag is called a self-closing tag.
The attribute in the img element specifies the URL of an image (the location of the image)src

<img src="https://www.example.com/the-image.jpg">

Allimg elements should have aalt attribute. The text (value) of the alt attribute has two functions. The first function is to allow screen readers to know the content of the image, which will greatly improve the accessibility of the web page; the other Its function is to replace the text that needs to be displayed on the page when the image cannot be loaded

<img src="cat.jpg" alt="A cat">

6. Use anchor elements(a)to link to another page

The text of the link must be placed between the opening and closing tags of the anchor element(a)

<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>

In the text of the p element, convert the words cat photos into a link to https://freecatphotoapp.com by placing these words in the opening and closing anchor tags< /span>(a)to be implemented within

<p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

Add the attribute with the value to the start tag of the anchor element (a) to use it in Open link in new tab_blanktarget

<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

Anchor elements can also put other types of content in anchor tags to turn it into a link; wrap images with necessary element tags to turn it into a link

<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>

7. Use the section element to separate photo content from future content

<section></section>

8. Unordered list(ul) element, list item(li) element creates items in the list

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

9. The figure element represents independent content and allows an image to be associated with a title

<figure></figure>

10. Image title(figcaption)Element

The image title(figcaption) element is used to add a title to describe the image contained in the figure element
when nested in figure After the image in the element, add a figcaption element

<figure>
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
    <figcaption>Cats love lasagna.</figcaption>
</figure>

11. Strength em Element (italic)

Wrap the word in the figcaption element in an emphasis em element to emphasize it (italic)

<figcaption>Cats <em>love</em> lasagna.</figcaption>

12. Ordered list(ol)

Ordered list(ol)The code is similar to the unordered list, but the list items in the ordered list will be numbered when displayed

<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>

13. A web form will be added to collect information from users

<form></form>

actionAttributes indicate where the form data should be sent, for example telling the browser that the form data should be sent to the path /submit-url

<form action="/submit-url"></form>

14. The input element allows multiple ways to collect data from web forms

Like the img element, the input element is self-closing and does not require a closing tag
to use The a>type attribute creates a variety of inputs that can create a password field, a reset button, or a control that lets users select a file from their computer
For example, create a text field to Get text input from user

<input type="text">

In order to access the form's data through the location specified in the action attribute, the text field must be given a name attribute and assigned a value to represent Data is being submitted

<input type="text" name="catphotourl">

placeholderPlaceholder text is used to prompt people what information to enter in the input box (it serves as a prompt, not to enter content in the box)

<input type="text" name="catphotourl" placeholder="cat photo URL">

To prevent users from submitting the form when the required information is missing, add the required attribute to the input element. There is no need to set a value for the required attribute. Just add the word required to the input element, making sure there is a space between it and the other attributes

<input type="text" name="catphotourl" placeholder="cat photo URL" required>

15. The button element creates a clickable button

For example, create a button with the text Click Here

<button>Click Here</button>

Add an element with the text below the input element. The default behavior of clicking a form button without any attributes will submit the form to the location specified in the form's action attribute Even if you add buttons below the text input, they will be on top of each other on the page Adjacent. This is because the and elements are both inline elements and they will not Appears on a new line Adding a button will submit the form by default, and relying on the default behavior can be confusing. Add the attribute with the value to to make it clear that it is a submit buttonSubmitbutton
inputbutton

submittypebutton

<button type ="submit">Submit</button>

16. Radio buttons<input type="radio">

For questions that require an answer from multiple options, you can use radio buttons<input type="radio">
For example, this is a radio button with the cat option Radio button: <input type="radio"> cat
If you want only one radio button to be selected at a time: add the same name attribute to each radio button and set its value to account-type to associate radio buttons so that two radio buttons cannot be selected at the same time

<label><input type="radio"  name="account-type"/> Personal Account</label>
<label><input type="radio" name="account-type"/> Business Account</label>

17. label element

labelThe element is used to help associate the text of the input element with the input element itself (especially for assistive technologies such as screen readers) to also select the corresponding radio button
For example, the following statement causes clicking on a wordcat

<label><input type="radio"> cat</label>

There is another way to associate the text of the input element with the element itself. You can nest the text inside the label element and add with the same value as the of the input element attributesidfor

<input id="loving" type="checkbox"> <label for ="loving"> Loving </label>>

idThe attribute is used to identify a specific HTML element. The value of each id attribute must be different from all other id values throughout the page.
When an element has multiple attributes, the order of the attributes does not matter

<label><input type="radio" id="indoor"> Indoor</label>

In order for selecting one radio button to automatically deselect the other, both buttons must have the same value< a i=3> attributename

<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

Addvalue attributes for both radio buttons
If the Indoor radio button is selected and the form is submitted, then The button's form data is based on its name and value attributes. Since radio buttons don't have value attributes, the form data will contain indoor-outdoor=on which is not useful when there are multiple buttons
for Add the value attribute to both radio buttons. For convenience, set the button's value property to the same value as its id property

<label><input id="indoor" type="radio" name="indoor-outdoor" value ="indoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value ="outdoor"> Outdoor</label>

18. fieldset element

fieldset elements are used to group related inputs and labels together in web forms, fieldset elements are block-level elements, meaning they appear on a new line

<fieldset></fieldset>

after addingfieldset elements

19. legend element

legendThe element acts as a title for the content within the fieldset element, which provides the user with context as to what they should enter in that section of the form

<fieldset>
    <legend>Is your cat an indoor or outdoor cat?</legend>
    <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
    <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>

20. Checkbox<input type="checkbox">

Forms often use checkboxes for questions that may have multiple answers. For example, this is a checkbox with the tacos option: <input type="checkbox"> tacos
changes the personality =4> attribute added to the checkbox element. Although you won't notice this in the browser, doing so will make it easier for the server to process your web form, especially if there are multiple checkboxesnameinput

<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>

Like radio buttons, the form data for a checked checkbox is the name / value attribute pair. Although the value attribute is optional, it is a good idea to include it in any checkbox or radio button on the page. Add a value attribute to each checkbox, and for convenience, set each checkbox's value attribute to its id Same attribute value

<input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>

In order for a checkbox or radio button to be selected by default, you need to add the checked attribute to it. There is no need to set a value for the checked attribute. Simply add the word checked to the input element, making sure there is space between it and the other attributes. (The first radio button and first checkbox are selected by default)

<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>

21. footer element

Adds a footer section to the page. After the main element, add the footer element

22. head element

All content added to the page so far has been inside the body element, and all page content elements that should be rendered to the page have been placed inside body element. However, other important information is in the head element. Add a element above the body elementhead

23. title element

titleElement determines what the browser displays in the title bar or tab of the page

<head>
    <title>CatPhotoApp</title>
</head>

titleElements provide search engines with additional information about the page. It also displays the content of the title element in two ways:

• When the page opens, in the title bar
• In a browser tab when you hover over this page. Even if the label is not active, the title text will be displayed once you hover over the label

24. html element

The entire content of the page is nested within the html element. All other elements must be descendants of this html element.
Add the attribute with the value en to the opening tag to specify the language of the page for Englishlanghtml

<html lang="en">

25. <!DOCTYPE html>Statement

All pages should start with <!DOCTYPE html>. This special string is called a declaration and ensures that the browser attempts to meet industry-wide specifications. Add this statement as the first line of code

26. meta element

You can set browser behavior by adding self-closing elements inside headmeta

rendering language

tells the browser to render markdown for multiple languages ​​by creating a meta element as a child of the head element. Set its charset property to UTF-8

<head>
<meta charset="UTF-8">
<title>CatPhotoApp</title>
</head>

Page adaptive device

Adds another self-closing element inside head. Give it a attribute with a value of , and a attribute with a value of , so your page looks the same on various devicesmetanameviewportcontentwidth=device-width, initial-scale=1.0

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Complete code

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
  <title>CatPhotoApp</title>
  </head>
   <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <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>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>
      <p>
        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
      </p>
    </footer>
  </body>
</html>

renderings