I am new to HTML (well, more than new) and I try to format the presented text. The following code is presented:
<H1 align="center" face="helvetica">
This is another paragraph.
</H1>
<p>
<font align="center" size="5" face="helvetica" >
This is another paragraph.
</font>
</p>
In the first time, the allign works fine though the face is not. On the other hande, in the second time, the size and the face work ok but align is not. Do I do something work?
In general is there any good *and free) resources on line?
Thanks in advance,
Sun
You need to learn CSS.
Basically, you stop with these presentational attributes, and you add the styling of your site externally (though it can be inline as well, as CSS).
It looks like you are learning HTML from an old and/or bad resource.
Try
HTMLDog
Google: HTML, CSS, and Javascript from the Ground Up
W3C HTML wiki which also has listed a few good resources
<h1 align="center" face="helvetica">
This is another paragraph.
</h1>
<p align="center" >
<font size="5" face="helvetica" >
This is another paragraph.
</font>
</p>
Try that.
It's best you take a look at the basics of CSS, (www.thenewboston.com) I find to be the best source of beginner tutorials.
This is how your code would be layed out IF you were using CSS.
<style>
h1 {font-family:Helvetica; text-align:center;}
p {font-family:Helvetica; font-size:5px; text-align:center;}
</style>
<body>
<h1>This is another paragraph.</h1>
<p>
This is another paragraph.
</p>
</body>
Hope this helps and good luck working with HTML, CSS and JS in the future!
Regards!
Related
I have the following problem: I have set the width of a paragraph, but it doesn't seem to have applied.
<p style="">
<center><img src="img/Arraying.png"></center>
</p>
<p style="max-width:500px;"><font size="+2"><center><b>Arraying: Web & Java Developer.</b></font>
<br>
<i>Hey, I'm Arraying. I'm the web and Java developer for Minevelop. My specialities are small, yet complex Spigot plugins, web development, and plugin configuration.
<br><br>I've been server managing since I was eleven or twelve, and over the years I have gained a lot of experiences.
<br><br>Spigot: https://www.spigotmc.org/members/_wiildanimal_.81436/
<br>Enjin: http://www.enjin.com/profile/9844615
<br>Email: arraying#minevelop.com</i>
</center>
</p>
<p style="">
<br>
<br>
<center><img src="img/DomThePotato.png"></center>
</p>
<p style="max-width:500px;"><font size="+2"><center><b>DomThePotato: Lead Java Developer.</b></font>
<br>
<i>Hello, my name is Dom, aka DomThePotato, and I am the lead Java developer here at Minevelop. I specialise in utility plugins and everything that is not minigames. With over 1 and a half years of experience, I will be able to get any request done! Also experienced file configurer and backend administrator.
<br><br>Spigot: https://www.spigotmc.org/members/domthepotat.38275/
<br>Enjin: http://www.enjin.com/profile/7005362
<br>Email: domthepotato#minevelop.com</i>
</center>
</p>
The first paragraph about Arraying seems to work fine, yet the one about Dom just doesn't want to be 500px wide.
I'm really tired, so if the error is completely stupid please forgive me.
You are using max-width I think you need to just use width:
<p style="width: 500px;"> HTML </p>
The issue is with the way your html is structured. Both tag and tags are inline elements. If you want to make all of the elemnts withing the tag stay in a max-width container, then you should try changing the tag to a tag.
Your code would look like this:
<div style="max-width:500px;"><font size="+2"><center><b>DomThePotato: Lead Java Developer.</b></font>
<br>
<i>Hello, my name is Dom, aka DomThePotato, and I am the lead Java developer here at Minevelop. I specialise in utility plugins and everything that is not minigames. With over 1 and a half years of experience, I will be able to get any request done! Also experienced file configurer and backend administrator.
<br><br>Spigot: https://www.spigotmc.org/members/domthepotat.38275/
<br>Enjin: http://www.enjin.com/profile/7005362
<br>Email: domthepotato#minevelop.com</i>
</center>
As #Hans Strausl mentioned, your HTML tags aren't nested properly (I believe you want the <center> tag to wrap the <font> tag, but you can always reverse them again if I've misinterpreted). Also, changing the <p> tags to <div>s seemed to achieve what you're looking for.
Here's a fiddle. https://jsfiddle.net/wzazrn5p/
I know that when i come to HTML email i have to use the Table Layouts. This is what i have done here Unfortunately when i make some tests with this online tool to my Hotmail and gmail, the layout is not exactly the same. In the email the difference from my HTML code is that it does not get the same H2 font style and family in the text <h2>"Responda correctamente a las preguntas y gane un viaje a Roma!"</h2> and the second image is separated from the one on the top and the one on the bottom. What's the best solution to figure it out the issue? How can i achieve the same layout?
Thanks for your time
Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets. That said you can include a few embedded CSS statements (such as link color) as long as you're ok with them not rendering in some email clients.
Taste this post: http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters
Try to add style="display:block;" to all your img tags and instead of an h2 use a font tag with a style attribute:
<font style="color:#202020; font-family: 'Georgia',serif; font-size: 14px; line-height: 20px;">
<b>Some title</b>
</font>
<br>
I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp
This is a very strange problem I've been struggling with for a few days. At first I thought it was related to something in our application, but I've stripped it down to the simplest html page and it's still happening. Basically anytime I add a tag to a page the html after it gets rendered as it's value. <textarea></textarea> fixes the issue, but I don't understand why. I'm at a loss here, it has to be something really simple that I just don't know.
In the following example the paragraph tags show up as the value of the textarea.
I'm using IE8.
<html>
<head>
<title>About</title>
</head>
<body>
<textarea/>
<p align="center">
test
</p>
<p align="left">
test
</p>
</body>
<textarea> is not a self-closing tag. It should be re-written as <textarea></textarea>
I am assuming you trying to have the paragraphs appear after the textarea. Try not using the textarea tag as an empty tag.
<textarea></textarea>
<p align="center">
test
</p>
<p align="left">
test
</p>
I believe Textarea requires an opening and closing tag - at least that's how it's presented here:
textarea at w3schools
I had this problem too. I realized I had forgotten to give a name attribute to my textarea like I did all my other inputs so that the PHP script could collect it all and send it to an SQL table.
Once I gave it a name, it magically stopped chopping off the closing tag and making it a self closing tag which got ignored by the browser until it bumped into the closing tag of a textarea with a name attribute, swallowing up everything in between. Hopefully this sheds more light on the issue too, as putting text in between the closing tags wasn't an ideal option for me.
Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello World</p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello World</p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
Proper indentation
Resisting the temptation to add too much markup i.e. keep the markup simple
Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
Avoid deprecated tags e.g. <font>
Choosing generic class names e.g. mainHeader instead of largeRedHeader
Use classes for repeating elements and ids for elements that appear once
Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.