HTML Flashcards

1
Q

What is HTML?

A

HTML stands for Hyper-Text markup language and is a markup language used to create webpages

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does mark up language mean

A

A language tags with human-readable names in order to convey more meaning or functionality than what is shown the the tags themselves

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is a tag?

A

A denotation of the start and end of a a block of data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is an element?

A

An element consists of 3 parts: the opening tag, the content and the closing tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

what is the difference between an element and tag?

A

In summary, a tag is the markup syntax used to define the beginning and end of an element, while an element is the complete unit that encompasses the start tag, content, and end tag (if applicable).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Why is HTML important?

A

Because HTML is the universal way of writing a webpage. Browsers interpreters are expecting your website structure to be written with HTML so if it is not there would be nothing to display.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the purpose of HTML?

A

to define the structure of the website

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Html document structure

A

The <html> tag encloses the entirety of the document. All tags are written within <html>. The attribute lang sets the language that the document is written in and is used by the search engine to decide what pages to show based on the language of the user. We’ll be taking a closer look at attributes in a later module, so for now just know what this one does.

he <head> is where metadata is stored; metadata being information about the HTML page. This goes at the top of the document so the search engine can quickly scan it and see if information relevant to the search is contained within the page. Included in metadata is our <title> tag, so now we have a home for it. Something to note about <head> is that even though it is meant for metadata only, nothing is preventing you from putting non-metadata tags in the <head>. Any rendering tags will show up as normal even if they are placed in the <head></title>

The purpose of <body> is to contain the document as it gets displayed to the user. The <body> is where everything interesting takes place for our webpage

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the Dom?

A

Document object model It is the representation of the HTML document in memory. It is generated and can be manipulated by Web API’s to change the look of the page as it is being viewed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What are non rendering tags?

A

A non-rendering tag is one that does not get displayed on the webpage

<meta></meta>

: Used to describe various pieces of information about the webpage to the search engine

<head></head>

: Used to hold non-rendering tags
<!DOCTYPE html> : Used to tell the browser that this page should be rendered as HTML

<link></link>

: Used to link to an external resource, usually a CSS stylesheet

 : Used to link to an external JavaScript file
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What are rendering tags?

A

A rendering tag is one that is displayed on the webpage

<p></p>

: Used to display a paragraph

<h1>/<h1> - <h6></h6> : Used to display a heading (Note: There are 6 of these, each one successively smaller than the last)
<img></img> : Used to display a file using some kind of image format (png, jpg, gif, etc)
<a></a> : Used to display text with a hypertext link (called the anchor tag)
<span></span> : Used to display content with no default formatting
</h1></h1>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the point of semantic markup?

A

To convey the meaning of the page to developers and assistive technology

Sementic tags :

<nav>: Defines a section containing navigation links.
<aside>: Defines content that is tangentially related to the surrounding content.
<header>: Represents the introductory content at the top of a page or section.
<footer>: Represents the footer of a document or section.
</footer></header></aside></nav>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are some common tags?

A

<h1> - <h6>: A heading is large text that marks the beginning of a new section of the document. A header is a bar found at the top of the screen for a webpage.

<p> - paragraph. It is used to represent a long sequence of words that is likely to wrap; or in other words a paragraph. Shorter bits of text are typically, but not always better represented by different

<img></img>It is used to display a picture on the webpage.

<figure> and <figcaption> These two tags together create a captioned figure.

<details> and <summary> These two tags together create a titled collapsable section. You can hide whatever markup you want inside of the <details> and it will be hidden until the name of the section (determined by <summary>) is clicked on.

<br></br> This tag is called the line break. It represents exactly that, the start of a new line. The line break is a block element.

<table>, <tr>, <th>, <td> and <caption>
These tags are all used to construct a table. Let's go over each one:

<table> is used to contain all of the other tags and is the definition for the table
<tr> is used to define a row in the table (including header rows)
<th> is used to define a header entry
<td> is used to define a table entry
<caption> is used for a caption to describe the table

<ol>, <ul> and <li> These tags are used for lists. The <ol> is called the ordererd list and the <ul> is called the unordered list, and the <li> is called the list item. The ordered list displays the list items with some incrementing prefix while the unordered list has a generic prefix. The unordered list does NOT display the list items randomly, they will be in the exact order you write them in every time. Another common tactic with the lists is to nest a list within another list to create a sublist. These are all block elements.

