Intro to HTML: Changing an Element's Size
You will often want to change the size of elements such as pictures and videos. This is often done by specifing the width and/or height of an element. To change the size of text visit: Font Styling.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.You can change the size of images using the height and width attributes. It is common to only set the width of a picture. If you set both the height and width, your image will probably not stay true to it's orginal scale.
<img width = "300" src = "image.jpg">
➼ width The image will have a width of 300 px.
➼ src The location of the picture(File or Web address). In this example,
the picture is image.jpg.
✶ If you aren't sure how to write the file location, visit: links
<img height = "300" src = "image.jpg">
➼ height The image will have a height of 300 px.
➼ src The location of the picture(File or Web address). In this example,
the picture is image.jpg.
✶ If you aren't sure how to write the file location, visit: links
<img width = "300" height = "300" src = "image.jpg">
➼ width The image will have a width of 300 px.
➼ height The image will have a height of 300 px.
➼ src The image is located at image.jpg
✶ The image will probably change scale.
An iframe is used to display an html file inside an html file. They are often used to to display content such as YouTube videos or advertisments. You will probably want to size the content.
<iframe src="https://www.youtube.com/embed/5lxNtFfFxE8" width = "500" height = "400"></iframe>
➼ src This is the location of the video. In this example it is a YouTube video embed link.
➼ width The width is set to 500px
➼ height The height is set to 400px.
✶ Unlike images, iframes use a border to keep the video to scale.✶
Next, run the code below. Play around with the width, height and src attributes.