Scribd
Upload
40 views

Web Programming

Uploaded by

nadinehamzeh1987
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
40 views

Web Programming

Uploaded by

nadinehamzeh1987
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

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

You might also like