Introduction to HTML Fundamentals
Introduction to HTML
Lesson Objectives
•
Why Learn HTML, CSS and JavaScript?
•
What is HTML?
•
What is CSS?
•
What is JavaScript?
•
Tools to write HTML, CSS and JavaScript
•
Structure of a HTML Document (2 Parts)
•
Basic HTML Tags
<html>, <head>, <title>, <body>
TIP to learning HTML
•
PRACTICE typing the code so your brain can learn and remember the
syntax.
•
**DO NOT** copy and paste.
Why Learn HTML, CSS and JavaScript
1.
HTML is to tell the browser what content is being displayed.
•
HTML – HyperText Markup Language
2.
CSS is used to add color and style to the web page.
•
CSS – Cascading Style Sheet
3.
JavaScript is one of the 3 languages all web developers must learn.
•
JavaScript is to program the behavior of web pages to make it interactive.
What is HTML?
1.
HyperText Markup Language (HTML)
is the standard markup language
for creating web pages.
•
Web browsers receive HTML documents from a web server and determines how to
display the document.
2.
HTML is to tell the browser what content is being displayed.
3.
Cascading Style Sheet (CSS)
is used to add color and style to the web
page..
4.
JavaScript
is to program the behavior of web pages to make it dynamic
and interactive.
Tools to write HTML, CSS and JavaScript
1.
A simple Text Editor
•
Windows – Notepad or Notepad++
•
Mac - TextEdit
2.
Browser
Additional tools to write HTML, CSS and
JavaScript
1.
Integrated Development Environment (IDE)
•
Windows – Visual Studio or research any available.
2.
Browser
Structure of a HTML Document – 2 Distinct
Parts
Head part
Body part
HTML Tag Syntax
•
An HTML element consists of a
<start>
tag
•
and a
</end>
tag
•
with the
content in between
<p>
This is a story of
</p>
Tag names
•
Are
NOT
case sensitive
•
<P> and <p> are the same.
•
W3C
recommends lowercase.
What is W3C? (www.w3.org)
•
World Wide Web Consortium
•
An international consortium of companies involved with
the
Internet
and the
Web
.
•
The W3C was founded in 1994 by Tim Berners-Lee, the original
architect of the World Wide Web.
•
The organization's purpose is to develop
open
standards
so that the
Web evolves in a single direction rather than being splintered among
competing factions.
Basic HTML Tag
<
h
t
m
l
>
o
p
e
n
i
n
g
t
a
g
<
/
h
t
m
l
>
c
l
o
s
i
n
g
t
a
g
Structure of a HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Title of Web Page</title>
</head>
<body>
Everything to be displayed on your web page goes here!
</body>
</html>
<
h
t
m
l
>
E
v
e
r
y
H
T
M
L
d
o
c
u
m
e
n
t
b
e
g
i
n
s
w
i
t
h
a
o
p
e
n
i
n
g
<
h
t
m
l
>
t
a
g
a
n
d
e
n
d
s
w
i
t
h
a
c
l
o
s
i
n
g
<
/
h
t
m
l
>
t
a
g
.
<
!
D
O
C
T
Y
P
E
h
t
m
l
>
<
h
t
m
l
>
<
/
h
t
m
l
>
H
e
a
d
p
a
r
t
-
<
h
e
a
d
>
<
/
h
e
a
d
>
1.
Most of the elements that go in the <head> part are for search
engines.
2.
The <title> tag is an important tag that is nested inside the <head>
tags.
<
h
e
a
d
>
<
t
i
t
l
e
>
T
i
t
l
e
o
f
w
e
b
p
a
g
e
<
/
t
i
t
l
e
<
/
h
e
a
d
>
Nested Elements
<html>
<head>
<title>The Title of the Web Page</title>
</head>
<body>
…
</body>
</html>
<
t
i
t
l
e
>
…
.
<
/
t
i
t
l
e
>
•
The <title> tag is nested.
•
Write a unique title for each page.
•
Used when you bookmark
•
Search Engines
<
h
e
a
d
>
<
t
i
t
l
e
>
T
h
i
s
i
s
m
y
f
i
r
s
t
w
e
b
p
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
b
o
d
y
p
a
r
t
-
<
b
o
d
y
>
<
/
b
o
d
y
>
The body section is the main part of your page. Everything between the
opening <body> and closing </body> will be displayed on your web page.
<
b
o
d
y
>
Hello World!!
<
/
b
o
d
y
>
Structure of a HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Title of Web Page</title>
</head>
<body>
Everything to be displayed on your web page goes here!
</body>
</html>
H
T
M
L
P
a
r
a
g
r
a
p
h
s
<
p
>
<
p
>
T
h
i
s
i
s
a
p
a
r
a
g
r
a
p
h
<
/
p
>
<
p
>
T
h
i
s
i
s
a
n
o
t
h
e
r
p
a
r
a
g
r
a
p
h
<
/
p
>
HTML Headings <h1> to <h6>
<h1> to <h6> tags
<
h
1
>
L
a
r
g
e
s
t
H
e
a
d
i
n
g
<
/
h
1
>
<
h
6
>
S
m
a
l
l
e
s
t
H
e
a
d
i
n
g
<
/
h
6
>
H
T
M
L
L
i
n
k
s
<
a
>
<
a
h
r
e
f
=
“
h
t
t
p
s
:
/
/
w
w
w
.
g
o
o
g
l
e
.
c
o
m
”
>
T
h
i
s
l
i
n
k
t
o
g
o
t
o
G
o
o
g
l
e
<
/
a
>
H
T
M
L
I
m
a
g
e
s
<
i
m
g
>
<img> - defines an image.
src = image source file
alt = alternative text
width and height are attributes of the image.
<
i
m
g
s
r
c
=
“
w
3
s
c
h
o
o
l
s
.
j
p
g
”
a
l
t
=
“
W
3
S
c
h
o
o
l
s
.
c
o
m
”
w
i
d
t
h
=
“
1
0
4
”
h
e
i
g
h
t
=
“
1
4
2
”
>
Sample HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
H
T
M
L
L
i
s
t
s
<
u
l
>
-
u
n
o
r
d
e
r
e
d
(
b
u
l
l
e
t
l
i
s
t
)
<
u
l
>
<
l
i
>
C
o
f
f
e
e
<
/
l
i
>
<
l
i
>
T
e
a
<
/
l
i
>
<
l
i
>
M
i
l
k
<
/
l
i
>
<
/
u
l
>
H
T
M
L
L
i
s
t
s
<
o
l
>
-
o
r
d
e
r
e
d
(
n
u
m
b
e
r
e
d
l
i
s
t
)
<
o
l
>
<
l
i
>
M
c
D
o
n
a
l
d
s
-
H
a
g
a
t
n
a
<
/
l
i
>
<
l
i
>
M
c
D
o
n
a
l
d
s
-
M
a
i
t
e
<
/
l
i
>
<
l
i
>
M
c
D
o
n
a
l
d
s
-
T
a
m
u
n
i
n
g
<
/
l
i
>
<
/
o
l
>
Displaying Preformatted Paragraphs <pre>
<h1>The Twelve Days of Christmas</h1>
<
p
r
e
>
O
n
t
h
e
f
i
r
s
t
d
a
y
o
f
C
h
r
i
s
t
m
a
s
m
y
t
r
u
e
l
o
v
e
s
e
n
t
t
o
m
e
:
A
P
a
r
t
r
i
d
g
e
i
n
a
P
e
a
r
T
r
e
e
On the second day of Christmas
my true love sent to me:
2 Turtle Doves
and a Partridge in a Pear Tree
<
/
p
r
e
>
HTML Document Tag Explained
<!DOCTYPE html>
- declaration defines the document to be
HTML5.
<html>
element declared to be HTML page.
<head>
element contains meta information about the
document.
<title>
element specifies a title for the document.
<body>
element contains the visible page content
<p>
element defines a paragraph
HTML Document Tag Explained
<h1>
element defines a large heading
<br>
element defines a line break **no end tag
<a>
element defines a hyperlink
<img>
element defines a image
<hr>
element used to define thematic break in your document
content **no end tag
HTML Document Tag Explained
<ol>
element defines a numbered list
<ul>
element defines a bullet list
<li>
element defines a list item
<pre>
element defines a preformatted text
Empty Elements
•
HTML elements with no content are empty elements.
•
Empty elements do not have a end tag.
Saving your HTML document
1.
File name – enter lowercase.
2.
File name extension – enter .html
3.
File type – Select All files.
BEST ADVICE
•
Use the many Internet
resources to view examples of
how to write HTML code.
Explore the basics of HTML, CSS, and JavaScript with lessons on their importance, definitions, tools for writing, and the structure of an HTML document. Learn why mastering these languages is essential for web development and discover tips for effective learning methods.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Lesson Objectives Why Learn HTML, CSS and JavaScript? What is HTML? What is CSS? What is JavaScript? Tools to write HTML, CSS and JavaScript Structure of a HTML Document (2 Parts) Basic HTML Tags <html>, <head>, <title>, <body>
TIP to learning HTML PRACTICE typing the code so your brain can learn and remember the syntax. **DO NOT** copy and paste.
Why Learn HTML, CSS and JavaScript 1. HTML is to tell the browser what content is being displayed. HTML HyperText Markup Language 2. CSS is used to add color and style to the web page. CSS Cascading Style Sheet 3. JavaScript is one of the 3 languages all web developers must learn. JavaScript is to program the behavior of web pages to make it interactive.
What is HTML? 1. HyperText Markup Language (HTML) is the standard markup language for creating web pages. Web browsers receive HTML documents from a web server and determines how to display the document. 2. HTML is to tell the browser what content is being displayed. 3. Cascading Style Sheet (CSS) is used to add color and style to the web page.. 4. JavaScript is to program the behavior of web pages to make it dynamic and interactive.
Tools to write HTML, CSS and JavaScript 1. A simple Text Editor Windows Notepad or Notepad++ Mac - TextEdit 2. Browser
Additional tools to write HTML, CSS and JavaScript 1. Integrated Development Environment (IDE) Windows Visual Studio or research any available. 2. Browser
Structure of a HTML Document 2 Distinct Parts Head part Body part
HTML Tag Syntax An HTML element consists of a <start> tag and a </end> tag with the content in between <p>This is a story of </p>
Tag names Are NOT case sensitive <P> and <p> are the same. W3C recommends lowercase.
What is W3C? (www.w3.org) World Wide Web Consortium An international consortium of companies involved with the Internet and the Web. The W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide Web. The organization's purpose is to develop openstandards so that the Web evolves in a single direction rather than being splintered among competing factions.
Basic HTML Tag <html> <html> opening tag </html> </html> closing tag
Structure of a HTML Document <!DOCTYPE html> <html> <head> <title>Title of Web Page</title> </head> <body> Everything to be displayed on your web page goes here! </body> </html>
<html> <html> Every HTML document begins with a opening <html> tag and ends with a closing </html> tag. <!DOCTYPE <!DOCTYPE html> <html> <html> html> </html> </html>
Head part - <head> </head> <head> </head> 1. Most of the elements that go in the <head> part are for search engines. 2. The <title> tag is an important tag that is nested inside the <head> tags. <head> <head> <title>Title of web page</title <title>Title of web page</title </head> </head>
Nested Elements <html> <head> <title>The Title of the Web Page</title> </head> <body> </body> </html>
<title> . </title> <title> . </title> The <title> tag is nested. Write a unique title for each page. Used when you bookmark Search Engines <head> <head> <title>This is my first web page </title> <title>This is my first web page </title> </head> </head>
body part - <body> </body> <body> </body> The body section is the main part of your page. Everything between the opening <body> and closing </body> will be displayed on your web page. <body> <body> Hello World!! </body> </body>
Structure of a HTML Document <!DOCTYPE html> <html> <head> <title>Title of Web Page</title> </head> <body> Everything to be displayed on your web page goes here! </body> </html>
HTML Paragraphs <p> <p> <p> <p>This is a paragraph</p> </p> <p> <p>This is another paragraph</p> </p>
HTML Headings <h1> to <h6> <h1> to <h6> tags <h1> <h1>Largest Heading</h1> </h1> <h6> <h6>Smallest Heading</h6> </h6>
HTML Links <a> <a> <a <a href= https://www.google.com > >This link to go to Google</a> </a>
HTML Images < <img img> > <img> - defines an image. src = image source file alt = alternative text width and height are attributes of the image. < <img img src= w3schools.jpg alt= W3Schools.com width= 104 height= 142 > >
Sample HTML Document <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </html>
HTML Lists <ul> <ul> - unordered (bullet list) <ul> <ul> <li> <li>Coffee</li> <li> <li>Tea</li> </li> <li> <li>Milk</li> </ul> </ul> </li> </li>
HTML Lists < <ol ol> > - ordered (numbered list) < <ol ol> > <li> <li>McDonalds - Hagatna</li> <li> <li>McDonalds - Maite</li> <li> <li>McDonalds - Tamuning</li> </ </ol ol> > </li> </li> </li>
Displaying Preformatted Paragraphs <pre> <h1>The Twelve Days of Christmas</h1> <pre> <pre>On the first day of Christmas my true love sent to me: A Partridge in a Pear Tree On the second day of Christmas my true love sent to me: 2 Turtle Doves and a Partridge in a Pear Tree </pre> </pre>
HTML Document Tag Explained <!DOCTYPE html> - declaration defines the document to be HTML5. <html> element declared to be HTML page. <head> element contains meta information about the document. <title> element specifies a title for the document. <body> element contains the visible page content <p> element defines a paragraph
HTML Document Tag Explained <h1> element defines a large heading <br> element defines a line break **no end tag <a> element defines a hyperlink <img> element defines a image <hr> element used to define thematic break in your document content **no end tag
HTML Document Tag Explained <ol> element defines a numbered list <ul> element defines a bullet list <li> element defines a list item <pre> element defines a preformatted text
Empty Elements HTML elements with no content are empty elements. Empty elements do not have a end tag.
Saving your HTML document 1. File name enter lowercase. 2. File name extension enter .html 3. File type Select All files.
BEST ADVICE Use the many Internet resources to view examples of how to write HTML code.
