Web Design and Development Lecture 2

Web Design and
development
Lecture 2
Course Instructor: Wardah Mahmood
Email Id: wardah.mahmood@riphah.edu.pk
How the Web Works?
• WWW uses classical client / server architecture.
• HTTP is text-based request-response protocol.
Page request
Server response
Server running Web Server

Client running a Web
Software (IIS, Apache, etc.)
Browser
What is a Web Page?
• Web pages are text files containing HTML
• HTML – Hyper Text Markup Language
• A notation for describing
• document structure (semantic markup)
• formatting (presentation markup)
• Looks like:
• A Microsoft Word document
• The markup tags provide information about the page content structure
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):
• Microsoft FrontPage
• Macromedia Dreamweaver
• Netscape Composer
• Microsoft Word
• Visual Studio
4
Preface
• It is important to have the correct vision and attitude towards HTML.
• HTML is only about structure, not appearance.
• Browsers tolerate invalid HTML code and parse errors – you should not.
5
HTML Documents
• All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
• The HTML document itself begins with <html> and ends with </html>.
• The title and other page related information comes in the tag <head> and
</head>
• The visible part of the HTML document is between <body> and </body>.
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 -->
7
<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 in the window title bar

• Search engines and people rely on titles
8
<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" />
9
<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
10
The <script> Tag – Example
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!<\/p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>
11
<head> Section: <style>
• The <style> element embeds formatting information (CSS styles) into an HTML
page
<html>
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html> 12
Comments:  Tag
• Comments can exist anywhere between the <html></html> tags
• Comments start with 
<!–- Telerik Logo (a JPG file) -->

<img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a>
<!–- Show the news table -->
<table class="newstable">
...
13
HTML basic structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
HTML Block and Inline elements
• A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
• An inline element does not start on a new line and only takes up as much width
as necessary.
• Examples of block-level elements are <div>, <h1> - <h6>, <p> and <form>.
• Examples of inline elements are <span>, <a> and <img>
HTML Heading Tags
• Any document starts with a heading. You can use different sizes for your
headings.
• HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>.
• While displaying any heading, browser adds one line before and one line after
that heading.
HTML Heading Tags
<body>
<h1>This is heading 1</h1>
</body>
HTML Paragraphs
• The <p> tag offers a way to structure your text into different paragraphs.
• Each paragraph of text should go in between an opening <p> and a closing </p>
tag as shown in the example.
HTML Paragraphs
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
HTML Line Break Tag
• Whenever you use the <br /> element, anything following it starts from the next
line. This tag is an example of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.
• The <br /> tag has a space between the characters br and the forward slash. If
you omit this space, older browsers will have trouble rendering the line break,
while if you miss the forward slash character and just use <br> it is not valid in
XHTML.
HTML Line Break Tag
<body>
<p>Hello<br />
You delivered your assignment on time.
<br />
Thanks<br />
Mahnaz
</p>
</body>
HTML Lists
• A lot of the web's content is lists, and HTML has special elements for these. The
most common list types are ordered and unordered lists:
• Unordered lists are for lists where the order of the items doesn't matter, like a
shopping list. These are wrapped in a <ul>element.
• Ordered lists are for lists where the order of the items does matter, like a recipe.
These are wrapped in an <ol> element.
• Each item inside the lists is put inside an <li> (list item) element.
HTML Lists
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
HTML Definition Lists
• Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
• Renders without bullets

• Definition is indented
HTML References
• HTML links are defined with the <a> tag.
• The link's destination is specified in the href attribute.
• Attributes are used to provide additional information about HTML elements.
• <a href="https://www.w3schools.com">This is a link</a>
HTML References
• Link to a document called form.html on the same server in the same directory:
<a href="form.html">Fill Our Form</a>

• Link to a document called parent.html on the same server in the parent directory:
<a href="../parent.html">Parent</a>
• Link to a document called cat.html on the same server in the subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
HTML References
• 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:bugs@example.com?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
HTML References
• 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>
HTML Links
• a:link: Doesn’t really do anything; just applies to an anchor that really is a link.
• a:visited: Used for styling a visited link.
• a:hover: Applies when you hover your mouse over the link.
• a:active: Applies when you have the mouse button down on a link.
HTML Images
• 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)
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" />
HTML Center
• You can use tag to put any content in the center of the page or any table cell.
<body>
<p> This text is not in the center. </p>
<center>
<p> This text is not in the center. </p>
</center>
</body>
HTML Horizontal Lines
• Horizontal lines are used to visually break-up sections of a document. The tag
creates a line from the current position in the document to the right margin and
breaks the line accordingly.
<p> This is paragraph one and should be on top </p>

<hr />
<p>This is paragraph two and should be at bottom</p>
HTML Preserve Formatting
• Sometimes, you want your text to follow the exact format of how it is written in
the HTML document. In these cases, you can use the preformatted tag <pre>
• Any text between the opening tag <pre> and the closing tag </pre> will preserve
the formatting of the source document.
<pre>
function testFunction( strText )
{
alert (strText)
}
</pre>
HTML Non Breaking Spaces
• In cases, where you do not want the client browser to break text, you should use
a nonbreaking space entity instead of a normal space.
<p>
An example of this technique appears in the movie
"12 Angry Men.
</p>
HTML div and span
• A span element is in-line and usually used for a small chunk of HTML inside a line
(such as inside a paragraph).
• A div (division) element is block-line (which is basically equivalent to having a
line-break before and after it) and used to group larger chunks of code.
<div style="font-size:24px; color:red">DIV

example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
HTML div and span
• http://www.tizag.com/htmlT/htmldiv.php
• Open notepad.
• Let’s practice an example.

HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign © ©
Registered Trademark Sign ® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Non-breaking Space
Em Dash — —
Quotation Mark " "
Euro € €
British Pound £ £
Japanese Yen ¥ ¥
Text Formatting
<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
• Text formatting tags modify the text between the opening tag and the closing tag
• Ex. <b>Hello</b> makes “Hello” bold
38
Text Formatting
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
39

Web Design and Development Lecture 2

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Web Design and Development Lecture 2

Încărcat de

Drepturi de autor:

Formate disponibile

Web Design and

Server running Web Server

• Used to specify a title in the window title bar

<meta name="description" content="HTML

<meta name="keywords" content="html, web

<meta name="author" content="Chris Brewer" />

<meta http-equiv="refresh" content="5;

• Supported client-side scripting languages:

<!–- Telerik Logo (a JPG file) -->

• Renders without bullets

<a href="form.html">Fill Our Form</a>

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

• Always use a full URL, including "http://", not just "www.somesite.com"

<p> This is paragraph one and should be on top </p>

<div style="font-size:24px; color:red">DIV

• Let’s practice an example.

S-ar putea să vă placă și