Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
39 views

Week 10 - Getting Started in HTML5 Program

ITE6101 - Computing Fundamentals

Uploaded by

study.guide
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

Week 10 - Getting Started in HTML5 Program

ITE6101 - Computing Fundamentals

Uploaded by

study.guide
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Module 008 Getting Started with HTML5 Program

At the end of this module you are expected to:


1. Explain what is HTML
2. Discuss the history of HTML
3. Explain how HTML programs work

Lesson 1: What is HTML?


The World Wide Web and Websites
A website is a collection of information located on a server connected to the World Wide Web
(WWW). Websites include links to other sites in the form of hypertext, highlighted or
colored text that a user can click on using the mouse cursor, instructing their computer to
jump to a certain web page or website.

Every website has a specific web address on the WWW. These addresses end with extensions
that indicate the type of organization providing the website, for example, .gov for
government agencies, .edu for academic institutions, and .com for commercial enterprises. A
user's computer must have an Internet connection and a browser to retrieve and read
information from a website.
0

You.

Figure 1: Examples of Famous Websites


Source:
bttps://ima~esyc.timejncapp.com/v3/mmfjma~e?url=htt.r;>s%3A%2E%2Etimedotcom.files.wordpress.com%2F2017%2F
1 0%2Fwebsjtes,jp~&w= 1600&q=70
Date Retrieved: October 15, 2018
HTML Defined
HTML or Hypertext Markup Language is mark-up language used to create webpages
and/or websites. A markup language is being utilized to create a webpage to show the
multimedia documents. The Hypertext Markup language is the standard language used on
web for developing websites

Hypertext is the method by which you move around on the web by clicking on special text
called hyperlinks which bring you to the next page. While markup is used to format the
appearance of your website. Basically, HTML describes what a website looks like.

HTML was developed by Tim Berners-Lee in 1991 and has since been the standard for
creating and designing websites. It now constantly goes through changes that is maintained
by the W3C (World Wide Web Consortium). The W3C is the organization in-charge with
designing and maintaining HTML

HTML is consist of a series of short codes typed into a text-file. These short codes usually
contain HTML tags. HTML tags are symbols that tell your browser how to display the text of
a webpage. Programmers use HTML tags to design and create websites. We will discuss more
on HTML tags in the next chapter.
] Untitled - Notepad -
.Eile Edit Format View .!:!elp
<!DOCTYPE ht ml.>
<ht ml>
<body>

<hl>My Fi rst Headi ng</h1>

<p>My fi rst pa ragraph . </p>

</body>
</ht ml >l

Figure 2: Examples of an HTML Program


Source: https:ffwww.w3schools.com/htmlfimg notepad.png
Date Retrieved: October 15, 2018

In figure 2, you can see an example of an HTML program. The words enclosed with"<" and
">"symbols are the HTML tags. These play an important role in designing websites.

HTML files are usually created using text editors. These files are usually saved with a ".html"
extension. In this way, you are telling your computer that the file is an HTML document.
These files can then be viewed by using Internet Browsers.
Lesson 2: History of HTML
HTML and its History

Timeline of Web Technologies

• • • • • • • • •
1991 1994 1996 1997 1998 2000 2002 2005 2009

HTML2 css 1 HTML4 css 2 XHTML 1 HTML5


Tableien
Web 121

Figure 3: Timeline of Web Technologies


Source: http:J/www.tipsforyourwebsite.comfwp-contentfuploads/2017/02/htm!S-timeline.jpg
Date Retrieved: October 15, 2018

In the 1980s, a physicist named Tim Berners-Lee, who was working for CERN (European
Organization for Nuclear Research) at the time, prototyped and proposed a system called
ENQUIRE. This system will allow Berners-Lee and his fellow researchers at CERN to share
and used documents. This was known as the predecessor of HTML.
Figure 4: Tim Berners-Lee at CERN
Source: https:jjhome.cernjsitesfhome.web.cern.ch/filesjimagejfeatured/2013/12/berners-lee.jpg
Date Retrieved: October 15, 2018
In 1989, Berners-Lee proposed yet another kind of system. This system is an internet-based
hypertext system which he then called HTML. The following year, 1990, he began to develop
the browser and the server software.

