Page 4 of 4
Re: Basic HTML
Posted: Thu Mar 21, 2024 3:14 am
by ProjectX
Adding values to the checkbox's to identify them better.
Like radio buttons, form data for selected checkboxes are name / value attribute pairs. While the value attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page.
Add a value attribute to each checkbox. For convenience, set each checkbox's value attribute to the same value as its id attribute.
<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>
<fieldset>
<legend>What's your cat's personality?</legend>
<input id="loving" type="checkbox" value="loving" name="personality"> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" value="lazy" name="personality"> <label for="lazy">Lazy</label>
<input id="energetic" type="checkbox" value="energetic" name="personality"> <label for="energetic"> Energetic</label>
</fieldset>
Re: Basic HTML
Posted: Thu Mar 21, 2024 3:50 am
by ProjectX
Making a checkbox checked.
In order to make a checkbox checked or radio button selected by default, you need to add the checked attribute to it. There's no need to set a value to the checked attribute. Instead, just add the word checked to the input element, making sure there is space between it and other attributes.
Make the first radio button and the first checkbox selected by default.
<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<input id="indoor" type="radio" name="indoor-outdoor" value="indoor"checked> <label for="Indoor">Indoor </label>
<input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> <label for="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>
Re: Basic HTML
Posted: Thu Mar 21, 2024 3:52 am
by ProjectX
Adding a footer to the page!
Now you will add a footer section to the page.
After the main element, add a footer element.
</main>
<footer></footer>
</body>
Adding text to the footer
Nest a p element with the text No Copyright - freeCodeCamp.org within the footer element.
<footer>
<p>No copyright - FreeCodeCamp.org</p>
</footer>
Re: Basic HTML
Posted: Thu Mar 21, 2024 11:36 pm
by ProjectX
Footer Content - Adding Copyright and a link with text into the footer.
Turn the existing freeCodeCamp.org text into a link by enclosing it in an anchor (a) element. The href attribute should be set to
https://www.freecodecamp.org.
<p>No Copyright - <a href='https://www.freecodecamp.org'>freeCodeCamp.org</a></p>
Re: Basic HTML
Posted: Thu Mar 21, 2024 11:38 pm
by ProjectX
Body element
Notice that everything you've added to the page so far is inside the body element. All page content elements that should be rendered to the page go inside the body element. However, other important information goes inside the head element.
Add a head element above the body element.
<html>
<head></head>
<body>
Re: Basic HTML
Posted: Thu Mar 21, 2024 11:53 pm
by ProjectX
specify that the language of the page is English.
Notice that the entire contents of the page are nested within an html element. All other elements must be descendants of this html element.
Add the lang attribute with the value en to the opening html tag to specify that the language of the page is English.
<html><html lang="en">
<head>
Re: Basic HTML
Posted: Fri Mar 22, 2024 12:00 am
by ProjectX
Adding self-closing meta elements
You can set browser behavior by adding self-closing meta elements in the head. Here's an example:
<meta attribute="value">
Inside the head element, nest a meta element with an attribute named charset. Set to the value to utf-8 which tells the browser how to encode characters for the page.
Note that meta elements are self-closing.
head>
<meta charset="utf-8">
<title>CatPhotoApp</title>
</head>