ITP 104

 Basic HTML using and form  Using Filezilla  public_html ▪ 755 permission  Have a directory name itp104 ▪ 755 permission  classpage.html inside the itp104 directory

 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  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

 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 not  i.e. if you open a tag, make sure at some point you have closed it with...  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

 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.

 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.

 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

 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.

 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

 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.

 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.

 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, 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 would start a block of text that is purple and 24 point in size.

 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)

 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.

 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 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 so that all text on the page is in the Verdana font. ▪ But then later you start a 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 that turns off the most RECENT block (the background-color). It will take a second to turn off that first instruction (font-family).

 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.  tml tml 