Embed Size (px)
DESCRIPTION
Reference: 3 Schools A good reference: We will use HTML-5 in this course. – Therefore, be sure to use a reference for HTML-5 (as opposed to HTML-4). W3Schools also has references for JS and for CSS.
Citation preview
Review of HTML and CSS
A (very) brief review of some key fundamentals to be aware of in IT-238
Learning Objectives
By the end of this lecture, you should be able to:
– Recall key basic HTML and CSS techniques and standards– Explain what programming conventions are and why it is important to
follow them– Define ‘comments’ and know how to create comments in HTML– Appreciate the need to use the ‘id’ attribute– Appreciate the need to organize your page into ‘div’ sections
Reference: 3 Schools
• A good reference: http://www.w3schools.com/• We will use HTML-5 in this course.
– Therefore, be sure to use a reference for HTML-5 (as opposed to HTML-4).
• W3Schools also has references for JS and for CSS.
Commenting Code• In HTML and JS, a comment is text written in your source code that is ignored by the web browser. It is a
great way for you to make notes to yourself and to other members of your programming team (either now or in the future).
• Do NOT underestimate the importance of comments!– While you are in the process of writing your code, the purpose of a given statement may be very clear and obvious to
you.– However, to other programmers – and even to yourself in the future, this “obvious” code can quickly be a source of
frustration and confusion. • Why did I create that variable?• This function seems superfluous – why is it there? • Why did I program this section in this particular way?
• Comments in HTML are written a little differently than comments in JS.
Commenting Code in HTML• Comments in HTML language are placed between <!-- and a corresponding -->• EVERYTHING between those two tags will be completely ignored by the web browser. • Example:
<!DOCTYPE html><html><!-- This page demonstrates how to invoke a JS function via a button in a form. It demonstrates how a function is invoked using ‘onclick’.--><head><meta charset="UTF-8"> <!–- In HTML-5, the 'utf-8' can be in either upper or lower case --><title>Explicitly invoking a JS function</title></head>
In the code above, the comments, which I’ve placed in red, will be completely ignored by the web browser when it parses your page.
Programming Conventions– A programming convention is a series of programming ‘conventions’ that are required by a software
team/manager/company, etc. – It is simply a way of trying to make a group of people code in a consistent manner. – Many programmers develop their own personal conventions even when not working on a team. If you have
a convention that you strongly believe in, I do not mind if it differs from mine. – Therefore, if you have a convention that differs from mine and would like to use it, I am fine with it. I only ask
that you try to use it consistently throughout the course. That being said, as new programmers, your sense of what makes a useful convention will evolve. So, I don’t mind if you end up making some changes. However, as the whole key of a programming convention is to make your code look consistent, try not to make changes too frequently!
– Your task for now: I WANT you to start using some conventions. For now, begin with the ones I use below. If you choose different ones, that’s okay with me, but just comment your code so that I know that you have given thought to the idea of a programming convention.
Some examples of conventions that I use:•I name all form elements with a prefix. For example, I name all text fields with a ‘txt’ prefix (txtFirstName, txtLastName, txtEmail, etc). I name all select boxes with a ‘sel’ prefix (e.g. selBirthMonth, selYearBorn), I name all radio buttons with a ‘rad’ prefix (e.g. radYesNo, radSurveyQuestion, etc). •One important detail: I absolutely do NOT want to see upper-case letters anywhere in your file names! The reason is that web servers (and most programming languages) are case-sensitive. So if you start mixing and matching case in your file names, you have recipe for all kinds of bugs and problems down the road. •I name file names (e.g. web page files, external CSS files, images, etc) in all lower case, and separate words with underscores. For example: favorite_sports_teams.htm, intro_to_html.htm, cessna_172_pic.jpg, my_styles.css, etc)
Can I See Your ID?As you advance in your CSS and JS (and other) skills, you will quickly come to appreciate the need for adding the ID attribute to many sections and elements of your pages.
What exactly is an ID? An ID is a way to identify either a specific tag on your page, or a section of your page. So far, you have probably already used IDs to name your div sections. (If you have not given your ‘div’ sections names yet, then please note that from now on, you MUST do so!) However, an ID can, and frequently should be applied to numerous other tags as well.
Why use them? The reason for using the ID attribute, is that it will be used to do things such as:1. Access various tags/sections for purposes of scripting languages such as JavaScript, Ajax and others2. Style your code with CSS3. Used as an anchor to hyperlink directly to that location on a web page4. Etc
IDs must be unique!! Do not forget that every ID on a page must be unique! You should never have two (or more) elements on a single page with the same ID .
NEW: For students who have taken IT-130 with me, please note the following change: Use IDs when naming form elements: Some of you may be accustomed to naming form elements with the ‘name’ attribute. There is a subtle distinction between them which will be discussed at a later point. For the time being, every form element should have an ‘id’.
<input type="text" id="txtPhoneNumber"><select id="selYearBorn">
‘div’ sections
You will quickly come to realize that organizing your page into multiple sections using the ‘div’ tag is very important. The reason is that all kinds of dynamic HTML features such as roll-overs, showing/hiding sections, animations, placing sections in a specific part of the page, etc, etc, etc will be applied to blocks of content at a time.
For example, suppose you have a block of 3 paragraphs text that you want to display when a user clicks on a ‘+’ sign and hide when they click on a ‘-’ sign. You will need to apply a tag around that block, to which you will apply the appropriate JavaScript show/hide commands. The most common way (by far) to organize this block of text so that you can apply your JavaScript to it, is to wrap the block inside a ‘div’ section.
Example: french_indian_war_divs.htm
And don’t forget to provide an ‘id’ attribute for every div section!
