How+to+Align+and+Add+Pictures+in+HTML

Now let's take a look at how to align text in HTML. You can set your text to be aligned either left, center, or right. First let's open up our fontsize.txt file from the last lesson.

We can begin by centering our header of the page. Right now the code for your header should look something like this:

Welcome to Mr. Mendonez's First Web Page!

Of course your name would be in there instead of mine. To center our header all you need to do is enter the following attribute:

You can test this by saving the file as test.html and then opening the file through your web browser.

Next let's try right aligning. Let's go towards the bottom of our code where we have the following:

Soon I will be able to call myself a Web Designer 

Similarly, to aligning a header you would place your right align attribute within the start tag for paragraph. The paragraph start tag should look like this:

Test it out again by saving the file again and refreshing your web browser. A shortcut to update your test.html file is to press ctrl+s in notepad, then ctrl+tab to switch to your browser, and then ctrl+r to refresh the page. So you can perform all three operations by pressing and holding down ctrl while then pressing s, tab, and then r sequentially.

You won't have to code left align since that is the default alignment. So that is how you align text.

Now let's try inserting some pictures.

First let's search online for any image. Remember to keep it appropriate though. Click on the image, select view image, and then copy the web address. Then type out the following image tag: 

The line break tags are used to give some space between the previous text and the image. img stands for image and src stands for source. Also notice that the tag ends with a space/>. This is because the image tag is self-closing since the element of an image is just that; an image. The other tags that we learned needed end tags because the elements were always text. Because of this the web browser needs to be told where the tag has to end. The image tag is self-closing because the only element is the image itself.

You can also align images. To do this start with a paragraph tag and set the alignment. Then put in the image tag between the start and end tag for paragraph. Try the following:



Just so you know you can also insert images if your picture is saved in the same folder as your html file. In that case your code would not need the entire url; it would just need the file name.

Try saving a picture in the same folder as your html file and code the image like so:



There are other alignments such as top, middle, bottom, and more. You can easily search the internet to find the different alignments.

So that's how you align text and insert images. Hope this was helpful!

-Mr. Mendonez