Scribd
Upload
30 views193 pages

HTML 5

The document provides an overview of basic HTML elements and concepts for frontend web development. It discusses HTML tags and elements like headings, paragraphs, links, images, and how to style and position them on a page. It also covers HTML attributes, comments, colors, responsive design, and semantic elements introduced in HTML5. The document is intended as an introduction for learning HTML.

Uploaded by

CpA TB
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views193 pages

HTML 5

The document provides an overview of basic HTML elements and concepts for frontend web development. It discusses HTML tags and elements like headings, paragraphs, links, images, and how to style and position them on a page. It also covers HTML attributes, comments, colors, responsive design, and semantic elements introduced in HTML5. The document is intended as an introduction for learning HTML.

Uploaded by

CpA TB
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 193

Web Development

Basic </>

Frontend Web Development


HTML - 5

HyperText Markup Language - building Web Page


CSS

Cascading Style Sheet - Styling HTML Documents


JS

Javascript with HTML


Boostrap

The most popular HTML , CSS and JS Library


HTML - Hypertext Market Language
What is HTML 5?
● HTML stands for Hyper Text Markup Language, it is easy and fun to learn.
● HTML describes the structure of web pages.
● HTML 5 is the fifth and current major version of the HTML standard.
Why Learn HTML - 5?
It is essential to learn HTML if you want to build websites, you can’t build one if you
don’t know HTML because it’s one of the prerequisites in learning other languages
used for web development.
Static VS Dynamic Web Page
Text Editor
VS Code
Saving HTML Files
FILE_NAME.html
<DOCTYPE! html>
<html lang=”en”>
<head>
<title> Hello World </title>
</head>
<body>
<h1>Hello! This is my first web page </h1>
</body>
</html>
HTML Tags
HTML Tags are element names surrounded by angle bracktes.

In Html, we start and end tags. Look at the example below.

<p> Hello, welcome to learn HTML </p>

<p> - Start Tag

</p> - Eng Tag


HTML Elements
<p> This is an element content </p>

<h1> Learning HTML Elements </h1>

Start Tag : <h1>

Element Content : Learning HTML Elements

End Tag : </h1>


Nested HTML Elements

<p><i> Italic text </i></p>


Empty Elements
● <meta />
● <link />
● <img />
● <br />
● <hr />
● <input />
HTML Attributes
HTML attributes are used to add more information to an HTML Element and appear
on start tag only

An HTML attribute is composed of

● an attribute name
● an equal = sign
● a value surrounded by quotation marks “value”

Look Like This : attributename = “value”


Attribute lang Example
<!DOCTYPE html>

<html lang=”en-US”>

<!-- html document/ file content goes here -->

…..

</html>
Attribute href Example
<a href = “https://www.google.com”> Go To google.com </a>
Attribute title Example
<a href= “#link” title = “I serve as a tooltip”> Link </a>
Attributes id and class

<div class=”name”> Multiple elements can have the same


class name.
</div>
Id must be unique for each element
<div class=”name”>
</div>
<div id =”name”>
</div>
HTML Comments

<p> This is a paragraph


<!-- This is a single line comment -->
</p>
<div>
<!-- This is multiline comment
This is multiline comment -->
</div>
HTML Style
Attribute style Example

<p style = “font-size: 40px;color: gold”>

I’m a paragraph with a size of 40 px and gold color.

</p>
Internal Style Sheet

<style type= “text/css”>

