The document discusses how to add and format images on web pages. It explains that images can be displayed using the <img> tag, with attributes like src to specify the image file, alt for alternate text, and align to position the image. Common image file formats like JPG and GIF are described along with width, height, border, and background image properties. Steps are provided to create an HTML page with Notepad and add an image, with an assignment to build an image gallery of one's school or college.
High Performance Images: Beautiful Shouldn't Mean SlowGuy Podjarny
(slides from the O'Reilly webcast, see recording here: http://www.oreilly.com/pub/e/3425)
The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is.
These slides discuss how you can provide the eye-pleasing experience you want without sacrificing your site's performance. You'll learn about the three primary aspects of image optimization:
Image Compression: How to best encode your images, delivering the same picture with the fewest bytes.
Image Loading: Once your files are as small as they can be, we'll cover the best ways to make them show up quickly in the browser.
Image Operations: Different tools and techniques for integrating image optimization on your site.
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5
CSS is the 2nd step of coding for web designing after HTML. Here is the basic coding terms of CSS that I learnt during my web designing course. This may help you too. Thank you :)
Need help with this project. I am confused what i have to do in this.pdfamazonedistributors
Need help with this project. I am confused what i have to do in this project. Here's the instruction
-
As a continuation of Project 3, we are almost through with creating content. This part will focus
on adding image assets to all of your pages of your site. This includes, but is not limited to:
----> The main thing needs to done for this project is A logo or banner has to appears on all
pages near the top, A background image or gradient through out the main and sub page
(remember the usability rules on this!!), Additional images or photos, Other layout image assets,
etc. Content cant be generic
Here are a few things to remember when adding images to your pages, remember the following:
All images on your site must be either .png, .jpg, .jpeg, or .gif. Any other format will NOT work.
If you need to resize a large image to small, do NOT make the height and width smaller using
HTML. Open the file in any image editing software and modify it. Resize it using HTML does
not actually resize it! Do not distort the image by making its new proportions different from the
original. This makes the image appeared skewed and looks extremely unprofessional. Be sure to
set the value for the alt and title attributes in the img tag. All of your images must be located
within a separate folder in the project folder. You may call this whatever you like, but I
recommend img or images. I am not concerned with how many images you have total, just that
you used images throughout your site at a reasonable rate. I am not overly concerned with the
quality of your images. However, you are trying to convey a certain level of professionalism in
this class so be mindful when developing your pages.
Here's the home.html and styles.css to fix it. ---->> So I already have the subpages but how could
i continue the logo and background images in subpages too? Also would you please fix the
styles.css for the subpages too? or Can i use 1 styles.css for the home and other subpages?
Home.html
Website Design
Healthy Living
HomeNutritionFitnessMindfulnessRecipesContactWelcome to Healthy Living
We believe that a healthy lifestyle is the key to happiness and longevity.
Our website provides information on nutrition, physical fitness, and mindfulness practices to
help you live a healthier life.Learn More
Live a healthier life!
Discover the benefits of healthy eating, exercise, and mindfulness.Get Started
Healthy Eating
Learn about the importance of nutrition and how to make healthy choices.Read More
Fitness
Discover the benefits of regular exercise and find a workout routine that works for you.Read
More
Mindfulness
Reduce stress and improve your mental well-being with mindfulness exercises.Read More
Styles.css
body {
background-image: url("image/background.jpg");
background-repeat: no-repeat;
font-family: Arial, sans-serif;
background-size: cover;
font-size: 16px;
height: 100%;
margin: 0;
padding: 0
}
/* Header styles */
header {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1).
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)Nuzhat Memon
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1) by Nuzhat Memon
Image Element
Inline and Empty Element
Attribute of Image Tag
src attribute of image tag
alt attribute of image tag
height and width attribute of image tag
align attribute of image tag
border attribute of image tag
ID attribute of image tag
lowsrc attribute of image tag
hspace and vspace attribute of image tag
Different Image File Format
I have created this presentation for my Web Design assignment focusing on the element: images.
It demonstrates examples and screen shots of some features that are commonly used.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
More Related Content
Similar to Session7 Adding pictures to Website and Canva.ppt
High Performance Images: Beautiful Shouldn't Mean SlowGuy Podjarny
(slides from the O'Reilly webcast, see recording here: http://www.oreilly.com/pub/e/3425)
The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is.
These slides discuss how you can provide the eye-pleasing experience you want without sacrificing your site's performance. You'll learn about the three primary aspects of image optimization:
Image Compression: How to best encode your images, delivering the same picture with the fewest bytes.
Image Loading: Once your files are as small as they can be, we'll cover the best ways to make them show up quickly in the browser.
Image Operations: Different tools and techniques for integrating image optimization on your site.
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5
CSS is the 2nd step of coding for web designing after HTML. Here is the basic coding terms of CSS that I learnt during my web designing course. This may help you too. Thank you :)
Need help with this project. I am confused what i have to do in this.pdfamazonedistributors
Need help with this project. I am confused what i have to do in this project. Here's the instruction
-
As a continuation of Project 3, we are almost through with creating content. This part will focus
on adding image assets to all of your pages of your site. This includes, but is not limited to:
----> The main thing needs to done for this project is A logo or banner has to appears on all
pages near the top, A background image or gradient through out the main and sub page
(remember the usability rules on this!!), Additional images or photos, Other layout image assets,
etc. Content cant be generic
Here are a few things to remember when adding images to your pages, remember the following:
All images on your site must be either .png, .jpg, .jpeg, or .gif. Any other format will NOT work.
If you need to resize a large image to small, do NOT make the height and width smaller using
HTML. Open the file in any image editing software and modify it. Resize it using HTML does
not actually resize it! Do not distort the image by making its new proportions different from the
original. This makes the image appeared skewed and looks extremely unprofessional. Be sure to
set the value for the alt and title attributes in the img tag. All of your images must be located
within a separate folder in the project folder. You may call this whatever you like, but I
recommend img or images. I am not concerned with how many images you have total, just that
you used images throughout your site at a reasonable rate. I am not overly concerned with the
quality of your images. However, you are trying to convey a certain level of professionalism in
this class so be mindful when developing your pages.
Here's the home.html and styles.css to fix it. ---->> So I already have the subpages but how could
i continue the logo and background images in subpages too? Also would you please fix the
styles.css for the subpages too? or Can i use 1 styles.css for the home and other subpages?
Home.html
Website Design
Healthy Living
HomeNutritionFitnessMindfulnessRecipesContactWelcome to Healthy Living
We believe that a healthy lifestyle is the key to happiness and longevity.
Our website provides information on nutrition, physical fitness, and mindfulness practices to
help you live a healthier life.Learn More
Live a healthier life!
Discover the benefits of healthy eating, exercise, and mindfulness.Get Started
Healthy Eating
Learn about the importance of nutrition and how to make healthy choices.Read More
Fitness
Discover the benefits of regular exercise and find a workout routine that works for you.Read
More
Mindfulness
Reduce stress and improve your mental well-being with mindfulness exercises.Read More
Styles.css
body {
background-image: url("image/background.jpg");
background-repeat: no-repeat;
font-family: Arial, sans-serif;
background-size: cover;
font-size: 16px;
height: 100%;
margin: 0;
padding: 0
}
/* Header styles */
header {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1).
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)Nuzhat Memon
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1) by Nuzhat Memon
Image Element
Inline and Empty Element
Attribute of Image Tag
src attribute of image tag
alt attribute of image tag
height and width attribute of image tag
align attribute of image tag
border attribute of image tag
ID attribute of image tag
lowsrc attribute of image tag
hspace and vspace attribute of image tag
Different Image File Format
I have created this presentation for my Web Design assignment focusing on the element: images.
It demonstrates examples and screen shots of some features that are commonly used.
Similar to Session7 Adding pictures to Website and Canva.ppt (20)
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
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.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
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.
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.
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.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
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.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
3. What is Website
• A website is a collection of many web pages, and web pages are digital
files that are written using HTML(HyperText Markup Language).
4.
5. Displaying “Images” on web pages
How to Display “Images” on web pages
What to Display….
How to create, change, modify images.
6. How to Display “images” on web pages
“ GIF ”
“ JPG ”
Here is a simple rule of thumb:
Lots of colors
Solid colors and sharp lines
7. “ GIF ” Solid colors and sharp lines
“Graphics Interchange Format ”
8. “ JPG ” Lots of colors
Joint Photographic Experts Group
9. How to Display “images” on web pages
Image Tag
<img src =“file.gif ”>
10. How to Display “images” on web pages
Image Tag
< img src =“file.gif ” alt=“alt text” >
11. How to Display “images” on web pages
Image Tag
< img src=“file.gif ” alt=“alt text” >
Options:
Border = “0”
Border = “1”
Border
12. How to Display “images” on web pages
Image Tag
<img src=“horse.gif” alt=“My Horse” border=“1”>
13. Align= left, right, top, middle, bottom
This is an example of
an image that is aligned
to the left of the text.
This is an example of
an image that is aligned
to the right of the text.
If
more text is displayed than the
size of the picture it will wrap
around the picture like this.
14. Align = left, right, top, middle, bottom
This is top
This is middle
15. Align = left, right, top, middle, bottom
This is bottom
26. Assignment:
You'll Develop An Image Gallery
Application That Displays Different Images
of your College or School Life.
27.
28. Follow the steps below to create your first web page with
Notepad.
1.Step 1: Open Notepad.
2.Step 2: Write Some HTML. ...
3.Step 3: Save the HTML Page as (Image.html) ...
4.Step 4: View the HTML Page in Your Browser.
29. Follow the steps below to create your first web page with
Notepad.
1.Step 1: Open Notepad.
30. Follow the steps below to create your first web page with
Notepad.
Step 2: Write HTML Code..
<html>
<body>
<h2>Welcome to GJIMT</h2>
<p> Image Gallery </p>
<img src="img_chania.jpg" alt="Flowers in Chania"
width="460" height="345">
</body>
</html>
