Web Development | Midterm Long Quiz

0.0(0)
studied byStudied by 3 people
learnLearn
examPractice Test
spaced repetitionSpaced Repetition
heart puzzleMatch
flashcardsFlashcards
Card Sorting

1/149

encourage image

There's no tags or description

Looks like no tags are added yet.

Study Analytics
Name
Mastery
Learn
Test
Matching
Spaced

No study sessions yet.

150 Terms

1
New cards

div

  • Block-level element

  • Defines a section or a division in an HTML document

  • It is used as a container for HTML elements to give style using CSS and modify using JavaScript.

  • One of the fundamental building blocks in HTML used to group

    and style content.

  • Can be used anytime

  • Generic elements that have no semantic meaning on their own.

  • They only become meaningful using CSS and JavaScript.

2
New cards

span

  • Inline element

  • Does not inherently force new lines or consume any more space than necessary beyond what its contained content requires.

  • Used to group a small chunk of HTML elements or text for styling purposes, without disrupting the surrounding content's layout

  • One of the fundamental building blocks in HTML used to group

    and style content.

  • Can be used anytime

  • Generic elements that have no semantic meaning on their own.

  • They only become meaningful using CSS and JavaScript.

3
New cards

  • class

  • id

  • lang

  • aria roles

  • Styles — for inline CSS

Global Attributes of div and span:

4
New cards

<form>

  • Used to create a form for user input.

  • It has an opening and closing tag.

  • Are essential for collecting data from users, such as:

    • Login credentials,

    • Search queries; or

    • Feedback.

  • It is a container for different types of input elements, such as:

    • Text fields,

    • Checkboxes,

    • Radio buttons,

    • Submit buttons, etc.

  • Syntax:

<body>
	<form action="" method="">
		<!--
			form elements
		-->
	</form>
</body>

5
New cards

  • action

  • method

Attributes of <form>:

6
New cards

action

Specifies the URL where the form data should be sent when the form is submitted.

7
New cards

method

Defines the HTTP method to use when sending form data.

8
New cards

  • get

  • post

Common values of method attribute of <form>:

9
New cards

<input>

  • It is used to accept data input from the user.

  • It can be configured to accept a variety of data types by setting its type attribute to different values.

  • Syntax:

<form action="form1success.html">
	<label>Player Name
		<input id="name" type="text">
	</label>

	<label>Age
		<input type="number" placeholder="Enter Age" required>
	</label>

	<button>Register</button>
</form>

10
New cards

  • type

  • value

  • name

  • disabled

  • required

  • readonly

<input> attributes:

11
New cards

type

  • Specifies the type of input

  • <input> element can be displayed in many ways based on the type attribute.

12
New cards

  • text

  • radio

  • checkbox

  • submit

  • button

  • password

  • range

  • date

  • file

  • hidden

  • search

  • url

  • tel

  • number

Different kinds of type attribute:

13
New cards

value

Specifies the default value of the input

14
New cards

name

Specifies the name of the input

15
New cards

disabled

Specifies that the field is disabled

16
New cards

required

Specifies that the field is required

17
New cards

readonly

Specifies that the field can only be read

18
New cards

  • File

  • checkbox

  • radio

  • button

  • reset

  • submit

Types of Button:

19
New cards

file

  • For selection of files from local storage

  • Syntax:

<form>
	<input type="file" accept="image/jpeg" multiple><br><br>
	<input type="submit">
</form>

20
New cards

checkbox

  • For allowing multiple selection

  • Syntax:

<form>
	<input type="checkbox" id="creamcheese" name="addons" value="creamcheese">
	<label for="creamcheese">Cream Cheese</label>
	<br>
</form>

21
New cards

radio

  • For allowing one selection

  • Syntax:

<form>
	<input type="radio" id="milktea" name="drinks" value="milktea" required>
	<label for="milktea">Milktea</label>
	<br>
</form>

22
New cards

button

Just a button

23
New cards

reset

  • For resetting all the value of the form

  • Syntax:

<input type="reset" value="Reset>

24
New cards

submit

  • For submitting the form

  • Syntax:

