WebTricks
Home
Home
Tutorials
Q&A Forum
Blog
Videos
Sign up / Register
html images - Playground
Back to Lesson
HTML Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML IMAGES</title> </head> <body> <h1>HTML Images</h1> <h3>The alt Attribute</h3> <img src="nofile.jpg" alt="web design background image"> <h3>Image Width and Height</h3> <img src="web-design.jpg" alt="An image" style="width:300px;"> <h3>Image Location</h3> <img src="https://www.tesroaankha.com/wp-content/uploads/2018/11/Singha-Durbar.jpg" alt="government house" style="width:300px;"> <h3>Animated GIFs as Images</h3> <img src="html.gif" alt="animated gif" style="width:300px;"> <h3>Image as a Link</h3> <a href="http://localhost/webtrix/tryiteditor"> <img src="web-design.jpg" alt="HTML Try It Editor" style="width:300px;"> </a> <h3>Floating Image</h3> <p><img src="web-design.jpg" alt="web design banner" style="width:150px;float:left;"> You can see the image and text align to each other nicely. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h3>Image Map</h3> <img src="seo.jpg" alt="image map example" usemap="#image-map"> <map name="image-map"> <area target="_blank" title="HTML Introduction" href="http://localhost/webtrix/content/html-introduction" coords="142,266,0,54" shape="rect"> <area target="_blank" title="HTML Headings" href="http://localhost/webtrix/content/html-headings" coords="146,54,166,247,293,226,310,210,296,189,267,114,263,54" shape="poly"> <area target="_blank" title="HTML Paragraphs" href="http://localhost/webtrix/content/html-paragraphs" coords="361,133,85" shape="circle"> </map> <h3>HTML Picture Element</h3> <picture> <source media="(max-width: 465px)" srcset="web-design.jpg"> <source media="(max-width: 767px) and (min-width: 466px)" srcset="seo.jpg"> <img src="web-code.jpg" alt="Web design and Development Tutorials"> </picture> </body> </html>
CSS Code
/* Write your CSS here */
Run Code