Scribd
Upload
110 views

Web Engineering: Muhammad Kamran

<SUMMARY> The document discusses the structure and key elements of HTML documents. It explains that HTML documents must begin with a <!DOCTYPE> declaration and contain a <head> and <body> section. The <head> section contains non-visible page information like the <title> and can also include <meta>, <script>, and <style> tags. The <body> section contains the visible page content. </SUMMARY>

Uploaded by

zaryab ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
110 views

Web Engineering: Muhammad Kamran

<SUMMARY> The document discusses the structure and key elements of HTML documents. It explains that HTML documents must begin with a <!DOCTYPE> declaration and contain a <head> and <body> section. The <head> section contains non-visible page information like the <title> and can also include <meta>, <script>, and <style> tags. The <body> section contains the visible page content. </SUMMARY>

Uploaded by

zaryab ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 55

Web Engineering

Muhammad Kamran
Lecture 2
HTML Basics
HTML, Text, Images, Tables, Forms
Table of Contents
1. Introduction to HTML
 How the Web Works?
 What is a Web Page?
 My First HTML Page
 Basic Tags: Hyperlinks, Images, Formatting
 Headings and Paragraphs
2. HTML in Details
 The <!DOCTYPE> Declaration
 The <head> Section: Title, Meta, Script, Style
3
Table of Contents (2)
 The <body> Section
 Text Styling and Formatting Tags
 Hyperlinks: <a> Tag
 Hyperlinks and Sections
 Images: <img> tag
 Lists: <ol> and <ul> Tag
 HTML Special Characters
3. The <div> and <span> Tags
4
How the Web Works?
 WWW use classical client / server architecture
 HTTP is text-based request-response protocol

HTTP
Page request

HTTP
Server response

Server running Web


Client running a
Server Software
Web Browser
(IIS Apache, etc.)
5
What is a Web Page?
 Web pages are text files containing HTML
 HTML – Hyper Text Markup Language
 A notation for describing
 document structure
 formatting
 Looks like:
 A Microsoft Word document
 The markup tags tell the Web browser how to
display the page
6
Creating HTML Pages
 An HTML file must have an .htm or .html file
extension
 HTML files can be created with text editors:

 NotePad, NotePad ++, PSPad


 Or HTML editors (WYSIWYG Editors):
 Macromedia Dreamweaver
 Netscape Composer
 PhP Designer
 Visual Studio, Microsoft FrontPage
7
HTML Basics
Text, Images, Tables, Forms
First HTML Page
test.html
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
This is some text that will
appear on the web page.
</body>
</html>

9
First HTML Page: Tags

<html>
Opening tag
<head>
<title>My First HTML Page</title>
</head>
<body> Closing tag
This is some text that will
appear on the web page.
</body>
</html>

10
First HTML Page: Header
HTML header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
This is some text that will
appear on the web page.
</body>
</html>

11
First HTML Page: Body

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
This is some text that will
appear on the web page.
</body>
</html>
HTML body

12
Some Simple Tags
 Hyperlink Tags

<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web site</a>

 Image Tags

<img src="logo.gif" alt="logo" />

 Formatting tags

<b>This text is bold</b>


And this is <u>underlined</u>
<center>Some centered text</center>
13
Some Simple Tags – Example
some-tags.html
<html>
<body>
<a href="http://www.devbg.org/" title=
"BASD">This is a link to some URL</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<b>This text is bold</b>
<br />
And this is <u>underlined</u>
<br />
<center>Some centered text</center>
</body>
</html>
14
Some Simple Tags – Example (2)
some-tags.html
<html>
<body>
<a href="http://www.devbg.org/" title=
"BASD">This is a link to some URL</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<b>This text is bold</b>
<br />
And this is <u>underlined</u>
<br />
<center>Some centered text</center>
</body>
</html>

15
Some HTML Tags
Live Demo
Tags Attributes
 Tags could have attributes
 Attributes specify their properties and behavior
 Example: Attribute alt with value "logo"
<img src="logo.gif" alt="logo" />
 Few attributes that apply to every element:
 id, style, class, title
 The id is unique in the document
 Content of title attribute is displayed as hint
