Scribd
Upload
87 views

HTML

HTML elements are defined by start and end tags. Elements can contain text and attributes that provide additional information. Common elements include headings, paragraphs, links, images, forms, tables and lists. Forms allow users to enter input which is sent to an action page using submit buttons.

Uploaded by

Rose Maria Maria
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
87 views

HTML

HTML elements are defined by start and end tags. Elements can contain text and attributes that provide additional information. Common elements include headings, paragraphs, links, images, forms, tables and lists. Forms allow users to enter input which is sent to an action page using submit buttons.

Uploaded by

Rose Maria Maria
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 69

HTML Elements

An HTML element is everything


from the start tag to the end tag:
 The start tag is often called
the opening tag. The end tag is
often called the closing tag.
Example
<p>This is a paragraph</p>

<a href="default.htm" >This is a link</a>


HTML Element Syntax
• An HTML element starts with a start tag /
opening tag
• An HTML element ends with an end tag /
closing tag
• The element content is everything between the
start and the end tag
• Some HTML elements have empty content
• Empty elements are closed in the start tag
• Most HTML elements can have attributes
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>


<h1 style="text-align: center">This is
heading 1</h1>
<p style="font-family:courier new;
color:red; font-size:20px">
</body>
</html>
<body>
• The <body> element defines the body of
the HTML document
The element has a start tag <body> and
an end tag </body>
• The <p> element defines a paragraph in
the HTML document
The element has a start tag <p> and an
end tag </p>
Empty HTML Elements
• HTML elements without content are called
empty elements. Empty elements can be closed
in the start tag.
• <br> is an empty element without a closing tag
(it defines a line break).
• In XHTML, XML, and future versions of HTML,
all elements must be closed.
• Adding a slash to the start tag, like <br />, is the
proper way of closing empty elements, accepted
by HTML, XHTML and XML.
HTML Tip: Use Lowercase Tags

• W3Schools use lowercase tags because


the World Wide Web Consortium
(W3C) recommendslowercase in HTML
4, and demands lowercase tags in future
versions of (X)HTML.
HTML Attributes

• HTML elements can have attributes


• Attributes provide additional
information about the element
• Attributes are always specified in the start
tag
• Attributes come in name/value pairs
like: name="value"
Always Quote Attribute Values

• Attribute values should always be


enclosed in quotes.
• Double style quotes are the most
common, but single style quotes are also
allowed.
• In some rare situations, like when the
attribute value itself contains quotes, it is
necessary to use single quotes:
• name='John "ShotGun" Nelson'
HTML Comments

• <!-- -->

• <!-- This is a comment -->


Example of Tag Attributes

<body style="background-color:yellow">

<h1 style="text-align:center">This is heading 1</h1>


HTML Link

<a href="url">Link text</a>


• The start tag contains attributes about the
link.
• The element content (Link text) defines the
part to be displayed.
Example
<html>
<body>
<p> <a href="lastpage.htm"> This text</a>
is a link to a page on this Web site. </p>
<p> <a href="http://www.microsoft.com/">
This text</a> is a link to a page on the
World Wide Web. </p>
</body>
</html>
The Image Tag and the Src
Attribute
• The <img> tag is empty, which means that it
contains attributes only and it has no closing tag.
• To display an image on a page, you need to use
the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image
you want to display on your page.
• <img src="url" />
Example
• <img src="boat.gif" alt="Big Boat" />
• <html>
<body> <p> You can also use an image as
a link: <a href="lastpage.htm"> <img
border="0" src="buttonnext.gif" width="65"
height="38"> </a>
</p>
</body>
</html>
Tables

• Tables are defined with the <table> tag. A


table is divided into rows (with the <tr>
tag), and each row is divided into data
cells (with the <td> tag). The letters td
stands for "table data," which is the
content of a data cell. A data cell can
contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
Example
• <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Forms

• A form is an area that can contain form


elements.
• Form elements are elements that allow the
user to enter information (like text fields,
textarea fields, drop-down menus, radio
buttons, checkboxes, etc.) in a form.
• A form is defined with the <form> tag.
Input

• The most used form tag is the <input> tag.


The type of input is specified with the type
attribute. The most commonly used input
types are explained below.
Text Fields

Text fields are used when you want the user to


type letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
Radio Buttons

• Radio Buttons are used when you want the user


to select one of a limited number of choices.
• <form>
<input type="radio" name="sex" value="male" />
Male
<br />
<input type="radio" name="sex"
value="female" /> Female
</form>
Checkboxes

• Checkboxes are used when you want the user to select


one or more options of a limited number of choices.
• <form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane"
/>
</form>
The Form's Action Attribute and the
Submit Button
• When the user clicks on the "Submit"
button, the content of the form is sent to
the server. The form's action attribute
defines the name of the file to send the
content to. The file defined in the action
attribute usually does something with the
received input.
Example
<form name="input"
action="html_form_submit.php"
method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
DropDown List
The <select> tag is used to create a select
list (drop-down list).

The <option> tags inside the select element


define the available options in the list.
Example
array()
• array() creates an array, with keys and
values. If you skip the keys when you
specify an array, an integer key is
generated, starting at 0 and increases by 1
for each value.

Syntax
• array(key => value)
key
Optional. Specifies the key, of type
numeric or string. If not set, an integer key
is generated, starting at 0
value
Required. Specifies the value
Example
• <?php
$arr = array("foo" => "bar", 12 => true);
• $a=array(3,4)

echo $arr["foo"]; // bar
echo $arr[12];    // 1
?>
foreach
• This simply gives an easy way to iterate
over arrays. foreach works only on arrays,
and will issue an error when you try to use
it on a variable with a different data type or
an uninitialized variable
Syntax
• foreach (array_expression as $value)
statement foreach (array_expression as
$key => $value) statement
•http://localhost/html_for
m_submit.php?user=

You might also like