More HTML Tags, CSS, and Good Code

ITP 104

Review from Last Lecture

Basic HTML using and form

Using Filezilla public_html▪ 755 permission

Have a directory name itp104▪ 755 permission

classpage.html inside the itp104 directory

HTML Tags and Styles Review

Tags Lowercase First is name of the tag▪ If there are attributes, place a space after the

name▪ Have = sign encased in “”▪ i.e attribute=“value”▪ i.e. width=“90%”

Mostly has start/end tag▪ Some cases only have start with a /> at the

end.

Styles

Styles Generally used to control/modify the

appreance of text and objects The syntax is:▪ property: value;▪ i.e. width: 200px;

Can place styles in most html tags

We’ll get into more styles later on

Good code

Always close your tags in the case of non-closing tags like img, hr and br give

them internal closes. ▪ for non-closing tags make sure you give them internal closes,

so you type <br /> not <br> i.e. if you open a <b> tag, make sure at some point

you have closed it with <b> ...

Don't violate the "nest order" of tags. If you open up four tags, make sure you close them in

the opposite order you opened them. i.e. if put a b then i then u ... then you would need to

first close /u then /i then /b

Good Code

Required attributes: While most attributes are optional on html tags, some are

not. For instance, on the anchor (a) tag, you MUST have at

least one attribute (generally href). On the img tag, there is not an image without at least a

src attribute. Etc.

Recommended attributes: Some tags have attributes that should always be scoped

out for good practice. The most prominent example of this is the img tag, which

should always have its width, height and alt attributes specified.

Good Code

Attribute values in quotes: when you set attributes of tags (such as

bgcolor="blue" or src="dent.jpg"), it is safest to ALWAYS surround the value for the attribute in quotes.

While there are some attribute values that do not require quotes, it is safest to just put them all inside the marks.

In html you can use single or double quotes

We will learn other "good practices" as the semester goes on.

IMG tag

The img tag displays an image file on a web page. It's core properties are: src html attribute: ▪ the filename or path + filename for the image (such as src="mypic.gif")

alt html attribute: ▪ the "alternate" text for the image

width style property: ▪ how wide (in pixels) the image should be displayed

height style property: ▪ how tall (in pixels) the image should be displayed

border-width style property: ▪ the width (in pixels) of the border around the image, with "0" being "no

border”

So typical image tag might be <img src="dent.jpg" alt="Picture of Mr. Dent" style="width:75px; height:60px; border-width: 0px" />

Styles

HTML/CSS Styles have many components to them, including stylesheets, which we will get into later. For now, think of styles as formatting

attributes that you can "turn on" for an object or section of the page.

Styles

text properties such as its color, font face, size, etc., as well as to special formatting such as transforming text to ALL CAPS or setting the leading or line spacing for a block are margin and spacing properties of blocks background color and image properties

of blocks other, specialized properties such as the

bullet styles of lists

Styles

For now we are only going to explore setting style properties inside an html tag.

Later in the semester we will get into stylesheets and named styles, and redefing style properties of an html object type.

Styles

For formatting sections of text, you will generally put style blocks into paragraph (p) or span (span) tag.

Paragraph tags are used to defined a paragraph of text, span tags are used to format any amount of text from one letter or word to multiple paragraphs.

The main difference for now is the paragraphs space themselves out, and that you can use the align attribute of a p tag to make the paragraph right or center aligned.

Styles

To define one or more styles you open up a "style" attribute of an html tag, then set the property to one or more style:value settings.

For instance, <span style="color:red"> would start a block where all of the text is red.

If you want to include more than one setting at a time, you separate them with semi-colons.

So <span style="color:purple; font-size:24pt"> would start a block of text that is purple and 24 point in size.

Styles

Some common style properties you will use a lot are: font-size

▪ typically in measurements such as 18pt or 3in color

▪ text color background-color

▪ of an object, from the body to a paragraph to a span tag, ▪ named colors like green or hex ones like #4499aa

text-decoration▪ underline or none -- often used to REMOVE lines from hyperlinks/a

line-height▪ height of a line, plain number like 2 is line spacing, or measurements such as

18pt text-alignment

▪ right, left, center background-image

▪ format uses a url object, such as background-image:url(mypic.gif)

Styles

Some basic tips about assigning style properties: Whereas in html we set values with

equal signs, like border="0", in styles you assign values with colons, such as font-size:24pt

Whereas in html we "quote" attribute values, in styles you (usually) do not put quotes around the "value" for an attribute.

Styles

Some basic tips about assigning style properties: When you close the tag that has the style settings, all of the

styles on that tag are cancelled. So for instance, &tl;span style="color:blue;font-weight:bold"> create blue and bold text... and closing </span> turns off both the blue text switch and the boldness.

You can nest style commands. ▪ So, for instance, maybe you start your page with a <span style="font-

family:Verdana"> so that all text on the page is in the Verdana font. ▪ But then later you start a <span style="background-color:yellow:> to

create a short block where the background color behind the text is yellow.

▪ The first instruction (font-family) is still active when the background-color is on. And when you just close </span> that turns off the most RECENT block (the background-color). It will take a second </span> to turn off that first instruction (font-family).

Styles

There are a LOT of style properties you can play with.

Some effect text, some will only effect images, and some will effect objects we have not gotten to yet.

To start out, take a look a the "Styles Resource" page and try playing around with setting some of them through span tag. http://www.javascriptkit.com/dhtmltutors/

cssreference.shtml http://www.w3schools.com/cssref/default.asp