when element is hovered with mouse
 Some elements have obligatory attributes
17
Headings and Paragraphs
 Heading Tags

<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

 Paragraph Tags

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

 Sections: div and span

<div align="center" style=


"background: skyblue">This is a div</div>
18
Headings and Paragraphs –
Example
headings.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 align="center"
style="background:skyblue">
This is a div</div>
</body>
</html>
19
Headings and Paragraphs –
Example (2)
headings.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 align="center"
style="background:skyblue">
This is a div</div>
</body>
</html>
20
Headings and Paragraphs
Live Demo
Introduction to HTML
HTML Document Structure in Depth
The <!DOCTYPE> Declaration
 At their beginning HTML documents must have a
document type declaration
 It tells the Web browsers how to handle the HTML
data
 Possible versions: HTML 2.0, HTML 3.2, HTML 4.01,
XHTML 1.0, XHTML 1.1, …
 Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 See http://www.w3.org/QA/2002/04/Web-Quality for a list


of possible doctypes
23
HTML vs. XHTML

24
HTML vs. XHTML
 XHTML is more strict then HTML
 All tags must be properly nested (HTML allows
<b><i>text</b></i>)
 Tags and attribute names must be in lowercase
 Attribute values must be in " " (HTML allows ' ')
 All tags must be closed (<br/>, <img/>) while
HTML allows <br> and <img>
 XHTML allows only one root <html> element
(HTML allows more than one)
25
XHTML vs. HTML (2)
 Many element attributes
are deprecated in
XHTML, most are moved to CSS
 Attribute minimization is forbidden, e.g.
<input type="checkbox" checked>

<input type="checkbox" checked="checked" />

 Note: Web browsers load XHTML faster than


HTML and valid code faster than invalid!

26
HTML Structure
 HTML is comprised of elements called “tags”
 Begins with <html> and ends with </html>
 When writing XHTML, must define a namespace
<html xmlns="http://www.w3.org/1999/xhtml">

 Tags are nested one inside another:


<html> <head></head> <body></body> </html>
 Tags have attributes:
<img src="logo.jpg" alt="logo" />
 HTML describes structure using two main sections:
<head> and <body>
27
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 multiple nested tags, e. g.:


 <meta>
 <script>
 <style>
 <!– comments -->
28
<head> Section: <title> tag
 Title should be placed between <head> and
</head> tags
<title>Telerik Academy – Winter Season 2009/2010
</title>

 Used to specify a title to the Web page window


 Search engines and people rely on titles
29
<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=http://www.telerik.com">

30
<head> Section: <script>
 The <script> </script> tag 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
31
The <script> Tag – Example
<html> scripts-example.html
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write(
"<p><b>Hello World!<\/b>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>
32
Using Scripts
Live Demo
<head> Section: <style>
 The <style> </style> tag embeds formatting
information (CSS styles) into a HTML page
<html> style-example.html
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; float: left }
span { text-transform: uppercase }
</style>
</head>
<body>
<p>Styles demo.</p>
<span>Test uppercase</span>.
</body>
</html>
34
Embedding CSS Styles
Live Demo
Comments: <!-- --> Tag
 Comments can exist anywhere between the
<html></html> tags
 Comments start with <!-- and end with -->

<!–- BASD Logo (it is a GIF file with


transparent background) -->
<img src="logo.gif" alt="BASD Logo">
<!–- Hyperlink to BASD official Web site -->
<a href="http://www.devbg.org/">BASD Home</a>
<!–- Show the news table -->
<table class="newstable">
...

36
<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>

37
<body> Section: Attributes
 The <body> tag has the following attributes:
background Background image file ="URL"
bgcolor Background color ="color"
text Default text color ="color"
link Hyperlink color ="color"
vlink Visited hyperlink color ="color"

 Example:
<body background="texture.gif" text="#238E23">

* For color codes, see www.webreference.com/html/tools/colorizer/


38
Text Styling without CSS
 Text can be formatted  Different styles of
as headings or regular heading are
paragraph text available:
 Use these consistently! <h1></h1> Heading 1
 <p></p> by default <h2></h2> Heading 2
