1 / 17

More HTML Tags, CSS, and Good Code

ITP 104 . More HTML Tags, CSS, and Good Code. 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

esme
Download Presentation

More HTML Tags, CSS, and Good Code

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ITP 104 More HTML Tags, CSS, and Good Code

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

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

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

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

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

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

  8. 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 <imgsrc="dent.jpg" alt="Picture of Mr. Dent" style="width:75px; height:60px; border-width: 0px" />

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

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

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

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

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

  14. 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)

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

  16. 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).

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

More Related