Introduction to HTML Flashcards
- created HTML
- known as the father of the web
Tim Berners Lee
The first version of HTML
HTML 1.0 created in 1991
The second version of HTML
HTML 2.0, created in 1995
The third version of HTML
HTML 3.2, created in 1997
The fourth version of HTML
HTML 4.01, created in 1999
XHTML was created in?
2000
The current latest version of HTML
HTML 5
When was HTML 5 published?
2014
- Describes the structure of a website
- Simply the content of a webpage
HTML (Hypertext Markup Language)
Examples of applications for writing HTML documents
- notepad
- notepad++
- sublime
- TextEdit
- Visual Studio Code
What is the file extension used for HTML documents?
.html or .htm
What do you use to view the output of HTML documents?
Web browser
Used to display content
Browser
- opening and closing tags
- tags come in pairs
- closing tags end with a forward slash (/)
Element
this element defines the doc as a HTML 5 doc
<!DOCTYPE html>
why is the <!DOCTYPE html> declaration important?
it is important since websites nowadays are coded in multiple languages, aside from HTML
- root element of an HTML page
- signifies the beginning of the code
<html>
</html>
- contains meta info about the HTML page
<head>
</head>
everything inside this tag will not be displayed in the main body of the webpage
<head>
</head>
- specifies a title for the HTML page
<title>
</title>
where is the title of the HTML page shown on a browser?
it can be seen in the browser’s title bar or in the page’s tab
what are the entities enclosed in < > called?
HTML tags
they are element names surrounded by angle brackets (<>)
tags
- contains info related to the HTML document such as a character typeset, author info, keywords
<meta></meta>
- defines a thematic break in an HTML page
- most often displayed a sa horizontal line
Horizontal Rule <hr>
- used to separate content or define a change in an HTML page
Horizontal Rule <hr>
What’s the difference between:
- p
- <p>
- p is the element
- <p> is the tag
</p>
- defines paragraph of text
- block-level element
- always start on a newline
HTML paragraphs
these are tags without closing tag
empty element
- <h1> to <h6>
</h6></h1> - always in bolded letters
HTML headings
- used to insert a single line break, not to add space between paragraphs
- useful for writing a poem/address where the division of the lines is important
Line breaks <br></br>
- preformatted text
- displayed in fix-width font
- displayed exactly as how it is in source code
Pre tag <pre>
TRUE OR FALSE
In a <pre> element, the text preserves both spaces and line breaks.
TRUE
used to connect the current html file to an external source.
<link></link>
- comment tag
- Everything inside the tag will not be displayed in the browser.
<!-- -->
- it is a block level element and always starts on a new line.
paragraph <p>
text that is higher and often smaller than the main text.
superscript
used for suffixes of dates and in mathematics for representing the power to which a number is raised
superscript
text that is lower and also often smaller than the main text.
subscript
used in a number of different representations, such as chemical formulas mathematical expressions and footnotes.
subscript
HTML element used to create superscript
< sup >
HTML element used to create subscript
< sub >
This element gives text strong importance. Browsers typically render its content in bold.
<strong></strong>
This element gives text stress emphasis, and its content is typically displayed italic type.
<em></em>
element used to highlight text to indicate its relevance to a context. This can be, for example, in the form of highlighting the instances of a search term in search results.
<mark></mark>
element defines the document’s body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<body>
</body>
contain all information related to the HTML document such as character
typeset, author information, and keywords.
<meta></meta>
that defines a paragraph of text. It is a block-level element and always starts on a new line.
HTML Paragraph
TRUE OR FALSE?
“When a tag is indented, it means that it is inside the tag preceding it.”
TRUE
defines the least important heading:
<h6>
</h6>
- defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
<hr></hr>
defines the most important heading
<h1>
</h1>
- Used for block quotes (i.e., those that take up many lines), and its content is usually indented by the browser; however, the element should not be used for indenting.
- The URL for the source of the quote can be included by using the
cite attribute.
<blockquote> ... </blockquote>
used to separate content (or define a change) in an HTML
page.
<hr></hr>
defines preformatted text
<pre>
</pre>
text in this element is displayed in
a fix-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
<pre>
</pre>
Used for inline shorter quotes. Its content is usually enclosed in quotation marks.
<q> … </q>
The content of the <dfn> and <abbr> elements (i.e., the term) is usually rendered in ________ type by
browsers.</abbr></dfn>
italic type
The elements used for creating definitions and abbreviations
<dfn> and <abbr></abbr></dfn>
used to identify an abbreviation
<abbr></abbr>
the description of the abbreviation is provided with what attribute?
title attribute
what will be the output of the following code?
<p> <abbr> USA </abbr> </p>
when the user’s mouse hovers over USA, they will see “United States of America”
what will be the output of the following code?
<p> <dfn>The World Wide Web</dfn> is commonly known as the Web.</p>
The World Wide Web will be italicized
Inserts a span of text and underlines it.
<ins>…</ins>
Deletes a span of text, which is usually indicated with strikethrough text.
<del> … </del>
Renders text with a line through it (i.e., strikethrough text)
<s> ... </s>
Used to display a fragment of computer code in monospace font.
<code> ... </code>
Used to present sample output from a computer program in monospace font.
<samp> ... </samp>
Used to present required user input in monospace font.
<kbd> ... </kbd>
provides additional information but have it hidden, so that it is displayed only when users want it.
<details> ... </details>
can be used with details element to provide a visible heading for it, which, when users click, reveals the hidden content.
<summary> ... </summary>
In order to ensure that the browser does not interpret the characters as HTML
code, these are used
character entity references or numeric character references (also known
as escape characters or escape codes)
- non-breaking space entity
- used for each space required
 