doubles the spaces <h3></h3> Heading 3
after each paragraph <h4></h4> Heading 4
<h5></h5> Heading 5
 <br /> is weird: the <h6></h6> Heading 6
trailing “/” makes it <p></p> Paragraph

XHTML compliant <br /> Line break

39
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
40
Text Formatting – Example
text-formatting.html
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Svetlin Nakov</title>
</head>
<body bgcolor="black" text="white" link="red" vlink="blue">
<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>
41
Text Formatting – Example (2)
text-formatting.html
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Svetlin Nakov</title>
</head>
<body bgcolor="black" text="white" link="red" vlink="blue">
<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>
42
Text Formatting
Live Demo
Hyperlinks: <a> Tag
 Link to a document calledform.html on the
same server in the same directory:
<a href="form.html">Fill Our Form</a>

 Link to a document calledparent.html on


the same server in the parent directory:
<a href="../parent.html">Parent</a>

 Link to a document calledcat.html on the


same server in the subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
44
Hyperlinks: <a> Tag (2)
 Link to an external Web site:

<a href="http://www.devbg.org" target="_blank">BASD</a>

 Always use a full URL, including "http://", not


just "www.somesite.com"
 Using the target="_blank" attribute opens
the link in a new window
 Link to an e-mail address:

<a href="mailto:[email protected]?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>

45
Hyperlinks: <a> Tag (3)
 Link to a document called apply-now.html
 On the same server, in same directory
 Using an image as a link button:
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>

 Link to a document called index.html


 On the same server, in the subdirectory english of
the parent directory:
<a href="../english/index.html">Switch to
English version</a>
46
Hyperlinks and Sections
 Link to another location in the same document:
<a href="#section1">Go to Introduction</a>
...
<a name="section1">Introduction</a>

 Link to a specific location in another document:


<a href="chapter3.html#section3.1.1">Go to Section
3.1.1</a>
<!–- In chapter3.html -->
...
<a name="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</a>

47
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br/>
<a href="../parent.html">Parent</a> <br/>
<a href="stuff/cat.html">Catalog</a> <br/>
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br/>
<a href="mailto:[email protected]?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br/>
<a href="apply-now.html"><img src="apply-now-button.jpg"
border="0"/></a> <br/>
<a href="../english/index.html">Switch to English
version</a> <br/>

48
Hyperlinks – Example (2)
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br/>
<a href="../parent.html">Parent</a> <br/>
<a href="stuff/cat.html">Catalog</a> <br/>
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br/>
<a href="mailto:[email protected]?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br/>
<a href="apply-now.html"><img src="apply-now-button.jpg"
border="0"/></a> <br/>
<a href="../english/index.html">Switch to English
version</a> <br/>

49
Hyperlinks
Live Demo
Links to the Same Document –
Example
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br/>
<a href="#section2">Some background</A><br/>
<a href="#section2.1">Project History</a><br/>
...the rest of the table of contents...
<!-- The document text follows here -->
<h2><a name="section1">Introduction</a></h2>
... Section 1 follows here ...
<h2><a name="section2">Some background</a></h2>
... Section 2 follows here ...
<h3><a name="section2.1">Project History</a></h3>
... Section 2.1 follows here ...

51
Links to the Same Document –
Example (2)
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br/>
<a href="#section2">Some background</A><br/>
<a href="#section2.1">Project History</a><br/>
...the rest of the table of contents...
<!-- The document text follows here -->
<h2><a name="section1">Introduction</a></h2>
... Section 1 follows here ...
<h2><a name="section2">Some background</a></h2>
... Section 2 follows here ...
<h3><a name="section2.1">Project History</a></h3>
... Section 2.1 follows here ...

52
Links to the Same Document
Live Demo
Images: <img> tag
 Inserting an image with <img> tag:

<img src="/img/basd-logo.png">

 Image attributes:

src Location of image file (relative or absolute)


alt Substitute text for display (e.g. in text mode)
align Text alignment: bottom, middle, top
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

 Example:

<img src="./php.png" alt="PHP Logo" border="0">


54
HTML Basics

Questions?

http://academy.telerik.com

You might also like