Modern development tools of dynamic content of the websites

Июль 23, 2022

Главная
Информатика
Modern development tools of dynamic content of the websites

Содержание

2. What is HTML? HTML Stands for Hypertext Markup Language Markup language means that a specific parts
3. How Does the WWW Work? HTML Documents (pages) stored on a server The page is requested
4. How Does the WWW Work? WWW Server HTML file Web Server WWW Client Request http://tundra.lternet.edu/hello.html
5. Standards For the WWW The World Wide Web Consortium (W3C http://www.w3c.org) is chief standards body for
6. Browsers Netscape and MSIE are the big two. They contributed to browser wars, non standard html
7. What is HTML? Important to remember HTML tags were originally designed to define the content of
8. Example HTML Document Hello Hello World!! this is a simple HTML document Column 1 Column 1
9. Example HTML Document
10. Adding Style to our pages Cascading Style Sheets (CSS) is a W3C Recommendation Styles define how
11. HTML with styles embedded Untitled Document h1 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px;
12. Web Forms Forms are used to collect input from the client. A form is an area
13. Example Form First Name Last Name Favorite Chile: Red Green
14. Example Form
15. Webpage Layout and Website Design Technical definitions: A webpage is a single HTML document A website
16. Web Page Layout Layout of web pages is very important Poor layout makes for - Difficult
17. A 2 x 2 Layout
18. Table within a table
19. The outer table
20. The inner table
21. The inner table
22. Centered with three columns
23. Really complicated design!
24. Site Map A site map is designed to show the connections between pages A graphical site
25. Site Map Interior or Internal Pages
26. Get vs Post With the Get method, the browser appends the data onto the URL With
27. Get vs Post Get example Post Example
28. CSS Document h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; color: #FFFFFF; background-color:
29. HTML With CSS attached "http://www.w3.org/TR/html4/loose.dtd"> Untitled Document Simple CSS Example heading 2 heading 3    
30. HTML with CSS attached
31. Advantages of stylesheets Stylesheets separate content from presentation Greatly decrease the amount work required when changing
32. Conclusion Web pages are served to clients by web servers when a client requests a URL
33. WEBSITE DESIGN Information Arcitecture
34. What is a website A site (location) on the World Wide Web. Each Web site contains
35. Web site development essentials Web site development is is a mix of various disciplines. Well designed
36. What is Information Architecture? “Information architecture is the science of figuring out what you want your
37. IA – Site Structure Develop a site structure listing Section 1 Section 1.1 Section 1.2 Section
38. IA – Site Structure Develop Architectural Blueprint
39. IA tutorial: http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial1.html
40. Example Template
41. Essential Web Site Components Domain Name Create an identity Search Feature Find content. Timely Content Content
42. Web Page Optimization Limit the number of multimedia applications Javascript, java applets, flash, shockwave Use consistent
43. Web Technologies Basic Requirements Web server, server side technology, database server Programming Languages CGI, Embedded Languages
44. LAMP LAMP is Open Source – Free There's an extensive support network for all LAMP components.
46. Скачать презентацию

Слайд 2

What is HTML?
HTML Stands for Hypertext Markup Language
Markup language means that

a specific parts of a document have marks around them, giving them special meaning
An HTML Document is a text document that uses tags for markup.
Tags fall between angel brackets and have an open tag and a close tag

this is paragrapgh text

Слайд 3

How Does the WWW Work?
HTML Documents (pages) stored on a server
The

page is requested by browser from a client using a browser
The page is fetched and returned to the client by the web server using the Hypertext Transfer Protocol (http)
Note that a page is identified by a Uniform Resource Locator (URL)

Слайд 4

How Does the WWW Work?

WWW Server
HTML file
Web Server
WWW Client
Request
http://tundra.lternet.edu/hello.html

Слайд 5

Standards For the WWW
The World Wide Web Consortium (W3C http://www.w3c.org) is

chief standards body for HTTP and HTML
An international consortium of companies involved with the Internet and the Web.
W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide Web
Develop open standards so that the Web evolves in a single direction rather than being splintered among competing factions

Слайд 6

Browsers
Netscape and MSIE are the big two.
They contributed to browser

wars, non standard html tags (), substandard browsers (Netscape 4)
Browser Alternatives
Mozilla Fire Fox – Open Source, Standards Based
Opera - Standards Based, lots of features
Alternatives are better browsers, fast, and they Kick butt!

Слайд 7

What is HTML?
Important to remember HTML tags were originally designed to

define the content of a document

means this is a paragraph

Examples of tags
Defines an HTML document
Defines the document's body

to

Defines header 1 to header 6
Defines a paragraph
Inserts a single line break
Defines a horizontal rule
Defines a comment

Слайд 8

Example HTML Document

Hello

Hello World!!

this is a simple HTML document

cellspacing="1" cellpadding="1">

Column 1 Column 1

data 1 data 1

Column 1	Column 1
data 1	data 1

Слайд 9

Example HTML Document

Слайд 10

Adding Style to our pages
Cascading Style Sheets (CSS) is a W3C

Recommendation
Styles define how to display html
Styles can be attached to or imbedded within HTML documents
A single HTML document may use one or more stylesheets that are then applied according to specified priorities

Слайд 11

HTML with styles embedded

Untitled Document

Simple CSS Example

heading 2

heading 3

Слайд 12

Web Forms
Forms are used to collect input from the client.
A form

is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the

Слайд 13

Example Form

First

Name

Last Name

Favorite Chile:

Red

Green

Слайд 14

Example Form

Слайд 15

Webpage Layout and Website Design
Technical definitions:
A webpage is a single

HTML document
A website is a collection of related webpages
Designing a good website requires more than just putting together a few pages

Слайд 16

Web Page Layout
Layout of web pages is very important
Poor layout makes

for -
Difficult navigation
Hard to locate information on page
Visually unappealing

Слайд 17

A 2 x 2 Layout

Слайд 18

Table within a table

Слайд 19

The outer table

Слайд 20

The inner table

Слайд 21

The inner table

Слайд 22

Centered with three columns

Слайд 23

Really complicated design!

Слайд 24

Site Map
A site map is designed to show the connections between

pages
A graphical site map uses lines to connect linked pages

Слайд 25

Site Map
Interior or
Internal
Pages

Слайд 26

Get vs Post
With the Get method, the browser appends the data

onto the URL
With the Post method, the data is sent as "standard input.” (as part of the header in the request)

Слайд 27

Get vs Post
Get example

id="example">
Post Example

Слайд 28

CSS Document
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #FFFFFF;
background-color:

#0000FF;
padding: 10px;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #FFFFFF;
background-color: #990033;
text-align: right;
border: thin dashed #FFFF00;
}
h3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 36px;
background-color: #999999;
text-align: center;
width: 300px;
border: dashed #0033FF;
}

