Powerpoint
advertisement
INTRO TO WEB
DEVELOPMENT
Overview
1. Structure of the Internet
2. Web site structure
3. Site planning
4. Web page editors
5. Intro to HTML
6. Intro to CSS
7. Publishing to your PSU web space
8. Further Resources
1. Structure of the Internet
The internet is a network of server computers and client
computers:
Servers:
Where web content is stored
Clients:
Regular computers
1. Structure of the Internet
The internet is a network of server computers and client
computers:
I need to look at
www.pdx.edu. Where
is its server?
Domain Name
Server
Client
(regular computer)
1. Structure of the Internet
The internet is a network of server computers and client
computers:
Over here.
Domain Name
Server
PSU Web Server
Client
(regular computer)
1. Structure of the Internet
The internet is a network of server computers and client
computers:
Give me www.pdx.edu
PSU Web Server
Client
(regular computer)
2. Web Site Structure
• Web page: a single document that contains text, images
and other media
• Web site: a collection of web pages linked together
• Web pages end in .html or .htm.
• Every web page has web address, or URL.
2. Web Site Structure
• Everything must be inside the root folder
• Give files and folders lowercase names using letters,
numbers and underscores only
2. Web Site Structure
Updating a page:
1. Make the edits to
the local files on
your computer
2. Upload the
edited files to the
server, where
they replace the
older remote
versions
2. Web Site Structure
Upload process for PSU servers:
FTP/Upload
index.html
index.html
page2.html
page2.html
odinID
/images
/images
public_html
website_name
/subfolder
/subfolder
3. Site Planning
Consider:
• Purpose
• Scope
• Audience
• Design
• Complexity
in advance!
4. Web Page Editors
5. Intro to HTML
Essential parts of a web page:
1. Doctype,
2. <html> tags
3. head section
4. body section
5. Intro to HTML
• HTML is a markup language, not a programming
language.
• Text consists of intermingled regular text and markup.
• HTML markup consists of tags:
<i>Italic sentence</i>
written in the HTML code shows up as
Italic sentence
in a browser. Individual tags are also called elements.
5. Intro to HTML
Two types of HTML tags:
Paired tags enclose other content:
<p>This is a paragraph. The browser will
display it as a block of text with a
little space above and below it, just
like a paragraph in Microsoft Word. </p>
Unpaired tags stand alone:
<br />inserts a forced line break
<img />
inserts an image
5. Intro to HTML
Two display options for HTML tags:
Block-level tags display as separate entities:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus <p>magna magna,</p>
sagittis non eleifend non,
elementum vitae nisi.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus
magna magna,
sagittis non eleifend non, elementum vitae
nisi.
Inline tags stay within their parent element:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus <em>magna magna,</em>
sagittis non eleifend non,
elementum vitae nisi.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus magna magna,
sagittis non eleifend non, elementum vitae
nisi.
5. Intro to HTML
You can use as many tags as you like, but make sure
to nest them properly:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus
<p><em><strong>magna magna,
</strong></em></p>
sagittis non eleifend non,
elementum vitae nisi.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus
magna magna,
sagittis non eleifend non, elementum vitae
nisi.
5. Intro to HTML
More than one space in the code is ignored:
Lorem ipsum dolor sit amet,
consectetur
adipiscing
elit.
Phasellus <em>
magna magna,</em> sagittis
non
eleifend non,
elementum vitae nisi.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus magna magna,
sagittis non eleifend non, elementum vitae
nisi.
5. Intro to HTML
Tags have attributes. Some are optional, some are
mandatory.
<p align=“right”> This text will be aligned
right instead of the default left. </p>
This text will be aligned right instead of the default left.
<img src=”images/garter_snake.jpg” />
5. Intro to HTML
Specifying Colors on the Web
There are only 147 named colors:
blue
linen
indianred
slategrey
???
???
5. Intro to HTML
Specifying Colors on the Web
There are only 147 named colors:
blue
linen
indianred
slategrey
???
???
For more options, use hex codes:
#0000FF
#FAF0E6
#CD5C5C
#708090
#5000000
#CC6633
5. Intro to HTML
Specifying Colors on the Web
Note: you may see hex codes with the pattern ‘aabbcc’
abbreviated with a hex triplet, like this:
Original:
#0000FF
#FAF0E6
#CD5C5C
#708090
#5000000
#CC6633
Abbreviated:
#00F
#FAF0E6
#CD5C5C
#708090
#500
#CC6633
5. Intro to HTML
Specifying Colors on the Web
Particularly in CSS, colors are often specified using RGB
values:
rgb(0,0,255)
rgb(250,240,230)
rgb(205,92,92)
rgb(112,128,144)
rgb(85,0,0)
rgb(80,40,20)
Use whichever color system works best for you.
5. Intro to HTML
Measurements on the Web
• Pixels
• Ems
• Percentages
5. Intro to HTML
Exercise: building a simple web page
6. Intro to CSS
• CSS = Cascading Stylesheet = a set of rules that
redefines how HTML tags display themselves by default.
In other words:
HTML tells what to display, CSS tells how to display it.
HTML defines structure, CSS defines style
• You can put the CSS rules in a few places:
• Within the HTML page’s head section
• As an external file that you link to in the head section
• As an inline style
6. Intro to CSS
• Including CSS in the head section of your HTML:
<head>
<title>Practice Page</title>
<style type="text/css">
(CSS rules go here)
</style>
</head>
Use this when you only need the styles for one page (example)
6. Intro to CSS
• Linking to a separate CSS file (an “external style sheet”):
<head>
<title>Practice Page</title>
<link rel=“stylesheet” type=“text/css”
href=“mystyles.css” />
</head>
This way, you can apply the same set of styles to many web
pages. (example)
6. Intro to CSS
• Anatomy of a CSS rule:
<head>
<title>Practice Page</title>
<style type="text/css">
body {
background-color: slategrey;
}
</style>
</head>
6. Intro to CSS
• Anatomy of a CSS rule:
<head>
The selector:
the name of the HTML tag this
rule will affect.
Here: everything on the page
unless otherwise specified.
<title>Practice Page</title>
<style type="text/css">
body {
background-color: slategrey;
}
</style>
</head>
6. Intro to CSS
• Anatomy of a CSS rule:
<head>
The selector:
the name of the HTML tag this
rule will affect.
Here: everything on the page
unless otherwise specified.
<title>Practice Page</title>
<style type="text/css">
body {
background-color: slategrey;
}
</style>
</head>
The property:
the characteristic of the HTML
tag you want to change
6. Intro to CSS
• Anatomy of a CSS rule:
<head>
The selector:
the name of the HTML tag this
rule will affect.
Here: everything on the page
unless otherwise specified.
<title>Practice Page</title>
<style type="text/css">
body {
background-color: slategrey;
}
The value:
the new value for the
property you chose
</style>
</head>
The property:
the characteristic of the HTML
tag you want to change
6. Intro to CSS
• Syntax is important!
<head>
<title>Practice Page</title>
<style type="text/css">
body {
background-color: slategrey;
}
</style>
</head>
6. Intro to CSS
• Syntax is important!
<head>
<title>Practice Page</title>
<style type="text/css">
body {
background-color: slategrey;
}
</style>
</head>
Enclose all the rules for
one tag with curly braces
6. Intro to CSS
• Syntax is important!
<head>
<title>Practice Page</title>
<style type="text/css">
Put a colon (:) after the
name of the property
you’re changing
body {
background-color: slategrey;
}
</style>
</head>
Enclose all the rules for
one tag with curly braces
6. Intro to CSS
• Syntax is important!
<head>
<title>Practice Page</title>
<style type="text/css">
Put a colon (:) after the
name of the property
you’re changing
body {
background-color: slategrey;
}
</style>
</head>
Enclose all the rules for
one tag with curly braces
Put a semicolon
(;)after each single
rule
6. Intro to CSS
• You can add as many rules as you want. Conventional
spacing of rules is like this:
body {
background-color: slategrey;
color: cornsilk;
font-size: 12px;
}
• But this is fine too – as long as your syntax is correct,
spacing doesn’t matter:
body { background-color: slategrey; color:
cornsilk; font-size: 12px; }
6. Intro to CSS
Exercise: adding CSS to a simple web page
Useful Links:
• http://www.w3schools.com (the web’s go-to HTML and
CSS reference, with tutorials and “try it yourself” features
too)
• http://web.pdx.edu/~willic/resources.html (my web page,
with a long list of free tutorials and references)
