Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

html simple question

Featured Replies

You definately do not learn HTML/CSS by copying and pasting code. You learn the web languages by reading tutorials and hard work.

If you need help with acquiring tutorials, click on the read my blog button under my name to the left.

I learnt most html/css from example and playing around with it?

 

No tutorial ever got me to understand floats, but actually using them myself did.

 

Tutorials are a good way to learn, taking an example and modifying it to suit your needs can also help.

 

It depends how you learn, if i read a tutorial, it does nothing for me, unless i put it into practice immediately.

  • Author

i hope you dont mind simple question but how do you place an image in html

 

 

i know how to do the width and height but say i want place a header image at the top in the middle

 

i could use a inline css center top ?

something like

 

<img src="imageurl.jpg" alt="alt text" width="500" height="200" style="left:50%; margin-left:-250px" />

 

Should work.

 

The left 50% pushes the left hand side of your image to the dead center, however you want the center of the image to be central, so the margin-left:-250px pushes half the image back over to the left making it center.

 

If that makes sense, that's one way to do it anyway.

  • Author

that makes sense and if the pixel size is 3508x2480 to get the same quality from the image what width and height should i use . also how do i plac the image at the top

 

thank you for your patience

that makes sense and if the pixel size is 3508x2480 to get the same quality from the image what width and height should i use . also how do i plac the image at the top

 

thank you for your patience

 

Depends how big you want the image to be, resize it in whatever image software is your preference, to the appropriate ratio, change the dpi to 96 (96 is what browsers render, software and stock images often use 300dpi which is the default for print above 96 is fine)

 

The html is read vertically so if the image is at the top of your html it will automatically be at the top.

 

say your html doc looks like this

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<style type="text/css">
html, body {	
margin: 0;
padding: 0} /* Resets the browsers default settings, by default it is around 5px's but varies depending upon the browser */
</style>

</head>
<body>

<img src="imageurl.jpg" alt="alt text" width="500" height="200" style="left:50%; margin-left:-250px" />


</body>
</html>

 

the image will automatically be at the top and centred.

 

However i'd recommend keeping your html and css separate, so like this

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<style type="text/css">
html, body {	
margin: 0;
padding: 0} /* Resets the browsers default settings, by default it is around 5px's but varies depending upon the browser */

#header-image {
width:500px;
height:200px;
left:50%;
margin-left:-250px
}
</style>

</head>
<body>

<img src="imageurl.jpg" alt="alt text" id="header-image" />


</body>
</html>

Bocaj, you shouldn't teach people inline styling.

Bocaj, you shouldn't teach people inline styling.

 

haha, i knew someone would post that, i know it's bad practice.

 

Hence the second example.

It makes it sooooo much easier when you have markup separate from styling. :)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.