View
217
Download
1
Category
Preview:
Citation preview
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
Recommended