Scribd
Upload
58 views24 pages

Intro To HTML 5

The document introduces HTML5, including its history, syntax, semantic elements, and document structure. It defines important terms like tags, elements, attributes, values, hyperlinks, pages, and documents. It also outlines new semantic elements in HTML5 like <article>, <aside>, <nav>, and <section> that define different parts of a web page.

Uploaded by

Kawaii Glamour
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
58 views24 pages

Intro To HTML 5

The document introduces HTML5, including its history, syntax, semantic elements, and document structure. It defines important terms like tags, elements, attributes, values, hyperlinks, pages, and documents. It also outlines new semantic elements in HTML5 like <article>, <aside>, <nav>, and <section> that define different parts of a web page.

Uploaded by

Kawaii Glamour
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/ 24

INTRODUCTION TO HTML5

Prepared By:
Mary Grace G. Ventura
WHY CREATE A WEBSITE?
 A website enables you to communicate
with like-minded individuals or potential
clients on a worldwide basis.
Why WYSIWYG tools aren’t used in this
course?
 Many web design
applications make it
tempting to “hide” the
underlying code from you,
and most users end up
relying on the graphical
interface.
 This is fine until something
goes wrong and you don’t
know how to fix it.
Building Your First Web Pages
 The purpose of the WWW is
to share information.
 Its purpose is not to show off
artistic skills, nor is it to
duplicate existing information.
 Your page should provide
unique information to the
users in such a way that is
easy to understand and
pleasant to view.
DEFINITION OF TERMS
Computer Networking
 A computer network is multiple computers
connected together using a
telecommunication system for the purpose
of communicating and sharing resources.
INTERNET
 The Internet is a worldwide, publicly accessible
network of interconnected computer networks
that transmit data by packet switching using the
standard Internet Protocol.
Note:
 Packet switching is a communications
paradigm in which packets (units of information
carriage) are routed between nodes over data
links shared with other traffic.
 A packet is a formatted block of data carried by
a computer network
World Wide Web
 The World Wide Web ("WWW" or simply the
"Web") is a global information medium which
users can read and write via computers
connected to the Internet.
 The term is often mistakenly used as a synonym
for the Internet itself, but the Web is a service
that operates over the Internet, does. as e-mail
Web Browsers

 Browser: translates the HTML code


into a presentation on the screen.
Types of Browser
a. Text Based (Lynx,Elinks,DosLynx)
b. Graphical (Mosaic,Netscape Navigator,
IE,Opera,Mozilla Firefox)
Definition of Terms
 Hyper document: one that contains links
to other things or places either within or
outside the document.
 Link: a special mark place on the screen
that will cause something to happen when
you activate it.
Page vs. Document
 Page: what you see when the document is
displayed on the screen.
 Document: is the actual HTML you write.
Necessary Tools
1. HTML Editor: tool to write your
document.
2. HTML Viewer: software that lets you see
what your document will look like into the
screen.
3. ISP: to host your page.
INTRO TO HTML5
HTML5 History
 HTML5 is a markup language, has been
into existence around January 2008.
 Two groups, the W3C and the WHATWG,
are in charge of developing HTML5. 
 W3C (World Wide Web Consortium) 
 WHATWG (Web Hypertext Application
Technology Working Group). 
Markup: Tags, Elements, Attributes, and
Values
 HTML has three principal markup
components:
 Elements/ Tags
 Attributes
 Values
HTML5 - Syntax
 The HTML 5 language has a "custom"
HTML syntax that is compatible with HTML
4 and XHTML1 documents.
 HTML5 is coming with lots of flexibility and
would support the followings:
Uppercase tag names.
Quotes are optional for attributes.
Attribute values are optional.
Closing empty elements are optional.
The DOCTYPE
 Like any language, HTML5 has a
grammar and a vocabulary.
 HTML 5 authors would use simple syntax
to specify DOCTYPE as follows −
 <!DOCTYPE html>
 All the above syntax is case-insensitive.
Character Encoding
 HTML 5 authors can use simple syntax to
specify Character Encoding as follows 
 <meta charset="UTF-8">
HTML5 Semantic Elements
 Semantics is the study of the meanings of
words and phrases in a language.
 Semantic elements = elements with a meaning.
 A semantic element clearly describes its
meaning to both the browser and the developer.
 Examples of non-semantic elements: <div>
and <span> - Tells nothing about its content.
 Examples of semantic elements: <form>,
<table>, and <article> - Clearly defines its
content.
New Semantic Elements in HTML5
 HTML5 offers new semantic elements to define
different parts of a web page:  
 <article> <main>
 <aside> <mark>
 <details> <nav>
 <figcaption> <section>
 <figure> <summary>
 <footer> <time>
 <header>
Semantic Elements in HTML5
TAG DESCRIPTION
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or
hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
Semantic Elements in HTML5
TAG DESCRIPTION
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
Document Defaults
<!DOCTYPE html >
<html lang="en">
<head>
<title></title>
<meta charset=“utf-8" />
<meta name=“author” content=“type your
SURNAME, FIRSTNAME HERE”>
</head>
<body>
</body>
</html>
Facebook Group Name
 Using the search feature of FB, find the
GROUP name
CWP111_1STSEM_VENTURA_2018
 All important announcements,
assignments and hand-outs will be
uploaded here.

You might also like