In late 1991, he released a document called "HTML tags". This was the first publicly available
description of HTML which he first mentioned over the internet.

In early 1994, Berners-Lee began working with the IETF (Internet Engineering Task
Force), and created an HTML Working Group. And by 1995, they completed HTML 2.0. This
version of HTML was the first to be set as the standard for future HTML implementations.

HTML
2.0
Figure 5: This logo indicated that a Web site was HTML 2.0 compliant and adhered to HTML 2.0 standards.
Source: https://upload.wildmedja.on~/wikipedia/commons/thumb/1/18/Valid HIML 2.0.svg/2000px·
Valid HTML 2.0.syg.png
Date Retrieved: October 15, 2018
In 1996, specifications of HTML have been since maintained by the W3C.

r'®

Figure 6: This logo indicated that a Web site was HTML 2.0 compliant and adhered to HTML 2.0 standards.
Source: htt.ps://aws.amazon.comfblogs/opensource/amazon-joins-w3c/
Date Retrieved: October 15, 2018

In 2000, HTML also became an international standard (ISO/IEC 15445:2000). Also in late
1999 up to 2001, HTML 4.01 has been published and refined.
HTML
4.0
Figure 7: This logo indicated that a Web site was HTML 4.0 compliant and adhered to HTML 4.0 standards.
Source: https://upload.wjkimedja.ore/wikipedjafcommons/thumbffjff/Yalid HTML 4.0.syg/2000px-
Valid HTML 4.0.svg.png
Date Retrieved: October 15, 2018

In 2004, development for HTMLS has begun in the WHATWG ( Web Hypertext
Application Technology Working Group). This became a joint deliverable with the W3C
in 2008 which was completed and standardized on October 28, 2014.

HTMLS is the current version of HTML being used today. HTMLS also supports mobile web
browsers.
Lesson 3: How Does HTML5 Work?
HTML Files and Tags
As mentioned above, HTML files are consists of tags. These tags are used to format the
appearance of your web page.

J Untitled - Notepad - C]

-File -Edit Format


- -View .tfelp
<!DOCTYPE html> "'
<html>
<body>

k h1>My First Headingk/ h1>1

I<p>~ty first paragraph .1</ p>l

</ body>
</html>

Figure 8: Example of an HTML file and its Tags


Source: https;f/www.w3scbools.com/html/img notepad.png
Date Retrieved: October 15, 2018

In figure 8, the tags are shown in boxes. These tags do not appear on the actual webpage
because they are used for formatting purposes only. However, the texts "My First Heading"
and "My First paragraph." are not tags and therefore will be displayed on your web page.
There are a number of tags available for your to use. We will discuss these tags in the next
module.

Creating HTML Programs


Creating HTML Programs can be done by using any text editors. Here are some example.
a. Notepad
This is one of the most popular text editors used for creating HTML programs. It's found
on any version of Windows and is easy to use.
helloWorld.txt -
Edit Format View
owor

Figure 9: Windows Notepad


b. TextEdit
This is the default text editor for Mac Computers. It can also be used for creating HTML
programs.
TextEdit File Edit Format View Window Help
e e Untitled

Figure 10: Text Edit

For professional website development, a number of advance tools can be used. These
applications are usually equipped with features that can make development easier.
a. Notepad++
Notepad++ is an advanced text editor that can be used for creating HTML programs.

