Summary for week 2

Hyperlinks

<A HREF=”http.linkedpage.com”>Text to click on goes here</A>

An absolute link is a full URL (used to link to a completely seperate website).

A relative link relates to the page it is included in, used to link to a section of the site you are already on.

The A is the anchor tag. The HREF is the attribute. The title of the link is the second attribute.

You may add further attributes to designate what color the link will change when clicked, etc.

Adding _blank to a hyperlink will cause the link to open in a seperate tab or window, instead of redirecting from the current window.

Images

Links to images are created the same way as a link to a page.

<A HREF=”image.jpg”>Click for image</a>

Jpegs loose some color information when compressed. Best to use for vector images or photos.

Gifs do not lose any information when compressed. Better for images with gradients and continual tones.

Image tag:

<IMG SRC=”image.jpg” ALT=”Text here”>

You may add attributes to the image tag to give images a border, margins, control the dimensions by pixels, etc.

i.e.: <IMG SRC =”image.jpg” ALT=text” BORDER=”2″ WIDTH=”500″ HEIGHT=”337″>

DTD (Stands for two definitions)

1) Document type Definition – Technical machine readable file describing the structure within a document type.

2) Document type Declaration – Declaration which identifies a document as belonging to a specific document type (both type and version) (for example, if the document is written in HTML4.1 vs. HTML5 vs. XHTML 1.1, etc.) Found at the very top of the code, before the HTML tag. Does not reqquire a closing tag.

Strict Doc Type Declaration tells you that the document can only usethe rules of its doc type. It si not compatable with previous versions.

Transitional Doc Type Declaration tells you that the document will allow elements and structure from previous versions to be compatable.

Frameset Doc Type Declaration tells you there is a use of frames within the document.

Aligning Paragraphs

<p></p> Basic paragraph tag, automatically justifies to the left.

You may change the justification by adding an attribute to the paragraph tag.

<p align=”right”> This will cause the paragraph to be right justified. The align=”right” is the attribute.

<p align=”justify”> Makes both sides of the paragraph flush, spreads out words to eliminate uneven edges.

<p align=”center”> Centers all text in the paragraph, both sides of the paragraph as uneven.

<p align=”left”> (same as default of <p>)

Block-level tags: Elements which contain other elements (like a paragrah, heading, table, etc.)

Inline tags: Elements which occur within a line of text. Cannot contain other tags within them (for example, <i>, <IMG>, etc)

Paragraphs are the only block-level tags which cannot contain other block-level tags. (They can contain inline tags). Other block-level tags can contain more block-level tags.

<br /> – Line break. Can stand alone. Including the slash after the br allows it to not need a closing tag.

Non-breaking space: &nbsp; (stops a line of txt from breaking/wrapping[but you must replace all spaces with it to ensure this])

&-marks a special character entity

;-marks end of special character entity

<nobr></nobr> = no break

Quotes (2 types:)

<blockquote></blockquote> quotes text as an entire block. Indents from both sides instead of using quotation marks. Often used for indenting instead of it’s intended purpose of designating quotes.

<q></q> Puts quotation marks around text. IE does not support this tag.

Headings

Give document structure.

<h1> Heading1</h1>(largest heading)

<h2>Heading 2 </h2> (smaller than first heading)

<h3>Heading 3</h3> (smaller than heading 2, etc.)

You can change the apprearance of headings with CSS:

<h1 style=”font family: sans-serif; font-size:125%”> Headings</h1>  Makes text 25% larger than body text, and uses a sans-serif font.

<h2 style=”font family: sans serif; font-size: 125%; color #006″>Structure</h2> Same as H1 but adds a dark blue color to the text.

<h3 style=”font family: sans-serif; font size: 124% background-color: #CCF”>Subject</h3> Same as H1 but there is a light blue background to the text

Preserving Preformatted Text

<pre></pre>

Maintains text exactly as it appears int eh text editor; prevents extra spaces from being folded together, etc. You may still use inline tags within the <pre> tag (like bold and italics, etc).

Web Editors

<a href=”http://komposer.net/”>Kompozer</a&gt;

<a href=”http://www.barebones.com/”>BBEdit</a&gt;

<a href=”http://www.coffeecup.com/software/”>Coffee Cup HTML Editor</a>

<a href=”http://www.microsoft.com/expression/”>Microsoft Expression</a>

<a href=”http://www.panic.com/coda/”>Coda</a&gt;

<a href=”http://www.adobe.com/products/dreamweaver”Deaweaver</a&gt;

Dreamweaver:

F4 key collapses all panels (hit again to bring them back)

Create new custom workspace under the dropdown menu (default is desinger but has other view otpions)

Properties Inspector is the most power panel. HTML and CSS tags. The HTML tab lets you add/edit HTML code as easily as selectingand adding qualities to a document in a word processor. The HTML tab makes chages to a page’s structure. The CSS tab will make universal changes to your site, so be careful that you really know what you are doing when you use it.

Advertisements
This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s