introduction to web development with html, css and javascript with hands-on experience through project workshops

1. HTML5 & CSS3 BASICS
BAIMAM BOUKAR
Google DSC, ICT-University
WEBTRACK SESSION

2. PRESENTATION PL AN
Setup of development environment, installation
of required tools
ENVIRONMENT SETUP
2
Overview and discovering of most used HTML
Tags
HTML TAGS AND STYLING
3
Build simple Web pages from scratch
SIMPLE PROJECTS
4
History, definition and Importance
WHAT ARE HTML5 & CSS
1

3. Sir TIM BERNERS LEE
WHAT IS HTML ?
D E F I N IT ION
HTML stands for HyperText Markup Language. It is not a
programming language but rather a Markup Language. HTML is
used to structure web pages. It is the root and main element behind
every web page
H I S TORY
It has been created by Sir TIM Berners Lee A former Oxford-
University graduate, In 1989.
The first ever website created with HTML is http://info.cern.ch
Today HTML is in hist 5th version, which is officially the last version.
That’s why we talk about HTML5

4. HOW DOES IT WORK ?
HTML is used to structure web pages. That means defining
things like headlines and paragraphs, and allowing you to
embed images, video, and other media
HTML consists of a series of short codes typed into a text-file by the site author ,
these are the tags. The text is then saved as a html file, and viewed through a web
browser, like Internet Explorer, Safari, Google Chrome, Opera, Mozilla
Firefox or Netscape. This browser reads the file and translates ( Interpretation ) the
text into a visible form, hopefully rendering the page as the author had intended

5. W3C CONSORTIUM
WHAT IS CSS ?
D E F I N IT ION
CSS stands for Cascading Style Sheet. It is used for styling and
designing HTML elements. CSS comes to render our HTML pages
more prettier and attractives.
H I S TORY
It has been created by W3C, The World Wide Web
Consortium , In 1994.
Today CSS is in hist 3rd version, which is officially the last version.
That’s why we talk about CSS3

6. HOW DOES IT WORK ?
CSS make your web pages more presentable by interacting
with HTML elements. Indeed, by using css you can apply to
your HTML tag all styles you want ( text colors, font-size, font
styles, layouts )
Think of HTML as the body skeleton, and CSS as how good is this person dressed

7. There is no any pre-required knowledge to
learn HTML & CSS
ENVIRONMENT SETUP
All you need is to install a Web
Browser and a text editor

8. HTML TAGS & STYLING
Now let’s deep dive in this topic
HTML BASIC TEMPLATE
ANATOMY OF A HTML TAG
TYPOGRAPHY TAGS & LAYOUT ( headings, divisions & paragraphs)
FORMS TAGS ( input tags, buttons, radio, select )
HTML MEDIA ( Images, Videos, audio )
WHAT WILL WE SEE?

9. Every HTML page
must have these four
Tags
 HTML
It introduces a new HTML document
 HEAD
It contains all meta tags relative to the author and
what the page about
 TITLE
It specifies the title of the page
 BODY
It contains all the HTML elemnts that will be displayed
in the page in the browser
BASIC HTML TEMPLATE
Body
content
title

10. ANATOMY OF A HTML TAG
THIS IS HOW A HTML TAG LOOK
LIKE
<TAG attribute-1=“value”
attribute-n=“value’’>
Content is Here
</TAG>
CLOSING TAG
OPENING TAG
ORPHAN TAGS DON’T HAVE
CLOSING
<ORPHAN-TAG attribute-
1=“value” attribute-n=“value’’> />
EVERY TAG CAN HAVE AN
ATTRIBUTE

11. <HX>
Heading Text
</HX>
HEADING TAGS: HX
Body
content
title
The X can be 1, 2, 3, 4, 5 or 6.
It specifies the level of our
heading
The heading is as large as x is
small

12. <P> Lorem ipsum
dolor si amet </P>
PARAGRAPH TAG: P
Body
content
title
This tag is used to introduce a
paragraph

13. <DIV> This is a division
</DIV>
DIVISION TAG: DIV
Body
content
title
The division tag is a layout tag
used in different many
contexts

14. <INPUT TYPE=“x”/>
INPUTS TAG: INPUT
Body
content
title
The x specifies the type of the
input
It can be type text, password,
file, number, etc…

15. <SELECT>
<OPTION> choice I <OPTION>
<OPTION> choice N <OPTION>
</SELECT>
SELECT TAG: SELECT
Body
content
title
The select tag allow us to
choose one option among
many options

16. <INPUT TYPE=“radio”/>
<INPUT TYPE=“Checkbox”/>
RADIO AND CHECKBOX TAGS
Body
content
title
Radio and Checkbox allow us
to choose an element among
many elements

17. <BUTTON>
Button title
</BUTTON >
BUTTONS TAGS: BUTTON
Body
content
title
Buttons are used to interact
with other elements, and
submit forms

18. <IMG src=“file_path”/>
IMAGE TAGS: IMG
Body
content
title
IMG tag is used to insert
images in the web pages…
The SRC attribute is to specify
the path of the image we want
to insert

19. <VIDEO src=“file_path”/>
VIDEO TAGS: VIDEO
Body
content
title
VIDEO tag is used to insert
videos in the web pages…
The SRC attribute is to specify
the path of the video we want
to insert

20. I C T - U S T U D E N T P O R TA L L O G I N
C L O N E
division
paragraph
image
heading
button

22. THANK YOU
AND SEE YOU TO THE NEXT SESSION