<input type="submit" value="Submit>

25
New cards

  • accept

  • multiple

Attributes for <input type="file">:

26
New cards

accept

Specifies the files accepted

27
New cards

multiple

  • Specifies if multiple files are accepted (for file type)

  • Can select multiple items in the list (for select element)

28
New cards

  • text

  • email

  • password

  • number

  • tel

  • search

  • url

Types of Textfield:

29
New cards

text

  • For normal text field

  • Syntax:

<p>
	<label for="username">Username:</label>
	<input type=text" name="username" placeholder="Enter your username">
</p>

30
New cards

email

  • For email address validation

  • Syntax:

<p>
	<label for="email">Email:</label>
	<input type=email" name="email" placeholder="Enter your email" required>
</p>

31
New cards

password

  • For hiding text

  • Syntax:

<p>
	<label for="password">Password:</label>
	<input type=password" name="password" placeholder="Enter your password">
</p>

32
New cards

number

For allowing numbers

33
New cards

tel

  • For telephone number format validation

  • Syntax:

<p>
	<label for="phone">Phone:</label>
	<input type=tel" name="phone" placeholder="Enter your phone number">
</p>

34
New cards

search

  • For searching

  • Syntax:

<p>
	<label for="search">Search:</label>
	<input type=search" name="search" placeholder="Search Here">
</p>

35
New cards

url

  • For url validation

  • Syntax:

<p>
	<label for="url">Website:</label>
	<input type=url" name="website" placeholder="Enter URL">
</p>

36
New cards

  • placeholder

  • minlength

  • maxlength

  • size

Some of Textfield Attributes:

37
New cards

  • date

  • datetime-local

  • month

  • week

  • time

Types of Date/Time:

38
New cards

date

  • For inputting date/month/year

  • Format: YYYY-MM-DD (2024-04-18)

  • Syntax:

<p>
	<label for="date">Date:</label>
	<input type=date" id="date" name="date" min="2023-04-19" max="2025-12-12">
</p>

39
New cards

datetime-local

  • For inputting date/month/year and time

  • Format: YYYY-MM-DDThh:mm (2024-04-18T14:20)

  • Syntax:

<p>
	<label for="datetime-">Date:</label>
	<input type=date" id="date" name="date" min="2023-04-19" max="2025-12-12">
</p>

40
New cards

month

  • For inputting month and year

  • Format: YYYY-MM(2024-04)

  • Syntax:

<p>
	<label for="month">Month and Year:</label>
	<input type=month" id="month" name="month" min="2023-12">
</p>

41
New cards

<textarea>

  • It indicates a text area.

  • It is used for long text, such as:

    • an essay,

    • paragraphs, etc.,

  • Syntax:

<form>
	<label for="bio">Biography:
		<textarea id="bio" placeholder"Write about yourself" rows="5" cols"30" maxlength="500"></textarea>
	</label>
</form>

42
New cards

  • rows

  • cols

Attributes of <textarea>:

43
New cards

rows

Specifies the default number of lines in a text area.

44
New cards

cols

Specifies the default width of a text area.

45
New cards

<select>

  • It indicates a drop-down list of options from which users can select one or more.

  • Syntax:

<select id="fruits" name="fruits"></select>

46
New cards

<option>

  • Inside the <select> element there is an element wherein it indicates an item in a drop-down list.

  • Syntax:

<select id="fruits" name="fruits">
	<option value="orange">Orange</option>
	<option value="lemon">Lemon</option>
	<option value="lime">Lime</option>
</select>

47
New cards

<optgroup>

  • This element indicates an item group in a drop-down list.

  • Syntax:

<select id="fruits" name="fruits">
	<optgroup label="Berries">
		<option value="strawberry">Strawberry</option>
		<option value="blueberry">Blueberry</option>
		<option value="raspberry">Raspberry</option>
	</optgroup<
</select>

48
New cards

  • multiple

  • size

  • name

  • required

  • disabled

Attributes of <select>:

49
New cards

size

Specifies number of options visible in the drop-down

50
New cards

<table>

  • Allow web developers to arrange data into rows and columns.

  • The container element for the table

51
New cards

<tr>

Defines the table row

52
New cards

<th>

  • Defines a table header cell

  • Typically used for labelling columns

53
New cards

<td>

Defines a standard cell in the table; where data goes

54
New cards

<thead>

Defines a set of rows defining the head of the columns of the table

55
New cards

<tbody>

Encloses the main content of the table

56
New cards

<tfoot>

Defines a set of rows summarizing the columns of the table

57
New cards

  • colspan

  • rowspan

<th> and <td> Element Attributes:

58
New cards

colspan

Specifies the column span of the cell.

59
New cards

rowspan

Specifies the row span of the cell.

60
New cards

<caption>

Used to define a table caption

61
New cards

Website

It is a collection of files and folders containing different web resources that are linked to each other.

62
New cards

Website File Structure

  • Folders = directories

  • The root folder contains all the project files

  • Related files are grouped into subfolders (such as “css” or “images”)

63
New cards

File Naming Tips

  • Avoid spaces and symbols - separate words with an underscore or hyphen

  • Use all lowercase letters

  • Use meaningful and descriptive names for SEO and for organization

64
New cards

  • Domain name

  • Server

  • Web hosts

How to make website Online?

65
New cards

Domain name

It is the address used to access the website

66
New cards

Server

It is used to store the website files

67
New cards

Web hosts

It provides the server space

68
New cards

CSS

  • Abbreviated form of Cascading Style Sheets

  • Controls the document’s appearance and separates the presentation from the content

  • It is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents

  • It is made of rules, and rules are made of selectors and declaration blocks.

69
New cards

  1. Inline Style Sheet

  2. Embedded Style Sheet

  3. External Style Sheet

Types of CSS Styles:

70
New cards

Inline Style Sheet

  • It places CSS rules after the attribute and before closing the bracket.

  • This is referred to as the inline rule and affects only the tag where it is included.

  • They are not reusable, and they override style rules added by other methods.

  • Multiple styles must be added to the same style attribute which can make it difficult to read and manage.

  • Syntax:

<p style="color: red; font-size: 14px;">Hello World!</p>

71
New cards

Embedded/Internal Style Sheet

  • Placed at the head of the HTML document, this is useful for single web pages, such as blogs, or using the same web page templates on several web pages.

  • It is added to the <head> section of the HTML document.

  • All the CSS style rules are enclosed between <style> tags.

  • CSS selectors can then be used to apply styles to all the matched element.

  • To style multiple pages, the same block must be added to

    each page.

  • Syntax:

<head>
	<style>
		p{
			color: red;
		}
	</style>
</head>

72
New cards

External Style Sheet

  • This involves using a separate file for the CSS

  • It is referenced in the HTML file using the <link> tag.

  • It is included in the <head> section of the document.

  • Reusable and easier to maintain.

  • Syntax:

<head>
	<link rel="stylesheet" href="css/ExternalCSS.css">
</head>

73
New cards

  1. Declaration Block

  2. Selector

  3. Declaration

  4. Property

  5. Value

Syntax and Rules:

74
New cards

Declaration Block

Contains one or more style rules enclosed in curly brackets.

75
New cards

Selector

  • Specifies which HTML element to apply the style to.

  • Selectors are ways to select the HTML tags where styles apply.

76
New cards

Declaration

CSS style rules and use property value pairs to provide instructions to the browser on how to style a specific HTML element.

77
New cards

Property

  • Specifies what is being styled like background.

  • Are separated with a colon and end with a semicolon to indicate the end of the rule.

78
New cards

Value

  • Defines the specific characteristics

  • Are separated with a colon and end with a semicolon to indicate the end of the rule.

79
New cards

Shorthand Properties

  • Defined with multiple values

  • Syntax:

padding: 10px 5px 20px 15px;

80
New cards

Longhand Properties

  • Defined with individual values

  • Syntax:

padding-top: 10px; 
padding-right: 5px;
padding-bottom: 20px;
padding-left: 15px;

81
New cards

Comments

  • Starts with a slash and asterisks and ends in the opposite order

  • Syntax:

/* This is a comment */

