HTML and CSS Basics: Document Structure, Text Editors, Tags, and Image Inclusion - Prof. N, Study notes of Computer Science

Download HTML and CSS Basics: Document Structure, Text Editors, Tags, and Image Inclusion - Prof. N and more Study notes Computer Science in PDF only on Docsity!

Announcements

 Instructor: Nelson Padua-Perez ([email protected])

 Class Web Site:

http://www.cs.umd.edu/class/spring2009/cmsc122/

 No posting of code in the forum

 Check class announcements daily

HTML Basic Skeleton

 An html document has two main parts.  Header – provides information about the document.  Body – contents of the page.  Example: BasicHTMLSkeleton.html

Template

• Let’s validate the above document

TextEdit in Mac

 If you open an html file in TextEdit it will display the rendered HTML  To edit the html you need to change preferences as follows:

 TextEdit  Preferences  Open and Save

 Under “When Opening a File:” select “Ignore rich

text commands in HTML files”

 If you opened the file before changing the preferences you will need to open the file again to see the html

NestedTags/Spaces/Comments

 Nested tags are possible but don’t overlap sets of them. Avoid the following: Message  Browser Processing  Multiple spaces are converted to one space.  John Mary Peter  John Mary Peter  Line returns are ignored.  Comments  Represented by Note: (two sets of double -)  Examples   Comments can not be nested.

Frequently Used Tags

 Emphasis  text here Text usually rendered in italics  text here Text usually rendered in bold  Super/Sub script  text here  text here  Quotations  quote here  Line Breaks 
 Verbatim (text displayed exactly as it appears)  text here  Example: HtmlDoc.html

HTML Editors

 Text Editors  Any text editor (e.g., wordpad, notepad, pico, etc.)  HTML Editors  Utilities designed to write HTML  Examples: CoffeeCup HTML Editor, HTMLjive  Authoring tools  Frontpage  Dreamweaver – Fairly complex but powerful.  NVU – Free and available for (Windows, Linux, Mac) http://www.nvu.com/  Recommended:  Amaya- http://www.w3.org/Amaya/  Komodo Edit - http://www.activestate.com/komodo_edit/

Image Inclusion

 We can include an image using the img tag



 Example: Image.html

 Although the width and height attributes are not

required they are highly recommended. (They

can also be set through CSS)