Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

Web Development Chapter 1

memorize.ai (lvl 286)

(0)

30 cards

()

Section 1

Preview this deck

checked

Front

1 / 30

Web Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (30)

Section 1

(30 cards)

checked

Front

Putting this immediately after a radio button or checkbox's type and name will set it as the default option

Back

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat"

Front

This allows us to turn the image into a picture with a link embedded into it.

Back

<a href "#"="http://freecatphotoapp.com"

Front

The hash symbol turns the link into a dead one.

Back

<!DOCTYPE html> <html>  </html>

Front

This doctype declaration which goes at the top of your html code tells what version of html your page is using to the browser.

Back

<form action = "/submit-cat-photo"> <input type="text" placeholder="cat photo URL"></form>

Front

the form element will allow user input data to be sent to another server. This example shows text input nested within the form.

Back

id

Front

an attribute for the element that you want to internally link to. This internal link is set for further down the page typically.

Back

<form action = "/submit-cat-photo"> <input type="text" required placeholder="cat photo URL"> <button type=:submit">Submit</button> </form>

Front

Nesting this element makes it so that the user cant submit a form that is not completed.

Back

<h1> </h1>

Front

h1 gives us a heading

Back

<ol> </ol>

Front

Creates a numbered list

Back

<li> </li>

Front

Creates an ordered list. Nested in ul or ol elements.

Back

<h2> </h2>

Front

h2 gives us a smaller heading

Back

<form action = "/submit-cat-photo"> <input type="text" placeholder="cat photo URL"> <button type=:submit">Submit</button> </form>

Front

The button element allows the user to send the data that they have input into the textbox.

Back

<div> </div>

Front

A division element used for general purpose containing for other elements. Used the most in HTML out of all other elements.

Back

Nesting links

Front

<p>Here you can view more cat photos</p> Where "cat photos" is the hyperlink to the cat photos. In html this looks like... <p> View more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a> </p>

Back

<header> </header> Also: <footer>Copyright Cat Photo App</footer> nav video article section

Front

These tags are used to help optimize the search engine and also make your code easier to read

Back

<main> </main>

Front

Part of HTML5 tags used in making your HTML easier to read and helping with Search Engine Optimization (SEO). Other tags include: header footer nav video article section

Back

<p> </p>

Front

these tags signify the location for a paragraph

Back

target="_blank"

Front

Used in anchor tag causing the link to open in a new window. Typically placed between website and ">".

Back

<a href="htttps://freecodecamp.org">This links to freecodecap.org</a>

Front

An anchor element <a... that uses a web address as a destination called an href attribute for users to easily access content outside your web page. After the web link tag closes You can add words letting the user know where the hyperlink goes.

Back

<head> </head> <body> </body>

Front

Organizes html document within the html tags. link, meta, title, and style go inside the head element.

Back

<ul> </ul>

Front

Creates an unordered list

Back

<input type="text"

Front

Creates a web form for user input.

Back

<img src="https://www.your-image-source.com/your-image.jpg" alt="Description of image">

Front

This is how we get an image to display on our webpage. An alt attribute is also added to describe the image if it fails to load.

Back

<center><iframe width="854" height="480" src="https://www.youtube.com/embed/16hijj92uoE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>

Front

When we want to embed a youtube video we must go to the video itself, click share, embed and then copy the url.

Back

Front

This tag leaves a comment

Back

<input type="text" placeholder="this is placeholder text">

Front

placeholder text will appear inside the text box for the user signifying that they can type within the box.

Back

#footer

Front

used in an anchor after the <a. Ex) <a href="#footer">Jump To Bottom</a> <footer id="footer">Copyright Cat Photo App</footer>

Back

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

Front

This allows the user to give more than one answer to a question or request.

Back

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

Front

We created a radio button that allows for two choices. <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label> <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>

Back

The hash symbol "#"

Front

If we don't know where to link yet we can use the "#" to create a dead link. Here is an example... <p>Click here to view more <a href="#"" target="_blank">cat photos</a>.</p>

Back