Starting from now you will have to be very AUTONOMOUS in your work. This means that you must work at home to develop your web page. It is nearly impossible to finish the website IN class work only.
-------------------------------------
Tables:
http://www.yourhtmlsource.com/tables/(first look at “Basic Tables” then “Advanced Tables”, etc) You will learn to add cells, center them, put a background color or image in each cell, combine cells, etc etc.
---------------------------
Lists
There are MANY kinds of lists in HTML: for example, Ordered lists (1., 2., 3., …), Unordered lists, and Defined lists. You must have at least ONE in your website.
!! IMPORTANT MESSAGE !!The most important thing to remember is WHERE your files are saved and what the EXACT ADDRESS of a website is so that the computer can find the pathway to the file.
Your website will have a minimum of three pages. Each page is a different BlocNotes file (remember to record with .htm) Then, you will link the files to each other.
Links and images are the most popular things on Web pages. They are easy to add (just two basic HTML tags) and they bring excitement to your plain text pages. Here you can learn about the a (anchor) tag and the img (image) tag.
Some things to remember:
· The closing tag is required. (slash A)
· You can link either images or text
· Make sure to check your links so that they don't go bad
Internal Links (internal) Internal links are links to another part of the same page. There are two parts of an internal link:
· the named portion of the page(a name=”top of page”)
· the link itself (a href=”#top of page”)
External Link: This is any link to another file, so this could be to another page in your website (local) or to another website (global).
You should have all three types (internal, local and global) in your website.
-----------------------------------------------
HOMEWORK:
Continue to work individually and independently on your website.All of these pages should help you find the information you need to insert the technically required elements of your website (and much more!!) Remember, sometimes it is just as easy to copy and paste some CODE then to type it all out.
Class 7: several important reminders and information.
There is probably too much information here for your attention span, but try to forge through to find not only a summary of last week’s information, but the info you will need for this week. Read this page “diagonally” if you need to.
REMEMBER to include all of the technical requirements
Your web site MUST contain these technical details: ALL WRITTEN IN HTML in simple text (no editing software. For CSS or Java, talk to me first.) Do NOT host your site online (it’a question of copyright).
- different fonts (la police du texte)
- different sizes of lettering,
- different colors
- tables,
- at least one list (ordered or numbered)
- images
- varied layout of text and images (not exactly the same thing on each page)
- internal links (anchors to places inside the same page)
- external links (to a new page AND to a new URL)
- at least 3 distinct web pages (in English with original content) linked together
- at least one other function (or productive TAG).
- navigational tools and logic
Keep your pages simple, so that everything works. Test it on several different computers before handing it in on the last day of the semester (3rd/ 4thMay : NO late websites accepted).
In addition, the content is worth 50%. So, you must write at least 50-100 words per page of original content. Copying is tempting, but DON’T DO IT.Also, a list of simple words is also not considered “written text”.
As a note : behind the scenes of HTML
What do the acronyms HTML and HTTP stand for? Who created these and when? (this was from the first part of the class… the history of the internet)
Behind every website is a programming language in a code which gives instructions to the computer. You can see this with any webpage. Go to the top menu bar and open ‘Display’ (affichage), then -->’source’. This will open a window with the CODE. On some pages this is complicated, and the programmers have used special software (do you know any?) but in fact the basic HTML code is quite easy and accessible to anyone, with a little patience and rigour.
NECESSARY vocabulary to learn: What are the following? (if you don’t know already, look these words up at home!)
Pointed brackets
Slash (forward slash)
Back-slash
Colon Equal sign
Quotation marks
Number sign
CODE (as in the code YOU write)
Attribute
Space
Bold
Italic
Font
Align (right, left or center)
Desktop
Color code
Tutorial
Tag
Reviewing and continuing HTML
Here are some things we did in class last week:
Paragraphs: (when you want to start a new section or « aller à la ligne »)
Colors in HTML are represented by a series of numbers (or by the basic names for colors such as Red, Yellow, etc, but you have more variety with the color codes).
Color for Text. The text is called FONT (or “basefont” to apply to the entire webpage). For simple instructions, follow this tutorial: http://www.echoecho.com/htmltext.htm. Make sure to click on the READ MORE button at the bottom of the page.
Background color is also interesting to add. This added to your code inside the TAG as what we call an “attribute”. So, write inside the BODY tag the added attribute of bgcolor (all of this is INSIDE the pointed brackets).
body bgcolor=”color code”
NEW HTML:
Inserting images in general
Images add interest and excitement to your Web pages, and they are fairly easy to add. You can do this by clicking on the right mouse and saving the image in your own folder.
There are numerous file formats for computer graphics, though the most common for websites are GIF and JPG.
- The standard format that can display within a web page is GIF or Graphics Interchange Format. The GIF compresses the picture information (reduces the file size) and translates it to binary code that can be sent over the Internet. GIF compression is most effective on graphics that have contiguous areas of solid color, and compression is even greater when the color is continuous in the horizontal direction. GIF images have the feature of defining a color to be "transparent" so images can appear to have non-rectangular boundaries. They can also be saved in the "interlaced" format so that when you see a web page, the images start to appear soon and "dissolve" to the final image.
- The other file format used on the web is JPEG (named after the Joint Photographic Expert Group that designed this format). JPEG compression is very effective for photographic images where the colors can vary spatially over short distances. JPEG offers some dramatic compression in filesize, sometimes by a factor of 10 (e.g. a 1500 kb file reduced to 150 kb), which may be at a trade-off for some image quality. JPEG images do not have the ability to have transparency.
If you want to use an image for the background, use the “background” attribute in the BODY tag. Remember to slide the pointed bracket over to make room for the attribute INSIDE the tag.
body background="filename.gif" (here, pointed brackets should be present but are not due to the blog format)
For any image, you must give the EXACT location of the file and the precise name, e.g. body background="C:\Documents and Settings\MmeBays\Bureau\ HTML page/gray_fabric.gif"
Hint: keep ALL of your images in the folder you began called YOURNAME_WEBSITE. This will allow any computer to find them easily.
You can insert images that are already on the web by giving the URL of the image. Don’t forget that to read these, the computer has to be connected to the internet.
img src="http://www.echoecho.com/rainbow.gif"
To find this address, right click to find the Properties of the image and copy the Emplacement.
There are three other attributes that you can include width, height, and alt. The width and height attributes tell the browser how big the image is. This allows the Web page to render more quickly, as the browser can allocate space for the image and then move on to the rest of the page while the image downloads.
ALT is a description that will replace the image when it is not there. You can write img alt=”horses running” scr=”horses.gif”
Remember, you must have an image ready to insert before you begin this chapter.
TABLES are a good way to put images on your page. First, insert the table, then insert the image as the content of the table. You can even make the border of the table invisible…
Last week’s group projects were a success! I hope you learned something and had fun.
HOMEWORK & ASSIGNMENTS TO HAND IN THIS WEEK (15/16 March 2010)
1) Read:Bonnie Raindrop and Stacy Meyn, An overview of the website creation process, Women’s Business Institute. (This text was sent to you via your UCP email address at the beginning of the semester. If you lost it, get a copy from your colleagues).
Discussion of article:
What do you need to do to prepare for designing a website BEFORE you begin the technical part?
What questions must you ask in order to define your goals?
What other things should you consider?
2) Plan your website content: BOTH ASSIGNMENTS TO WRITE ON PAPER & HAND IN TO THE INSTRUCTOR! (10% of your grade)
1) Graphic depiction of the architecture of the site, for example, layout, titles and how the pages will be linked. Use this tutorial to help you plan your website http://cat.xula.edu/tutorials/planning/. On this website, look at the sections marked “Drawing Sketches” and “Make a flow chart”.
2) Fairly well researched and thought out paragraph about your subject and the motivation you had for choosing the subject (100 -200 words IN FRENCH). Graded on seriousness of subject and preparation.
Follow these steps carefully and also listen verbal to the instructions by the teacher. (If you get lost, you can follow the same first steps on this website: http://www.tips-tricks.com/begin.asp )
- KEEP the Browser window OPEN. To have both windows open, click on the Tiling (mosaic) function at the top right corner of your screen. Please use Firefox Mozilla.
If you are working on your own, from home, then you can also try out these two tutorials to learn how to write your first webpage.
Open BlocNotes or WordPad (whichever is on the computer you have). To find this, go to the list of programs, open Accessories and then chose BlocNotes or WordPad.
At the top of the page, write a < followed by the letters HTML (in capital or lower case lettering), then follow that with a >. These “pointed brackets” tell the computer that this is a technical command, part of your CODE.
Go to the next line. Inside pointed brackets, write the word HEAD.
Go to the next line. Again inside pointed brackets, write the word TITLE.
Then without pointed brackets write Your Name_The subject of your Website.
Go to the next line. Inside pointed brackets, write /TITLE. The slash tells the computer that it should stop applying the command that you started earlier.
Go to the next line. Inside pointed brackets, write /HEAD.
Go to the next line. Inside pointed brackets, write /HTML.
It’s time to save your document. But, let’s be organized first.
Go to SAVE AS (enregistrer sous) and type in the name of the drive your USB flash drive is plugged into, e.g. E://
Open a FOLDER (Dossier) in your USB flash drive called FirstName_LastName_Gr1 (or Gr2, etc), e.g. Mary_Smith_Gr6.
Next, save the file as YourName_FirstWebpage.htm. Do NOT forget the dot HTM
Save this as simple text (txt) if the computer asks you.
Double check. Do you have the file saved in YOUR folder on YOUR flash drive? Now let’s go to the next step. (if you forgot your Flash drive, you will have to bring one next week and begin again).
Step Two: Verifying the code and headline.
Open a second Browser window or tab, so that you have TWO internet windows open.
In One you will keep this blog, or an internet page with instruction. With the other you will verify your site. How do you do this? You will see …
In the second Browser window, go to the top menu bar and choose “File” (Fichier), then choose “Open a File” (Ouvrir un fichier).
Choose the file you just created and saved called YourName_FirstWebpage.htm (to find it, remember to write in E://). OPEN it.
You should have a white screen. But, if you look at the very top of the screen, you should see your name in the Headline. Do you?
Step Three: Writing your first words in the Body.
Go back to the Bloc-notes document. Create some space between the /HEAD and /HTML. This is where you will place the body, or the main section of your web page. /HTML should ALWAYS be the last line of code, the last thing you see on the page, the last line of your CODE.
In this space you will first write, inside pointed brackets as usual, the word BODY.
Go to the next line. Inside pointed brackets write the word H1. Then, with NO brackets, write some kind of greeting, like Hello, or Salut. After that, inside pointed brackets, write /H1.
Go to the next line. Inside pointed brackets, write /BODY. (This is all for right now)
Save (not Save As = pas enregistrer sous)
Go back to the Website Verification Internet Browser window. Click on Refresh the page. What do you see?
Website REQUIREMENTS:(read the syllabus brochure handout for more detail)
You MUST have 3 distinct web pages (in English) linked together into a website. It must contain (technically): different fonts, different sizes of lettering, varied layout of text and images, different colors, at least one table, at least one list, images, internal links (anchors), external links, navigational tools and at least 50-100 words of ORIGINAL CONTENT in English per page. If your page is only images, you must add another page with some text.
HOMEWORK
Practice writing Code and using TAGS (the commands).