o· -.- ............
tOt Vrt
o-iBfl
(Doc:!-.t~
,...., IJ<w £AC.Ct!_!'i 1~~·
• • ..;: I -¥ ll::
41 '
•.
:t """'' ._
-1•
....,,.
~t· ~::~ :-•Qtr
~ -
•I 't" ...,

1 4
..
....9. . Y£..... I
ft

>
Gawl • '" Ullii' '~l .-:-
I~ l..s. "AA
X

.....
< : l tle)~~·· UO.~t~1~lc>
H-
............ "'·
... I
~;~
~f.t.O~.JIU.Yir4o- ...
8 NQ.1....._,kll
,Nof.,:fd_p~_lff~o-
••• ..
..
<~ t:•

<•'-•
~~--····-·o..r-lpt.tOtl" cc~~ - ~~-~~~*d

:JAA•" ''kq...Ord.r. :::~o:>:•'-0'- "'" T'~U.-.-t..rV'Ir IM~p~~~ t


. .l • r~ •ou.ra~~

,
uoct. ... ,u,.- llhldb ..,.,
,.Q...pll\1. 6o!rr111u..4. ,, t

'
••• ••. <1~ te :• ••1cerna~~ t ;~e-~lPJ1le~tlOO/YSS~xnl" ~tie-~7ollav Not~a~tt lrith ~
t:lf(ppl.g~rtdl
••• <1~ :~1- •styl~beet' ~ne-'"~xt/~•· tx~r- 'l •~~~~•fapp_ol.o••~ /~
51Hpp(on~•ndt
•••
.... • <ttn~ T • " • • • t.yl~~·· • t't.,..-to"''CI':/Nif • ~ .. • r • "' { N!l.fltf,C/<'!q./t!Qf't~/ci'NI\(t.'l~rt t, 0*• "/:
s~~M<"ts
W11cw' .'
<1.1 n..'t e..• ' • borLenl.. toaa"' i!;:!'".,l •~t.Lp : //-~- pltut-15-h... . e'l"ttfiU-h/ t n•~/r.•~••
<' ( . 1 lt• U 'JJ><lt.:.lc c• ... •••..
t.-lc..ho.•t.• tn1• '"~C..X!.{IIO.t•• tu•: .....
..,
,._,.,~..,, ......
~ .......
' ln.crt.,..:lpbupp'"'"-
•••
>OG
1t <11t'. k ru c-t- .. h.t.tP'$1//pl.u.. . QOOt:loO' .co.b/J.llU32"1)t~'OUt172!iCt"' u::l• ' PG.bll.Jibcr" I>

d - .... "' .
'"'1.'1- " text/JI'IVe.terr1pt"l
""'nd7K. -~r; - i l.env: ~t'J; .
. .
... CltucLLQII ()
, .,...,.. ~ .. !leeus.ut.e~e•t.e ~lb.J!~tc :l-tl5'- · · :

-- po.~

nr ~ •
.. .. ':':.)(!. .~v~~L-~t"l ~··~~ •
Oom.:a-'!Ot: . Qe:Ele<r.'!~~yroqt_iUI!:( '".t.::uv .. • ( 0.)'
~lS:O.~TC • b~:~= ~~~~-~ . QMO?l~.~~ ~ ~•

• . •·~•ce::-.;:~ .~u=h.1o:c (J:o • •) :


• II 0 : !,

CIIICXJ.,t. L~~ ··t¢Kt/)•~·~~;pt• ;I ;e:• ··M.tp ; I /CtXtfl.~lY. o.../~~ ·""1 1. , , ••, ... } . ..,<1

••
u
< 0¢!,:..1)~ t~~· ·ce1t/)~v~:~pt• ~:-c•''/olU<t~s/ls/.,._cl )t•K/ JO¥-l.J)~)

> ( I!";U.{I"= r- jT·~ · · :4!'1""" /)~Y-88-"TlPt .. • re• •'l'<t ~ 1//IIPt" 'JOC'Vlott. ooniJ•Irl"~·)~'K/ "1
•. .
.
... •
<t:-e~ e ~-af •"f'l.t.tp://"O~)!i WI -=-1~.0~/,.

