HTML Tutorial #4: Images & File Paths | Web Development | Filipino | Tagalog
Summary
TLDRIn this HTML tutorial part 4, the focus is on incorporating images and managing file paths. The instructor explains the use of the 'img' tag, its attributes like 'src' for source, 'width', and 'height' which can be set in pixels or percentages. The tutorial also covers how to add images from local directories and the web, using absolute and relative file paths. Practical examples are given, such as adjusting image dimensions and linking to external sources. The video concludes with an invitation for viewers to engage through comments or social media.
Takeaways
- 🖼️ The video is part of an HTML tutorial series focusing on images and file paths.
- 📸 The 'img' tag is used to embed images in HTML, and it requires an 'src' attribute for the file path.
- 🔍 Image attributes include 'alt' for alternative text, 'width', and 'height' to specify the image dimensions.
- 🎚️ The 'width' and 'height' attributes can be set in pixels or as a percentage of the container.
- 🔄 The aspect ratio of an image is maintained when only one dimension (width or height) is specified.
- 📁 File paths can be relative, using folder names and '../' to navigate directories.
- 🌐 For external images, absolute URLs can be used by copying the image link from the source.
- 🔗 The 'alt' attribute is important for accessibility, providing a text alternative if the image cannot be displayed.
- 🖥️ The tutorial demonstrates how to add an image to an HTML file using a text editor.
- 📝 The presenter encourages viewers to ask questions and engage with the content through comments or social media.
Q & A
What is the main topic of this HTML tutorial?
-The main topic of this HTML tutorial is about using images and understanding file paths.
What is the basic HTML element used to insert an image?
-The basic HTML element used to insert an image is the 'img' tag.
What are the two main attributes of the 'img' tag discussed in the tutorial?
-The two main attributes of the 'img' tag discussed are 'src' for the source of the image and 'alt' for alternative text.
How can you specify the width and height of an image in HTML?
-You can specify the width and height of an image in HTML using the 'width' and 'height' attributes, which can be set in pixels or as a percentage.
What does the 'alt' attribute represent in an 'img' tag?
-The 'alt' attribute represents alternative text for an image, which is used when the image cannot be displayed.
How can you add a link to an image in HTML?
-You can add a link to an image in HTML by wrapping the 'img' tag within an 'a' (anchor) tag.
What is the default unit for the 'width' and 'height' attributes in an 'img' tag?
-The default unit for the 'width' and 'height' attributes in an 'img' tag is pixels.
How do you insert an image from a file path in the same directory as your HTML file?
-You insert an image from a file path in the same directory by using the 'src' attribute with the file name and its extension, like 'src="filename.png"'.
What is the significance of using a forward slash (/) in a file path for an image?
-Using a forward slash (/) in a file path indicates the root directory, and it helps in locating the image file regardless of the current directory.
How can you obtain an image link from a website to use in your HTML?
-You can obtain an image link from a website by right-clicking the image, selecting 'Copy image link', and then pasting the link in the 'src' attribute of the 'img' tag.
What does the tutorial suggest doing if you are unsure about a concept like aspect ratio?
-If you are unsure about a concept like aspect ratio, the tutorial suggests watching previous episodes for a better understanding.
Outlines
🖼️ HTML Images and File Paths
This segment of the HTML tutorial series focuses on the use of images and file paths in HTML. The speaker introduces the topic and provides an overview of the tutorial's flow, which includes discussing the image element, its attributes, links, and text attribution. The tutorial explains how to use the 'img' tag with 'src' attribute to specify the image source, and demonstrates setting the image width and height using pixels or percentages. It also touches on the aspect ratio and how to maintain it when resizing images.
📁 Image Tag and File Path
In this part, the tutorial delves into the specifics of using the 'img' tag and specifying the correct file path for images. The speaker instructs on how to properly use the 'src' attribute with the file path to display an image on a webpage. An example is given where the image file is named 'lipidgames.png' and is set to display at 200 pixels by 200 pixels. The tutorial also covers how to save and view the image on the right side of the screen.
🔗 Copying Image Links
The speaker demonstrates how to obtain an image from the internet for use in a webpage. They guide viewers through the process of finding an image on Google, right-clicking to copy the image link, and then pasting it into the 'src' attribute of the 'img' tag. This section shows how to embed an image directly from a URL into an HTML document.
📂 File Path Variations
This section discusses different ways to specify file paths for images in HTML. The tutorial covers relative paths, such as using 'images/name.png' for an image in a folder named 'images', and absolute paths. It also explains how to reference images in different directories, including using '..' to move up a directory level. The speaker provides examples and clarifies the concept of file paths in the context of web development.
📢 Closing Remarks and Engagement
The tutorial concludes with the speaker thanking the viewers for watching and encouraging them to leave comments or messages on Facebook. They assure viewers that they will respond to queries as soon as possible. The speaker reiterates their appreciation for the viewers' engagement and looks forward to the next video in the series.
Mindmap
Keywords
💡HTML
💡Image Element
💡File Paths
💡Attributes
💡Image Links
💡Width and Height
💡Aspect Ratio
💡Absolute Path
💡Relative Path
💡Image Sources
💡Responsive Images
Highlights
Introduction to HTML tutorial series, part 4 focusing on images and file paths.
Explanation of the img tag in HTML for embedding images.
Discussion on image attributes including src, width, and height.
Demonstration of setting image dimensions in pixels and percentages.
Tutorial on adding alt text for accessibility and SEO.
Guide on how to use the 'width' attribute to set image width.
Guide on how to use the 'height' attribute to set image height.
Explanation of aspect ratio and its importance in image display.
Instruction on adding images to HTML files using the img tag.
Example of how to use the 'src' attribute to link to an image file.
Demonstration of embedding an image from a URL using the 'src' attribute.
Explanation of relative and absolute file paths for images.
Tutorial on how to reference images in different folders using file paths.
Guide on how to use the 'alt' attribute for image descriptions.
Advice on watching previous episodes for more context on image handling.
Encouragement for viewers to ask questions and engage with the content.
Closing remarks and a prompt for viewers to look forward to the next video.
Transcripts
hey guys welcome back starting html
tutorial series so this is part 4 and
for today we are going to talk about
images and file paths right after this
intro
so guys for today at one tutorial flow
nothing so um
is your img or your image element
nothing and then next you image
attributes and then next your image
links and then lastly you adding
[Music]
width parabola indicate nothing your
width and then you hide parama indicate
your height and then lastly
which is your text
okay and then
attribution which
[Music]
so
attribute which is like detection number
in pixels or percentage so by default
pixels a guys so for example img src
name that png and then your vidnya 200
and then you hide near 200. so by
default pixel stop meaning 200 pixels by
200 pixels and then pretty denominating
10 is percentage so at the width fifty
percent and then height fifty percent
of pixels
and then your aspect
structure so if you don't know this then
you should probably watch the previous
episodes
and then you're adding html files so
again atom tutorial for nothing
by double clicking
image for now
img tag img and then src
then equals
uh file path so
stupid lipidgames.png
make sure
you
png
extension
jpg so depending on
your picture so for example png
so 200 pixels by 200 pixels so you save
nothing on it and then it reload not it
on the right side and what you can see
which is at 200 pixels by 200 pixels
okay
[Music]
screen
quotes and then you're closing nothing
so again
and then that is a google and then my
search time
picture so i slipped it in the vote shot
so when it is slipped to devotions
so i thought i got the picture right
click
and then copy image link that then so
copy image link
and then they paste you just src
image
control left clicked
a picture nothing literally
[Music]
[Music]
but
so for example at your current folder
new name that png nothing all right so
gets the next variation images slash
name dot png so to the manuf
[Music]
okay so your slash images
nothing is that this folder one level up
from the current folder
so for example dot dot slash dot dot
slash name that png enables a beta so
for example at the current folder not
edited
[Music]
so
a tutorial for
so any absolute partner picture nothing
else
so absolutely
i think image snippety games
[Music]
[Music]
[Music]
[Music]
[Music]
and i will answer to you as soon as
possible okay so you don't guys thank
you for watching this video
and
just leave the comments out in comment
section or message us on facebook and
also guys better
[Music]
again thank you for watching and as
always guys i will see you in the next
video
goodbye
Ver Más Videos Relacionados
5.0 / 5 (0 votes)