Download presentation
Presentation is loading. Please wait.
1
LECTURE 2 (ETCS-308) Subject teacher : Ms. Gunjan Beniwal
WEB ENGINEERING LECTURE (ETCS-308) Subject teacher : Ms. Gunjan Beniwal
2
Text, Images, List, Tables
HTML Basics Text, Images, List, Tables
3
HTML TAGS All HTML documents must start with a type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. The HTML <head> element is placed between the <html> tag and the <body> tag
4
The <!DOCTYPE> Declaration
* 07/16/96 The <!DOCTYPE> Declaration HTML documents must start with a document type definition (DTD) It tells web browsers what type is the served code Possible versions: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5 Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
5
The <head> Section
* 07/16/96 The <head> Section Contains information that doesn’t show directly on the viewable page Starts after the <!doctype> declaration Begins with <head> and ends with </head> Contains mandatory single <title> tag Can contain some other tags, e.g. <meta> <script> <style> <!–- comments --> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
6
<head> Section: <title> tag
* 07/16/96 <head> Section: <title> tag Title should be placed between <head> and </head> tags Used to specify a title in the window title bar Search engines and people rely on titles <title>Telerik Academy – Winter Season 2009/2010 </title> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
7
<head> Section: <meta>
* 07/16/96 <head> Section: <meta> Meta tags additionally describe the content contained within the page <meta name="description" content="HTML tutorial" /> <meta name="keywords" content="html, web design, styles" /> <meta name="author" content="Chris Brewer" /> <meta http-equiv="refresh" content="5; url= /> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
8
<head> Section: <script>
* 07/16/96 <head> Section: <script> The <script> element is used to embed scripts into an HTML document Script are executed in the client's Web browser Scripts can live in the <head> and in the <body> sections Supported client-side scripting languages: JavaScript (it is not Java!) VBScript JScript (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
9
Comments: <!-- --> Tag
* 07/16/96 Comments: <!-- --> Tag Comments can exist anywhere between the <html></html> tags Comments start with <!-- and end with --> <!–- Telerik Logo (a JPG file) --> <img src="logo.jpg" alt=“Telerik Logo"> <!–- Hyperlink to the web site --> <a href=" (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
10
<body> Section: Introduction
* 07/16/96 <body> Section: Introduction The <body> section describes the viewable portion of the page Starts after the <head> </head> section Begins with <body> and ends with </body> <html> <head><title>Test page</title></head> <body> <!-- This is the Web page body --> </body> </html> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
11
HTML Headings HTML headings are defined with the <h1> to <h6> tags: <!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
12
This is heading 1 Output This is heading 2 This is heading 3
13
HTML Paragraphs HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html> <html> <body> <p>This is a paragraph 1.</p> <p>This is a paragraph 2.</p> <p>This is a paragraph 3.</p> </body> </html>
14
Output This is a paragraph 1. This is a paragraph 2.
15
HTML Links HTML links are defined with the <a> tag:
<!DOCTYPE html> <html> <body> <a href=" is a link</a> </body> </html>
16
HTML Images <!DOCTYPE html> <html> <body>
<img src=“xyz.jpg" width="104" height="142"> </body> </html>
17
Empty HTML Elements HTML elements with no content are called empty elements. <br> is an empty element without a closing tag (the <br> tag defines a line break). Empty elements can be "closed" in the opening tag like this: <br />.
18
HTML Attributes HTML elements can have attributes
They provide additional information about an element. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value"
19
The lang Attribute The language is declared in the lang attribute.
<!DOCTYPE html> <html lang="en-US"> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
20
The title Attribute <!DOCTYPE html> <html> <body>
<h1>About W3Schools</h1> <p title="About W3Schools"> W3Schools is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc. </p> <p><b>If you move the mouse over the paragraph above, the title will display as a tooltip. </b></p> </body> </html>
21
Output About W3Schools W3Schools is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc. If you move the mouse over the paragraph above, the title will display as a tooltip.
22
HTML ATTRIBUTES The href Attribute
<a href=" is a link</a> Size Attributes <img src=“logo.jpg" width="104” height="142"> The alt Attribute <img src=“logo.jpg" alt=“msit logo” width="104"height="142">
23
Attribute Description
alt - Specifies an alternative text for an image disabled - Specifies that an input element should be disabled href -Specifies the URL (web address) for a link id – Specifies a unique id for an element src - Specifies the URL (web address) for an image style - Specifies an inline CSS style for an element title - Specifies extra information about an element (displayed as a tool tip)
24
The <hr> tag creates a horizontal line in an HTML page.
<p>This is a paragraph.</p> </body> </html><!DOCTYPE html> <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr>
25
Headings and Paragraphs – Example
<!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html>
26
Headings and Paragraphs – Example (2)
<!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html>
27
Some Simple Tags – Example
* 07/16/96 Some Simple Tags – Example <!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href=" title= "Telerik site">This is a link.</a> <br /> <img src="logo.gif" alt="logo" /> <strong>Bold</strong> and <em>italic</em> text. </body> </html> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
28
Some Simple Tags – Example (2)
* 07/16/96 Some Simple Tags – Example (2) <!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href=" title= "Telerik site">This is a link.</a> <br /> <img src="logo.gif" alt="logo" /> <strong>Bold</strong> and <em>italic</em> text. </body> </html> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
29
* 07/16/96 Text Formatting Text formatting tags modify the text between the opening tag and the closing tag Ex. <b>Hello</b> makes “Hello” bold <b></b> bold <i></i> italicized <u></u> underlined <sup></sup> Samplesuperscript <sub></sub> Samplesubscript <strong></strong> strong <em></em> emphasized <pre></pre> Preformatted text <blockquote></blockquote> Quoted text block <del></del> Deleted text – strike through (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
30
Text Formatting – Example
* 07/16/96 Text Formatting – Example <!DOCTYPE HTML> <html> <head> <title>Page Title</title> </head> <body> <h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph: preformatted.</pre></p> <h2>More Info</h2> <p>Specifically, we’re using XHMTL 1.0 transitional.<br /> Next line.</p> </body> </html> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
31
Text Formatting – Example (2)
* 07/16/96 Text Formatting – Example (2) <!DOCTYPE HTML> <html> <head> <title>Page Title</title> </head> <body> <h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph: preformatted.</pre></p> <h2>More Info</h2> <p>Specifically, we’re using XHMTL 1.0 transitional.<br /> Next line.</p> </body> </html> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
32
Style Attribute Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax: style="property :value;" The property is a CSS property. The value is a CSS value.
33
Background-color <body style="background-color:lightgrey;"> </body> The color property defines the text color for an HTML element: <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> The font-family property defines the font to be used for an HTML element: <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>
34
The font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> The text-align property defines the horizontal text alignment for an HTML element: <h1 style="text-align:center;">Centered Heading</h1> <p>This is a paragraph.</p>
35
HTML List
36
Ordered Lists: <ol> Tag
* 07/16/96 Ordered Lists: <ol> Tag Create an Ordered List using <ol></ol>: Attribute values for type are 1, A, a, I, or i <ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> Apple Orange Grapefruit Apple Orange Grapefruit Apple Orange Grapefruit Apple Orange Grapefruit Apple Orange Grapefruit (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
37
Unordered Lists: <ul> Tag
* 07/16/96 Unordered Lists: <ul> Tag Create an Unordered List using <ul></ul>: Attribute values for type are: disc, circle or square <ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> Apple Orange Pear Apple Orange Pear Apple Orange Pear (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
38
Definition lists: <dl> tag
Create definition lists using <dl> Pair of text and associated definition; text is in <dt> tag, definition in <dd> tag Renders without bullets Definition is indented <dl> <dt>HTML</dt> <dd>A markup language …</dd> <dt>CSS</dt> <dd>Language used to …</dd> </dl>
39
Lists – Example <ol type="1"> <li>Apple</li>
<li>Orange</li> <li>Grapefruit</li> </ol> <ul type="disc"> </ul> <dl> <dt>HTML</dt> <dd>A markup lang…</dd> </dl>
40
HTML Special Characters
* 07/16/96 HTML Special Characters British Pound € € Euro " " Quotation Mark Japanese Yen — — Em Dash Non-breaking Space & & Ampersand > Greater Than < Less Than ™ ™ Trademark Sign Registered Trademark Sign Copyright Sign Symbol HTML Entity Symbol Name (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
41
Special Characters – Example
<p>[>> Welcome <<]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>© 2006 by Svetlin Nakov & his team</p> <p>Telerik Academy™</p>
42
Special Chars – Example (2)
<p>[>> Welcome <<]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>© 2006 by Svetlin Nakov & his team</p> <p>Telerik Academy™</p>
43
HTML Tables
44
HTML Tables Tables represent tabular data
* 07/16/96 HTML Tables Tables represent tabular data A table consists of one or several rows Each row has one or more columns Tables comprised of several core tags: <table></table>: begin / end the table <tr></tr>: create a table row <td></td>: create tabular data (cell) Tables should not be used for layout. Use CSS floats and positioning styles instead (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
45
HTML Tables (2) Start and end of a table Start and end of a row
Start and end of a cell in a row <table> ... </table> <tr> ... </tr> <td> ... </td>
46
Thankyou!!!
Similar presentations
