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
Q

Links

A

-The hyperlink makes hypertext, hyper

26
Q

<a> - anchor</a>

A

anchors a link to a webpage

27
Q

Internal Links

A
  • 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: <a>Link to Div</a>

28
Q

Tables

A

-webpage design naturally fits a grid design

29
Q
A

table element

30
Q
A

table row

31
Q
A

each row contains cells of data which use the table data cell tag

32
Q

Lists

A
  • <ol> : ordered list
    creates an itemized list (1,2,3)

    </ol>

-</ol><ul> : unordered list
creates a bulleted list (bullet points)

-<li> : list item
denotes an item in any kind of list </li></ul>

33
Q

Semantic elements Tags used for organization (in 3 sections) that don’t affect table in any way

A
34
Q

Form tag :

A

: 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
Q

method = “”

A
  • HTTP method
  • determines which HTTP method is used to send the form request
  • the method will be GET or POST
36
Q

HTTP method: GET

A
  • 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
Q

HTTP method: POST

A
  • will put the data in the body of the request

- most secure method of sending data

38
Q

HTTP attribute: action=”handler”

A

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
Q

Form Inputs

A

: form inputcreates 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 labelidentifies interior text as a label for an input fieldcreates a button that can have functionality attached
-can have a type attribute like type =”submit” to submit a form

40
Q

HTTP method: GET

A
  • 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
Q

HTTP method: POST

A
  • will put the data in the body of the request

- most secure method of sending data

42
Q

Form Inputs

A

: form inputcreates 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 labelidentifies interior text as a label for an input fieldcreates a button that can have functionality attached
-can have a type attribute like type =”submit” to submit a form

43
Q

Form input types

type= “email” or “color” or “number” or “date” or “password” or “range” or “tel” or “url”

A

-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
Q

note

A

every element should also have a name=”” attribute to label the form data for the handler

45
Q

HTML Images : <img></img>

A

<img></img> : image
displays a linked image
-need to provide an address of an image file to use as a source

46
Q

HTML Image tag attribute : src=”url.jpg”

A

src:”url.jpg” : source

The URL of the image

47
Q

HTML Image attribute : alt=”text”

A

alt=”text” : alternative text

Text that is shown when the image is not loaded

48
Q

HTML Audio tag:

A

-embeds a linked audio file into a page

you can display text by including it between the audio tags

49
Q

HTML Video tag:

A

-embeds a linked video file into a page

50
Q

Audio and video value-less attributes: controls, autoplay, and loop

A
  • controls: toggles default playback controls in the browser for the media
  • autoplay: toggles automatic playback
  • loop: toggles automatic replay when done