I have started HTML. I am making tables in it. I just tried breaking the webpage into two by adding a sidebar at the left but I am confused with its size. What is the standard size of a webpage? Here is my code,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inter Notes Homepage</title>
</head>
<body>
<table>
<tr height="50">
<td width="200" height="610"></td>
<td width="800" ></td>
</tr>
</table>
</body>
</html>
There is no standard size to a webiste as such as it will vary according to the screen size of the user. You can generally do one of two things. You can work in % based measurements, where the tables sizes can be set to stretch the full browser size for example as 100%, or any other size for that matter.
The alternative is to use fixed widths such as pixels. Generally, we design sites to fit a 1024x768 screen resolution as a minimum. This roughly translates into 950px or 960px wide.
All depends on the design of the site as to which is a better option for you. I am more a fan of fixed width designs.
Related
Think of a small (valid) html mail with an image. Litmus tests ran fine.
The images are downscaled to provide a sharp resolution on high DPI devices (a.k.a. Retina Images), i.e. the image is 500px wide but to be displayed at 250px.
When I send the mail with an embedded image instead of a remotely served image, I noticed a strange behavior in Apple Mail on macOS (tested on 10.12.6): The layout is broken.
Screenshot Remote:
Screenshot Embedded:
As you can clearly see, when embedded the image breaks out of the table. This only happens if the real image size is larger than the current preview pane size.
I simplified the example up to the point where I realized that this might be an Apple Bug. Does anybody know a Radar for this? Or a workaround?
I played with overflow etc but did not find a solution..
The bug does not occur when
the image is #1, so it's exactly the same size as displayed (but not sharp enough on high DPI then)
the preview pane is larger than the image file dimensions
It looks like Apple Mail uses the real dimension to fit it into the table when an image is embedded via cid or even base64. When served remotely it is downscaled first.
Update
Submitted as rdar://33564090, see https://openradar.appspot.com/radar?id=5011843189833728.
Source of test mail
<!DOCTYPE html>
<html>
<head>
<title>Apple Mail Retina Image Bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Retina Image in Signature Test
<br>
Best regards,
<br>
</p>
<!-- Footer with Retina Image -->
<table border="0" cellpadding="0" cellspacing="0" style="background: #eeeeee;">
<tr>
<td style="padding: 10px;">
<!--img alt="Logo" src="http://via.placeholder.com/500x50" width="250" height="25" border="0" style="width: 250px; height: 25px;"-->
<img alt="Logo" src="cid:logo" width="250" height="25" border="0" style="width: 250px; height: 25px;">
</td>
</tr>
</table>
</body>
</html>
I am trying to understand how viewport and initial-scaling works. I read this, this and this and tried the following experiment, which I can reproduce on a samsung galaxy s4 using firefox version 43.0.
If I open a webpage on the galaxy s4 containing this code:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=300px, initial-scale=2.0"/>
</head>
<body>
<div style='background-color:red;width:100%'>Adam 8</div>
</body>
</html>
then I get the following result:
This makes sense to me, because the div has a width of 300 CSS pixel, the galaxy s4 has 640 device pixel, and initial-scale=2 should force my phone to use 600 device pixel to represent the 300 CSS pixel div-container, which gives a blank space of 40 device pixel (however, the blank space does look wider then 40 device pixel to me but I will ignore it for now).
Then, I changed the initial-scale from 2 to 1:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=300px, initial-scale=1.0"/>
</head>
<body>
<div style='background-color:red;width:100%'>Adam 9</div>
</body>
</html>
Since initial-scale=1, I assumed that my phone only uses 300 device pixel to represent the red bar. However, I get this:
Why is the redbar now 640 device pixel long instead of 300 device pixel?
In your second example, your viewport meta tag is over-constrained. The browser will limit the minimum zoom level such that you can't zoom out to see beyond the extents of the content. In your case, the content is ~300px and the screen size is 640px so the minimum-zoom level would be ~2.1. However, you specified initial-scale=1.0 so there's no way to realize that. In this case, the browser chose to honor the initial-scale by extending the content-width to allow the specified scale.
The first case is a little more puzzling to me as the same thing should be happening to a lesser extent. Here's a picture of how it looks in Chrome on my Nexus 4 which has the same screen height.
In general, the viewport meta tag isn't specified and the behavior in these kinds of cases will vary by browser. I would avoid setting the initial-scale at all and let the browser do that automatically. Typically they will try to zoom out to fit all the content on the screen.
So given this HTML, the background image loads just fine in Firefox, IE and Chrome. But in Safari, it just ignores it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 141.72999572753906 255.1199951171875">
<image xlink:href="http://labels.labellogiclive.com/alfresco_10_p1_alf001_uk__v0.svg" preserveAspectRatio="none" x="0" y="0" width="141.73" height="255.12"></image>
</svg>
</body>
</html>
Now I thought it might be a server issue, not giving the correct headers, but I've checked and it looks good (image/svg+xml). So I'm at a bit of a loss... Any ideas?
Safari struggles with deeply-nested SVG <image> elements.
See, for instance, the comments here: Embed SVG in SVG?
Your first <image> loads another SVG, which itself includes an <image> that loads the background photo. If you merge the innermost <image> element (the photo) into the outermost SVG, it works fine.
I've submitted a bug report with Apple via the Apple Bug Reporter with a Bug ID of 21959574. Hopefully someone at Apple will take note and fix the underlying issue.
I'm building a webpage in Notepad. I'm using html5 for the first time. I believe I did the correct coding to insert these images but they don't show up on the page. Here is the code: I could use some help, please. Thank you.
<html>
<head>
<title>My practice website</title>
<meta charset="utf-8">
<html lang="en">
<meta name="keywords" content="html, css, javascript, history, poems, poetry"/>
<meta name="description" content="This site is about my personal life, poems, poetry, images of family, myself"/>
<meta name="author" content="schweidel tyson">
<meta http-equiv="refresh" content="30" />
<link rel="stylesheet" type="text/css" href="mainstyesheet.css"/>
<body style="background-color: #ccffff;">
</head>
<body/>
<h1>Welcome to my website</h1>
<img src="http://www.html.net/logo.png"/>
<p>This is basically a personal website build to showcase my fledging talent in webdesign to put up pictures of my family and friends. I also like poetry, so there will be some poems.</p><b/>
This is a link to a good html tutorial<br/><br/>
This is another great tutorial link<br/><br/>
A tutorial for styles link
<img src=My practice website/My Website/images/high yellow.jpg" width="192 height="256"/><alt="African Amereican light-skined woman"><br/><br/>
<img src="http://www.zimbio.com/My website/images/trendy.jpg" width="352" width="400"/><alt="African American Woman">
<img src="My practice website/My website/my new pic.jpg" width="104" height="104"/> <alt="me at the domiciliary">
</body>
</html>
Your HTML is a bit off:
<img src="..." width="104" height="104"/> <alt="me at the domiciliary">
alt is just the alternate text for the image. It's an attribute just like width, src and height:
<img src="..." width="104" height="104" alt="me at the domiciliary" />
Also, make sure your URLs are correct.
Also, without a DOCTYPE, your markup is invalid. Include a DOCTYPE (here's a HTML5 one):
<!DOCTYPE html>
<html>
...
I've got a site coded in XHTML 1.0 Strict. I want to use the new Microdata to add breadcrumbs to my site (so Google will understand them).
My old non-microdata marked-up breadcrumbs look like this:
<ul>
<li>Level 1</li>
<li>Level 2</li>
<li>Level 3</li>
</ul>
According to Google, to markup breadcrumbs using Microdata, you extend the above code like this:
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
...
</ul>
But this is not valid XHTML 1.0 Strict.
What should I do?
Should I ignore the validation conflicts?
Should I write itemscope="itemscope" instead of just itemscope (this would be valid XML, but still not valid XHTML)?
Should I change the Doctype to be HTML5 instead of XHTML 1.0 Strict?
I want this to work all the way back to IE6!
Please advice :)
Yes, if you wanted to use itemscope in XHTML, you would need to write itemscope="itemscope" and use XHTML5 (same DOCTYPE as HTML5, but XML syntax).
itemscope is not included in W3 HTML5, but present in WHATWG's version, so validation may continue to be a difficulty. There seems to be quite some political argument on this issue, which I haven't been following as it looks fairly tedious.
For the moment, if you want to use breadcrumb annotations in a finalised, validatable document format, you could use RDFa instead: the alternative (but older) proposal, which the argument is all about, and use the existing doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Since the major search engines have decided on schema.org last June (2011) as the way to do rich snippets, this question has become much more important seeing XHTML5 does not yet have a working DTD (BTW, http://www.html5dtd.org/ is working on a XHTML5 DTD and may well be ready when you read this, if so disregard what I'm about to say). And what I am about to say summarises a page I placed at http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/ a few weeks ago, and there has more detail including a rich snippets demo if you want it.
I had need of extending XHTML 1.x Strict with schema.org/HTML5 microdata and getting it all to validate properly for updating nedprod, and Microsoft Expression Web has the occasional tendency to eat bits of HTML it edits, so validation is handy for catching when it borks. Hence I have created these DTDs which extend the standard XHTML 1.0 ones:
http://www.nedprod.com/xhtml1-strict-with-html5-microdata.dtd
http://www.nedprod.com/xhtml1-transitional-with-html5-microdata.dtd
To use, take a copy of your desired DTD (don't use the original from nedprod, I can't afford the bandwidth) and use as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">
or ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">
... or more likely, override the DTD used for validation by your particular XML validating setup.
BTW, here's something interesting, and I only include this as it's useful to know when answering the question. I honest to God thought that using the above doctypes would invoke quirks mode when rendering. Turns out, much to my great surprise, that IE8, Chrome 14, Firefox 5 and Opera 11.50 all render such a doctype in Standards mode. Who would have thought! So you could, if you wanted to, upload your XHTML pages onto the public internet with the custom doctype and the newer browsers at least would do the right thing.
Hope this helps someone,
Niall
Valid HTML 5 example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
<div itemscope="" itemtype="http://schema.org/MediaObject">
<div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="Breast Augmentation Video Diary">
<meta itemprop="duration" content="PT12M54S">
<meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
<meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
<meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&v=BwPN6eCpxTk">
<meta itemprop="uploadDate" content="2010-11-09">
<iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&autohide=1&modestbranding=1&showinfo=0"></iframe>
<span itemprop="description">Video Diary</span>
</div>
</div>
</body>
</html>
Found these links helpful:
- http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/
Use the application/ld+json MIME type and a microdata generator to transform the markup into data:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<script type="application/ld+json">
{"items": [{
"type": ["https://schema.org/breadcrumb"],
"properties":{
"url": ["..."],
"title": ["Level 1"]
}
}]
}
</script>
</div>
</body>
</html>
or a data:uri in an object tag:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<object data="data:text/html;charset=utf-8;base64,PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
</object>
<!--[if lt IE 8]>
<object data="mhtml://#foo">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
<div id="foo">
PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==
</div>
</object>
<![endif]-->
</div>
</body>
</html>
I want this to work all the way back to IE6!
Use the application/xhtml+xml XSLT shim to support IE6 and extend it to get a copy of the markup.
References
MDN: Base64 Encoding and Decoding
Images in a Web Page
MIME E-mail Encapsulation of Aggregate Documents, such as HTML (MHTML)
Mapping Microdata to RDF
data:URI Tests
Examining, implementing and testing of RFC2557 (MHTML)
MHTML URIs
HTML5: Differences from HTML4
try and validate some of google's pages...they don't validate.
validation is a tool, an awesome one, but nothing more, although i do applaud your determination. if you're that worried about validation i would switch to HTML5 .