1. Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN 6710 - Section A – TR 9:30-10:45 CRN 10570 – Section B – TR 5:30-6:45

2. Intro Mr. Justin “JET” Turner UNG IT department Software Development Manager Office: Hansford Hall 118 Doors are all behind access control Office hours available by appointment only Email: Justin.Turner@ung.edu We will be using D2L extensively for turning in assignments, as well as posting lecture materials

3. Intro There 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 name I will provide instructions for doing this through GoDaddy, but you can use any hosting provider you wish Examples in class will be done using GoDaddy You will be responsible for learning the interface in whatever solution you chose I will attempt to help outside of class as much as possible

4. Intro I will be using Dreamweaver in class for the first several weeks You 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

5. Intro We will be covering a new topic almost every week You can expect a small lab to be assigned for almost every topic There will be two larger projects where you need to put multiple concepts together There 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

6. Intro There 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

7. Intro I understand many of you will ask each other questions about assignments, but I expect everyone to turn in only their own work Asking about what HTML/CSS produces a given look is ok, but don’t copy someone else’s code

8. Topics HTML CSS JavaScript/JQuery Responsive Design PHP MySQL Model, View, Controller CodeIgniter AJAX C#.NET MSSQL Web API’s Google Facebook Twitter Server Configuration Web Security E-Commerce

9. Intro I 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

10. Experience Raise 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

11. Hosting Instructions

12. Opportunities for Experience Student Developer Programming Team I 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++

13. Questions Any questions before we get started with HTML/CSS?

14. HyperText Markup Language Cascading Style Sheet

15. HTML HTML stands for HyperText Markup Language Browsers 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 Paragraph //line break Some tags are self closing, like the break tag, while others require an open and closing tag, such as the paragraph tag

16. HTML Versions Like most languages, they are continuously updated over time into new versions The 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

17. HTML Versions If 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

18. Common HTML Tags I 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 http://www.w3schools.com/ HTML Tags: http://www.w3schools.com/tags/default.asp http://www.w3schools.com/tags/default.asp

19. Common HTML Tags Lets 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

20. Common HTML Tags /

21. Common HTML Tags -

22. HTML Tag Attributes HTML 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 tag to adjust how our table renders If you are ever curious about attribute options for a tag, just check out W3Schools

23. HTML Tags Again, there are several tags that I skipped Some 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

24. Questions? Any questions about HTML before we get into CSS?

25. CSS CSS stands for Cascading Style Sheet This 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 places On the element you want to style [inline] Within tags on the page (usually in the section) [internal] In a separate file, with a call to use the file in the section [external]

26. CSS Our preference is going to be to always use the separate file This allows us to use the same style sheet on multiple pages to produce a consistent look and feel more easily

27. Inline CSS To apply styles on the element, we use a common attribute:,, etc Then we can put our styling properties inside the quotes Again, there is a very large number of styling properties available, and we will only scratch the surface Reference: http://www.w3schools.com/cssref/http://www.w3schools.com/cssref/

28. Internal CSS To add styles on an individual page, we wrap the style section in tags, usually in the section Because the styles aren’t on an individual tag, we need a way to specify what tag the style applies to tag name.class #id There are also some advanced CSS selectors we will talk about next time

29. Basic CSS Selectors Tag Name div{} Affects all 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

30. External CSS Finally, we can put the CSS into a separate file and include it into our page using tags in the section 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

31. Next Time On 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 27 th Some of the CSS you will need for Lab 1 will be discussed next time

32. Lab 1 For your first lab, you need to get your web space/domain name purchased/set up Create 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