meta tags you can add metadata to your web pages by placing tags inside the header of the document...

CENG 449 Lecture 1 1

Meta TagsYou can add metadata to your web pages by placing <meta> tags inside the header of the

document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes:

• Attribute Description• Name Name for the property. Can be anything. Examples include,

keywords, description, author, revised, generator etc.• content Specifies the property's value.• scheme Specifies a scheme to interpret the property's value (as

declared in the content attribute).• http-equiv Used for http response message headers. For example http-

equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.


Specifying Keywords

You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose.

<!DOCTYPE html><html><head><title>Meta Tags Example</title><meta name="keywords" content="HTML, Meta Tags, Metadata" /></head><body><p>Hello HTML5!</p></body></html>


Document Description

• You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose.

<!DOCTYPE html><html><head><title>Meta Tags Example</title><meta name="keywords" content="HTML, Meta Tags, Metadata" /><meta name="description" content="Learning about Meta Tags." /></head><body><p>Hello HTML5!</p></body></html>


Document Revision Date

• You can use <meta> tag to give information about when last time the document was updated. This information can be used by various web browsers while refreshing your webpage.

<!DOCTYPE html><html><head><title>Meta Tags Example</title><meta name="keywords" content="HTML, Meta Tags, Metadata" /><meta name="description" content="Learning about Meta Tags." /><meta name="revised" content="Tutorialspoint, 3/7/2014" /></head><body><p>Hello HTML5!</p></body></html>


Document Refreshing

• A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.

If you want your page keep refreshing after every 5 seconds then use the following syntax. <!DOCTYPE html><html><head><title>Meta Tags Example</title><meta name="keywords" content="HTML, Meta Tags, Metadata" /><meta name="description" content="Learning about Meta Tags." /><meta name="revised" content="Tutorialspoint, 3/7/2014" /><meta http-equiv="refresh" content="5" /></head><body><p>Hello HTML5!</p></body></html>


Page Redirection

You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute. <!DOCTYPE html><html><head><title>Meta Tags Example</title><meta name="keywords" content="HTML, Meta Tags, Metadata" /><meta name="description" content="Learning about Meta Tags." /><meta name="revised" content="Tutorialspoint, 3/7/2014" /><meta http-equiv="refresh" content="5" url=”http://www.tutorialspoint.com" /></head><body><p>Hello HTML5!</p></body></html>


Setting Author Name

• You can set an author name in a web page using meta tag. See an example:

<!DOCTYPE html><html><head><title>Meta Tags Example</title><meta name="keywords" content="HTML, Meta Tags, Metadata" /><meta name="description" content="Learning about Meta Tags." /><meta ame="author" content="Mahnaz Mohtashim" /></head><body><p>Hello HTML5!</p></body></html>


Specify Character Set

You can use <meta> tag to specify character set used within the webpage.

ExampleBy default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding to process Web pages. Following is an example to set UTF-8 encoding:

<!DOCTYPE html><html><head><title>Meta Tags Example</title><meta name="keywords" content="HTML, Meta Tags, Metadata" /><meta name="description" content="Learning about Meta Tags." /><meta ame="author" content="Mahnaz Mohtashim" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><p>Hello HTML5!</p></body></html>


HTML FORMS• HTML Forms are required when you want to collect some data from the site visitor.

For example during user registration you would like to collect information such as name, email address, credit card, etc.

• A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

• There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

• The HTML <form> tag is used to create an HTML form and it has following syntax:

• <form action="Script URL" method="GET|POST"> form elements like input, textarea etc. </form>


Form Attributes Attribute Description• actionBackend script ready to process your passed data.• method Method to be used to upload data. The most

frequently used are GET and POST methods.• target Specify the target window or frame where the result of

the script will be displayed. It takes values like _blank, _self, _parent etc.

• enctype You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are:

application/x-www-form-urlencoded - This is the standard method most forms use in simple scenarios. mutlipart/form-data - This is used when you want to upload binary data in the form of files like image, word file etc.


HTML Form ControlsThere are different types of form controls that you can use to collect data using HTML form:

• Text Input Controls• Checkboxes Controls• Radio Box Controls• Select Box Controls• File Select boxes• Hidden Controls• Clickable Buttons• Submit and Reset Button


Text Input Controls

• There are three types of text input used on forms:• Single-line text input controls - This control is used for

items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

• Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.

• Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.


Single-line text input controls

• This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

• Syntax:• <input type="text" name="" value="" size=”” maxlength=””>