p{

Font-size : 14px;

</style>
Inline Styling

<p style= “color: blue” > My Color is Blue </p>


<p style= “color: red” > My color is red. </p>
<p style = “color: green” > My color is green. </p>
<p style= “color: yellow” > My color is yellow </p>
<p style= “color: pink” > My color is pink </p>
External Style

create an external style.css file and link it inside head tag.

<head>

<title> External Style </title>

<link rel = “stylesheet” href= “style.css” >

</head>s
Text Font-Family Example

<h1 style = “ font-family : Times New Roman ”> I am a Times New Roman
</h1>

Text Font-Family Example

<p style = “ font-size: 25px ” > My size is 25 pixels . </p>


<p style = “ font-size: 50px ” > My size is 50 pixels. </p>
Text Aligning Example:

<p style = “ text-align: left ” > I am aligned left. </p>


<p style = “ text-align: center ” > I am aligned center. </p>
<p style = “ text-align: right ” > I am aligned right. </p>
HTML Colors

● Color Name - white, black, blue, green, pink


● Hex Color Value - #ffffff , #000000
● RGB Color Value - rgb( 255 , 255 , 255 ) , rgb ( 0 , 0 , 0 )

<div style = “ background-color: black ” >


<p style= “color: #008080;” > We are Teal </p>
<p style = “color: rgb( 0 , 128 , 128 ) ” > We are Teal </p>
</div>
HTML Responsive

● To Make an HTML page responsive simply add the following element


inside <head> element.

<meta name= “viewport” content= “width=device-width,initial-scale=1” />


Con’t
<!DOCTYPE html>
<html>
<head>
<title> Responsive Web Page </title>
</head>
<body>
<img src = “images/example-image.jpg” />
</body>
</html>
HTML Centered

<center>
<h1> I am a centered heading . </h1>
<p> I am a centered paragraph. </h1>
<img src = “images/example.jpg” />
</center>
Alternative - Center Elements

<div style= “ text-align: center ”>


<h1> I am a centered heading . </h1>
<p> I am a centered paragraph. </h1>
<img src = “images/example.jpg” />
</div>
HTML 5 Basic Example
HTML Headings

<h1> Heading 1 </h1>


<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h4> Heading 6 </h6>
Aligning HTML Headings

<h1 style= “text-align: left” > I am align left </h1>


<h2 style= “text-align: center” > I am align center </h1>
<h3 style= text-align: right” > I am align right </h1>
Heading Colors

<h1 style= “color: blue” > I am blue </h1>


<h1 style= “color: red” > I am red </h1>
<h1 style= “color: green” > I am green </h1>
HTML Paragraphs

<p> This is a paragraph </p>

Aligning HTML Paragraphs

<p style = “ text-align: left ”> HTML paragraph aligned left </p>
<p style = “ text-align: center ”> HTML paragraph aligned center </p>
<p style = “ text-align: right ”> HTML paragraph aligned right </p>
Styling HTML Paragraphs

<p style= “color: gold”> My color is gold </p>


<p style= “font-size: 25px” > My font-size is 25 pixels </p>
<p style= “font-family: verdana” > My font-family is Verdana </p>
<p style = “font-wight: bold” > My font-wight is bold </p>
HTML Links

● HTML Links are very necessary for all web pages. All web sites have
links. HTML Links are hyperlinks
Internal Links
● <a href = “file-in-the-same-folder”> Example </a>
External Links
● <a href= “https: //www.wikipedia.org” >Wikipedia </a>
Opening Link in New Tab
● <a href= “htts://www.wikipedia.org” target= “_blank”> Wikipedia</a>
HTML Line Break <br />

I am a text with line break. <br />


I am another text with line break <br />
I am a text without line break
I am another text without line break
Styling the Horizontal Rules

<hr style=”width: 50%; color=”black” />


<hr style = “height : 50px” color = “black” />
<hr color = “gold” />
Elements for formatting text

<b>: bold <em> : emphasizes


<i> : italic <strong> : like bold text
<u>: underlines <mark> : highlighting pen
<code> : defines text as a code <q> : enquotest a text
<tt> : typewriter text <s> : strikes through a text
<small> : small text
Con’t
<b> I am bold text </b><br> <em> I am emphasized text</em><br>

<i> I am italic text </i><br> <strong> I am strong text </strong><br>

<u> I am underlined text </u><br> <mark> I am marked text </mark><br>

<code> I am a code text </code><br> <q> I am a qouted text </q><br>

<tt>I am a typewriter text </tt><br> <s>I am a strike text </s><br>


<b><i><u><mark><q>
<small> I am a small text </small> <br>
I am mixed text
</q></mark></u></i></b>
HTML Block-Level Elements

It always starts on a new line and takes the full width available.
● <h1> - <h6>
● <p>
● <div>

<h5> Block - Level Elements </h5>


<p> always start </p>
<div> in a new line. </div>
HTML Inline Elements

It does not start on a new line


● <span>
● <a>
● <img />

<span> Inline Elements </span>


<a href= “http://www.example.com” > don’t start a new lines . </a>
<img src = “example.png” />
HTML5 Sections

HTML Sections group different HTML Elements (


Eg. text,heading,paragraphs,images etc. ) together
Elements Used for HTML Sections
● <div> : used to group large group of HTML elements like navigation,
main content, footer,images; It is a block level element.
● <span> : used to group smaller group of text in a paragraph and few
HTML elements; It is an inline element
HTML5 Semantic Elements

Here is a list of HTML5 Elements that work similarly with the <div>
● <nav> : defines a navigation list or bar
● <header> : defines a header
● <main> : main content
● <footer> : defines a footer
<div> Example

<div style=”background:gold;width: 400px;height: 400px”>


<p> This is a paragraph </p>
</div>
<div style=”background:green;width: 400px;height: 400px”>
<p> This is a paragraph </p>
</div>
<span> Example

<p>
<span style=”font-size: 30px”>I</span>
<span style=”color: blue”>am a paragraph</span>
<span style=”color:green”> and my world are using</span>
<span style=”color:orange”> different style with span</span>
</p>
HTML Images

<img src=”example.jpg”/>
We use attribute src to specify an image’s url or file path and attribute alt
to define the image if the image doesn’t exist
<img src = “example.jpg” alt=”I am alternate text for the image”/>
Image Sizing (width and height)
<img src = “example.jpg” width=”100” height=”100”/>
Floating Image (Left or right)

<p>
<img src=”images/star.png “ style=”float:left; width = 50px;height 50px”>
The Image is float left . The Image is float left ….. </p>
<p>
<img src=”images/star.png “ style=”float:right; width = 50px;height 50px”>
The Image is float left . The Image is float left ….. </p>
Image as a link

<a href=”http://www.google.com”>
<img src=”google.jpg” />
</a>
Image in Another Folder

Inside a folder in the root directory


<img src= “/images/example.jpg” />
From the same folder where the html file is
<img src= “example.jpg” />
Inside a folder in the same level as the HTML file
<img src = “images/example.jpg” />
Image From External Server

<img src=”http://example.com/image.jpg” />


HTML Tables
<thead> : table header
<tbody> : table body
<tfoot> : table footer
<tr> : table row -> colspan - how many column should a cell span
<td> : table data/cell -> rowspan - how many rows should a cell span
<colgroup> : specifies a group of one or more columns in a table
<col> : specifies column properties for each column in a column group
<caption> : defines a caption for a table
HTML Table Attributes

align : defines the alignment of a table


bgcolor: defines the background color of a table
border: defines the size of frame surrounding a table
cellpadding : defines the space between the content of a cell and its border
cellspacing : defines the space between two cell
HTML Lists

<ul> : defines an unordered list where the order is meaingingless and is


typically bulleted.
<ol> : defines an ordered list where the order is meaningful and is typically
numbered
<li> : a child element of both <ul> and <ol> elements that defines a list item
Lists Example

<p> Fruits </p> <p> Fruits </p>


<ul> <ol>
<li> Apples </li> <li> Apples </li>
<li> Oranges </li> <li> Oranges </li>
<li> Grapes </li> <li> Grapes </li>
</ul> </ol>
HTML Description Lists
<dl>
<dl> : defines a description list <dt> HTML </dt>
<dd>
<dt> : defines a description term HTML is hyper text
market language
<dd> : defines a description details </dd>
<dt> CSS </dt>
<dd>
CSS is Cascading Style
Sheet
</dd>
</dl>
HTML Javascript

JavaScript (JS) is a scripting language used to make a web page dynamic and
more interactive.
JS is a commonly used for form validation, dynamic content, effects and
image manipulation.
● <script type= “text/javascript”> …….</script>
● <script src= “my-script.js” ></script>
JavaScript Examples

● Alert Box
● Dynamic Content Example
● Dynamic Styles Example
● Hiding and Showing Example
● Dynamic Image Example
HTML Forms

HTML forms can be used to collect user data ,make login form, registration
form , a search form, a contact form etc.
<form> </form>
Forms Attributes

● Accept-charset: defines the character set of the form


● Action: specifies the form-haldler/page handler ; usually a .php page in
the server-side where the data is processed
● Autocomplete: tell the browser tho automatically complete Form
Element
● Enctype: defines the encoding of the data submitted by the form
● Method: defines teh HTTP method to use when submitting a form eg.
GET or POST
HTML Form Example

<form action = “page-handler.html” method= “GET”>


<input type = “text” name= “fullname” placeholder= “Full Name” /><br>
<input type= “text” name= “age” placeholder = “Age” /><br>
<input type= “text” name= “hobby” placeholder = “Hobby” /><br>
<input type= “submit” />
</form>
GET VS POST HTTP Methods
HTTP METHODS

GET POST

Default Vaue Not the default value

Less Secure More Secure

Data is written on the URL Data is not written on the URL


address address

More prone to hacking Less prone to hacking

Must not be used when Must be used for submitting


submitting personal data. personal data.
HTML Form Labels
An HTML form Labels is an inline element.
The <label> element defines an HTML Form Label.
<label for= “demo” > I am a label: </label> <br>
<input type= “text” id= “demo” />
Another way to associate a label to an input !
<label> I am a label:
<input type= “text” />
</label>
Styling HTML Form Lables
<style type= “text/css”>

label {

border: 1px inset #0076ff;

border-radius: 5px;

background: #428bca;

color: #fff;

padding: 5px;

Margin-right: 3px;

}
HTML5 Input Types
Text

<input type = “text” id= “text-demo” /><br>


<button onclick= “getTextValue( )”> Get Value </button>
<script type= “text/javascript”>
function getTextValue( ){
alert( document.getElementById(“demo”).value);
}
</script>
Checkbox

<input type = “checkbox” id = “checkbox-demo” /><br/>


<button onclick= “getCheckBoxValue( )” > Get Value </button>
<script type= “text/javascript”>
function getValue( ){
alert( document.getElementById(“checkbox-demo”).value);
}
</script>
Color
<input type = “color” id = “color-demo” /><br/>
<button onclick= “getColorValue( )” > Get Value </button>
<script type= “text/javascript”>
function getColorValue( ){
alert( document.getElementById(“color-demo”).value);
}
</script>
Date
<input type = “date” id = “date-demo” /><br/>
<button onclick= “getDateValue( )” > Get Value </button>
<script type= “text/javascript”>
function getDateValue( ){
alert( document.getElementById(“date-demo”).value);
}
</script>
Datetime Local
<input type = “datetime-local” id = “datetime-demo” /><br/>
<button onclick= “getDateTimeValue( )” > Get Value </button>
<script type= “text/javascript”>
function getValue( ){
alert( document.getElementById(“datetime-demo”).value);
}
</script>
Email

<p> Try entering an invalid email and click submit </p>


<form action= “page-handler.html”>
<input type= “email” id= “email-demo” name= “email” />
<input type= “submit” />
</form> <br/>
<button onclick = “getEmailValue()” > Get Value </button>
Con’t

<script type= “text/javascript” >


function getEmailValue(){
alert( document.getElementById(“email-demo”).value);
}
</script>
File
<input type = “file” id= “file-demo” onchange= “readFile();”/>

<img src = “” alt = “The image file will be shown here.” id = “result” />

<script type= “text/javascript” >

function readFile( ){

var reader = new FileReader();

var file = document.getElementById( “file-demo”).files[0];

reader.onload = function(e){

document.getElementById(‘result’).src = e.target.result;

reader.readAsDataURL(file);

</script>
Hidden

<input type= “hidden” value= “Hidden Value” id= “hidden-demo”/><br>


<button onclick= “getHiddenValue()” >Get Value </button>
<script type= “text/javascript”>
function getHiddenValue( ){
alert( document.getElementById(“hidden-demo”).value);
}
</script>
Month

<input type= “month” id= “month-demo” /> <br/>


<button onclick = “getMonthValue()”> Get Value </button>
<script type = “text/javascript”>
function getMonthValue( ){
alert( document.getElementById(“month-demo”).value);
}
</script>
Number

<p> Try entering an invalid number and click submit


<form action= “page-handler”>
<input type= “number” id= “nubmer-demo” />
<input type = “submit” />
</form>
<button onclick = “getNumberValue()”> Get Value </button>
Con’t

<script type = “text/javascript>


function getNumberValue(){
alert(document.getElementById(“number-demo”).value);
}
</script>
Password

<input type= “password” id= “password-demo” /> <br>


<button onclick = “getPasswordValue()”> Get Value </button>
<script type = “text/css”>
function getPasswordValue(){
alert(document.getElementById(“password-demo”).value);
}
</script>
Radio

<input type= “radio” name= “gender” value = “Male” id= “male” />
<label for = “male” > Male </label> <br>
<input type = “radio” name= “gender” value = “Female” id = “female” />
<labe for = “female” >Female </label> <br>
<button onclick = “getRadioValue()” > Get Value </button>
Con’t
<script type = “text/javascript”>

function getRadioValue(){

var radios = document.getElementsByName(‘gender’);

var number_of_radio = radios.length;

for(var i=0; i< number_of_radio ; i++){

if( radios[i].checked){

alert(radios[i].value);

</script>
Con’t

Index 0 Index 1

<input type = “radio” id = “male” /> <input type = “radio” id = “female”

Number of Radios = 2
Range

<input type = “range” id= “range-demo” /><br/>


<button onclick= “getRangeValue()” > Get Value </button>
<script type= “text / javascript”>
Function getRangeValue() {
document.getElementById(“range-demo”).value;
}
</script>
Search

<input type = “serach” id = “search-demo” /> <br/>


<button onclick = “getSearchValue();”>Get Value</button>
<script type= “text/javascript”>
alert(document.getElementById(“search-demo”).value);
</script>
Tel

<input type= “tel” id= “tel-demo” /><br>


<button onclick = “getTelValue();”>Get Value</button>
<script type= “text/javascript”>
function getTelValue(){
alert(document.getElementById(“tel-demo”).value);
}
</script>
Time
<input type= “time” id= “time-demo” /><br>
<button onclick = “getTimeValue();”>Get Value</button>
<script type= “text/javascript”>
function getTimeValue(){
alert(document.getElementById(“time-demo”).value);
}
</script>
Week

<input type= “week” id= “week-demo” /><br>


<button onclick = “getWeekValue();”>Get Value</button>
<script type= “text/javascript”>
function getWeekValue(){
alert(document.getElementById(“week-demo”).value);
}
</script>
URL

<p>Type entering an invalid url and click submit</p>


<form action= “pagehandler.html” >
<input type= “url” id= “url-demo”/>
<input type= “submit” />
</form>
<br/>
<button onclick = “getURLValue();”>Get Vaue</button>
Con’t

<script type= “text/javascript”>


function getURLValue(){
alert(document.getElementById(“url-demo”).value);
}
</script>
Text Area
<textarea row= “10” cols = “40” placeholder = “ Type your message here …”
id= “textarea-demo” ></textarea> <br>
<button onclick = “getTextAreaValue();”>Get Value </button>
<script type= “text/javascript” >
function getTextAreaValue(){
var value = document.getElementById(“textarea-demo”);
alert(value);
} </script>
Textarea with style
<style type= “text/css”>

textarea{

background-color: #f3f3f3;

color: #d9534f;

border: none;

outline: none;

resize: none;

</style>
HTML Dropdown List

<select id= “dropdown-demo”>


<option value= “Apple”> Apple </option>
<option value = “Orange” > Orange </option>
<option value = “Grapes” > Grapes </option>
<option value= “Strawberries”> Strawberries </option>
</select>
<button onclick = “getDropdownValue();”>Get Value</button>
Con’t

<script stype= “text/javascript”>


function getDropdownValue(){
var value = document.getElementById(‘dropdown-demo’).value;
alert(value);
}
</script>
Multiple Options Allowed

<select id= “multi-dropdown” multiple>


<option value= “Apple”> Apple </option>
<option value = “Orange” > Orange </option>
<option value = “Grapes” > Grapes </option>
<option value= “Strawberries”> Strawberries </option>
</select>
<button onclick = “getDropdownMultipleValue();”>Get Value</button>
Con’t
functon getDropdownMultipleValue(){

var _options = document.getElementById(‘multi-dropdown’).options;

var _options_count = _options.length;

var value = [ ];

for( var i = 0 ; i < _option_count ; i++){

if(options[i].selected){

value.push(options[i].value);

alert(JSON.stringnify(value));

}
HTML5 Forms Elements Attributes

● autocapitalize
● autocomplete
● autofocus
● disabled
● max
● maxlength
● min
● minlength
Con’t

● multiple
● name
● pattern
● placeholder
● readonly
● required
● spellcheck
● wrap
Attribute autofocus

<input type= “text” autofocus />


Attribute disabled

<input type = “text” value = “I’m disabled.” diabled />


<textarea disabled> I am disable. </textarea>
<select disable>
<option value = “Option 1” > Option 1</option>
<option value = “Option 2” > Option 2 </option>
</select>
Attribute max

<form acton = “page-handler.html” >


<input type = “date” max = “2022-12-31” />
<input type = “number” max = “5” />
<input type = “submit” />
</form>
Attribut maxlength

<label>
The input below only allow allow a maximum of 5 characters
<input type= “text” maxlength = “5”/>
</label>
Attribute min

<form acton = “page-handler.html” >


<input type = “date” min = “2000-12-31” />
<input type = “number” min = “5” />
<input type = “submit” />
</form>
Attribute minlength

<p> The input below only allows a minimum of five characters


<form action = “page-handler.html”>
<input type = “text” minlength = “5” />
<input type = “submit” />
</form>
HTML5 Form Elements Attributes pt.2

● multiple
● name
● pattern
● placeholder
● readonly
● required
● spellcheck
● wrap
Attribute multiple

<p> The user can now select multiple files


<input type = “file” multiple />
Attribute name

<p> After submitting the form below the pagehandler can get the value of
the input by referring to its name. </p>
<form action = “page-handler.html”>
<input type = “text” name= “demo”/>
<input type = “submit” />
</form>
Attribute pattern

<p> Try to fill the text field with a non-alphanumeric value then submit the
form.
<form action = “page-handler.html”>
<input type = “text” patter= “[a-zA-Z0-9]+” title = “alphanumeric
only”/>
<input type = “submit” />
</form>
Attribute placeholder

<input type = “text” placeholder = “Hi I’m a placeholder” />


Attribute readonly

<input type = “text” value = “ I can only read but not edited” readonly />
<textarea readonly>
I can only be read and selected but not edited
</textarea>
Attribute required

<p>Try submitting the form below without filing up the form


<form action = “page-handler.html”>
<input type = “text” required />
<input type = “submit”>
</form>
Con’t

● Buttons
● HTML Content Editable
● HTML Meta
● HTML Blockqoute
● HTML nbsp
● HTML Subscript Text
● HTML Superscript Text
● Pre Element
Con’t

● Figures
● Character Entities
● Audios
● Videos
● Iframe
● YoutubeVideos
CSS
CSS

● Cascading Stylesheet
● A Stylesheet language used to describe the presentation of an HTML
● CSS describes how elements should be rendered on screen.
Con’t

● CSS Syntax
● CSS Selectors
● CSS Comments
● CSS Inserting
○ Internal Style Sheet
○ External Style Sheet
○ Inline Styling
● CSS Colors
CSS Syntax:

Selector {
property : value ;
property : value ;
property : value ;
}
CSS Module 2

● CSS Backgrounds
○ background-color
○ background-image
○ background-repeat
○ background-attachment
○ background-position
● CSS Borders
● CSS Margins
● CSS Paddings
● CSS Width and Height
CSS Module 3

● Box Models
● Text
● Fonts
● Icons
● Links
Box Model
Text

● Text Color
● Text Align
● Text Transform
● Text Indent
● Text Decoration
● Text Shadow
● Letter Spacing
● Word Spacing
● Line Height
● Text Direction
CSS Fonts

● Font Family
● Font Size
● Font Style
● Font Weight
● Font Variant
CSS Icons

● Font Awesome Icons


● Bootstrap Icons
● Material Icons
CSS Module 4

● Lists
● Tables
● Outline
● Buttons
● Images
CSS Module - 5

CSS Layout - The display Property


CSS Layout - width and max-width
CSS Layout - Positioning
CSS Layout - Overflow
CSS Layout - float and clear
CSS Layout - inline -block
CSS Layout - Horizontal and Vertical Align
CSS Module - 6

● Combinators
● Pseudo-classes
● Pseudo-elements
● Attrubute Selectors
● Opacity
● Rounded Corner
● Border Images
CSS Module - 7

● CSS3 rgba color


● CSS3 backgrounds
● CSS3 gradients
● CSS3 Shadow Effects
● CSS3 Web Font ( Google Font )
● CSS3 2D Transforms
● CSS3 3D Transforms
CSS Module - 8

● CSS 3 Transitions
● CSS 3 Animations
● CSS 3 Multiple Columns
● CSS 3 User Interface
CSS Module - 9

● CSS 3 Box Sizing


● CSS 3 Flexible Boxes
● CSS 3 Media Queries
CSS Module - 10

● Navbar
● Dropdown
● Footer
● Pagination
● Breadcrumbs
● Tooltips
CSS Module - 11

● Lightbox
● Image Gallary
● Accordion
● Counter
● CSS Columns
Javascript

Javascript is a programming or a scripting language that allows the


implementation of features on web pages.
Look Back
HTML ( Hypertext Market Language ) elements are the building blocks of
web pages.
CSS ( Cascading Style Sheet) is used for designing HTML elements.
Javascript on the other hand, is what implements the features of web pages.
What Javascript Can Do?

● Change the content of HTML Element


● Change the value of attributes
● Change the styling of HTML elements
● Show or Hide HTML elements
Javascript Projects

● JS Clock
● JS Stopwatch
● JS Note Project
● JS Live User Filter
JS Module - 1

● Display Output
● Statement
● Syntax
● Comments
● Variables
● Datatypes
JS Module - 2

● Operators
● Arithmetic Operators
● Assignment Operators
● Comparison Operators
● Logical & Conditional Operators
JS Module - 3

● Functions
● Objects
● Strings
● String Methods
● Numbers
● Number Methods
JS Module - 4

● Arrays
● Array Methods
● Array Sorting
● Array Iteration
JS Module - 5

● Events
● Math Object
● Math Random
● Conditional Statement - if … else
● Conditional Statement - switch
JS Module - 6

● For Loop
● For Of Loop
● While Loop
● Break and Continue
JS Module - 7

● Timeout and Interval


● Bitwise Operators
● Regular Expressions
● Exception Handling
JS Module - 8

● Variable Scope
● Variable Hoisting
● Strict Mode
● let
● const
JS Module - 9

● Dates
● Date Formats
● Date Get Methods
● Date Set Methods
JS Module - 10

● this Keyword
● Arrow Function
● Classes
● JSON
JS Module - 11

● Form
● Form Inputs
● Reserved Keywords
DOM - Document Object Model

● DOM Introduction
● DOM Selectors
● DOM Nodes
● DOM Navigation
● DOM HTML
● DOM CSS or Styling
● DOM Effects
● DOM Events
Document Object Model ( DOM )

As you already know, the backbone of an HTML document is elements.


When an HTML document is loaded, the browser creates an HTML
Document Object Model or HTML DOM.
What is the DOM?
The DOM is created by the browser when an HTML document is loaded.It is
a “tree structure” representation of an HTML Structure. The DOM tree
contains all the elements in a document.
Con’t
<!DOCTYPE html>
<html>
<head>
<title> The Title </title>
</head>
<body>
<div>
<h1> A Header </h1>
<p> A Paragraph </p>
</div>
</body>
</html>
DOM and JavaScript

With JavaScript, we can do many useful things to the DOM


● JS can change an HTML element’s content.
● JS can add attributes to an HTML elements.
● JS can change an HTML element’s attribute value.
● JS can change an HTML element’s styles.
● JS can add HTML elements to other HTML elements.
● JS can remove an HTML element.
● JS can listen to events that happen to an HTML element.
JavaScript DOM Selectors

With JS, we can select any element from the DOM tree using the document
object.
Why do we select elements?
● To get their content.
● To change their content.
● To style them.
● To get or change their attribute.
● To remove them and many more …
Select the Topmost Elements

The topmost elements can be selected directly from the document object
properties.
● document.documentElement selects <html>
● document.head selects <head>
● document.body selects <body>
Let’s check VS Code!
Other Select Elements

● Select an Element By ID
● Select Elements by Class Name
● Select Elements by Tag Name
● Select Elements by Name
● Select Elements Using CSS Selectors
DOM Nodes

In a DOM tree, every element is an object. For example, the document.body


object represents the <body> element.
What is a Node?
A node is any object in the DOM tree.
Therefore, a node can be any HTML elements such as <html>, <body> ,
<head> and all the other elements.
Example
<!DOCTYPE html>
<html>
<head>
<title> The Title </title>
</head>
<body>
<div>
<h1> A Header </h1>
<p> A Paragraph </p>
</div>
</body>
</html>
Node Relationships

The nodes in the DOM tree have relationships with each other.
We use the terms parent, child and sibling to describe their relationships.
Let’s take a look at out example DOM tree again:
Con’t
Con’t

● <html> is the root or top node meaning it has no parents


● <html> is the parent of <head> and <body>
● <head> is the first child of <html>
● <body> is the last child of <html>
● <head> has one child: <title>
● <body> has two children: <h1> and <p>
● <h1> is the first child of <body>
● <p> is the last child of <body>
● <head> and <body> are siblings | <h1> and <p> are also
Con’t

Even the text inside the elements are considered as nodes, they are called
text nodes.
Therefore:
● “The Title” is a child of <title>
● “A Header” is a child of <h1>
● “A Paragraph” is a child of <p>
Note! In a Document Object Model tree, everything is a node.
JS Navigating Nodes

Navigating nodes means reaching nodes in the DOM tree.


The following document object properties are sued to navigate nodes:
● parentNode
● firstChild
● lastchild
● childNodes[index]
● previousSibling
● nextSibling
Navigating Element Nodes

The following document object properties are used to navigate element


nodes:
● parentElement
● firstElementChild
● lastElementChild
● children[index]
● previousElementSibling
● nextElementSibling
Parent and Children

The parentElement property returns the DOM node’s parent element.


In this example, we will select the <p> element’s parent element which is
the <div>.
Then we will change it’s background color using style.background property.
Con’t

● firstElementChild
● lastElementChild
● children
Siblings

● previousElementSibling
● nextElementSibling
JavaScript DOM HTML

In this lesson, we will study about the amazing things that we can do to
HTML using the DOM.
● Getting Element’s Content
● Replacing Element’s Content
● Creating Elements ( Nodes )
● Inserting to Elements
● Removing Elements
Working With Attributes

With JavaScript and DOM, we can get,set and change an attribute’s value.
● Getting Attribute Value
● Setting or Changing Attribute Value
JS DOM CSS or Styling

With Javascript and DOM, we can style HTML elements.


In CSS, as you already know, styling elements means changing their
properties. It’s the same with JavaScript.
● Styling Elements With DOM
● Hiding and Showing an Element
What about properties with hyphen?

Properties with hyphen like font-size, text-decoration and


background-color should be written in camel-case.
For example
● font-size = fontSize
● text-decoration = textDecoration
● background-color = backgroundColor
Let’s check the VS Code!
JS DOM Effects

With css, javascript and DOM we can create effects that can be applied to
elements
● Fading Effects
● Fade Out
● Fade In
● Sliding Effect
JavaScript DOM Events

With JavaScript and DOM , we can listen to events that happen to elements.
For example, we can listen then do something when a button is clicked.
The addEventListener( ) Method
The addEventListener() method sets up a function that will be called
whenever the specified event is fired to the element.
Con’t

element.addEventListener(eventType,listenerFunction)
● Click Event
● Load Event
● Change Event
BOM - Browser Object Model
What is the BOM?

● BOM stands for Browser Object Model


● BOM deals with browser components
The Window Object

The Window represents the current browser window.


All variable and functions declared in the global scope become properties of
the window object.
For Example, ( VS Code )
● Window Object
● Window Width and Height
Window Object Properties

The window object also contains the following objects


● document
● screen
● location
● history
● navigator
As we notice, we have already studied the document object. In the next
lesson, we will study the other window object.
JS BOM Screen

The window.screen object is used for inspecting properties of the screen.


Jus like other window properties, it can be accessed without the window
prefix.
The screen object contains the following properties: ( VS Code )
● width
● availWidth
● height
● orientation , pixelDepth, colorDepth
Javascript BOM Location

The window.location object is used to return information about the current


location of the page.
Just like other window properties, it can be accessed without the window
prefix.
The location object contains the following properties:
● href
● protocol
● hostname , pathname
JS BOM History

The window.history object provides an interface for manipulating the


browser history. Just like other widows properties, it can be accessed
without the widow prefix.
The history object contains the following properties and methods:
● length
● back()
● forward()
The length Property

The length property returns an integer representing the number of pages in


the session history.
If you want this property, go the console and type “history.lenght”
The back() Method

The back() method loads the previous page from the history list.
If you want to try this method, go to console and type “history.back()”
The forward() Method

The forward() method loads the next page from the history list. If you want
to try this method: go to console and type “history.forward()”
JS BOM Navigator

The window.navigator object represents the state and the identity of the
user’s browser.
Just like other window properties, it can be accessed without the window
prefix.
The navigator object contains the following properties:
platform, language , appName , appCodeName , appVersion , userAgent ,
onLine
JS BOM Pop-up Box

With JS, we can show pop-up (dialog) boxes to the user.


There are three types of pop-up boxes:
● Alert Pop-up Box
● Confirm Pop-up Box
● Promt Pop-up Box
Javascript BOM Cookies
A web cookie or a cookie is a small piece of data that a server sends to a
user’s browser.
The browser may store it and sent it back to the same server with the next
request.
Cookies are used for these purposes:
● Session management - logins,shopping carts, game scores, or anything
else the server should remember
● Personalization - user preferences themes, and other settings
● Tracking - recording and analyzing user behavior
Creating a Cookie

To create a cookie, use the document.cookie property.


Syntax,
document.cookie = “name=value”
For example,
document.cookie = “firstName=John;lastName=Doe”;
Cookies are deleted when the browser is closed.
Con’t

Add an expiry date ( in UTC ) so that it does not get closed when the
browser is closed.
document.cookie = “firstName=John”;
expires=Mon, 21 Apr 2025 12:00:00 UTC”
Getting a Cookie Value

var cookie = document.cookie;


//return a string containing all cookies
Changing a Cookie Value

Document.cookie = “firstName=Jane”;
Delete a Cookie

document.cookie = “firstName=;age=0”;
Boostrap
What is Boostrap?

Bootstrap is a powerful, feature-packed frontend toolkit. Build


anything—from prototype to production—in minutes.
Typography & Color Theory

You might also like