HTML Tutorial 1: Getting Started With HTML5 Flashcards
Network
A structure in which information and services are shared among devices known as nodes or hosts.
Nodes
A network location that can access and share information and services.
Hosts
Any network device that is capable of sending and/or receiving data electronically.
Server
A host that provides information or a service to other devices on the network.
Client
A device that receives network information or services.
Client-server network
A network in which clients access information provided by one or more servers.
Local area network (LAN)
A network confined to a small geographic area, such as within a building or department.
Wide area network (WAN)
A network that covers a wide area, such as several buildings or cities.
Internet
Largest wide area network in existence, incorporating an almost uncountable number of networks and hosts across the world.
Hypertext
A method of organizing information in which data sources are interconnected through a series of hyperlinks that users activate to jump from one data source to another.
Hyperlinks
A link within a hypertext document that can be activated to access a data source.
World Wide Web
The totality of interconnected hypertext documents on the Internet.
Web servers
A server that makes web pages accessible to the network.
Web pages
A document stored by a web server and accessed by a web browser.
Web browser
A software program that retrieves and displays web pages.
HTML (Hypertext Markup Language)
A markup language that supports the tagging of distinct document elements and connecting documents through hypertext links.
Markup language
A language that describes the content and structure of a document by tagging different document elements.
Syntax
The rules governing how a language should be used and interpreted.
World Wide Web Consortium (W3C)
A group of web designers and programmers that set the standards or specifications for browser manufacturers to follow.
HTML 4.01
The fourth version of HTML, released in 1999, that provided support for multimedia, online commerce, and interactive scripts.
XHTML (Extensible Hypertext Markup Language)
A version of HTML in which syntax standards are strictly enforced.
Web Hypertext Application Technology Working Group (WHATWG)
A group formed in 2004 to develop HTML 5 as a rival version to XHTML 2.0.
HTML 5
The latest version of HTML, compatible with earlier HTML releases.
Deprecated
The features and code from earlier HTML versions that have been phased out and are either no longer supported or developed.
IDE (Integrated Development Environment)
A software package providing comprehensive coverage of all phases of the HTML development process.
Web Content Management System (wcms)
Provides authoring tools for website content and administration. Example: Wordpress
Web Framework
Software that provides the foundation for the design and deployment of web technologies including HTML, databases, and web server programs for managing electronic commerce and communication.
Validators
A program that tests code to ensure that it contains no syntax errors. (there is one available on W3C Website) BrowserStack, Browsera, CrossBrowserTesting
1st line in an HTML file
Document Declaration or “doctype”. HTML 5 doctype:
<!DOCTYPE html> <!doctype html>
Quirks mode
An operating mode in which the browser renders the web page based on styles and practices from the 1990s and early 2000s. (For older HTML files without a doctype)
Standards mode
An operating mode in which the browser renders the web page in line with the most current HTML specifications. Always put an HTML 5 file in standards mode by including the doctype.
Element tag
The fundamental building block of an HTML file, used to mark every document element.
Starting tag
The tag that marks the start of the element content.
Ending tag
The tag that marks the end of the element content.
General syntax of a two-sided element tag
<element>content</element>
<p> Paragraph element
</p>
<p>Welcome to Curbside Thai.</p>
Empty elements
An element that is either nontextual (images) or contains directives to the browser about how the page should be treated.
One-sided element tag
A tag used for empty elements, containing no closing tag.
<element></element>
or <element></element>
line break tag
<br></br>
Nested elements
An element contained within another element.
emphasized text tag
<p>Welcome to <em>Curbside Thai</em>.</p>
General structure of an HTML file
<!DOCTYPE html >
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>
Element attributes
The part of an element that provides information to the browser about the purpose of the element or how the element should be handled by the browser.
General syntax of an element attribute within a two-sided tag
<element attr1=”value1” attr2=”value2” … />
content
</element>
General syntax of an element attribute within a one-sided tag
<element attr1=”value1” attr2=”vlue2” …/>
class=“text”
Defines the general classification of the element
dir=“ltr|rtl|auto”
Defines the text direction of the element content as left-to-right, right-to-left, or determined by the browser
hidden
Indicates that the element should be hidden or is no longer relevant
id=“text”
Provides a unique identifier for the element Example:
<p>Welcome to Curbside Thai.</p>
lang=“text”
Specifies the language of the element content
style=“definition”
Defines the style or appearance of the element content
tabindex=“integer”
Specifies the tab order of the element (when the tab button is used to navigate the page)
title=“text”
Assigns a title to the element content
Attribute Minimization
Supported by HTML for element attributes that do not require an attribute value.
(Attribute Minimization Cont’d) For example, the hidden attribute used in the following code does not require a value; its mere presence indicates that the marked paragraph should be hidden in the rendered page.
<p>Placeholder Text</p>
White-space character
An empty or blank character such as a space, tab, or line break.
White-space character cont’d
It doesn’t matter how you lay out your HTML code because the browser is only interested in the text content and not how that text is entered. This means you can make your file easier to read by indenting lines and by adding extra white-space characters to separate one code block from another. However, this also means that any formatting you do for the page text to make the code more readable, such as tabs or extra white spaces, is not transferred to the web page.
An Important Note About HTML
HTML does not describe the document’s appearance, it only describes the document’s content and structure.
Metadata
Content that describes the document or provides information about how the document should be processed by the browser.
Base
Specifies the document’s location for use with resolving relative hypertext links
Link
Specifies an external resource that the document is connected to
meta
Provides a generic list of metadata values such as search keywords, viewport properties, and the file’s character encoding
Script
Provides programming code for programs to be run within the document
Style
Defines the display styles used to render the document content
Title
Stores the document’s title or name, usually displayed in the browser title bar or on a browser tab
Title element cont’d
<title>document title</title>
Meta element structure
<meta></meta>
(Meta) charset=“encoding”
Specifies the character encoding used in the HTML document
(Meta) content=“text”
Provides the value associated with the http-equiv or name attributes
(Meta) http-equiv=“content-type|default-style|refresh”
Provides an HTTP header for the document’s content, default style, or refresh interval (in seconds)
(Meta) name=“text”
Sets the name associated with the metadata
Meta element example:
<meta></meta>
Character encoding
The process by which the computer converts text into a sequence of bytes and then converts those bytes back into characters.
UTF-8
The most common character encoding in present use.
<meta></meta>
To define the character encoding used in the document, enter
<meta></meta>
To define search keywords associated with the document, enter
<meta></meta>
Comment markup
<!-- comment -->
Example: <!-- General Information About Curbside Thai -->
Comment markup cont’d
Always include comments when working with a team so that you can document the development process for other team members.
Conditional Comment
An Internet Explorer extension that encloses content that should only be run by particular versions of Internet Explorer.
Conditional Comment general form
<!-- [if operator IE version]>
content
<![endif] -->
Logical operators
lte (less than or equal to), gt (greater than), gte (greater than or equal to), ! (not)
Ordered list
A list that is used for items that follow some defined sequential order.
Ordered list general structure
<ol>
<li>item1</li>
<li>item2</li>
...
</ol>
(ol - ordered list. li - list item.)
To display reversed numbering in an ordered list
Use reversed and start attributes Example: <ol reversed start="50">
Unordered lists
A list that is used for items that do not follow a defined sequential order
Unordered list general structure
<ul>
<li>item1</li>
<li>item2</li>
...
</ul>
(ul - unordered list.)
Nested list
A list that is placed inside another list.
The general structure for a nested collection of unordered list
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
Description List
A list of terms and matching descriptions.
The general structure of a description list is
<dl>
<dt>term1</dt>
<dd>description1</dd>
<dt>term2</dt>
<dd>description2a</dd>
<dd>description2b</dd>
...
</dl>
Navigation list
An unordered list of hypertext links placed within the nav element.
The general structure of a navigation list is
<nav>
<ul>
<li>link1</li>
<li>link2</li>
...
</ul>
</nav>
Hypertext
Created by enclosing content within a set if opening and closing <a> tags in the following structure:
<a>content</a></a>
url (Uniform Resource Locator)
a standard address format used to link to a variety of resources including documents, email addresses, telephone numbers, and text messaging service.
Rollover effect
An effect in which the page appearance changes as the user hovers the mouse pointer over a hypertext link.
Root folder
The folder at the top of the folder hierarchy, containing all other folders.
absolute path
a path that starts from the root folder and processes down the entire folder structure described with the expression:
/folder1/folder2/folder3/file