AttributesFollowing is the list of attributes for <input> tag for

creating text field.

Attribute Description• type Indicates the type of input control and for

text input control it will be set to text.• name Used to give a name to the control which is

sent to the server to be recognized and get the value.

• value This can be used to provide an initial value inside the control.

• size Allows to specify the width of the text-input control in terms of characters.

• maxlength Allows to specify the maximum number of characters a user can enter into the text box.


<!DOCTYPE html><html><head><title>Text Input Control</title></head><body><form >First name: <input type="text" name="first_name" /><br>Last name: <input type="text" name="last_name" /></form></body></html>


Password input controls<!DOCTYPE html><html><head><title>Password Input Control</title></head><body><form >User ID : <input type="text" name="user_id" /><br>Password: <input type="password" name="password" /></form></body></html>


Multiple-Line Text Input ControlsThis is used when the user is required to give details that may be longer than a single sentence. Multi-

line input controls are created using HTML <textarea> tag.

<html><head><title>Multiple-Line Input Control</title></head><body><form>Description : <br /><textarea rows="5" cols="50" name="description">Enter description here...</textarea></form></body></html>


AttributesFollowing is the list of attributes for <textarea>

tagAttribute Description• name Used to give a name to the control which is


• rows Indicates the number of rows of text area box.

• cols Indicates the number of columns of text area

box


Checkbox Control Checkboxes are used when more than one option is required to be selected. They are also created

using HTML <input> tag but type attribute is set to checkbox.

<!DOCTYPE html><html><head><title>Checkbox Control</title></head><body><form><input type="checkbox" name="course" value="on"> Maths<input type="checkbox" name="course" value="on"> Physics</form></body></html>


AttributesFollowing is the list of attributes for <checkbox> tag.


checkbox input control it will be set to checkbox.

• name Used to give a name to the control which is sent to the server to be recognized and get the value.

• value The value that will be used if the checkbox is selected.

• checked Set to checked if you want to select it by default.


<html><head><title>Checkbox</title></head><body><form action="profile.php"><p>Please select your favorite music service(s):<br /><input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes

<input type="checkbox" name="service" value="lastfm" /> Last.fm

<input type="checkbox" name="service" value="spotify" /> Spotify

</p></form></body></html>


Radio Button ControlRadio buttons are used when out of many options, just one option is required to be selected. They are also

created using HTML <input> tag but type attribute is set to radio.

<!DOCTYPE html><html><head><title>Radio Box Control</title></head><body><form><input type="radio" name="subject" value="maths"> Maths<input type="radio" name="subject" value="physics"> Physics</form></body></html>


AttributesFollowing is the list of attributes for radio button.


checkbox input control it will be set to radio.• name Used to give a name to the control which is

sent to the server to be recognized and get

the value.• value The value that will be used if the radio box is

selected.• checked Set to checked if you want to select it by

default.


<html><head><title>Radio Button</title></head><body><form action="profile.php"><p>Please select your favorite genre:<br /><input type="radio" name="genre" value="rock" checked="checked" /> Rock<input type="radio" name="genre" value="pop" /> Pop<input type="radio" name="genre" value="jazz" /> Jazz</p></form></body></html>


Select Box ControlA select box, also called drop down box which provides option to list down various options in the form of

drop down list, from where a user can select one or more options.

<!DOCTYPE html><html><head><title>Select Box Control</title></head><body><form><select name="dropdown"><option value="Maths" selected>Maths</option><option value="Physics">Physics</option></select></form></body></html>


When mouse is clicked on down arrow, the other options are also displayed


AttributesFollowing is the list of important attributes of <select> tag:

Attribute Description• name Used to give a name to the control which is


• size This can be used to present a scrolling list box.

• multiple If set to "multiple" then allows a user to select multiple items from the menu.


Following is the list of important attributes of <option> tag:

Attribute Description• value The value that will be used if an option in

the select box is selected.• selected Specifies that this option should be the

initially selected value when the page loads.

• label An alternative way of labeling options


File Upload BoxIf you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as

a file select box. This is also created using the <input> element but type attribute is set to file.

<!DOCTYPE html><html><head><title>File Upload Box</title></head><body><form><input type="file" name="fileupload" accept="image/*" /></form></body></html>


AttributesFollowing is the list of important attributes of file upload box:

Attribute Description• name Used to give a name to the control which

is sent to the server to be recognized and

get the value.• accept Specifies the types of files that the server

accepts.


Button ControlsThere are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>

