Tim Berners-Lee imagined the World Wide Web as a space for interconnecting documents through hyperlinks. He created HTML to provide the structure and formatting for documents, CSS for presentation, and JavaScript for interactivity. These three languages work together to display content on the web. HTML uses tags to mark up content like paragraphs, headings, and images. CSS controls how content is styled and presented using selectors, rules and property-value pairs. It can be linked via external stylesheets, embedded in HTML, or used inline. JavaScript adds interactive behaviors to webpages.

1. Introduction to Web
Development
HTML, CSS AND JS

2. The First website at CERN

3. Web browser
Tim Berners-Lee imagined a "Web" of interconnected documents.
He wanted authors to be able to connect an idea in one document to
the source of the idea in another, or connect a statement with the
data that backs up that statement, so that in reading one document,
it is easy to access everything related (linked) to it.
This information was navigated by a new tool called a "Browser".

4. HTML, CSS and JS: The big trio
HTML:
◦ HyperText Markup Language
◦ Contains all the content (words, headings, figures, diagrams, etc.), organized into
a logical structure.
◦ Current version: HTML 5
CSS:
◦ Cascaded Style Sheet
◦ The presentation or style of the page
◦ Current version: CSS 3
JS:
◦ JavaScript
◦ The actions a page can take such as interaction with the user, and customizing
and changing the page according to any number of parameters.

5.  Check your knowledge
True or False:
◦ The primary purpose of HTML is to format the text.
• False
– HTML is primarily designed to help organize the structure of a document.
CSS is used for formatting and other aspects of design.

6. The Tools
Simple
• Notepad
• Notepad++
• Vim
• Nano
• emacs
Advanced
• Visual Studio
• Atom
• Vscode
• sublime
Interactive
Tools
• Dream
Weaver
• Microsoft
Expression
Web
• Adobe XD

7. HTML
THE CONTENT PART

8. Marking up
HTML uses angle brackets ("<" and ">") to separate the annotations
from the regular text.
In HTML these annotations are called "tags“.

9. Demo 1: Hello World
Exercise:
◦ Extract tags and normal text from the document

10. Viewing in a browser

11. HTML Element
An HTML document is a set of HTML elements formed in a tree-like
structure (Parent -> child)
An element consists of start tag, end tag and the text inside the tag.
html
head
body
title
heading
paragraph

12. DEMO 1: Closer look
Start tag
Closing tag
Content Html element
Note:
Most tags have open and close versions, but there are a few strange ones. We refer to the strange ones as "self
closing" tags. (More details later)

13.  Check your knowledge
Which is the correct nesting of these elements?
1. “p” inside “body” inside “html”
2. “html” inside “body” inside “p”
3. “p” inside “body” inside “head”
1. “p” inside “body” inside “html”

14. Comments
Comments are a way of adding some text that is primarily targeted
towards human readers.
HTML comment tag

15. Grouping It All together

16. More tags
<h1>, <h2>, … <h6>
<p>
<ul>, <ol>, <li>
<hr> or <hr />
<br> or <br/>
<pre>

17.  Check your knowledge
A 'ul' element isn't very useful unless it contains what kind of tags?
Answer: <li></li>

18. Attributes
Attributes are used in tags to further
define the tag.
It is used inside the opening tag it is
applied to and should be added after a
space from the tag name
Syntax:
Attribute name, equal sign, opening
quotes, attribute value, closing quotes

19. Attributes
A tag can have multiple attributes
The only exception to the name-value pair is if the attribute is a
'boolean attribute'.
◦ you add the attribute name to indicate true and omit it to indicate false

20. Attributes types
Global attributes: can be applied to all tags
◦ Example: id, class (explained later with css)
Non-global attributes: applied only to some specific tags
◦ Example: start, reversed
Check this link to see all HTML attributes and where they can be applied
◦ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