- specifies the base language of the attribute values and content of an
element. - used in <html> element
lang attribute
3 types of HTML lists
- unordered lists
- ordered lists
- definition lists
lists in which items begin with bullet points.
unordered lists
lists in which items start with numbers or alphabets and are in
numeric or alphabetical order. Naturally, this is used only where the order
of list items matters to meaning.
ordered lists
lists made up of terms and the definitions for each of the terms.
definition lists
Defines an unordered list
<ul> ... </ul>
Defines an ordered type of list.
<ol>...</ol>
Defines a list item for an unordered or an ordered list
<li>...</li>
Defines a definition list
<dl>...</dl>
Defines a definition term for a definition list.
<dt>...</dt>
Defines a definition description for a definition
<dd>...</dd>
lists that have lists as
list items.
nested lists
2 common list attributes
- start attribute
- type attribute
specifies the start value for numbering or lettering items,
Start attribute
specifies the kind of marker to use for numbering or lettering, which must be 1, a, A, i, or I.
type attribute
- especially crucial for representing complex data, such as stock
reports and time tables. - Various types of information benefit from being presented by using this
Tables
Creates a table.
<table>...</table>
Defines a table caption, which is like the title.
caption>…</caption>
Defines a cell as a header for a group of column or row cells
<th>...</th>
Defines a table caption, which is like the title.
caption>…</caption>
Defines a cell as a header for a group of column or row cells
<th>...</th>
Defines a row in a table, and tr stands for table row.
<tr>...</tr>
Defines a cell in a table row of a table, and td stands for table data
< <td>…</td>
Defines a group of columns.
<colgroup>...</colgroup>
Defines a column and is usually in a <colgroup> element
<col></col>
.
Defines a block of rows that define the head of the columns of a table
<thead>...</thead>
Defines the set of rows that form the body for a table
<tbody>...</tbody>
Defines a set of rows that summarize the columns of a table.
<tfoot>...</tfoot>
crucial in extending the application of
tablesbeyond just using them to present basic information.
merging of table cells
this is achieved with the rowspan and colspan attributes in what elements?
<th> and <td> elements.
</td></th>
technically known as hyperlinks, are the very essence of the Web,
o because they are the feature that enables interconnection between
pages and browsing, without which the Web would be non-existent.
Links
Common types of links
● Linking from a page to another website.
● Linking from a page to another page on the same website.
● Linking from a part of a page to another part on the same page.
● Linking from a page to a specific part of a page on another website
element used to create links
<a> … </a>
hyperlink reference attribute
href
