What's covered in this module
|Assigned Reading:||Chapter 14 of Web Development and Design Foundations (Last Chapter)|
|Lab:||Make a Video Game|
In this Module
HTML: We use HTML for the web page structure and for the content
CSS: We use CSS to style the website.
There is some overlap among the three languages. You can make text bold with the HTML <strong> tags, even though that is a style. You can make simple interactive animations with CSS. We are likely to see the languages evolve to have more separation of content, style, and interactivity. For example, the <center> tags were removed from HTML5.
Other Languages for Web
- PHP and MySQL/LAMP Stack (Server Side – Offered in the Fall at Saint Paul College)
- C# (.NET)
- Ruby on Rails
- MEAN Stack
An HTML element includes the opening and closing tag, and everything in between. For example:
<p>This is a paragraph</p>
HTML Attributes define additional characteristics or properties of the HTML element. You already know several attributes:
In the above code:
- onclick is the HTML attribute.
- The document is the entire web page
- The property is innerHTML. innerHTML is the content between the two tags in the element, eg. <h1>This is the innerHTML</h1>
Putting it all together into a button:
onclick Example in JSFiddle
Let’s look at some onclick examples in JSFiddle. The JSFiddle below is embedded in an iframe, like we learned about last week. You can toggle between the HTML and the Result.
Click on the result button, and click the first “Click Me” button. Now click on HTML and look at the code. In the first example, when the user clicks the Click Me button, the text of the innerHTML changes. The innerHTML is the text between the tags.
Now click on the second Click Me button. In the second example, the clicking the button changes the CSS.
Go to the “Result” and click the “Try It” button. Follow the prompts.
- Try leaving the name blank to see what happens
- Try putting in your name to see what happens.
In this example, the Try It button onclick calls a function named “myFunction()”. You can see myFunction() in the <script> tags below the HTML. First there is a prompt to ask for a name, and then based on what is in the name there is a different result, a conditional or if/else. If you don’t provide a name, it prints, “Why don’t you tell me your name?”. If you do provide your name, your name is inserted into the resulting response.
We will be learning how to use two frameworks in Module 11:
- Font Awesome
Framework Example: The Place in Order
If you are taking CSCI-1450, you likely did the Place in Order exercise while preparing for the exam. A developer adds frameworks to add functionality. To create the Place in Order exercise I used these frameworks:
- jQuery UI for the sorting
- jQuery UI Touch Punch to make the sorting work with mobile (touch vs. a mouse)
To add the functionality, I had to include these framework scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery.ui.touch-punch.min.js"></script>
Do you see a difference in the third script? I linked to external files for the jQuery and jQueryUI, but I couldn’t find an external file for the Touch Punch and so had to add the actual file to my project.
My process for making the Place in Order exercise was this:
- I studied the tutorial. I needed to understand it to edit it.
- I copied the code from the tutorial into my project.
- Before I started to edit the code I made sure the code you moved works in my project.
- Then I started to edit the code for the exercise.
You will find that is how most developers do their work most of the time. Pay it forward by contributing when you can.
(I can’t remember what tutorial I used to create the place in order, but here is one that I might have used. https://www.tutorialspoint.com/jqueryui/jqueryui_sortable.htm)
Here is a definition of jQuery from W3 schools:
You attach the jQuery framework by including the link to it, for example:
As an internal file: <script src=”jquery-3.5.1.min.js”></script>
As an external file: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“>
In the first example, you would include the jQuery file in your package of code. In the second example, you link to an external reference. Most developers, most of the time, link to an external reference.
jQuery fadeIn/fadeOut Example and Exercise
The jQuery framework includes a lot of pre-built methods that make development time faster. What follows are a few examples of how to do some cool things with jQuery.
With this example, let’s take it a step further and try to modify it. First, here is the jQuery example:
It may be easier to open JSFiddle in a new tab on your browser. Let’s look at the result first. There are two buttons that allow you to fade the image in and out. fadeIn() and fadeOut() are jQuery “methods”. Methods have parameters that go into the parentheses.
For fadeIn() and fadeOut() the parameter that you put in parentheses is the amount of time in milliseconds for the fading in and out. There is 1000 milliseconds in 1 second, so fadeIn(1000) would fade in over 1 second.
Now, let’s try to add a third button. The third button will both fade in and fade out. Here is the jQuery you need to make the button:
At the end, your JSFiddle should look like this, and your Fade in and out button should have the image first fading out then back in.
Final Project Websites
- The Template Lab (Between Module 6 and 7)
- Study for the HTML/CSS Exam
- PHP Websites
- The Best Internship
Bootstrap Starter Pack
This is a starter pack of Bootstrap HTML file using Bootstrap navigation. It includes a page with columns, a photo gallery (with modal pop-up) that automatically adjusts the number of images in a column based on the width of the screen, a slider, and responsive embedded video using Bootstrap.