More HTML Images and Links. Links An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag – the destination of.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Images, Tables, lists, blocks, layout, forms, iframes
CIS101 Introduction to Computing Week 08. Agenda Your questions JavaScript text Resume project HTML Project Six This week online Next class.
Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.
Tutorial 6 Working with Web Forms
Computing Concepts Advanced HTML: Tables and Forms.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames.
Creating Web Page Forms
XHTML Forms for Data Collection and Submission Chapter 5.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Forms and Form Controls Chapter What is a Form?
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
CSE 382/ETE 334 Internet and Web Technology Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU.
DAT602 Database Application Development Lecture 14 HTML.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
Web Technologies Website Development Trade & Industrial Education
HTML II. Factors to consider in designing a website. Organizing your files. HTML Tables. Unordered Lists. Ordered Lists. HTML Forms. Learning Objectives.
1 XHTML Forms A form is the mechanism to –Collect information from a browser user –Transmit collected information from a browser to a server HTML/XHTML.
Forms Sangeetha Parthasarathy 02/05/2001. Introduction to Forms A form makes it possible to transform your web pages from text to graphics to interactive.
Web Development University of Khartoum. Web Development Web Programming Web Design University of Khartoum.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML Pt. 2.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
HTML Forms.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
Dreamweaver MX. 2 Overview of Templates n Forms enable you to collect data from ______. n A form contains ________ such as text fields, radio buttons,
CHAPTER 7 Form & PHP. Introduction All of the following examples in this section will require two web pages. The first page retrieves information posted.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Graduate School of Library and Information Science LIS 753 Introduction to HTML 5 By: Yijun Gao Week Three.
Web Forms. Survey or poll Contact us Sign up for an newsletter Register for an event Submit comments or feedback about our site Log in to a members-only.
+ FORMS HTML forms are used to pass data to a server. begins and ends a form Forms are made up of input elements Every input element has a name and value.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Website Forms / Data Acquisition.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
1 HTML Forms
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
Unit 4 Working with data. Form Element HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons,
HTML Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands.
XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
Lecture 16. A Very Brief Introduction to HTML and XHTML, part V Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Tutorial 6 Working with Web Forms
Advanced HTML Tags:.
Hosted by Coach Slanina
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
Chapter 5 Introduction to XHTML: Part 2
Basic HTML and Embed Codes
1 Introduction to XHTML.
Introduction to HTML.
Computer communications
Introduction to HTML: Forms
Presentation transcript:

More HTML Images and Links

Links An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag – the destination of the link.a HTML Dog The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “ or it can be relative to the current page. So if, for example, you had another file called “flyingmoss.html” in the same directory then the line of code would simply be The miracle of moss in flight or something like this.

A link does not have to link to another HTML file, it can link to any file anywhere on the web. A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example Moss, and then link to it by using something like this: Go to moss. Selecting this link will scroll the page straight to the element with that ID.

Images The img tag is used to put an image in an HTML document and it looks like this:img The src attribute tells the browser where to find the image.

The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading. The alt attribute is the alternative description. This is an accessibility consideration, providing meaningful information for users who are unable to see the image (if they are visually impaired, for example). Note that, like the br tag, because the img element does not enclose any content, no closing tag is required.brimg

The most commonly used file formats used for images are JPEGs, GIFs, and PNGs. They are compressed formats, and have very different uses. JPEGs are typically used for images such as photographs. GIFs are typically used for images with solid colors, such as icons or logos. PNGs are typically used for versatile images in more complex designs BUT they are not fully supported by some older browsers.

Tables There are a number of tags used in tables.

Row 1, cell 1 Row 1, cell 2 Row 1, cell 3 Row 2, cell 1 Row 2, cell 2 Row 2, cell 3 Row 3, cell 1 Row 3, cell 2 Row 3, cell 3 Row 4, cell 1 Row 4, cell 2 Row 4, cell 3

The table element defines the table.table The tr element defines a table row.tr The td element defines a data cell. These must be enclosed in tr tags, as shown above.tdtr If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.trtd

Forms Forms are used to collect data inputted by a user. They can be used as an interface for a web application, for example, or to send data across the web. On their own, forms aren’t usually especially helpful. They tend to be used in conjunction with a programming language to process the information inputted by the user.

The basic tags used in the actual HTML of forms are form, input, textarea, select, submit and option.forminputtextareaselectoption

form form defines the form and within this tag, if you are using a form for a user to submit information (which we are assuming at this level), an action attribute is needed to tell the form where its contents will be sent to. form The method attribute tells the form how the data in it is going to be sent and it can have the value get, which is default, and latches the form information onto a web address, or post, which (essentially) invisibly sends the form’s information.

input The input tag is the daddy of the form world. It can take a multitude of guises, the most common of which are outlined below (see the input reference page for the whole crazy family):inputinput reference page or simply is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox. is similar to the textbox, but the characters typed in by the user will be hidden. is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute ( - the attribute doesn’t require a value), and makes the initial state of the check box to be switched on, as it were. is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute. is a button that when selected will submit the form. You can control the text that appears on the submit button with the value attribute, for example.

textarea textarea is, basically, a large, multi-line textbox. The anticipated number of rows and columns can be defined with rows and cols attributes textarea A big load of text

select The select tag works with the option tag to make drop-down select boxes.selectoption Option 1 Option 2 Option 3 When the form is submitted, the value of the selected option will be sent. This value will be the text between the selected opening and closing option tag unless an explicit value is specified with the value attribute, in which case this will be sent instead. So, in the above example, if the first item is selected, “Option 1” will be sent, if the third item is selected, “third option” will be sent.

Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, to start off with one of the items already being selected,option eg. Rodent would pre-select “Rodent” from the items.

Names All of the tags mentioned above will look very nice presented on the page but if you hook up your form to a form-handling script, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example.

Sample Form (formatted) Name: Comments: Your comments Are you: Male Female An hermaphrodite Asexual

Exercises By now you have learned how to use a large number of different HTML tags. Each, of course, servers a different purpose in organizing the structure of content on a web page. Use these tags to further modify your class website by doing the following: 1.Using the images folder in your website’s root folder. Find and add images that represent each of your first four units in the course. 2.Add these images to each unit page (something that represents the content of that unit). 3.Go to or some other free site and create your avatar. Save it to your images folder and place it on your homepage. 4.Create a list of links from your home page to each of your unit pages. 5.Find a pdf or doc online that provides info on links and images in HTML. Add it to your class website Resources folder and then link to it via your Unit 1 page under a heading titled “Unit Resources”. 6.On your home page include a blurb about yourself (if you haven’t already) and create a table of your first and second semester course schedule. Describe the reasons for taking this course (again if you haven’t already). Also include a list of links to the software you will be using in the class as well as to at least 2 site references on using HTML (again place this under a heading titled “Class Software”. 7.Finally create a new page and a link to it from your homepage (use “User Registration” as the link). In it add a form that provides a visitor to your site with a form that allows them to register as a user of your site. Make sure to include boxes for the visitor’s first and last names, their gender (use a set of radioButtons), age and the school they attend. Include a submit button. Also include a textarea with a label prompting the user to write a little blurb about themselves. Use the following names to identify the form components: firstName, lastName, age, gender, school, aboutMe Use POST as the method. Download and use the echo.php script to test your form (it should “echo” the form entries). Create a folder called scripts (place this folder in your websites root folder) and place this file in it. You will only be able to test your script from a webserver so you’ll have to upload everything to your remote site.