WEB DESIGN & DEVELOPMENT BASIC
What is HTML
HTML (Hypertext Markup Language) is not
programming language.
HTML Use In
• HTML are use for creating web
page or web content
What are need for starting HTML
Text editor(Note, Atom, Sublime Text, VS
code and etc..)
In this class, we will use Atom
Web browser (google chrome, Firebox,
Safari and etc..)
Let start HTML
• Create new folder at your desktop(eg.
webDesignBasic)
• Open Atom
• Choice File > Add project folder > path to
desktop > webDesignBasic
• Double click or right click on the project folder.
• Add new file
• test.html
Let start HTML
• Open test.html in Atom
• Add following HTML code.
• <h1>Hello World!</h1>
• Save the file (by click Ctrl+s or file> save)
• Go to webDesignBasic folder
• Open test.html
Add p element
• Go back to Atom
• Add following HTML code.
• <p>Hey I am p element. You can use in paragraph
description</p>
• Save the file (by click Ctrl+s or file> save)
• Go to opened browser
• Refresh the page
Structure of HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
Description of <!DOCTYPE html>
• This is declaration for HTML 5.
• If we remove or not include this in
html file, nothing change code or
description.
• If we add this, our web page will use
HTML 5 version.
Description of <html lang="en" dir="ltr">
• This is declaration for html tag with
formatting.
• In html tag, lang tag is for language
set for webpage.
• In html tag, dir tag for direction of web
page.
• For dir tag, there are two value ltr (left
Description of <head>
• This is declaration for web page
header.
• In this tag, many tags can insert like
meta, title, link and script.
• In meta tag, charset is for character
encoding.
• In this tag, title tag for web page title
Description of <body>
• This is declaration for web page
content.
• In this tag, many tags can use.
HTML Elements
•Block level Elements
• <p>,<img>,<br>,…
•Inline Elements
• <em>,<strong>,<a>,…
•Nesting Elements
• <p>I love <strong> Node js </strong>
Language.</p>
•Empty Elements
• <img src=“/images/test.png”>
HTML Attributes
Almost Attribute have the name and value
paire
Some Attribute have Boolean value(Boolean
Attribute).
<input type = “text” disabled>
Same as disabled = “disabled”
HTML Tags in Body
<h1></h1>~<h6></ Heading tags
h6>
<p>, <p> </p> Paragraphs tag.
<br> Line BRake tag.
<span></span> It is used to group inline-elements in a document. This
tag provides no visual change by itself.
<ul></ul> Unordered List
<ol></ol> Ordered List
HTML Tags in Body
<li></li> List Item
<em></em> EMphasis tag
<strong></strong> STRONG importance
<a> Anchor or hyperlink tag =>In href: mailto:, javascript:
<a href="https://www.mozilla.org/en-
US/">the Mozilla homepage</a>.
<label></label> define a LABEL for an HTML form widget.
<div></div> a DIVision or a section in an HTML document.
HTML Table
HTML table tag are used for creating HTML table
<table></table> Table tag
<tr></tr> Table Row tag
Table Data tag.
<td></td>
Atrrs: colspan, rowspan
<thead></thead> Table header tag.
<tbody></tbody> Table body tag
<tfoot></tfoot> Table footer tag
<th></th> Table Header tag
HTML Form
HTML form are used for submitting form data
Attribute Description
The name of the element; this is submitted with the
name
form data.
value The element's initial value.
specifies a unique id for an HTML element (the value must
id
be unique within the HTML document)
readonly Cannot modify value
Cannot modify and the value is never sent with the rest of
disabled
the form data
class Set CSS class name
style Set CSS
width Set element width
height Set element height
What is CSS
CSS(Cascading Style Sheets) is
the code
you to style your webpage
Why use CSS
• In Web page, Only HTML code is not
looking good for web page.
• For nice one web page need to add
CSS.
• For example, B&W TV vs Color TV.
CSS Style Type
External Stylesheet
Internal Stylesheet
Inline Stylesheet
CSS Syntax
selector
P{
color : red;
declaration
property} value
CSS Selector
Element selector
Element selector: Use elements
Class selector
Class selector: Use elements class name, .className
Id selector
Id selector: Use elements ID, #id
CSS Selector
Combinators
, : Same style group
‘ ‘(Spaces) : inner elements
> : child elements
+: Next sibling element
~: Next all sibling elements
Attribute selector
[attr]
[attr=val]
|=, ^=, $=, *=
CSS Selector
Pseudo-classes
What is JavaScript
JavaScript is a cross-platform, object-
oriented scripting language.
Client-side JavaScript extends the core
language by supplying objects to control
a browser and its Document Object Model
(DOM).
Server-side JavaScript extends the
core language by supplying objects
relevant to running JavaScript on a
server.
How to add
Internal JavaScript
External JavaScript
Inline JavaScript handlers
Comments
A Single line comments
A Multi-line comments
Troubleshooting
Type of error
Syntax errors: These are spelling
errors in your code that actually cause
the program not to run at all, or stop
working part way through
Logic errors: These are errors where
How to fix
theerrors
syntax is actually correct but the
code is not whatTools’
Use ‘Developer you intended it to be
Use ‘console.log()’ function
Variable
What is variable?
A variable is a container for a value
Declaring a variable
With initial value With no value: set undefined
Variable types
Numbers
Strings
Booleans
Arrays
Objects
Numbers
Creating a number Arithmetic operators
+ addition
-
Types of numbers Subtraction
Integers *
aFloats Multiplication
Doubles / Division
Binary, Octal, Hexadecimal %
Reminder(modulo
)
Numbers
Assignment operators Comparison operators
=== Strict equality
= assignment !== Strict non equality
+= Addition assignment. == Equal
e.g. x +=3 same as x = x != not equal
+3 < Less than
-=, *=, /= > Greater than
<= Less than equal
>= greater than
equal
Strings
Create a string
Single quotes vs. double quotes
Concatenating strings
Numbers vs. strings
Add a string and a number: convert to string
Strings
Convert
String to number: Number() function
Number to string: String.toString() method
😌Missions😌
Creating calculator
1. Create two input with number type
2. Create four button with sum, sub,
multi, div
3. When click one button, calculate the
two number.
4. Show result with alert
