HTML5

Published on February 2017 | Categories: Documents | Downloads: 59 | Comments: 0 | Views: 338
of 7
Download PDF   Embed   Report

Comments

Content

Basic Framework of a Document
An HTML document essentially consists of the following parts:
1. Document type declaration
Header area(search engine–relevant meta information, page title, ref to JS or
CSS)
2. Document body
In the header area, <head>...</head>, for example,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>First Page</title>
</head>
<body>
<!--Page content -->
</body>
</html>

Basic page of an SAPUI5 application as a sneak

preview of the following chapter (see Listing 1.3).
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs"sap.ui.commons"
data-sap-ui-theme="sap_goldreflection" >
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>

The basic elements are included here as well:

1. Document type declaration(The document type determines what markup
language you use in what version.)
eg <!DOCTYPE html>
Note: Document Type

Always use the HTML5 document type even if, strictly speaking, you do
not
use any HTML5 functions. Because HTML4 is integrated completely in
HTML5,

you can access all HTML4 functions with the HTML5 document type.
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Header area (Records the following information)
a. Metadata such as the character encoding used
b. EE Logical connections and links to other resources
c. EE Style sheet definitions throughout a document
d. EE Areas for JavaScript
eg
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection" >
</script>
</head>
Compatibility mode : The meta-attribute X-UA-Compatible in line 2 indicates the
setting for the document compatibility mode in Internet Explorer. Here, the edge
mode specifies that content is to be displayed in the highest mode available
JavaScript : The path to a JavaScript library is specified in the next line
<script src="resources/sap-ui-core.js...
3. Document body

HTML5 Element Index
Head



doc

Sections

body

Grouping

p

Tables



tabl

Forms

form

Forms 2

keyg

type

l

d




htm e

hea

title on
bas

e

articl
hr

pre 
nav 
blockq

aside uote
secti
ol


ul
head
li

dl, dt,

foote dd

figure
h1- 
figcap

tion
main
div 
addr

er




link
met

styl

scri

a

e

pt


r
h6

ess
nos

cript

Interactive


details



summ
ary



comm
and



menu

Edits
 del, ins 












e
ion
d
y


capt

thea

tbod

set
nd

field

lege

label
inpu

en
outp
ut
prog
ress
meter

t

tfoot

tr
on
th 
ct
td
col 
colg list

roup
roup

on

area

butt
sele
data
optg
opti
text

Embedded
Text-level
Text-level 2
img 
a

time
iframe
em 
code
embed
stron 
kbd
g
object

samp
i, b 
param
var
u
video 

mark
s
audio 

bdi
small
source
bdo
abbr 
canvas
ruby, rt,
q
rp
track 
cite 
span
map 
dfn 
br
area 

sub, 
wbr

sup

HTML Attributes
HTML Attributes
 HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"

1. lang Attribute
The document language can be declared in the <html> tag.
Declaring a language is important for accessibility applications (screen readers) and
search engines:
2. The title Attribute
3. href Attribute
HTML links are defined with the <a> tag. The link address is specified
in the href attribute:
4. Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided
as attributes:

5. alt Attribute

The alt attribute specifies an alternative text to be used, when an HTML element cannot be
displayed.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Styling
Every HTML element has a default style (background color is white and text
color is black)
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Style Attribute : The HTML style attribute has the following syntax:
style="property:value"
Text Color : The color property defines the text color to be used for an
HTML element:
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
Fonts: The font-family property defines the font to be used for an HTML
element:
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
Text Size : The font-size property defines the text size to be used for an
HTML element:
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>

Text Alignment :The text-align property defines the horizontal text
alignment for an
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>

HTML Formatting Elements
In the previous chapter, you learned about HTML styling, using the
HTML style attribute.
HTML also defines special elements, for defining text with a
special meaning.
HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.
Formatting elements were designed to display special types of text:
 Bold text
 Important text
 Italic text
 Emphasized text
 Marked text
 Small text
 Deleted text
 Inserted text
 Subscripts
 Superscripts
<b> element defines bold text
<strong> element defines strong text
<i> element defines italic text
<em> element defines emphasized text
<small> element defines small text
<mark> element defines marked or highlighted text
<del> element defines deleted (removed) of text
<ins> element defines inserted (added) text

<sub> element defines subscripted text
<sup> element defines superscripted text
<q> element defines a short quotation.
<blockquote> element defines a quoted section
<abbr> element defines an abbreviation or an acronym.
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
The WHO was founded in 1948.
Marking up abbreviations can give useful information to browsers, translation
systems and search-engines.

<address> element defines contact information usually displayed in italic
<cite> element defines the title of a work sually display <cite> elements in
italic
<bdo> element defines bi-directional override

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close