21.  Check your knowledge
<p id="greeting" class="hello world">This is me greeting the
world</p>
Which of the following is the correct behavior?
1. Both the classname and paragraph text cannot contain 'world‘
2. Two different classes 'hello' and 'world' will be applied to the paragraph
3. The code is invalid because space is not allowed in class attribute's value
4. One class 'hello world' will be applied to the paragraph
Answer:
2- Two different classes 'hello' and 'world' will be applied to the paragraph

22. The ‘title’ attribute
It’s a global attribute
Used to show a message that appears when you point your cursor at
something

23. The <img> tag
src “source”: tells us where to fetch the image from.
alt “alternate text”: provide a short description of what the image is
about.
More attributes: width, height

24. Hyperlinks
Hyperlink is any text or image you can click and it will take you to
another page. This page can be:
◦ Another Web page.
◦ A bookmark (a specific part of a Web page).
◦ A local link (link to another part of the same Web page)
◦ An email

25. The <a> tag
The hyperlink tag in html is simply <a> (anchor)
href: points to the URL that the link should jump to.
target: specifies the destination where the linked URL in href should
be opened.
◦ _blank: open in a new window
◦ _self: open in the same window (default)

26.  Check your knowledge
Is it valid to have a paragraph element inside the <head> tag?
◦ Yes
◦ No
Unlike most attributes, the id of an element should be:
1. split by spaces if you want to specify multiple values
2. the same across a given type of element i.e. all paragraphs have the same id
3. unique to that element and can only be used once
4. written in all caps (“ID=“)

27.  Check your knowledge
What are the required attributes in an image tag? (choose 2)
1. src
2. title
3. height
4. alt
All browsers support all attributes?
◦ True
◦ False

28.  Check your knowledge
Which of the following is a valid value following best practice for
the 'id' attribute?
1. < p id=""> < /p >
2. < p id="NaViGaTiOn" > < /p >
3. < p id="score-display" > < /p >
4. < p id="Frequently asked questions" > < /p >
Which of the following statements about global attributes is true?
1. All global attributes are of type boolean
2. Global attributes are common to all elements
3. Only 'id' and 'class' are global attributes
4. Global attributes only apply to elements that do not have any attributes of
their own

29.  Check your knowledge
What do you use to split multiple classnames in the 'class'
attributes?
1. You can only specify one classname in the 'class' attribute
2. space
3. comma
4. Colon
Which of the following image paths follow the best practice for a
relative URL?
1. packageassetsImagesexample.PNG
2. images/example.png
3. Package/Assets/Images/Example.png
4. imagesexample.png

30.  Check your knowledge
The closing tag for image is </img>.
◦ False
◦ True
What does the 'alt' attribute do?
1. used to distinguish image and text links by a screen reader
2. describes the information the image conveys or its function
3. display information about an ambiguous image as a tooltip
4. links to a URL

31. Cascading style sheet
(CSS)
THE SISTER TECHNOLOGY TO HTML THAT
IS USED TO STYLE YOUR WEB PAGES

32. Definition
 Cascading Style Sheets (CSS) form the presentation layer of the
user interface.
• Structure (XHTML)
• Behavior (Client-Side Scripting)
• Presentation (CSS)
 Tells the browser agent how the element is to be presented to
the user.

33. Why CSS?
 CSS removes the presentation attributes from the structure
allowing
• Reusability
• Ease of maintainability
• Interchangeable presentation layer
 HTML was never meant to be a presentation language. Proprietary
vendors have created tags to add presentation to structure. Like
<font>, <b> and <i>.

34. CSS Syntax

35. Using Style Sheets
 External Style Sheet
 Embedded Styles
 Inline Styles

36. DEMO
TEST ALL THREE WAYS TO CREATE A CSS

37. Cascading Order
 “Cascading ” reflects the way styles are applied to the
elements in a document, because style declarations cascade
down to elements from many origins.
 Styles will be applied to HTML in the following order:
• Browser default
• External style sheet
• Internal style sheet (in head)
• Inline style
 When styles conflict, the “nearest” (most recently applied)
style wins.

38. CSS Selectors
 Selectors determine which element the rule applies to
 You can select elements as following:
• All elements of specific type (tag)
• Those that match a specific attribute (id, class)
• Elements may be matched depending on how they are nested in
the document tree (HTML)
 Examples:

39. Simple Basic Selectors
1. Type Selector
2. IDs
3. Classes
4. Universal Selector

40. 1 Type Selector
 Type selector selects an element of the HTML document: P, H1,
BODY, etc.
 Example

41. 2 ID Selector
 The ID attribute is used to define a unique style for an element.
 Example:
• In the CSS
• In the HTML

42. 3 Classes Selector
 Classes allow you to define a style which can be applied to multiple
elements on your page.
 Example
• In the CSS
• In the HTML
 Both the paragraph & the span elements will be styled by the class “bold".

43. 4 Universal selector
 The universal selector matches any element type.
 Example

44. CSS Rules Measurement Units
 Physical Measurements
• inches (in)
• points (pt)
 Screen Measurements
• pixels (px)
 Relative Measurements
• %
 Zero can be used with no unit

45. DEMO
CHECK THE CSS SELECTORS

46. Styles Categories
 Box Model (Borders, Padding, and Margins)
 Font Styles
 Text Styles
 Text and Background Colors
 Background Images

47. Box Model
 All HTML elements can be considered as boxes.
 The Box Model allows us to place a border around elements and
space elements in relation to other elements.
 The Box Model consists of:
• Margin: The distance between an element and its parent
• Padding: The distance between the element and its content
• Borders
• Actual content

48. Box Model
Margin
Border
Padding

49. CSS Font
 Font-family
 Font style
 Font size
 Font weight

50. CSS Text
 Color: Set the color of the text
 Text-indent: How much the paragraph start is moved
 Text-align: Horizontal alignment of the text (left- center and right)
 Text-decoration: (underline – overline – line-through)
 Text-transform: Text case (uppercase – lowercase – capitalize)

51. CSS Background
 Background-color
 Background-image
 Background-position
 Background-repeat

52. DEMO
CHECK THE REST OF CSS DOCUMENT IN THE SCISSORS
SAMPLE
AND DEMO BROWSER INTERACTIVE TOOLS

53. CSS Frameworks

54. CSS Frameworks
 Pre-prepared software framework that are meant to allow for easier,
more standards compliant web design using the CSS.
 CSS frameworks offer different modules and tools:
• Grid especially for responsive web design
• Web typography
• Set of icons in sprites or icon fonts
• Styling for tooltips, buttons, elements of forms
• Parts of graphical user interfaces like accordion, tabs, or slideshow
• Minified css and js files

55. Bootstrap
Bootstrap is a free front-end framework for faster and easier web
development.
Bootstrap includes HTML and CSS
based design templates for
typography, forms, buttons,
tables, navigation, modals, image
carousels and many other, as well
as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

56. Assignment
Complete this course (2.5 hrs)
◦ https://www.udemy.com/crash-course-html-and-css/
◦ Due date: 30-9-2017 (2 marks)
◦ Last chance: 7-10-2017 (1 mark)
Implement the following page
◦ Create a website for a Landmark
◦ The website should have at least five pages:
◦ Home
◦ History
◦ News
◦ Booking
◦ Contact Us
◦ All pages should have a menu bar that allows you to move between them.
◦ All the pages should have the same theme
◦ Create a single css file for all pages
◦ Due date: 30-9-2017 (2 marks)
◦ Last chance: 7-10-2017 (1 mark)

57. Make sure you know their meaning
 html
 head
 body
 h1, …, h6
 P
 hr
 br
 a
 img
 ul, li
 ol, li
 table, tr, td
rowspan, colspan
 div
 span

58. Learning Front End Development
https://www.edx.org/microsoft-professional-program-front-end-
development