HTML Flashcards
1- BASIC:
1) All HTML DOCUMENTS must start with a document type declaration: !DOCTYPE html>.
2) The HTML document itself begins with html> and ends with /html>.
3) The visible part of the HTML document is between >body> and >/body>.
4) HTML HEADINGS are defined with the <h1> to <h6> tags.
5) <h1> defines the most important heading. <h6> defines the least important heading:
6) HTML headings are defined with the <h1> to <h6> tags.
7) HTML PARAGRAPHS are defined with the </h6></h1></h6></h1></h6></h1><p> tag
7) HTML LINKS are defined with the <a> tag. The link’s destination is specified in the href attribute.
8) HTML IMAGES are defined with the <img></img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes.
9) HTML BUTTONS are defined with the tag
10) HTML LISTS are defined with the <ul> (unordered/bullet list) or the </ul><ol> (ordered/numbered list) tag, followed by <li> tags (list items).</li></ol></a></p>
2- HTML Elements
1) An HTML element usually consists of a start tag and an end tag, with the content inserted in between:
tagname>Content goes here…/tagname>
2) Nested HTML Elements: HTML elements can be nested (elements can contain elements).
3) Do Not Forget the End Tag
4) HTML elements with no content are called empty elements. <br></br>
5) HTML Is Not Case Sensitive: HTML tags are not case sensitive: <p> means the same as </p><p>.</p>
3- HTML Attributes
1) All HTML elements can have attributes
2) ATTRIBUTES provide additional information about an element
3) Attributes are always specified in the start tag
4) Attributes usually come in name/value pairs like: name=”value”
5) HTML LINKS are defined with the <a> tag. The link address is specified in the href attribute.
6) HTML IMAGES are defined with the <img></img> tag. The filename of the image source is specified in the src attribute
7) HTML images also have WIDHT AND HEIGTH ATTRIBUTES, which specifies the width and height of the image. The width and height are specified in pixels by default; so width=”500” means 500 pixels wide.
8) The ALT attribute specifies an alternative text to be used, if an image cannot be displayed.
9) The value of the alt attribute can be read by screen readers. This way, someone “listening” to the webpage, e.g. a vision impaired person, can “hear” the element.
10) The STYLE ATTRIBUTE is used to specify the styling of an element, like color, font, size etc.
11) The LANGUAJE of the document can be declared in the tag. The language is declared with the lang attribute. Declaring a language is important for accessibility applications (screen readers) and search engines. The first two letters specify the language (en). If there is a dialect, add two more letters (US).
12) A TITLE ATTRIBUTE is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph.</a>
13) We Suggest: Use Lowercase Attributes. The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE. W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
14) We Suggest: Quote Attribute Values: The HTML5 standard does not require quotes around attribute values. For intance the href attribute can be written without quotes.
15) Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes.
_______________
Chapter Summary
- All HTML elements can have attributes
- The title attribute provides additional “tool-tip” information
- The href attribute provides address information for links
- The width and height attributes provide size information for images
- The alt attribute provides text for screen readers
At W3Schools we always use lowercase attribute names
At W3Schools we always quote attribute values</p></a>
4- HTML Headings
1) HEADINGS are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
2) Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property: h1 style = "font-size: 60px;
3) The <hr></hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr></hr> element is used to separate content (or define a change) in an HTML page</h6></h1>
</h6></h1>
5- BASIC STRUCTURE:
> !DOCTYPE html>
html>
>head>
>/head>
>body>
h1 -This is a Heading- /h1
p -This is a paragraph.- /p
>/body>
>/html>
1) The !DOCTYPE html> declaration defines this document to be HTML5
2) The html> element is the root element of an HTML page
3) The head> element contains meta information about the document
4) The title> element specifies a title for the document
5) The body> element contains the visible page content
6) The h1> element defines a large heading
7) The p> element defines a paragraph
6- HTML Paragraphs:
> p>This is a paragraph. /p>
p>This is another paragraph. /p>
> pre> Element
Tag Description
<p> Defines a paragraph
<br></br> Inserts a single line break
</p>
<pre> Defines pre-formatted text</pre>
7- HTML Tags:
1) HTML tags are element names surrounded by angle brackets:
tagname>content goes here… /tagname>
2) HTML tags normally come in pairs like p> and /p>
3) The first tag in a pair is the start tag, the second tag is the end tag
4) The end tag is written like the start tag, but with a forward slash inserted before the tag name
8- The !DOCTYPE> Declaration:
- The !DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
- It must only appear once, at the top of the page (before any HTML tags).
- The !DOCTYPE> declaration is not case sensitive.
- The !DOCTYPE> declaration for HTML5 is:
!DOCTYPE html>
9- HTML History:
Year Version 1989 Tim Berners-Lee invented www 1991 Tim Berners-Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML Working Group defined HTML 2.0 1997 W3C Recommendation: HTML 3.2 1999 W3C Recommendation: HTML 4.01 2000 W3C Recommendation: XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 W3C Recommendation: HTML5 2016 W3C Candidate Recommendation: HTML 5.1 2017 W3C Recommendation: HTML5.1 2nd Edition
10- HTML Styles:
- Setting the style of an HTML element, can be done with the style attribute.
- Syntax: >tagname style=”property:value;”>
- The CSS BACKGROUND-COLOR property defines the background color for an HTML element.
>body style=”background-color:powderblue;”> - The CSS COLOR property defines the text color for an HTML element:
>h1 style=”color:blue;”>This is a heading>/h1>
>p style=”color:red;”>This is a paragraph.>/p> - The CSS FONT-FAMILY property defines the font to be used for an HTML element:
>h1 style=”font-family:verdana;”>This is a heading>/h1>
>p style=”font-family:courier;”>This is a paragraph.>/p> - The CSS FONT-SIZE property defines the text size for an HTML element:
>h1 style=”font-size:300%;”>This is a heading>/h1>
>p style=”font-size:160%;”>This is a paragraph.>/p> - The CSS TEXT-ALIGN property defines the horizontal text alignment for an HTML element:
>h1 style=”text-align:center;”>Centered Heading>/h1>
>p style=”text-align:center;”>Centered paragraph.>/p>
____________________
Chapter Summary - Use the style attribute for styling HTML elements
- Use background-color for background color
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
- Use text-align for text alignment
11- HTML Formatting Elements:
- Formatting elements were designed to display special types of text:
<b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text mark> Defines marked/highlighted text </del></ins> Defines inserted text</sup></sub></strong></small></i></em></b></sup></sub></ins></del></small></em></i></strong></b>
12- HTML Quotation and Citation Elements:
- The HTML element defines a short quotation:
(p>WWF’s goal is to: (q>Build a future where people live in harmony with nature.(/q>(/p> - The HTML <blockquote> element defines a section that is quoted from another source.
>p>Here is a quote from WWF’s website:>/p>
>blockquote cite=”http://www.worldwildlife.org/who/index.html”>
For 50 years, WWF has been protecting the future of nature.
>/blockquote> - The HTML <abbr> element defines an abbreviation or an acronym.
>p>The (abbr title=”World Health Organization”>WHO(/abbr> was founded in 1948.>/p></abbr>
- The HTML <address> element defines contact information (author/owner) of a document or an article. >address> Written by John Doe.(br> Visit us at:(br> >/address>
- The HTML <cite> element defines the title of a work.
>p>(cite>The Scream(/cite> by Edvard Munch. Painted in 1893.>/p></cite> - The HTML element defines bi-directional override.
>bdo dir=”rtl”>This text will be written from right to left>/bdo>
____________________
Tag Description
<abbr> Defines an abbreviation or acronym</abbr>
<address> Defines contact information for the author/owner of a document
Defines bi-directional override.
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
Defines a short inline quotation</cite></blockquote></address>
</abbr></cite></address></abbr></blockquote>
13- HTML Comments:
- You can add comments to your HTML source by using the following syntax:
>!– Write your comments here –>
14- HTML Colors:
- HTML COLORS are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
- COLOR NAMES: In HTML, a color can be specified by using a color name: Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray
- BACKGROUND COLOR: You can set the background color for HTML elements:
>h1 style=”background-color:DodgerBlue;”>Hello World>/h1>
>p style=”background-color:Tomato;”>Lorem ipsum…>/p> - TEXT COLOR: You can set the color of text:
>h1 style=”color:Tomato;”>Hello World>/h1>
>p style=”color:DodgerBlue;”>Lorem ipsum…>/p>
>p style=”color:MediumSeaGreen;”>Ut wisi enim…>/p> - BORDER COLOR: You can set the color of borders:
>h1 style=”border:2px solid Tomato;”>Hello World>/h1>
>h1 style=”border:2px solid DodgerBlue;”>Hello World>/h1>
>h1 style=”border:2px solid Violet;”>Hello World>/h1> - COLOR VALUES: In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
>h1 style=”background-color:rgb(255, 99, 71);”>…>/h1>
>h1 style=”background-color:#ff6347;”>…>/h1>
>h1 style=”background-color:hsl(9, 100%, 64%);”>…>/h1>
>h1 style=”background-color:rgba(255, 99, 71, 0.5);”>…>/h1>
>h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>…>/h1> - HTML RGB Colors:
1) RGB Value
rgb(red, green, blue)
rgb(255, 0, 0)
2) RGBA Value
rgba(red, green, blue, alpha)
- HTML HEX Colors:
HEX Value
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff - HTML HSL Colors
HSL Value
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white - SATURATION
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color. - LIGHTNESS
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white). - HSLA Value: HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
15- HTML Styles - CSS:
a) Styling HTML with CSS (stands for Cascading Style Sheets).
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
- CSS saves a lot of work. It can control the layout of multiple web pages all at once.
- CSS can be added to HTML elements in 3 ways:
1) Inline - by using the style attribute in HTML elements
2) Internal - by using a element in the section
3) External - by using an external CSS file
____________________
b) INLINE CSS - An inline CSS is used to apply a unique style to a single HTML element.
- An inline CSS uses the style attribute of an HTML element.
> h1 style=”color:blue;”>This is a Blue Heading>/h1>
____________________
c) INTERNAL CSS: is used to define a style for a single HTML page.
An internal CSS is defined in the section of an HTML page, within a element:
>!DOCTYPE html>
>html>
>head>
>style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
>/style>
>/head>
>body>
>h1>This is a heading(/h1>
>p>This is a paragraph.(/p>
>/body>
>/html>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
d) EXTERNAL CSS: An external style sheet is used to define the style for many HTML pages.
- With an external style sheet, you can change the look of an entire web site, by changing one file!
- To use an external style sheet, add a link to it in the section of the HTML page:
>!DOCTYPE html>
>html>
>head>
>link rel="stylesheet" href="styles.css">
>/head>
>body>
>h1>This is a heading>/h1>
>p>This is a paragraph.>/p>
>/body>
>/html>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
e) CSS FONTS: The CSS color property defines the text color to be used.
- The CSS font-family property defines the font to be used.
- The CSS font-size property defines the text size to be used.
>!DOCTYPE html>
>html>
>head>
>style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
>/style>
>/head>
>body>
>h1>This is a heading
>p>This is a paragraph.
>/body>
>/html>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
f) CSS BORDER: property defines a border around an HTML element:
p {
border: 1px solid powderblue;
}
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
g) CSS PADDING: The CSS padding property defines a padding (space) between the text and the border:
p {
border: 1px solid powderblue;
padding: 30px;
}
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
h) CSS MARGIN: The CSS margin property defines a margin (space) outside the border:
p {
border: 1px solid powderblue;
margin: 50px;
}
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
i) The ID ATTRIBUTE: To define a specific style for one special element, add an id attribute to the element:
> p id=”p01”>I am different(/p>
#p01 {
color: blue;
}
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
j) The CLASS ATTRIBUTE: To define a style for special types of elements, add a class attribute to the element:
> p class=”error”>I am different(/p>
then define a style for the elements with the specific class:
p.error {
color: red;
}
____________________
k) EXTERNAL REFERENCES: External style sheets can be referenced with a full URL or with a path relative to the current web page.
Example
(link rel=”stylesheet” href=”https://www.w3schools.com/html/styles.css”>
____________________
Chapter Summary
- Use the HTML style attribute for inline styling
- Use the HTML element to define internal CSS
- Use the HTML <link></link> element to refer to an external CSS file
- Use the HTML <head> element to store <style> and <link></link> elements
- Use the CSS color property for text colors
- Use the CSS font-family property for text fonts
- Use the CSS font-size property for text sizes
- Use the CSS border property for borders
- Use the CSS padding property for space inside the border
- Use the CSS margin property for space outside the border</style>
16- HTML Links:
- LINKS are found in nearly all web pages. Links allow users to click their way from page to page.
- HTML Links - Hyperlinks: HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
- Syntax: Hyperlinks are defined with the HTML <a> tag:
>a href=”url”>link text>/a>
Example
>a href=”https://www.w3schools.com/html/”>Visit our HTML tutorial>/a></a> - LOCAL Links: The example above used an absolute URL (a full web address). A local link (link to the same web site) is specified with a relative URL (without https://www….).
- HTML Links - The TARGET ATTRIBUTE: The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
Example
>a href=”https://www.w3schools.com/” target=”_blank”>Visit W3Schools!>/a>
- HTML Links - Image as a Link: It is common to use images as links:
Example
>a href=”default.asp”>
(img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>
>/a>
- BUTTON AS A LINK: To use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you to specify what happens at certain events, such as a click of a button:
Example
>button onclick=”document.location = ‘default.asp’“>HTML Tutorial>/button>
- LINK TITLES: The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
Example
>a href=”https://www.w3schools.com/html/” title=”Go to W3Schools HTML section”>Visit our HTML Tutorial>/a>
- External Paths: External pages can be referenced with a full URL or with a path relative to the current web page.
Example
>a href=”https://www.w3schools.com/html/default.asp”>HTML tutorial>/a>
___________________
Chapter Summary
- Use the </a><a> element to define a link
- Use the href attribute to define the link address
- Use the target attribute to define where to open the linked document
- Use the <img></img> element (inside </a><a>) to use an image as a link
</a>
17- HTML Link Colors:
- By DEFAULT, a link will appear like this (in all browsers):
An UNVISITED link is underlined and blue
A VISITED link is underlined and purple
An ACTIVE link is underlined and red
- You can change the default colors, by using CSS:
>style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
>/style>
18- Link Buttons:
A LINK can also be styled AS A BUTTON, by using CSS:
>style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
>/style>
19- HTML Link Bookmarks:
- HTML BOOKMARKS are used to allow readers to jump to specific parts of a Web page.
First, create a bookmark with the id attribute:
>h2 id=”C4”>Chapter 4>/h2>
>a href=”#C4”>Jump to Chapter 4>/a>
You can also add a link to a bookmark on another page:
>a href=”html_demo.html#C4”>Jump to Chapter 4>/a>
____________________
Chapter Summary
- Use the id attribute (id=”value”) to define bookmarks in a page
- Use the href attribute (href=”#value”) to link to the bookmark
20- HTML Images:
> img src=”pic_trulli.jpg” alt=”Italian Trulli”>
- HTML Images Syntax: In HTML, images are defined with the <img></img> tag.
The <img></img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
> img src=”img_girl.jpg” alt=”Girl in a jacket”>
- The ALT ATTRIBUTE: text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
Example: (img src=”img_chania.jpg” alt=”Flowers in Chania”>
- Image SIZE - Width and Height: You can use the style attribute to specify the width and height of an image.
Example: (img style=”width:500px;height:600px;”>
- WIDTH AND HEIGTH OR STYLE?: The width, height, and style attributes are valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:
>!DOCTYPE html>
>html>
>head>
>style>
img {
width: 100%;
}
>/style>
>/head>
>body>
>img src="html5.gif" alt="HTML5 Icon" width="128"
height="128">
>img src="html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
>/body>
>/html>
- IMAGES IN ANOTHER FOLDER: If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
Example: >img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>
- Images ON ANOTHER SERVER: Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example: >img src=”https://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com”>
- ANIMATED IMAGES: HTML allows animated GIFs:
Example: >img src=”programming.gif” alt=”Computer Man” style=”width:48px;height:48px;”>
- IMAGE AS A LINK: To use an image as a link, put the (img> tag inside the >a> tag:
Example:
>a href=”default.asp”>
>img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>
>/a>
- IMAGE FLOATING: Use the CSS float property to let the image float to the right or to the left of a text:
Example
>p>(img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
The image will float to the right of the text.>/p>
> p>(img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
The image will float to the left of the text.
____________________
Chapter Summary
- Use the HTML <img></img> element to define an image
- Use the HTML src attribute to define the URL of the image
- Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
- Use the HTML width and height attributes to define the size of the image
- Use the CSS width and height properties to define the size of the image (alternatively)
- Use the CSS float property to let the image float
21- HTML Image Maps:
- The tag defines an image-map. An image-map is an image with clickable areas.
- Example
>img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>
> map name=”workmap”>
area shape=”rect” coords=”34,44,270,350” alt=”Computer” href=”computer.htm”>
area shape=”rect” coords=”290,172,333,250” alt=”Phone” href=”phone.htm”>
area shape=”circle” coords=”337,300,44” alt=”Coffee” href=”coffee.htm”>
/map>
- The Image: The image is inserted using the <img></img> tag. The only difference from other images is that you must add a usemap attribute:
> img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>
The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.
- The MAP: Then add a element. The element is used to create an image map, and is linked to the image by using the name attribute:
> map name=”workmap”>
The name attribute must have the same value as the usemap attribute.
- The AREAS: Then add the clickable areas. A clickable area is defined using an element.
- SHAPE: You must define the shape of the area, and you can choose one of these values:> rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region - COORDINATES: You must define some coordinates to be able to place the clickable area onto the image. The coordinates come in pairs, one for the x-axis and one for the y-axis. The coordinates 34, 44 is located 34 pixels from the left margin and 44 pixels from the top.
- Image Map and JavaScript: A clickable area does not have to be a link to another page, it can also trigger a JavaScript function.
Add a click event on the element to execute a JavaScript function:
Example
You can use the onclick attribute to execute a JavaScript function when the area is clicked
> area shape=”circle” coords=”337,300,44” onclick=”myFunction()”>
____________________
Chapter Summary
- Use the HTML element to define an image-map
- Use the HTML element to define the clickable areas in the image-map
- Use the HTML <img></img>’s element usemap attribute to point to an image-map.
22- HTML Background Images:
- To add a background image on an HTML element, you can use the style attribute:
Example
Add a background image on a HTML element:
(div style=”background-image: url(‘img_girl.jpg’);”>
- Background Image ON A PAGE:
If you want the entire page to have a background image, then you must specify the background image on the element:
Example
Add a background image on a HTML page:
>style>
body {
background-image: url('img_girl.jpg');
}
>/style>
- Background REPEAT: If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it has reach the end of the element.
The background-image property will try to fill the div element with images until it has reach the end.
Example
>style>
body {
background-image: url('example_img_girl.jpg');
}
>/style>
- Background COVER: If you want the background image cover the entire element, you can set the background-size property to cover.
>style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
>/style>
- Background STRECH: If you want the background image stretch to fit the entire image in the element, you can set the background-size property to 100% 100%.
Example
>style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
>/style>
23- HTML Picture Element:
- The picture element allows us to display different pictures for different devices or screen sizes.
- HTML5 introduced the element to add more flexibility when specifying image resources.
- The element contains a number of elements, each referring to different image sources. This way the browser can choose the image that best fits the current view and/or device.
- Each element have attributes describing when their image is the most suitable.
- Example
Show different images on different screen sizes:(source media=”(min-width: 650px)” srcset=”img_food.jpg”>
(source media=”(min-width: 465px)” srcset=”img_car.jpg”>
(img src=”img_girl.jpg”>
>/picture>
Note: Always specify an <img></img> element as the last child element of the element. The <img></img> element is used by browsers that do not support the element, or if none of the tags matched.
- When to use the Picture Element: There are two main purposes for the element:
- Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first element with matching attribute values, and ignore any of the following elements. - Format Support
Some browsers or devices may not support all image formats. By using the element, you can add images of all formats, and the browser will use the first format it recognizes and ignore any of the following.
24- HTML Tables:
- DEFINING an HTML Table: An HTML table is defined with the tag.
Each table row is defined with the tag. A table header is defined with the tag. By default, table headings are bold and centered. A table data/cell is defined with the tag.
- Example
>table style="width:100%">
>tr>
Firstname
Lastname>/th>
>th>Age>/th>
>/tr>
>tr>
>td>Jill>/td>
>td>Smith>/td>
>td>50>/td>
>/tr>
>tr>
>td>Eve>/td>
>td>Jackson>/td>
>td>94>/td>
>/tr>
>/table>
- HTML Table - ADDING A BORDER: If you do not specify a border for the table, it will be displayed without borders.
Example
table, th, td {
border: 1px solid black;
}
- HTML Table - COLLAPSED BORDERS: If you want the borders to collapse into one border, add the CSS border-collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
- HTML Table - ADDING A CELL PADDING: Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
Example:
th, td {
padding: 15px;
}
- HTML Table - LEFT-ALIGN HEADINGS: By default, table headings are bold and centered.
Example
th {
text-align: left;
}
- HTML Table - ADDING BORDER SPACING: Border spacing specifies the space between the cells.
Example
table {
border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing has no effect.
- HTML Table - CELLS THAT SPAN MANY COLUMNS: To make a cell span more than one column, use the colspan attribute:
Example
>table style="width:100%">
>tr>
>th>Name>/th>
>th colspan="2">Telephone>/th>
>/tr>
>tr>
>td>Bill Gates>/td>
>td>55577854>/td>
>td>55577855>/td>
>/tr>
>/table>
- HTML Table - CELLS THAT SPAN MANY ROWS: To make a cell span more than one row, use the rowspan attribute:
Example
>table style="width:100%">
>tr>
>th>Name:>/th>
>td>Bill Gates>/td>
>/tr>
>tr>
>th rowspan="2">Telephone:>/th>
>td>55577854>/td>
>/tr>
>tr>
>td>55577855>/td>
>/tr>
>/table>
- HTML Table - ADDING A CAPTION: To add a caption to a table, use the tag:
Example
>table style="width:100%">
>caption>Monthly savings>/caption>
>tr>
>th>Month>/th>
>th>Savings>/th>
>/tr>
>tr>
>td>January>/td>
>td>$100>/td>
>/tr>
>tr>
>td>February>/td>
>td>$50>/td>
>/tr>
>/table>
- A SPECIAL STYLE for One Table: To define a special style for a special table, add an id attribute to the table:
Example
>table id="t01">
>tr>
>th>Firstname>/th>
>th>Lastname>/th>
>th>Age>/th>
>/tr>
>tr>
>td>Eve>/td>
>td>Jackson>/td>
>td>94>/td>
>/tr>
>/table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
____________________
Chapter Summary
- Use the HTML element to define a table
- Use the HTML element to define a table row
- Use the HTML element to define a table data
- Use the HTML element to define a table heading
- Use the HTML element to define a table caption
- Use the CSS border property to define a border
- Use the CSS border-collapse property to collapse cell borders
- Use the CSS padding property to add padding to cells
- Use the CSS text-align property to align cell text
- Use the CSS border-spacing property to set the spacing between cells
- Use the colspan attribute to make a cell span many columns
- Use the rowspan attribute to make a cell span many rows
- Use the id attribute to uniquely define one table
25- HTML Lists:
- An UNORDERER list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default.
>ul> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ul>
- Unordered HTML List - CHOOSE LIST ITEM MARKER
The CSS list-style-type property is used to define the style of the list item marker.
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example - Disc >ul style="list-style-type:disc;"> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ul>
Example - None >ul style="list-style-type:none;"> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ul> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ - An ORDERER list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:
Example >ol> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ol>
- Ordered HTML List - THE TYPE ATTRIBUTE: The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type=”1” The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers
Example Numbers: >ol type="1"> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ol> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ - HTML DESCRIPTION LISTS: A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the </dt><dd> tag describes each term:
Example >dl> >dt>Coffee>/dt> >dd>- black hot drink>/dd> >dt>Milk>/dt> >dd>- white cold drink>/dd> >/dl> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ - NESTED HTML Lists: List can be nested (lists inside lists):
Example
>ul>
>li>Coffee>/li>
>li>Tea
>ul>
>li>Black tea>/li>
>li>Green tea>/li>
>/ul>
>/li>
>li>Milk>/li>
</dd></dl></ol></li></ol></li></ul>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
- HORIZONTAL LIST with CSS: HTML lists can be styled in many different ways with CSS. One popular way is to style a list horizontally, to create a navigation menu:
Example
>!DOCTYPE html>
>html>
>head>
>style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
>/style>
>/head>
>body>
>ul> >li>>a href="#home">Home>/a>(/li> >li>>a href="#news">News>/a>>/li> >li>>a href="#contact">Contact>/a>(/li> (li>>a href="#about">About>/a>(/li> >/ul>
> /body>
/html>
____________________
Chapter Summary
- Use the HTML <ul> element to define an unordered list
- Use the CSS list-style-type property to define the list item marker
- Use the HTML </ul><ol> element to define an ordered list
- Use the HTML type attribute to define the numbering type
- Use the HTML <li> element to define a list item
- Use the HTML <dl> element to define a description list
- Use the HTML <dt> element to define the description term
- Use the HTML </dt><dd> element to describe the term in a description list
- Lists can be nested inside lists
- List items can contain other HTML elements
- Use the CSS property float:left or display:inline to display a list horizontally</dd></dl></li></ol>
26- HTML Block and Inline Elements:
- Every HTML element has a default display value depending on what type of element it is. The two display values are: block and inline.
____________________ - BLOCK-LEVEL ELEMENTS: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Example
>div>Hello World>/div>
Block level elements in HTML:
<address>
<blockquote>
<dd>
<div>
<dl>
<dt>
<h1>-
<h6>
<hr></hr>
</h6></h1><li>
<ol>
<p>
</p><pre>
</pre></ol><ul>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
- INLINE ELEMENTS: An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Example
(span>Hello World(/span>
~~~
Inline elements in HTML:
<a>
<abbr>
<acronym>
<b>
~~~
<big>
<br></br>
~~~
<cite>
<code>
<dfn>
<em>
<i>
<img></img>
~~~
<kbd>
<samp>
~~~
<small>
<span>
<strong>
~~~
<tt>
<var>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
- the <div> Element: is often used as a container for other HTML elements. The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:
Example
>div style="background-color:black;color:white;padding:20px;">
>h2>London(/h2>
>p>London is the capital city of England. It is the most populous city in the United Kingdom.>/p>
>/div>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
- The <span> Element: is often used as a container for some text. The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the text:
Example
>h1>My >span style="color:red">Important>/span> Heading>/h1>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
- HTML GROUPING TAGS
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)</span></div></span></span></span></div></div></div></var></tt></strong></span></small></samp></kbd></i></em></dfn></code></cite></big></b></acronym></abbr></a></span></ul></li></dt></dl></div></dd></blockquote></address>
</div>
27- HTML The class Attribute:
- The HTML CLASS ATTRIBUTE is used to define equal styles for elements with the same class name. So, all HTML elements with the same class attribute will get the same style. Here we have three <div> elements that point to the same class name:
Example
>!DOCTYPE html>
>html>
>head>
>style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
>/style>
>/head>
>body>
> div class=”cities”>
h2>London>/h2>
p>London is the capital of England.>/p>
/div>
> /body>
/html>
____________________
- Using The class Attribute ON INLINE ELEMENTS:
The HTML class attribute can also be used on inline elements:
Example
>!DOCTYPE html>
>head>
>style>
span.note {
font-size: 120%;
color: red;
}
>/style>
>/head>
>body>
> h1>My (span class=”note”>Important>/span> Heading>/h1>
p>This is some <span>important</span> text.>/p>
> /body>
/html>
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
____________________
- SELECT ELEMENTS WITH A SPECIFIC CLASS: In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:
Example Use CSS to style all elements with the class name "city":
>style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
>/style>
>h2 class="city">London>/h2> >p>London is the capital of England.>/p> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ - MULTIPLE CLASSES: HTML elements can have more than one class name, each class name must be separated by a space.
Example Style elements with the class name "city", also style elements with the class name "main":
> h2 class=”city main”>London>/h2>
h2 class=”city”>Paris>/h2>
h2 class=”city”>Tokyo>/h2>
In the example above, the first <h2> element belongs to both the “city” class and the “main” class.
____________________
- DIFFERENT TAGS CAN SHARE SAME CLASS:
Different tags, like <h2> and </h2></h2><p>, can have the same class name and thereby share the same style:
Example
>h2 class=”city”>ParisÇ8/h2>
>p class=”city”>Paris is the capital of France>/p></p></div>
28- HTML The id Attribute:
- The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id value can be used by CSS and JavaScript to perform certain tasks for the element with the specific id value.
In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:
Example
Use CSS to style an element with the id “myHeader”:
>style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
>/style>
> h1 id=”myHeader”>My Header>/h1>
Tip: The id attribute can be used on any HTML element.
Note: The id value is case-sensitive.
Note: The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.). \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ - DIFFERENCE BETWEEN CLASS AND ID: An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:
Example
>style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
<h1>My Cities</h1>
<h2>London</h2>
<p>London is the capital of England.</p>
____________________
- BOOKMARKS WITH ID AND LINKS: HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
(h2 id=”C4”>Chapter 4(/h2>
Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:
(a href=”#C4”>Jump to Chapter 4(/a>
Or, add a link to the bookmark (“Jump to Chapter 4”), from another page:
Example
(a href=”html_demo.html#C4”>Jump to Chapter 4(/a>
29- HTML Forms:
- The HTML element defines a form that is used to collect user input:
>form> . form elements . >/form>
- Form elements are different types of input elements, like: text fields, checkboxes, radio buttons, submit buttons, and more.
- The element is the most important form element. The element is displayed in several ways, depending on the type attribute.
Type Description
>input type=”text”> Defines a single-line text input field
>input type=”radio”> Defines a radio button (for selecting one of many choices)
Defines a submit button (for submitting the form)
____________________
- Text Fields
defines a single-line input field for text input.
Example
>form>
>label for=”fname”>First name:>/label»br>
>input type=”text” id=”fname” name=”fname”»br>
>label for=”lname”>Last name:>/label»br>
>input type=”text” id=”lname” name=”lname”>
>/form>
____________________
- The Element
The tag defines a label for many form elements.
The element is useful for screen-reader users, because the screen-reader will read out load the label when the user is focused on the input element.
The element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the element, it toggles the radio button/checkbox.
The for attribute of the tag should be equal to the id attribute of the element to bind them together.
_____________________
- Radio Buttons
defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
>form>
>input type=”radio” id=”male” name=”gender” value=”male”>
>label for=”male”>Male>/label»br>
>input type=”radio” id=”female” name=”gender” value=”female”>
>label for=”female”>Female>/label»br>
>input type=”radio” id=”other” name=”gender” value=”other”>
>label for=”other”>Other>/label>
>/form>
____________________
- The Submit Button
defines a button for submitting the form data to a form-handler.
The form-handler is typically a page on the server with a script for processing input data.
The form-handler is specified in the form’s action attribute.
Example
A form with a submit button:
> form action=”/action_page.php”>
label for=”fname”>First name:>/label»br>
input type=”text” id=”fname” name=”fname” value=”John”»br>
label for=”lname”>Last name:>/label»br>
input type=”text” id=”lname” name=”lname” value=”Doe”»br»br>
input type=”submit” value=”Submit”>
/form>
_____________________
- The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called “/action_page.php”. This page contains a server-side script that handles the form data:
> form action=”/action_page.php”>
If the action attribute is omitted, the action is set to the current page.
____________________
- The Target Attribute
The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.
The default value is “_self” which means the form will be submitted in the current window.
To make the form result open in a new browser tab, use the value “_blank”.
Example
Here, the submitted result will open in a new browser tab:
> form action=”/action_page.php” target=”_blank”>
- Other legal values are “_parent”, “_top”, or a name representing the name of an iframe.
____________________ - The Method Attribute: specifies the HTTP method (GET or POST) to be used when submitting the form data.
Example
Use the GET method when submitting the form:
(form action=”/action_page.php” method=”get”>
or:
Example
Use the POST method when submitting the form:
> form action=”/action_page.php” method=”post”>
- When to Use GET?
The default HTTP method when submitting form data is GET. - When to Use POST?
Always use POST if the form data contains sensitive or personal information. The POST method does not display the form data in the page address field.
____________________ - The Name Attribute: Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all.
Example
This example will not submit the value of the “First name” input field:
>form action="/action_page.php"> >label for="fname">First name:>/label>>br> >input type="text" id="fname" value="John">>br>>br> >input type="submit" value="Submit"> >/form> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ Chapter Summary Here is the list of all attributes:
Attribute Description
> accept-charset - Specifies the charset used in the submitted form (default: the page charset).
> action - Specifies an address (url) where to submit the form (default: the submitting page).
> autocomplete: Specifies if the browser should autocomplete the form (default: on).
> enctype - Specifies the encoding of the submitted data (default: is url-encoded).
> method - Specifies the HTTP method used when submitting the form (default: GET).
> name - Specifies a name used to identify the form (for DOM usage: document.forms.name).
> novalidate - Specifies that the browser should not validate the form.
> target -Specifies the target of the address in the action attribute (default: _self).
30- HTML Form Elements:
- The Element
One of the most used form element is the element.
The element can be displayed in several ways, depending on the type attribute.
Example
____________________
- The Element
The element defines a drop-down list:
Example
>option value="volvo">Volvo>/option> >option value="saab">Saab>/option> >option value="fiat">Fiat>/option> >option value="audi">Audi>/option> >/select>
The elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To DEFINE A PRE-SELECTED OPTION, add the selected attribute to the option:
Example
Fiat
VISIBLE VALUES:
Use the size attribute to specify the number of visible values:
Example >select name="cars" size="3"> >option value="volvo">Volvo>/option> >option value="saab">Saab>/option> >option value="fiat">Fiat>/option> >option value="audi">Audi>/option> >/select>
ALLOW MULTIPLE SELECTIONS:
Use the multiple attribute to allow the user to select more than one value:
Example >select name="cars" size="4" multiple> >option value="volvo">Volvo >option value="saab">Saab >option value="fiat">Fiat >option value="audi">Audi >/select> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ - The Element The element defines a multi-line input field (a text area):
Example
>textarea name=”message” rows=”10” cols=”30”>
The cat was playing in the garden.
>/textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
____________________
- The Element
The element defines a clickable button:
Example Click Me! \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ - The and Elements Is used to group related data in a form.
The element defines a caption for the element.
Example
>form action=”/action_page.php”>
>fieldset>
>legend>Personalia:>/legend>
>label for=”fname”>First name:>(/label»br>
>input type=”text” id=”fname” name=”fname” value=”John”»br>
>label for=”lname”>Last name:>/label»br>
>input type=”text” id=”lname” name=”lname” value=”Doe”»br»br>
>input type=”submit” value=”Submit”>
>/fieldset>
>/form>
____________________
- The element specifies a list of pre-defined options for an element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the element, must refer to the id attribute of the element.
Example
>form action="/action_page.php">
>input list="browsers">
>datalist id="browsers">
>option value="Internet Explorer">
>option value="Firefox">
>option value="Chrome">
>option value="Opera">
>option value="Safari">
>/datalist>
>/form>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
- The Element
The element represents the result of a calculation (like one performed by a script).
Example
Perform a calculation and show the result in an element:
> form action=”/action_page.php”
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
0
input type=”range” id=”a” name=”a” value=”50”>
100 +
input type=”number” id=”b” name=”b” value=”50”>
=
output name=”x” for=”a b”>
br»br>
input type=”submit”>
/form>
31- HTML Input Types:
- Here are the different input types you can use in HTML:
____________________
- Input Type Text
defines a single-line text input field:
Example
>form>
>label for=”fname”>First name:(/label>(br>
(input type=”text” id=”fname” name=”fname”>(br>
(label for=”lname”>Last name:(/label>(br>
(input type=”text” id=”lname” name=”lname”>
(/form>
____________________
- Input Type Password
defines a password field:
Example
>form>
>label for=”username”>Username:>/label»br>
>input type=”text” id=”username” name=”username”»br>
>label for=”pwd”>Password:>/label»br>
>input type=”password” id=”pwd” name=”pwd”>
>/form>
____________________
- Input Type Submit
defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form’s action attribute:
Example
>form action=”/action_page.php”>
>label for=”fname”>First name:>/label»br>
>input type=”text” id=”fname” name=”fname” value=”John”»br>
>label for=”lname”>Last name:>/label»br>
>input typ=”text” id=”lname” name=”lname” value=”Doe”»br»br>
>input type=”submit” value=”Submit”>
>/form>
____________________
- Input Type Reset
defines a reset button that will reset all form values to their default values:
Example
>form action=”/action_page.php”>
>label for=”fname”>First name:>/label»br>
>input type=”text” id=”fname” name=”fname” value=”John”»br>
>label for=”lname”>Last name:>/label»br>
>input type=”text” id=”lname” name=”lname” value=”Doe”»br»br>
>input type=”submit” value=”Submit”>
>input type=”reset”>
>/form>
____________________
- Input Type Radio
defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example >form> >input type="radio" id="male" name="gender" value="male"> >label for="male">Male>/label>>br> >input type="radio" id="female" name="gender" value="female"> >label for="female">Female>/label>>br> >input type="radio" id="other" name="gender" value="other"> >label for="other">Other>/label> >/form> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ - Input Type Checkbox defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
>form>
>input type=”checkbox” id=”vehicle1” name=”vehicle1” value=”Bike”>
>label for=”vehicle1”> I have a bike>/label»br>
>input type=”checkbox” id=”vehicle2” name=”vehicle2” value=”Car”>
>label for=”vehicle2”> I have a car>/label»br>
>input type=”checkbox” id=”vehicle3” name=”vehicle3” value=”Boat”>
>label for=”vehicle3”> I have a boat>/label>
>/form>
____________________
- Input Type Button
defines a button:
Example
>input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”>
____________________
- Input Type Color
The is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
>form>
>label for=”favcolor”>Select your favorite color:>/label>
>input type=”color” id=”favcolor” name=”favcolor”>
>/form>
____________________
- Input Type Date
The is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
>form>
>label for=”birthday”>Birthday:>/label>
>input type=”date” id=”birthday” name=”birthday”>
>/form>
You can also use the min and max attributes to add restrictions to dates:
Example
>form>
>label for=”datemax”>Enter a date before 1980-01-01:>/label>
>input type=”date” id=”datemax” name=”datemax” max=”1979-12-31”»br»br>
>label for=”datemin”>Enter a date after 2000-01-01:>/label
>input type=”date” id=”datemin” name=”datemin” min=”2000-01-02”>
>/form>
____________________
- Input Type Datetime-local
The specifies a date and time input field, with no time zone.
Depening on browser support, a date picker can show up in the input field.
Example
>form>
>label for=”birthdaytime”>Birthday (date and time):>/label>
>input type=”datetime-local” id=”birthdaytime” name=”birthdaytime”>
>/form>
____________________
- Input Type Email
The is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add “.com” to the keyboard to match email input.
Example
>form>
>label for=”email”>Enter your email:>/label>
>input type=”email” id=”email” name=”email”>
>/form>
____________________
- Input Type File
The defines a file-select field and a “Browse” button for file uploads.
Example
>form>
>label for=”myfile”>Select a file:>/label>
>input type=”file” id=”myfile” name=”myfile”>
>/form>
____________________
- Input Type Month
The allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
>form>
>label for=”bdaymonth”>Birthday (month and year):>/label>
>input type=”month” id=”bdaymonth” name=”bdaymonth”>
>/form>
____________________
