NextStep Tech - Intro - 01 Lecture

Views:
 
Category: Entertainment
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

Slide 1: 

Introductory Course Class 01

Today’s Agenda : 

Today’s Agenda Introductions & Housekeeping Brainstorming & Discussion Install software / set up accounts HTML CSS Lab Assignments Discussion

Today’s Agenda : 

Today’s Agenda Introductions & Housekeeping Brainstorming & Discussion Install software / set up accounts HTML CSS Lab Assignments Discussion

Today’s Agenda : 

Today’s Agenda Introductions & Housekeeping Brainstorming & Discussion Install software / set up accounts HTML CSS Lab Assignments Discussion

Applications for Module 1 : 

Applications for Module 1 File Storage - Dropbox Text Editor - Notepad++ (PC) or Smultron (Mac) Web Browser - Firefox Miscellaneous - Firebug (Firefox Add-on)

Email Accounts : 

Email Accounts firstname.lastname@nextsteptech.org password: [lastname] - but you will change Your username will be used to access NextStep Tech website & your Dropbox

Today’s Agenda : 

Today’s Agenda Introductions & Housekeeping Brainstorming & Discussion Install software / set up accounts HTML CSS Lab Assignments Discussion

HTML (structure) : 

HTML (structure) HyperText Markup Language Defines the structure of a webpage Similar to an outline

HTML vs. XHTML : 

HTML vs. XHTML XHTML is the newer standard For our purposes - they are the same thing We will technically be writing XHTML

DOCTYPE : 

DOCTYPE first line of any XHTML Tells the web browser which language you are using Always include this line, although usually the file will render anyway <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Elements & Tags : 

Elements & Tags XHTML is made of elements such as body, paragraphs, headings Elements are surrounded by tags example: <html> or <body> or <img>

XHTML Tags : 

XHTML Tags Every element must have an opening tag and a closing tag 2 ways of doing this: <h2>A Heading goes here</h2> Forward slash: <br />, <hr />

Attributes : 

Attributes Elements can take specific attributes (properties) The format: <tag attribute=”something”>blah</tag>

XHTML File Structure : 

XHTML File Structure <html> <head> [info like website title goes here] </head> <body> </body> </html> [everything in the webpage body goes here]

Element: <title> : 

Element: <title> <title> defines what the text will be at the top of the browser window Goes within the <head> tags Example: <head> ... <title>My Website Title!</title> ... </head>

Element: <h1> : 

Element: <h1> There are six Heading Levels: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Use these to outline the structure of your page Example: <h1>The Most Important Heading</h1> <h2>A sub-heading</h2>

Element: <p> : 

Element: <p> <p> is to define paragraphs Example: <p>A paragraph with a lot of words and a lot of text yada yada lots of words that span a few lines as an example of a paragraph in HTML.</p>

Element: <a> : 

Element: <a> <a> defines a hyperlink Attributes href (url location) target (name of window to fetch url in) “_blank” launches new window <a href=”http://www.google.com” target=”_blank”> Visible Link Text</a>

Element: <img> : 

Element: <img> <img> defines an image on the page Attributes alt (alternate text in case the image cannot be viewed) src (location of image file) <img src=”imageFile.jpg” alt=”An Image File” />

Element: <ul>, <li> : 

Element: <ul>, <li> creates an unordered list <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li></ul> looks like a bulleted list by default

Element: <ol>, <li> : 

Element: <ol>, <li> creates an ordered list <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li></ol> looks like a numbered list by default

Element: <video> : 

Element: <video> <img> defines an image on the page Attributes autoplay, controls, loop, preload src (location of image file) <video src="movie.avi" controls="controls" autoplay=”autoplay” loop=”loop” preload=”preload”> </video>

Element: <div> : 

Element: <div> <div> defines a space in the website Very important with CSS <div> <p>the first paragraph text</p> </div> <p>the second paragraph text</p> <p>the third paragraph text</p>

Misc. Elements : 

Misc. Elements <!-- comments --> browsers will ignore text within comments <br /> - add line break <hr /> - add horizontal line <hr /> <!-- Here is a hidden comment. --> <br />

Misc. Elements : 

Misc. Elements Marquee - scrolls text horizontally <marquee>text</marquee> Blink <blink>text</blink> These tags are old-fashioned and not typically used anymore

Balanced Nesting : 

Balanced Nesting Elements’ end tags must be balanced within their actual places in the hierarchy. Correct Example: <p>This is a paragraph with a cool <a href=”link.html”>link.</a></p> Incorrect Example: <p>This is a paragraph with a cool <a href=”link.html”>link.</p></a>

