WEB PROGRAMMING
80 HOURS
Subject description
This subject describes the HTML5 tag language and the syntax of the JavaScript language.
Subject objective
This subject provides students with the basic knowledge of developing applications on the Internet using
the HTML5 and CSS3 and JavaScript languages.
Prerequisites
Computer knowledge on the use of browsers
Skills and abilities (Learning outcomes)
At the end of this subject, the student will be able to:
Create an HTML document, establish a format appropriate to the subject and highlight it.
Enter, insert images and model them.
Insert and manipulate tables.
Ensure internal and external links with the available tools.
Insert and adopt multimedia objects.
Manage forms (form creation, program call, etc.).
Interacting with the HTML document
Content
4 periods per week
Chapters <Practical work> No week
Part 1: The basics of HTML5 (14 h)
1. How do we create websites? (2 h)
1.1. How do websites work?
1.2. HTML and CSS: two languages for creating a website
1.3. The role of HTML and CSS
1.4. The different versions of HTML and CSS
1.5. The text editor
1.6. Browsers
1.7. Why the browser is important
1.8. Browsers on computers
1.9. Mobile browsers
2. Your first web page in HTML (2 h)
2.1 Create a web page with the editor
2.2 Tags and their attributes
2.3 Tags
2.4 Attributes
2.5 Basic structure of an HTML5 page
2.6 The doctype
2.7 The <html> tag
2.8 The <head> header and the <body> body
2.9 Comments
2.10 Insert a comment
1st week
3. Organize your text (4 h)
3.1 Paragraphs
3.2 Skip a line
3.3 Titles
3.4 Highlighting
3.5 Marking text
3.6 Bulleted lists
3.7 Unordered list
3.8 Ordered list 2nd week
4. Creating links (4 h)
4.1 A link to another site
4.2 A link to another page on your site
4.3 Two pages located in the same folder
4.4 Two pages located in different folders
4.5 A link to an anchor (internal)
4.6 Link to an anchor located on another page
4.7 Practical cases of using links
4.8 A link that opens a new window
4.9 A link to send an email
4.10 A link to download a file 3rd week
5. Images (2 h)
5.1 The different image formats
5.2 JPEG
5.3 PNG
5.4 GIF
5.5 Mistakes to avoid
5.6 Inserting an image
5.7 Adding a tooltip
5.8 Clickable thumbnail Half
4th week
Part 2: formatting with CSS. (20 h)
6. Implementing CSS (6 h)
6.1 A brief history of CSS
6.2 What is CSS for?
6.3 CSS: difficult beginnings
6.4 CSS: browser support
6.5 Where is CSS written?
6.6 In a .css file (recommended)
6.7 In the <head> header of the HTML file
6.8 Directly in the tags
6.9 Which method should I choose?
6.10 Applying a style: selecting a tag
6.11 Applying a style to several tags
6.12 Comments in CSS
6.13 Applying a style: class and id
6.14 Universal tags
6.15 Applying a style: advanced selectors
Half
4th week
5th week
7. Text formatting (4 h)
7.1 Size
7.2 Absolute size
7.3 Relative value
7.4 Font
7.5 Change the font used
7.6 Use a custom font with @font-face
7.7 Italic, bold, underline...
7.8 Italicize
7.9 Bold
7.10 Underline and other decorations
7.11 Alignment
7.12 Floats
7.13 Floating an image
7.14 Stopping a float 6th week
8. Color and background (4 h)
8.1 Text color
8.2 Specifying the color name
8.3 Hexadecimal notation
8.4 The RGB method
8.5 Background color
8.6 CSS and inheritance
8.7 Example of inheritance with the <mark> tag
8.8 Background images
8.9 Applying a background image
8.10 Options available for the background image
8.11 Combining properties
8.12 Multiple background images
8.13 Transparency
8.14 The opacity property
8.15 RGBa notation 7th week
9. Borders and shadows (4 h)
9.1. Standard borders
9.2. Rounded borders
9.3. Shadows
9.4. box-shadow: box shadows
9.5. text-shadow: text shadow 8th week
10. Creating dynamic appearances (2 h)
10.1. On hover
10.2. On click and selection
10.3. :active: when clicked
10.4. :focus: when the element is selected
10.5. When the link has already been visited
Part 3: Site layout (14 h)
11. Structuring a page (2 h)
11.1. HTML5 structuring tags
11.2. <header>: the header
11.3. <footer>: the footer
11.4. <nav>: main navigation links
11.5. <section>: a section of a page
11.6. <aside>: additional information
11.7. <article>: an independent article
11.8. Concrete example of using tags
3. The box model (4 h)
12.1. Block and inline tags
12.2. Some examples
12.3. Universal tags
12.4. Dimensions
12.5. Minimum and maximum
12.6. Margins
12.7. Centering blocks
12.8. When it goes beyond...
12.9. overflow: cutting a block
12.10. word-wrap: cutting texts that are too wide
4. Positioning in CSS (4 h)
13.1. Floating positioning
13.2. Transforming your elements with display
13.3. Inline-block positioning
13.4. Absolute, fixed and relative positioning
13.4.1. Absolute positioning
13.4.2. Fixed positioning
13.4.3. Relative positioning
5. Practical work: creating a site step by step (4 h)
14.1. Design mockup
14.2. Organizing content in HTML
14.3. Formatting in CSS
14.4. Custom fonts
14.5. Defining main styles
14.6. Header and navigation links
14.7. The banner
14.8. The body
14.9. The footer
14.10. Ensuring compatibility with IE
14.11. Making HTML5 structuring tags work
14.12. Adjusting inline-block positioning
14.13. Checking validity
14.14. The final code
Part 4: Advanced features (16 h)
6. Tables (4 h)
15.1. A simple table
15.2. The header row
15.3. Table title
15.4. A structured table
15.5. Splitting a large table
7. Forms (8 h)
16.1. Creating a form
16.2. Basic input fields
16.3. Single-line text field
16.4. Labels
16.5. Some additional attributes
16.6. Password field
16.7. Multi-line text field
16.8. Rich input fields
16.9. File
16.10. Email
16.11. A URL
16.12. Phone number
16.13. Number
16.14. Rank
16.15. Color
16.16. Date
16.17. Search
16.18. Option elements
16.19. Checkboxes
16.20. Option areas
16.21. Drop-down lists
16.22. Finalizing and sending the form
16.23. Grouping fields
16.24. Automatically selecting a field
16.25. Making a field mandatory
16.26. The submit button
8. Video and audio (4 h)
17.1. Audio and video formats
17.2. Audio formats
17.3. Video formats
17.4. Inserting an audio element
17.5. Inserting a video
Part 5: JavaScript (16 h)
9. Introduction to JavaScript (2 h)
18.1. Inserting JavaScript code into the HTML page.
18.2. The <SCRIPT> tag
18.3. Comments
18.4. Methods, write and writeln
10. Variables, constants and strings (2 h)
19.1. The concept of a variable
19.2. Variable declaration
19.3. Data types in variables
19.4. Reserved names
19.5. Global variables and local variables
19.6. Constants
19.7. Strings
11. Operators and conditional structures (4 h)
20.1. Calculation operators
20.2. Assignment operators
20.3. Increment operators
20.4. Comparison operators
20.5. Logical operators (boolean)
20.6. Concatenation operators
20.7. Priorities
20.8. If statement
20.9. If ... else statement
20.10. Loops
20.10.1. For loop
20.10.2. While statement
20.10.3. Unconditional jump
20.10.4. Unconditional stop
21. Operators and conditional structures (4 h)
21.1 Calculation operators
21.2 Assignment operators
21.3 Increment operators
21.4 Comparison operators
21.5 Logical operators (Boolean)
21.6 Concatenation operators
21.7 Priorities
21.8 If statement
21.9 If ... else statement
21.10 Loops
21.10.1 For loop
21.10.2 While statement
21.10.3 Unconditional jump
21.10.4 Unconditional stop Practical work
on operators and statements 19th week
22. Events (4 h)
21.1. What is an event?
21.2. Window events
21.2.1. onLoad
21.2.2. onUnload
21.2.3. onResize
21.3. Mouse Events
21.3.1. onClick
21.3.2. onDbleClick
21.3.3. onMouseDown
21.3.4. onMouseUp
21.3.5. onMouseOver
21.3.6. onMouseOut
21.4. Form Events
2.1.4.1 onFocus
2.1.4.2 onBlur
2.1.4.3 onChange
2.1.4.4 onReset
2.1.4.5 onSubmit Events Lab 20th Sem.
23. Functions (2 h)
23.1 The concept of a function
23.2 Declaring a function
23.3 Calling a function
23.4 Parameters of a function
23.5 The this keyword
23.6 Applications
24. Objects (2 h)
24.1 Concept of an object
24.2 Objects and their hierarchy
24.3 Properties of objects
24.4 Browser objects
24.5 The window object
24.5.1 Properties of the window object
24.5.2 Methods of the window object
24.6 Dialog boxes.
24.6.1 The alert() method
24.6.2 The confirm() method
24.6.3 The prompt() method
24.6.4 The particularities of the string object
24.7 The properties of the string object
24.8 Applications
24.9 Project Practical work
on writing and calling a function
Practical work
on objects with the association of an event and the call of a function
A global project. 21st week
Teaching methods
This subject must be taught in a computer laboratory, the largest part is a practical part, exercises
applied on computers.
A computer equipped with a text editor (Notepad, Notepad++, ...) a browser (I.E, Firefox, ...)
Assessment methods
- The teaching methods used (practical work, lectures, personal work, ...) allow an appropriation of
knowledge.
- The teacher clearly defines the concepts used.
- A summary assessment that consists of determining at the end of the important stages of the training
(end of the month, of the quarter), the quality of the learning achieved or the quality of the skills
acquired by each student for the purposes of promotion, orientation, certification.
Bibliographic references
- Special Edition Using Intranet HTML / Mark Surfas, Mark Brown and John Juge
- Dynamic HTML Web Magic / Jef Douyer – Hayden development group
- http://www.w3schools.com/html/html5
- Javascript programmer’s reference –Alexei White
- Javascript Pocket Reference-Oreilly David Flanagan
- Internet & World Wide Web how to program - Dietel & Dietel
