Web ProgrammingMr. Justin “JET” TurnerCSCI 3000 – Fall 2015

CRN 6710 - Section A – TR 9:30-10:45CRN 10570 – Section B – TR 5:30-6:45

IntroMr. Justin “JET” TurnerUNG IT department Software Development

ManagerOffice: Hansford Hall 118

Doors are all behind access controlOffice hours available by appointment only

Email: Justin.Turner@ung.eduWe will be using D2L extensively for turning

in assignments, as well as posting lecture materials

IntroThere will be no textbook for this course

I will be referencing several different web resources throughout the semester

You will need to purchase web space/domain nameI will provide instructions for doing this

through GoDaddy, but you can use any hosting provider you wish

Examples in class will be done using GoDaddyYou will be responsible for learning the

interface in whatever solution you chose I will attempt to help outside of class as much as

possible

IntroI will be using Dreamweaver in class for the

first several weeksYou are welcome to select any web editor tool

you wish, but you are responsible for learning how to use whatever you select

I am more than willing to attempt to assist you outside of class as needed

IntroWe will be covering a new topic almost every

weekYou can expect a small lab to be assigned for

almost every topicThere will be two larger projects where you

need to put multiple concepts togetherThere will be no final, instead, a term project

will be due the week of finals that puts together a large portion of what we learn over the course of the semester

IntroThere is currently a midterm on the tentative

schedule, but this might be replaced with another project

As you can see, this course is extremely hands on, and will require a good bit of time outside of class to complete the various labs/projects

IntroI understand many of you will ask each other

questions about assignments, but I expect everyone to turn in only their own workAsking about what HTML/CSS produces a

given look is ok, but don’t copy someone else’s code

TopicsHTMLCSSJavaScript/JQueryResponsive DesignPHPMySQLModel, View,

ControllerCodeIgniterAJAX

C#.NETMSSQLWeb API’s

GoogleFacebookTwitter

Server Configuration

Web SecurityE-Commerce

IntroI know we probably have students who have

never done anything on the web before, to those that have already touched on every topic we will cover this semester

I’d like to do a quick exercise to see what kind of experience everyone has

ExperienceRaise your hand if you have ever created any kind

of web content (posted on a forum, youtube video, created a web page, set up a blog, etc)

Raise your hand if you have written HTML/CSS before

Raise your hand if you have written JavaScript before

Raise your hand if you have written server side code before (PHP, C#.NET, VB.NET, etc)

Raise your hand if you have database experience (MySQL, MSSQL, Oracle, Access)

You can put your hands down

Hosting Instructions

Opportunities for ExperienceStudent Developer Programming TeamI am looking to fill a

single student developer position in the university Software Development group

The position does not require previous web programming experience

The job is posted on the career services job board

The UNG Computer Science department has a programming team that competes in three competitions every year

The team meets on Wed @ 5:30-7 in one of the CS labs (TBD)

Primarily coding in Java or C++

QuestionsAny questions before we get started with

HTML/CSS?

HTML/CSSHyperText Markup LanguageCascading Style Sheet

HTMLHTML stands for HyperText Markup

LanguageBrowsers are configured to read standard

HTML and render them into what you see as a web page

HTML is a series of tags wrapped in angle brackets<p>Paragraph</p><br /> //line break

Some tags are self closing, like the break tag, while others require an open and closing tag, such as the paragraph tag

HTML VersionsLike most languages, they are continuously

updated over time into new versionsThe majority of the internet still uses HTML

4, but as browsers are being updated, better support is being seen for the new HTML 5 standard

HTML 5 introduces new tag options, as well as modifications to older tags, and in some cases, recommends no longer using certain older tags

We will focus on using HTML 5 in the way that Chrome/Firefox currently support it

HTML VersionsIf you were doing web development for a

company, you would need to determine what browsers they expect the site to work in, and use code that is compatible with those browsers

Internet Explorer is often the limiting factor in what portion of HTML 5 can be used

For this course, we will assume we are building for an internal audience, where we can better control the versions of browsers being used, so we can leverage the full power of the newer HTML 5 tags

Common HTML TagsI will go over some of the primary HTML tags

you are going to want to use, but we will only be able to barely scratch the surface of what tags are available in HTML

So, you will want to become familiar with http://www.w3schools.com/ which has probably the best set of examples of HTML/CSS/JavaScript and more

HTML Tags: http://www.w3schools.com/tags/default.asp

Common HTML TagsLets go ahead and take a look at what a basic

HTML page looks like and add a few common tags to see how they display

Later on, we will look into styling these tags, but for the time being we will focus on what they render as by default

Common HTML Tags<!doctype><html><head><title><body><div><span><p><br />

<table><thead><tbody><tfoot><tr><th><td>

<ul> / <ol><li>

Common HTML Tags<fieldset>

<legend><a><img><code><h1> - <h6><hr>

<form><input>

<label><select>

<option><textarea>

HTML Tag AttributesHTML tags can also have attributes applied

to them within the angular brackets to further define how they should be rendered by the browser

Each tag has it’s own unique list of possible attributes

There are some attributes that are shared across all tags, and we will look at those later

Let’s look at some simple options on the <table> tag to adjust how our table renders

If you are ever curious about attribute options for a tag, just check out W3Schools

HTML TagsAgain, there are several tags that I skippedSome of these tags we will look at as we get

into various sections throughout the course, others you may want to look into on your own

If you ever have an idea of what you want to accomplish, but aren’t sure what tags might be able to do it, just let me know and I’ll try to help point you in the right direction

Questions?Any questions about HTML before we get

into CSS?

CSSCSS stands for Cascading Style SheetThis is where we can define how we want a

given element to act differently than a browser would normally render it

Styles can be applied in three different placesOn the element you want to style [inline]Within <style> tags on the page (usually in the

<head> section) [internal]In a separate file, with a call to use the file in

the <head> section [external]

CSSOur preference is going to be to always use

the separate fileThis allows us to use the same style sheet on

multiple pages to produce a consistent look and feel more easily

Inline CSSTo apply styles on the element, we use a

common attribute:<div style=“”>, <span style=“”>, etc

Then we can put our styling properties inside the quotes<div style=“background-color:blue”>

Again, there is a very large number of styling properties available, and we will only scratch the surface

Reference: http://www.w3schools.com/cssref/

Internal CSSTo add styles on an individual page, we wrap

the style section in <style> tags, usually in the <head> section

Because the styles aren’t on an individual tag, we need a way to specify what tag the style applies totag name.class#id

There are also some advanced CSS selectors we will talk about next time

Basic CSS SelectorsTag Name

div{} Affects all <div> tags on the page

Class.myClass

Affects all tags on the page with class=“myClass” attribute

ID#unique

Affects the single tag on the page with the id=“unique” attribute

External CSSFinally, we can put the CSS into a separate

file and include it into our page using <link> tags in the <head> section<link rel=“stylesheet” href=“styles.css” />

Inside the styles.css file, we don’t need any html tags, we can just go straight to using our CSS selectors to specify how to style elements on the page

Next TimeOn Thursday we will dig much deeper into

CSS selectors and some common CSS properties

I am going to go ahead and assign Lab 1, but it will not be due until Thu 27th

Some of the CSS you will need for Lab 1 will be discussed next time

Lab 1For your first lab, you need to get your web

space/domain name purchased/set upCreate a single page that contains the

following:HTML: div, table(full structure), h# (use a

few), p, br, img, a, list(ul or ol)CSS: text color, background color, text

alignment, float (don’t forget to use clear after float), margin, padding, height, width, use all 3 basic css selectors, use at least 1 advanced css selector

Submit a link to the page on D2L