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
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.
In the interest of DRY, I have 3 page types in my SPA: (1)Layout, (2)Index, and (3)XXXX (view).
Layout has the body related tags, Index the nav system, and XXXX the relative content. Here is the code:
Layout.ejs:
<!DOCTYPE>
<html>
<head>
<title>Index Page</title>
<% include ../includes/styles%>
<script type="text/javascript" src="/vendor/jquery/dist/jquery.min.js" ></script>
</head>
<body>
</body>
<% include ../includes/scripts%>
</html>
Index.ejs:
<% include ../includes/layout %>
<h1>This is where the nav bar goes</h1>
<div data-ng-view></div>
View pages not important for this problem.
What I noticed is that my sccript tags from layout are above the body's children DOMs, not at all what I wanted.
What I wanted is:
----- body
--- content
----- scripts
What must I do in layout.ejs to keep the script tags at the bottom of the final html page?
ejs-locals does not support Express 4.x.
I opted for creating a custom engine.
I haven't found any notion of partial views in Play Framework similar to Ruby on Rails's partial views. For example, if there is layouts/main.scala.html layout:
#(title: String)(content: => Html)(implicit flash: Flash)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
</head>
<body>
<section class="content">#content</section>
</body>
</html>
And there is also layouts/_footer.scala.html "partial", how do I include _footer into main?
Is there anything similar in Play?
I think RoR's partial views are overly complex. The thing to remember about Play templates, as that they are essentially just functions that can be called directly from Scala code. And also, Play templates are essentially Scala code. That means, Play templates can be called from other Play templates. So, just create another template called footer.scala.html, eg:
<footer>
Powered by Play Framework
</footer>
And then call it from your main template, as you would invoke any other Scala function:
#(title: String)(content: => Html)(implicit flash: Flash)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
</head>
<body>
<section class="content">#content</section>
#footer()
</body>
</html>
Couldn't be easier.
Not sure if you're using Play 1.x or 2, but in Play 1, there are template tags - See http://www.playframework.com/documentation/1.2.7/templates#inheritance
I think what #Vidya wants to say is that you can do something like this:
In main.scala.html we add a variable named footer of type Html with a default value of empty:
#(title: String, footer: Html = Html(""))(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
</head>
<body>
#content
#footer
</body>
</html>
And then in a page like index.scala.html we can do something like:
#(message: String)
#footer = {
<footer>the footer!</footer>
}
#main("Welcome", footer) {
the content!
}
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
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.