I am just using basic HTML - with no Javascript, XML, CSS etc. I would like to find the instances of "--" and replace them with an 'em dash'. My code so far is:
<!DOCTYPE html>
<html>
<center>
<head>
<title>TREASURE ISLAND</title>
</head>
<header>
<h1>TREASURE ISLAND</h1>
<h3>by Robert Louis Stevenson</h3>
<h3>PART ONE--The Old Buccaneer</h3>
<h4>Chapter 1--The Old Sea-dog at the Admiral Benbow</h4>
</header>
</center>
<body>
"Fifteen men on the dead man's chest -- Yo-ho-ho, and a bottle of rum!"
</body>
<Style>
Body {
margin-left:20%;
margin-right:20%;
}
<Style/>
</html>
I have searched "find and replace, HTML" on Google but all the results talk about using Java. Can anyone offer some hints on how to achieve this, or improve my code in general?
Your question states you are not using JavaScript and not that you do not want to use it.
I don't see how this can be done without some kind of DOM manipulation which is beyond the scope of basic HTML.
If you are willing to use JavaScript you can simply add this code to your webpage.
(function() {
var str = document.getElementById("Body").innerHTML;
var res = str.replace("--", "—");
document.getElementById("Body").innerHTML = res;
})();
<center>
<header>
<h1>TREASURE ISLAND</h1>
<h3>by Robert Louis Stevenson</h3>
<h3>PART ONE--The Old Buccaneer</h3>
<h4>Chapter 1--The Old Sea-dog at the Admiral Benbow</h4>
</header>
</center>
<section id="Body">
"Fifteen men on the dead man's chest -- Yo-ho-ho, and a bottle of rum!"
</section>
Related
Here is the HTML code :
<!DOCTYPE.html>
<html>
<head>
<title>bob is a big fat baby</title>
</head>
</body>
this is my first webpage
<h1>this is u are bob baby<h1>
<h2>how exciting<h2>
<ol>
<ol>bob is a big fat baby<ol>
<ol> he really needs a life<ol>
<p>spinz.io the very fun game<p>
<p><a href="spinz.io</a></p>
spinz.io a very fun game
<p> please be honest and put in the box yes or no if u are bob baby or not <p>
What is the prbolem in this? When I tried it, all of the text was slanted.
Also, there was no text box.
If there are any other problems, let me know.
Your HTML code is likely slanted because the HTML parser is getting confused. This is because your code contains invalid markup. You can read up on the basics of HTML to learn the required HTML structure, and you can validate that your code correctly follows the structure with the W3 Markup Validator.
Here's a short list of some of the things wrong with the above code:
!DOCTYPE html should have a space rather than a dot.
</body> should be <body> -- the slash denotes that you are closing the tag, and you haven't opened <body> yet.
You need to close (nearly) all tags such as <h1></h1>.
When linking to an external resource (or website), you need to preface the link with the protocol. In this case, that's http://www to link to the full spinz.io with http://www.spinz.io.
You need to close both </body> and </html>.
To help get you started, here's the above code with correct markup:
<!DOCTYPE html>
<html>
<head>
<title>bob is a big fat baby</title>
</head>
<body>
<h1>this is my first webpage</h1>
<h2>this is u are bob baby</h2>
<h2>how exciting</h2>
<ol>
<li>bob is a big fat baby</li>
<li>he really needs a life</li>
<li>spinz.io the very fun game - spinz.io</li>
</ol>
<p>please be honest and put in the box yes or no if u are bob baby or not</p>
</body>
</html>
Hope this helps! :)
I am trying to get my html website page to have the "Most Beautiful Theorem?" section on the right side. However, I can't figure out how to do that. Right now it is just showing up under all my other headings like normal but I want it on the right side of the page as a separate column. If you could help me that would be great. Thanks!
here's the coding I have now:
<!DOCTYPE html>
<html lang="en">
<!-- Math High home page
McLain-Graning MaKayla, CSIS 140, Fall 2015
-->
<head>
<meta charset="utf-8" />
<title>Math High</title>
<link href="css/MathHighStyles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<img src="images_MathHigh/mhlogo.jpg" alt="Math High"/>
<h2>Leonhard Euler (1707-1783)</h2>
</header>
<section>
<article>
<p>
The greatest mathematician of the eighteenth century,
<strong>Leonhard Euler</strong> was born in Basel, Switzerland. There,
he studied under another giant of mathematics, <strong>Jean
Bernoulli</strong>. In 1731 Euler became a professor of physics
and mathematics at St. Petersburg Academy of Sciences.
Euler was the most prolific mathematician of all time,
publishing over 800 different books and papers. His
influence was felt in physics and astronomy as well.
</p>
</article>
<p>
He is perhaps best known for his research into
mathematical analysis. Euler's work,
Introductio in analysin infinitorum (1748),
remained a standard textbook in the field for
well over a century. For the princess of Anhalt-Dessau he wrote
Lettres a une princesse d'Allemagne (1768-1772),
giving a clear non-technical outline of the main
physical theories of the time.
</p>
<p>
One can hardly write a mathematical equation without
copying Euler. Notations still in use today, such
as e and pi, were introduced
in Euler's writings. Leonhard Euler died in 1783,
leaving behind a legacy perhaps unmatched, and
certainly unsurpassed, in the annals of mathematics.
</p>
</section>
<aside>
<h1>The Most Beautiful Theorem?</h1>
<p>Euler's Equation:</p>
<p>cos(x) + i*sin(x) = e to the power (i*x)</p>
<p>demonstrates the relationship between algebra,
complex analysis, and trigonometry. From this
equation, it's easy to derive the identity:
</p>
<p>e to the power (pi*i) + 1 = 0</p>
<p>which relates the fundamental constants:
0, 1, pi, e, and i in a single beautiful and
elegant statement. A poll of readers
conducted by The Mathematical Intelligencer
magazine named Euler's Identity as the
most beautiful theorem in the history of
mathematics.</p>
<p>Math High: A Site for Educators and Researchers</p>
</aside>
</body>
</html>
Give the h1 element an id or a class name and add a CSS style to make the heading float.
See http://www.w3schools.com/css/css_float.asp
In terms of accessibility, is it OK to have something like:
<html lang="en">
<body>
<h2 lang="fr">Imagine this is in French</h2>
<h2 lang="en">English headline</h2>
<h2 lang="en">English headline</h2>
<h2 lang="fr">Imagine this is in French</h2>
</body>
</html>
Please note this is just a rough and ready example to demonstrate, I don't need HTML validation.
As you can see from the example, I assume that the ideal scenario would be to have the above but without lang definitions for the English headlines since it's given by the overall document. But is there any harm in defining them from an accessibility point of view?
The lang attribute can and should be used to indicate language changes within a document. This allows assistive technology - like the screen readers - to change their enunciation to read the text in an understandable accent.
Your example is ok, but unnecessary because the base language of the document is English, you only need to indicate the changes to other languages (the scope is hierarchical - i.e. it only applies to the element and its children).
<html lang="en">
<body>
<h2 lang="fr">Parlez-vous Francais?</h2>
<h2>English headline</h2>
<h2>English headline</h2>
<h2 lang="de">Sprechen Sie Deutsch?</h2>
</body>
</html>
Here is a W3C reference that supports this usage http://www.w3.org/International/questions/qa-lang-why.en
I understand that it takes time for Google to show rich snippets for a website. But, I want to make sure that I'm marking up my structured data correctly in the mean time. Is the following code okay for a review? Can it be done better?
<main itemscope itemtype="http://schema.org/Review">
<meta itemprop="inLanguage" content="en-CA">
<article itemprop="reviewBody">
<header>
<img itemprop="thumbnailUrl" src="/review/pushmo.jpg" alt="Pushmo">
<h1 itemprop="name"><span itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing"><span itemprop="name">Pushmo</span></span> Review</h1>
<h2 itemprop="headline">This sumo wrestling cat has children to rescue</h2>
<p>Reviewed by <span itemprop="name">A.J. Maciejewski</span><meta itemprop="url" content="http://example.com/profile/crazyaj"> on <time itemprop="datePublished" datetime="2014-09-03T20:33:03-07:00">September 3, 2014</time></p>
<meta itemprop="description" content="Review for Pushmo on 3DS. This sumo wrestling cat has children to rescue. Pushmo proves that Nintendo still has the ability to produce great new properties.">
<meta itemprop="keywords" content="Review,3DS,Pushmo">
</header>
<p>blah blah blah</p>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">8.4</span> <small>out of <meta itemprop="worstRating" content="1"><span itemprop="bestRating">10</span></small>
</div>
</article>
</main>
As a side note, I noticed when I search for "review site:example.com" the rich snippets appear but they don't when I don't use "site:example.com". Does anyone know why this is?
Thanks again for reading. Any help would be greatly appreciated.
Apart from the following points, your use of HTML5, Microdata and schema.org looks good to me.
When the value is a URL, you must use link instead of meta. So it should be
<link itemprop="url" href="http://example.com/profile/crazyaj">
As value for itemReviewed, you might want to use a more specific type than Thing. For Pushmo, it would be SoftwareApplication (the subtype VideoGame will probably be added soon, it’s already proposed and discussed).
You should not use h2 for a subtitle. This was possible with the hgroup element, but as hgroup is no longer part of HTML5, this would now create a wrong document outline. Instead, simply use a div/p for the subtitle.
My class was asked to use HTML5, not CSS, to create this web page.
Question: I have two h2s, I read somewhere that this is legal and two sets of "unordered lists", but they are not lining up. I mean lining right under each other: example
Confusion
aaa
bbb
ccc
Calm
abc
bca
bac
They are lining up cantilever (?). The Calm header & its lists are more to the right. I've researched several sites and have not come up with why this is happening. I appreciate your help and insight.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Serenity</title>
<style type="text/css">
body
{
background-image:url("images/bg-ocean-body.jpg");
background-repeat:no-repeat;
background-size: cover;
}
</style>
<h1 span style="text-align:center; color:green;">Achieving Calm Amid<span style="color:black"> Confusion</h1>
<h2>Confusion</h2>
<ul>
<li>Government Shutdown</li>
<li>"do nothing" congress</li>
<li>bridgegate, sandygate</li>
<li>Putin, Sochi</li>
<h2 span style="color: green; text-align:left;">Calm</h2>
<ul>
<li>wipe away stress</li>
<li>gain mental/emotional balance</li>
<li>anxiety decreases</li>
<li>develop perspective</li>
</ul>
</head>
</html>
You are adding <span> tags in the wrong place. <span> is a separate tag, not an attribute of <h2>.
You are nearly using <span> correctly around confusion, for example, but you are not closing it with </span>.
I believe you're looking to do something like:
<h1><span style="text-align:center; color:green;">Achieving Calm Amid</span><span style="color:black"> Confusion</span></h1>
Also, you need to close your first <ul> tag with </ul>.