greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added "use image as link" example and cleaned up comments. (#24767) 

* Added "use image as link" example and cleaned up comments.

* Revert first change for grammar fix
pull/24789/head^2
JP Rowan 2018-12-13 21:58:53 -05:00 committed by Manish Giri
parent bebde5f6c9
commit 767cd0e31a
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
guide/english/html/tutorials/images-in-html/index.md
View File

@ -12,8 +12,7 @@ To insert an image you define the source and an alternative text wich is display
`alt` - This attribute is used to overcome the problem of broken image or incapability of your browser to not being able to produce image on webpage. This attribute as name suggests provide "alternative" to image which is some text describing the image.
## Example
### Example
```html
<img src="URL of the Image" alt="Descriptive Title" />
@ -24,7 +23,7 @@ To insert an image you define the source and an alternative text wich is display
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
```
### You can also define border thickness (0 means no border):
### Define border thickness (0 means no border):
```html
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
```
@ -34,15 +33,19 @@ To insert an image you define the source and an alternative text wich is display
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
```
### You are also able to use styles within a style attribute:
### Use styles within a style attribute:
```html
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
```
Here's an example to make a rounded image:
### Make a rounded image:
```html
<img src="URL of the Image" alt="Descriptive Title" style="border-radius: 50%;"/>
```
### Use image as link:
```html
<a href="#"><img src="URL of the Image" alt="Descriptive Title"."></a>
```
### More Information