lecture one
UPDATED April 14, 2016
agenda
- Introductions
- Course information & administration
- Overview of the WWW (chapter 1)
- Wetting up your webspace
- Your first web page (chapter 2 - start)
- Homework
- readings
introductions
- instructor: Lynda Williams
- email: lwilliams108@my.bcit.ca
- web site: http://lynda.bcitwebdev.com/ & http://my.bcit.ca course shell & D2L
- Student intros in pairs
- a bit about your background
- what is your interest in the subject?
- one unrelated thing about you (hobby, talent, news, etc.)
about the course
- objectives:
- provide an overview of web development and design
- impart skills in the use of HTML, CSS, interface design, introductory scripting and advanced mark-up techniques
- provide resources and suggestions to go further
- format:
- some theory, mostly practical, hands on
- in class exercises (no marks)
- 5 homework exercises (marked as best 5 out of possible 6), 2 assignments, 1 midterm, 1 major project, 1 final exam
- readings:
- see weekly textbook assigned readings on readings page
- assignments:
- homework handed in throughout course (4% each for total of 20%)
- two assignments - as defined in assignments (10% & 10%)
- one major project - original web site (25%)
- see the assignments page for details and due dates
- midterm & final exam
- multiple choice, matching, fill-in-blanks plus short answers.
what you won't learn
- how to be a web "master"
- advanced graphic design
- database integration
- advanced CSS techniques
- multimedia production and integration (video, sound, dynamic graphics)
- Java, or other web programming languages
what you will learn
- how to construct and manage a basic web page/site
- web and internet terminology
- how to mark-up pages by hand using HTML5
- some basic interface design and usability principles
- an introduction to cascading style sheets (CSS) and web scripting concepts
- a solid foundation upon which to base future web development studies
Introduction to the Internet and the World Wide Web (Chap 1)
- PPT presentation on Chapter 1
student account setup
Each student will get personal webspace. This space is exclusively yours, with your own username and password. You will need to use an File Transfer Protocol (FTP) client to move your files between the server and your local work station.
- You will be provided with:
- username - a code for the term and part of your name (e.g. 51smit )
- directory name - set to be same as your username for convenience (e.g. http://students.bcitwebdev.com/62smit)
- password - provided by instructor, ask instructor to change it
use ftp to connect to your account
- Launch FileZilla from your Start Menu (choose All Programs and locate FileZilla in listing).
- Select File > Site Manager
- Click on New Site in the bottom left corner of the dialogue box. The New Site will appear in the window above; rename it COMP 1850 or mysite or something similar
- Host: ftp.bcitwebdev.com
- Port: 21
- Logon Type: Normal
- User: [your_username] - i.e., the one you just created
- Password: [your_password]
- Account: leave blank
- Click Connect (bottom)
getting started with hypertext markup language (HTML)
- a system for describing documents: a set of codes which "mark up" an unformatted piece of text telling the "reader" (web browser) how to display the information
- set of codes, commonly referred to as "tags", that tell the browser what to do with a particular piece of information
- most tags as container tags (
e.g. <strong></strong>
), like boxes, in which you place content - tags may use attributes, which in turn have values contained in quotations:
<tag
attribute="value">
<tag
attribute1="value1" attribute2="value2" attribute3="value3">
basic HTML document
HANDS-ON PRACTICE 2.1 through 2.6
Web pages must follow a particular structure. In order to be valid they must include the following document tags:
some text formatting tags
- Block-element Tags: (automatic line breaks)
-
<p></p>
- Paragraph -
<h1...6></h1...6>
- Heading
-
- Inline Tags: (no automatic line breaks)
-
<b></b>
- Bold -
<i></i>
- Italicize
-
- Empty tags:
-
<br>
- Line break -
<hr>
- Horizontal Rule
-
[OPTIONAL] add your "home page" to the course members list in myBCIT
- Login to myBCIT.
- Click the My Courses tab.
- Click View your myBCIT course homepages.
- Click on the Intro to Web Dev and Design link.
- Locate and click on the Members link in the left hand navigation menu.
- Find your name and click to add your home page.
- In the Title field, enter something like "My homepage" (without the quotes).
- In the URL field, enter http://students.bcitwebdev.com/[your_directory_name].
- Click Submit.
[OPTIONAL] make it snazzy
All HTML elements have a default style – ugly. To make things look better, we can apply styles. We'll talk about the mechanics in the weeks to come, but here's how you can add some pizzazz immediately:
- Add the
style
attribute to virtually any element on your page:
<h1 style="value">This is a heading</h1>
- In the place of
value
, try one of the following:-
color: red;
(or pick any of the 140 color names
standard names listed at W3C Schools.
http://www.w3schools.com/html/html_colornames.asp
-
background-color: yellow;
-
border-size: 10px;
-
font-size: 58px;
-
text-alignment: center;
-
text-decoration: overline;
-
padding: 30px;
-
review resources
Interactive
Visit website W3C Schools HTML and CSS and scroll down to locate the exercise illustrated on the right. Experiment with different colors. Note the syntax of attribute="value".
Videos
homework exercise
Build your homework01.html page on your local machine, using a text editor, and upload all required files to your bcitwebdev.com account.(Note, only one file is required.)
Include the following:
- Information about you, why you're taking this class, what you hope to learn.
- Proper use of HEAD and BODY
- Examples of paragraphs, headings tags.
- At least two examples of formatting using inline tags like i or b. [Optional: use a style attribute].
- Something you learned today in class or from readings.
- Submit your work via the D2L dropbox for HW 1. To do this, you will need a file to upload. Place the URL for your work in a text file. It's nice if you also paste the URL into the "comments" field for me, but minimum requirement is that the URL be in the text file. (Note that while no additional info is needed for this first homework, it is sometimes expected that you will provide some sort of explanation or other info along with your URL, so keep an eye out for this in other submissions.)
Homework is due before the start of the week two class. For this first submission, only, the instructor will help out in class at week 2 and accept work submitted in that class as on time.