Embed Size (px)
Citation preview
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
The internet is a network of server computers and client computers:
Clients: Regular computers
Servers:Where web content is stored
1. Structure of the Internet
Domain NameServer
I need to look at www.pdx.edu. Where
is its server?
Client (regular computer)
The internet is a network of server computers and client computers:
1. Structure of the Internet
PSU Web Server
Over here.
Client (regular computer)
Domain NameServer
The internet is a network of server computers and client computers:
1. Structure of the Internet
Client (regular computer)
Give me www.pdx.edu
PSU Web Server
The internet is a network of server computers and client computers:
1. Structure of the Internet
• 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
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
Upload process for PSU servers:
index.html
/images
page2.html
/subfolder
index.html
/images
page2.html
/subfolder
website_name
odinID
public_html
FTP/Upload
2. Web Site Structure
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:
Unpaired tags stand alone:
<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>
<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:
Inline tags stay within their parent element:
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.
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:
For more options, use hex codes:
blue linen
indianred slategrey
??? ???
#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:
Abbreviated:
#0000FF #FAF0E6
#CD5C5C #708090
#5000000 #CC6633
#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:
Use whichever color system works best for you.
rgb(0,0,255) rgb(250,240,230)
rgb(205,92,92) rgb(112,128,144)
rgb(85,0,0) rgb(80,40,20)
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)
<head>
<title>Practice Page</title>
<style type="text/css">
body { background-color: slategrey;}
</style>
</head>
• Anatomy of a CSS rule:
6. Intro to CSS
The selector:the name of the HTML tag this rule will affect. Here: everything on the page unless otherwise specified.
• 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>
<title>Practice Page</title>
<style type="text/css">
body { background-color: slategrey;}
</style>
</head>
6. Intro to CSSThe selector:the name of the HTML tag this rule will affect. Here: everything on the page unless otherwise specified.
The property:the characteristic of the HTMLtag you want to change
• Anatomy of a CSS rule:
<head>
<title>Practice Page</title>
<style type="text/css">
body { background-color: slategrey;}
</style>
</head>
6. Intro to CSSThe selector:the name of the HTML tag this rule will affect. Here: everything on the page unless otherwise specified.
The property:the characteristic of the HTML tag you want to change
The value:the new value for the property you chose
• 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>
6. Intro to CSS
Enclose all the rules for one tag with curly braces
• Syntax is important!
<head>
<title>Practice Page</title>
<style type="text/css">
body { background-color: slategrey;}
</style>
</head>
6. Intro to CSS
Enclose all the rules for one tag with curly braces
Put a colon (:) after the name of the property you’re changing
• Syntax is important!
<head>
<title>Practice Page</title>
<style type="text/css">
body { background-color: slategrey;}
</style>
</head>
6. Intro to CSS
Enclose all the rules for one tag with curly braces
Put a colon (:) after the name of the property you’re changing
Put a semicolon (;)after each single rule
• You can add as many rules as you want. Conventional spacing of rules is like this:
• 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
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)
