HTML Basics Flashcards

1
Q

HTML

A

-Hypertext Markup Language
-Used to build webpages
+provides structure

  • Hypertext: content linked to related content
  • Tags surround and “mark up” text, forming an element
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

HTML

A

-Hypertext Markup Language
-Used to build webpages
+provides structure

  • Hypertext: content linked to related content
  • Tags surround and “mark up” text, forming an element
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

<p></p>

A
  • paragraph tag

- formats interior text

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

<p></p>

A

paragraph tag

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

content

A

-have opening tags and closing tags

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

someone elements like images are self closing and do not need a separate closing tag.

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

DOCTYPE TAG

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

DOCTYPE TAG

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

HTML document

A

-will be comprised of tags which are characters surrounded by angle brackets

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

<p></p>

A

paragraph tag

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

content

A

-have opening tags and closing tags

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

<span></span>

A
  • inline element
  • groups interior content
  • occupies width of interior content (no more than width of screen)
  • used to place content side by side
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Attributes

A

HTML tags can also have metadata inside them referred to as attributes. An attribute is defined by a key, and equals sign, and a value that is usually between double quotes.F

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

DOCTYPE TAG

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

HTML structure

A

.

     <p> A parag</p>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Syntax rules

A

-tags are not case-sensitive
-use lowercase when you declare tags
-attribute values are case-sensitive
ex: <img></img>
is different from <img></img>

  • HTML only allows single spaces
  • elements should have closing tags or be self-closing
  • elements should be properly nested
  • browsers will ignore unknown tags
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Webpages are

A

comprised of Keywords: elements + attributes

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

<div></div>

A
  • A block style element
  • groups interior content
  • occupies entire window screen width
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

<span></span>

A
  • inline element
  • groups interior content
  • occupies width of interior content
  • used to place content side by side
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Layout elements

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

Anchor Tag attribute : href=”” (hypertext reference)

A

it is an attribute that specifies the location of the resource being referred or that the link directs to

22
Q

Anchor Tag attribute : target=”” (target window)

A

-determines which context the link opens to
-it can have one of four values
+ “self” : opens the link in the same context (window)
+ “_blank” : opens the link in a new context
+ “opens the link in a parent context”
+“top” : opens in the topmost parent context

23
Q

Semantic elements

A
  • examples are <div> and <span> elements</span>
  • do not visually affect webpages
  • used to organize related content </span></div>
24
Q

Semantic elements cont.

A
  • : header content
  • : navigation content
  • : a reserved section of a page
  • : article or story content
  • : sidebar content
  • : footer content

webpages may attach special styling or functionality to semantic tags

25
Links
-The hyperlink makes hypertext, hyper
26
anchors a link to a webpage
27
Internal Links
- links don't have to redirect to a resource. They can redirect to a link further down the page - if your elements have an ID assigned you can link those elements by using a hashtag and the ID name as a href value. ex: Link to Div
28
Tables
-webpage design naturally fits a grid design
29
table element
30
table row
31
each row contains cells of data which use the table data cell tag
32
Lists
-
    : ordered list creates an itemized list (1,2,3) -
    : unordered list creates a bulleted list (bullet points) -
  • : list item denotes an item in any kind of list
33
Semantic elements Tags used for organization (in 3 sections) that don't affect table in any way
34
Form tag :
: form used to group input elements and determine how they are handled -when a form submits data to the server, it does so by using the HTTP protocol.
35
method = ""
- HTTP method - determines which HTTP method is used to send the form request - the method will be GET or POST
36
HTTP method: GET
- will embed the form data into the URL of the request sent to the server - used when you want data to be bookmarked - should never be used for sensitive information like passwords
37
HTTP method: POST
- will put the data in the body of the request | - most secure method of sending data
38
HTTP attribute: action="handler"
action="handler" : form action (declares the location (URL) where the form data is sent for processing) -specifies the URL of the handler that will process the HTTP request (form data)
39
Form Inputs
: form input creates a data entry field : text area creates a resizable text box : selection input creates a drop down list : selection option denotes an item selectable in a select list : field set groups form inputs together : field set legend -names a field set . : input label identifies interior text as a label for an input field : creates a button that can have functionality attached -can have a type attribute like type ="submit" to submit a form
40
HTTP method: GET
- will embed the form data into the URL of the request sent to the server - should never be used for sensitive information like passwords
41
HTTP method: POST
- will put the data in the body of the request | - most secure method of sending data
42
Form Inputs
: form input creates a data entry field : text area creates a resizable text box : selection input creates a drop down list : selection option denotes an item selectable in a select list : field set groups form inputs together : field set legend -names a field set . : input label identifies interior text as a label for an input field : creates a button that can have functionality attached -can have a type attribute like type ="submit" to submit a form
43
Form input types | type= "email" or "color" or "number" or "date" or "password" or "range" or "tel" or "url"
-specify type inside the input tag type= "email" : validates inputs as email address type="color" : offers a color picker tool type="number" : only allows numbers as input type="date" : restricts input to mm/dd/yyyy type= "password" : visually obscure user input type= "range" : replaces input with a slider type= "tel" : formats input as phone number type= "url" : validates input as url
44
note
every element should also have a name="" attribute to label the form data for the handler
45
HTML Images :
: image displays a linked image -need to provide an address of an image file to use as a source
46
HTML Image tag attribute : src="url.jpg"
src:"url.jpg" : source | The URL of the image
47
HTML Image attribute : alt="text"
alt="text" : alternative text | Text that is shown when the image is not loaded
48
HTML Audio tag:
-embeds a linked audio file into a page | you can display text by including it between the audio tags
49
HTML Video tag:
-embeds a linked video file into a page
50
Audio and video value-less attributes: controls, autoplay, and loop
- controls: toggles default playback controls in the browser for the media - autoplay: toggles automatic playback - loop: toggles automatic replay when done