(HTML) Can't use specific symbols - html

So, I'm starting to create a homepage for my homework, but I've stumbled upon a problem.
Basically, what I need my homepage to display is this kind of text: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online Role-Playing Game), vai vienkārši MMORPG (angļu saīsinājums) ir spēles žanrs, kas sastāv no spēlēšanas internetā ar citiem spēlētājiem radītā vai īstā virtuālā pasaulē."
And this is what I'm getting: "DaudzspÄ“lÄ“tÄju tieÅ¡saites lomu spÄ“le (Massively Multiplayer Online Role-Playing Game), vai vienkÄrÅ¡i MMORPG (angļu saÄ«sinÄjums) ir spÄ“les žanrs, kas sastÄv no spÄ“lÄ“Å¡anas internetÄ ar citiem spÄ“lÄ“tÄjiem radÄ«tÄ vai Ä«stÄ virtuÄlÄ pasaulÄ“."
This is what I currently have, and thank you for the help:
<!DOCTYPE html>
<html>
<head>
<title> Sākums </title>
<link rel="SHORTCUT ICON" href="./bildes/favicon.ico"/>
<script src="./js/jquery2.1.4.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link href = "./css/bootstrap.min.css" rel = "stylesheet">
<link rel="stylesheet" type="text/css" href="./stils.css">
</head>
<body>
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container">
<li> MMO/MMORPG </li>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active">
<li>Sākums</li>
<li>Anketa</li>
<li>Galerija</li>
<li>Kontakti</li>
</li>
</ul>
</div>
</div>
</div>
<div class = "container">
<div class = "jumbotron">
<center> <h1> Kas ir MMO/MMORPG </h1>
<p>Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online Role-Playing Game), vai vienkārši MMORPG (angļu saīsinājums) ir spēles žanrs, kas sastāv no spēlēšanas internetā ar citiem spēlētājiem radītā vai īstā virtuālā pasaulē. MMORPG ir izplatītākais MMO (massive multiplayer online) tipa spēļu paveids. Vēl eksistē MMOFPS (MMO first person shooter) un MMORTS (MMO real time strategy), bet šāda veida spēlēm ir lielākas prasības pret tīklu un servera resursiem, tāpēc tās ir mazāk izplatītas. Tās arī parādījās vēlāk. MMORPG no citiem tīkla RPG atšķiras ar to, ka serveri parasti uztur spēles izstrādātājkompānija, serverī vienlaikus var spēlēt ļoti liels spēlētāju skaits (vairāki tūkstoši) un par spēles spēlēšanu, ar retiem izņēmumiem, ir jāmaksā mēneša maksa. Tāpat kā citās RPG spēlēs, te viens no mērķiem ir līmeņa sišana. MMORPG ir iespējami uzdevumi (angļu: quest), taču tie nevar izmainīt spēles pasauli, atšķirībā no kvestiem parastajos RPG. </p>
</div>

You're missing a charset. Ideally this should be sent by the server in the Content-Type HTTP header, but you should also have it in the HTML itself:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
(to be added in your <head>)

Related

How to use two ContentTypes in one JSP(web app on Spring MVC): text/html && application/json

