Kai-Luen Liang Flashcards
Basic HTML
h2 element
used as a headline element
p element
paragraph element: used to write some text, information
comments in HTML
basic HTML elements: name some
HTML5 introduces more descriptive HTML tags. These include header, footer, nav, video, article, sectionand others.
main tag
The main HTML5 tag helps search engines and other developers find the main content of your page.
How do you add an image
like this:
<img></img>
anchor <a></a>
<a>this links to freecodecamp.org</a>
internal links
To create an internal link, you assign a link’s href attribute to a hash symbol #plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.
<a>Contacts</a>
…
<h2>Contacts</h2>
href=”#”
Sometimes you want to add a elements to your website before you know where they will link.
This is also handy when you’re changing the behavior of a link using JavaScript, which we’ll learn about later.
whats happening here?
<p>
Here's a <a> link to freecodecamp.org</a> for you to follow.
</p>
Normal text is wrapped in the p element:
<p> Here's a ... for you to follow. </p>
Next is the anchor element <a>(which requires a closing tag </a>):
<a> … </a>
targe tis an anchor tag attribute that specifies where to open the link and the value “_blank”specifies to open the link in a new tab
href is an anchor tag attribute that contains the URL address of the link:
<a> … </a>
The text, “link to freecodecamp.org”, within the anchor element called anchor text, will display a link to click:
<a>link to freecodecamp.org</a>
Turn an Image into a Link
You can make elements into links by nesting them within an a element.
Nest your image within an a element. Here’s an example:
<a><img></img></a>
Remember to use #as your a element’s href property in order to turn it into a dead link.
a unordered bullet list
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
Create a Text Field
Create a Text Field
input could be classified as a generic tag: indeed it is characterized by its attribute type, which can assume a range of different values and based on that value then input will be rendered as a different object.
A few example of different type values:
type value code text checkbox radio button …
radio buttons
Indoor
It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element
You can use radio buttons for questions where you want the user to only give you one answer out of multiple options.
Radio buttons are a type of input.
Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.
All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
checkboxes:
label for …..input id= type= name=
Loving
Forms commonly use checkboxesfor questions that may have more than one answer.
Checkboxes are a type of input
Each of your checkboxes can be nested within its own labelelement. By wrapping an inputelement inside of a labelelement it will automatically associate the checkbox input with the label element surrounding it.
All related checkbox inputs should have the same nameattribute.
It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label by setting the for attribute on the lab elelement to match the id attribute of the associated input element.
Here’s an example of a checkbox:
Loving
radio buttons, checkboxes, checked by default mode
To do this, just add the word “checked” to the inside of an input element. For example:
<div> </div>
The div element, also known as a division element, is a general purpose container for other elements.
The div element is probably the most commonly used HTML element of all.
declare
At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.
You tell the browser this information by adding the ..>tag on the first line, where the “…” part is the version of HTML. For HTML5, you use .
The !and uppercase DOCTYPEis important, especially for older browsers. The htmlis not case sensitive.
Next, the rest of your HTML code needs to be wrapped in htmltags. The opening goes directly below the line, and the closing goes at the end of the page.
Here’s an example of the page structure:
Define the Head and Body of an HTML Document
You can add another level of organization in your HTML document within the htmltags with the headand bodyelements. Any markup with information about your page would go into the headtag. Then any markup with the content of the page (what displays for a user) would go into the bodytag.
Metadata elements, such as link, meta, title, and style, typically go inside the headelement.
Here’s an example of a page’s layout:
