Introduction to Web HTML (II) PDF

Introduction to web 3- HTML - (II) Dr. Heba Mamdouh Minia university Faculty of science Computer science department Agenda  HTML Links HTML Images HTML Lists HTML Tables HTML Forms  HTML Links HTML links are hyperlinks. Yo...

Introduction to web 3- HTML - (II) Dr. Heba Mamdouh Minia university Faculty of science Computer science department Agenda  HTML Links HTML Images HTML Lists HTML Tables HTML Forms  HTML Links HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. Note: A link does not have to be text. It can be an image or any other HTML element. Syntax  HTML Links href attribute is the most important attribute of the element , which indicates the link's destination. The link text is the part that will be visible to the reader. Example HTML Links Visit W3Schools.com!  Setting Link Colors You can set colors of your links, active links and visited links using link, alink and vlink attributes of tag. Example Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work. Hyperlink Example Click following link HTML Tutorial HTML Links - The Target Attribute Example Hyperlink Example Click any of the following links Opens in New | Opens in Self | Opens in Parent | Opens in Body  HTML Links - Image as Link To use an image as a link, just put the tag inside the tag: Example Image as a Link The image below is a link. Try to click on it. The src attribute (Required) specifies the URL (web address) of the image. The alt attribute (Required) provides an alternate text for an image, If a browser cannot find an image, it will display the value of the alt attribute.  Examples: Using Image in Webpage Simple Image Insert  Set Image Location If you have your images in a sub-folder, you must include the folder name in the src attribute: Example Using Image in Webpage Simple Image Insert  Set Image Border By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture. Example Set Image Border Setting image Border  Set Image Alignment By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right. Example Set Image Alignment Setting image Alignment  Image Floating Use the CSS float property to let the image float to the right or to the left of a text: Example Floating Images Float the image to the right: A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. Float the image to the left: A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. Image Floating  HTML Image Tags and attributes Use the HTML element to define an image Use the HTML src attribute to define the URL of the image Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed Use the HTML width and height attributes or the CSS width and height properties to define the size of the image Use the CSS float property to let the image float to the left or to the right HTML Lists  HTML Lists All lists must contain one or more list elements. Lists may contain: :An unordered list. This will list items using plain bullets. :An ordered list. This will use different schemes of numbers to list your items. : A definition list. This arranges your items in the same way as they are arranged in a dictionary.  Unordered HTML List An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML tag. Each list item starts with the tag. Each item in the list is marked with a bullet. Example HTML Unordered List Beetroot Ginger Beetroot Potato Ginger Radish Potato Radish  Unordered HTML List - The Type Attribute You can use type attribute for tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options: , , Following is an example where we used HTML Unordered List  Beetroot  Ginger Beetroot  Potato Ginger  Radish Potato Radish  Ordered HTML List This list is created by using tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with. Example HTML Ordered List 1. Beetroot 2. Ginger 3. Potato Beetroot 4. Radish Ginger Potato Radish  Ordered HTML List - The Type Attribute You can use type attribute for tag to specify the type of numbering you like. By default, it is a number. Following are the possible options - Default-Case Numerals. - Upper-Case Numerals. - Lower-Case Numerals. - Upper-Case Letters. - Lower-Case Letters.  Example Following is an example where we used HTML Ordered List i. Beetroot ii. Ginger Beetroot iii. Potato Ginger iv. Radish Potato Radish  Control List Counting You can use start attribute for tag to specify the starting point of numbering you need. Following are the possible options − - Numerals starts with 4. - Numerals starts with IV. - Numerals starts with iv. - Letters starts with d. - Letters starts with D.  Example Following is an example where we used HTML Ordered List iv. Beetroot v. Ginger vi. Potato Beetroot vii. Radish Ginger Potato Radish  HTML Description Lists HTML also supports description lists. A description list is a list of terms, with a description of each term. The tag defines the description list, the tag defines the term (name), and the tag describes each term  Example A Description List Coffee - black hot drink Milk - white cold drink  HTML List Tags Tag Description Defines an unordered list Defines an ordered list Defines a list item Defines a description list Defines a term in a description list Describes the term in a description list  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). 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 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Here, the border is an attribute of tag and it is used to put a border across all the cells. If you do not need a border, then you can use border = "0".  Table Heading Table heading can be defined using tag. Normally you will put your top row as table heading as shown below, otherwise you can use element in any row. Headings, which are defined in tag are centered and bold by default.  Example HTML Table Header Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 Cellpadding and Cellspacing Attributes There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell. Example Colspan and Rowspan Attributes You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows. Example  Tables Backgrounds You can set table background using one of the following two ways: bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute. Example Here is an example of using background attribute.  Table Height and Width You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area. Example  Nested Tables You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag. Example:  Example HTML Table  Method The method Attribute This form will be submitted using the GET method: First name: Last name: After you submit, notice that the form values is visible in the address bar of the new browser tab.  When to Use POST? Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL) POST has no size limitations, and can be used to send large amounts of data. Form submissions with POST cannot be bookmarked. Tip: Always use POST if the form data contains sensitive or personal information!  When to Use GET? Appends the form data to the URL, in name/value pairs NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!) The length of a URL is limited (2048 characters) Useful for form submissions where a user wants to bookmark the result. GET is good for non-secure data, like query strings in Google  Auto complete The form autocomplete attribute Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works. Then, try to set autocomplete to "off". First name: Email:  HTML Form Controls There 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 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 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 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 tag.  Single-line text input - Attributes Following is the list of attributes for tag for creating text field. No Attribute & Description 1 type Indicates the type of input control and for text input control it will be set to text. 2 name Used to give a name to the control which is sent to the server to be recognized and get the value. 3 value This can be used to provide an initial value inside the control. 4 size Allows to specify the width of the text-input control in terms of characters. 5 maxlength Allows to specify the maximum number of characters a user can enter into the text box.  Example Here is a basic example of a single-line text input used to take first name and last name Text Input Control First name: Last name:  Password input controls They are created using HTML tag but type attribute is set to password. Attributes : Size Maxlength Name Value Align  Example Here is a basic example of a single-line password input used to take user password − Password Input Control User ID : Password:  Multiple-Line Text Input Controls Multi-line input controls are created using HTML tag. Attributes Following is the list of attributes for tag. No Attribute & Description 1 name Used to give a name to the control which is sent to the server to be recognized and get the value. 2 rows Indicates the number of rows of text area box. 3 cols Indicates the number of columns of text area box  Example Here is a basic example of a multi-line text input used to take item description Multiple-Line Input Control Description : Enter description here...  Checkbox Control Checkboxes are used when more than one option is required to be selected. They are also created using HTML tag but type attribute is set to checkbox. Attributes No Attribute & Description 1 type Indicates the type of input control and for checkbox input control it will be set to checkbox.. 2 name Used to give a name to the control which is sent to the server to be recognized and get the value. 3 value The value that will be used if the checkbox is selected. 4 checked Set to checked if you want to select it by default.  Example Here is an example HTML code for a form with two checkboxes Checkbox Control Maths Physics  Radio Button Control Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML tag but type attribute is set to radio. Attributes No Attribute & Description 1 type Indicates the type of input control and for checkbox input control it will be set to radio. 2 name Used to give a name to the control which is sent to the server to be recognized and get the value. 3 value The value that will be used if the radio box is selected. 4 checked Set to checked if you want to select it by default.  Example Here is example HTML code for a form with two radio buttons Radio Box Control Maths Physics  Select Box Control A 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. It is created using HTML tag. Attributes Following is the list of important attributes of tag: No Attribute & Description 1 name Used to give a name to the control which is sent to the server to be recognized and get the value. 2 size This can be used to present a scrolling list box. 3 multiple If set to "multiple" then allows a user to select multiple items from the menu. Following is the list of important attributes of tag − No Attribute & Description 1 value The value that will be used if an option in the select box box is selected. 2 selected Specifies that this option should be the initially selected value when the page loads. 3 label An alternative way of labeling options  Example Here is example HTML code for a form with one drop down box Select Box Control Maths Physics  File Upload Box File upload box is also created using the element but type attribute is set to file. Attributes No Attribute & Description 1 name Used to give a name to the control which is sent to the server to be recognized and get the value. 2 accept Specifies the types of files that the server accepts.  Example Here is example HTML code for a form with one file upload box File Upload Box  Button Controls There are various ways in HTML to create clickable buttons. You can also create a clickable button using tag by setting its type attribute to button. The type attribute can take the following values: No Type & Description 1 submit This creates a button that automatically submits a form. 2 reset This creates a button that automatically resets form controls to their initial values. 3 button This creates a button that is used to trigger a client-side script when the user clicks that button. 4 image This creates a clickable button but we can use an image as background of the button.  Example Here is example HTML code for a form with three types of buttons File Upload Box