With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.
==============
HTML Introduction
HTML Basics
HTML Elements
With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.
==============
HTML Introduction
HTML Basics
HTML Elements
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docxchristiandean12115
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf
ITECH2106-6106
Webpage & Multimedia Design
CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 1 of 11
Lab Week 1
HTML & CSS Introduction
Overview
This week’s lab exercises:
Refresh your memory developing a webpage using HTML & CSS; •
Employ <div> tags to structure a webpage; •
Begin using HTML5 semantic structural tags; •
Begin Assignment 1 by starting on the Needs Analysis. •
NOTE: If you copy and paste code from any source, make sure the quotations marks paste correctly, sometimes you may
get the wrong shaped quotation marks such as angled ones “ instead of straight ones "and the browser cannot read
them. Also note, most of this code is images and cannot be copied and pasted!
Exercise 1: Refresher
Remember in “ITECH1004/5004: Introduction to Multimedia”, you had
to create a basic website for your final assignment? Well, let’s recreate
a webpage similar to the sample provided of the homepage (shown to
the right).
ITECH1004 students were allowed to develop their website using
HTML tables, so this is where this exercise will start. In this exercise,
you will hand-code everything directly via the markup code using a text
editor, rather than use a visual editor like Adobe Dreamweaver. This
way you can be sure the code is exactly what you want, and you will
are more likely to learn the code by typing it.
Open NotePad++ and start a New file •
Start with the basic HTML tags to format a page (as shown below), •
and then open the save as file menu. Click the drop-down menu and select an .html file type. Name your file
wk1ex1.html
Sample Home Page
ITECH2106-6106
Webpage & Multimedia Design
CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 2 of 11
After saving as an html file type, you will notice notepad++ has colour coded the text for you to distinguish tags from •
content (and also attributes and values as you will see soon). Now to add some content.
Place a heading in the body: •
<h1>Home page</h1>
After the heading you need to create a table <table>. The sample had one table row <tr> and two columns of •
table data <td>.
For now just enter it as below, keeping the indentations as it makes it easier to see where tags open and close. •
Save your HTML file. •
Now for a small trick that will make it easy to track your progress when building webpages. •
Open your wk1ex1.html in Google Chrome. •
o This browser is going to be your go-to browser this semester to view your HTML files.
o Why this browser? It has the best support for the latest HTML5 and CSS3 features. In comparison,
Microsoft Internet Explorer is so far behind, even Microsoft have abandoned it in Windows 10.
Now the simple trick: •
o Place your NotePad++ window on the left of your screen using the hotkey combination “WIN key + Left
Arrow key”.
o Place Google Chrome on the right half of the screen using “WIN key + Right Arrow key”.
o Now.
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf.docxchristiandean12115
ITECH2106-6106 Lab01-HTML CSS Intro and Needs Analysis.pdf
ITECH2106-6106
Webpage & Multimedia Design
CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 1 of 11
Lab Week 1
HTML & CSS Introduction
Overview
This week’s lab exercises:
Refresh your memory developing a webpage using HTML & CSS; •
Employ <div> tags to structure a webpage; •
Begin using HTML5 semantic structural tags; •
Begin Assignment 1 by starting on the Needs Analysis. •
NOTE: If you copy and paste code from any source, make sure the quotations marks paste correctly, sometimes you may
get the wrong shaped quotation marks such as angled ones “ instead of straight ones "and the browser cannot read
them. Also note, most of this code is images and cannot be copied and pasted!
Exercise 1: Refresher
Remember in “ITECH1004/5004: Introduction to Multimedia”, you had
to create a basic website for your final assignment? Well, let’s recreate
a webpage similar to the sample provided of the homepage (shown to
the right).
ITECH1004 students were allowed to develop their website using
HTML tables, so this is where this exercise will start. In this exercise,
you will hand-code everything directly via the markup code using a text
editor, rather than use a visual editor like Adobe Dreamweaver. This
way you can be sure the code is exactly what you want, and you will
are more likely to learn the code by typing it.
Open NotePad++ and start a New file •
Start with the basic HTML tags to format a page (as shown below), •
and then open the save as file menu. Click the drop-down menu and select an .html file type. Name your file
wk1ex1.html
Sample Home Page
ITECH2106-6106
Webpage & Multimedia Design
CRICOS Provider No. 00103D ITECH2106-6106 Lab01 Page 2 of 11
After saving as an html file type, you will notice notepad++ has colour coded the text for you to distinguish tags from •
content (and also attributes and values as you will see soon). Now to add some content.
Place a heading in the body: •
<h1>Home page</h1>
After the heading you need to create a table <table>. The sample had one table row <tr> and two columns of •
table data <td>.
For now just enter it as below, keeping the indentations as it makes it easier to see where tags open and close. •
Save your HTML file. •
Now for a small trick that will make it easy to track your progress when building webpages. •
Open your wk1ex1.html in Google Chrome. •
o This browser is going to be your go-to browser this semester to view your HTML files.
o Why this browser? It has the best support for the latest HTML5 and CSS3 features. In comparison,
Microsoft Internet Explorer is so far behind, even Microsoft have abandoned it in Windows 10.
Now the simple trick: •
o Place your NotePad++ window on the left of your screen using the hotkey combination “WIN key + Left
Arrow key”.
o Place Google Chrome on the right half of the screen using “WIN key + Right Arrow key”.
o Now.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Lesson 108 23 aug13-1430-ay
1. Unit 1: Web Fundamentals
Lesson 8: Learning to Use CSS
August 22, 2013
2. Lesson 8: Learning to Use CSS
2
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
History and
Future of the
Web
HTML and
Forms
Search
Engine
Optimization
Learning to
Use CSS
Introduction
to CSS
Reusing
Code
3 Ways to
Use CSS
Separation of
Concerns
Launching
Your Own
Website
Lesson 1 Lesson 2 Lesson 3 Lesson 4
Lesson 8 Lesson 7 Lesson 6 Lesson 5
Lesson 9 Lesson 10 Lesson 11 Lesson 12
Build understanding Develop skills
3. Recap from last time (I)
• CSS is just as important as HTML because it allows us to style a
page to make it look pretty
• Changing the CSS of a site can make a big difference!
3
4. Recap from last time (II)
• It‟s just as easy to edit CSS as it is to revise HTML
• A server actually sends TWO files when you request a webpage –
HTML and CSS
• You need both to see the full version of the website
4
5. Let’s write our own CSS file (I)
1. Creating our own CSS file is the same process that we looked at in
Lesson 2 for creating an HTML file. If using a PC, open Notepad. If
using a Mac, open TextEdit.
5
MacPC
6. Let’s write our own CSS file (II)
2. Type the following code (make sure to copy it exactly!)
6
body {
background-color: #FFFFF0;
color: #FF0000;
font-family: copperplate;
text-align: center;
padding-top: 50px;
}
7. Let’s write our own CSS file (III)
3. Go to „File‟‟Save‟ and save the file as „smelly-cat.css‟.
7
MacPC
8. Let’s write our own CSS file (IV)
4. Now open your Chrome browser and go to „File‟‟Open File‟.
Locate our CSS file and open it.
8
MacPC
9. Let’s write our own CSS file (V)
5. That‟s weird…it looks the same as the text we entered. I thought
CSS was supposed to look cool!
9
MacPC
10. Let’s write our own CSS file (VI)
6. Well, remember that you can‟t style a webpage using CSS if it
doesn‟t have an HTML foundation. So now we need to create an
HTML file to pair with our CSS file. Let‟s open up a new file in
Notepad (PC) or TextEdit (Mac).
10
MacPC
11. Let’s write our own CSS file (VII)
7. Type the following code (make sure there aren‟t any typos!)
11
<html>
<head>
</head>
<body>
<h1>Smelly Cat</h1>
<h3>By Phoebe Buffay</h3>
<p>
Smelly Cat, Smelly Cat,<br>
What are they feeding you?<br>
Smelly Cat, Smelly Cat,<br>
It's not your fault.<br>
</p>
</body>
</html>
12. Let’s write our own CSS file (VIII)
8. Go to „File‟„Save‟ and save this file as „smelly-cat.html‟.
12
MacPC
13. Let’s write our own CSS file (IX)
9. Open up your Chrome browser again. Go to „File‟„Open
File‟, locate „smelly-cat.html‟ and open it.
13
MacPC
14. Let’s write our own CSS file (X)
10. You can see that the content appears, but it hasn‟t been stylized at
all. This is because our browser doesn‟t know that the HTML file
and CSS files should be linked together. Let‟s link them and see
what happens…
14
MacPC
This address will look different
15. Let’s write our own CSS file (XI)
11. Going back to „smelly-cat.html‟, add the following line of code
between the <head> tags. It should now look like this:
15
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”>
</head>
<body>
…
This line tells the browser to look for a
CSS file called “smelly-cat.css”
16. Let’s write our own CSS file (XII)
12. Save “smelly-cat.html” and open it again in the browser. Notice
anything different?
16
MacPC
17. CSS lets us style a page how we want (I)
• Let‟s see how just a few lines of CSS code were able to transform
the look of our page
17
18. CSS lets us style a page how we want (II)
18
body {
background-color: #FFFFF0;
color: #FF0000;
font-family: copperplate;
text-align: center;
padding-top: 50px;
}
1
2
• This sets the background color to „#FFFFF0‟, which is shorthand for
pale yellow
• This sets the font color to „#FF0000‟, which is shorthand for red
• This changes the font style to one named „Copperplate‟
1
2
3
3
4
5
19. CSS lets us style a page how we want (III)
19
body {
background-color: #FFFFF0;
color: #FF0000;
font-family: copperplate;
text-align: center;
padding-top: 50px;
}
1
2
• This aligns the text horizontally in the center of the page
• This adds padding, or extra space, between the text and the top of
the page
4
5
3
4
5
20. Be creative and use your imagination!
20
• There are so many possible ways to style a website – you‟re limited
only by your imagination!
21. Summary (I)
• Creating a CSS file is just as easy as making an HTML file
• CSS always needs to be paired with HTML for the styling to take
effect
21
22. Summary (II)
• The HTML code must tell the browser where to find the matching
CSS file
• There are infinite possibilities in styling a website!
22
23. What to do on your own
1. Go to URL to complete the Codecademy course online
2. Do the practice set on the material learned
1. Take the follow-up quiz to test your understanding
23