Scribd
Upload
9 views3 pages

CSE223 Introduction To Web Authoring

The document outlines an assignment for aligning an image named Sparky in HTML5. It provides solutions for left, center, and right alignment using both direct image tags and <div> elements with text alignment styles. The HTML code examples demonstrate how to implement each alignment method effectively.

Uploaded by

Marwan Walaa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views3 pages

CSE223 Introduction To Web Authoring

The document outlines an assignment for aligning an image named Sparky in HTML5. It provides solutions for left, center, and right alignment using both direct image tags and <div> elements with text alignment styles. The HTML code examples demonstrate how to implement each alignment method effectively.

Uploaded by

Marwan Walaa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSE223: Introduction to Web Authoring

Assignment 1, Picture Alignment in HTML5


Marwan Walaa Mohamed, Faculty of Computer Science, Galala University and
Arizona State University

Problem Statement: -
Align a picture in the left, middle and right of the HTML page.

Solution: -

Left Alignment of picture named Sparky with extension JPEG, default alignment to the left,
<img src="Sparky.jpeg" alt="Sparky Image" width="250" height="350">

Center Alignment of the same picture with the same attributes,


<img src="Sparky.jpeg" alt="Sparky Image" width="250" height="350"
style="display: block; margin: auto;">

Right Alignment of the same picture with the same attributes,


<img src="Sparky.jpeg" alt="Sparky Image" width="250" height="350"
style="float: right;">

1
<!DOCTYPE html>

<html>

<header>

<Title>Marwan Walaa</Title>

</header>

<Body>

<img src="Sparky.jpeg" alt="Sparky Image" width="250"


height="350">

<br>

<img src="Sparky.jpeg" alt="Sparky Image" width="250"


height="350" style="display: block; margin: auto;">

<br>

<img src="Sparky.jpeg" alt="Sparky Image" width="250"


height="350" style="float: right;">

</Body>

</html>

Another Solution
We can use another way using text align in a <div>.

Align the image left,

<div style="text-align: left;">

<img src="Sparky.jpeg" alt="Sparky Image" width="250"


height="350">

</div>

2
Align the image center,
<div style="text-align: center;">

<img src="Sparky.jpeg" alt="Sparky Image" width="250"


height="350">

</div>

Align the image to the right,


<div style="text-align: right;">

<img src="Sparky.jpeg" alt="Sparky Image" width="250"


height="350">

</div>

You might also like