Week 2: Webpages written in HTML and CSS

L2.1: Information Representation in a machine

Information Representation
Computers work only with "bits" (0s and 1s)
Numbers:
Place value: binary numbers: (6 = 0110)
Two's complement: negative numbers (-6 = 1010)

Representing Text
ASCII
American Standard Code for Information Interchange.
7 7 bits: 128 128 different entities.
'a'..'z'
'A'..'Z'
'0'..'9'
Special characters: !@#$%^&*()_+{}|:"<>?~`[]\;',./...
Control characters: newline, tab, backspace, etc.

Unicode
Allow codes for more scripts, characters
Universal Character Set encoding - UCS
UCS-1 (UTF-8): 1 1 byte per character - max 256 = 2 8 256 = 2 8 characters
UCS-2 (UTF-16): 2 2 bytes per character - max 65 536 = 2 16 65 , 536 = 2 16 characters
,

32
UCS-4 (UTF-32): 4 4 bytes per character - max 4 4 Billion+ ( 4 294 967 296 4 , 294 , 967 , 296 = 2
, , , 2 32 )

characters

Bits required = Number of characters * Bits per character

Bits required = Number of characters * Bits per character

L2.2: Efficiency of Encoding

Prefix Coding
1 st1st 2nd2nd 3rd3 r d 4 th
4 th Max. Expressible Unicode
Free Bits
Byte Byte Byte Byte Value
7
0xxxxxxx 2 − 1= 127 = 007 F
- - - 7 7
0 xxxxxxx 2 7 − 1 = 127 = 007 F (hex)
11
110 x x x x x 10 x x x x x x 2 − 1= 2047 = 07 F F
- - 5+ 6= 11 5 + 6 = 11
110 xxxxx 10 xxxxxx 2 11 − 1 = 2047 = 07 FF (hex)
16
1110 x x x x 10 x x x x x x 10 x x x x x x 4+ 6+ 6= 16 2 − 1= 65535 = FFFF
-
1110 xxxx 10 xxxxxx 10 xxxxxx 4 + 6 + 6 = 16 2 16 − 1 = 65535 = FFFF (hex)
21
2 − 1= 2097151 = 1 F F F F
11110 x x x 10 x x x x x x 10 x x x x x x 10 x x x x x x 3+ 6+ 6+ 6= 21
2 21 − 1 = 2097151 = 1 FFFF
11110 xxx 10 xxxxxx 10 xxxxxx 10 xxxxxx 3 + 6 + 6 + 6 = 21
(hex)

So, only with 1 1 byte, we can represent 128 128 characters.

With 2 2 bytes, we can represent 2048 2048 characters.
With 3 3 bytes, we can represent 65536 65536 characters.
With 4 4 bytes, we can represent 2 097 152 2 , 097 , 152 characters.
, ,

Here we can see, how we can represent characters in different encoding schemes.

UTF-8
Use 8 8 bits for most common characters: ASCII subset
All other characters can be encoded based on prefix string
Most common encoding in use today

L2.3: What is Markup?

Markup is a way of using cues or codes in the regular flow of text to indicate how text should be displayed.
Markup is very useful to make the display of text clear and easy to understand.
Types of Markup
Presentational
WYSIWYG (What You See Is What You Get): directly format output and display
Embed codes not part of regular text, specific to the editor.
MS Word, Google Docs etc...

Procedural
LaTeX is a procedural markup language.
Details on how to display
chnage font to large, bold, italic, etc.
skip 2 lines, indent 3 inches, etc.

Descriptive
This is a <title> , this is a <section> , etc...
HTML is a descriptive markup language.

Semantic Markup
Content vs Presentation
Semantics
Meaning of the text
structure or logic of the document
Example: using semantic tags like <header> , <main> , <footer> instead of <div> .

L2.4: Introduction to HTML

HTML (HyperText Markup Language)
HTML first used by Tim Berners-Lee in 1989
Considered an application of SGML (Standard Generalized Markup Language)
HTML meant for browser interpretation
Very forgiving: loose validity checks
Best effort to display
HTML Example:
<! DOCTYPE html >
< html >
< head >
< title > My First Webpage </ title >
</ head >
< body >
< h1 > My First Webpage </ h1 >
< p > This is my first webpage. </ p >
</ body >
</ html >

Timelines
SGML based
1989 1989 : HTML 1.0 1.0
1995 1995 : HTML 2.0 2.0
1997 1997 : HTML 3 3 , 4 4
XML based
XHTML - 1997 1997 to mid 2010 s 2010 s
HTML5
first release 2008
W3C recommendation - 2014 2014

HTML5
Block elements : <div>
Inline elements : <span>
Logical elements : <header> , <footer> , <nav> ,...

Media elements : <img> , <audio> , <video> ,...

