Scribd
Upload
25 views35 pages

Web Basic

web basic

Uploaded by

Funny Virus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views35 pages

Web Basic

web basic

Uploaded by

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

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

You might also like