Ahmed Mumtaz Mustehsan CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad Virtual Campus, CIIT COMSATS Institute of Information Technology T2-Lecture-2
HyperText Markup Language (HTML) Part - II For Lecture Material/Slides Thanks to: www.w3schools.com
Objectives HTML Head HTML Styles - CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layouts HTML Forms and Input HTML iframes T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Head
The HTML <head> Element The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The HTML <title> Element The <title> tag defines the title of the document required in all HTML/XHTML documents. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results A simplified HTML document: <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The HTML <base> Element The <base> tag specifies the base URL/target for all relative URLs in a page. It defines a default address or a default target for all links on a page: <head> <base href="http://www.comsats.edu.pk/images/" target="_blank"> </head> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The HTML <link> Element The <link> tag defines the relationship between a document and an external resource. The <link> tag is mostly used to link with style sheets: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> CSS means Cascading Style Sheet T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The HTML <style> Element The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser: <head> <style type="text/css"> body {background-color:blue;} p {color:yellow;} </style> </head> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The HTML <meta> Element Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta> tags always go inside the <head> element. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
<meta> Tags - Examples Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS"> Define the author of a page: <meta name="author" content="Hege Refsnes"> Refresh document every 30 seconds: <meta http-equiv="refresh" content="30"> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The HTML <script> Element The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element will be explained in a later chapter. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Review head Elements T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Deprecated Tags and Attributes In HTML 4, several formatting tags and attributes were used to style documents. These tags are not supported in newer versions of HTML. Avoid using the elements: <font>, <center> and <strike>, and the attributes: color and bgcolor. Solution? Use Style CSS CSS means Cascading Style Sheet T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Styles – CSS
HTML Styles - CSS CSS was introduced together with HTML 4, to provide a better way to style HTML elements. It removed the overhead of formatting every page which was very time consuming. Using styles in HTML: How to add style information inside the <head> section ? T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Styling HTML with CSS CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS file The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files usually adopted by the web designer. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Inline Styles An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. Example to change the text color and the left margin of a paragraph: <p style="color:blue; margin-left: 20px;">This is a paragraph.</p> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Inline Style – using style attributes Define the background-color using style attribute: Example <!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html> The background-color property override the previously defined background color in the block <body> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Inline Style Font, Color and Size attributes Define font-family, color, and font-size properties using style attributes: Example <!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html> The font-family, color, and font-size properties override the previously defined attributes: T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Style Example - Text Alignment Define text-align property specifies the horizontal alignment of text using style attributes: Example <!DOCTYPE html> <html> <body> <h1 style="text-align:center;"> Center-aligned heading </h1> <p>This is a paragraph.</p> </body> </html> demo!!! T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Internal Style Sheet An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this: <head> <style> body {background-color:yellow;} p {color:blue;} </style> </head> demo !!! T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Sample CSS File “myfile.css” body { font-family: arial; } h1 background-color:#CCC; border: 1px solid; color:#39F; text-align: center; table background-color: #F60; border: 1px solid #39F; width: 100%; td { border: 0px; text-align: center; } p color:#09F; text-indent: 20px; T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Review Style Tags T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Tables
HTML Tables HTML Table Example: T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Tables Example Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. (tr : table row) A row is divided into data cells with the <td> tag. (td : table data) A row can be divided into headings with the <th> tag. (th :table heading) The <td> elements are the data containers in the table. The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc. The width of a table can be defined using CSS. Example <table style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Table Headings Example Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centered: Example <table style="width:300px"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> To left-align the table headings, use the CSS text-align property: th { text-align:left; } T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
An HTML Table with Cell Padding Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property: Example th,td { padding:15px; } T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
An HTML Table with Cell Spacing Cell spacing specifies the space between the cells. To set the cell spacing for the table, use the CSS border-spacing property: Example table { border-spacing:5px; } demo !!! T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Table Tags T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Lists
HTML Lists The most common HTML lists are ordered and unordered lists: An ordered list: The first list item The second list item The third list item An unordered list: List item T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). <ul> <li> Coffee </li> <li> Milk </li> </ul> How the browser displays: Coffee Milk T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li>Coffee</li> <li>Milk</li> </ol> How the browser displays: Coffee Milk T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Description Lists A description list is a list of terms/names, with a description of each term/name. The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> How the browser displays: Coffee - black hot drink Milk - white cold drink T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Review List Tags T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Blocks
HTML Block Elements HTML elements can be grouped together with <div> and <span>. Most HTML elements are defined as block level elements or as inline elements. Block level elements normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>, <table> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The HTML <div> Element The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. The <div> element has no special meaning. Except that, it tells the browser to display a line break before and after the block. When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Which was incorrect as the correct use/ purpose of the <table> element is to display tabular data. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The HTML <span> Element The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. When used together with CSS, the <span> element set style attributes to parts of the text within the block section. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Review Grouping Tags T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Layouts
Website Layouts Web page layout is very important to make your website look good. Design your webpage layout very carefully. Most websites put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Layouts - Using Tables A simple way of creating layouts is by using the HTML <table> tag. Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages. Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data! T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Using <div> Elements Example uses five div elements to create a multiple column layout: demo !!! <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <!.. 1..> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">CSC 330 E-Commerce </h1></div> <div id="menu" style="background- <!.. 2..> color:#FFD700;height:200px;width:100px;float:left;"> <b>Track-2 </b><br> HTML<br> CSS<br> XML<br> JavaScript <br> PHP</div> <div id="content" style="background- <!.. 3..> color:#EEEEEE;height:200px;width:400px;float:left;"> Covers Basic Web Technologis</div> <!.. 4..> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com / vcomsats.edu.pk </div></div></body></html> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Useful Tips for Page layout The biggest advantage of using CSS is that, we place the CSS code in an external style sheet, our site becomes MUCH EASIER to maintain. we can change the layout of all pages by editing one file. Advanced layouts take time to create, so a quicker option is to use a template. Google provides free website templates (these are pre-built website layouts you can use and customize). T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Review Layout Tags T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Forms and Input
HTML Forms and input HTML Forms are used to select different user inputs. are used to pass data to a server. can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: <form> . input elements . </form> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The Input Element The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Text Fields The most common input type is text: <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form> Note: The characters in a password field are masked (shown as asterisks or circles). T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Radio Buttons <input type="radio"> defines a radio button. Radio buttons let a user select ONLY 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> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Submit Button <input type="submit"> defines a submit button. A submit button is used to send data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Form Tags T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML iframes
HTML Iframes An iframe is used to display a web page within a web page. Syntax for adding an iframe: <iframe src="URL"></iframe> The URL points to the location of the separate page. T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Iframe - Set Height and Width The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). Example <iframe src="demo_iframe.htm" width="200" height="200"></iframe> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Iframe - Remove the Border The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border: Example <iframe src="demo_iframe.htm" frameborder="0"></iframe> T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
Review iframe Tag T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com
The End HPML Part-II Thank You