Слайд 29

HTML With CSS attached
"http://www.w3.org/TR/html4/loose.dtd">

content="text/html; charset=iso-8859-1">
Untitled Document

Simple CSS Example

heading 2

heading 3

Слайд 30

HTML with CSS attached

Слайд 31

Advantages of stylesheets
Stylesheets separate content from presentation
Greatly decrease the amount work

required when changing the look of a website.

Слайд 32

Conclusion
Web pages are served to clients by web servers when a

client requests a URL
Requests are handled using HTTP
HTML provides structure to web pages through the use of tags.
CSS provides style to web pages. Style can be attached in seprated documents or can be imbedded into an html document

Слайд 33

WEBSITE DESIGN
Information Arcitecture

Слайд 34

What is a website
A site (location) on the World Wide Web.

Each Web site contains a home page, which is the first document users see when they enter the site. The site might also contain additional documents and files. Each site is owned and managed by an individual, company or organization.
webopedia.com

Слайд 35

Web site development essentials
Web site development is is a mix of

various disciplines.
Well designed websites are a combination art, science, and practicality

Слайд 36

What is Information Architecture?
“Information architecture is the science of figuring out

what you want your site to do and then constructing a blueprint before you dive in and put the thing together.”
webmonkey.com

Слайд 37

IA – Site Structure
Develop a site structure listing
Section 1
Section 1.1
Section 1.2
Section

2
Section 2.1
Section 2.2
Section 2.2.1
Section 2.2.2
Section 2.2.3
Section 2.3
Section 2.4
Section 3

Слайд 38

IA – Site Structure
Develop Architectural Blueprint

Слайд 39

IA tutorial:
http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial1.html

Слайд 40

Example Template

Слайд 41

Essential Web Site Components
Domain Name
Create an identity
Search Feature
Find content.
Timely Content
Content is

updated regularly.
Topic Based-Content
News, employment, a particular research project
Professional Logo
Guiding principles

Слайд 42

Web Page Optimization
Limit the number of multimedia applications
Javascript, java applets, flash,

shockwave
Use consistent images and style sheets
Use consistent navigation (text readers)

Слайд 43

Web Technologies
Basic Requirements
Web server, server side technology, database server
Programming Languages
CGI,

Embedded Languages
Architectures
LAMP
Third Party Solutions
Stand alone applications, Portals, Content Management Systems

Слайд 44

LAMP
LAMP is Open Source – Free
There's an extensive support network for

all LAMP components.
http://www.onlamp.com
LAMP works well and is secure
Its component technologies offer tremendous flexibility, rapid development, high performance, and fewer security and stability problems than many far-costlier proprietary solutions.

Modern development tools of dynamic content of the websites

Содержание

