ICT Q2 (Reviewer)
HTML Basics
HTML Basics
It is a language for describing web pages
Hyper-Text Markup Language (HTML)
It is a mark-up language
HTML
It is a set of mark-up tags
Markup Language
They describe document content
Markup Tags
HTML documents are also called “_”
Web Pages
HTML documents contain: _ & _
Start Tags, End Tags
HTML mark-up tags are also called “_”
HTML Elements
HTML tags are keywords (tag names) surrounded by __ like
<html>
Angle Brackets
They normally come in _
Pairs
The first tag in a pair is the _ tag, the second tag is
the _ tag
Open, End
ICT Q2 (Reviewer) 1
The _ tag is written like the start tag, w/ a forward
slash before the tag name
End
_ & _ tags are also called opening tags & closing tags
Start, End
_ & _ are often used to describe the same thing
HTML tags, HTML elements
The purpose of a web browser is to _ & _
Read HTML docs
Display them as web pages
The browser does not display the HTML tags but uses the
tags to _
Determine how the content of the HTML page is to be
presented/displayed to the user
The format of an HTML document looks like this:
<html>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Versions:
HTML Versions
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
ICT Q2 (Reviewer) 2
Version Year
HTML 4.01 1999
XHTML 1.0 2000
HTML 5 2012
XHTML 5 2013
HTML can be edited using a professional HTML editor like
(AMCN)
Adobe Dreamweaver
MS Expression Web
CoffeeCup HTML Editor
Notepad++/Notepad
HTML headings are defined with the _ to _ tags
<h1>, <h6>
HTML paragraphs are defined with the _ tag
<p>
HTML links are defined with the _ tag
<a>
HTML images are defined with the _ tag
<img>
HTML documents are defined by _
HTML elements
It is everything from the start tag to the end tag
HTML element
HTML elements with no content are called _
Empty elements
_ is an empty element with no closing tag which defines
a line break
<br>
_ provide additional information about HTML elements
ICT Q2 (Reviewer) 3
Attributes
Attributes are always specified in the _
Start tag
Attributes come in name/value pairs like:
“name=value”
_ defines the most important heading, while _ defines
the least important heading
<h1>, <h6>
_ creates a horizontal line in an HTML page and can be
used to separate content
<hr>
_ can be inserted into the HTML code to make it more
readable & understandable
Comments
_ are ignored by the browser and are not displayed
Comments
Comments are written like this:
<!— This is a comment—!>
Use the _ tag if you want a new line without starting a
new paragraph
<br>
For formatting outputs:
_ defines bold text
<b>
_ defines emphasized text
<em>
_ defines a part of the text in an alternate
voice/mood
<i>
ICT Q2 (Reviewer) 4
_ defines smaller text
<small>
_ defines important text
<strong>
_ defines subscripted text
<sub>
_ defines superscripted text
<sup>
_ defines inserted text
<ins>
_ defines deleted text
<del>
_ defines marked/highlighted text
<mark>
_ tag defines a hyperlink
<a>
A _ is a word group of words or images that you can
click on to jump to another document
Hyperlink
The most important attribute to the <a> element is the _
attribute, which indicates the link’s destination
Href
By default, links will appear as follows in all
browsers:
An _ link is underlined & blue
Unvisited
A _ link is underlined & purple
Visited
An _ link is underlined & red
ICT Q2 (Reviewer) 5
Active
The _ element is a container for all the head elements
<head>
Elements inside <head> include:
Scripts
Instruct the browser where to find style sheets
Provide meta info
The _ defines the title of the document and is required
in all HTML/XHTML docs
<title>
The <title> element:
Defines a title in the browser toolbar
Provides a title for the page when it is added to the
favorites
Displays a title for the page in search engine
results
The _ is used to define style information for an HTML
doc
<style>
Inside the <style> element, specify how HTML elements
should render in a browser:
<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
_ was introduced together w/ HTML 4, to provide a better
way to style HTML elements
CSS
ICT Q2 (Reviewer) 6
CSS can be added to HTML in the ff ways:
_ using the style attribute in HTML elements
Inline
_ using the <style> element in the <head> section
Internal
_ using an external CSS file
External
The _ is empty, which means that it contains attributes
only, & has no closing tags
<img>
To display an image on the page, you need to use the _
attribute, which stands for “source”
src
The syntax for defining an image:
<img src=”url” alt=”some_text”>
Tables are defined with the _ tag
<table>
A table is divided into rows(_), and each row is divided
into data cells(_, which stands for table data & holds the
content of the data cell)
<tr>, <td>
A _ can contain text, links, images, lists, forms, other
tables, etc.
<td>
HTML table formatting:
<table border=”1”>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
ICT Q2 (Reviewer) 7
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
An unordered list starts with the _
<ul>
Each list item starts with the _
<li>
The list items are marked w/ bullets (typically small
black circles):
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
An ordered list starts with the _
<ol>
Each list item starts with the _
<li>
The list items are marked w/ numbers:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML _ are used to pass data to a server
forms
The _ is used to create an HTML form:
<form>
ICT Q2 (Reviewer) 8
input elements
.
</form>
The most important form element is the _ element
<input>
The _ element is used to select user information
<input>
An <input> element can vary in many ways, depending on
the attribute type. It can be of:
Type text field
Checkbox
Password
Radio button
Submit button
An _ is used to display a web page within a web page
iframe
The syntax for adding an iframe:
<iframe src=”URL”></iframe>
The _ points to the location of the separate page
URL
_ are defined by _ (HEX) for the combination of _ (RGB)
values
HTML colors, Hexadecimal Notation, Red, Green & Blue
ICT Q2 (Reviewer) 9
