HTML Curriculum and Course Material

Short Syllabus:

An introductory course in the creation of web sites.  The course is 
taught in the UNIX and Windows environments.  Basic UNIX commands are covered. 
All standard HTML tags are taught including hrefs, lists, tables and forms.
Cascading Style Sheets (CSS) is also taught. An emphasis is placed on 
understanding HTML and CSS code. 

Client side and server side scripting is taught using the 
following languages: Javascript, PHP, MySQL. Students create two  projects: 
one is a static web site incorporating all the knowledge they acquire in the 
first half of the course, the other is a dynamic web site which uses one of 
the scripting methods covered in the course. In this second project the student
is expected to learn on his own in greater depth and to demonstrate the 
scripting method of his choosing.

It is also possible for a student to do a CSS project, provided that it is
sufficiently complex.

Attendance is required and constitutes a significant part of the grade.
Periodic class room assignments are also part of the final grade.

Homework 2005
Detailed Lecture Summary: 1. Basic Linux Environment and Commands login, terminal, emacs, ls, cd, mkdir, chmod, rm                             Some basic UNIX commands.
                            A basic emacs tutorial. 2. HTML Introduction Material: * HTML tags are used to mark-up HTML elements * HTML tags are surrounded by the two characters < and > * The surrounding characters are called angle brackets * HTML tags normally come in pairs like <b> and </b> * The first tag in a pair is the start tag, the second tag is the end tag * The text between the start and end tags is the element content * HTML tags are not case sensitive, <b> means the same as <B> <html>,<head>,<title> Tag Attributes Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">. Attributes always come in name/value pairs like this: name="value". Attributes are always added to the start tag of an HTML element. <body TEXT="#000044" link="#000099" vlink="#990000" alink="#00ff00" background="picture.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" > 3. HTML Text Tags Material to Cover: Physical: <b>,<i>,<u>,<p>,<br />,<center>,<h1..6>,<!-- -->, <tt>, <strike>, <big>, <small> <hr align=left size=4 width=50%><nobr></nobr> <font size="+2"|"-2"|2 color="#005500" face="ariel,times new roman ..."> Logical: <div align="left"> <em><strong><abbr><address><blockquote> <code> <samp><dfn> <cite> 4. HTML Special Text Cases and HTML lists Material to Cover: Text Description Entity Name Entity Number non-breaking space &nbsp; &#160; < less than &lt; &#60; > greater than &gt; &#62; & ampersand &amp; &#38; " quotation mark &quot; &#34; ' apostrophe &#39; # pound &pound; &#163; copyright &copy; &#169; ® registered trademark &reg; &#174; × multiplication &times; &#215; ÷ division &divide; &#247; <sup>,<sub>, <pre>, <xmp> LISTS: <ul type="circle"|"square"> <ol type="I"|"a"|"A"|"i"> <li> <dl> def. list <dt> def. term <dd> - definition description <acronym title=>               A Complete Alphabetical Issue of HTML 4.0 Elements
              Math Symbols in HTML
              A List of Colors and their RGB values http://www.htmlhelp.com/reference/html40/alist.html 5. HTML Hyperlinks and Images Material to Cover: <body link="" alink="" vlink=""> <a href="page"></a> <a name="label"> <a href="page#label"></a> <img src="" height="" width="" alt="" border="" align="">                               (more info on Hyperlinks and Images) <EMBED SRC="sound.mid" AUTOSTART=TRUE LOOP=TRUE WIDTH=0 HEIGHT=0></EMBED> 6. HTML Tables Materials to Cover: <table border="" cellspacing="" cellpadding="" width="" height=""> <table bgcolor="" background=""> <caption> <thead> <tfoot> <tr>,<td align="" valign="" colspan="" rowspan="" width="" height="" > Nested Tables             An example of a table.
          Another example with cells. 
 7. Cascading Style Sheets ( CSS )
        Material to Cover:
	selector {property:value; [property:value ... ]}
	Examples:  H1 {font-size:24pt; color:blue;}
	           p {font-family:'Courier'; font-size:12pt; color:red; margin-left:0.5in;}
	External Styles, Embedded Styles,  Inline Styles
	The Cascade effect
	Style Classes: P.rightaligned {text-align:right}  
	               <p class="rightaligned">Right aligned paragraph</p>
        DIV and Span used with classes
	Shortcuts: H1 {font: 24pt italic bold 'Times Roman' 'Courier'}
	           H1, H2, H3 {font-family:'Times Roman' ; font-weight:bold;}
        My Sample html  page .
        The css  page  it uses.
	Chapter 2 of the book  Cascading Style Sheets, designing for the Web .
        A Hebrew PostScript list of CSS attributes and values by Yedidia Klein.
	A Hebrew PowerPoint slide show also by Yedidia Klein.
        Some CSS commands   Newer Version those commands 
        Box Model Demo and explanation
        CSS Documentation
 7.1 CSS Positioning
        Positioning
 7.2 CSS Float
        Floating
 7.3 CSS Children
        Children
 7.4 CSS Pseudo Classes
        Pseudo Classes
8. GIMP Introduction Material to Cover: Computer Graphics Types, Web Graphics New File Menu, Tool Panel, Save As Menu             Class notes. 9. GIMP Simple Graphics Material to Cover: Layers, Selecting, Graphics Tricks- Drawing Shapes 10. GIMP Functional Graphics Material to Cover: Background Tiles, Text, Buttons, Logos 11. GIMP Photo Touch Ups Material to Cover: Image->Colors Menu- Hue, Saturation, Color, Contrast, Thresholds 12.            Meta Tags. 13. HTML Frames <frameset cols="130, *" border="0">, <frame src="left.html" noresize scrolling="no" name="leftside"> <frame>,<a href="" target="rightside">, open new page: target="_Top", <noframes> <iframe src="" width="400" height=80%> hidden text </iframe> - used in regular html page Nested Frames 
14. Client side scripting - Java script
        An Example.

15. HTML Forms.

16. PHP and MYSQL.
       Example of a trivial message board.

17. Final Project. Choose from the projects listed here.

Midterm Project. Use HTML and CSS to complete one of the projects listed here.

© Nachum Danzig 2003