INTERNET APPLICATIONS CPIT405 Forms, Internal links, meta tags, search engine friendly websites
Objectives To insert Links in the HTML document To create HTML forms to get the input data in the HTML document. To use password entries To use name and ID tags To use meta tags and their use for search engines. To make a website search engine friendly.
Outline of this lab Links & Internal Links using Forms Using forms Using password entries Name and ID attributes Use of Meta tags Differences between using meta tags in HTML and XHTML Making a website search engine friendly. In lab Assignments and Home works
LINKS
HTML Links The HTML tag defines a hyperlink. The most important attribute of the element is the href attribute, which indicates the link's destination.
HTML Hyperlinks (Links) By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
Internal link
Use tag Use name and herf attributes Example next slide..
internal link (Example 1) Open the notepad and write the following code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " See also Chapter 4. Chapter 1 This chapter explains bla bla bla Chapter 2 This chapter explains bla bla bla Chapter 3 This chapter explains bla bla bla Chapter 4 This chapter explains bla bla bla
Chapter 5 This chapter explains bla bla bla Chapter 6 This chapter explains bla bla bla Chapter 7 This chapter explains bla bla bla Chapter 9 This chapter explains bla bla bla Chapter 10 This chapter explains bla bla bla Chapter 11 This chapter explains bla bla bla Chapter 12 This chapter explains bla bla bla In the bottom of the page add a go up link that will send you to the top of the page.
FORMS
Forms Proposed form
Forms implemented in XHTML
Using Forms data entry forms. The element is used to create data entry forms. Data collected in the form is sent to the server for processing by server-side scripts such as PHP, ASP, etc.. The form-data can be sent as URL variables (with method ="get” ) or as HTTP post transaction (with method ="post“) Basic Attributes action (URI) Specifies the location of the server-side script used to process data collected in the form. method Specifies the type of HTTP method used to send data to the server.
Simple form Example Result Try it on (
HTML action Attribute The action attribute specifies where to send the form- data when a form is submitted. Possible values: 1. An absolute URL - points to another web site (like action=" 2. A relative URL - points to a file within a web site (like action="example.htm") 3. Or leave it as an empty space if there is no action happen when sending a form (like action="")
The method attribute can have one of two values: 1) Post 2) Get (not secure) The get method is the default; get appends the form data to the end of the URL specified in the action attribute. (not secure) (more secure for sensitive data) The post method sends form data in a separate data stream, allowing the Web server to receive the data through “standard input.” (more secure for sensitive data) This is more common for a variety of reasons Get and Post method
Forms Elements
Forms elements HTML forms are used to pass data to a server. An HTML form can contain: input elements like (text fields, checkboxes, radio-buttons, submit buttons and more). select lists, textarea, fieldset, legend, label elements. The tag is used to create an HTML form:. input elements.
HTML Forms - The Input Element The most important form element is the element. The element is used to select user information. An element can vary in many ways, depending on the type attribute. An : text field, checkbox, password, radio button, submit button, and more.
Example 2 1. Open the notepad and write the following code 2. See the output in the browser
Feedback Form Feedback Form Please fill out this form to help us improve our site. Name: Comments: Enter comments here. Address: Password: Things you liked: Site design
Links Ease of use Images Source code <input name = "thingsliked" type = "checkbox" value = "Code" /> How did you get to our site?: Search engine Links from another site Deitel.com Web site Reference in a book Other Rate our site:
Amazing Awful
How To Use "password" Input Fields A "password" input field is defined as A "password" input field allows viewers to enter text strings or numbers without showing the entered in clear text. A "password" input field is ideal for password inputting.
“password” input field attributes name="fieldName" - Specifies the name of this field. value="defaultValue" - Specifies a default value for this field. size="number" - Specifies the size of the input box in number of characters. maxlength="number" - Specifies the maximum length of the input data.
Example 3 1. Open the notepad and write the following code 2. See the output in the browser
Password Input Fields Online Survey Your password: Password again: <input type="password" name="pword2" size="12" maxlength="12"/>
Name attribute name Attribute specifies the name of an element. used to reference elements in a JavaScript, or to reference form data after a form is submitted. Note: Only form elements with a name attribute will have their values passed when submitting a form.
Example Name:
ID Attribute The "id" attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element in other instances (e.g., from client-side scripts). This is the first paragraph, named "paragraph1". To dynamically change its properties use this identifier.
Name and ID attributes A "name" or “ID” value must begin with a letter ([A- Z] or [a-z]) and may be followed by letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
tag
Using of Tag o Metadata is data (information) about other data. o The tag provides metadata about the HTML document. o Metadata will not be displayed on the page, but will be machine parseable. o Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
Using of Tag Notes: tags always goes inside the element. name/value Metadata is always passed as name/value pairs. content namehttp-equiv The content attribute MUST be defined if the name or http-equiv attribute is defined. If none of these are defined, the content attribute CANNOT be defined.
Differences Between HTML and XHTML In HTML the tag has no end tag. HTML example: In XHTML the tag must be properly closed (by adding a space followed by a forward slash at the end of the tag). XHTML example:
in XHTML Example 1 - Define keywords for search engines: Example 2 - Define a description of your web page: Example 3 - Define the author of a page: Example 4 - Refresh document every 30 seconds:
Create A Search Engine Friendly Website
Create a Search Engine Friendly Website 1. Add Text to Your Images, Flash and Videos. For example, you should describe each picture in the "alt" text for the image 2. Validate Your HTML Code (see last lab) 3. Create Relevant Title Tags ( tag) title bar of the browser it is the non-visible text in the HTML code that the browser uses to display in the title bar of the browser window.
Some recommendations Google recommends the following to ensure that you gain the most from your search engine indexing: 1. Ensure every page has unique, relevant meta descriptions 2. Ensure you apply metadata for listing pages (e.g. blog & list layouts) in addition to individual articles. 3. Include factual information if relevant (e.g. blog articles may include the author, products might include the price or manufacturer) 4. Consider using automatically generated metadata - but make sure it's relevant, readable and accurate 5. Make your descriptions descriptive!
Assignment 2 Write HTML code to produce the following form
Note(s) You should submit your answer before 11:59 am your Answer Folder should be named as:yourName_assignment2_405
Outline of this lab Links & Internal Links using Forms Using forms Using password entries Name and ID attributes Use of Meta tags Differences between using meta tags in HTML and XHTML Making a website search engine friendly. In lab Assignments and Home works
We’re done! Thank you for listening