XHTML Lab : 

XHTML Lab Create your first webpage now!

Today’s Agenda : 

Today’s Agenda Introductions & Housekeeping Brainstorming & Discussion Install software / set up accounts HTML CSS Lab Assignments Discussion

CSS (style) : 

CSS (style) Cascading Style Sheets An HTML file imports CSS CSS describes everything else: fonts, colors, graphics, columns positioning, animation, fades

HTML only (again) : 

HTML only (again) Example: CSSZenGarden.com

Now add CSS styling : 

Now add CSS styling

Same HTML, different CSS : 

Same HTML, different CSS

Same HTML, different CSS : 

Same HTML, different CSS

Same HTML, different CSS : 

Same HTML, different CSS

CSS : 

CSS body { background-color: blue; } selector { property: value; } defines style by a set of rules with format: the complete set of rules is called a stylesheet

CSS : 

CSS font { font-weight: bold; font-family: Arial; font-size: 18pt; } selector { property: value; } multiple rules for one selector

CSS Comments : 

CSS Comments Comments are created by: /* ... *//* This is a CSS comment. */ Note the difference from HTML<!-- This is an HTML comment -->

3 ways to add CSS : 

3 ways to add CSS Within HTML tags with style attribute<p style=”text-align: center;”>some text</p> Creating CSS rules in a separate file, then importing into the HTML file<head> ... <link rel=”stylesheet” href=”style.css” /> ...</head>

3 ways to add CSS : 

3 ways to add CSS Within the <head> using <style>...</style> tags<head> <style type=”text/css”> font { color:green;} p { text-align: center margin-left: 20px; } </style></head>

Best Way: Link to External File. : 

Best Way: Link to External File. We will primarily use and encourage the use of a separate file for stylesheets (method #2)<head> ... <link rel=”stylesheet” href=”style.css” /> ...</head>

CSS: Fonts : 

CSS: Fonts selector: font{ } Properties available font-family: [name of font(s)] font-size: [in px, em] font-style: [normal, italic] font-variant [normal, small-caps] font-weight: [bold]

CSS: font-size property : 

CSS: font-size property Using font-size: can take px (pixels) or em’s. What’s the difference? px are exact sizes but they don’t resize in MS Internet Explorer (IE) em is a ratio that IE will resize default browser font = 16px to convert 24px font to em 24px / 16px = 1.5 em

CSS Text : 

CSS Text selector: any text selector (p, h2, a, etc) Properties available color: [simple name or hexadecimal] text-align: [left, right, center, justify] direction: [ltr, rtl]

CSS Color : 

CSS Color Ways to express a color: general word (for simple colors) color: blue; Hexadecimal (don’t panic!) color: #FFFFFF /* white */ RGB values (don’t panic!) color: rgb(255,255,255) /* white */

CSS Color : 

CSS Color Colors are created by mixing Red, Green, and Blue Values range from 0 to 255 So in the rgb() format: rgb(255,0,0) = red rgb(0,255,0) = green rgb(0,0,255) = blue over 16 Million colors are available with this code (255^3)

CSS Color : 

CSS Color A more common way is using Hexadecimal notation color: #DDDDDD Each place has 16 values: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F #FF0000 = red, #000000 = black But just use a web color chart! red green blue

CSS: Links : 

CSS: Links selector: a{ } You can control the states of links like so:a:link { color: blue; }a:visited { color: black; }a:active { color: red; } a:hover { color: purple; font-size: 1.1em;}

CSS: Lists : 

CSS: Lists

CSS: id : 

CSS: id What if you only want to a particular style to one specific link, or paragraph, or image, etc? Use the id attribute in html <p id=”myParagraph”>blah blah</p> Then in CSS create rules for #myParagraph #myParagraph { text-alignment: center;}

CSS: class : 

CSS: class

CSS: Inheritance : 

CSS: Inheritance

BreakFirebug demoCSS Lab : 

BreakFirebug demoCSS Lab

CSS: Box Model : 

CSS: Box Model

CSS: div : 

CSS: div

CSS: float : 

CSS: float

CSS: columns with floats : 

CSS: columns with floats

CSS Reference : 

CSS Reference http://www.w3schools.com is a great resource for reviewing properties available to each selector

Today’s Agenda : 

Today’s Agenda Introductions & Housekeeping Brainstorming & Discussion Install software / set up accounts HTML CSS Lab Assignments Discussion

Today’s Agenda : 

Today’s Agenda Introductions & Housekeeping Brainstorming & Discussion Install software / set up accounts HTML CSS Lab Assignments Discussion

authorStream Live Help