XHTML Issue about dhclass-hub

[ebeshero]

The pictures will probably look huge on newtfire, too! Yes, you can control the image size, and in a few different ways:

1. You can experiment with setting width and height for your img elements in CSS (and look up how and some examples in the w3schools tutorials/reference).
   And/or
2. You could open your trip pictures in software that edits images--your computer probably has a photo editor of some kind installed. And you can save a smaller version of your images by locking their width and height proportions, and reducing them say 25 or 50 percent..and viewing in the browser locally until they look about the size you want. (Be careful not to save overtop your original photos! I'd save a new set of smaller web-page ready images separately from my originals.)

You don't really have to do 2) unless you notice there is some lag in the browser loading your pictures--notice if the file size of an image seems really big, say larger than 1600 pixels on one side, or several hundred megabytes in file size. We don't really need high-resolution images on websites, usually, so it's common to present a medium-res, scaled-down version of a digital camera photo optimized for web viewing.

Another thing people do with LOTS of pictures is make a tiny "thumbnail" size view to set up on a main page. You could then make a hyperlink on each image so when a visitor clicks on it, it opens a larger version of the image that you have stored in your web directory. People sometimes make an "image" directory on web space to store a big pile of images, and you can actually link to a .jpg or .png (the typical image formats on the web) so it opens by itself as picture.jpg in the browser window. Your code for that, if you post a thumbnail on an xhtml page and link out to a bigger image, might look like this:

<a href="images/imageBig.jpg"><img src="imageTinyThumbnail.jpg" alt="an Irish castle"/></a>

Here, the outer <a> element makes a link into a folder you've set up in your web space on newtfire called "images" and steps into that folder to find a file called imageBig.jpg, which would open on click in a new window. Inside is a self-closing HTML <img> element that makes it possible to render a different (smaller) version of the image on the web page. I haven't indicated that the file is in a subdirectory, so the web browser will look for imageTinyThumbnail.jpg in the same, main website directory where I've saved my .xhtml files like index.xhtml. These are examples of relative links which are always a good idea to use when referencing internal files in a project website. (You'd use absolute links or a full website address starting with http:// if you're pointing to a page off site, like:
http://www.pitt.edu. )

Notice that valid xhtml requires you to hold an @alt attribute containing a plain text description of your image. That's one of the few places where a plain text phrase or sentence is actually appropriate in XML markup! It's used as a string of text that loads in place of a picture if the picture fails to be rendered in the web browser, and it also replaces the picture for anyone using a screen reader or Braille browser for blind or visually disabled viewers of the Internet.

Hope that helps and gives you some ideas!
@nlottig94

[nlottig94]

Okay, so I looked in the reference section and found "object-fit". However, it doesn't quite tell me what I can put after this...is it a number??

[ebeshero]

CSS, right? Let me take a look--it's not one I typically use...

[nlottig94]

Yes, CSS

[nlottig94]

I figured it out! Thanks for the help!!

[ebeshero]

I usually work with width and height properties in CSS, and usually I only need to list and reset the width (so height is altered proportionally as you change a width)

See an example (on a different element) here in w3schools:
http://www.w3schools.com/cssref/pr_dim_width.asp

[ebeshero]

👍 How did you do it @nlottig94 ?

[ebeshero]

Also, let's leave this issue open in case others have questions like it!

[nlottig94]

I used the width and height properties!

[ebeshero]

Good! So here's a question I don't immediately remember the answer to: Can you change an image size proportionately just by resetting the width property alone, without using height?

[nlottig94]

Yes. I set a max-width of 50% and made the height auto. If that makes any sense.

[ebeshero]

Very helpful--thank you! That's how you adjust height so it is proportional to width. 👍

[nlottig94]

Are we supposed to save our webpage like we usually save our assignments? (Ex: lottig_10-03_xhtmlExercise1.xhtml) Or are we supposed to save it as something else? Also, we are uploading this to the newtfire site, correct?

[RJP43]

Yes, upload to newtfire! If I remember correctly we are checking this assignment by going to each of your sites on newtfire. @nlottig94

[ebeshero]

Yes, we ask you to post your files in newtFire, and then we'll retrieve
your files from your newtFire webspace.

Dr. B

On Sun, Oct 4, 2015 at 6:39 PM, Rebecca Parker [email protected]
wrote:

Yes, upload to newtfire! If I remember correctly we are checking this
assignment by going to each of your sites on newtfire.

—
Reply to this email directly or view it on GitHub
#27 (comment)
.

Elisa Beshero-Bondar, PhD
Associate Professor of English
University of Pittsburgh at Greensburg
Humanities Division
150 Finoli Drive
Greensburg, PA 15601 USA
E-mail: [email protected]
about.me/ebbondar

[nlottig94]

Okay, thanks! But do we still have our file names the same as we usually do?

[ebeshero]

Ah, good question! No--not this time! And that is only because your files are going into your webspace, so the webspace holds the identifying info for each of you. So, name your files what makes sense for your webpages, probably index.xhtml and index.css or website.css or whatever you like. Be sure you've properly associated your CSS with your XHTML when you post: that is one thing we are looking to be sure you've done.

Hope this helps!
Dr. B

Sent from my iPad

On Oct 4, 2015, at 6:47 PM, Nicole Lottig [email protected] wrote:

Okay, thanks! But do we still have our file names the same as we usually do?

—
Reply to this email directly or view it on GitHub.

[brookestewart]

Is there a way to center an image? I tried using the margins and position, but it doesn't seem to do anything.

[RJP43]

@brookestewart check out this link and let me know if this helped you: http://www.w3.org/Style/Examples/007/center.en.html#block

or go check out the css on for my website ... notice the image on my homepage is centered.

[brookestewart]

@RJP43 Yes, it helped. Thank you!