Is it necessary to define <head> and <body> with "loadHTMLString" in UIWebView?
When using loadHTMLString:baseURL: in UIWebView, Those two HTML comes same result.
1.
<html> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/> <meta name=\"viewport\" content=\"width=device-width, user-scalable=yes\"> </head> <body> <div class=label1-con3> <font color=#ff0000 size=3> <strong>Test</strong></font> </div> </body> </html>
2.
<div class=label1-con3> <font color=#ff0000 size=3> <strong>Test</strong></font> </div>
no it is not necessary at all, it's just user's requirement that how they wanna show their web template. So it's not necessary for all to use this kind of stuff it's just requirement that changes per senario.
No, its not necessary to add these tags.
You can add string of your own and it will work fine
Related
I like to indent <html>, <head>, <body> and the child elements (not all descendants) of <body> at the same level, at the very start of each line. Like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
I also don't want any empty lines between <html>, <head>, and <body> tags, which is what happens by default when I run the selection formatting operation. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
How can I configure Visual Studio Code to do this automatically?
Currently I have to manually undo the extra indentations for every new HTML file. After removing them and adding one child element to <body>, it does behave like I want. But it's still quite irritating to have to do it every time.
I have the following simple HTML page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.ux3"
data-sap-ui-theme= "sap_bluecrystal">
</script>
<script>
sap.ui.localResources("zvhr_dashboard");
var view = sap.ui.view({id:"idDashboard1", viewName:"zvhr_dashboard.Dashboard", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<header class="header">Page Header</header>
<div id="content" class="content">
<div id="totalHoursChart" class="chartContainer"></div>
<div id="totalCostChart" class="chartContainer"></div>
<div id="totalCountChart" class="chartContainer"></div>
</div>
</body>
The containers totalHoursChart, totalCostsChart, totalCountChart are for line charts. Whenever the template is rendered because of the lines
var view = sap.ui.view({
id:"idDashboard1",
viewName:"zvhr_dashboard.Dashboard",
type:sap.ui.core.mvc.ViewType.JS
});
view.placeAt("content");
There is only one div created in content div and line charts that I draw and place at respective chart containers get overridden. I am unable to figure out how to do this nested views.
I have been unable to find one simple example showing how to do this.
Create a separate div to place your view in:
<div id="content" class="content">
<div id="dashboardContainer"></div>
<div id="totalHoursChart" class="chartContainer"></div>
<div id="totalCostChart" class="chartContainer"></div>
<div id="totalCountChart" class="chartContainer"></div>
</div>
view.placeAt("dashboardContainer");
Well I was able to achieve what I needed and I guess it precisely does fulfill my requirement. I referred to this and understood that the whole page can have a layout and I can place multiple views inside that layout.
The link I provided is of VerticalLayout but there are lot many options to pick from. Using it I was able to place three views(line charts in my case one below the other). The only thing I didnt like was that I had to give fixed width in pixels for every view that I placed inside layout, because when I gave width in percentages the views started shrinking after the page rendering was done.
So to follow the suggestion of #Qualiture I did it in one single div.
I'm learning to use html. I want the words 'hello welcome to my blog' to appear in courier font. But I want to set it up as a 'class'.
I'm on blogger and I can't seem to get the code working to make this text appear. I'm sure I typed out everything right but for some reason blogspot won't apply the courier font.
However it can read things like h1/h2/Bold/Italic but only when this is directly written before class not in brackets on its own.
<head>
<style>
.font (font-family:courier;)
</ style>
</head>
<body>
<div class="font">
Hello welcome to my blog </div>
</ body>
In CSS syntax you need to wrap properties and values within braces {} not in parenthesis ()
Also you need to close the tags carefully like this </body> Don't use space inside like this </ body>
So you code should look like this-
<head>
<style>
.font {
font-family:courier;
}
</style>
</head>
<body>
<div class="font">
Hello welcome to my blog
</div>
</body>
replace () with {} on the style
<html>
<head>
<STYLE type=" text/css ">
.font{font-family :"Courier New", Courier, monospace}
</style>
</head>
<body>
<div class="font">
`Hello welcome to my blog</div> </body>
</html>
demo for this
I'm having problems with my HTML and jQuery Code. I was wondering if someone could tell me what's wrong with it. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<!-- Stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<!-- Color Scheme -->
<!-- Beige: #eee8cd; Green: #008b8b; Blue: #203471; -->
</head>
<body>
<div id="MainPage" style="background:#008b8b;color:#203471" data-role="page">
<div style="background:#008b8b;color:#203471" data-role="content">
<p style="background:#008b8b;color:#203471"><img alt="" src="Images/Header.png" style="width:100%" /></p>
<p style="background:#008b8b;color:#eee8cd">The content for the main page is here</p>
<a style="background:#eee8cd;color:#203471" href="AboutUs.htm" data-role="button">About Us</a>
<a style="background:#eee8cd;color:#203471" href="ContactUs.htm" data-role="button">Contact Us</a>
</div>
<div style="background:#203471;color:#eee8cd" data-role="footer">
<h4>Main Page Footer</h4>
</div>
</div>
</body>
</html>
There are two problems that I am having problems figuring out:
1) When I put this code on my web server and navigate to it via my iPhone it is fine when the phone is held in the vertical position. When the phone is moved into the horizontal position though, the buttons seem to be displayed over the text and are not workable. Any ideas on how to resolve this?
2) I tried to create a custom stylesheet.css and link to it via the class attribute of the various tags. This would not work so I had to put the inline code (for example:)
<div style="background:#203471;color:#eee8cd"
Can someone show me how to create a stylesheet.css with these attributes and "tag" them in the HTML so that this works?
Thanks So Much.
Well, you've got a link to jQuery where your link to your CSS should go. Check out www.codecademy.com !
I've separated inline css to its own and seems to render fine.
Play with this fiddle here http://jsfiddle.net/kVqWJ/
You can include css files in your html file many ways:
1)
<style type="text/css">
//your style here
</style>
2)
<link rel="stylesheet" type="text/css" href="css url here">
A quick googling will help. The Mozilla developer network is a great place to start.
I am very new for iPhone web developer.
I started with reading Safari Web Content Guide.
Then I found that we can hide user interface for example address bar of safari.
Therefore, I followed the instructor. The result is not what I expected.
The address bar still show.
I put this meta tag in html file.
and this this my code
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello iPhone Web App</title>
<style type="text/css">
form{
width:100%;
}
#searchBox{
font-size:25px;
width:50%;
}
#send{
font-size:25px;
}
#containerTop{
text-align:center;
width:100%;
}
</style>
</head>
<body>
<form method="get">
<div id="containerTop">
<input type="text" id="searchBox" name="search" autocapitalize="off" size="15" maxlength="128" />
<input type="submit" id="send" value="ค้นหา" />
</div>
</form>
</body>
I am looking forward to your reply, thanks
"apple-mobile-web-app-capable" only works it's magic when you launch your WebApp after having saved a link to the Home Screen, and launch your WebApp from the new icon.
For regular web pages you need to scroll the Address Bar out of view using:
<script type="text/javascript">
window.addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0,0); }, 100); }, true);
</script>
The Navigation Bar at the bottom of the screen is permanent for regular web pages, but is removable for WebApps (saved to Home Screen) using the "apple-mobile-web-app-capable" meta tag.