I was asked by the professor to use http://validator.w3.org/ this web site to validate my html file. It gives me errors.
The first error is:
Line 1, Column 1: no document type
declaration; implying ""
Second error is:
Line 11, Column 64: required attribute
"ALT" not specified ✉ The
attribute given above is required for
an element that you've used, but you
have omitted it. For instance, in most
HTML and XHTML document types the
"type" attribute is required on the
"script" element and the "alt"
attribute is required for the "img"
element.
Typical values for type are type="text/css" for and type="text/javascript" for .
Can anyone tell what is wrong? It displays just fine in my browser I am using IE 8. But the professor says if it fails in this validation check then the assignment is incomplete. Any help would be great.
<html>
<head>
<title>Randy's first html web page !</title>
</head>
<body bgcolor="#000066" text="#00ff44">
<h1 align="center"> Hello Professor</h1>
<h2 align="center"> By: Randy White</h2>
<p> I haven't done anything like this before.</p>
<p> Seems to be ok</p>
<p align="center"><img src="Koala.gif" width="100" height="100">
<table border="1">
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
</tr>
<tr>
<td>December</td>
<td>1</td>
<td>2010</td>
</tr>
</table>
</body>
</html>
You need to add a doctype to top of HTML page, so that the browser understands what kind of document it is.
<!DOCTYPE html>
This should make a few of other errors disappear. The remnant is pretty self-explaining. Add the required attributes and so on.
Inside of your img tag you need an alt tag...
<img src='koala.jpg' alt='A Koala!'>
An example of a document tag is this(taken from this very page)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The w3c has more info.
For a valid HTML file you need a tag before your HTML, it needs to be the first line. See here for more information http://www.w3.org/QA/2002/04/valid-dtd-list.html
Second error: You need an alt="..." attribute in your img tag, this should be information pertaining to the image, in the case that the image is unavailable, or can't be seen by the user.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Randy's first html web page !</title>
</head>
<body bgcolor="#000066" text="#00ff44">
<h1 align="center"> Hello Professor</h1>
<h2 align="center"> By: Randy White</h2>
<p> I haven't done anything like this before.</p>
<p> Seems to be ok</p>
<p align="center"><img src="Koala.gif" width="100" height="100" alt="koala image">
<table border="1">
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
</tr>
<tr>
<td>December</td>
<td>1</td>
<td>2010</td>
</tr>
</table>
</body>
</html>
i won't answer your questions but assuming you have to provide it tomorrow here you go.
Add a doctype, and pass it through the w3c validator for the rest: validator.w3.org/
The alt error is for your image. alt attributes are required on images.
HTML is validated accordinng to XML (or SGML) rules. Browsers have been developed to accept non-conformant HTML, and so browsers are not a test of validity. Similarly there is good practice such as adding ALT attributes (for accessibility). Sighted humans don't need them but many others do.
Therefore it is always good practice to create conformant documents.
Related
I did search about it, and found nothing, so I ask here.
Recently I worked on a grails project in which nested html templates formed html code for emailing like next example, in which each DOCTYPE+Style corresponds to different templates that are used depending on business rules:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
...(styles here)
</style>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<style type="text/css">
...(more styles here)
</style>
<tr>
<td>
<table>
<tbody>
<tr>
<td class="greeting">
Hi
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<style type="text/css">
...(more styles here)
</style>
</td>
</tr>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<style type="text/css">
...(more styles here)
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<style type="text/css">
...(more styles here)
</style>
...(and a lot more of code like this)
</td>
</tr>
</tbody>
</table>
But the html 4.0.1 standard says that <style> elements should go in the <head> of the document, not to mention that DOCTYPE should be the 1st one for a valid html document.
Why does it work?
Why doesn't it need to respect the standard to work?
Why is there a standard if you can skip it this way?
Surely I'm missing something.
I learned today that <html> root tag is optional too, as many others, but found nothing about this matter.
Thanks.-
Why does it work?
HTML parsers perform a lot of error recovery to handle bad HTML.
Why doesn't it need to respect the standard to work?
Because it is generally considered better to show end users a "best effort" rendering of a webpage instead of an error message.
Why is there a standard if you can skip it this way?
Because pages that follow the standard can expect more predictable behaviour in how parsers handle them (since they won't be triggering error recovery).
Hey so as the title says im making a fake website to practice what html i know so far. everything was going good until i got got to image. ive tried a hundred different images and i just get an icon thats a hill with a cloud with a line through it. i tried to look it up and couldnt figure out why it wouldnt work so here i am.
my code below.
<!DOCTYPE html>
<html>
<head>
<title>About Halo Infinite</title>
</head>
<!-- this website wont have a practical use and is just a practice so i dont forget what
ive learned-->
<body>
<h2>Halo Infinite</h2>
<p>Halo infinite is halo's 6th title in the franchise. It was released in November 2021
and was recieved well by the community</p>
Download
<br><br><br><br>
<div id="useless table">
<table border="1">
<head>
<tr>
<th colspan="2">Halo Infinite players</th>
<th> </th>
</tr>
</head>
<tr>
<td>Xbox</td>
<td>steam</td>
</tr>
</table>
</div>
<div id="links">
<a href="https://www.xbox.com/en-US/games/halo-infinite" target="_blank"> Halo
Infinite</a>
</div>
<img src="https://www.bing.com/images/search?
view=detailV2&ccid=w5wosJqa&id=CE97545615695B2AD7AA1A927EAF6E7E53DC2A81&thid=OIP.w5wosJqaeEvQMIuan-xIuQHaE8&mediaurl=https%3a%2f%2fwallpapertag.com%2fwallpaper%2fmiddle%2f1%2f7%2f4%2f636167-cute-dogs-wallpapers-2560x2048-images.jpg&cdnurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.c39c28b09a9a784bd0308b9a9fec48b9%3frik%3dgSrcU35ur36SGg%26pid%3dImgRaw%26r%3d0&exph=550&expw=825&q=dogs&simid=608032511639580680&FORM=IRPRST&ck=99A5BA7010A4867953C186A0DFB37523&selectedIndex=50&adlt=strict&ajaxhist=0&ajaxserp=0" width="200" height="200"/>
<video src="https://www.instagram.com/p/CXSzurXokTV/" controls>Video not supported</video
>
<body
</html>
You need to use the actual Image URL, not the search. If you right click the image and inspect element, you will see the URL in the tag.
Link for image: https://wallpapertag.com/wallpaper/middle/1/7/4/636167-cute-dogs-wallpapers-2560x2048-images.jpg
I know the title of this post sounds strange, but it's exactly what's happening. While testing an email template with Email and Acid and Litmus I found that Outlook.com, in all browsers, was migrating styling from one DOM element to another. I thought at first it was an unescaped tag or other common issue with email, but that wasn't the case. I also thought it could be the button markup, which was pulled from Litmus's own Bullet Proof Buttons post. But after trying all four options, plus others I found online, it didn't make a difference.
To discreetly troubleshoot this I crafted an email template with only the bare minimum needed to reproduce the what's happening.
Email Template: https://codepen.io/anon/pen/bOQmzz
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width" name="viewport">
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<!-- BUTTON -->
<table>
<tbody>
<tr>
<td style="padding: 10px;">
<a style="background-color: #800080; border: 25px solid #EB7035;" href="#" >Button Label</a>
</td>
</tr>
</tbody>
</table>
<!-- TEXT -->
<table>
<tbody>
<tr>
<td style="padding: 50px;">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I sent a test email from Litmus to an Outlook.com account I have access to and pulled the actual markup it's generating. Here it is.
<table>
<tbody>
<tr>
<td style="padding:10px">Button Label</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="background-color:#800080; border:25px solid #EB7035; padding:50px">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
As you can see it's taking the styling from TD > A and applying it to the following TD. In the original email template I had, this happened multiple times throughout. See the examples below
Original Template: Each blue sections is broken
Testing Template: Outlook.com in multiple browsers
Testing Template: Examples of other email clients
This feels more like an Outlooks.com bug than an Outlook.com quirk. Can anyone explain what's happening and suggest ways to resolve this?
After writing this all up I realized it was also stripping the A tag. And that this was probably because it wasn't a resolvable URL. In the original template I had ESP codes {campaign-ID...etc} and it probably wasn't resolving those either. So it just stripped them for security reasons, cool. But then for some reason, it takes the styling of that A link, strips it, and applies it to an element further down in the DOM. WTF were they thinking!
Hope this saves someone else the trouble from having to go down the same rabbit hole.
tl;dr This is only an issue when testing links with unresolvable URLs as outlook removes them for security reasons, but then fumbles and applies the styling on the removed A link to another DOM element.
Can somebody explain me what's going on?
I'm using thymeleaf and springboot
i got template file
out.html
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SAD</title>
<link th:href="#{/css/style.css}" rel="stylesheet"/>
</head>
<body>
<h1>sad</h1>
<div class="container">
<div th:if="${not #lists.isEmpty(list)}">
<h2>People to deport</h2>
<table class ="table table-striped">
<tr>
<th>Name</th>
<th>Surname</th>
<th width="100px">Age</th>
</tr>
<tr th:each = "people :${list}">
<td th:text="${people.name}"></td>
<td th:text="${people.surname}"></td>
<td th:text="${people.age}"></td>
</tr>
</table>
</div>
</div>
<p th:text="#{hello}">text</p>
</body>
</html>
I got request mapping on it in my controller. It works correctly. But as you see i used resource bundle and my default language is russian. (it has displayed '?' signs) on that place.
<p th:text="#{hello}">text</p>
So i wanted to display russian language content on my page . I changed charset from UTF-8 to UTF-16 and everything crashed. Actually codding type is not matter cause i tried to do that with charset=ISO-8859-1
Server starts, displays other templates. But that one does not work even if i turn back UTF-8 charset back and restart server.
I solved it like:
1. I copied my html from it;
2.Delete the file and create new named also out.html;
3.Put that html in the file and it works.
So can somebody explain what is going on?
body {}
.table{
background-color:aqua
}
this is my StyleSheet1.css saved in my local at C:\Users\ingyadav\Documents\Visual Studio 2015\Projects\StyleSheet1.css
<html>
<head>
<link rel="stylesheet" href="file:///C:/Users/ingyadav/Documents/Visual Studio 2015/Projects/StyleSheet1.css" type="text/css" />
</head>
<body>
<table class="table" border="1" style="width:300px;height:500px">
<tr style="width:auto">
<td style="width:150px;height:500px"></td>
<td>
<table border="1" style="width:150px;height:500px">
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
And this is my HTML string to be loaded into pdf now
when i pass this to the evo html to pdf converter,its not loading the external css into the pdf.
in evopdf support they mentioned to provide the fully qualified URL's but after using proper URL also its unable to load the external css.
can anyone help me on this please.
No you cannot specify multiple locations in the href attribute. Per the spec, each <link> represents a document that is connected to your html. So by design it would be only one document.
More Example: https://www.w3.org/TR/html401/struct/links.html#h-12.3