{"id":118,"date":"2015-01-20T11:48:48","date_gmt":"2015-01-20T18:48:48","guid":{"rendered":"https:\/\/rmu.andrewyames.com\/?page_id=118"},"modified":"2019-07-30T09:16:33","modified_gmt":"2019-07-30T13:16:33","slug":"week-2-links-images-and-css-basics","status":"publish","type":"page","link":"https:\/\/rmu.andrewyames.com\/?page_id=118","title":{"rendered":"Week 2: Links, Images and CSS Basics"},"content":{"rendered":"

Links<\/h1>\n

Linking to internal files, external sites and email addresses all use the a tag and its href attribute. Linking to an external site must always use an absolute address,
\nfor example:\u00a0<a href=\u201dhttp:\/\/google.com\u201d><\/span>google<\/a><\/span><\/p>\n

Linking to an email address is similar, but the mailto: property is added,
\nfor example:\u00a0<a href=\u201dmailto:ames@rmu.edu\u201d><\/span>Andrew Ames<\/a><\/span><\/p>\n

Linking to internal files require a relative address and close attention to file management must be paid. For example to link to another file my HTML would look like this
\n<a href=\u201dsomeotherfile.html\u201d><\/span>some other file on my site<\/a><\/span>\u00a0and require that the files being linked be in the same folder.<\/p>\n

Images<\/h1>\n

Linking to images is similar to linking to files, they can be linked absolutely or relatively, however, they use the img tag and the src, width, height and alt attributes. For example a photo linked realativly would look like this:\u00a0<img src=\u201dyourphoto.jpg\u201d height=\u201d100\u2033 width=\u201d100\u2033 alt=\u201dthis is a photo of me\u201d\/><\/span>\u00a0note that the img tag does not have a closing tag.<\/p>\n

\u00a0Document<\/strong> types and Character sets<\/strong><\/h1>\n

As there are now 5 versions of HTML, you want to set your document type so browsers know what version you are using. We will be using HTML 5 in the class so each of your documents should now start with :
\n<!doctype html><\/span>\u00a0This comes directly before the <html> tag<\/p>\n

It is also important to note, web pages can be done in a number of languages, so a character set should be set as well. We will be using the western standard UTF-8. This is set using a meta tag inside the head.
\n<head>
\n<meta charset=\u201dUTF-8\u2033><\/span>
\n<title> page title <\/title>
\n<\/head><\/p>\n

CSS basics<\/h1>\n

To make your HTML look good we need Cascading Style Sheets, CSS. With CSS we tell our HTML tags how we would like them to look using rules. CSS rules are made up of Selectors and at least one Declaration. Declarations are made up of one property and its values.<\/p>\n

\"\"<\/p>\n

A Selector can be any HTML element. For example if you wish to style your Paragraph <p><\/p> you\u2019d simply start with\u00a0p<\/strong><\/span>\u00a0then place your declarations between curly brackets { }<\/span><\/strong>.<\/p>\n

Declarations define how things look through various properties like font, color, width, margin, boarder, etc. So to continue our example, if we wanted to style our paragraph by making the font arial, 12point and grey that is double spaced our rule would look like this:<\/p>\n

p {<\/span>font-family:Arial; font-size:12pt; color:#666666; line-height:24pt;}<\/span><\/p>\n

In-class<\/strong>: Continue work on your homepage and complete the following:<\/p>\n