CAT 2 REVISON AI AND ROBOTICS SS1
HTML Images
The HTML <img> tag is used to embed an image in a web page.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax <img src="url" alt="alternatetext"> Example is <img src="img_chania.jpg" alt="Flowers in
Chania">
HTML TABLE
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table
headings are bold and centered. A table data/cell is defined with the <td> tag.
Example
HTML CSS
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
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
Example
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element:
Example
External CSS
An external style sheet is used to define the style for many HTML pages.
2
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 <head> section of the HTML page:
EXAMPLE
Here is the CSS file
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.
Example
3
CSS Border
The CSS border property defines a border around an HTML element:
Example
CSS Padding
The CSS padding property defines a padding (space) between the text and the border:
Example
4
CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
The id Attribute
To define a specific style for one special element, add an id attribute to the element:
5
Example
The class Attribute
To define a style for special types of elements, add a class attribute to the element:
Example
HTML FORM
The <form> Element
The HTML <form> element defines a form that is used to collect user input:
6
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit
buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
Text Input
<input type="text"> defines a one-line input field for text input:
Example
7
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
The Submit Button
<input type="submit"> defines a button for submitting the 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:
8
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web 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:
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
9
The <select> Element
The <select> element defines a drop-down list:
Example
The <option> 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
10
Visible Values:
Use the size attribute to specify the number of visible values:
Example
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
Example
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
11
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
The <button> Element
The <button> element defines a clickable button:
Example
HTML5 Form Elements
HTML5 added the following form elements:
<datalist>
12
<output>
HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
HTML5 <output> Element
The <output> element represents the result of a calculation (like one performed by a script).
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
13
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
14
value Specifies the default value for an input field
HTML Input Attributes
The value Attribute
The value attribute specifies the initial value for an input field:
The readonly Attribute
The readonly attribute specifies that the input field is read only (cannot be changed):
The disabled Attribute
The disabled attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the
form:
The size Attribute
The size attribute specifies the size (in characters) for the input field:
The maxlength Attribute
The maxlength attribute specifies the maximum allowed length for the input field:
With a maxlength attribute, the input field will not accept more than the allowed number of characters.
The maxlength attribute does not provide any feedback. If you want to alert the user, you must write
JavaScript code.
HTML5 Attributes
HTML5 added the following attributes for <input>:
autocomplete
autofocus
form
formaction
15
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
and the following attributes for <form>:
autocomplete
novalidate
Web standards and validation
W3C stands for the World Wide Web Consortium, a recognized global web standards body. Tim Berners-
Lee founded this organization and is run by a full-time staff to continue creating and preserving web
standards.
What is W3C Validation?
World Wide Web Consortium (W3C) allows internet users to check HTML and XHTML documents for
well-formatted markup. Markup validation is an important step towards ensuring the technical quality of
web pages.
Why Validate a Site on W3C?
W3C validation is the process of checking a website's code to determine if it follows the formatting
standards. If you fail to validate your website's pages based on W3C standards, your website will most
likely suffer from errors or poor traffic owing to poor formatting and readability.
How Do You Validate Your Code?
16
Validation is comparing your code to W3C standards. The best way to validate your code is by using the
W3C validation tools.
HTML validator
CSS validator
HTML Validator:
This validator checks the markup validity of web documents in HTML, XHTML, SMIL, MathML, etc
CSS Validator:
This validator checks the CSS validity of web documents in HTML, XHTML etc.
There are plenty of browser extensions that will test the page you're viewing against the W3C validators.
HTML Tidy is another option for validating pages, though it may not offer the exact same results as the
W3C validator. One advantage of HTML Tidy is using an extension; you can check your pages directly in
the browser without visiting one of the validators sites.
17
