Jump to content

HTML Alignment

Slottr
 Share
Posted

Im working on a crappy project for a computer science class, Ive just started learning HTML the other day and Im not too sure how to line up some text to the right of an image.

  

<p>

<hr width=400 noshade>

<p>

<u><b>From left to right</u></b>

<p>

<img src="MC.jpg" ALT="Martina and Chris" Height="533" Width="300">

<HTML>

 

Is it possible?

Capture.JPG

Community Standards || Tech News Posting Guidelines

---======================================================================---

CPU: R5 3600 || GPU: RTX 3070|| Memory: 32GB @ 3200 || Cooler: Scythe Big Shuriken || PSU: 650W EVGA GM || Case: NR200P

Link to comment
https://linustechtips.com/topic/768353-html-alignment/
Share on other sites
Link to post
Share on other sites
Posted

Put the img tag in the same p tag as the text. For good measure, you can also use (although I don't encourage this for an serious work) the style attribute on the img tag and use "display: inline;"

I have a blog! And a list of guides I've posted

Link to comment
https://linustechtips.com/topic/768353-html-alignment/#findComment-9700370
Share on other sites
Link to post
Share on other sites
Posted
  • Author
Just now, M.Yurizaki said:

Put the img tag in the same p tag as the text. For good measure, you can also use (although I don't encourage this for an serious work) the style attribute on the img tag and use "display: inline;"

Can you show me what you mean? I'm not quite sure if I understand.

Community Standards || Tech News Posting Guidelines

---======================================================================---

CPU: R5 3600 || GPU: RTX 3070|| Memory: 32GB @ 3200 || Cooler: Scythe Big Shuriken || PSU: 650W EVGA GM || Case: NR200P

Link to comment
https://linustechtips.com/topic/768353-html-alignment/#findComment-9700381
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, Slottr said:

Can you show me what you mean? I'm not quite sure if I understand. 


<p>

<img src="MC.jpg" ALT="Martina and Chris" Height="533" Width="300"> <u><b>From left to right</u></b>

<p>

And further reading:

https://www.w3schools.com/tags/att_style.asp

https://www.w3schools.com/cssref/pr_class_display.asp

 

Also you should format your HTML similar to what's described in this image:

http://www.jeremyperson.com/wp-content/uploads/2008/08/2462285896_77655952e6_o.jpg

I have a blog! And a list of guides I've posted

Link to comment
https://linustechtips.com/topic/768353-html-alignment/#findComment-9700399
Share on other sites
Link to post
Share on other sites
Posted
  • Author
Just now, M.Yurizaki said:

-snip-

Alright, thanks for all the tips!

Community Standards || Tech News Posting Guidelines

---======================================================================---

CPU: R5 3600 || GPU: RTX 3070|| Memory: 32GB @ 3200 || Cooler: Scythe Big Shuriken || PSU: 650W EVGA GM || Case: NR200P

Link to comment
https://linustechtips.com/topic/768353-html-alignment/#findComment-9700406
Share on other sites
Link to post
Share on other sites
Posted
9 minutes ago, Slottr said:

Alright, thanks for all the tips!

Yurizaki nailed it with that infographic he linked, but here are a few tips specific to your HTML…

 

Make sure nested tags are properly nested. That is to say, HTML tags on the inside should be closed before the tags on the outside. Like this: 

<u><b>From left to right</b></u>

If that seems counterintuitive or confusing, imagine them as boxes that are within bigger boxes. They will literally be boxes once you get more into layout and structure, but the metaphor applies to basically any tags.

 

You have two opening <p> tags. The second one should be a </p>.

 

Pretty much your entire website (except for a doctype declaration) should be between the <HTML> and </HTML> tags—and then ideally within <head> and <body> tags, but I'm not sure if that's necessary for a site this simple.

Link to comment
https://linustechtips.com/topic/768353-html-alignment/#findComment-9700624
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programs, Apps and Websites

×