<div>
This tag is called the division. The division is used to represent a subsection of the document. The <div> is commonly overused in place of other tags that have the same styling effect, but have some semantic meaning. Instead of giving each of these tags their own section, they will be listed here.

<span> it is an inline element. The common use for this tag is used to wrap around text, typically for styling with CSS.

<a>
his tag is called the anchor. It is used to link to another webpage or to a different portion of the current webpage. The anchor is an inline element
</a></span></div></div></li></ul></ol></li></ul></ol></caption></td></th></tr></table></caption></td></th></tr></table></summary></details></summary></details></figcaption></figure></p></h6></h1>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is an attribute?

A

A key-value pair to set various properties of a tag. These are always set in the opening tag.

Attributes are key-value pairs that change how an element functions

Attributes are essential for accessiblity to convey meaning to assistive technologies that is otherwise impossible to determine from semantic markup

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

what is an inline element?

A

An element display style in which the element will stretch to take up only as much space as its content.

Inline elements only take up the space of their content and cannot contain block elements

Inline elements typically represent styling accents

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

what is a block element?

A

An element display style in which the element will stretch to take up the entire width of the container. It will always begin on a new line and it will always be followed by a new line.

Block elements start on a new line and take up the entire width of their container

Block elements typically represent structured portions of the document

17
Q

list block elements

A

<h1> - <h6>
<p>
<div>
<details>
<figure>
<ol>, <ul>, <li>
<section>
<table>
</table></section></li></ul></ol></figure></details></div></p></h6></h1>

18
Q

list inline elements

A

<a>
<span>
<em>
<input></input>
<label>
<cite></cite></label></em></span></a>

19
Q

What is a text field?

A

A text field is a one-line input field that allows the user to input a line of text. Text Fields are created by specifying the type attribute value as “text”.

<form>
<label>Email Id:</label><br></br>
<input></input>
</form>

20
Q

Radio Buttons

A

<form>
SELECT GENDER
<br></br>
<input></input>
<label>Male</label><br></br>
<input></input>
<label>Female</label>
</form>

A form may have multiple sets of radio buttons. In order to make sure the user only selects one option from a given set, each radio input element must have matching name attributes. In the example above, both buttons have a name attribute value as gender.

21
Q

Checkboxes

A

Checkboxes are used to let the user select one or more values from a pre-defined set of options. The type attribute value for checkboxes input control is “checkbox”.

<form>
<b>SELECT SUBJECTS</b>
<br></br>
<input></input>
<label>Math</label>
<input></input>
<label>Science</label>
<input></input>
<label>English</label>
</form>

22
Q

File select boxes

A

File select boxes are used to allow the user to select a local file on their computer and send it as an attachment to the webserver. It is similar to a text box with a button that allows the user to browse for a file. Instead of browsing for the file, the path and the name of the file can also be written. They are created by specifying a type attribute value as “file”.

<form>
<label>Upload:</label>
<input></input>
</form>

23
Q

Select Boxes (Drop-downs)

A

Select boxes are used to allow users to select one or more options from a drop-down list. Select boxes are created by using two elements: <select> and <option>. The <select> element defines a drop-down while list items are defined within the select element using <option> elements.</option></select></option></select>

<form>
<label>Country:</label>
<select>
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
</select>
</form>

24
Q

Reset And Submit Buttons

A

The submit button allows the user to send the form data to the web server. You can define a submit button by specifying the type attribute as “submit”.

The reset button is used to reset the form data and will display any default values. You can define a reset button by specifying the type attribute as “reset”.

<form action="test.php" method="post" id="users"> 
    <label for="username">Username:</label> 
    <input type="text" name="username" id="Username" /> 
    <input type="submit" value="Submit" /> 
    <input type="reset" value="Reset" /> 
</form>
25
Q

Password Field

A

Password fields are a type of text field in which the text entered is masked using asterisk or dots. This prevents others form viewing the screen to see what is typed in. Also, its created by specifying the type attribute value as “password”.

<form>
<label>Password:</label><br></br>
<input></input>
</form>