website design software org
- [voiceover] in this lesson,i'm going to show you how to include images in yourpage and we'll be looking at two different cases. we'll look at the case wherethe image is in the same folder as your html filesand we'll look at the case where the image is in a differentfolder, in a sub-folder. so, i'm assuming you'vedownloaded the source code files of this module. and if you have done so, goto the folder that's called
images that has the assestsfor the images lesson. and you'll see that insideof the project there's an image called "background.png". so, we'll use this one forthe case where the image file is in the same folder as the index file. there's also folder called"images" and inside that there's another image, it's reallythe same image but it has a different name and islocated in a different place. so that you can learn how tolink, how to include those
images as well. so, let's get started. the tag that we use for imagesis called the "img" tag. so i'm going to add an imagehere and i'm going to start by opening up my img tag. so, you need to includean attribute called source and indicate the location of the image. if the image is located ina different url, you have to add the full url.
such as this, like thefull location of the image including http, the domain,wherever the image is located. that's if it's locatedin an external place. but, if it's included in thesame folder as your index of html, you can simply typein the name of your image. with the extension of course. same as we did with links. so everything i'm doinghere is the same for links. and one way to do this,
is by closing the image tag in this way. now, as you can see, this isa sandwich without filling. and this for some reason feels wrong. there is something htmlcalled self-closing tags and you use that whenever youdon't have the situation when you've done for tags thatdon't have an inside filling. you just close them like this. this is called a self-closing tag. and the best way to thinkof them is by thinking
of a doughnut. which is in some way aself-closing sandwich with no real filling. it can have attributesas well, but doesn't have an actual filling. and the tag that we show inhere, the break tag is a tag that you can use to add newlines inside of a paragraph. so for example, i'vegot this paragraph here and i can add a break tag like so
and that will keep a line but we're still inside of this paragraph. so, if we looked atthat browser, you'll see that it basically jumps a new line. you can add multiple lines,it's a way you can use to add more lines in your text paragraphs. but don't use it to actuallyposition your elements because that's done with css. so, continuing with images,this is how we can include
an image that's locatedin the same folder. if you want to includean image that's located in a sub-folder... so we go to the folderimages and then another image in here. you have to type in the nameof that other folder and then forward slash and thename of the file, which is "another image.png". so, this will show thatother image that we
wanted to include. to summarize, the img tag iswhat we use to include images. the source or "src" attributeallows you to specify the location of this image. if the image is an externalpage and you know the full url, you can include it like so. it needs to have obviously theimage file name at the end. if you have that, youcan add it in this way. if the image is in the samefolder as your page, you can
just include the name. and if it's in a sub-folderor many sub-folders, you can add all the folderslike that, use forward slash until you find the file and then you specify thefull name of the file. lastly, some tags and the imageis one of them, that don't have a filling, can bepresented as self-closing tags. for which the best way to lookat is the doughnut analogy. so now, have a play withthis code, go buy a doughnut
if you're hungry and let's continue.
Tidak ada komentar:
Posting Komentar