PDA

View Full Version : Embarrassingly basic HTML question


Mrcottonsocks
02-08-2011, 11:35 AM
Hi,

Just started my HTML coding life with dreamweaver cs5 and have already stumbled upon a few things that I just cannot work out. All I want to know is...

How do you format line by line? In design view when I add a heading eg. <h1>mysite</h1> and then try to write text on the line directly underneath it copies the heading formatting to the next line. Same if I center align some text and then use a <br> to try to write new text on the very next line. Is it the <p> element that is causing this? Because removing it doesn't seem to help.

Easy stuff i know but appreciate any help given with this.

Thanks

Corrosive
02-08-2011, 12:04 PM
Hi and welcome to the forum.

You need to understand what header and paragraph tags actually are. I wrote this a coupld of years ago about tags;


These tags basically tell a browser and, more importantly, Search Engines how the text information in your website is arranged in order of importance. h1 stands for 'heading 1', h2 is 'heading 2' and so on. The p Tag stands for 'paragraph'.
A common mistake by rookie designers is to manipulate these Tags in a way that displays well to a human but makes no sense at all to a Search Engine. For example you may want a few words of text within a paragraph to be in bold or italics. Don't be tempted to just use a heading Tag you have not used previously and style that. It may look fine but a Search Engine will take those few words to be a heading.
Also be aware that these tags have browser 'defaults' such as margin or padding. You may need to change these defaults using CSS to get your desired layout.


The upshot being that you put your headers in header tags and your paragraphs in paragraph tags and that will break up your styling and text.

domedia
02-08-2011, 02:19 PM
And since it's a few years ago that was written it's important to specify that search engines are but one of many systems that will access your data and try to make sense of it. Browsers, plugins, screen readers, gadgets, and gods knows what. It will make you data accessible.

Use HTML to mark up your content, then use CSS to make it look pretty.

Mrcottonsocks
02-08-2011, 03:55 PM
Thanks, Can I ask how you would change those default HTML paddings? so it doesn't leave a big gap underneath headings? Theres nothing in page properties for this, do I need to create a new CSS rule?

Corrosive
02-08-2011, 04:59 PM
Thanks, Can I ask how you would change those default HTML paddings? so it doesn't leave a big gap underneath headings? Theres nothing in page properties for this, do I need to create a new CSS rule?

Yes, in fact you can use a 'reset' that gets rid of most of the defaults so you can style from scratch; http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Just paste it at the top of your stylesheet and then continue beneath it to over ride what you need to. Welcome to web design 101 my friend :)

Mrcottonsocks
02-08-2011, 09:17 PM
now there's alot of time saved.
thank you

jmichae3
02-10-2011, 03:02 AM
you use css. I think it's either margin-bottom:0px; or padding-bottom:0px; there is also padding-top and margin-top to be dealt with.

<style type="text/css">
h1 {
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}


0 by itself is not recommended. things usually work properly with a dimension appended.
at least that is what I've read in specs.

Corrosive
02-10-2011, 07:00 AM
you use css. I think it's either margin-bottom:0px; or padding-bottom:0px; there is also padding-top and margin-top to be dealt with.

<style type="text/css">
h1 {
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}


0 by itself is not recommended. things usually work properly with a dimension appended.
at least that is what I've read in specs.

0 means 0 whether it is px, ems, %. Also you should encourage the use of CSS shorthands where possible.

So the code is

h1 {margin: 0;}