Basic HTML

Everything HTML in here.
Post Reply
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

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>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

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>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

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>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

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>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

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>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

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>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

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>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
Post Reply

Return to “HTML”