The document provides information on adding images and links to HTML documents. Some key points include:
- The <a> tag is used to define links, with the "href" attribute specifying the link destination. Links can be absolute, relative, or email links.
- The <img> tag inserts images, requiring the "src" attribute to specify the image file path. Images can also have an "alt" attribute to provide alternative text.
- Accessible links use descriptive text, avoid generic text like "click here", and don't open links in new windows without indication.
- Images improve user experience and engagement. They are added using the <img> tag and can also be made into
Know how to get started with html coding this will give you a better way to understand this simple programming language
you can add this as a basic language for php and many more web developing platforms
The Internet is growing at an incredible pace, and we want everybody to be a part of this growth. Basic HTML was created for the beginner to learn about designing web pages from the ground up and for the advanced web designers that want to revise a few HTML tricks.This downloadable tutorial is designed to help you learn about HTML and web page design.
Slides for a 90 minutes HTML workshop I gave. It was meant for absolute beginners in HTML. In addition to the slides I handed out cheat sheets for HTML and CSS (found online). The tasks were first done in http://codepen.io and later in a local HTML editor.
Know how to get started with html coding this will give you a better way to understand this simple programming language
you can add this as a basic language for php and many more web developing platforms
The Internet is growing at an incredible pace, and we want everybody to be a part of this growth. Basic HTML was created for the beginner to learn about designing web pages from the ground up and for the advanced web designers that want to revise a few HTML tricks.This downloadable tutorial is designed to help you learn about HTML and web page design.
Slides for a 90 minutes HTML workshop I gave. It was meant for absolute beginners in HTML. In addition to the slides I handed out cheat sheets for HTML and CSS (found online). The tasks were first done in http://codepen.io and later in a local HTML editor.
SEO Workshop - St. Edward's University Instructional TechnologyMegan Ura
This is the slide deck for the SEO workshop taught at St. Edward's University by Megan Ura (@Megan_Ura), Computer Training Coordinator. Sponsored by Instructional Technology. This material was developed from past work experience and from Google's Search Engine Optimization Started Guide and SEOMoz's Beginner's Guide to SEO.
UPDATED: Jan 18, 2012 - Added slide on Google's SPYW.
I'm also aware there might be some formatting issues. It seems that SlideShare shifts some slide elements around, resulting in content not being exactly positioned where I want it. Even so, this shouldn't impact your ability to view the content. If there's formatting issues, let me know!
Social media has become an impressive buzzword but it’s less media and more social. Find out where the real value of social media lies and how this can change your strategy from looking at numbers to looking at people.
Resistance is futile: Start writing accessible websites now!Vegard Haugstvedt
Accessible websites are crucial for those unlucky enough to have some form of disability or limited sight, hearing or movement. Unfortunately it is extremely "easy" to accidentally preventing websites from working with accessibility tools. It is our responsibility as developers to make sure the systems we develop can be used by anyone, and to achieve that we need the right "tools".
In this talk I not only explain how to write proper, accessible HTML, but I also show you what happens if you do not. We look at how HTML5 and WAI-ARIA can improve navigation, understanding and perception, and how to make screen readers react to changes made by JavaScript code.
By watching this talk you will learn the most common pitfalls and the best techniques when it comes to accessibility.
What is search engine optimization? How to do Keyword research?
On-page optimization for SEO, Off-page optimization for SEO, How to build links? Link building methods discussed in detail.How to avoid bad links? Social media role in search engine optimization.How to optimize your social networks profile for SEO?
How to Build a Module in Odoo 17 Using the Scaffold MethodCeline George
Odoo provides an option for creating a module by using a single line command. By using this command the user can make a whole structure of a module. It is very easy for a beginner to make a module. There is no need to make each file manually. This slide will show how to create a module using the scaffold method.
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Dr. Vinod Kumar Kanvaria
Exploiting Artificial Intelligence for Empowering Researchers and Faculty,
International FDP on Fundamentals of Research in Social Sciences
at Integral University, Lucknow, 06.06.2024
By Dr. Vinod Kumar Kanvaria
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
MATATAG CURRICULUM: ASSESSING THE READINESS OF ELEM. PUBLIC SCHOOL TEACHERS I...NelTorrente
In this research, it concludes that while the readiness of teachers in Caloocan City to implement the MATATAG Curriculum is generally positive, targeted efforts in professional development, resource distribution, support networks, and comprehensive preparation can address the existing gaps and ensure successful curriculum implementation.
Strategies for Effective Upskilling is a presentation by Chinwendu Peace in a Your Skill Boost Masterclass organisation by the Excellence Foundation for South Sudan on 08th and 09th June 2024 from 1 PM to 3 PM on each day.
Normal Labour/ Stages of Labour/ Mechanism of LabourWasim Ak
Normal labor is also termed spontaneous labor, defined as the natural physiological process through which the fetus, placenta, and membranes are expelled from the uterus through the birth canal at term (37 to 42 weeks
The simplified electron and muon model, Oscillating Spacetime: The Foundation...RitikBhardwaj56
Discover the Simplified Electron and Muon Model: A New Wave-Based Approach to Understanding Particles delves into a groundbreaking theory that presents electrons and muons as rotating soliton waves within oscillating spacetime. Geared towards students, researchers, and science buffs, this book breaks down complex ideas into simple explanations. It covers topics such as electron waves, temporal dynamics, and the implications of this model on particle physics. With clear illustrations and easy-to-follow explanations, readers will gain a new outlook on the universe's fundamental nature.
Delivering Micro-Credentials in Technical and Vocational Education and TrainingAG2 Design
Explore how micro-credentials are transforming Technical and Vocational Education and Training (TVET) with this comprehensive slide deck. Discover what micro-credentials are, their importance in TVET, the advantages they offer, and the insights from industry experts. Additionally, learn about the top software applications available for creating and managing micro-credentials. This presentation also includes valuable resources and a discussion on the future of these specialised certifications.
For more detailed information on delivering micro-credentials in TVET, visit this https://tvettrainer.com/delivering-micro-credentials-in-tvet/
2. • HTML tags can have attributes, attributes provide additional
information to the tag
• Attributes are always specified in the opening tag
• Attributes come in name/value pairs like: name=“value”
• Attribute values should always be enclosed in quotes “”
• Some HTML tags require attributes to work
REVIEW… ATTRIBUTES
3. HTML ATTRIBUTES: LINKS
• HTML links are defined with the <a> tag
• The link address or link destination is specified in the “href”
attribute:
• <a>This link will not work because there is no attribute
assigned</a>
• <a href=“http://www.w3schools.com”>This is a link</a>
4. LINKS
• The <a> tag defines a hyperlink, which is used to link from one
page to another or to another destination of your choice.
• The <a></a> tag requires both an opening and closing tag.
• The most important part when creating any link is to include
the “href” attribute, which indicates the link’s destination.
Without the “href” attribute you are not creating a link.
• “href” means “hyperlink reference”
5. LINKS
Any text between the opening and closing <a> tag will
become the clickable text user click on, seen in blue below:
<a href=“http://www.mohawkcollege.ca”>Link</a>
<a href=“index.html”>Homepage</a>
6. TYPES OF LINKS
Absolute path hyperlinks:
<a href=“http://www.facebook.com”>Facebook</a>
• Links to webpages and resources (eg. PDF) on the web
• Links outside of the site
• Must contain “http://…” so the browser knows to look on the
web for that resource
• www is not always needed… sometimes URLs will have other
text where the www is… this is called a subdomain
7. TYPES OF LINKS
Relative path hyperlinks:
<a href=“index.html”>My Homepage</a>
• Links to webpages and resources located within the site (siblings)
• Links to resources or files that are on the same domain
• Examples:
• mohawkcollege.ca/file
• mohawkcollege.ca/folder/file
• mohawkcollege.ca/document.pdf
• mohawkcollege.ca/image.jpg
8. TYPES OF LINKS
Email hyperlinks:
<a href=“mailto:info@mohawkcollege.ca”>Email Us</a>
• Must include href=“mailto: followed by the email address
• Additional attributes can be included to assign the subject link
of the email, even the contents of the email!
9. NEW WINDOWS/TABS
• Find it annoying when new windows open unexpectedly?
• Nearly everyone agrees that users ought to be alerted when a
link does not open in the current window or frame
• The problem?
Some users may not understand they’ve been taken to a new
window… they may try and use the back button and get
frustrated or worse – lost on a page!
• The solution?
Communicate that they’re being taken to a new window – use
an icon or a title in the link
10. NEW WINDOWS/TABS
How to make a link open in a new
window or tab?
• Add the attribute: target=“_blank” to the link…
<a href=“link.html” target=“_blank”>Open page in a new tab</a>
12. PRACTICE…
Create the following structure in a new html file:
<p>Linking to content and resources:</p>
<ol>
<li><a href=“about.html”>Relative Link</a>
</li>
<li><a href=“http://www.facebook.com/mohawkcollege” >Absolute Link</a>
</li>
<li><a href=“mailto:info@gmail.com”>Email Link<a>
</li>
</ol>
13. Remember to think like you’re listening to the content on the page…
MAKING LINKS ACCESSIBLE
14. ACCESSIBILITY MATTERS!
Making hypertext links accessible is one of the most
basic and important aspects of web accessibility!
• Standard hypertext links work with all technologies and platforms
and users of all abilities can access them
• But…some types of links are more accessible than others
• Inaccessible links are one of the most severe barriers to overall
accessibility
15. ACCESSIBILITY:
USING A KEYBOARD
Users must be able to navigate to and select each
link using the keyboard alone!
• In most browsers, the Tab key allows users to jump from link to
link, and the Enter key allows users to select a link
• If the only way to access a link is with a mouse, the link is
unusable by people who cannot use a mouse
16. Visit cnib.ca and try using the TAB and ENTER keys to move to another
page… Easy?
TRY IT OUT!
17. Visit canada.ca/en/ and try using the TAB, and arrow (< >) keys to show
the drop down navigation… Easy?
TRY IT OUT!
18. Visit honda.com and try using the TAB key to get to the ABOUT section
on the homepage… Easy?
TRY IT OUT!
19. ACCESSIBILITY:
SCREEN READERS
• Most screen readers say "link" before each link – so links don’t
need the word “link” in the link text
• For example, a Products link would be read as "link
products”
• Screen reader users often navigate from link to link, skipping
the text in between
• This is done by using keyboard shortcuts
• Tabbing from link to link is a way of skimming web content,
especially if the user is looking for a link on a page
20. ACCESSIBILITY:
SCREEN READERS
• Links with no context such as “Click Here” are not useful
• Add context to the link text
• BAD: Click here for the arena schedule
• GOOD: View the arena schedule
• Place the distinguishing information of links at the beginning of
a link.
• Users can choose to listen to all links from a-z
• Use familiar phrases whenever possible
• Eg. Contact Us is better than You can can contact us
21. ACCESSIBILITY:
LONG VS. SHORT LINKS
Long:
• Be long enough to convey the purpose of the link but no longer
• Screen reader users cannot visually skim through lengthy
links, they must listen to all text
Short:
• There is no minimum length of link text, as long as the link is
not empty
• Keep in mind that really small link areas may be difficult to click
on for some users
22. ACCESSIBILITY:
SUMMARY
• Always use descriptive language in links
• Create unique links, don’t use meaningless text:
eg. “Click Here”
• Be cautions about opening links in a new window
• Remember absolute, relative and email coding standards
24. Images can be used to provide branding, communicate critical
information, or make a site more visually appealing
USING IMAGES ON A SITE
25. WHY ARE IMAGES
IMPORTANT?
• Articles with images get 94% more total views
• Including a Photo and a video in a press release increases views by
over 45%
• 60% of consumers are more likely to consider or contact a business
when an image shows up in local search results
• In an ecommerce site, 67% of consumers say the quality of a
product image is “very important” in selecting and purchasing a
product
• In an online store, customers think that the quality of a products
image is more important than product-specific information,
descriptiond and ratings /reviews
• Engagement rate on Facebook for photos is 37% higher over text
31. ADDING IMAGES
• The <img /> tag is used to insert image into our webpages
• Image tags are similar to <br /> and <hr />, they’re “self closing”: -
the closing tag is built in
• Images require the “src” attribute that specifies the location of the
image
• Without the “src” attribute (src is a short-form of source),
your image will not work!
• Example:
<img src=“images/photo.jpg” />
32. ADDING IMAGES:
THE PATH
• Adding an image is very similar to adding a hyperlink
• You can add an image in a couple of ways, which include Absolute &
Relative paths
• Absolute: when the image resides OUTSITE your site
• Relative: when the image reside ON your site
Absolute path:
<img src=”http://www.mohawkcollege.ca/images/photo.jpg” />
Relative path:
<img src=”images/photo.jpg” alt=“photo” />
33. ADDING IMAGES:
ALT ATTRIBUTES
• Images also need the “alt” attribute
• The alt attributes provides alternative information for an image if
a user for some reason cannot view it
• Reasons an image may not be viewable:
• a slow connection
• an error in the “src” attribute
• the user uses a screen reader
• You cannot see the alternate text in the browser
Example:
<img src=”images/photo.jpg” alt=“Photo of
something” />
34. ADDING IMAGES:
LINKING IMAGES
• All images on a webpage can be used as a link
• Now that we know how to code both, creating an image link is easy, we just need to put
everything in the correct order. Just as text in between HTML is being described as something,
so can images
• Make sure to include all relevant “attributes” in order for the image and link to work correctly:
• “href” for links
• “src” for images
• The first part to any image link is the links itself:
<a href=“http://www.facebook.com” title=“Facebook”>
• The second part to any image link is the image
<img src=“images/fblogo” alt=“Facebook Logo” />
• The third part to any image link is the closing link tag
</a>
• Example:
<a href=“http://www.facebook.com” title=“Facebook”><img src=“images/
fblogo” alt=“Facebook Logo” /></a>
35. ADDING IMAGES:
LINKING IMAGES
1. The first part to any image link is the links itself:
<a href=“http://www.facebook.com” title=“Facebook”>
2. The second part to any image link is the image:
<img src=“images/fblogo” alt=“Facebook Logo” />
3. The third part to any image link is the closing link tag:
</a>
36. ADDING IMAGES:
LINKING IMAGES
Put it all together:
<a href=“http://www.facebook.com”
title=“Facebook”><img src=“images/
fblogo” alt=“Facebook Logo” /></a>
This logo would now be a clickable
link to Facebook
37. Let’s try inserting some images… open up eLearn and Dreamweaver!
IN-CLASS DEMO!