Download - 01 - HTML Basics
-
7/31/2019 01 - HTML Basics
1/49
7/2/2012
1
WhatisHTML?
Gettingyoustarted
HTML standsfor.
Hyper
Text
MarkupLanguage
-
7/31/2019 01 - HTML Basics
2/49
7/2/2012
2
HTMLspecification
TheofficialtechnicalrulesofHTML
Definitions
Usageparametersofcompletetagset
Tagattributeset
Characterreferenceentities
Evolved
from
version
1.0
2.0 3.2 4.0 4.1
WhatDoWebBrowsersDo?
InterpretHTMLdocuments
DisplayHTMLdocuments
-
7/31/2019 01 - HTML Basics
3/49
7/2/2012
3
WhydosomeWebpageslook
differentin
different
browser?
Publishedextensions(unofficialadditions)areproducedbyotherspartiesotherthantheW3C
BecausetheextensionsdeviateawayfromtheofficialHTMLstandardtheycreatealackofconformityandareinterpretedbydifferentbrowsers
differently.
HTMLs4PrimaryConcepts
Publishinginformationviahypertextandhypermedia
Ascriptinglanguage(HTMLfamilytag)
Asoftwareapplicationtolocate,download,interpret
and
display
data
via
the
WWW.
Awebspecificdatatransferprotocol(HTTP:HyperTextTransferProtocol)
-
7/31/2019 01 - HTML Basics
4/49
7/2/2012
4
WhatisHypertext?
A way documents, files and multimedia
data are organized, navigated and
referenced through the Internet.
Tell the browser what to do, and what props
to use.
A series of tags that are integrated into a
text document.
Whyuseit?
Tomakealotofinformationavailableinoneplace
Makeinformationeasytolocate
Allowsmultiplywaystonavigatetowantedinformation
via
hyperlinks.
-
7/31/2019 01 - HTML Basics
5/49
7/2/2012
5
WhatisaHyperlink?
Avisiblenavigationalanchorthatpointsto(linksto)anothersourceofinformation(document,multimediaobject)
NOLimittoamountofhyperlinksinagiven
place
Hyperlinkcanonlylinktoonedocumentor
multimedia
file
NonlinearInformation???
Youdonthavetoreadfromstarttofinishfortheinformationtomakesense.
Youcanreadtheinformationyoudesireandclicklinkstobringyoutodifferentlocationsto
learnabout
something
else.
Nonlinear Nonhierarchical borderless:NOpredeterminedorder
-
7/31/2019 01 - HTML Basics
6/49
7/2/2012
6
WhatisHypermedia?
Hypertext+Multimediafiles(audio,videoandanimation)
Linkstostreameddata
HTMLisaScriptinglanguage?
Madeupoftagsthattellthebrowserwhatinformationtodisplay(content)andhowtodisplayit(format).
HTMLdocument=Webpage
Includescontent(wordsorpicturesonpage)
Includesinstructionsonhowtodisplayinfo.
-
7/31/2019 01 - HTML Basics
7/49
7/2/2012
7
Scriptinglanguagevs.
Programminglanguage
Programminglanguages(C++,Pascal,orJava)haveapplicationfilesandassociateddatafiles
ScriptingLanguage(a.k.a.markuplanguage,HTML)haveinstructions(HTMLtags)anddata(nontagHTMLdocumentcontent)arecontained
within
a
single
file.
HTTPHypertextTransferProtocol
ItprovidesastandardforWebbrowsersandserverstocommunicate.
TransferProtocolisamethodbywhichinfois
transferredbetween
a
server
computer
and
a
clientcomputeracrosstheinternet.
ThetransferprotocolyouspecifyinthelinkinanHTMLdocumentdeterminesthetypeofservertowhichyouarereferring
-
7/31/2019 01 - HTML Basics
8/49
7/2/2012
8
MajorTransferProtocols
ThetransferprotocolyouspecifyinthelinkinanHTMLdocumentdeterminesthetypeofservertowhichyouarereferring
Transfer
Protocol
Server Type URL Syntax
FTP FTP ftp://ftp.domain.com
HTTP Web http://www.domain.com
MailTo E-mail mailto: [email protected]
News Newsgroup News://news.domain.com
nntp://news.domain.com
WhatsanHTMLDocument?
Filesarchived(saved)onWebservers
MustbeASCIIfileformat(a.k.a.plaintextorDOS)
Maybeanybytecountsize
Mayassumeeitherportrait,landscape,acombinationofboth,orothernontraditionallayoutschemes;
Mayincludetwochiefelements:
1. HTMLscript(tags,tagattributesandcharacterentities)
2. nonHTMLcontent(text,images,ormultimedia)
-
7/31/2019 01 - HTML Basics
9/49
7/2/2012
9
HowtoCreateHTML
Document
Useanystandardtexteditor,wordprocessororHTMLeditor(MSFrontPage)
***MUSTsaveasASCIItext(plaintextorDOStext)
StructureofHTMLDocument
HTMLdocumentcontains2sections
HeadSection
BodySection
-
7/31/2019 01 - HTML Basics
10/49
7/2/2012
10
HeadSection
ProvidesbrowserswithspecificlogicaldatarelatedtotheWebpagesuchas:
Documenttitle
InformationinHeadsectiondoesNOTappearonWebpage.
BodySection
Containsalltheinfo.Thatisdisplayedinthebrowser.
Browserdoesnotrecognizeanymorethanasinglespacebetweencontentwords.
Browserwill
ignore
the
following:
Linebreaks
Paragraphbreaks
Multiplenonbreakinghorizontalspaces
-
7/31/2019 01 - HTML Basics
11/49
7/2/2012
11
HTMLBasicsHTML,Text,Images,Tables,Forms
TableofContents
1. IntroductiontoHTML
HowtheWebWorks?
WhatisaWebPage?
My
First
HTML
Page BasicTags:Hyperlinks,Images,Formatting
HeadingsandParagraphs
2. HTMLinDetails
TheDeclaration
TheSection:Title,Meta,Script,Style22
-
7/31/2019 01 - HTML Basics
12/49
7/2/2012
12
TableofContents(2)
TheSection
TextStylingandFormattingTags
Hyperlinks:
HyperlinksandSections
Images:
Lists:
,
and
HTMLSpecialCharacters
3. Theandelements
23
HowtheWebWorks?
WWWuseclassicalclient/serverarchitecture
HTTPistextbasedrequestresponseprotocol
24
Pagerequest
ClientrunningaWebBrowser
ServerrunningWebServerSoftware
(IIS,Apache,etc.)
Serverresponse
HTTP
HTTP
-
7/31/2019 01 - HTML Basics
13/49
7/2/2012
13
WhatisaWebPage?
Webpages aretextfilescontainingHTML
HTML HyperTextMarkupLanguage
Anotationfordescribing
documentstructure (semanticmarkup)
formatting (presentationmarkup)
Looks
(looked?)
like: AMicrosoftWorddocument
Themarkuptagsprovideinformationaboutthepagecontentstructure
25
CreatingHTMLPages
AnHTMLfilemusthavean.htm or.html fileextension
HTMLfilescanbecreatedwithtexteditors:
NotePad,NotePad++,PSPad
OrHTMLeditors(WYSIWYGEditors):
MicrosoftFrontPage
MacromediaDreamweaver
NetscapeComposer
MicrosoftWord26
-
7/31/2019 01 - HTML Basics
14/49
7/2/2012
14
HTMLBasicsText,Images,Tables,Forms
HTMLStructure
HTMLiscomprisedofelementsandtags
Beginswith andendswith
WhenwritingXHTML,mustdefineanamespace
Elements(tags)arenestedoneinsideanother:
Tagshaveattributes:
HTMLdescribesstructureusingtwomainsections: and
28
-
7/31/2019 01 - HTML Basics
15/49
7/2/2012
15
HTMLCodeFormatting
TheHTMLsourcecodeshouldbeformattedtoincreasereadabilityandfacilitatedebugging.
Everyblockelementshouldstartonanewline.
Everynested(block)elementshouldbeindented.
Browsersignoremultiplewhitespacesinthepage
source,soformattingisharmless.
For
performance
reasons,
formatting
can
be
sacrificed.
29
FirstHTMLPage
30
MyFirstHTMLPage
Thisissometext...
test.html
-
7/31/2019 01 - HTML Basics
16/49
7/2/2012
16
MyFirstHTMLPage
Thisissometext...
FirstHTMLPage:Tags
31
Openingtag
Closingtag
AnHTMLelementconsistsofanopeningtag,aclosingtagandthecontentinside.
MyFirstHTMLPage
Thisissometext...
FirstHTMLPage:Header
32
HTMLheader
-
7/31/2019 01 - HTML Basics
17/49
7/2/2012
17
MyFirstHTMLPage
Thisissometext...
FirstHTMLPage:Body
33
HTMLbody
SomeHTML
Tags
-
7/31/2019 01 - HTML Basics
18/49
7/2/2012
18
SomeSimpleTags
HyperlinkTags
ImageTags
Textformattingtags
35
LinktoTelerikWebsite
Thistextisemphasized.
newline
Thisoneismoreemphasized.
SomeSimpleTags Example
36
SimpleTagsDemo
Thisisalink.
Boldanditalictext.
sometags.html
-
7/31/2019 01 - HTML Basics
19/49
7/2/2012
19
SomeSimpleTags Example(2)
37
SimpleTagsDemo
Thisisalink.
Boldanditalictext.
sometags.html
TagsAttributes
Tagscanhaveattributes
Attributesspecifypropertiesandbehavior
Example:
Fewattributes
can
apply
to
every
element:
id,style,class,title
Theid isuniqueinthedocument
Contentoftitle attributeisdisplayedashint
whentheelementishoveredwiththemouse
Someelementshaveobligatoryattributes38
Attributealt withvalue"logo"
-
7/31/2019 01 - HTML Basics
20/49
7/2/2012
20
SomeSimpleTags
39
HeadingsandParagraphs
-
7/31/2019 01 - HTML Basics
21/49
7/2/2012
21
HeadingsandParagraphs
HeadingTags(h1 h6)
ParagraphTags
Sections:div andspan
41
Thisismyfirstparagraph
Thisismysecondparagraph
Heading1
Subheading2
Subheading3
Thisisadiv
HeadingsandParagraphsExample
42
Headingsandparagraphs
Heading1
Subheading2
Sub
heading
3
Thisismyfirstparagraph
Thisismysecondparagraph
Thisisadiv
headings.html
-
7/31/2019 01 - HTML Basics
22/49
7/2/2012
22
Headingsandparagraphs
Heading1
Subheading2
Subheading3
Thisismyfirstparagraph
Thisismysecondparagraph
Thisisadiv
HeadingsandParagraphs
Example(2)
43
headings.html
IntroductiontoHTMLHTMLDocumentStructureinDepth
-
7/31/2019 01 - HTML Basics
23/49
7/2/2012
23
Preface
ItisimportanttohavethecorrectvisionandattitudetowardsHTML
HTMLisonlyaboutstructure,notappearance
BrowserstolerateinvalidHTMLcodeandparse
errors youshouldnot.
45
The Declaration HTMLdocumentsmuststartwithadocument
typedefinition(DTD)
Ittellswebbrowserswhattypeistheservedcode
Possibleversions:HTML4.01,XHTML1.0
(Transitionalor
Strict),
XHTML
1.1,
HTML
5
Example:
Seehttp://w3.org/QA/2002/04/validdtdlist.html foralist
ofpossibledoctypes
46
-
7/31/2019 01 - HTML Basics
24/49
7/2/2012
24
HTMLvs.XHTML
XHTMLismorestrictthanHTML
Tagsandattributenamesmustbeinlowercase
Alltagsmustbeclosed(
,)whileHTMLallows
and andimpliesmissingclosingtags(
par1
par2)
XHTMLallowsonlyoneroot element
(HTMLallows
more
than
one)
47
XHTMLvs.HTML(2)
ManyelementattributesaredeprecatedinXHTML,mostaremovedtoCSS
Attributeminimizationisforbidden,e.g.
Note:WebbrowsersloadXHTMLfasterthanHTMLandvalidcodefasterthaninvalid!
48
-
7/31/2019 01 - HTML Basics
25/49
7/2/2012
25
The Section
Containsinformationthatdoesntshowdirectlyontheviewablepage
Startsafterthe declaration
Beginswith andendswith
Containsmandatorysingle tag
Cancontainsomeothertags,e.g.
49
Section:tag
Titleshouldbeplacedbetween and tags
Usedtospecifyatitleinthewindowtitlebar
Searchenginesandpeoplerelyontitles50
TelerikAcademy WinterSeason2009/2010
-
7/31/2019 01 - HTML Basics
26/49
7/2/2012
26
Section:
Metatagsadditionallydescribethecontentcontainedwithinthepage
51
UsingScripts
-
7/31/2019 01 - HTML Basics
27/49
7/2/2012
27
Section:
The elementisusedtoembedscriptsintoanHTMLdocument
Scriptareexecutedintheclient'sWebbrowser
Scriptscanliveinthe andinthe
sections
Supportedclientsidescriptinglanguages:
JavaScript(it
is
not
Java!)
VBScript
JScript
53
TheTag Example
54
JavaScriptExample
functionsayHello(){document.write("
HelloWorld!");
}
sayHello();
scriptsexample.html
-
7/31/2019 01 - HTML Basics
28/49
7/2/2012
28
EmbeddingCSSStyles
Section:
The elementembedsformatting
information(CSSstyles)intoanHTMLpage
56
p
{
font
size:
12pt;
line
height:
12pt;
}p:firstletter{fontsize:200%;}
span{texttransform:uppercase;}
Stylesdemo.
Testuppercase.
styleexample.html
-
7/31/2019 01 - HTML Basics
29/49
7/2/2012
29
Comments:Tag
Commentscanexistanywherebetweenthe tags
Commentsstartwith
57
-
7/31/2019 01 - HTML Basics
30/49
7/2/2012
30
TextFormatting
TextFormatting
Textformattingtagsmodifythetextbetweentheopeningtagandtheclosingtag
Ex.Hello makesHellobold
bold
italicized
underlined
Samplesuperscript
Samplesubscript
strong
emphasized
Preformatted text
Quoted text block
Deleted text strike through
60
-
7/31/2019 01 - HTML Basics
31/49
7/2/2012
31
TextFormatting Example
61
PageTitle
Notice
ThisisasampleWebpage.
Nextparagraph:
preformatted.
More
Info
Specifically,wereusingXHMTL1.0transitional.
Nextline.
textformatting.html
TextFormatting Example(2)
62
PageTitle
Notice
ThisisasampleWebpage.
Nextparagraph:
preformatted.
MoreInfo
Specifically,wereusingXHMTL1.0transitional.
Nextline.
textformatting.html
-
7/31/2019 01 - HTML Basics
32/49
7/2/2012
32
Hyperlinks
Hyperlinks:Tag
Linktoadocumentcalledform.html onthesameserverinthesamedirectory:
Linktoadocumentcalledparent.html onthesameserverintheparentdirectory:
Linktoadocumentcalledcat.html onthesameserverinthesubdirectorystuff:
64
FillOurForm
Parent
Catalog
-
7/31/2019 01 - HTML Basics
33/49
7/2/2012
33
Hyperlinks:Tag(2)
LinktoanexternalWebsite:
AlwaysuseafullURL,including"http://",not
just"www.somesite.com"
Usingthetarget="_blank" attributeopens
thelinkinanewwindow
Linkto
an
e
mail
address:
65
BASD
Pleasereportbugshere(byemailonly)
Hyperlinks:Tag(3)
Linktoadocumentcalledapplynow.html
Onthesameserver,insamedirectory
Usinganimageasalinkbutton:
Linktoadocumentcalledindex.html
Onthesameserver,inthesubdirectoryenglish of
theparentdirectory:
66
Switchto
Englishversion
-
7/31/2019 01 - HTML Basics
34/49
7/2/2012
34
HyperlinksandSections
Linktoanotherlocationinthesamedocument:
Linktoaspecificlocationinanotherdocument:
67
GotoIntroduction
...
Introduction
GotoSection
3.1.1
In
chapter3.html
>...
3.1.1.TechnicalBackground
Hyperlinks Example
68
FillOurForm
Parent
Catalog
BASD
Pleasereportbugshere(byemailonly)
-
7/31/2019 01 - HTML Basics
35/49
7/2/2012
35
FillOurForm
Parent
Catalog
BASD
Pleasereportbugshere(byemailonly)
-
7/31/2019 01 - HTML Basics
36/49
7/2/2012
36
LinkstotheSameDocument
Example
71
TableofContents
Introduction
Somebackground
ProjectHistory
...therestofthetableofcontents...
Introduction
...
Section
1
follows
here
...Somebackground
...Section2followshere...
ProjectHistory
...Section2.1followshere...
linkstosamedocument.html
LinkstotheSameDocumentExample(2)
72
TableofContents
Introduction
Somebackground
ProjectHistory
...the
rest
of
the
table
of
contents...
Introduction
...Section1followshere...
Somebackground
...Section2followshere...
ProjectHistory
...Section2.1followshere...
linkstosamedocument.html
-
7/31/2019 01 - HTML Basics
37/49
7/2/2012
37
MiscellaneousTags
Insertinganimagewith tag:
Imageattributes:
Example:
Images: tag
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
74
-
7/31/2019 01 - HTML Basics
38/49
7/2/2012
38
MiscellaneousTags
:Drawsahorizontalrule(line):
:Deprecated!
:Deprecated!
75
HelloWorld!
Font3
Font+4
MiscellaneousTags Example
76
MiscellaneousTagsExample
HelloWorld!
Font3
Font+4
misc.html
-
7/31/2019 01 - HTML Basics
39/49
7/2/2012
39
Howtomakecolorschanges?
Hexadecimalnumber :
Colornames:
ChangingtheBackgroundcolor
ChangingTextcolor
Spotcolor
WENT'99
ImageBackground
MiscellaneousTags
78
-
7/31/2019 01 - HTML Basics
40/49
7/2/2012
40
MiscellaneousTags
79
CreatingLists
-
7/31/2019 01 - HTML Basics
41/49
7/2/2012
41
a. Appleb. Orangec. Grapefruit
OrderedLists: Tag
CreateanOrderedListusing:
Attributevaluesfortype are1,A,a,I,ori
81
1. Apple
2. Orange3. Grapefruit
A. AppleB. OrangeC. Grapefruit
I. AppleII. OrangeIII. Grapefruit
i. Apple
ii. Orangeiii. Grapefruit
Apple
Orange
Grapefruit
UnorderedLists: Tag
CreateanUnorderedListusing:
Attributevaluesfortype are:
disc,circle orsquare
82
Apple
Orange
Pear
o Apple
o Orange
o Pear
Apple
Orange
Pear
Apple
Orange
Grapefruit
-
7/31/2019 01 - HTML Basics
42/49
7/2/2012
42
Definitionlists:tag
Createdefinitionlistsusing
Pairsoftextandassociateddefinition;textisin
tag,definitionin tag
Renderswithoutbullets
Definitionisindented83
HTML
Amarkuplanguage
CSS
Language
used
to
Lists Example
84
Apple
Orange
Grapefruit
AppleOrange
Grapefruit
HTML
Amarkuplang
lists.html
-
7/31/2019 01 - HTML Basics
43/49
7/2/2012
43
HTMLSpecial
Characters
HTMLSpecialCharacters
BritishPound
Euro
""QuotationMark
JapaneseYen
EmDash
NonbreakingSpace
&&Ampersand>>Greater
Than
-
7/31/2019 01 - HTML Basics
44/49
7/2/2012
44
SpecialCharacters Example
87
[>>Welcome
Welcome