 |
 |
 |
 |
 |
|
February's Finger Lakes MUG meeting saw a healthy attendance of 15, including one of our Education Apple reps, Alan Voorhees. The loose conversation that started and closed the meeting centered around networking and Apple's place in our local school districts. The demo that consumed the center chunk of time follows this intro. \
Thank you so much to Earl, Leslie and Bethany for being our gracious host. Thanks to all in attendance for a great meeting. ********************************************************************** Basic HTML QuickStartAt our February meeting, I gave a rocky demo on the basics of HTML. It was rocky partly because I had not written any HTML code for years. Unlike most of today's professional web programmers, I use a graphical WYSIWYG authoring application called DreamWeaver, which does most of the HTML for me. I Just don't have the patience to type line after line of code to perform a simple operation I can do graphically in DreamWeaver. The demo was also rocky because 'It worked in rehearsal' was my cry of the day. I had decided to do all my html sample pages in OS X's TextEdit. It's an app I use all the time for most of my writing tasks and I like it's reponsiveness and efficiency, but it likes HTML too much and was viewing my code as actual web pages, so once i had closed a file, i had to fight to edit it. So if you're in love with writing html, use SimpleText or some other text editor that isn't smart enough to display your pages in web format. That said, i thought I'd throw out some background that I didn't have time to mess with during the demo. I think that some of the terms that I had to use and have already used in this document might be over the head of some novices to web programming. Techie's love acronyms and there's no place they're more prevalent than the Internet. So here are a few terms you'll see everywhere. HTML -- HyperText Markup Language - yes, it's a programming language. Web browsers read HTML and convert it from its messy command-driven form to something we can understand. WYSIWYG -- What You See Is What You Get - this is the opposite of what we did in the demo yesterday (in fact during the demo I couldn't see what I was getting most of the time). When you work with a web authoring application that allows you to preview what the page will look like in your audience's web browser that is WYSIWIG. These authoring tools were especially helpful to me when I worked as a graphic designer and was frustrated by the limitations the web imposed on my creativity. When you move and manipulate text and graphics in a WYSIWYG editor, the software writes the HTML code for you and creates a page that (if you choose) you can open in a text editor (not TextEdit though) and further screw around with. Apparently, most web professionals despise these tools spending hours writing their own HTML code and therefore they have no lives. URL -- Uniform Resource Locator - this is the term you know simply as a web address. This is a plain english address that special internet computers called Domain Name Servers recognize use to guide your web browser to a physical numbered address (such as 24.94.149.221) of the computer that your desired web page actually resides on. The ones we are most familiar with look something like: http://www.apple.com The term WYSIWYG is not so important. I include it only because we were shouting about 'Wizzywig' or 'Wuzzywig' during the meeting and I thought a clarification was needed. However, HTML and URL are so much a part of web programming that without an understanding of them the job of learning HTML is much more difficult. TAGS The most important concept to learn in HTML is that of tags. Tags are the instructions that your browser reads and interprets when presenting a web page to you. For most tags there are beginning notations and ending notations. This programming practice is true of most programming languages. Coders pair up tags to separate instructions. The minimum tag combination you can have for a web page is and . The tag will appear at the very beginning of the page to signal that the following is a web page. signals the end of the web page. Of course a page consisting of only and would do very little. The next tag sequence we talked about was the <head> </head> pair. Between the header tags are certain initial instructions. The most common thing found there is the <TITLE> & </TITLE> pair which surrounds any title you would like to see at the top (in the title bar of your web browser) of your page. <head>
<TITLE>This is our Page Title</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1> <-- This line will be in Heading 1 format
<P>Welcome to our little web page. <-- <P>marks the start of a paragraph
This is a paragraph!</P><-- <P>marks the start of a paragraph
<P>And this is the second paragraph.</P>
</body>
So our little sample page would look like <html>
<head>
<TITLE>This is our Page Title</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1> <-- This line will be in Heading 1 format
<P>Welcome to our little web page. <-- <P>marks the start of a paragraph
This is a paragraph!</P><-- </P>marks the end of a paragraph
<P>And this is the second paragraph.</P>
</body>
</html>
Now that's not a very interesting web page, and not very functional. Graphics and some interactivity are missing. The most basic interactive element in a web page is a link. Here we'll make a link to another website using the URL we discussed earlier. We'll use this tag combination: <A HREF="http://www.apple.com">Apple</A> . This will highlight the word Apple in our web page and make it clickable. Clicking on 'Apple' will take you to Apple.com. <html>
<head>
<TITLE>This is our Page Title</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to our little web page.
This is a paragraph!</P>
<P><A HREF="http://www.apple.com">Apple</A></P> <-- our link
</body>
</html>
The tags we've covered so far are sufficient to create entire websites. They may be simple and lackluster but they would be complete web pages. You can learn more advance techniques at the site I used to prepare this demo at http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html Once you're comfortable with these basics you can add more advanced features like graphics and java scripts. Those techniques are beyond the scope of our basics demo. The last technique we'll discuss is one you can use at once to start writing code. At the top of your browser you should find several pull down menues (File, Edit, etc.). Under the 'View' menu there should be a 'Source' option. By selecting the view source option you will be able to see the source code for whatever web page you are currently viewing. This is a great source of knowledge for beginners. By looking at the code required to display certain effects you can copy and paste this 'stolen' code into your own pages to enrich them. Go forth and create. |
||||||
|
|
||||||
|
|
||||||