Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

INF > LECTURE 7 Introduction to HTML > Flashcards

LECTURE 7 Introduction to HTML Flashcards

1
Q

What is HTML?

A

A markup language is a language that describes the content and
structure of a document by “marking up” or tagging different
document elements (document elements include main headings,
paragraphs, figures, figure captions etc. )

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

What does HTML support?

A

A Hypertext Markup language is a language that support both the tagging
of distinct document elements AND connecting documents through
hypertext links.

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

What can html be used for

A

HTML5 can be used to: support mobile design, semantic page elements,
column layout, form validation, offline storage and enhanced multimedia

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

Document type declaration

A

Document type declaration – first line in an HTML file which is a processing
instruction indicating the markup language used in the document

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

Element tags

A

Element tags - which marks an element in the document

<element> content</element>

e.g.

<p>Welcome to the movie site</p>

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

Empty elements

A

Empty elements - use one-sided element tags
E.g. <br></br> (line break), <hr /> (horizontal rule)

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

The Element hierarchy

A

The Element hierarchy - The entire HTML document can be thought of as a
set of nested elements in a hierarchical tree. At the top is the html element
which marks the entire document.

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

Basic HTML page structure

A

Basic HTML page structure
<!DOCTYPE html>

<html>
<head>
<title>Page title</title>
</head>
<!–- this is a comment -->
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Document type declaration
Element tags
Starting tags
Ending tag

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

What is the purpose of a Web Browser

A

The purpose of a web browser is to read HTML documents
and display them. The browser does not display the HTML
tags, but uses them to determine how to display the
document.

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

What is an element attribute and give an example

A

Elements will often contain one or more element
attributes. Each attribute provides additional information
to the browser about the purpose of the element or how
the element should be handled by the browser.
Syntax: <element atttr1 = “value1” attr2=“value2”…> content </element>

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

What are the three types of HTML lists and how to do you display the?

A

Ordered

<ol>
<li>Pretoria</li>
<li>Johannesburg</li>
</ol>

Unordered

<ul>
<li>Pretoria</li>
<li>Johannesburg</li>
</ul>

Descriptive

<dl>
<dt>Pretoria</dt>
<dd>Capital city</dd>
<dt>Jhb</dt>
<dd>City of Gold</dd>
</dl>

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

Give the definition for URL and content and code a URL link

A

url: Uniform Resource Locator which is a standard address
format used to link a variety of resources including documents,
e-mail addresses, telephone numbers, text messaging services.
Content: A description of the document content which will be
marked as a link
<a href = “url”>content</a>

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

Linking to another html file:

A

Linking to another html file: <a href=“about.html”>About</a>
When the user clicks the word About, the browser will load the about.html
file in the browser.

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

Make an image a hyper text link

A

Making an image as a hypertext link:
<a href=“about.html”><img src = “logo2.png” alt = “About” /></a>
When the user clicks on the image, the browser will load the about.html file in the
browser.

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

Linking to a location within a document

A

Linking to a location within a document

<h2>Chapter 4</h2>

(create bookmark first with id attr)
<a>Jump to Chapter 4</a>

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

Linking to an existing web resource

A

Linking to an existing web resource
<a>Visit our HTML
tutorial</a>

17
Q

What is an absolute file path?

A

An absolute file path is a path that starts at the root folder and processes down
entire folder structure:
<img></img>
<img src = “/E|/thai/docs/images/picture.jpg” alt = “Mountain” /> (if
drive is different from the one you are busy with)

18
Q

What is a relative file path

A

A relative file path points to a file relative to the current page.
In this example, the file path points to a file in the images folder located in the current
folder:
<img></img>
In this example, the file path points to a file in the images folder located in the folder
one level above the current folder:
<img></img>

19
Q

Defining an html table

A

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

20
Q

How do you create interactive websites?

A

In order to create interactive websites you need feedback
or input from users. This can be done through forms
called web forms.
A web form contains controls/widgets which are objects that
allow the user to interact with the form.

21
Q

What are the 3 types of buttons and code them

A

You get command, submit and reset buttons. The example
below is a command button.
Command button: (to run a script)
<input value = “Click Me” type = “button”
onclick=”alert(‘Hello World!’)“/>
Submit button: (to submit a form to a script)
<input value = “Click Me” type = “submit” />
Reset button: reset form to its default values
<input value = “Click Me” type = “reset” />

22
Q

Create an input field text box

A

<!DOCTYPE html>

<html>
<body>
<h2>The input Element</h2>
<form>
<input name="firstname" id = “Person name” type="text“/>
</form>
</body>
</html>

23
Q

Create a radio button group

A

<input></input> Male<br></br>
<input></input> Female<br></br>
<input></input> Other<br></br>

24
Q

CSS can be added to HTML documents in 3 ways:

A

CSS can be added to HTML documents in 3 ways:
*Inline - by using the style attribute inside HTML elements
*Internal - by using a <style> element in the <head> section
*External - by using a <link></link> element to link to an external CSS file</style>

25
Q

Inline CSS

A

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text
color of the <p> element to red:

<h1>A Blue Heading</h1>

<p>A red paragraph.</p>

26
Q

Internal CSS

A

Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue"
background color</style>

27
Q
A
28
Q
A

INF (5 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions