This is the (X)HTML tagging that holds the text information and other content, such as images. This defines the document structure, such as headings, paragraphs, etc.
Term
Layers Model of Web Design: Presentation
Definition
This is the CSS that styles the (X)HTML tags.
Term
Layers Model of Web Design:Behavior
Definition
JavaScript causes website changes based on actions that users take, based on time elapsing, etc.
Term
(HTML) 5
Definition
Hypertext Markup Language
Term
CSS
Definition
cascading style sheets
Term
Web standards
Definition
The standards body for the Web is the World Wide Web Consortium (W3C); their website is www.w3.org
Term
Element attributes
Definition
Most elements have attributes. Attributes are added to an element to provide the browser with more information about how the element should appear or behave. They always appear in the opening part of the element.
content
Term
Elements
Definition
Every web page is made up of structural markup called elements. An element is a structural component (such as a header) or a desired behavior (such as a line break). Elements are written as follows.
content
Term
HTML comments
Definition
Comments allow you to keep a section of code from rendering yet not have to remove it from the page. Comments are also helpful if you want to write something on the html page but not have it rendered (displayed).
NOTE: Comments will show up in the page source code
This is an uncommented p element
Comments are useful for including notes about your code
This is an uncommented p element
Term
how the internet works
Definition
The clients are the computers, tablets, and mobile devices that use the web applications. They access the web pages through programs known as web browsers. The web server holds the files that make up a web application.
Term
networks
Definition
A network is a system that allows clients and servers to communicate. The Internet in turn is a large Network that consists of many smaller networks.
Term
How a web page works
Definition
You have a device (computer, tablet, smart phone, etc) that has access to the Internet. When you enter a web address (otherwise known as Uniform Resource Locator (URL)) into the browser address bar and hit "enter," the device will send a request to a server (described later) requesting a file. The file will have a .html file extension it may have another type of file extension but we will only be concerned with .html for this class. For example, if you enter the url "space.wccnet.edu/~sshaper/courses/web110/home.php" into the browser address bar it will send a request to the server located at space.wccnet.edu. Then the server will look for the file "homepage.html", which will be located in the sshaper/web110 sub-directory. Once the file is found the server will send a response back which will contain the contents of that file. The file content will contain HTML (Hypertext Markup Language) code, which you will learn to write in this class. The browser on your device will interpret the code and display a web page.
Term
LAN
Definition
A local area networks (LAN) is a small network of computers that are near each other and can communicate with each other over short distances.
Term
WAN
Definition
In contrast, a wide area network (WAN) consists of multiple LANs that have been connected together over long distances using routers
Term
router
Definition
A router is a network device that forwards data packets from one network to another.
Term
HTML doctypes
Definition
Because there have been several versions of HTML, each web page should begin with a doctype declaration to tell a browser which version of HTML the page is using. Pages will render without a doctype but that is a bad practice and will cause validation problems. Validation refers to checking your code for compliance with the indicated specification. The final impact of a doctype is on the rendering mode used by the browser, which can have potentially significant consequences (either good or bad).
Term
HTML element
Definition
The tags are the next code to be added to your page. This is referred to as the root element for the page, since it holds all the rest of the code for the page and identifies it as HTML code.
Below is an example of the html element used in HTML5:
rest of your code goes here...
Term
Head elements
Definition
Inside are elements, which define (as you might guess) the head region of the document. The head element has two other elements nested within it. The title
Term
Meta elements
Definition
The meta element(s) help describe the document. In this case we are specifying the character set for the document, which is UTF-8 or Unicode. This is the preferred character set to use, because it incorporates a broad range of characters from various regional character sets. *see site for examples
Term
Commented section
Definition
The last part of the head element is a commented section used for older browsers like IE 8 which do not natively support HTML5, thus this code is added so the will render properly. Basically, this script adds the needed HTML5 elements via JavaScript
Term
block level element
Definition
Block-level elements are elements that occupy the entire horizontal (left to right) space within their parent element (the parent element is the element which contains them). Many times the parent element is the body element, which means that the block-level element extends to the edges of the browser window. Once a block element is closed (terminated) anything you write after the that element will appear on a new line.
Term
two caharcteristics of block level elements
Definition
The two characteristics of a block level element are: Extends the width of its parent element unless width has been applied via CSS Once terminated anything you write after that will be on a new line
Term
block level structure elements
Definition
Some block level elements just contain text (text only) while others can contain other block level elements (structure) and text, others that are more for lists. In this lesson we will look at the main structure block level elements What we mean by structure is they are the building blocks for our web pages.
Term
header
Definition
Some block level elements just contain text (text only) while others can contain other block level elements (structure) and text, others that are more for lists. In this lesson we will look at the main structure block level elements What we mean by structure is they are the building blocks for our web pages. Header
Term
nav bl lvl element
Definition
The nav element represents an area for navigation, usually the main nav. There can be multiple navs on a page. The nav element is written as:
Term
main bllvl element
Definition
The nav element represents an area for navigation, usually the main nav. There can be multiple navs on a page. The nav element is written as:
Term
footer b l elemet
Definition
A footer element is the main footer that is placed at the bottom of every page on the website. Or as the footer for an individual article or section within a page.
The footer element is written as:
Term
B lvl text elemets
Definition
Block Level Text Elements Some block level elements just contain text (text only) while others can contain other block level elements (structure) and text, others that are more for lists. In this lesson we will look at the main text only block level elements Headings
Term
headings (text level)
Definition
Block Level Text Elements Some block level elements just contain text (text only) while others can contain other block level elements (structure) and text, others that are more for lists. In this lesson we will look at the main text only block level elements Headings
Term
paragraphs
Definition
Heading elements represent the headings and subheadings in your document structure, there are six of them
Term
pre element
Definition
Text that is pre-formatted is surrounded by elements. What makes pre-formatted text unique is that white space inside the elements is preserved, rather than being collapsed down to a single space maximum between characters (as in regular code rendering). Pre-formatted text also does not wrap to new lines when the browser window is reduced in size; a horizontal scrollbar appears (if necessary). Browsers also put a line of margin space above and below pre-formatted content and render pre-formatted text in a monospace font (so that all characters are equal width).
Just a quick example...
...to show how pre-formatted text renders
notice I have have multiple spaces between words and lines
Term
blockquotes
Definition
The Blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form, but this may be changed via Cascading Style Sheets (CSS). This structural element is used for block quotations is coded as .
The cite attribute has no visual effect in ordinary web browsers, but can be used by search engines to get more information about the quotation.
Blockquotes can contain paragraph elements
A direct quotation from web developers:
We love HTML5!
Term
unordered list
Definition
Unordered List
Unordered lists are used for a group of items that do not posses a natural sequencing. They are coded as
. Each item in the list is surrounded by . The
elements have a line of margin space above and below them (on the top and bottom of the list); the actual list items are on separate lines but there is no extra vertical space between them.
Example of a simple unordered list
list item 1
list item 2
list item 3
list item 4
Term
nested unordered list
Definition
You can nest lists within lists
Be careful when nesting lists that the nested
is entirely within the holding it, as shown in the following example:
list item 1
list item 2
list item 3
sublist item 1
sublist item 2
list item 4
Term
ordered lists
Definition
Ordered lists are used for a group of items that have a natural sequencing. Ordered lists are coded as . Each item in the list is surrounded by . The elements have a line of margin space above and below them (on the top and bottom of the list); the actual list items are on separate lines but there is no extra vertical space between them.
Example of a simple ordered list
list item 1
list item 2
list item 3
list item 4
Term
definition lists
Definition
Definition lists are used for defining terms. As an example, these would be appropriate for glossaries. The outermost elements are
. Within the definition list are elements for the defined term (coded as ) and its description (coded as ). The
render with a line of margin space above and below. The elements typically have their content left-aligned. These elements cannot contain block-level elements. The elements typically have their content indented and on the line immmediately below the defined term. These elements can contain block-level elements.
Glossary
XHTML
Extensible Hypertext Markup Language, the structural markup of a web page
CSS
Cascading Style Sheets, which determines the presentation of a web page
Term
Inline elements
Definition
Inline elements are elements that surround text content. This could range from a single character to a paragraph or more. These elements extend only as far as their content; they do not extend across the entire width of their parent element like block-level elements. Inline elements do not create extra vertical space on the lines above or below (they lack margins) and do not force subsequent content to new lines. Inline elements can be nested inside other inline elements, as long as the inner set of elements is closed before the outer set of elements. Block-level elements cannot be nested inside inline elements because that violates proper document structure. Inline elements can, of course, be nested inside block-level elements. NOTE: All inline elements must be inside a block-level structure element.
Term
inline element note
Definition
NOTE: All inline elements must be inside a block-level structure element.
Term
code, variables and sample output
Definition
elements are used to mark up a piece of computer code that appears as part of your page content. Content is usually rendered in a monospace font (all characters are equal width). elements are used to mark up a variable that appears as part of your page content. Content is usually italicized. Sample elements are used to mark up sample output that appears as part of your page content. Content is usually rendered in a monospace font (all characters are equal width).
Term
sub and superscripts
Definition
Some content, such as mathematical and scientific information, needs to have subscripts or superscripts applied to communicate meaning. Other times you might be specifying footnotes. Subscripts are coded as . Superscripts are coded as .
Note that these will alter the spacing between lines of text because of the space needed for the superscript or subscript.
The chemical composition was O2 and H2, as referenced in the research3
Term
insert and deletion
Definition
Inserted and Deleted Text Example:
HTML5 is used for
structural
presentational markup.
Abbreviations
Term
abbrev.
Definition
Abbreviations are coded as and the title attribute is used for the full text. Browsers show the title value as a tooltip. Supportive modern browsers render the content inside the elements with a dotted underline. However, you can apply that style via CSS to allow for cross browser consistency. NOTE: That abbr element can be used for abbreviations and acronyms
Term
anchor element
Definition
The anchor element, coded as , serves as the foundation for the Web. It allows you to link pages together and create within page links. Anchors can be used to: Link together pages Move to a different location within the same page Launch email programs Open new browser windows Anchors are inline elements. They cannot be nested within each other.
Term
absolute link
Definition
Absolute links give the complete address to the document online. You must include the http:// for these to work properly. A sample absolute link is:
Visit the Google search engine
.
This is how the example table table-bordered table-striped
Visit the Google search engine
.
Or a navigation bar (the domain is www.sample.com):
Term
Relative links
Definition
Relative links use a partial address, based on the relationship between the current document and the document to load. Compared to absolute links, relative links are shorter and your domain can be changed without breaking links. You can also easily move files from one server to another without breaking links, as long as the directories maintain the same relative locations.
By default, all links are assumed to be relative unless http:// is specified. On Unix and Linux servers all directory and file names are case-sensitive so be careful to match capitalization properly in your code. You should avoid the capitalization all together and use small case only. Also be sure to NEVER use spaces in file and directory names they are replaced with %20 on those servers.
If you just specify the file name, the web server looks in the current directory:
All of the files referenced in the previous code would be in the same directory.
If you are moving up a directory level, specify ../ for every level you are moving up. Since a directory can only have one parent directory, ../ can only have one value.
If you wanted to reach a file named example.html two directory levels up, the code would be:
View the example
If you are moving down a directory level, you have to specify the exact directory name (remember that capitalization matters on some servers).
For example, if you wanted to reach a file named example2.html that is in the 'coding' subdirectory (which is inside the 'examples' directory), the code would be:
View the second example
Traversing Directory Structures
Term
image element
Definition
Images render as inline elements and are coded with the [image] element is simply a reference to the external graphic, telling it where to appear in the web page.
The attributes shown below are for the image element, they are in addition to the global attributes.
Term
image global element-alt
Definition
This is a required attribute and is essential for accessibility, as the alt attribute's value is read/output by adaptive technology such as screen readers and braille output devices.
The alt content will display when images are disabled in the browser or when images fail to load for some reason (e.g., a broken path to the image).
If the image has no meaning to the user or is used for formatting (such as a block of color), indicate alt="" so that adaptive technology skips over it; if you omit the attribute the file name is read/output and that is typically either confusing or simply of no explanatory value.
Term
image global element
Definition
Always specify a height so that pages render faster. If the height is omitted the browser needs an extra pass before determining the correct dimensions (thus causing the page to render twice).
In almost all cases you should use the actual height of the graphic for the value; while you could specify a larger or smaller height to scale the image this will usually cause distortion because the aspect ratio is off. All you need to do is enter the number, it will use pixels but you don't have to enter "px"
Term
image global element-width
Definition
Always specify a width so that pages render faster. If the width is omitted the browser needs an extra pass before determining the correct dimensions (thus causing the page to render twice).
In almost all cases you should use the actual width of the graphic for the value; while you could specify a larger or smaller width to scale the image this will usually cause distortion because the aspect ratio is off. All you need to do is enter the number, it will use pixels but you don't have to enter "px"
Term
image example
Definition
[image]
src="images/testimg1.jpg" - This is the location to where the image is located on the server
alt="tree and stream" - This is the alternative text for the image (helpful for screen readers)
width="180" - This is the width of the image
height="240" - This is the height of the image
For HTML5 the image needs to be in a block level element like a div tag
[image]
Term
image example x2
Definition
In this example I put the names of the images in a paragraph element and used a divisional element to contain each image. The images appear on top of one another because they are in divisional elements.
Picture 1:
[image]
Picture 2:
[image]
Term
JPEG (Joint Photographic Experts Group)
Definition
JPEG is a lossy compression method for digital photography. This compression method is used to get small file sizes for photos without losing too much quality.
Term
GIF (Graphics Interchange Format)
Definition
This image format has a palette of 256 RGB colors. It is mostly used for logos or images with large areas of the same color. GIF also has support for transparent pixels and animation. Never use this format for color photographs.
Term
PNG (Portable Network Graphics)
Definition
This is the only file format for the web that supports RGBA. This means that you can get true transparency in your images. Note that older browsers don’t support alpha transparency. PNG-8: An alternative to GIF. PNG-8 also has a palette of 256 colors and the filesize is often smaller than GIF. PNG-24: This format has real alpha transparency. This files are usually bigger than any other format.
Term
SVG
Definition
Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.
Term
IMAGE SIZE AND PPI
Definition
It is a common statement that all images should be saved at 72ppi (ppi stands for pixels per inch) for Mac and 96ppi for Windows for best viewing that is not true. A digital image, on its own, has no inherent resolution at all. It's just pixels. It has a certain number of pixels from left to right and a certain number from top to bottom. The width and height of an image, in pixels, is known as its pixel dimensions, and that's all a computer screen cares about. The size at which an image appears on your screen depends only on two things - the pixel dimensions of the image and the display resolution of your screen. As long as you've set your screen to its native display resolution as we discussed earlier, then an image will be displayed pixel-for-pixel. In other words, each pixel in the image will take up exactly one pixel on your screen. For example, a 640x480 pixel image would fill a 640x480 pixel area of your screen. An 800 pixel-wide banner on a website would appear 800 pixels wide on the screen. No more, no less. And no matter what you set the image's resolution to in Photoshop, whether it's 72 ppi, 300 ppi or 3000 ppi, it will have no effect at all on how large or small the image appears on the screen.
Term
COPYRIGHTS AND OTHER CONSIDERATIONS
Definition
You must always be careful of copyright when dealing with images. It is our professional, ethical, and legal responsibility to only use: Images where you own the copyright (for example, pictures or art you have created) Images in the public domain (these images can be freely used; consult Wikipedia or a site such as BurningWell.org). You can also get royalty free images from Google by going to the advanced settings, scroll down to usage rights, and select "free to use or share." For commercial sites select "free to use or share, even commercially" Images under some sort of licensing system (where you are meeting the licensing obligations, which could be as simple as citing the author/creator of the image) Images you have purchased (such as from a photo disc or online at a website such as Getty Images) At a minimum, always specify src, height, width, and an appropriate alt attribute value. Think carefully about the alt attribute value. Ask yourself what text would be helpful to hear aloud or have output in some other fashion to someone experiencing the site in a non-visual fashion.
Term
SPANNING COLUMNS
Definition
Spanning columns refers to joining together cells in a table to create a single larger cell. To span columns in a table, there is a colspan attribute that can be specified in either
or
. The value assigned to the colspan attribute is a number that represents the number of cells being joined together.
By default a cell has a colspan value of 1 (this is never specified in the code), so when you determine the number of cells to join together you always include the current cell. To ensure that columns are the desired width, be sure to give each individual column its width. Do not rely on assigning widths to colspanned cells only, since the browser is then given the choice of what widths to assign to each of the columns that are joined together.
Important: Whatever cells are spanned together, never have their separate
or
tags specified in the code. The colspan attribute takes care of that. If you should accidentally put in those cells, they will render as odd-looking orphaned cells to the right edge of the table (because that row would have more cells than it could handle). One helpful strategy when working with colspan is to know ahead of time how many cells are in a row. Then you can just count up the cells in each row to make sure they all reach the proper number
Term
COLSPAN EXAMPLE
Definition
An individual cell
An individual cell
An individual cell
An individual cell
An individual cell
A cell spanning 2 columns
A cell spanning 3 columns
An individual cell
A cell spanning 3 columns
An individual cell
An individual cell
An individual cell
An individual cell
An individual cell
An individual cell
A cell spanning 5 columns
.padding5 td{padding: 5px;}
Term
SPANNING ROWS
Definition
Spanning of rows uses the rowspan attribute, which is assigned to either
or
. Each cell automatically has a default rowspan of 1, so that is never specified. The rowspan attribute is more complicated than colspan because now you are merging together cells that are in the same column, yet exist in different rows. The colspan and rowspan attributes can also be used together to create a large cell that merges together cells both horizontally and vertically. Important: Just as with colspan, whatever cells are spanned together with rowspan never have their separate
or
tags specified. If they are specified, the extra cells will appear to the right side of the table.
Term
ROWSPAN EXAMPLE
Definition
An individual cell
An individual cell
An individual cell
An individual cell
An individual cell
A cell spanning 2 rows
An individual cell
A cell spanning 2 rows
An individual cell
A cell spanning 2 rows
An individual cell
An individual cell
An individual cell
A cell spanning 3 rows
A cell spanning 3 rows
A cell spanning 3 rows
An individual cell
An individual cell
An individual cell
An individual cell
An individual cell
.padding5 td{padding: 5px;}
Term
Definition
The td element written as
creates a single cell. For multi-cell tables, which most are, you need mulitple td elements.
Attributes of the td element
Attribute
Usage and Effect
Values Accepted
Default
Global Attributes
Attributes that can be used for all elements
N/A
N/A
colspan
Specifies the number of columns a cell should span
number
1
headers
Specifies one or more header cells a cell is related to. Discussed in Web Development 2
id value
N/A
rowspan
Sets the number of rows a cell should span
Term
table element
Definition
The first set of elements are
, which make up the entire table. All the rest of the table elements go within the table element
Attributes of the table element
Attribute
Usage and Effect
Values Accepted
Default
Global Attributes
Attributes that can be used for all elements
N/A
N/A
border
Border surrounding the table on all outer sides.
Sizing is in pixels. Not Obsolete but should use CSS instead
Term
table row
Definition
The tr element written as
creates what is called a table row. Table rows contain one or many th and td elements. Tables can have one or many table rows
Term
th-table header
Definition
see website http://space.wccnet.edu/~sshaper/courses/web110/lessons/?file=tables1
Term
th element global attributes
Definition
Global Attributes Attributes that can be used for all elements N/A N/A abbr Specifies an abbreviated version of the content in a header cell number 1 colspan Specifies the number of columns a cell should span text N/A headers Specifies one or more header cells a cell is related to. Discussed in Web Development 2 id value N/A scope Specifies whether a header cell is a header for a column, row, or group of columns or rows. Discussed in Web Development 2 col, colgroup, row, rowgroup N/A sorted Defines the sort direction of a column reversed, number, reversed number, number reversed (HTML5 draft not supported at this time) N/A rowspan Sets the number of rows a cell should span number
Term
Caption element
Definition
The caption element gives a title to the table. It is visual and provides a brief title for the table. It must go below the table element.
Term
thead, tbody, tfoot
Definition
Internet Explorer 3.0 first introduced this system for grouping rows so they can be treated as units by users agents or style sheets. The W3C included the row group elements in the HTML 4.0 Recommendation as a way to allow more meaningful labeling, improve accessibility, and provide more flexibility for applying style sheet properties. The rows in a table may be grouped into a table head (thead), a table footer (tfoot), and one or more table bodies (tbody). The head and footer should contain information about the document and may someday be used to display fixed elements while the body scrolls independently. Another possibility is that the table and foot would print on every page of a long table that has been divided over several pages.
Term
t head (thead)
Definition
Defines the row or rows that constitutes the head of the table. Must contain at least one tr element. One of the few elements allowed to go between table and tr. No visual effect on rendering. There is only one thead per table. Gecko-based browsers (e.g, Firefox) and IE 8 will print the rows within thead at the top of each page, assuming that the table content wraps across a page or pages. If you want all those rows to be styled in a particular fashion, 'thead' can be used as a selector. A class or id can also be applied. This allows you to style all of that content quickly and with minimal code. Below we have added the thead and change the css
Term
tbody
Definition
Defines a group of rows as the 'body' of the table. In most cases there is only one tbody but there can be multiple tbody elements pre table each grouping a set of rows. Must contain at least one tr element. One of the few elements allowed to go between /tr and the next tr element. There can be multiple table bodies (as many as desired); this allows you to style just a few rows using 'tbody' as the selector or by adding a class / id to a specific tbody. No visual effect on rendering.
Term
tfoot
Definition
Defines the foot of a table. tfoot should contain information about a table's columns. There is only one tfoot per table. Must contain at least one tr element. One of the few elements allowed to go between /tr and the next tr element. As of HTML5.1 the tfoot is to be below the tbody. In earlier versions of HTML5 and XHTML it was above the body just under the thead. Gecko-based browsers (e.g., Firefox) and IE 8 will print the rows within tfoot at the bottom of each page, assuming that the table content wraps across a page or pages. If you want all those rows to be styled in a particular fashion, 'tfoot' can be used as a selector or a class / id can be applied. Allows you to style all of that content quickly and with minimal code.
Term
grouping columns
Definition
The colgroup element is used to group columns in a table for formatting. It is useful for applying styles to entire columns, instead of repeating the styles for each cell. The colgroup element establishes a structural grouping in the columns, while col / references individual columns. The colgroup element appears before the first tr. The value for span is the number of columns included in the group. The col / elements are located inside of colgroup.
Term
video attributes
Definition
Attribute Definition preload pre-loads the video without playing preload="none" Will not pre-load the video autoplay Plays the video upon loading of the page controls Places a video controller at the bottom of the video. You can create separate buttons as well, but that is beyond the scope of this lesson
Term
.htaccess file
Definition
An .htaccess is a configuration file for use on web servers running the Apache Web Server software. When a .htaccess file is placed in a directory which is in turn 'loaded via the Apache Web Server', then the .htaccess file is detected and executed by the Apache Web Server software. NOTE: In order for it to work in all browsers I had to add the following to an .htaccess file created for the video element.
Term
html 5 audio
Definition
HTML 5 audio element allows you to play audio files within the browser without any third part plugins. There are two basic codecs used for the audio element they are ogg and mp3, mp3 is more popular. To create an audio element we start off with the audio element. Optionally the audio element has the following attributes (list is the more common attributes): Attribute Defintion muted Will mute the audio loop Will loop the audio preload Will pre-load the audio preload="none" Will not pre-load the audio autoplay Plays the audio upon loading of the page controls Creates and audio controller
Term
form
Definition
All of the form elements should be within the form element, which is block-level. There is one set of these elements per form. Forms cannot be nested. form method="post" action="somepage" !--form elements go here- form
Term
form, action & method
Definition
action Contains the path information to a server-side script that will be sent the form data when the form is submitted.
method Determines how form data is sent to the script.
Using "get" results in the form data being sent via the URL, which has length limitations.
Using "post" sends the data in the body of an HTTP POST request, which avoids the length limitations of "get" but cannot be bookmarked.
Term
label element
Definition
The label element, written as is used for accessibility. It allows someone with a screen reader to associate the element title (label) with the element. It is written one of two ways.
Either is surrounds an element
Or it is connect via the for and id attributes
Term
text input field
Definition
Text input fields allow for users to enter one line of text only.
Term
type attribute
Definition
Specifies the form element to render. text | password Always include "text" (even though this is the default you should still specify it)
If you specify "password" then the table table-bordered table-striped in the field is obscured by dots / asterisks (note: the table table-bordered table-striped is not encrypted so this only protects your table table-bordered table-striped from someone looking over your shoulder)
Term
name attribute
Definition
This is the variable name assigned to the table table-bordered table-striped; the script needs this information. Variable name (no spaces) Always include Always assign a unique value for text inputs because you do not want to lose table table-bordered table-striped.
Term
size attribute
Definition
Sets the width of the text input field in characters. Number without a unit (e.g., 12) Not required HTML 5, but can be used as a fallback if CSS is turned off Try different values and keep in mind that font size and font family impacts this (and fonts fail to inherit into form elements, so style the elements directly).
The CSS width property can also be used to size the element. If you set a width property still set a reasonable size attribute value as a fallback in case CSS is turned off.
Term
maxlength
Definition
Sets the maximum number of characters accepted by the text input field. Number without a unit (e.g., 12) Optional Consider the table table-bordered table-striped being entered, its formatting, and how many characters that would potentially involve (especially if internationalization is a factor).
Term
value
Definition
If you want some information to appear in the text box when the page loads, specify that text as the value for this attribute; if you don't want anything in the box leave this attribute out entirely - whatever the user specifies becomes the value. Character table table-bordered table-striped Optional Only specify this if you want pre-set text to appear in the text input field when the page loads.
Term
placeholder text
Definition
If you want some text to show up in the field but when the user starts typing in the field the text disappears Character table table-bordered table-striped Optional Use this to indicate to the user what to enter in the box
Term
disabled text
Definition
Prevents the form element from being used. It cannot receive focus, be tabbed to, or have table table-bordered table-striped entered by the user. table table-bordered table-striped is not sent to the script when the form is submitted.
JavaScript can still modify the form element value. disabled Optional
Browsers differ in their default styling, so test cross-browser and style via CSS accordingly to avoid confusing users (field should be grayed out, for example).
Term
readonly attribute
Definition
Prevents the form element from having table table-bordered table-striped entered or modified. The element can receive focus, be tabbed to, and its table table-bordered table-striped is sent when the form is submitted.
Typically table table-bordered table-striped changes to readonly fields are via JavaScript. readonly Optional
Browsers differ in their default styling, so test cross-browser and style via CSS accordingly to avoid confusing users (field should be grayed out, for example).
Term
tex box name
Definition
This is the variable name assigned to the table table-bordered table-striped; the script needs this information. Variable name (no spaces) Always include Always assign a unique value for textarea boxes because you do not want to lose table table-bordered table-striped.
Term
tx box (rows)
Definition
Sets the height of the box in rows.
In most browsers the box will never occupy more than this amount of vertical space in the browser window (Safari and Chrome allow resizing). Number without a unit (e.g., 12) Not required HTML 5, but can be used as a fallback if CSS is turned off At your discretion; try different values and keep in mind that font size and font family impacts this (and fonts fail to inherit into form elements, so style the elements directly)
The CSS height property can be used instead, but you should still specify the rows attribute as a fallback in case CSS is disabled. The CSS property will override the HTML5. attribute.
Term
tx box column (cols)
Definition
Sets the width of the box in characters.
In most browsers the box will never occupy more than this amount of horizontal space in the browser window (Safari allows resizing). Number without a unit (e.g., 12) Not required HTML 5, but can be used as a fallback if CSS is turned off At your discretion; try different values and keep in mind that font size and font family impacts this (and fonts fail to inherit into form elements, so style the elements directly)
The CSS width property can be used instead, but you should still specify the cols attribute as a fallback in case CSS is disabled. The CSS property will override the HTML5. attribute.
CSS (Cascading Style Sheets) is a language that is intended to be used in conjunction with HTML5 and other structured document formats, such as XML. CSS controls presentation of information and is not concerned with its structure. Structure is entirely controlled by HTML5.
Term
syntax and terms
Definition
Each instruction for a given selector(s) (including the selector(s)) in CSS is referred to as a rule.
The declarations are always inside a single set of curly braces { } Follow each property with a colon. If there are two (or more) words in a property name, they are always separated by hyphens. Follow every declaration with a semicolon, as that indicates the end of one and the beginning of the next.
Each rule contains selectors and declarations. Selectors specify what will be affected by the CSS; declarations specify what the presentation will be. In the prior example these are: Selector: h1 Declaration: font-size: 16px There can be multiple declarations for a rule this is known as a declaration block. h1 {font-size: 16px;}
