0% found this document useful (0 votes)
31 views36 pages

Web Design Lecture-1A: Instructor: Vishal Chawla

Uploaded by

wojehon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
31 views36 pages

Web Design Lecture-1A: Instructor: Vishal Chawla

Uploaded by

wojehon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

Web Design

Lecture-1A
Instructor: Vishal Chawla
2

Network
computers connected together for the purpose of communicating and sharing
resources

Source: Basics of Web Design (HTML5 and CSS3)


3
The Client/Server Model
 The Internet
Client/Server Model
 Client: Web Browser
 Server: Web Server

Source: Basics of Web Design (HTML5 and CSS3)


4
Internet Protocols

 Protocols
› Rules that describe the methods used for clients and servers to communicate with
each other over a network.

 Internet has number of protocols working


together

Source: Basics of Web Design (HTML5 and CSS3)


5
Hypertext Transfer Protocol

A set of rules for exchanging files such as text, graphic


images, sound, video, and other multimedia files on the
Web.
HTTP Request

HTTP Response

 Web browsers send HTTP requests for web pages and their associated files.

 Web servers send HTTP responses back to the web browsers.

Source: Basics of Web Design (HTML5 and CSS3)


6
IPAddress and Domain Name

 Each device connected to the Internet has a unique numeric IP address.

 Domain Name locates an organization or other entity on the Internet

 Domain Name System


◦ Divides the Internet into logical groups and understandable names
◦ Associates unique computer IP Addresses with the text-based domain names you type into a
web browser
◦ Browser: http://google.com
◦ IP Address: 74.125.73.106

Source: Basics of Web Design (HTML5 and CSS3)


7
URI - Uniform Resource Indicator

URL
Uniform Resource Locator
Represents the address of a resource on the Internet.

Source: Basics of Web Design (HTML5 and CSS3)


8
Top-Level Domain Name
 A top-level domain (TLD) identifies the right-most part of the domain name.

 Some generic TLDs:


.com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia, .cat, .jobs, .name, .biz, .museum, .info, .
coop, .pro, .travel

Source: Basics of Web Design (HTML5 and CSS3)


9
Domain Name System

The Domain Name System (DNS) associates


Domain Names with IP addresses.

Source: Basics of Web Design (HTML5 and CSS3)


Markup Languages
10

 SGML – Standard Generalized Markup Language


› A standard for specifying a markup language or tag set

 HTML – Hypertext Markup Language


› The set of markup symbols or codes placed in a file intended for display on a web
browser.
 Element or tag – individual markup code
 Attribute – modifies the purpose of a tag

Source: Basics of Web Design (HTML5 and CSS3)


11
Markup Languages
 XML – eXtensible Markup Language

 A text-based language designed to describe, deliver, and exchange structured information.

 It is not intended to replace HTML –


it is intended to extend the power of HTML by separating data from presentation.

Source: Basics of Web Design (HTML5 and CSS3)


12
Markup Languages
 XHTML – eXtensible Hypertext Markup Language

 Developed by the W3C as the reformulation of HTML 4.0 as


an application of XML.

 It combines the formatting strengths of HTML 4.0 and the data


structure and extensibility strengths of XML.

Source: Basics of Web Design (HTML5 and CSS3)


13
Markup Languages
 HTML 5

› The next version of HTML 4 and XHTML 1


 Incorporates features of both HTML and XHTML
 Adds new elements
 Eliminates some elements
 Intended to be backward compatible

› http://www.w3.org/html/

Source: Basics of Web Design (HTML5 and CSS3)


14
Under the Hood of
a Web Page
DTD – describes the markup language syntax
HTML element– contains the web page document
Head element – contains the head section
The head section contains information that describes the
web page document
Title element– Text displays in title bar of window
Meta element – describes the character encoding
Body element – contains the body section

The body section contains the text and elements that


display in the browser viewport.
Student Resources URL

 http://www.pearsonhighered.com/cs-resources/products/product.html#product,isbn=01339
70744

 http://www.pearsonhighered.com/felke-morris
16 The Paragraph Element
<p> tag
 Paragraph element
<p> …paragraph goes here… </p>

 Groups sentences and sections of text together.


 Configures empty space above and below the paragraph

Source: Basics of Web Design (HTML5 and CSS3)


17 The Line Break Element
<br> tag
 Line Break element
 Stand-alone tag
 Called a void element in HTML5

…text goes here <br>


This starts on a new line….

 Causes the next element or text to display on a new line

Source: Basics of Web Design (HTML5 and CSS3)


The Horizontal Rule Element
18
<hr> tag
 Horizontal Rule element
 void element

