Download presentation
Presentation is loading. Please wait.
1
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
2
HyperText Markup Language (HTML)
Part - II For Lecture Material/Slides Thanks to:
3
Objectives HTML Head HTML Styles - CSS HTML Images HTML Tables
HTML Lists HTML Blocks HTML Layouts HTML Forms and Input HTML iframes T2-Lecture Ahmed Mumtaz Mustehsan
4
HTML Head
5
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 Ahmed Mumtaz Mustehsan
6
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 Ahmed Mumtaz Mustehsan
7
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=" target="_blank"> </head> T2-Lecture Ahmed Mumtaz Mustehsan
8
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 Ahmed Mumtaz Mustehsan
9
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 Ahmed Mumtaz Mustehsan
10
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
11
<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 Ahmed Mumtaz Mustehsan
12
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 Ahmed Mumtaz Mustehsan
13
Review head Elements T2-Lecture Ahmed Mumtaz Mustehsan
14
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 Ahmed Mumtaz Mustehsan
15
HTML Styles – CSS
16
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 Ahmed Mumtaz Mustehsan
17
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 Ahmed Mumtaz Mustehsan
18
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 Ahmed Mumtaz Mustehsan
19
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 Ahmed Mumtaz Mustehsan
20
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 Ahmed Mumtaz Mustehsan
21
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 Ahmed Mumtaz Mustehsan
22
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 Ahmed Mumtaz Mustehsan
23
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 Ahmed Mumtaz Mustehsan
24
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 Ahmed Mumtaz Mustehsan
25
Review Style Tags T2-Lecture Ahmed Mumtaz Mustehsan
26
HTML Tables
27
HTML Tables HTML Table Example:
T2-Lecture Ahmed Mumtaz Mustehsan
28
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 Ahmed Mumtaz Mustehsan
29
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 Ahmed Mumtaz Mustehsan
30
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 Ahmed Mumtaz Mustehsan
31
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 Ahmed Mumtaz Mustehsan
32
HTML Table Tags T2-Lecture Ahmed Mumtaz Mustehsan
33
HTML Lists
34
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 Ahmed Mumtaz Mustehsan
35
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 Ahmed Mumtaz Mustehsan
36
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 Ahmed Mumtaz Mustehsan
37
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 Ahmed Mumtaz Mustehsan
38
Review List Tags T2-Lecture Ahmed Mumtaz Mustehsan
39
HTML Blocks
40
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 Ahmed Mumtaz Mustehsan
41
HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img> T2-Lecture Ahmed Mumtaz Mustehsan
42
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 Ahmed Mumtaz Mustehsan
43
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 Ahmed Mumtaz Mustehsan
44
Review Grouping Tags T2-Lecture Ahmed Mumtaz Mustehsan
45
HTML Layouts
46
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 Ahmed Mumtaz Mustehsan
47
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 Ahmed Mumtaz Mustehsan
48
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 Ahmed Mumtaz Mustehsan
49
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 Ahmed Mumtaz Mustehsan
50
Review Layout Tags T2-Lecture Ahmed Mumtaz Mustehsan
51
HTML Forms and Input
52
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 Ahmed Mumtaz Mustehsan
53
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 Ahmed Mumtaz Mustehsan
54
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 Ahmed Mumtaz Mustehsan
55
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 Ahmed Mumtaz Mustehsan
56
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 Ahmed Mumtaz Mustehsan
57
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 Ahmed Mumtaz Mustehsan
58
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 Ahmed Mumtaz Mustehsan
59
HTML Form Tags T2-Lecture Ahmed Mumtaz Mustehsan
60
HTML iframes
61
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 Ahmed Mumtaz Mustehsan
62
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 Ahmed Mumtaz Mustehsan
63
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 Ahmed Mumtaz Mustehsan
64
Review iframe Tag T2-Lecture Ahmed Mumtaz Mustehsan
65
The End HPML Part-II Thank You
Similar presentations
