Scribd
Upload
57 views

HTML

<h1>Cat Photos</h1> <p>See more cat photos in our gallery.</p> <input type="text" name="email" placeholder="Email address"> <button type="Submit">Submit</button>

Uploaded by

najifasaba6
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
57 views

HTML

<h1>Cat Photos</h1> <p>See more cat photos in our gallery.</p> <input type="text" name="email" placeholder="Email address"> <button type="Submit">Submit</button>

Uploaded by

najifasaba6
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 35

html

1
• Start with
<html></html>
2
• <body></body>
• <h1> </h1>biggest, <h6> smallest
• <main></main
• <p>paragraph </p>
• Indentation 2 spaces
• <img> self closing tag

• All img elements should have an alt attribute. Loads if img fails to
show.
• <img src="cat.jpg" alt="A cat">
• <!– comment start….-->
HTML attributes are special words used inside the
opening tag of an element to control the element's
behavior.
 The src attribute in an img element specifies the image's URL (where the image
is located).

• <img src+”webaddress.bhn” >


• inside the existing element,
add an src attribute with this
URL:
• You can link to another page with the anchor (a) element. For
example, <a href='https://freecodecamp.org'></a> would link to
freecodecamp.org.
A link's text must be placed between the opening and
closing tags of an anchor (a) element. For example, <a
href="https://www.freecodecamp.org">click here to
go to freeCodeCamp.org</a> is a link with the text
click here to go to freeCodeCamp.org.
• Don’t use “ or ‘
• you turned the words link to cat pictures into a link by placing them
between opening and closing anchor (a) tags. You can do the same to
words inside of an element, such as a p element.
target attribute with the value _blank to the anchor (a)
element's opening tag, so that the link opens in a new
tab.
<p>See more <a href="https://freecatphotoapp.com"
target=_blank>cat photos</a> in our gallery.</p>
Other types of content can also be turned into
a link by wrapping it in anchor tags.

• https://cdn.freecodecamp.org/curriculum/cat-photo-
app/relaxing-cat.jpg
Before adding any new content, you should
make use of a section element to separate the
cat photos content from the future content.
• <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>
When you add a lower rank heading element
to the page, it's implied that you're starting a
new subsection.
unordered list (ul) element
• <ul>
• <li>cat nip</li>
• <li>laser pointers</li>
• <li>lasagna</li>
• </ul>
the figure element represents self-contained
content and will allow you to associate an
image with a caption.

<figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo
app/lasagna.jpg" alt="A slice of lasagna on a plate."></figure>
A figure caption (figcaption) element is used to add
a caption to describe the image contained within the
figure element. For example, <figcaption>A cute
cat</figcaption> adds the caption A cute cat.

<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>
Emphasize the word love in the figcaption element
by wrapping it in an emphasis em element.

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


• the code for an ordered list (ol) is similar to an
unordered list, but list items in an ordered list are
numbered when displayed.
• <strong.dfscv</strong>
add a form element.
• the action attribute indicates where form data should be sent. For
example, <form action="/submit-url"></form> tells the browser that
the form data should be sent to the path /submit-url
• The input element allows you several ways to collect data from a web
form. Like img elements, input elements are self-closing and do not
need closing tags.
• There are many kinds of inputs you can create using the type
attribute. You can easily create a password field, reset button, or a
control to let users select a file from their computer.
• <input type="text">
• In order for a form's data to be accessed by the location specified in
the action attribute, you must give the text field a name attribute and
assign it a value to represent the data being submitted. For example,
you could use the following syntax for an email address text field:
<input type="text" name="email">
• Placeholder text is used to give people a hint about what kind of
information to enter into an input. For example, <input type="text"
placeholder="Email address">.
• To prevent a user from submitting your form when required
information is missing, you need to add the required attribute to an
input element. There's no need to set a value to the required
attribute. Instead, just add the word required to the input element,
making sure there is space between it and other attributes. <input
type="text" name="catphotourl" placeholder="cat photo URL"
required>
• button element to create a clickable button. For example,
<button>Click Here</button> creates a button with the text Click
Here.
• The default behavior of clicking a form button without any attributes
submits the form to the location specified in the form's action
attribute.
• Even though you added your button below the text
input, they appear next to each other on the page.
That's because both input and button elements are
inline elements, which don't appear on new lines.
The button you added will submit the form by
default. However, relying on default behavior may
cause confusion. Add the type attribute with the
value submit to the button to make it clear that it is a
submit button.
<button type="Submit"></button>
radio buttons for questions where you want only one answer out of multiple options.
radio buttons for questions where you want only one answer out of multiple options.

Here is an example of a radio button with the option of cat:


<input type="radio"> cat. Remember that input elements
are self-closing.
label elements are used to help associate the text for an
input element with the input element itself (especially for
assistive technologies like screen readers).
For example, <label><input type="radio"> cat</label>
makes it so clicking the word cat also selects the
corresponding radio button.
• The id attribute is used to identify specific HTML elements. Each id
attribute's value must be unique from all other id values for the entire
page.
• <label ><input id='indoor' type="radio" ></label>
Notice that both radio buttons can be selected at the same time. To make
it so selecting one radio button automatically deselects the other, both
buttons must have a name attribute with the same value.

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


Indoor</label>
<label><input id="outdoor" name="indoor-outdoor" type="radio">
Outdoor</label>
• If you select the Indoor radio button and submit the form, the form
data for the button is based on its name and value attributes. Since
your radio buttons do not have a value attribute, the form data will
include indoor-outdoor=on, which is not useful when you have
multiple buttons.so,

• <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>
• The fieldset element is used to group related inputs and labels together in a
web form. fieldset elements are block-level elements, meaning that they
appear on a new line.

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

You might also like