What is HTML?HTML Stands for Hypertext Markup LanguageMarkup language means that

How Does the WWW Work?HTML Documents (pages) stored on a serverThe

How Does the WWW Work? WWW ServerHTML fileWeb Server WWW ClientRequesthttp://tundra.lternet.edu/hello.html

Standards For the WWWThe World Wide Web Consortium (W3C http://www.w3c.org) is

BrowsersNetscape and MSIE are the big two. They contributed to browser

What is HTML?Important to remember HTML tags were originally designed to

to

Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

Example HTML DocumentHelloHello World!!this is a simple HTML documentcellspacing="1" cellpadding="1"> Column 1 Column 1 data 1 data 1

Hello World!!

Example HTML Document

Adding Style to our pagesCascading Style Sheets (CSS) is a W3C

Simple CSS Example

heading 2

heading 3

Web FormsForms are used to collect input from the client.A form

Example Form First

Example Form

Webpage Layout and Website DesignTechnical definitions: A webpage is a single

Web Page LayoutLayout of web pages is very importantPoor layout makes

A 2 x 2 Layout

Table within a table

The outer table

The inner table

The inner table

Centered with three columns

Really complicated design!

Site MapA site map is designed to show the connections between

Site MapInterior orInternalPages

Get vs PostWith the Get method, the browser appends the data

Get vs PostGet example

CSS Documenth1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; color: #FFFFFF; background-color:

HTML With CSS attached"http://www.w3.org/TR/html4/loose.dtd">

Simple CSS Example

heading 2

heading 3

HTML with CSS attached

Advantages of stylesheetsStylesheets separate content from presentationGreatly decrease the amount work

ConclusionWeb pages are served to clients by web servers when a

WEBSITE DESIGNInformation Arcitecture

What is a websiteA site (location) on the World Wide Web.

Web site development essentialsWeb site development is is a mix of

What is Information Architecture?“Information architecture is the science of figuring out

IA – Site StructureDevelop a site structure listingSection 1 Section 1.1 Section 1.2Section

IA – Site StructureDevelop Architectural Blueprint

IA tutorial:http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial1.html

Example Template

Essential Web Site ComponentsDomain NameCreate an identitySearch FeatureFind content.Timely ContentContent is

Web Page OptimizationLimit the number of multimedia applicationsJavascript, java applets, flash,

Web TechnologiesBasic RequirementsWeb server, server side technology, database server Programming LanguagesCGI,

LAMPLAMP is Open Source – FreeThere's an extensive support network for

Похожие презентации

What is HTML?
HTML Stands for Hypertext Markup Language
Markup language means that

How Does the WWW Work?
HTML Documents (pages) stored on a server
The

How Does the WWW Work?

WWW Server
HTML file
Web Server
WWW Client
Request
http://tundra.lternet.edu/hello.html

Standards For the WWW
The World Wide Web Consortium (W3C http://www.w3c.org) is

Browsers
Netscape and MSIE are the big two.
They contributed to browser

What is HTML?
Important to remember HTML tags were originally designed to

Defines header 1 to header 6
Defines a paragraph
Inserts a single line break
Defines a horizontal rule
Defines a comment

Example HTML Document

Hello

Hello World!!

this is a simple HTML document

cellspacing="1" cellpadding="1">

Column 1 Column 1

data 1 data 1

Adding Style to our pages
Cascading Style Sheets (CSS) is a W3C

Web Forms
Forms are used to collect input from the client.
A form

Example Form

First

Webpage Layout and Website Design
Technical definitions:
A webpage is a single

Web Page Layout
Layout of web pages is very important
Poor layout makes

Site Map
A site map is designed to show the connections between

Site Map
Interior or
Internal
Pages

Get vs Post
With the Get method, the browser appends the data

Get vs Post
Get example

CSS Document
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #FFFFFF;
background-color:

HTML With CSS attached
"http://www.w3.org/TR/html4/loose.dtd">

Advantages of stylesheets
Stylesheets separate content from presentation
Greatly decrease the amount work

Conclusion
Web pages are served to clients by web servers when a

WEBSITE DESIGN
Information Arcitecture

What is a website
A site (location) on the World Wide Web.

Web site development essentials
Web site development is is a mix of

What is Information Architecture?
“Information architecture is the science of figuring out

IA – Site Structure
Develop a site structure listing
Section 1
Section 1.1
Section 1.2
Section

IA – Site Structure
Develop Architectural Blueprint

IA tutorial:
http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial1.html

Essential Web Site Components
Domain Name
Create an identity
Search Feature
Find content.
Timely Content
Content is

Web Page Optimization
Limit the number of multimedia applications
Javascript, java applets, flash,

Web Technologies
Basic Requirements
Web server, server side technology, database server
Programming Languages
CGI,

LAMP
LAMP is Open Source – Free
There's an extensive support network for