I'm developing a simple crud app without frontend, but I want to have a very simple visual for myself and the viewers.
Now I have created a simple jsp-file with a set of tags 'a'.
It was not difficult to complete all GET requests. However, POST requests give an error "HTTP Status 415 – Unsupported Media Type".
This is my .jsp
<%# page contentType="text/html;charset=UTF-8" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<style>
</style>
</head>
<body>
<div class="admin div">
<h2>Options for Admin</h2>
<li>Create User</li>
<li>Update User</li>
<li>Delete User</li>
<li>Get User by ID(for example 100003</li>
<li>Get User by Email(for example - david_D#gmail.com)</li>
<li>All users</li>
<br>
<li>Create restaurant</li>
<li>Update restaurant</li>
<li>Delete restaurant</li>
<br>
<li>
<form method="post" action="/rest/admin/restaurants/100005/meals">
<div class="add">
<dt>Description</dt>
<input type="text" name="description" value="Some Meal"><br> </input>
</div>
<div class="add">
<dt>Price</dt>
<input type="number" name="price" value="50"><br> </input>
</div>
<button type="submit">SAVE</button>
</form>
</li>
<br>
<li>Update meal</li>
<li>Delete meal</li>
<li>Get actual meals (for example - by restaurant with ID = 100005)</li>
<li>Get meal by ID (for example - by restaurant with ID = 100005, meal ID = 100010)</li>
</div>
</body>
</html>
When i try to send POST-request I get 'HTTP Status 415 – Unsupported Media Type'.
In network:
The response must have a 'json/application' content type, but the request has 'text/html'.
It doesn't work just to add another contentType in jsp-file.
Please, share your experiance.
Try to make your #PostMapping controller method mapping looks like this:
#PostMapping(value = "/yourUrl", consumes =
{MediaType.APPLICATION_JSON_VALUE, MediaType.TEXT_HTML_VALUE}, produces =
{MediaType.APPLICATION_JSON_VALUE, MediaType.TEXT_HTML_VALUE})

Data-toggle won't work for the following code

Can anyone please tell me why my tabs aren't working?
it's happening the same with the navigation bar dropdown button.
<div class="col-12">
<h2>Corporate Leadership</h2>
<ul class = "nav nav-tabs">
<li class = "nav-item">
<a class = "nav-link active" href = "#peter" role = "tab" data-toggle = "tab">Peter Pan, CEO</a>
</li>
<li class = "nav-item">
<a class = "nav-link active" href = "#witherspoon" role = "tab" data-toggle = "tab">Dhanasekaran Witherspoon, CFO</a>
</li>
<li class = "nav-item">
<a class = "nav-link active" href = "#tang" role = "tab" data-toggle = "tab">Agumbe Tang, Chief Taste Officer</a>
</li>
<li class = "nav-item">
<a class = "nav-link active" href = "#alberto" role = "tab" data-toggle = "tab">Alberto Somayya, Executive Chef</a>
</li>
</ul>
<div class = "tab-content">
<div role = "tabpanel" class = "tab-pane fade show active" id = "peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
</div>
<div role = "tabpanel" class = "tab-pane fade" id = "witherspoon">
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
</div>
<div role = "tabpanel" class = "tab-pane fade" id = "tang">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p>
</div>
<div role = "tabpanel" class = "tab-pane fade" id = "alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
</div>
</div>
</div>
please ignore the line below stackoverflow wasn't allowing me to post the question...
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJdddddddddddddddddddddddddddoooooooooooooooooooooooooooooooooooooooooooooooooooooooowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwddddddddddddddddddddddddddddddddddddd
What and how exactly is "not working"?
In react you have to use "className" attribute intstead of "class".

How to chain contains and not-contains in xpath?

How do I chain contains and "not-contains" in xpath?
I want to make sure a button has the class add-to-cart-button and doesn't have the class btn--disabled.
How can I do this? Here is what I have so far:
button[contains(#class, "add-to-cart-button")]
EDIT: In my project I have a list of products. Now I want to select the first Article-Container on the page whose button doesn't have the class btn--disabled
Here is the HTML
<main>
<div class="grid shop-list__results offer-tiles">
<div class="offer-tiles__item offer-tiles--odd offer-tiles--top-border">
<article itemscope="itemscope" itemtype="http://schema.org/Product" class="offer-tile">
<div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="offer-tile__content">
<ul class="offer-tile__actions">
<li class="offer-tile__action offer-tile__action--add-to-cart">
<button type="button" class="btn add-to-cart-button btn--disabled">Cart</button></li>
</ul>
</div>
</article>
</div>
<div class="offer-tiles__item offer-tiles--even offer-tiles--top-border">
<article itemscope="itemscope" itemtype="http://schema.org/Product" class="offer-tile">
<div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="offer-tile__content">
<ul class="offer-tile__actions">
<li class="offer-tile__action offer-tile__action--add-to-cart">
<button type="button" class="btn add-to-cart-button">Cart</button></li>
</ul>
</div>
</article>
</div>
And here is my xpath selector so far(this is obviously wrong):
//main//article[contains(descendant::button/#class, "add-to-cart-button")][not(descendant::button/#disabled)]
Try this:
button[contains(#class, "add-to-cart-button") and not(contains(#class, "btn-disabled"))]
where:
and is an operator between two statements. Example //div[x and y]
or //div[x or y]
not() is for opposite of statement in the function. Example //div[x and not(y)]
EDIT:
As per HTML block you have provided, you can use this xPath:
//button[#class = 'btn add-to-cart-button']
or, if there many add-to-cart-button, you can use something like this:
//div[#class = 'offer-tiles__item offer-tiles--even offer-tiles--top-border']/article[#itemtype = 'http://schema.org/Product']/div[#itemtype = 'http://schema.org/Offer']//button[#class = 'btn add-to-cart-button']

How to make responsive page like this?

Pretty straight forward.
When I zoom in on my page, the divs and such don't expand to fit the document but on the original website i'm imitating it does. How does their code differ? What code are they using to do the trick.
Mine: http://socialvender.com/danielbrown
Theirs: http://gunbi.net/
Just hold CTRL and Zoom In.
Can someone help me out?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id = "container" />
<div class = "banner" />
<h4>Gundi!</h4>
<div id = "divider-p">
<div class = "seperators"><span></span></div>
<div id = "networks">
<!-- <div id = "facebook"><img src = "images/fb.svg" width = "24"></div>
<div id = "twitter"><img src = "images/twitter.svg" width = "24"></div>
<div id = "tumblr"><img src = "images/tumblr.svg" width = "24"></div> -->
</div>
</div>
</div>
<div id = "navigation">
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
Ranking
</a>
</li>
<li>
<a>
Support
</a>
</li>
<li>
<a>
Media
</a>
</li>
<li>
<a>
Store
</a>
</li>
<li>
<a>
Forum
</a>
</li>
</ul>
</div>
<div id = "players-online">
<div class = "amount">
<span>0 people are playing | server online</span>
</div>
</div>
</div>
<div class = "row">
<div class = "col-8 content">
<section id = "register">
<div class = "game">
<button id = "game-start" class = "col-2">Game Start</button>
<!-- <br><button id = "download" class = "blue">Download</button>
<button id = "register" class = "blue">Register</button> -->
</div>
</section>
</div>
</div>
</body>
</html>
Full Code Here: https://jsfiddle.net/yayyjL14/
I see two problems with your site:
One, the navbar is not responsive because you haven't put it in a responsive container, as there is no fluid measurement (i.e.: percentages) for the width. I would recommend learning Bootstrap, a CSS/Javascript framework. Just the grid system alone (built on CSS) , would enable you to save a considerable amount of time building responsive containers that allow you to dynamically size your content depending on the size of the browser. You can download Bootstrap at: http://getbootstrap.com/ and learn the grid from: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Another problem I see is that there is no width assigned to the button, and thus it is prone to changing width. I would set the width to a px, just so it does not resize, and stays a certain width, as there as no point on a mobile device to have a button that is too small (generally stays the same size on both desktop and mobile, although you may alter this via media queries).

Google Translate, translate="no"

I have a Help.htm file for my App which translates reasonably well with Google Translate. I want to mark the menu items as Do Not Translate but none of the HTML tags that i found and tried would work. For the following i used the Google Translate website - it translated where i did not expect! as the following example shows.
Email us at <span class="notranslate">sales at mydomain dot com</span>
Écrivez-nous à <span class="notranslate">ventes à mydomain dot com</span>
I found a couple similar no translate tags but same results. What am I missing here?
Here is a "real life" example, from my help file. I copied this into the Google translate, chose French and clicked on Translate ...
Then from the Options Menu choose one of:
<ul>
<li><span class="notranslate">Help</span></li>
<li><span class="notranslate">Browse WWW</span></li>
<li><span class="notranslate">Load HTML Text</span></li>
<li><span class="notranslate">Get Connection State</span></li>
</ul>
Here is the :( translation to French ...
Ensuite, dans le menu Options, choisissez l'une des:
<ul>
     <li> <span class = "notranslate"> Aide </ span> </ li>
     <li> <span class = "notranslate"> Parcourir WWW </ span> </ li>
     <li> <span class = "de notranslate"> Load HTML texte </ span> </ li>
     <li> <span class = "de notranslate"> Obtenez Connection État </ span> </ li>
Control K not working consistently for me. Nope, my keyboard is messing up. Time for a new one. Hope you can fix for me :)
Here is mine with <span translate="no">, followed by actual examples from 3 professional HTML websites; none of these work for me ...
Then from the Options Menu choose one of:
<ul>
<li><span translate="no">Help</span> </li>
<li><span translate="no">Browse WWW</span></li>
<li><span translate="no">Load HTML Text</span></li>
<li><span translate="no">Get Connection State</span></li>
</ul>
<Puis dans le menu Options, choisissez l'une des:
<ul>
     <li> <span translate = "no"> Aide </ span> </ li>
     <li> <span traduire = "no"> Parcourir WWW </ span> </ li>
     <li> <span translate = "no"> Load HTML texte </ span> </ li>
     <li> <span translate = "no"> Obtenez Connection État </ span> </ li>
</ ul>
From the official Google Webmaster Central Blog ...
Email us at <span class="notranslate">sales at mydomain dot com</span>
Écrivez-nous à <span class = "notranslate"> ventes à mydomain dot com </span>
From w3schools.com ...
Don't translate this!
This can be translated to any language.
translate = "no"> Ne pas traduire cette!
Cela peut être traduit en aucune langue.
From w3.org ...
Using HTML's translate attribute
Utilisation de HTML translate attribut
I thought at first the above worked but translate in English == translate in French :(
<h1>Using HTML's <span class="kw" translate="no">They Cheated</span> attribute</h1>
<h1> Utilisation de HTML <le span class = "kw" translate = "no"> qu'ils ont triché </ span> attribut </ h1>
I did eventually determine what is the actual problem. It is that the markup will only be recognised as a signal not to translate the text if it is a page of an HTML website that you put through Google Translate. The translator interface at https://translate.google.com doesn't recognise that the pasted text should be interpreted as HTML code.