Advanced Web Design. Zac Van Note.

Size: px

Start display at page:

Download "Advanced Web Design. Zac Van Note. www.design-link.org"

Damian Barber
8 years ago
Views:

1 Advanced Web Design Zac Van Note

2 COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day

3 Recommended Text: HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Fifth Edition by Elizabeth Castro, Peachpit Press, ISBN: Find an extensive list of links at:

by Elizabeth Castro, Peachpit Press, ISBN: 0321130073

4 Introductions

5 Basic HTML Review

6 Elements, Attributes, Values

7 HTML <html> Everything (usually) goes in between these tags. </html>

8 HEAD <head> Stuff like scripts, title and meta tags go in here. </head>

9 TITLE <title> Title of your page goes in here </title>

10 BODY <body> The visible parts of your page go in here. </body>

11 P, BR <p> Text goes in here.<br> Put in the br tag to break lines of text to another line. </p>

12 FONT <p> <font size= 2 face= futura,arial,sans serif color= purple > <b>bold text</b>, <i>italic text</i>, <strong>strong text, and <em>strong/emphasized text</em></strong> </font> </p>

13 HR <p>text goes here, and there will be a horizontal rule beneath it.</p> <hr> <p>text goes here, and there will be a horizontal rule above it.</p>

14 IMG <img src= filename.gif /> <img src= />

15 A (links) <a href= doclink.htm >Text link goes here.</a> <a href= doclink.htm > <img src= linkimg.gif /> </a> A (anchors) <a name= top >Text is optional here.</a> <a href= #top >Text or picture here will link to the top anchor.</a>

16 A ( links) <a href= >Send an </a>

17 A (targeting) <a href= target= _blank > Go to design-link now! </a>

18 BODY... more attributes <body bgcolor= #FFFFFF background= bgimage.gif leftmargin= x topmargin= y marginwidth= x marginheight= y text= blue link= pink vlink= purple alink= red onload= {script goes here} > The visible parts of your page go in here. </body>

19 DOCTYPEs HTML, XHTML strict, transitional, frameset, standard and quirks modes <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > <html> etc. </html> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN xhtml1-transitional.dtd > <html xmlns= >etc. </html>

dtd > <html> etc. </html> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.

20 META TAGS <meta name= keywords content= specific words, separated by commas that describe the content on the page/site /> <meta name= description content= a short description of the content on the page/site /> <meta name= author content= list the author of the page /> <meta name= generator content= program that created the page /> <meta name= copyright content= year copyright holder />

on the page/site /> <meta name= author content= list the author of the page /> <meta name=

21 TABLES <table width= 400 bgcolor= yellow align= center > <tr> <td align= center valign= middle >Text or image 1A</td> <td>text or image 2A</td> </tr> <tr align= center valign= middle > <td>text or image 1B</td><td>Text or image 2B</td> </tr> </table>

22 CSS -- Creating Styles

23 Selecting Elements by Name selector{property:value;} h1{color:red;}

24 Selecting Elements by Context context element{property:value;} h1 em{color:red;}

25 Selecting Elements by Class element.class{property:value;} em.very{color:red;}

26 Selecting Elements by ID element#id{property:value;} div#article{color:red;}

27 CSS -- Applying Styles

28 CSS -- Internal Style Sheet <head> <style type= text/css > img{color:red; border:solid; } </style> </head>

29 CSS -- Create an External Style Sheet img { color:red; border:solid; } p { font:arial; color:blue; } base.css /* This will make all of your paragraph text arial and blue */

30 CSS -- Linking to an External Style Sheet <head> <link rel= styleheet type= text/css href= base.css > </head>

31 CSS -- Applying Styles Locally <img src="palau250.jpg" width="250" height="163" style= color:red; border:solid align= left >

32 CSS -- Text Formatting h1, h2 {font-family: "Arial Black", "Helvetica Bold", sans-serif;font-weight: normal} h1 {font-size: 20px } h2 {font-size: 14px} p {font-family: "Verdana", "Helvetica", sans-serif; font-size:12px; lineheight:150%}. emph {font-style: italic; font-weight:bold}

33 CSS -- Positioning DIV tags Dreamweaver Layers (layout -- 2float.html) SitePoint.com AListApart.com

34 Sound, Video & Animation Background Sound (IE only) <bgsound src= dakota.mp3 loop= 2 > Quicktime Real Media Windows Media Player Flash Shockwave

35 Frames

36 Forms

37 Scripting/Programming Languages Javascript Java JSP

38 Scripting/Programming Languages CGI -- Perl ASP ASP.net PHP ColdFusion

39 Search Engine/Directory Submissions SearchEngineWatch.com Google / AOL / Netscape Inktomi / MSN / HotBot Yahoo dmoz teoma / ask jeeves alltheweb / fast / lycos

41 Pay-per-click Search Engine Advertising Overture Google AdWords

42 Search Engine Optimization SearchEngineWatch.com Overture.com MarketLeap.com

43 Using Dreamweaver

44 Aspects of Web Design Saturday, February 28, Be there to learn about... XHTML pop-up windows rollovers advanced stylesheet techniques how to upload and maintain Web pages Work on your own Web project with one-on-one assistance and more!

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages