How To Upload A Picture On Html

Equally you call up from Lesson 1 (What is HTML?), adding a paragraph in HTML is as elementary as wrapping text in <p> and </p> tags. Adding an image, nevertheless, is a little more complicated.

Follow Along

Before we continue, I encourage y'all to follow along by copying and pasting today's lawmaking into your own HTML document (or the page we created in Lesson 2: How To Create and Salvage Your Commencement HTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we make edits. This volition profoundly raise your learning ability.

A Funny Dog

Allow's pretend nosotros have an epitome of a domestic dog on our estimator saved as "funny-dog.jpg" and we desire to insert it into a webpage; this is the lawmaking we would employ:

<img src="funny-canis familiaris.jpg">

Let'southward analyze this code. Beginning, <img> is the lawmaking for creating an image element. Next, the letters "src" are used every bit an attribute (which you learned well-nigh in Lesson iii: Attributes and Values) and correspond "source". Basically, we need to provide the web browser with a value to the source of the epitome. Naturally, the value for the source attribute is "funny-domestic dog.jpg". This case assumes your image file is located in the same directory as your HTML file. If, for example, you had your image file within a folder named "images" your code would look like this:

<img src="images/funny-dog.jpg">

Self Closing Elements

Equally you can see, in both code examples so far there has non been an ending </img> tag, because the paradigm lawmaking is a "self endmost" chemical element. This is considering unlike a paragraph, we won't have a plethora of content within our <img> chemical element, but rather a single paradigm. In fact, HTML5 does non require us to always "shut" our elements, but for organizational reasons I recommend including traditional closing tags for about elements.

In that location is 1 additional scrap of code nosotros must add before we are finished. We must assign an "alt" attribute and value to our image. The "alt" attribute stands for "alternative" and is used to provide a text-based alternative for viewers incase the paradigm will not load, or if they are visually impaired. Here is what our code will look like:

<img src="funny-dog.jpg" alt="A funny dog sitting on the grass.">

That's it!

If yous prefer to watch video lessons instead of reading written lessons bank check out my 8 hour video course and acquire pro-level HTML, CSS, and responsive pattern.

Source: https://learnwebcode.com/how-to-insert-an-image-in-xhtml/

Posted by: cambellwhold1986.blogspot.com

Share this post