INTRO TO WEB DEVELOPMENT
Overview Structure of the Internet Web site structure Site planning Web page editors Intro to HTML Intro to CSS Publishing to your PSU web space 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 Client (regular computer) PSU Web Server
1. Structure of the Internet The internet is a network of server computers and client computers: Give me www.pdx.edu Client (regular computer) PSU Web Server
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: Make the edits to the local files on your computer Upload the edited files to the server, where they replace the older remote versions
Upload process for PSU servers: 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: in advance! Purpose Scope Audience Design Complexity in advance!
4. Web Page Editors
5. Intro to HTML Essential parts of a web page: Doctype, <html> tags head section body section
<i>Italic sentence</i> 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. magna magna,
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 Original: Abbreviated: 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
Exercise: building a simple web page 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: <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: 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: 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> The property: the characteristic of the HTML tag you want to change
6. Intro to CSS Anatomy of a CSS rule: 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> The value: the new value for the property you chose 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"> body { background-color: slategrey; } </style> </head> Put a colon (:) after the name of the property you’re changing 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"> body { background-color: slategrey; } </style> </head> Put a colon (:) after the name of the property you’re changing Put a semicolon (;)after each single rule Enclose all the rules for one tag with curly braces
6. Intro to CSS 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; } body { background-color: slategrey; color: cornsilk; font-size: 12px; }
Exercise: adding CSS to a simple web page 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)