/*
This is a 
multiline 
comment
*/

/* -----------------------
This comment has hypens!
----------------------- */

82
New cards

Whitespace

  • Required syntax for certain uses (such as separating CSS Values)

  • Used to format the code for readability but is not required.

  • Whitespace like:

    • spaces,

    • tabs; and

    • line breaks

83
New cards

Color Property

  • It changes an element’s text color and text decoration (such as underline or strikethrough)

  • It is defined with different types of <color> values.

  • It is used with different color values.

84
New cards

  1. Keyword Values

  2. RGB Function Values

  3. RGB Hexadecimal Values

Color Property can be defined using Color Values:

85
New cards

Keyword Values

  • Predefined keywords

  • Syntax:

color: red;
color: blue;
color: green;
color: black;

86
New cards

RGB Function Values

  • 0 is Black

  • 255 is White

  • Literally rgb([red] [green] [blue])

  • Syntax:

color: rgb(0,0,0); /* Black */
color: rgb(255,255,255); /* White */
color: rgb(255,0,0); /* Red */
color: rgb(0,255,0); /* Green */
color: rgb(0,0,255); /* Blue */

87
New cards

RGB Hexadecimal Values

  • Hex codes of colors

  • Like #rrggbb or #RRGGBB

  • Syntax:

color: #000000; /* Black */
color: #ffffff; /* White */
color: #ff0000; /* Red */
color: #008000; /* Green */
color: #0000ff; /* Blue */

88
New cards

  1. Type Selector

  2. Universal Selector

  3. Class Selector

  4. ID Selector

Different kinds of CSS Selectors:

89
New cards

Type Selector

  • Used as a selector to set the associated tag.

  • Also referred to as element selectors

  • Syntax:

/* This style will apply to all <h2> elements */
h2{
	color: darkslategray;
}

90
New cards

Universal Selector

  • Select all elements on the HTML page using an asterisk (*)

  • May cause performance issues and should be used sparingly

  • Syntax:

/* This style will apply to ALL elements */
*{
	border: 1px solid black;
}

91
New cards

Class Selector

  • Match to one or more elements

  • Add a class attribute to the HTML element.

  • Syntax:

<!-- HTML -->
<p class="fancy">Fancy Paragraph</p>
/* CSS */
.fancy{
	font-style: italic;
}

92
New cards

ID Selector

  • Match to a single unique element

  • Add a ID attribute to the HTML element.

  • Syntax:

<!-- HTML -->
<header id="custom-name"></header>
/* CSS */
#custom-name{
	background: lightblue;
}

93
New cards

DOM

  • Abbreviated of the word Documented Object Model

  • Represent the relationship between HTML elements.

94
New cards

Descendant Combinator

  • Used to select nested elements by combining two selectors.

  • One targeting an ancestor element and the other a descendant element.

  • It must be separated with a space

  • Syntax:

section p{
	color: green;
}

95
New cards

Selector List

  • Can be grouped to apply shared styles to more than one selector at once.

  • Syntax:

h1, h2, h3{
	font-weight: normal;
}

96
New cards

background-color

  • This property is useful for adding colors to the backgrounds of web pages, tables, or other elements that hold HTML content.

  • Values can be HTML color codes or color names.

  • Syntax:

background-color: #ffffff;
background-color: yellow;

97
New cards

background-image

  • Property that uses images as backgrounds

  • Syntax:

background-image: url('sample1.jpg');

98
New cards

background-position

  • To set images, you can add further position declaration

  • You can also use different length units

  • Syntax:

background-position: top left;
background-position: top right;
background-position: top center;
background-position: center left;
background-position: center right;
background-position: bottom left;
background-position: bottom right;
background-position: bottom center;

99
New cards

background-repeat

  • If the image file is smaller than the area it’s applied to, the image will repeat horizontally and vertically to fit the entire area.

  • Syntax:

background-repeat: no repeat;

100
New cards

letter-spacing

  • Spacing between letters

  • Add numerical value by points (pt), pixels (px), and em

  • Syntax:

letter-spacing: 10pt;
letter-spacing: 10px;
letter-spacing: 1em;