s.M
/':1
•
HJp~ ,.,.. ._.,,.,.., tet~gwge fi-e l!fi.!Jill : 75~ (ol ~l ()o,:\W~-. 1/TF··
••tlf.t: ' " ' "Ill
"''
Figure 11: Notepad++
Source: https://cdn.mos.cms.futurecdn.net/416543cec21b3758ae43072bfa3e52eb-650-80.pn~
Date Retrieved: October 15, 2018
b. Atom
A powerful text editor that can be used by any platform. It is designed to be simple to
use out of the box, but also easily expandable using hundreds of packages.

... II .atom
config.cson X

> II .node gyp


' welcome':
> • . npm · showOnStartup ·: •.,] '>t'
> • compile cache 'editor':
·fontS i ze · : · '
> II drv ' softWrapAtPreferredlinelength': tru ..
' showlndentGuide ·: ! 'u•·
) • p.l( k del<' s
' core':
> • o:,toraqP 'destroyEmptyPanes': ! n;~·
· di sabledPackages': ~
. ·, .lJS Store
'autocomplete-plus'
~ conflg.cson 'css-color-highlighting '
~· . ' etnmet '
;
.- : <,tylt•5.1PSC.
_, ]
'spell-check·:
grarrvnars ·: [
'text.plain '
' source.gfm '
. '

Figure 12: Atom


Source: https:/1 cdn.mos.cms.futurecdn.netjbf4798ba31 b 7c9e32439df59e5169c75 -650-SO.j pg
Date Retrieved: October 15, 2018
c. Vim
This text editor is for the more advance users. It might be a little difficult to learn at first
but can be a useful tool for web design once mastered.
..
-- -.. ........ ..... .... ......... I I
... . •t41M
...... - J . .c
t ' ""' tlot f I I t ..... ,a~po,

....., ......... - ........... ,

·--~ -·--
- -· -.
,., ...
••._,. . '~ ...... -

.......... _
..,.......
~···

...,. l.# (..., 1n•


, . ._,

,.,...,,_J
, . . . ., ..(1
.. -· ..... h • , lo

.......... ...... .... .


~ ., ,.. fMUtl•
u. ••• 1111 .... . . .

!Vf" .oll'llf!11 _ ... ~Uil t-. .,._, • lJ•


I
... ......,fi,.!IU

_ ... -
,.,'HJ
••t o ' '""' hw~ J~f" If~ I N ........ 1 .1'••
,.,, r ""f-1.'''"
, . . , . • • •• - ... h . n1!il..fl . . . , ........ , ....... -
...... ...,. ' . _ , t(.·'
-•··••- •' ..,_, ,_.,. ...., •• II••
•n 1

' H I ' . ., ...


- - -o..i .JO . . • , .... . , ,. , , • • • ' -· - · · ·- ·

..._j " , , ,.~,


Uu
........
•• ... " ' '
..... l ..........,._... ... •trt...•f - . J

.. -co ·~ .... ("


.~

....
"'" "
...-.cuu
~u-.
f •• W>
~ ~ . .. u.... n ,_.,..'"' r

• ...
i' .. .,., •t.w ,_ -tl•
~· .t . ..... -~..
t t

u ,,_. ~­
• ,.,,
<
•-..,..

._.... .....
o1• - .- 1r -
~.--
- · -..•INII¥;;uo
......
., • •....-... ............... - ••, ...... ... r.'"' _ .... ·- ......... .... .. --........ ... "4 .. ..,....
~

._.,.,...... _.,.1...~ ..... - ..............._ ·~ ...... ......t', ............. · - .... . . . . . . -,I -

~ .....
"'-• . ....... - l t ...._.. • •• \ ... _ . . - - · ~_ . . _ , . , .... ..... ... . _,.........,., .. - ..... " " a.l.l .., ...... · · - · · •• · - ....... . . . . ,.. ~

..,U•"
"", . . . . ...... .
....
.t... "'
-···
, .. , ......... lir, · ~.,··
L.-• -.1
•h t l -
h tl•"' .,... I
-
; """

·~ •
t.
\ · - -· . . , ... ~._. cl.,.•....ttl'
n h ... _ . c'l "o ....l\1°
n-rt ....,.... ...... ,..._,.n ,..
...,, ,. • .....,....._..,_, wt• M
. . , ..,....,,...,. • · - , . ,.- lt4.t"''" ,,. -~•,. . . . . ,......, ... -t..-t

, ,.. . ......... ., .. ,_.,.._, •::.- -,<' •'• ......,. ..,. rt'<!*"t ' ' • ..,. ......... ·~~J1
n

ll• h.pt..-ur , __.• H•

~··
..._.., tlu__,.,.,,_
o\•

•;...,...,,
, -:...... W\1. u . l

Figure 13: Vim


Source: htt.ps :f/cdn.mos.cms.futurecdn.net/f4b7 a1789dd4942dd2Sf8c04c7bOOff4-650·80.png
Date Retrieved: October 15, 2018
Viewing HTML Programs
You already know how HTML files are created and the tools used to create them. But how do
you view HTML Programs as Web pages? This is where a web-browser comes into play. Web-
browsers are applications used to view web pages.

There are a number of popular web-browsers that you can use. Here are some of them.

a. Mozilla Firefox
This is the browser developed by Mozilla. It has a lot of features that can make web
browsing smooth.
-tot>
4-~ C'G)

Q. $to:jt(f!l"f \\.b .. .
~a •
: :lOP SITU•
•

~-
m
-- - - •- ·-
'!I ® ~
,:::;,

w
- a 0 (i)
-- ·- -- - --
~I.(

0 l:fOOflol,.l«<to ev JIOCI!rt • ,,

AulOn- u• C..... · t 110 .._._ TIW l. .o;oM 01 f i . l


" '• • • 01 · · · - ;" •
fht..,c:v
u.o;.,....,
~ _..
...... ....._._
_,,..
wotlcr. boldu l ~~~m~ ....
,,. .,..,.whocOOWI,..•dill
Cltaolot<•-H•OOtV 0ootc
"'"""···...
"''o..u.<o_........... ~-
~._._ _.....~oo ...
0
'

Figure 14: Mozilla Firefox


Source: https:f,/www.mozilla.org,/media,/img/firefox,/home,lnew-tab.alc9f06dcebe.png
Date Retrieved: October 15, 2018
b. Google Chrome
A browser launched by Google. It's one of the popular web-browser of choice today.

eee G Googlo Vteo

t- C 0 0 mtps t /WWW.google.ca{

Goog!~

-- ......
Figure 15: Google Chrome
Source: https://sfogliare.com/wp-content/uploads/2018/09/8683 google chrome- for mac 1 2 12 16.png
Date Retrieved: October 15, 2018
c. Opera
Another alternative web-browser you can use. It has a clean UI and is easy to use. But it
has lesser plugins than its rivals.

+ -. -
c

You(B ama~on

eb :iY

Figure 16: Google Chrome


Source: https://sfo~liare.com/wp-contentjuploads/2018/09/8683 ~oo~e chrome- for mac 1 2 12 16.pn~
Date Retrieved: October 15, 2018
d. Microsoft Edge
A browser by Microsoft that is built-in with Windows 10.
f] - - -Oool- •

' 0 -

__
_,..,....,
...."_
........
•
..... • c.. ..
(l)l'lo.-f#l ... .......

•
·-·-
..... . , . . . . "(j)ff

*"""''"""'_"...,.
i'f'll. . .

.........
"
- ""'---·
......... ..........
..................."~

·•• '"'"" ' clotjooi.l)


II •
nnuw.......... ,.......
·~·
l._.., ................
....................

••
... l
Q t .. C • Q e ' I 1 fiji
1
~·_,•
..ol
'
e. Safari
A browser built-in with every Mac OS.

....
..... 0 ~

G oogle

Figure 18: Safari


References and Supplementary Materials
Books and Journals
1. Jain, R.K. (2015).1T Tools and Business Systems. Delhi, India: Khanna Book Publishing

2. McFedries, P. (2016). My Office 2016. Pearson Education

3. Rich, J.R. (2017). Working in the Cloud: Using Web -Based Applications and Tools to
Collaborate Online. Indianapolis, Indiana: QUE Publishing

Online Supplementary Reading Materials


1. HTML Introduction. https:ffwww.w3schools.comfhtmlfhtml intro.asp Date of
Access: October 15, 2018

2. A Brief History of HTML. https:ffwww.wired.com/1997 /04/a-brief-history-of-


html/ Date of Access: October 15, 2018
'

3. How Does HTML Work. http://www.tech-faq.comfhow-does-html-work.html Date


of Access: October 15, 2018

4. HTML5 Tutorial. https:ffwww.tutorialspoint.comfhtmlS Date of Access: October


15, 2018
Online Instructional Videos
1. HTML Crash Course for Beginners. https:/Jwww.youtube.comjwatch?v=UB1030fR-
EE Date of Access: October 15, 2018
2. HTML5 Tutorial. https:L/www.youtube.comjwatch?v=kDyJN7qQETADate of
Access: October 15, 2018
3. Learn HTML5. https://www.youtube.comjwatch?v=DPnqb74Smug Date of Access:
October 15, 2018

You might also like