tag by setting its type attribute to button. The type attribute can take the following values:

Type Description• submit: This creates a button that automatically

submits a form.• reset: This creates a button that automatically resets

form controls to their initial values.• button: This creates a button that is used to

trigger a client-side script when the user clicks that button.

• image: This creates a clickable button but we can use an image as background of the button.


<!DOCTYPE html><html><head><title>File Upload Box</title></head><body><form><input type="submit" name="submit" value="Submit" /><input type="reset" name="reset" value="Reset" /><input type="button" name="ok" value="OK" />

<input type="image" name="imagebutton" src="/html/images/logo.png" /></form></body></html>


Hidden Form Controls Hidden form controls are used to hide data inside the page which later on can

be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which

page has be displayed next based on the passed current page.

<!DOCTYPE html><html><head><title>File Upload Box</title></head><body><form><p>This is page 10</p><input type="hidden" name="pagename" value="10" /><input type="submit" name="submit" value="Submit" /><input type="reset" name="reset" value="Reset" /></form></body></html>


<html><head>

<title>Multiple Select Box</title></head><body>

<form action="profile.php"><p>Do you play any of the following instruments? (You can select more than one

option by holding down control on a PC or command key on a Mac while selecting different options.)</p><select name="instruments" size="3" multiple="multiple">

<option value="guitar" selected="selected">Guitar</option><option value="drums">Drums</option><option value="keyboard" selected="selected">Keyboard</option><option value="bass">Bass</option>

</select></form>

</body></html>


Using CTRL button you can select multiple options


<html><head><title>File Input Box</title></head><body><form action="upload.php" method="post"><p>Upload your song in MP3 format:</p><input type="file" name="user-song" /><br /><input type="submit" value="Upload" /></form></body></html>


Grouping Form Elements

• <fieldset>You can group related form controls together inside the <fieldset> element. This is particularly helpful for longer forms. • <legend>The <legend> element can come directly after the opening <fieldset> tag and contains a caption which helps identify the urpose of that group of form controls.


<html><head><title>Grouping Form Elements</title></head><body>

<form action="subscribe.php"> <fieldset>

<legend>Contact details</legend>

<label>Email:<br /><input type="text" name="email" /></label><br /><label>Mobile:<br /><input type="text" name="mobile" /></label><br /><label>Telephone:<br /><input type="text" name="telephone" /></label>

</fieldset></form>

</body></html>


Form Validation You have probably seen forms on the web that give users messages if the form control has not been filled in correctly; this is

known as form validation.

<html><head><title>HTML5 Form Validation</title></head><body><form action="login.php method="post">

<label for="username">Username:</label>

<input type="text" name="username" required="required" /></title><br />

<label for="password">Password:</label>

<input type="password" name="password" required="required" />

<input type="submit" value="Submit" />

</form></body></html>


<html><head><title>HTML5 Form Validation</title></head><body><form action="login.php method="post">

Username:<input type="text" name="username" required="required" /></title><br />

Password:<input type="password" name="password" required="required" />




Date Input HTML5 introduces new form controls to standardize the way that some information is

gathered. Older browsers that do not recognize these inputs will just treat them as a singleline text box.

<html><head><title>HTML5 Date Input</title></head><body><form action="book.php" method="post">

<label for="username">Departure date:</label>

<input type="date" name="depart" />




HTML 5: Emai l & URL Input HTML5 has also introduced inputs that allow visitors to enter email addresses and URLs.

Browsers that do not support these input types will just treat them as text boxes.

<html><head><title>HTML5 Email Input</title></head><body><form action="subscribe.php">

<p>Please enter your email address:</p>

<input type="email" name="email" />




<html><head><title>HTML5 URL Input</title></head><body><form action=""> <p>Please enter your website address:</p><input type="url" name="website" /><input type="submit" value="Submit" /></form></body></html>


<html><head><title>Image Button</title></head><body><form action="subscribe.php">

<p>Subscribe to our email list:</p>

<input type="text" name="email" />

<input type="image" src="images/subscribe.jpg" width="100" height="20" />



HTML5: SEARCH INPUT To create the HTML5 search box the <input> element should have a type attribute whose value is search. Older browsers will simply treat it like a single line text

box.

<html><head><title>HTML5 Search Input</title></head><body><form action="search.php">

<p>Search:</p>

<input type="search" name="search" />

<input type="submit" value="Search" />



<html><head><title>HTML5 Placeholder</title></head><body><form action="search.php">Search:<br />

