HTML (HyperText Markup Language) Flashcards
HyperText markup language (HTML)
is the standard markup language for web documents.
Hypertext is text that has links to other text (and today to images, videos, and more). Document markup is special markings in the document that provide additional information about links, formatting, and images. HTML also permits adding metadata like search engine keywords, author information, and language.
The language used for a text file that describes a webpage
HTML
The HyperText Markup Language has text with links (hypertext) to other files on the web.
Web document that is viewed in a web browser.
Webpage
A webpage may link to other webpages.
Collection of related webpages.
Website
A website may be composed of any number of webpages.
A program that serves webpages to browsers.
Web Server
Popular web servers today include Apache, IIS, and nginx.
The protocol for transferring files among computers via the web.
HTTP
Short for HyperText Transfer Protocol. A protocol is a set of rules.
A program for viewing webpages.
Browser
A browser displays HTML files in a formatted way.
Specifies document structure
HTML is used to specify the purpose of each part of a document. Each web browser has a default stylesheet that controls how the page is displayed, but HTML does not specify how the document parts are displayed.
Manages document presentation
CSS consists of a set of style rules about how to display the parts of a document.
Enables document interaction
JavaScript is a programming language that can manage any part of the document and interact with external servers to send and receive information. JavaScript sometimes also runs on web servers.
top-level domains (TLD)
.com
.net
.org
.gov
.edu
country code top-level domain (ccTLD)
.ru(Russia)
.uk(United Kingdom)
.de(Germany)
second-level domain
A second-level domain is commonly an organization’s name as in Stanford.edu, or indicates the purpose of a website as in DoPython.org
Third-level domain
A common third-or-www refers to the organization’s web server. deeper-level domain is www, short for World Wide Web, usually referring to an organization’s web server. Many organizations use www optionally, so stanford.edu by default goes to www.stanford.edu
Third-level and further level domains refer to sub-computer systems local to an organization, as in cs.stanford.edu where the cs is for Stanford’s Computer Science department
URL (Uniform Resource Locator)
is the location of a web resource on the web, such as http://www.cdc.gov/alcohol/faqs.htm
web resource
is any retrievable item, like an HTML file, image, video, CSS stylesheet, etc
Scheme
Characters at the beginning of a URL followed by a colon “:” or a colon and double slashes “://”. Common URL schemes include http, https, mailto, and file.
Ex: In https://www.cdc.gov/alcohol, the scheme is “https”.
Hostname
The complete domain name following the scheme in a URL.
Ex: In https://www.cdc.gov/alcohol, the hostname is “www.cdc.gov”.
Path
The characters to the right of the hostname in a URL.
Ex: In https://www.cdc.gov/alcohol, the path is “/alcohol”.
Query string
Optional characters to the right of the question mark (?) in a URL that provide data for the web server.
Ex: In https://www.youtube.com/watch?v=uu7XCEMdSHg, the characters after the ? tells YouTube’s server to play a video having code uu7XCEMdSHg
Fragment
Optional characters at the end of a URL that start with a hash character (#) and refer to a certain location within a webpage.
Ex: In https://en.wikipedia.org/wiki/#History, the fragment “#History” refers to the webpage’s History section.
404
means that the website was reached (the domain name is valid and the web server is working), but the web server could not find the requested page, often due to a misspelling or out-of-date page link.
HyperText Transfer Protocol (HTTP)
is a networking protocol that runs over TCP/IP and governs communication between web browsers and web servers
Transmission Control Protocol/Internet Protocol (TCP/IP)
is a protocol suite that governs how data packets are transferred over the Internet from one machine to another
HTTP/1.1
is the HTTP standard used for most of the web’s lifetime
HTTP/2
a relatively new HTTP standard that speeds-up the transfer of information between web browsers and web servers. HTTP/2 maintains most of HTTP/1.1’s semantics
HTTP/3
currently in development, improves the speed of HTTP/2 by using UDP to transport data packets instead of TCP
HTTP request
is a message sent from the web browser to the web server. Often the request asks the web server to send back a web resource like an HTML file, image, CSS style sheet, JavaScript file, or video
HTTP response
is a message sent from the web server back to the web browser in response to an HTTP request. Often the response contains the requested web resource
Content-length
Number of bytes in the response’s message body
Content-type
Media type of the response’s message body
Date
Datetime the response was generated by the web server
Last-Modified
Datetime the requested resource was last modified on the web server
Server
Identifies the web server software that generated the response
Host
The domain name for the requested path
User-Agent
Identifies the browser making the request
Internet Assigned Numbers Authority (IANA)
is a standards organization that manages various internet numbers and symbols, like global IP address allocation, root zone management in DNS, and media types. IANA maintains a list of HTTP headers that are currently active, obsolete, or experimental
GET (request method)
Request a representation of the specified resource
HEAD (request method)
Request a response identical to GET but without the response body
POST (request method)
Request the web server to accept the message body enclosed in the request as a new resource
PUT (request method)
Request the web server to accept the message body enclosed in the request as a modification of an existing resource
DELETE (request method)
Request the web server to delete the existing resource
200
OK
Standard response for a successful request
301
Moved Permanently
The resource should always be requested at a different URL
302
Found
The resource should temporarily be requested at a different URL
304
Not Modified
The resource has not been modified since the last time the resource was requested
403
Forbidden
The web browser does not have permission to access the resource
404
Not Found
The resource could not be located
500
Internal Server Error
Something unexpected happened on the web server
Transport Layer Security (TLS)
HTTPS uses TLS, which uses asymmetric public keys to encrypt data between the browser and web server
A web design approach that creates webpages that automatically move and resize parts depending on the display size and orientation
Responsive web design
requires careful design and typically uses software frameworks to simplify development
Visual clues that guide the user in figuring out how to use an app
Affordances
a term invented by usability expert Donald Norman, are harder to implement for mobile devices. For instance, few mobile devices support a touch screen equivalent of hovering with a mouse. So, hovering-based interfaces like tooltips are unavailable on touch based devices.
A web development approach that advocates first creating a reduced-feature version of a website for mobile users. Then, the developer creates a full-featured website for visitors using desktop computers
Mobile First
Internet of Things (abbreviated as IoT)
is the global collection of communicating devices that sense and control technology on behalf of humans
h1, h2, h3
Headers. h1 is largest.
Ex: <h2>Puppies are cute</h2>
p
Paragraph
Ex: <p>Humans seem designed to see puppies as cute.</p>
em, strong
Emphasis, strong emphasis
<p>"When in <strong>doubt</strong>, tell the <em>truth</em>" -Mark Twain.</p>
img
Image
Ex: <img></img>
Note: src is the image’s URL source, and alt describes the image.
a
Link
Ex: <a>Click Here</a>
Cascading Style Sheets (CSS)
is a textual language for describing how a webpage is styled for visual presentation. CSS controls the look and layout of webpage content.
R
a programming language built for statistical analysis, graphics representation, and reporting;
an interpreted computer language that allows branching, looping, modular programming, as well as object and functional oriented programming features.
is arguably the most widely used statistics programming language and is used from universities to business applications
Hypertext
Text that contains connections to other documents.
Markup
Part of a document that explains how to interpret or structure other parts of the document.
Language
A set of rules describing how to write HTML.
HTML tag
is a markup instruction identified by <, the tag name, and >
Opening tag
indicates the starting point in the document where the tag takes effect.
Closing tag
indicates the ending point in the document where the tag stops having an effect.
<!DOCTYPE html>
The document starts with <!DOCTYPE html>, which instructs the browser how to interpret the rest of the document.
<html>
<html>
</html></html>
The <html> opening and closing tags mark the beginning and ending of the document. The lang attribute indicates the document’s language is English.
<head>
</head>
The <head> opening and closing tags enclose the <meta></meta> and <title> tags.</title>
<meta></meta>
The <meta></meta> tag specifies metadata, which is data that describes the document’s data. <meta></meta> describes how characters are represented in the HTML document. Additional <meta></meta> tags may be used to indicate when the document was saved, who the author is, etc.
<title>
</title>
The <title> opening and closing tags enclose the name of the document. The title is usually displayed in the browser's titlebar, is used by search engines, and is used for bookmarking.</title>
<body>
</body>
The <body> opening and closing tags enclose the document’s contents. The browser displays the document body in the webpage.
<br></br>
The <br></br> tag creates a line break in a paragraph. Good practice is to use <br></br> when the line break is essential to the content, such as lines in a poem or mailing address, and not just to add spacing for formatting a webpage.
<br></br><br></br>
A<br></br><br></br>B creates a blank line between A and B. Ex:
A
B
<section>
</section>
A section is a collection of related content. Many documents can be organized into sections, with each section being wrapped in a <section> tag.
<h4>
</h4>
The <h4> tag is the fourth level heading of the document’s hierarchical structure.
<em></em>
The <em> tag indicates emphasized text, such as text having an emphasized pronunciation when spoken, and is italicized by default.</em>
<strong></strong>
The <strong> tag indicates text that has strong importance, and is bolded by default.</strong>
<cite></cite>
The <cite> tag denotes a title, such as a book or song title, and is italicized by default. Ex: <cite>Spaceballs</cite> is a parody of the <cite>Star Wars</cite> trilogy. yields: Spaceballs is a parody of the Star Wars trilogy.</cite>
<mark></mark>
The <mark> tag denotes important content that should be semantically highlighted and is rendered with a yellow background by default. Ex: <mark>Highlight</mark> what is important. yields: Highlight what is important.</mark>
<b></b>
The <b> tag indicates text that needs attention, like key words in a document abstract or product names in a review, and renders the text in bold. Ex: Mix the flour and oil together.</b>
<i></i>
The <i> tag indicates text in an alternative voice, such as a word or phrase in a foreign language, and is rendered using italics. Ex: Dashi is a stock used in Japanese cooking.</i>
<u></u>
The <u> tag denotes text that should appear differently from normal text, such as misspelled words, and is underlined by default. Ex: Misspelled is often misspelled as mispelled.</u>
<!-- comment -->
An HTML comment is a portion of the document that is not displayed by the browser.
unordered list
An unordered list is a collection of items, usually indented and shown using bullets, surrounded by the <ul> opening and closing tags. Each list item is surrounded by <li> opening and closing tags.
<tr> (table row)
</tr>
The <tr> opening and closing tags create a table row, which contains all the row’s cells.
<th> (table header)
</th>
The <th> opening and closing tags create a new table cell containing table header information about the data. Usually, the browser displays table headers centered with a bold font.
<td> (table data)
</td>
The <td> opening and closing tags create a new table cell containing table data.
<caption> (table caption)
</caption>
A table caption defines a short descriptive text for a table and is created with <caption> tags. The caption opening and closing tags must immediately follow the opening table tag.
<thead> (table headers)
</thead>
The <thead> tags surround the rows that define the table header.
<tbody> (table body)
</tbody>
The <tbody> tags surround the rows that define the table body.
<tfoot> (table footer)
</tfoot>
The <tfoot> tags surround the rows that define the table footer.
Absolute URL
is a complete URL.
Ex: <a>test</a> is a hyperlink using the absolute URL http://example.com/test.html.
Relative URL
specifies the relative path to the web resource with no scheme or hostname.
Ex: <a>test</a> uses the relative URL test.html to refer to an HTML document on the same website and with the same path as the current HTML document.
fragment
A URL can point to a section, or fragment, of a document by adding a hash tag (#) and a fragment identifier at the end of the URL.
Ex: https://en.wikipedia.org/wiki/Computer_science#History refers to the “History” section of the “Computer_science” page on Wikipedia.
Id attribute
Adding the id attribute to any HTML tag creates a fragment identifier, permitting URLs to link directly to the id’s location in the document.
graphical hyperlink
A graphical hyperlink or image link uses an image inside a hyperlink instead of text. Ex: <a><img></img></a>
_self
The _self attribute value is the default and indicates the browser will open the link in the same tab or window.
_blank
The _blank attribute value indicates the browser will open the link in a new tab or window.
target attribute
An anchor tag’s target attribute indicates how the browser should display the link when clicked.
Entity
An entity is a mechanism for writing special characters or symbols in HTML, such as mathematical symbols, characters in most languages, and many other symbols.
©
Entity name
©
Decimal number
©
Hexadecimal number
non-breaking character
A non-breaking character is an inter-word character that permits treating the words on both sides to be one word.
(non-breaking hyphen)
A non-breaking hyphen, , looks like a regular hyphen but acts like a normal character in the middle of a word. Ex: offcampus displays “off‑campus” on the same line.
(non-breaking space)
A non-breaking space, , looks like a single space but acts like a normal character in the middle of a word. Ex: 5 km displays “5 km” on the same line.
wireframe
A wireframe is a blueprint, showing where the future content will be arranged.
Container
A container is any part of a web document body that has opening and closing tags.
parent container
A parent container is the container in which another element resides.
<div>
</div>
A <div> element is a generic element for creating block containers to facilitate managing page content and is the only block element with no semantic meaning, unlike other block elements such as <p> and <table>.
<span></span>
The <span> element is the generic element for creating inline containers to facilitate managing content on the page. Unlike other inline elements, such as <a> and <em>, the <span> element has no semantic meaning.</span></em></a></span>
<form>
</form>
The <form> tag allows the web browser to submit information from the user to the server.
action attribute (form attribute)
The action attribute indicates the URL where the form data should be sent. Typically the URL uses HTTPS so the form data is encrypted.
method attribute (form attribute)
The method attribute indicates the HTTP request type the browser will use to communicate with the server. The method is either GET or POST. GET is the default method if no method is specified.
GET method
The GET method is a technique used by a web browser to submit information to a web server by altering the URL of the HTTP request.
query string
The query string is a set of name=value pairs separated by the ampersand character (&).
Ex: first=Rick&last=Deckard
POST method
The POST method is a technique used by a web browser to submit information to a web server by sending the information in the HTTP request body.
enctype attribute
The <form> tag’s enctype attribute value “multipart/form-data” indicates the web browser should split a POST request into multiple parts, where each input field is sent as a separate part of the HTTP request message.
widget
A widget is an interactive component (usually graphical) that the browser uses to interact with a user. Ex: Buttons, drop-down menus, and data entry fields.
<input></input>
The <input></input> tag allows the user to enter information into a web page.
type attribute (input attribute)
The type attribute indicates the widget type. Common types include text, password, submit, and button.
name attribute (input attribute)
The name attribute names the widget and sends the widget’s value when the widget’s form is submitted.
id attribute (form attribute)
The id attribute is used to give a widget a unique identifier.
placeholder attribute (form attribute)
The placeholder attribute specifies text that first appears in a text widget, typically for giving the user a hint as to the expected value.
value attribute (form attribute)
The value attribute specifies a default value for a widget.
<label></label>
The <label> tag displays descriptive text associated with a specific widget.</label>
A label has a for attribute whose value should match the id attribute for the widget being labeled.
<textarea>
</textarea>
A text area widget is an input element specified by <textarea> opening and closing tags that allows users to enter multiple lines of text.</textarea>
<select></select>
The <select> opening and closing tags create a drop-down menu (or drop-down list), which allows users to select one of several predefined values.</select>
<option></option>
The <option> opening and closing tags create a value, or option, the user can select within a drop-down menu.</option>
checkbox
A checkbox is a widget for input elements with the type attribute of “checkbox”, which allows users to check, or select, a value. A checkbox initially appears selected if the checked attribute is set. Ex: <input></input>
radio button
A radio button is a widget for input elements with the type attribute of “radio”, which allows users to select exactly one value from possibly many values.
list box
A list box widget is created by specifying a size with the select element’s size attribute. Ex: <select> creates a list box that shows four options at a time.</select>
<button></button>
A button widget can be created using the <button> opening and closing tags or with <input></input>. The <button> element allows text and images to be displayed in a button, but an <input></input> button only allows text.</button></button>
password
A password field is a widget for input elements with the type attribute of “password”, which allows users to enter a password without the password contents being displayed on-screen.
Ex: <input></input>
<fieldset> & <legend>
</legend></fieldset>
The <fieldset> tag groups related form widgets together and draws a box around the related widgets. The <legend> tag defines a caption for a <fieldset>.
Ex: <fieldset>
<legend>Favorite Sitcom</legend>
Picker
An input picker is a widget that allows the user to interactively pick a choice using a popup or other guided selection method.
maxlength
Sets the maximum number of input characters.
<!-- Only 4 chars max can be entered -->
<input></input>
max
Sets the maximum value that the input can have.
<!-- Number may not exceed 212 -->
<input></input>
min
Sets the minimum value that the input can have.
<!-- Date may not be earlier than July 4, 1976 -->
<input></input>
pattern
Provides a pattern (called a regular expression) that the input must match.
<!-- Value must be A, B, or C followed by single digit -->
<input></input>
required
States that the input is required and must not be left empty.
<!-- At least one character must be entered -->
<input></input>
step
Sets the amount by which the value can change.
<!-- Number is changed by multiples of 5 -->
<input></input>
fallback
A fallback is a mechanism that allows a web page element to function correctly even if the browser does not support a particular element. Good practice is to implement a fallback mechanism if a particular widget is not widely supported by browsers at the time.
polyfill
A polyfill is a fallback using JavaScript code that makes certain HTML features (Ex: the date picker) work on browsers that do not natively support those features. Developers often use a JavaScript library such as Modernizr to detect which features the browser does not support, and then load one or more polyfills to provide fallback mechanisms for the non-supported features.
<iframe>
</iframe>
A YouTube video may be embedded in a web page with the <iframe> element. The <iframe> element allows a web page to be embedded in a rectangular area of the current web page. The <iframe> element uses the src attribute to specify the URL of the web page to display and the width and height attributes to define the width and height in pixels of the rectangular iframe.