Remove "presentation only" tags:

<center>
<font>

Document Object Model (DOM)

<! DOCTYPE html >

< html >
< head >
< title > My title </ title >
</ head >
< body >
< h1 > A heading </ h1 >
< p > A paragraph with < a href = " link " > link </ a > . </ p >
</ body >
</ html >
DOM
Tree structure representing logical layout of document
Direct manipulation of tree possible
Application Programming Interface (API)
Canvas
Offline
Web Storage
Drag and Drop & ...
JavaScript primary means of manipulating
CSS used for styling

Documentation
Refer to MDN Web Docs �� for HTML documentation.
Refer to W3Schools �� for learning HTML
Refer to MDN Front-end Web Developer Learning Path �� for learning front-end web development.

L2.5 & 2.6: Introduction to Styling & Types of CSS styling and
Responsive Websties
CSS (Cascading Style Sheets)
CSS is a powerful language used for styling and visually enhancing HTML documents.
With CSS, you can control the layout, color, fonts, and many other aspects of your web pages.
There are multiple ways to apply CSS styles to HTML elements, giving you flexibility and control over the
appearance of your website.

1. Inline CSS
Inline CSS is the most basic and straightforward way to apply styles directly to individual HTML elements.
By using the <style> attribute within an HTML tag, you can specify CSS properties and values.
Example:
< p style = " color : orange ; font-size : 24 px ; " >
This is a paragraph with inline styles applied.
</ p >

Rendered HTML:

This is a paragraph with inline styles applied.

2. Internal CSS
Internal CSS allows you to define styles within the HTML document itself, typically within the <head> section.
To apply internal CSS, you enclose the styles within the <style> tags.
Example:
< head >
< style >
p {
background-color : blue ;
color : white ;
font-size : 16 px ;
}
</ style >
</ head >
< body >
< p > This is a paragraph with internal styles applied. </ p >
</ body >

Rendered HTML:
This is a paragraph with internal styles applied.

3. External CSS
 External CSS is the recommended and most scalable approach for styling HTML documents.
With this method, you create a separate CSS file with the .css extension and link it to your HTML document using
the <link> tag.
Example:
HTML file: index.html

< head >

< link rel = " stylesheet " href = " styles.css " />
</ head >
< body >
< p > This is a paragraph with external styles applied. </ p >
</ body >

CSS file: styles.css

p {
background-color : #c678dd ;
color : #282c34 ;
font-size : 28 px ;
font-weight : bold ;
font-style : italic ;
text-decoration : line-through ;
}

Rendered HTML:

This is a paragraph with external styles applied.

CSS Selectors
1. Element Selector

Targets elements based on their tag name.

Example:
p {
color : blue ;
}

2. Class Selector

Targets elements with a specific class attribute.

Example:
< p class = " highlight " > This is a paragraph with class selector applied. </ p >

.highlight {
background-color : yellow ;
}

Rendered HTML:
This is a paragraph with class selector applied.

3. ID Selector
 Targets a specific element with a unique ID attribute.
Example:
< p id = " top " > Some para... </ p >

#top {
color : red ;
font-size : 24 px ;
}

Rendered HTML:

Some para...
4. Universal Selector

Targets all elements on the page.

Example:
* {
color : cyan ;
}

Rendered HTML:
This is a paragraph with universal selector applied.

Priority of CSS Selectors

Selector Priority

Inline styles Most

ID selectors Second most

Class selectors Third most

Tag selectors Least

!important Overrides all others

Documentation
Refer to MDN Web Docs �� for CSS documentation.
Refer to W3Schools �� for learning CSS.

Responsive Design
Responsive design is an approach to web design that aims to create websites that adapt and respond to different
screen sizes and devices.
It involves designing and developing websites in a flexible and fluid manner, using CSS media queries and other

techniques to ensure optimal user experience across various devices.

Responsive design allows content and layouts to automatically adjust, resize, and reposition based on the user's
screen size, providing a consistent and user-friendly experience on desktops, tablets, and mobile devices.
Bootstrap Framework
Bootstrap is a popular front-end framework developed by Twitter that simplifies the process of building responsive
and mobile-first websites.
It provides a collection of pre-designed HTML, CSS, and JavaScript components, such as navigation bars, buttons,

forms, and grid systems, which can be easily customized and integrated into web projects.

Rapid Development
Bootstrap offers ready-to-use components and a responsive grid system, enabling developers to quickly prototype
and build websites or web applications.

Consistency
By utilizing Bootstrap's predefined styles and components, websites built with Bootstrap maintain a consistent and
professional look across different pages and sections.

Device Compatibility
Bootstrap's responsive features ensure that the website layout and components automatically adjust to different
devices, providing an optimal viewing experience for users on desktops, tablets, and mobile devices.