<hr >

 Configures a horizontal line on the page


 In HTML5, it should be used to indicate a thematic break at the paragraph level

Source: Basics of Web Design (HTML5 and CSS3)


19 The Blockquote Element
<blockquote>
 Blockquote element
 Indents a block of text for special emphasis

<blockquote>
…text goes here…
</blockquote>

Source: Basics of Web Design (HTML5 and CSS3)


Phrase Elements
20
 Indicate the context and meaning of the text
 Display inline with the text

 Common Phrase Elements


<b></b>
Text is displayed in bold font

 <strong></strong>
Text has strong importance and is displayed in bold

 <i></i>
Text is displayed in italic font

 <em></em>
Text has emphasis and is displayed in italic font
Source: Basics of Web Design (HTML5 and CSS3)
Proper Nesting
21

CODE:
<p><i>Call for a free quote for your web development needs: <strong>222.555.5555
</strong></i></p>

BROWSER DISPLAY:

Call for a free quote for your web development needs: 222.555.5555

Source: Basics of Web Design (HTML5 and CSS3)


22 HTML List Basics

 Unordered List
 Description List (XHTML Definition List)
 Ordered List

Source: Basics of Web Design (HTML5 and CSS3)


23 Unordered List
 Displays information with bullet points
 Unordered List Element
<ul>
Contains the unordered list

 List Item Element


<li>
Contains an item in the list

Source: Basics of Web Design (HTML5 and CSS3)


24 Unordered List Example
<h1>My Favorite Colors</h1>
<ul>
<li>Blue</li>
<li>Teal</li>
<li>Read</li>
</ul>

Source: Basics of Web Design (HTML5 and CSS3)


25 Ordered List
 Conveys information in an ordered fashion
 Ordered List Element
<ol>
Contains the ordered list
 type attribute determines numbering scheme of list
 default is numerals
 List Item Element
<li>
Contains an item in the list

Source: Basics of Web Design (HTML5 and CSS3)


26 Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>

Source: Basics of Web Design (HTML5 and CSS3)


Description List
27
 Formerly called a definition list in XHTML and HTML 4.0
 Uses:
 Display a list of terms and descriptions
 Display a list of FAQ and answers

 The Description List element


<dl> tag
Contains the definition list

 The dt Element
<dt>
tag
Contains a term or name

 The dd Element
<dd>tag
Contains a definition or description
Indents the text
28 Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>

Source: Basics of Web Design (HTML5 and CSS3)


29 Special Entity Characters
Display special characters such as quotes, copyright
symbol, etc.

Character Code
© &copy;
< &lt;
> &gt;
& &amp;
&nbsp;

Source: Basics of Web Design (HTML5 and CSS3)


The div element
30 <div>

 Purpose:
 Configure a specially formatted division or area of a
web page

 Block display with empty space above and below


the div

 Can contain other block display and inline display


elements
Source: Basics of Web Design (HTML5 and CSS3)
HTML5 Structural Elements
31
 Header Element
<header></header>
Contains the headings

 Nav Element main


<nav></nav>
Contains the main navigation

 Main Element
<main></main>
Contains the main content

 Footer Element
<footer></footer>
Contains the footer
Source: Basics of Web Design (HTML5 and CSS3)
32
The Anchor Element
<a>
 The anchor element
 Inline display element

Specifies a hyperlink reference (href) to a file


Text between the <a> and </a> is displayed on the web page.

<a href="contact.html">Contact Us</a>

 href Attribute
 Indicates the file name or URL
Web page document, photo, pdf, etc.

Source: Basics of Web Design (HTML5 and CSS3)


33
More on Hyperlinks
 Absolute link
 Link to other websites

<a href="http://yahoo.com">Yahoo</a>

 Relative link
 Link to pages on your own site
 Relative to the current page

<a href="index.html">Home</a>

Source: Basics of Web Design (HTML5 and CSS3)


34
Opening a Link
in a New Browser Window
 The target attribute on the anchor element opens a link in
a new browser window or new browser tab.
<a href="http://yahoo.com" target="_blank">Yahoo!</a>

Source: Basics of Web Design (HTML5 and CSS3)


Email Hyperlinks
35

 Automatically launch the default mail program configured for the browser
 If no browser default is configured,
a dialog box is displayed

<a href="mailto:[email protected]">[email protected]</a>

Source: Basics of Web Design (HTML5 and CSS3)


36 Writing Valid HTML
 Check your code for syntax errors

 Benefit:
 Valid code 
more consistent browser display

 W3C HTML Validation Tool


 http://validator.w3.org
 Additional HTML5 Validation Tool
 http://html5.validator.nu

Source: Basics of Web Design (HTML5 and CSS3)

You might also like