<input type="search" name="search" placeholder="Enter keyword" />

<input type="submit" value="Search" />



<html><head><title>Forms</title></head><body>

<form action="http://www.example.com/review.php" method="get"><fieldset><legend>Your Details:</legend><label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br /><label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br /></fieldset><br /><fieldset><legend>Your Review:</legend><p><label for="hear-about">How did you hear about us?</label><select name="referrer" id="hear-about"><option value="google">Google</option><option value="friend">Friend</option><option value=advert">Advert</option><option value="other">Other</option></select></p><p>Would you visit again?<br /><label><input type="radio" name="rating" value="yes" /> Yes</label><label><input type="radio" name="rating" value="no" /> No</label><label><input type="radio" name="rating" value="maybe" /> Maybe</label></p><p><label for="comments">Comments:</label><br /><textarea rows="4" cols="40" id="comments"></textarea></p><label><input type="checkbox" name="subscribe" checked="checked" /> Sign me up for email updates</label><br /><input type="submit" value="Submit review" /></fieldset></form></body>

</html>•


DOCTYPEs 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 (althoughbrowsers usually display the page even if it is not included).

• Comments in HTML •  • If you want to add a comment to your code

that will not be visible in the user's browser, you

• can add the text between these characters:•


• Iframes

<iframe> An iframe is like a little window that has been cut into your page — and in that window youcan see another page. The term iframe is an abbreviation of inline frame. One common use of iframes (that you may have seen on various websites) is to embed a Google Map into a page. The content of the iframe can be any html page (either located on the same server or anywhere else on the web).


• <!DOCTYPE html><html>

<head><title>iFrames</title>

</head><body>

<iframe width="425" height="350" src="https://www.google.com/maps?f=q&source=s_q&hl=tr&geocode=&q=%C3%87ankaya+%C3%9Cniversitesi,+Yenimahalle,+Eski%C5%9Fehir+Yolu,+Ankara,+T%C3%BCrkiye&aq=&sll=39.818706,32.563477&sspn=0.00885,0.01929&ie=UTF8&hq=&hnear=&ll=39.818706,32.563477&spn=0.006295,0.006295&t=m&iwloc=A&output=embed"></iframe><br /><small><a href="https://www.google.com/maps?f=q&source=embed&hl=tr&geocode=&q=%C3%87ankaya+%C3%9Cniversitesi,+Yenimahalle,+Eski%C5%9Fehir+Yolu,+Ankara,+T%C3%BCrkiye&aq=&sll=39.818706,32.563477&sspn=0.00885,0.01929&ie=UTF8&hq=&hnear=&ll=39.818706,32.563477&spn=0.006295,0.006295&t=m&iwloc=A" style="color:#0000FF;text-align:left">Daha Büyük Görüntüle</a></small>

</body></html>


• <!DOCTYPE html><html>

<head> <meta charset="UTF-8">

<title>iFrames</title></head><body>

<iframe width="425" height="350" src="https://www.google.com/maps?f=q&source=s_q&hl=tr&geocode=&q=%C3%87ankaya+%C3%9Cniversitesi,+Yenimahalle,+Eski%C5%9Fehir+Yolu,+Ankara,+T%C3%BCrkiye&aq=&sll=39.818706,32.563477&sspn=0.00885,0.01929&ie=UTF8&hq=&hnear=&ll=39.818706,32.563477&spn=0.006295,0.006295&t=m&iwloc=A&output=embed"></iframe><br /><small><a href="https://www.google.com/maps?f=q&source=embed&hl=tr&geocode=&q=%C3%87ankaya+%C3%9Cniversitesi,+Yenimahalle,+Eski%C5%9Fehir+Yolu,+Ankara,+T%C3%BCrkiye&aq=&sll=39.818706,32.563477&sspn=0.00885,0.01929&ie=UTF8&hq=&hnear=&ll=39.818706,32.563477&spn=0.006295,0.006295&t=m&iwloc=A" style="color:#0000FF;text-align:left">Daha Büyük Görüntüle</a></small>

</iframe></body>

</html>


<!DOCTYPE html><html><head><title>iFrames</title>

</head><body>

<iframe width="450" height="350" src="http://maps.google.co.uk/maps?q=moma+new+york&output=embed"></iframe>

</body></html>


There are some characters that are used in and reserved by HTML code

meta tags you can add metadata to your web pages by placing tags inside the header of the document...

Documents

meta tags example hello

html tag

example http equiv

page redirection

current page

document description

web pages

web servers