LECTURE 7 Introduction to HTML Flashcards
What is HTML?
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. )
What does HTML support?
A Hypertext Markup language is a language that support both the tagging
of distinct document elements AND connecting documents through
hypertext links.
What can html be used for
HTML5 can be used to: support mobile design, semantic page elements,
column layout, form validation, offline storage and enhanced multimedia
Document type declaration
Document type declaration – first line in an HTML file which is a processing
instruction indicating the markup language used in the document
Element tags
Element tags - which marks an element in the document
<element> content</element>
e.g.
<p>Welcome to the movie site</p>
Empty elements
Empty elements - use one-sided element tags
E.g. <br></br> (line break), <hr /> (horizontal rule)
The Element hierarchy
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.
Basic HTML page structure
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
What is the purpose of a Web Browser
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.
What is an element attribute and give an example
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>
What are the three types of HTML lists and how to do you display the?
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>
Give the definition for URL and content and code a URL link
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>
Linking to another html file:
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.
Make an image a hyper text link
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.
Linking to a location within a document
Linking to a location within a document
<h2>Chapter 4</h2>
(create bookmark first with id attr)
<a>Jump to Chapter 4</a>
Linking to an existing web resource
Linking to an existing web resource
<a>Visit our HTML
tutorial</a>
What is an absolute file path?
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)
What is a relative file path
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>
Defining an html table
<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>
How do you create interactive websites?
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.
What are the 3 types of buttons and code them
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” />
Create an input field text box
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form>
<input name="firstname" id = “Person name” type="text“/>
</form>
</body>
</html>
Create a radio button group
<input></input> Male<br></br>
<input></input> Female<br></br>
<input></input> Other<br></br>
CSS can be added to HTML documents in 3 ways:
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>
Inline CSS
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>
Internal CSS
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>
